巫溪会议

project/wuxi/h5/AppCheckInfo/AppCheckInfo.vue

@@ -1,12 +1,39 @@
 <template>
   <div class="AppCheckInfo">
     <div class="home-content">
+      <div class="check-info">
+        <div class="item">
+          <div class="title">
+            <img src="./img/time-icon.png" alt="">入住时间
+          </div>
+          <p>2024年4月23日至2024年4月24日</p>
+        </div>
+        <div class="item">
+          <div class="title">
+            <img src="./img/hotel-icon.png" alt="">入住酒店
+          </div>
+          <p>水韵酒店</p>
+        </div>
+        <div class="item">
+          <div class="title">
+            <img src="./img/address-icon.png" alt="">酒店地址
+          </div>
+          <p>春申大道421号</p>
+        </div>
+      </div>
+      <div class="map-info">
+        <!-- <ai-t-map :map.sync="map" ref="AiTMap" :lib.sync="mapLib" @loaded="onMapInit" /> -->
+        <!-- <ai-map class="eventMap" :map.sync="map" :lib.sync="AMap"/> -->
+        <div id="map" style="width: 100%; height: 280px;"></div>
+        <!-- <ai-map :map.sync="map" :lib.sync="AMap"/> -->
+      </div>
+      <div class="bottom-bg"></div>
     </div>
   </div>
 </template>
 
 <script>
