概述和历史暂时完成

src/App.vue

@@ -192,6 +192,11 @@ export default {
     const isShowFadeInMask = ref(true)
     const progress = ref(0)
 
+    onMounted(async () => {
+      window.G4AllList = await api.getMetaverseList()
+    })
+
+
     onMounted(() => {
       /**
      * 加载unity

src/components/HistoryPersonCard.vue

@@ -51,6 +51,7 @@
           @show="$emit('showBigImg')"
           @hide="$emit('hideBigImg')"
         >
+
         <div
           class="text"
           :class="{
@@ -58,7 +59,20 @@
             fat: tallOrFat === 'fat',
           }"
         >
-          {{ text }}
+          <div
+            v-if="tabList&&tabList.length"
+            class="G1MainBoxTabBox"
+          >
+            <div
+              v-for="item in tabList"
+              :key="item.id"
+              class="G1MainBoxTab"
+              @click="$router.push(`/metaverse?id=${item.id}`)"
+            >
+              {{ item.name }}
+            </div>
+          </div>
+          &emsp;&emsp;{{ text }}
         </div>
       </div>
     </div>
@@ -72,6 +86,7 @@ export default {
     'img',
     'text',
     'tallOrFat',
+    'tabList',
   ],
   emits: [
     'showBigImg',
@@ -88,27 +103,33 @@ export default {
   padding: 8px;
   backdrop-filter: blur(5px);
   background-color: rgba(6, 11, 26, 0.20);
-  box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,0.3);
-  &.tall{
+  box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.3);
+
+  &.tall {
     text-align: center;
     width: 354px;
     height: 509px;
   }
-  &.fat{
+
+  &.fat {
     width: 389px;
     height: 268px;
   }
-  >.inner-wrap{
+
+  >.inner-wrap {
     width: 100%;
     height: 100%;
     text-align: center;
-    &.tall{
+
+    &.tall {
       background-image: url(@/assets/images/bg-person-card-tall.png);
     }
-    &.fat{
+
+    &.fat {
       background-image: url(@/assets/images/bg-person-card-fat.png);
     }
-    >h1.name{
+
+    >h1.name {
       padding-top: 20px;
       height: 70px;
       display: flex;
@@ -123,17 +144,20 @@ export default {
       white-space: pre;
       text-overflow: ellipsis;
     }
-    >img.splitter{
+
+    >img.splitter {
       height: 10px;
     }
+
     >.content-wrap {
-      &.tall{
+      &.tall {
         display: flex;
         flex-direction: column;
         align-items: center;
         height: 390px;
       }
-      &.fat{
+
+      &.fat {
         display: flex;
         margin-top: 10px;
         margin-left: 20px;
@@ -141,21 +165,25 @@ export default {
         display: flex;
         height: 170px;
       }
-      >img.portrait{
+
+      >img.portrait {
         flex: 0 0 auto;
         object-fit: cover;
         cursor: pointer;
-        &.tall{
-          margin-top: 20px;
+
+        &.tall {
+          margin-top: 10px;
           width: 210px;
-          height: 220px;
+          height: 200px;
         }
+
         &.fat {
-          width:  101px;
+          width: 101px;
           height: 139px;
         }
       }
-      >.text{
+
+      >.text {
         text-align: initial;
         flex: 1 0 1px;
         padding-right: 4px;
@@ -166,21 +194,49 @@ export default {
         line-height: 1.5;
         opacity: 0.7;
         overflow: auto;
-        text-indent: 2em;
-        &::-webkit-scrollbar { background: transparent; width: 4px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+        // text-indent: 2em;
+
+        &::-webkit-scrollbar {
+          background: transparent;
+          width: 4px;
+        }
+
+        /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
         &::-webkit-scrollbar-thumb {
           background: rgba(220, 231, 240, 0.2);
           border-radius: 2px;
         }
-        &.tall{
-          margin-top: 20px;
+
+        &.tall {
+          margin-top: 10px;
           margin-left: 39px;
           margin-right: 35px;
         }
-        &.fat{
+
+        &.fat {
           margin-left: 20px;
           margin-bottom: 30px;
         }
+
+
+        .G1MainBoxTabBox {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+          width: 100%;
+
+          .G1MainBoxTab {
+            font-size: 14px;
+            margin-right: 10px;
+            border: 1px solid #F3CB60;
+            padding: 6px 8px;
+            border-radius: 2px;
+            color: #F3CB60;
+            cursor: pointer;
+            margin-bottom: 10px;
+          }
+        }
+
       }
     }
   }
@@ -191,30 +247,36 @@ export default {
     padding: calc(8 / 1080 * 100vh);
     backdrop-filter: blur(5px);
     background-color: rgba(6, 11, 26, 0.20);
-    box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,0.3);
-    &.tall{
+    box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.3);
+
+    &.tall {
       text-align: center;
       width: calc(354 / 1080 * 120vh);
       height: calc(509 / 1080 * 120vh);
     }
-    &.fat{
+
+    &.fat {
       width: calc(389 / 1080 * 120vh);
       height: calc(268 / 1080 * 120vh);
     }
-    >.inner-wrap{
+
+    >.inner-wrap {
       width: 100%;
       height: 100%;
       text-align: center;
       background-size: contain;
       background-repeat: no-repeat;
       background-position: center center;
-      &.tall{
+
+      &.tall {
         background-image: url(@/assets/images/bg-person-card-tall.png);
       }
-      &.fat{
+
+      &.fat {
         background-image: url(@/assets/images/bg-person-card-fat.png);
       }
-      >h1.name{
+
+      >h1.name {
         padding-top: calc(20 / 1080 * 100vh);
         height: calc(70 / 1080 * 100vh);
         display: flex;
@@ -229,17 +291,20 @@ export default {
         white-space: pre;
         text-overflow: ellipsis;
       }
-      >img.splitter{
+
+      >img.splitter {
         height: calc(10 / 1080 * 100vh);
       }
+
       >.content-wrap {
-        &.tall{
+        &.tall {
           display: flex;
           flex-direction: column;
           align-items: center;
           height: calc(390 / 1080 * 100vh);
         }
-        &.fat{
+
+        &.fat {
           display: flex;
           margin-top: calc(10 / 1080 * 100vh);
           margin-left: calc(20 / 1080 * 100vh);
@@ -247,21 +312,25 @@ export default {
           display: flex;
           height: calc(170 / 1080 * 100vh);
         }
-        >img.portrait{
+
+        >img.portrait {
           flex: 0 0 auto;
           object-fit: cover;
           cursor: pointer;
-          &.tall{
+
+          &.tall {
             margin-top: calc(20 / 1080 * 100vh);
             width: calc(210 / 1080 * 100vh);
             height: calc(220 / 1080 * 100vh);
           }
+
           &.fat {
-            width:  calc(101 / 1080 * 100vh);
+            width: calc(101 / 1080 * 100vh);
             height: calc(139 / 1080 * 100vh);
           }
         }
-        >.text{
+
+        >.text {
           text-align: initial;
           flex: 1 0 1px;
           padding-right: calc(4 / 1080 * 100vh);
@@ -273,17 +342,25 @@ export default {
           opacity: 0.7;
           overflow: auto;
           text-indent: 2em;
-          &::-webkit-scrollbar { background: transparent; width: calc(4 / 1080 * 100vh); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+
+          &::-webkit-scrollbar {
+            background: transparent;
+            width: calc(4 / 1080 * 100vh);
+          }
+
+          /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
           &::-webkit-scrollbar-thumb {
             background: rgba(220, 231, 240, 0.2);
             border-radius: 2px;
           }
-          &.tall{
+
+          &.tall {
             margin-top: calc(20 / 1080 * 100vh);
             margin-left: calc(39 / 1080 * 100vh);
             margin-right: calc(35 / 1080 * 100vh);
           }
-          &.fat{
+
+          &.fat {
             margin-left: calc(20 / 1080 * 100vh);
             margin-bottom: calc(30 / 1080 * 100vh);
           }
@@ -291,5 +368,4 @@ export default {
       }
     }
   }
-}
-</style>
+}</style>

src/views/HistoryNew.vue

@@ -56,7 +56,7 @@
         :style="{
           width: `${timeAxisScaleWidth}px`,
           marginRight: `${timeAxisScaleMargin}px`,
-          // opacity: computeTimeAxisScaleOpacity(index),
+        // opacity: computeTimeAxisScaleOpacity(index),
         }"
       />
       <div
@@ -66,7 +66,7 @@
         :style="{
           width: `${timeAxisScaleWidth}px`,
           marginRight: `${timeAxisScaleMargin}px`,
-          // opacity: computeTimeAxisScaleOpacity(index + timeAxisScaleRepeat),
+        // opacity: computeTimeAxisScaleOpacity(index + timeAxisScaleRepeat),
         }"
       />
     </div>
@@ -94,6 +94,7 @@
       :img="item.img"
       :text="item.description || item.story"
       :tall-or-fat="item.tallOrFat"
+      :tab-list="G2resList[item.id]"
       :style="{
         left: item.left + 'px',
         top: item.top + 'px',
@@ -121,7 +122,7 @@ export default {
   components: {
     HistoryPersonCard,
   },
-  setup () {
+  setup() {
     const internalInstance = getCurrentInstance()
 
     const spaceEachPerson = internalInstance.appContext.config.globalProperties.$isMobile ? 100 : 220
@@ -214,6 +215,13 @@ export default {
       // },
     ])
 
+    // 最终在页面展示的 tab 列表
+    const G2resList = ref([])
+
+    // 邵根 获取每个数据里面的 标签集合
+
+    const arrTemp = {}
+
     // 获取数据
     Promise.allSettled(stageList.map((stageItem) => {
       return axios({
@@ -226,6 +234,17 @@ export default {
           stage: stageItem.name
         },
       }).then((res) => {
+
+        const arrTemp1 = res.data.data.records
+
+        arrTemp1.forEach(v=>{
+          let acIds = v.mateIds
+          if (acIds) {
+            acIds = acIds.split(',')
+            arrTemp[v.id] = window.G4AllList.filter(v => acIds.includes(v.id + ''))
+          }
+
+        })
         return res.data.data.records
       }).then((res) => {
         stageItem.personList = res
@@ -234,6 +253,8 @@ export default {
       }).then(() => {
         // 获取各人物的照片
         for (const personItem of stageItem.personList) {
+
+
           api.getHistoryDetail(personItem.id).then((res) => {
             try {
               personItem.img = process.env.VUE_APP_API_ORIGIN + res.file[0].filePath
@@ -244,6 +265,10 @@ export default {
         }
       })
     })).then((res) => {
+
+      console.log('全部数据加载完成的标签数组', arrTemp)
+      G2resList.value = arrTemp
+
       // 计算各个时代的起始终止位置
       let temp = 0
       for (const stageItem of stageList) {
@@ -537,6 +562,7 @@ export default {
       timeAxisScaleMargin,
       timeAxisScaleRepeat,
       timeAxisScaleWidth,
+      G2resList
     }
   }
 }
@@ -551,7 +577,8 @@ export default {
   height: 100%;
   user-select: none;
   overflow: hidden; // 不加这句的话，傻逼移动端浏览器就会不显示底部栏！
-  >video.bg{
+
+  >video.bg {
     position: absolute;
     left: 0;
     top: 0;
@@ -559,16 +586,19 @@ export default {
     height: 100%;
     object-fit: cover;
   }
+
   >.gear-wrap {
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: calc(100vw * 940 / 1920);
-    >img.gear{
+
+    >img.gear {
       width: 100%;
     }
   }
+
   >.current-stage-name {
     position: absolute;
     left: 50%;
@@ -576,28 +606,33 @@ export default {
     transform: translateX(-50%);
     width: 250px;
     text-align: center;
-    >h1{
+
+    >h1 {
       font-size: 36px;
       font-family: Source Han Sans CN-Bold, Source Han Sans CN;
       font-weight: bold;
       color: #FFFFFF;
       line-height: 42px;
     }
-    >img.underline{
+
+    >img.underline {
       margin-top: -20px;
       width: 100%;
     }
   }
-  >.time-axis-wrap{
+
+  >.time-axis-wrap {
     bottom: 32.4%;
     position: absolute;
     display: flex;
-    >.scale-line{
+
+    >.scale-line {
       height: 30px;
       background-color: #91886b;
     }
   }
-  >.stage-label{
+
+  >.stage-label {
     position: absolute;
     bottom: 15.7%;
     font-size: 96px;
@@ -609,16 +644,19 @@ export default {
     z-index: 10;
     width: 407px;
     text-align: left;
-    >img.star{
+
+    >img.star {
       position: absolute;
       left: 0;
       top: 0;
       transform: translate(-50%, -80%);
     }
   }
-  >.history-person-card{
+
+  >.history-person-card {
     position: absolute;
   }
+
   >.loading-mask {
     position: absolute;
     left: 0;
@@ -638,7 +676,8 @@ export default {
     width: 100%;
     height: 100%;
     user-select: none;
-    >video.bg{
+
+    >video.bg {
       position: absolute;
       left: 0;
       top: 0;
@@ -646,16 +685,19 @@ export default {
       height: 100%;
       object-fit: cover;
     }
+
     >.gear-wrap {
       position: absolute;
       top: 0;
       left: 50%;
       transform: translateX(-50%);
       width: calc(100vw * 940 / 1920);
-      >img.gear{
+
+      >img.gear {
         width: 100%;
       }
     }
+
     >.current-stage-name {
       position: absolute;
       left: 50%;
@@ -663,28 +705,33 @@ export default {
       transform: translateX(-50%);
       width: calc(250 / 1080 * 83vh);
       text-align: center;
-      >h1{
+
+      >h1 {
         font-size: calc(36 / 1080 * 83vh);
         font-family: Source Han Sans CN-Bold, Source Han Sans CN;
         font-weight: bold;
         color: #FFFFFF;
         line-height: calc(42 / 1080 * 83vh);
       }
-      >img.underline{
+
+      >img.underline {
         margin-top: -calc(20 / 1080 * 83vh);
         width: 100%;
       }
     }
-    >.time-axis-wrap{
+
+    >.time-axis-wrap {
       bottom: 32.4%;
       position: absolute;
       display: flex;
-      >.scale-line{
+
+      >.scale-line {
         height: calc(30 / 1080 * 83vh);
         background-color: #91886b;
       }
     }
-    >.stage-label{
+
+    >.stage-label {
       position: absolute;
       bottom: 15.7%;
       font-size: calc(96 / 1080 * 83vh);
@@ -696,16 +743,19 @@ export default {
       z-index: 10;
       width: calc(407 / 1080 * 83vh);
       text-align: left;
-      >img.star{
+
+      >img.star {
         position: absolute;
         left: 0;
         top: 0;
         transform: translate(-50%, -80%);
       }
     }
-    >.history-person-card{
+
+    >.history-person-card {
       position: absolute;
     }
+
     >.loading-mask {
       position: absolute;
       left: 0;

src/views/Metaverse.vue

@@ -40,6 +40,7 @@ import {
   onMounted,
 } from 'vue'
 
+
 export default {
   name: 'MetaverseView',
   beforeRouteLeave() {
@@ -67,6 +68,21 @@ export default {
       console.log('click planet', id)
       onClickStar(id - 1)
     }
+
+
+    onMounted(async () => {
+      const url = window.location.href
+      if (url.includes('id=')) {
+        const id = url.split('id=')[1]
+        // console.log('ppppppppppppppppp', id)
+        setTimeout(() => {
+          onClickStar(Number(id))
+        }, 400)
+      }
+    })
+
+
+
     window.handleMovedPlanet = function(id) {
       console.log('moved planet', id)
     }