upp-初步完工

src/api.js

@@ -167,4 +167,18 @@ export default {
       return res.data.data.records
     })
   },
+
+  // 获取元宇宙详情
+  getG4InfoApi(id) {
+    return axios({
+      method: 'get',
+      url: `${process.env.VUE_APP_API_ORIGIN}/api/show/meta/detail/${id}`,
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: {}
+    }).then((res) => {
+      return res.data.data
+    })
+  },
 }

src/views/General.vue

@@ -319,6 +319,9 @@ export default {
 
     // 无论是网页里还是unity内部点击了企业，都调用这个
     function onClickCorpItem(id) {
+
+      console.log('pppppppppp', id)
+
       // 被选中的，既显示位置又显示名字，还要有选中特效。在它之前的，只显示位置。
       let isFound = false
       for (let index = 0; index < corpListRaw.value.length; index++) {
@@ -390,6 +393,18 @@ export default {
       }, 200)
     })
 
+    // 从源宇宙跳到 总览
+    onMounted(async () => {
+      const url = window.location.href
+      if (url.includes('id=')) {
+        const id = url.split('id=')[1]
+        // console.log('ppppppppppppppppp', id)
+        setTimeout(() => {
+          onClickCorpItem(Number(id))
+        }, 1000)
+      }
+    })
+
 
 
 

src/views/HistoryNew.vue

