提交

src/view/AEROSPACE2023/index.vue

@@ -18,7 +18,7 @@
         }"
         v-if="page === 1"
       />
-      <page2
+      <page3
         :class="{
           animate__animated: page === 2,
           animate__fadeInUp: isUp && page === 2,
@@ -26,7 +26,7 @@
         }"
         v-if="page === 2"
       />
-      <page3
+      <page4
         :class="{
           animate__animated: page === 3,
           animate__fadeInUp: isUp && page === 3,
@@ -34,7 +34,7 @@
         }"
         v-if="page === 3"
       />
-      <page4
+      <page5
         :class="{
           animate__animated: page === 4,
           animate__fadeInUp: isUp && page === 4,
@@ -42,7 +42,7 @@
         }"
         v-if="page === 4"
       />
-      <page5
+      <page6
         :class="{
           animate__animated: page === 5,
           animate__fadeInUp: isUp && page === 5,
@@ -50,14 +50,6 @@
         }"
         v-if="page === 5"
       />
-      <page6
-        :class="{
-          animate__animated: page === 6,
-          animate__fadeInUp: isUp && page === 6,
-          animate__fadeInDown: !isUp && page === 6,
-        }"
-        v-if="page === 6"
-      />
     </div>
   </div>
 </template>
@@ -66,7 +58,6 @@
 import { ref } from 'vue';
 import page0 from './page0.vue';
 import page1 from './page1.vue';
-import page2 from './page2.vue';
 import page3 from './page3.vue';
 import page4 from './page4.vue';
 import page5 from './page5.vue';

src/view/AEROSPACE2023/page3.vue

@@ -1,12 +1,12 @@
 <template>
   <skeleton title="主办单位" titleLine="">
     <div class="bg bg3 animate__animated animate__backInUp">
-      <p style="font-size: 20px" class="duanluo shouh">指导单位</p>
+      <p style="font-size: 22px" class="duanluo shouh">指导单位</p>
     </div>
     <p class="line-item">省商务厅</p>
     <br />
     <div class="bg bg3 animate__animated animate__backInUp">
-      <p style="font-size: 20px" class="duanluo shouh">主办单位</p>
+      <p style="font-size: 22px" class="duanluo shouh">主办单位</p>
     </div>
     <p class="line-item">西安市投资合作局</p>
     <p class="line-item">西安市阎良区人民政府</p>

src/view/AEROSPACE2023/page5.vue

@@ -2,19 +2,39 @@
   <skeleton title="地址导航" titleLine="">
     <div class="location animate__animated animate__backInUp">
       <img src="./img/location.jpg" />
+      <div class="head">
+        <div class="location_icon" @click="toDaohang">
+          <svg
+            t="1691454235194"
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            p-id="4917"
+            width="22"
+            height="22"
+          >
+            <path
+              d="M97.535919 458.060507c-20.485567 9.580193-33.399691 29.584806-33.691333 52.195779-0.290619 22.603811 12.085246 42.944068 32.307823 53.06252l243.028059 121.499192 121.499192 243.013733c9.973142 19.946284 30.007431 32.32215 52.283784 32.32215 22.944572 0 43.256176-12.898775 52.981678-33.69031L960.158485 83.662445l-11.661597-8.16803-8.165983-11.647271L97.535919 458.060507zM93.662705 510.649236c0.145309-11.254322 6.318916-20.813025 16.510022-25.587771l765.934456-358.2595L347.348498 655.567813 109.489158 536.645306C99.429035 531.615757 93.517395 521.896394 93.662705 510.649236zM538.921651 913.824715c-4.833075 10.338463-14.529925 16.511046-25.958208 16.511046-11.08036 0-20.645203-5.910617-25.611308-15.839757L368.430652 676.649967l528.758686-528.751522L538.921651 913.824715z"
+              fill="#ffffff"
+            ></path>
+          </svg>
+          <div style="font-size: 12px; height: 1em">路线</div>
+        </div>
+        <p style="padding: 2em 0;">西安航天国际会议中心东方红会议厅</p>
+      </div>
     </div>
 
     <div class="bg bg5 animate__animated animate__backInUp">
+      <p class="duanluo">联系人：王经理 18991696905</p>
       <p class="duanluo">嘉宾入场时间：8月22日 14:30</p>
+      <p class="duanluo">会议中心电话：85832260</p>
       <div class="duanluo">
         <p class="left">地址：</p>
-        <p class="right">航天基地京东大道和少陵路十字西北角西安航天国际会议中心东方红会议厅</p>
+        <p class="right">
+          航天基地京东大道和少陵路十字西北角西安航天国际会议中心东方红会议厅
+        </p>
       </div>
     </div>
-
-    <van-button style="margin-top: 7.9vh;" type="primary" block color="#61BFE9" @click="toDaohang">
-      一键导航
-    </van-button>
   </skeleton>
 </template>
 <script setup>
@@ -44,12 +64,13 @@ function toDaohang() {
 @import url(./sass/base.scss);
 
 .location {
+  position: relative;
   font-family: PingFangSC-Regular, PingFang SC;
   text-align: center;
   background: #0007461a;
   line-height: 1.5em;
-  width: 72vw;
-  height: 72vw;
+  width: 68vw;
+  height: 68vw;
   padding: 10px;
   margin: 0 auto;
   border-radius: 6px;
@@ -65,6 +86,30 @@ function toDaohang() {
     width: 100%;
     border-radius: 6px;
   }
+
+  .head {
+    position: absolute;
+    width: 100%;
+    height: 30%;
+    left: 0;
+    bottom: 0;
+    background-color: #fff;
+    color: #000;
+
+    .location_icon {
+      position: absolute;
+      border-radius: 50%;
+      right: 10%;
+      color: #fff;
+      background-color: #1360fc;
+      width: 46px;
+      height: 46px;
+      margin-top: -2.5em;
+      line-height: 1.1em;
+      text-align: center;
+      padding-top: 5px;
+    }
+  }
 }
 
 .bg5 {
@@ -73,13 +118,13 @@ function toDaohang() {
 
     .left,
     .right {
-        display: inline-block;
-        width: 3.3em;
-        vertical-align: top;
+      display: inline-block;
+      width: 3.3em;
+      vertical-align: top;
     }
 
     .right {
-        width: calc(100% - 3.3em);
+      width: calc(100% - 3.3em);
     }
   }
 }