-
+import AMapLoader from '@amap/amap-jsapi-loader'
 export default {
   name: 'CheckInfo',
   label: '入住信息',
@@ -19,14 +46,43 @@ export default {
 
   data() {
     return {
+      map: null,
+      AMap: null,
     }
   },
 
   mounted() {
+    this.$nextTick(() => {
+      this.initMap()
+    })
   },
 
   methods: {
-
+    initMap() {
+      AMapLoader.load({
+        key: 'b553334ba34f7ac3cd09df9bc8b539dc',
+        version: '2.0',
+        plugins: ['AMap.Geocoder'],
+      }).then(AMap => {
+        let map = new AMap.Map('map', {
+          resizeEnable: true,
+          center: [109.559364, 31.39439],
+          zoom: 18,
+        })
+        var marker = new AMap.Marker({
+          position: map.getCenter(),
+          icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
+          offset: new AMap.Pixel(-13, -30)
+        });
+        marker.setMap(map);
+        marker.setTitle('水韵酒店');
+        marker.setLabel({
+          offset: new AMap.Pixel(20, 20),  //设置文本标注偏移量
+          content: "<div class='info'>水韵酒店</div>", //设置文本标注内容
+          direction: 'right' //设置文本标注方位
+        });
+      })
+    },
   }
 }
 </script>
@@ -37,12 +93,58 @@ export default {
   width: 100%;
   background-image: url("./img/detail-bg.png");
   background-size: 100% 100%;
+  padding: 16px 0 64px 0;
+  overflow: auto;
   .home-content {
-    height: calc(100% - 158px);
+    height: 100%;
     width: calc(100% - 32px);
     margin: 0 16px;
     background: #FFF;
     border-radius: 12px;
+    .check-info {
+      padding: 46px 18px 20px 18px;
+      .item {
+        margin-bottom: 20px;
+        .title {
+          line-height: 22px;
+          font-family: PingFangSC-SNaNpxibold;
+          font-weight: 600;
+          font-size: 16px;
+          color: #222;
+          margin-bottom: 6px;
+          img {
+            display: inline-block;
+            width: 18px;
+            height: 18px;
+            vertical-align: middle;
+            margin-right: 6px;
+          }
+        }
+        p {
+          line-height: 25px;
+          font-family: PingFangSC-Regular;
+          font-weight: 400;
+          font-size: 18px;
+          color: #999;
+          padding-left: 24px;
+        }
+      }
+    }
+    .map-info {
+      padding: 0 16px;
+      width: 100%;
+      height: 205px;
+    }
+    .bottom-bg {
+      height: calc(100% - 350px);
+      width: 100%;
+      background-image: url("./img/bottom-bg.png");
+      background-size: 100% 100%;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+    }
   }
+ 
 }
 </style>

project/wuxi/h5/AppDetail/AppDetail.vue

@@ -22,7 +22,7 @@
           盐泉亘古不竭,古法制盐技艺传承千年;有神秘悠远的盐马古栈道,有雄险奇秀的云台峰,有堪称世界之谜的荆竹坝西汉岩棺群,有三峡库区唯一未
           淹没的古县城大宁古城.……..巫溪,是探索人类历史文明密码的宝库。
         </p>
-        <img src="./img/detail-ljwx.png" alt="">
+        <img src="./img/detail-wbwh.png" alt="">
       </div>
       <div class="tab-content" v-if="tabIndex == 2">
         <div class="title">三峡库区的“生态明珠”</div>
@@ -33,7 +33,7 @@
           有大西南地区面积最大的野生老鹰茶生长地是“中国老鹰茶之乡”;有历经千年传承品味正宗的“巫溪烤鱼”,是“国际烤鱼之乡”;有享誉全国的
           太白贝母、大宁党参、巫溪独活等优质药材,是“中国道地药材之乡”。
         </p>
-        <img src="./img/detail-ljwx.png" alt="">
+        <img src="./img/detail-stmz.png" alt="">
       </div>
       <div class="tab-content" v-if="tabIndex == 3">
         <div class="title">老鹰茶名字的由来</div>
@@ -43,7 +43,7 @@
           发现就将其命名为“老鹰树”百姓常采叶煮饮之,最终成为了家喻户晓、流传千古的“老鹰茶”。的树叶,放入口中嚼而食之,顿觉神清气爽,诸毒豁然而解。
           神农氏也不知此神树为何种树木,因与老鹰相遇而发现就将其命名为“老鹰树”,百姓常采叶煮饮之,最终成为了家喻户晓、流传千古的“老鹰茶”。
         </p>
-        <img src="./img/detail-ljwx.png" alt="">
+        <img src="./img/detail-lycyl.png" alt="">
       </div>
       <div class="tab-content" v-if="tabIndex == 4">
         <div class="title">巫溪老鹰茶历史悠久</div>
@@ -57,7 +57,7 @@
           活中具有重要地位直至今日,巫溪民间将老鹰茶称为“盐背子茶”、“药王茶”还仍然保留着夏日饮用老鹰茶解渴、日常以老
           鹰茶泡饭等生活习惯。
         </p>
-        <img src="./img/detail-ljwx.png" alt="">
+        <img src="./img/detail-lycls.png" alt="">
       </div>
       <div class="tab-content" v-if="tabIndex == 5">
         <div class="title">品质优良 品牌响亮</div>
@@ -71,7 +71,7 @@
           特色产业进行重点打造到2030年,全县老鹰茶种植规模将达20万亩，年总产量达1万吨,年综合产值达50亿元,巫溪老鹰茶将成为具有“重庆辨识度、
           国际影响力的爆品,领跑茶叶产业“新赛道”
         </p>
-        <img src="./img/detail-ljwx.png" alt="">
+        <img src="./img/detail-pzypp.png" alt="">
       </div>
     </div>
   </div>

project/wuxi/h5/AppIntroduce/AppIntroduce.vue

@@ -6,7 +6,7 @@
       </div>
       <div class="tab-content" v-if="tabIndex == 0">
         <div class="title">2024巫溪老鹰茶文旅消费节<br/>研讨会暨产销对接会</div>
-        <img src="./img/seat-img.png" alt="" class="detail-img">
+        <img src="./img/detail-hyjs.png" alt="" class="detail-img">
         <p>
           中国老鹰茶之乡·2024巫溪老鹰茶文旅消费节将于4月23日开幕。期间，将举办文创大赛、斗茶大赛、科普研学等系列。
         </p>