@@ -123,6 +123,9 @@ export default {
     HistoryPersonCard,
   },
   setup() {
+
+    const prefix = ref(process.env.VUE_APP_API_ORIGIN)
+
     const internalInstance = getCurrentInstance()
 
     const spaceEachPerson = internalInstance.appContext.config.globalProperties.$isMobile ? 100 : 220
@@ -226,7 +229,7 @@ export default {
     Promise.allSettled(stageList.map((stageItem) => {
       return axios({
         method: 'post',
-        url: `https://sit-shgybwg.4dage.com/api/show/history/pageList`,
+        url: `${prefix.value}/api/show/history/pageList`,
         headers: {
           "Content-Type": "application/json",
         },

src/views/Metaverse.vue

@@ -18,10 +18,127 @@
         alt=""
         draggable="false"
       > -->
-      <div
-        class="txt"
-        v-html="desc.detail || ''"
-      />
+
+      <!-- 大盒子 -->
+      <div class="G4mainBox">
+        <!-- 企业 -->
+        <div
+          v-if="G4info.company.length"
+          class="G4box"
+        >
+          <div class="G4Tit">
+            <div class="G4TitOne">
+              企业
+            </div>
+
+            <div
+              class="G4rightMore"
+              @click="$router.push('/general')"
+            >
+              更多 +
+            </div>
+          </div>
+          <!-- 单个企业 -->
+          <div
+            v-for="item in G4info.company"
+            :key="item.id"
+            class="G41row"
+            @click="$router.push(`/general?id=${item.id}`)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+        <!-- 人物 -->
+        <div
+          v-if="G4info.person.length"
+          class="G4box"
+        >
+          <div class="G4Tit">
+            <div class="G4TitOne">
+              人物
+            </div>
+
+            <div
+              class="G4rightMore"
+              @click="$router.push('/history')"
+            >
+              更多 +
+            </div>
+          </div>
+          <div
+            v-for="item in G4info.person"
+            :key="item.id"
+            class="G42row"
+          >
+            <img
+              v-if="item.thumb"
+              :src="`${prefix}/${item.thumb}`"
+              alt=""
+            >
+            <img
+              v-else
+              :src="require('@/assets/images/imgErr.jpg')"
+              alt=""
+            >
+            <div class="G1RenBoxTxt">
+              <h3>{{ item.name }}</h3>
+              <p>&emsp;&emsp;{{ item.description }}</p>
+            </div>
+          </div>
+        </div>
+        <!-- 重器 -->
+        <div
+          v-if="G4info.goods.length"
+          class="G4box"
+        >
+          <div class="G4Tit">
+            <div class="G4TitOne">
+              重器
+            </div>
+
+            <div
+              class="G4rightMore"
+              @click="$router.push('/treasure')"
+            >
+              更多 +
+            </div>
+          </div>
+          <div class="G43rowBox">
+            <div
+              v-for="item in G4info.goods"
+              :key="item.id"
+              class="G43row"
+              :title="item.name"
+              @click="$router.push(`/Treasure-detail?id=${item.id}`)"
+            >
+              <img
+                v-if="item.thumb"
+                :src="`${prefix}/${item.thumb}`"
+                alt=""
+              >
+              <img
+                v-else
+                :src="require('@/assets/images/imgErr.jpg')"
+                alt=""
+              >
+
+              <p>{{ item.description }}</p>
+            </div>
+          </div>
+        </div>
+        <!-- 简介 -->
+        <div class="G4box">
+          <div class="G4Tit">
+            <div class="G4TitOne">
+              简介
+            </div>
+          </div>
+          <div
+            class="G4Txt"
+            v-html="desc.detail || ''"
+          />
+        </div>
+      </div>
     </article>
 
     <!-- element-ui的loading效果从调用到出现有延时，这期间要遮盖住组件 -->
@@ -46,7 +163,10 @@ export default {
   beforeRouteLeave() {
     gUnityInst.SendMessage('Page4', 'ResetCamera')
   },
-  setup () {
+  setup() {
+
+    const prefix = ref(process.env.VUE_APP_API_ORIGIN)
+
     const rawData = reactive({ value: null })
     onMounted(async () => {
       rawData.value = await api.getMetaverseList()
@@ -64,7 +184,38 @@ export default {
       desc.detail = rawData.value[idx].description
       isShowDesc.value = true
     }
-    window.handleClickPlanet = function(id) {
+
+
+    // 详情数据
+    const G4info = ref({
+      company: [],
+      person: [],
+      goods: []
+    })
+
+    // 获取详情接口
+    const getInfoFu = async (id) => {
+      const res = await api.getG4InfoApi(id)
+      G4info.value = {
+        company: res.company || [],
+        person: res.person || [],
+        goods: res.goods || []
+
+      }
+
+    }
+
+    window.handleClickPlanet = function (id) {
+
+      G4info.value = {
+        company: [],
+        person: [],
+        goods: []
+      }
+      // 点击详情
+      // 发送接口拿到详情数据
+      getInfoFu(id)
+
       console.log('click planet', id)
       onClickStar(id - 1)
     }
@@ -76,14 +227,14 @@ export default {
         const id = url.split('id=')[1]
         // console.log('ppppppppppppppppp', id)
         setTimeout(() => {
-          onClickStar(Number(id))
+          onClickStar(Number(id) - 1)
         }, 400)
       }
     })
 
 
 
-    window.handleMovedPlanet = function(id) {
+    window.handleMovedPlanet = function (id) {
       console.log('moved planet', id)
     }
 
@@ -95,6 +246,7 @@ export default {
     })
 
     return {
+      prefix,
       rawData,
 
       isShowDesc,
@@ -104,6 +256,7 @@ export default {
       onClickStar,
 
       isShowLoadingMask,
+      G4info
     }
   }
 }
@@ -114,6 +267,7 @@ export default {
   height: 100%;
   position: relative;
   pointer-events: none;
+
   >article {
     pointer-events: initial;
     position: absolute;
@@ -131,9 +285,11 @@ export default {
     padding: 32px 50px 50px 50px;
     display: flex;
     flex-direction: column;
+
     @media only screen and (max-width: 1700px) {
       right: 0;
     }
+
     >button.close {
       position: absolute;
       top: 30px;
@@ -145,6 +301,7 @@ export default {
       background-repeat: no-repeat;
       background-position: center center;
     }
+
     >h2 {
       flex: 0 0 auto;
       font-size: 24px;
@@ -153,11 +310,181 @@ export default {
       color: #FFFFFF;
       margin-bottom: 21px;
     }
+
     >img.splitter {
       flex: 0 0 auto;
       width: 100%;
       margin-bottom: 37px;
     }
+
+    // 邵根
+    .G4mainBox {
+      padding-right: 8px;
+      overflow-y: auto;
+      height: 100%;
+      font-size: 20px;
+      font-family: Source Han Sans CN-Light, Source Han Sans CN;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 0.8);
+
+      &::-webkit-scrollbar {
+        background: transparent;
+        width: 4px;
+      }
+
+      /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+      &::-webkit-scrollbar-thumb {
+        background: rgba(220, 231, 240, 0.2);
+        border-radius: 2px;
+      }
+
+      .G4box {
+        margin: 0 0 24px;
+
+        .G4Tit {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 15px;
+
+          .G4TitOne {
+            font-weight: 700;
+            font-size: 22px;
+            color: #FFFFFF;
+          }
+
+          .G4rightMore {
+            padding-right: 10px;
+            font-size: 16px;
+            cursor: pointer;
+          }
+        }
+
+        // 企业
+        .G41row {
+          position: relative;
+          padding-left: 30px;
+          cursor: pointer;
+          font-size: 16px;
+          height: 30px;
+          line-height: 30px;
+
+          &::before {
+            opacity: .5;
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 8px;
+            transform: translateY(-50%);
+            width: 10px;
+            height: 10px;
+            background-color: #FFE59F;
+            border-radius: 50%;
+          }
+
+          &::after {
+            content: '';
+            opacity: 0;
+            position: absolute;
+            top: 50%;
+            left: 4px;
+            transform: translateY(-50%);
+            width: 16px;
+            height: 16px;
+            border: 1px dashed #FFE59F;
+            border-radius: 50%;
+
+          }
+
+          &:hover {
+            color: #FFE59F;
+
+            &::before {
+              opacity: 1;
+            }
+
+            &::after {
+              opacity: 1;
+            }
+          }
+        }
+
+        // 人物
+        .G42row {
+          align-items: flex-start;
+          display: flex;
+          margin-bottom: 20px;
+
+          &>img {
+            width: 105px;
+            object-fit: contain;
+          }
+
+          .G1RenBoxTxt {
+            width: calc(100% - 125px);
+            margin-left: 20px;
+            color: #fff;
+
+            &>h3 {
+              font-size: 18px;
+              font-weight: 700;
+              margin-bottom: 15px;
+            }
+
+            &>p {
+              font-size: 18px;
+              font-family: Source Han Sans CN-Light, Source Han Sans CN;
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 1.5;
+              white-space: pre-wrap;
+            }
+          }
+        }
+
+        // 重器
+        .G43rowBox {
+          display: flex;
+          flex-wrap: wrap;
+        }
+
+        .G43row {
+          cursor: pointer;
+          margin-bottom: 20px;
+          margin-right: 24px;
+          width: calc(50% - 24px);
+          height: 180px;
+
+          &>img {
+            width: 100%;
+            height: calc(100% - 30px);
+            object-fit: cover;
+          }
+
+          &>p {
+            font-size: 16px;
+            height: 30px;
+            line-height: 30px;
+            text-align: center;
+            padding: 0 3px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+          }
+        }
+
+        // 简介
+        .G4Txt {
+          line-height: 1.7;
+          font-size: 18px;
+          text-indent: 2em;
+
+        }
+      }
+
+    }
+
     >img.banner {
       flex: 0 0 auto;
       width: 100%;
@@ -165,23 +492,12 @@ export default {
       object-fit: contain;
       margin-bottom: 20px;
     }
+
     >.txt {
       flex: 1 0 1px;
-      font-size: 20px;
-      font-family: Source Han Sans CN-Light, Source Han Sans CN;
-      font-weight: 400;
-      color: rgba(255, 255, 255, 0.8);
-      line-height: 1.7;
-      overflow: auto;
-      padding-right: 10px;
-      margin-right: -10px;
-      &::-webkit-scrollbar { background: transparent; width: 4px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
-      &::-webkit-scrollbar-thumb {
-        background: rgba(220, 231, 240, 0.2);
-        border-radius: 2px;
-      }
     }
   }
+
   .loading-mask {
     position: absolute;
     left: 0;
@@ -197,6 +513,7 @@ export default {
     height: 100%;
     position: relative;
     pointer-events: none;
+
     >article {
       pointer-events: initial;
       position: absolute;
@@ -214,9 +531,11 @@ export default {
       padding: calc(32 / 1080 * 83vh) calc(50 / 1080 * 83vh) calc(50 / 1080 * 83vh) calc(50 / 1080 * 83vh);
       display: flex;
       flex-direction: column;
+
       @media only screen and (max-width: 1700px) {
         right: 0;
       }
+
       >button.close {
         position: absolute;
         top: calc(30 / 1080 * 83vh);
@@ -228,6 +547,7 @@ export default {
         background-repeat: no-repeat;
         background-position: center center;
       }
+
       >h2 {
         flex: 0 0 auto;
         font-size: calc(24 / 1080 * 83vh);
@@ -236,11 +556,13 @@ export default {
         color: #FFFFFF;
         margin-bottom: calc(21 / 1080 * 83vh);
       }
+
       >img.splitter {
         flex: 0 0 auto;
         width: 100%;
         margin-bottom: calc(37 / 1080 * 83vh);
       }
+
       >img.banner {
         flex: 0 0 auto;
         width: 100%;
@@ -248,6 +570,7 @@ export default {
         object-fit: contain;
         margin-bottom: calc(20 / 1080 * 83vh);
       }
+
       >.txt {
         flex: 1 0 1px;
         font-size: calc(20 / 1080 * 83vh);
@@ -258,13 +581,20 @@ export default {
         overflow: auto;
         padding-right: calc(10 / 1080 * 83vh);
         margin-right: calc(-10 / 1080 * 83vh);
-        &::-webkit-scrollbar { background: transparent; width: calc(4 / 1080 * 83vh); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+
+        &::-webkit-scrollbar {
+          background: transparent;
+          width: calc(4 / 1080 * 83vh);
+        }
+
+        /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
         &::-webkit-scrollbar-thumb {
           background: rgba(220, 231, 240, 0.2);
           border-radius: 2px;
         }
       }
     }
+
     .loading-mask {
       position: absolute;
       left: 0;

src/views/TreasureDetail.vue

@@ -67,16 +67,13 @@
         }"
         @click="activeTabIndex = 2"
       >
-        <span>图片<template v-if="activeTabIndex === 2 && imageUrlList?.length && imageUrlList.length > 1">{{ activeSwiperItemIndex + 1 }}/{{ imageUrlList?.length }}</template></span>
+        <span>图片<template v-if="activeTabIndex === 2 && imageUrlList?.length && imageUrlList.length > 1">{{
+          activeSwiperItemIndex + 1 }}/{{ imageUrlList?.length }}</template></span>
       </button>
     </div>
 
-    <div
-      class="main-wrapper"
-    >
-      <div
-        class="swiper-root"
-      >
+    <div class="main-wrapper">
+      <div class="swiper-root">
         <div
           v-if="activeTabIndex === 0"
           class="swiper-wrapper"
@@ -203,6 +200,15 @@
         <template v-if="rawData.value?.entity?.type">
           类型：{{ rawData.value?.entity?.type }}
         </template>
+
+        <span
+          v-for="item in G4ResList"
+          :key="item.id"
+          class="G3tabRow"
+          @click="$router.push(`/metaverse?id=${item.id}`)"
+        >
+          {{ item.name }}
+        </span>
       </div>
       <p
         v-if="rawData.value?.entity?.description"
@@ -233,9 +239,11 @@
       </button>
       <button
         v-if="canRecord && activeTabIndex === 0"
-        @click="$router.push({name: 'RecordView', query: {
-          url: encodeURI(`${prefix}/web-model/index.html#/relic-detail?model-path=${encodeURIComponent(modelUrlList[activeSwiperItemIndex].filePath)}`)
-        }})"
+        @click="$router.push({
+          name: 'RecordView', query: {
+            url: encodeURI(`${prefix}/web-model/index.html#/relic-detail?model-path=${encodeURIComponent(modelUrlList[activeSwiperItemIndex].filePath)}`)
+          }
+        })"
       >
         <img
           class=""
@@ -273,7 +281,7 @@ import Swiper from 'swiper/bundle'
 import 'swiper/css/bundle'
 
 export default {
-  setup () {
+  setup() {
     const prefix = process.env.VUE_APP_API_ORIGIN
     /**
      * 路由
@@ -352,7 +360,7 @@ export default {
           afterInit: function (e) {
             activeSwiperItemIndex.value = e.activeIndex
           },
-          slideChange: function(e) {
+          slideChange: function (e) {
             activeSwiperItemIndex.value = e.activeIndex
             // 停止视频播放
             if (activeTabIndex.value === 1) {
@@ -411,7 +419,20 @@ export default {
     const videoUrlList = reactive([])
     const imageUrlList = reactive([])
     let isBgAudioChanged = false
+
+    // 标签列表
+    const G4ResList = ref([])
+
     api.getTreasureDetail(route.query.id).then((res) => {
+
+      // 获取标签列表
+      let acIds = res.entity.mateIds
+      if (acIds) {
+        acIds = acIds.split(',')
+        //[2,7,8]
+        G4ResList.value = window.G4AllList.filter(v => acIds.includes(v.id + ''))
+      } else G4ResList.value = []
+
       rawData.value = res
       for (const iterator of rawData.value.file) {
         switch (iterator.type) {
@@ -467,6 +488,7 @@ export default {
       prefix,
       rawData,
       videoUrlList,
+      G4ResList
     }
   },
 }
@@ -478,7 +500,8 @@ export default {
   height: 100%;
   overflow: auto;
   position: relative;
-  >video.bg{
+
+  >video.bg {
     position: absolute;
     left: 0;
     top: 0;
@@ -486,17 +509,20 @@ export default {
     height: 100%;
     object-fit: cover;
   }
+
   >button.back {
     position: absolute;
     top: 51px;
     left: 67px;
     width: 40px;
     height: 40px;
+
     >img {
       width: 100%;
       height: 100%;
     }
   }
+
   >h1 {
     position: absolute;
     top: 36px;
@@ -507,16 +533,18 @@ export default {
     font-weight: bold;
     color: #FFFFFF;
   }
+
   >.tab-bar {
     position: absolute;
     top: 108px;
     left: 50%;
     transform: translateX(-50%);
+
     >button {
       margin-right: 50px;
       width: 80px;
       height: 36px;
-      background: rgba(255,255,255,0.2);
+      background: rgba(255, 255, 255, 0.2);
       border-radius: 18px;
       border: 1px solid #fff;
       font-size: 16px;
@@ -524,17 +552,20 @@ export default {
       font-weight: 400;
       color: #fff;
       opacity: 0.7;
+
       &:last-of-type {
         margin-right: initial;
       }
+
       &.active {
-        background: rgba(255,255,255,0.2);
+        background: rgba(255, 255, 255, 0.2);
         border: 1px solid #DBC386;
         color: #DBC386;
         opacity: initial;
       }
     }
-    >button.image{
+
+    >button.image {
       min-width: 90px;
       width: fit-content;
       padding-left: 5px;
@@ -550,18 +581,22 @@ export default {
     height: calc(100% - 170px - 20px);
     width: 80%;
     max-width: 1164px;
+
     .swiper-root {
       height: calc(100% - 160px);
       width: 100%;
       position: relative;
       overflow: hidden;
+
       .swiper-wrapper {
         height: 100%;
         margin-left: auto;
         margin-right: auto;
+
         .swiper-slide {
           font-size: 0;
-          >video.bg{
+
+          >video.bg {
             position: absolute;
             left: 0;
             top: 0;
@@ -570,35 +605,41 @@ export default {
             object-fit: cover;
             z-index: -1;
           }
-          > iframe {
+
+          >iframe {
             width: 100%;
             height: 100%;
           }
-          > video {
+
+          >video {
             width: 100%;
             height: 100%;
             user-select: none;
             object-fit: contain;
           }
-          > img {
+
+          >img {
             width: 100%;
             height: 100%;
             user-select: none;
             object-fit: contain;
           }
-          >button{
+
+          >button {
             position: fixed;
             bottom: 44px;
             right: 44px;
             width: 44px;
             height: 44px;
-            > img {
+
+            >img {
               width: 100%;
               height: 100%;
             }
           }
         }
       }
+
       // .swiper-pagination {
       //   position: absolute;
       //   bottom: 10px;
@@ -612,6 +653,7 @@ export default {
       //   }
       // }
     }
+
     >p.main {
       margin-top: 20px;
       font-size: 20px;
@@ -624,6 +666,7 @@ export default {
       margin-bottom: 22px;
       text-align: center;
     }
+
     >.main-info-wrap {
       font-size: 20px;
       font-family: Source Han Sans CN-Regular, Source Han Sans CN;
@@ -633,7 +676,23 @@ export default {
       margin-top: 20px;
       white-space: pre;
       text-align: center;
+
+      // 类型标签
+      .G3tabRow {
+        position: relative;
+        top: -2px;
+        font-size: 14px;
+        margin-left: 10px;
+        border: 1px solid #F3CB60;
+        padding: 6px 8px;
+        border-radius: 2px;
+        color: #F3CB60;
+        cursor: pointer;
+        margin-bottom: 10px;
+      }
+
     }
+
     >p.desc {
       height: 108px;
       width: 100%;
@@ -651,7 +710,13 @@ export default {
       padding-left: 10px;
       margin-top: 16px;
       height: 100px;
-      &::-webkit-scrollbar { background: transparent; width: 4px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+
+      &::-webkit-scrollbar {
+        background: transparent;
+        width: 4px;
+      }
+
+      /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
       &::-webkit-scrollbar-thumb {
         background: rgba(220, 231, 240, 0.2);
         border-radius: 2px;
@@ -665,16 +730,19 @@ export default {
     height: 44px;
     background-image: url(@/assets/images/arrow-left-2.png);
     background-size: contain;
+
     &::after {
       content: '';
     }
   }
+
   .swiper-button-next {
     right: 44px;
     width: 44px;
     height: 44px;
     background-image: url(@/assets/images/arrow-right-2.png);
     background-size: contain;
+
     &::after {
       content: '';
     }
@@ -684,12 +752,14 @@ export default {
     position: absolute;
     right: 44px;
     bottom: 130px;
-    > button {
+
+    >button {
       display: block;
       margin-bottom: 15px;
       width: 44px;
       height: 44px;
-      > img {
+
+      >img {
         width: 100%;
         height: 100%;
       }
@@ -703,7 +773,8 @@ export default {
     height: 100%;
     overflow: auto;
     position: relative;
-    >video.bg{
+
+    >video.bg {
       position: absolute;
       left: 0;
       top: 0;
@@ -711,17 +782,20 @@ export default {
       height: 100%;
       object-fit: cover;
     }
+
     >button.back {
       position: absolute;
       top: calc(51 / 1080 * 83vh);
       left: calc(67 / 1080 * 83vh);
       width: calc(40 / 1080 * 83vh);
       height: calc(40 / 1080 * 83vh);
+
       >img {
         width: 100%;
         height: 100%;
       }
     }
+
     >h1 {
       position: absolute;
       top: calc(36 / 1080 * 83vh);
@@ -732,16 +806,18 @@ export default {
       font-weight: bold;
       color: #FFFFFF;
     }
+
     >.tab-bar {
       position: absolute;
       top: calc(108 / 1080 * 83vh);
       left: 50%;
       transform: translateX(-50%);
+
       >button {
         margin-right: calc(50 / 1080 * 83vh);
         width: calc(80 / 1080 * 83vh);
         height: calc(36 / 1080 * 83vh);
-        background: rgba(255,255,255,0.2);
+        background: rgba(255, 255, 255, 0.2);
         border-radius: calc(18 / 1080 * 83vh);
         border: calc(1 / 1080 * 83vh) solid #fff;
         font-size: calc(16 / 1080 * 83vh);
@@ -749,11 +825,13 @@ export default {
         font-weight: 400;
         color: #fff;
         opacity: 0.7;
+
         &:last-of-type {
           margin-right: initial;
         }
+
         &.active {
-          background: rgba(255,255,255,0.2);
+          background: rgba(255, 255, 255, 0.2);
           border: 1px solid #DBC386;
           color: #DBC386;
           opacity: initial;
@@ -769,18 +847,22 @@ export default {
       height: 75%;
       width: 80%;
       max-width: calc(1164 / 1080 * 83vh);
+
       .swiper-root {
         height: 80%;
         width: 100%;
         position: relative;
         overflow: hidden;
+
         .swiper-wrapper {
           height: 100%;
           margin-left: auto;
           margin-right: auto;
+
           .swiper-slide {
             font-size: 0;
-            >video.bg{
+
+            >video.bg {
               position: absolute;
               left: 0;
               top: 0;
@@ -789,35 +871,41 @@ export default {
               object-fit: cover;
               z-index: -1;
             }
-            > iframe {
+
+            >iframe {
               width: 100%;
               height: 100%;
             }
-            > video {
+
+            >video {
               width: 100%;
               height: 100%;
               user-select: none;
               object-fit: contain;
             }
-            > img {
+
+            >img {
               width: 100%;
               height: 100%;
               user-select: none;
               object-fit: contain;
             }
-            >button{
+
+            >button {
               position: fixed;
               bottom: calc(44 / 1080 * 83vh);
               right: calc(44 / 1080 * 83vh);
               width: calc(44 / 1080 * 83vh);
               height: calc(44 / 1080 * 83vh);
-              > img {
+
+              >img {
                 width: 100%;
                 height: 100%;
               }
             }
           }
         }
+
         // .swiper-pagination {
         //   position: absolute;
         //   bottom: 10px;
@@ -831,6 +919,7 @@ export default {
         //   }
         // }
       }
+
       >p.main {
         margin-top: calc(20 / 1080 * 83vh);
         font-size: calc(20 / 1080 * 83vh);
@@ -843,6 +932,7 @@ export default {
         margin-bottom: calc(22 / 1080 * 83vh);
         text-align: center;
       }
+
       >.main-info-wrap {
         font-size: calc(20 / 1080 * 83vh);
         font-family: Source Han Sans CN-Regular, Source Han Sans CN;
@@ -853,6 +943,7 @@ export default {
         white-space: pre;
         text-align: center;
       }
+
       >p.desc {
         height: calc(108 / 1080 * 83vh);
         width: 100%;
@@ -870,7 +961,13 @@ export default {
         padding-left: calc(10 / 1080 * 83vh);
         margin-top: calc(16 / 1080 * 83vh);
         height: calc(100 / 1080 * 83vh);
-        &::-webkit-scrollbar { background: transparent; width: calc(4 / 1080 * 83vh); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+
+        &::-webkit-scrollbar {
+          background: transparent;
+          width: calc(4 / 1080 * 83vh);
+        }
+
+        /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
         &::-webkit-scrollbar-thumb {
           background: rgba(220, 231, 240, 0.2);
           border-radius: 2px;
@@ -884,16 +981,19 @@ export default {
       height: calc(44 / 1080 * 83vh);
       background-image: url(@/assets/images/arrow-left-2.png);
       background-size: contain;
+
       &::after {
         content: '';
       }
     }
+
     .swiper-button-next {
       right: calc(44 / 1080 * 83vh);
       width: calc(44 / 1080 * 83vh);
       height: calc(44 / 1080 * 83vh);
       background-image: url(@/assets/images/arrow-right-2.png);
       background-size: contain;
+
       &::after {
         content: '';
       }
@@ -903,12 +1003,14 @@ export default {
       position: absolute;
       right: calc(44 / 1080 * 83vh);
       bottom: calc(130 / 1080 * 83vh);
-      > button {
+
+      >button {
         display: block;
         margin-bottom: calc(15 / 1080 * 83vh);
         width: calc(44 / 1080 * 83vh);
         height: calc(44 / 1080 * 83vh);
-        > img {
+
+        >img {
           width: 100%;
           height: 100%;
         }