upp-傻逼项目

src/components/HistoryPersonCard.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="boxRef"
     class="history-person-card"
     :class="{
       tall: tallOrFat === 'tall',
@@ -67,7 +68,7 @@
               v-for="item in tabList"
               :key="item.id"
               class="G1MainBoxTab"
-              @click="$router.push(`${item.type === 'company' ? '/general' : '/metaverse'}?id=${item.id}`)"
+              @click="toPage(item)"
             >
               {{ item.name }}
             </div>
@@ -80,6 +81,8 @@
 </template>
 
 <script>
+import { useRouter } from 'vue-router'
+import { ref } from 'vue'
 export default {
   props: [
     'name',
@@ -87,11 +90,33 @@ export default {
     'text',
     'tallOrFat',
     'tabList',
+    'bid'
   ],
   emits: [
     'showBigImg',
     'hideBigImg',
-  ]
+  ],
+  setup(props) {
+
+    const router = useRouter()
+
+    const toPage = (item) => {
+
+      const temp1 = item.type === 'company' ? '/general' : '/metaverse'
+
+      router.push(`${temp1}?id=${item.id}&bid=${props.bid}&T=2`)
+
+
+    }
+
+    // 盒子的dom
+    const boxRef = ref('')
+
+    return {
+      toPage,
+      boxRef
+    }
+  }
 }
 </script>
 

src/utils2.js

@@ -0,0 +1,7 @@
+export const backTypeObjTemp = {
+  1: '/general',
+  2: '/history',
+  3: '/treasure',
+  4: '/metaverse',
+  5: '/Treasure-detail',
+}

src/views/General.vue

@@ -74,6 +74,15 @@
         @click="isShowDesc = false"
       />
       <h2 :title="activeCorpInfo.name">
+        <!-- 返回按钮，有bid和T才有 -->
+        <img
+          v-if="RouterObj.bid&&RouterObj.T"
+          class="addBackImg"
+          src="@/assets/images/arrow_left.png"
+          alt=""
+          @click="$router.push(`${backTypeObj[RouterObj.T]}?id=${RouterObj.bid}`)"
+        >
+
         {{ activeCorpInfo.name }}
       </h2>
       <img
@@ -99,7 +108,7 @@
               v-for="item in G4ResList"
               :key="item.id"
               class="G1MainBoxTab"
-              @click="$router.push(`/metaverse?id=${item.id}`)"
+              @click="$router.push(`/metaverse?id=${item.id}&bid=${activeCorpId}&T=1`)"
             >
               {{ item.name }}
             </div>
@@ -146,6 +155,7 @@
               v-for="item in G4RenList"
               :key="item.id"
               class="G1RenBox"
+              @click="$router.push(`/history?id=${item.id}&bid=${activeCorpId}&T=1`)"
             >
               {{ item.name }}
             </div>
@@ -175,12 +185,22 @@ import {
 import Swiper from 'swiper/bundle'
 import 'swiper/css/bundle'
 
+import { useRouter } from 'vue-router'
+import { backTypeObjTemp } from '@/utils2.js'
+
 export default {
   name: 'GeneralView',
   components: {
   },
 
   setup() {
+
+    // 回跳逻辑和回跳 信息
+    const router = useRouter()
+    const RouterObj = ref({})
+    const backTypeObj = ref(backTypeObjTemp)
+
+
     const prefix = ref(process.env.VUE_APP_API_ORIGIN)
 
     const filterKeyword = ref('')
@@ -392,14 +412,18 @@ export default {
 
     // 从元宇宙跳到 总览
     onMounted(async () => {
-      const url = window.location.href
-      if (url.includes('id=')) {
-        const id = url.split('id=')[1]
-        // console.log('ppppppppppppppppp', id)
+
+      const routerObj = router.currentRoute.value.query
+
+      RouterObj.value = routerObj
+
+      if (routerObj.id ) {
+
         setTimeout(() => {
-          onClickCorpItem(Number(id))
+          onClickCorpItem(Number(routerObj.id))
         }, 500)
       }
+
     })
 
 
@@ -416,7 +440,9 @@ export default {
       onClickCorpItem,
       prefix,
       G4ResList,
-      G4RenList
+      G4RenList,
+      RouterObj,
+      backTypeObj
     }
   },
   data() {
@@ -726,17 +752,25 @@ export default {
     }
 
     >h2 {
-      flex: 0 0 auto;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      // flex: 0 0 auto;
       font-size: 24px;
       font-family: Source Han Sans CN-Bold, Source Han Sans CN;
       font-weight: bold;
       color: #FFFFFF;
       margin-bottom: 21px;
-      display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 10;
       overflow: hidden;
       margin-right: calc(50 / 1080 * 83vh);
+      .addBackImg{
+        cursor: pointer;
+        display: inline-block;
+        margin-right: 20px;
+        height: 50px;
+      }
     }
 
     >img.splitter {

src/views/HistoryNew.vue

@@ -10,6 +10,15 @@
     @touchend="onTouchEnd"
     @touchcancel="onTouchCancel"
   >
+    <!-- 返回按钮 -->
+    <img
+      v-if="RouterObj.bid&&RouterObj.T"
+      class="addBackImg"
+      src="@/assets/images/arrow_left.png"
+      alt=""
+      @click="$router.push(`${backTypeObj[RouterObj.T]}?id=${RouterObj.bid}`)"
+    >
+
     <video
       ref="bgVideo"
       src="@/assets/videos/bg-history.mp4"
@@ -95,6 +104,7 @@
       :text="item.description || item.story"
       :tall-or-fat="item.tallOrFat"
       :tab-list="G2resList[item.id]"
+      :bid="item.id"
       :style="{
         left: item.left + 'px',
         top: item.top + 'px',
@@ -113,17 +123,25 @@
 </template>
 
 <script>
-import { reactive, toRefs, onBeforeMount, ref, watch, onMounted, onBeforeUnmount, getCurrentInstance, computed } from 'vue'
+import { reactive, onBeforeMount, ref, watch, onMounted, onBeforeUnmount, getCurrentInstance, computed } from 'vue'
 import HistoryPersonCard from "@/components/HistoryPersonCard.vue"
 import axios from "axios"
 import { ElLoading } from 'element-plus'
 
+import { useRouter } from 'vue-router'
+import { backTypeObjTemp } from '@/utils2.js'
+
 export default {
   components: {
     HistoryPersonCard,
   },
   setup() {
 
+    // 回跳逻辑和回跳 信息
+    const router = useRouter()
+    const RouterObj = ref({})
+    const backTypeObj = ref(backTypeObjTemp)
+
     const prefix = ref(process.env.VUE_APP_API_ORIGIN)
 
     const internalInstance = getCurrentInstance()
@@ -519,9 +537,13 @@ export default {
       stageList.map((stageItem) => {
         if (stageItem.personList) {
           for (const personItem of stageItem.personList) {
+
             const tallOrFat = (ret.length % 2 === 0 ? 'tall' : 'fat')
             const topForPc = Math.random() * 70 + (tallOrFat === 'tall' ? 250 : 350)
             const topForMobile = Math.random() * 10 + (tallOrFat === 'tall' ? 40 : 90)
+
+            // console.log('---------', (ret.length * spaceEachPerson + spaceEachPerson / (tallOrFat === 'tall' ? 2 : 1.3)) * (tallOrFat === 'tall' ? 2 : 1.5))
+
             ret.push({
               ...personItem,
               initialLeft: (ret.length * spaceEachPerson + spaceEachPerson / (tallOrFat === 'tall' ? 2 : 1.3)) * (tallOrFat === 'tall' ? 2 : 1.5),
@@ -536,6 +558,31 @@ export default {
       })
       return ret
     })
+
+
+    onMounted(async () => {
+      const routerObj = router.currentRoute.value.query
+      RouterObj.value = routerObj
+    })
+
+    const timecc = ref(-1)
+
+    watch(personList, (val)=>{
+      clearTimeout(timecc.value)
+      timecc.value = window.setTimeout(() => {
+
+        const routerObj = router.currentRoute.value.query
+        if (routerObj.id) {
+          const obj = val.find(v=>v.id == routerObj.id)
+
+          const num = obj.tallOrFat === 'fat' ? 1.5 : 2
+          translateLength.value = (obj.initialLeft / num) - 300
+        }
+      }, 200)
+
+
+    }, { deep: true })
+
     watch(translateLength, (vNew) => {
       for (const iterator of personList.value) {
         iterator.left = iterator.initialLeft - vNew * (iterator.tallOrFat === 'tall' ? 2 : 1.5)
@@ -566,7 +613,9 @@ export default {
       timeAxisScaleMargin,
       timeAxisScaleRepeat,
       timeAxisScaleWidth,
-      G2resList
+      G2resList,
+      RouterObj,
+      backTypeObj,
     }
   }
 }
@@ -582,6 +631,17 @@ export default {
   user-select: none;
   overflow: hidden; // 不加这句的话，傻逼移动端浏览器就会不显示底部栏！
 
+  .addBackImg{
+    position: absolute;
+    z-index: 1000;
+    top: 50px;
+    left: 60px;
+    cursor: pointer;
+        display: inline-block;
+        margin-right: 20px;
+        height: 50px;
+  }
+
   >video.bg {
     position: absolute;
     left: 0;

src/views/Metaverse.vue

@@ -5,7 +5,17 @@
         class="close"
         @click="onClickCloseDesc"
       />
-      <h2>{{ desc.name }}</h2>
+      <h2>
+        <!-- 返回按钮，有bid和T才有 -->
+        <img
+          v-if="RouterObj.bid&&RouterObj.T"
+          class="addBackImg"
+          src="@/assets/images/arrow_left.png"
+          alt=""
+          @click="$router.push(`${backTypeObj[RouterObj.T]}?id=${RouterObj.bid}`)"
+        >
+        {{ desc.name }}
+      </h2>
       <img
         class="splitter"
         src="@/assets/images/splitter.png"
@@ -21,6 +31,18 @@
 
       <!-- 大盒子 -->
       <div class="G4mainBox">
+        <!-- 简介 -->
+        <div class="G4box">
+          <div class="G4Tit">
+            <div class="G4TitOne">
+              简介
+            </div>
+          </div>
+          <div
+            class="G4Txt"
+            v-html="desc.detail || ''"
+          />
+        </div>
         <!-- 企业 -->
         <div
           v-if="G4info.company.length"
@@ -38,14 +60,16 @@
               更多 +
             </div>
           </div>
-          <!-- 单个企业 -->
-          <div
-            v-for="item in G4info.company"
-            :key="item.id"
-            class="G41row"
-            @click="$router.push(`/general?id=${item.id}`)"
-          >
-            {{ item.name }}
+          <!-- 企业列表循环 -->
+          <div class="G41rowMain">
+            <div
+              v-for="item in G4info.company"
+              :key="item.id"
+              class="G41row"
+              @click="$router.push(`/general?id=${item.id}&bid=${qiuId}&T=4`)"
+            >
+              {{ item.name }}
+            </div>
           </div>
         </div>
         <!-- 人物 -->
@@ -65,24 +89,15 @@
               更多 +
             </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.png')"
-              alt=""
+          <!-- 人物列表循环 -->
+          <div class="G41rowMain">
+            <div
+              v-for="item in G4info.person"
+              :key="item.id"
+              class="G41row"
+              @click="$router.push(`/history?id=${item.id}&bid=${qiuId}&T=4`)"
             >
-            <div class="G1RenBoxTxt">
-              <h3>{{ item.name }}</h3>
-              <p>&emsp;&emsp;{{ item.description }}</p>
+              {{ item.name }}
             </div>
           </div>
         </div>
@@ -103,40 +118,17 @@
               更多 +
             </div>
           </div>
-          <div class="G43rowBox">
+          <!-- 重器的列表循环 -->
+          <div class="G41rowMain">
             <div
               v-for="item in G4info.goods"
               :key="item.id"
-              class="G43row"
-              :title="item.name"
-              @click="$router.push(`/Treasure-detail?id=${item.id}`)"
+              class="G41row"
+              @click="$router.push(`/Treasure-detail?id=${item.id}&bid=${qiuId}&T=4`)"
             >
-              <img
-                v-if="item.thumb"
-                :src="`${prefix}/${item.thumb}`"
-                alt=""
-              >
-              <img
-                v-else
-                :src="require('@/assets/images/imgErr.png')"
-                alt=""
-              >
-
-              <p>{{ item.description }}</p>
-            </div>
-          </div>
-        </div>
-        <!-- 简介 -->
-        <div class="G4box">
-          <div class="G4Tit">
-            <div class="G4TitOne">
-              简介
+              {{ item.name }}
             </div>
           </div>
-          <div
-            class="G4Txt"
-            v-html="desc.detail || ''"
-          />
         </div>
       </div>
     </article>
@@ -152,10 +144,11 @@
 <script>
 import {
   reactive,
-  toRefs,
   ref,
   onMounted,
 } from 'vue'
+import { useRouter } from 'vue-router'
+import { backTypeObjTemp } from '@/utils2.js'
 
 
 export default {
@@ -165,6 +158,14 @@ export default {
   },
   setup() {
 
+    // 回跳逻辑和回跳 信息
+    const router = useRouter()
+    const RouterObj = ref({})
+    const backTypeObj = ref(backTypeObjTemp)
+
+    // 当前选中的星球id
+    const qiuId = ref('')
+
     const prefix = ref(process.env.VUE_APP_API_ORIGIN)
 
     const rawData = reactive({ value: null })
@@ -193,14 +194,19 @@ export default {
       window.gUnityInst.SendMessage('Page4', 'OnClickPlaneId', idx + 1)
     }
     onMounted(async () => {
-      const url = window.location.href
-      if (url.includes('id=')) {
-        const id = url.split('id=')[1]
-        // console.log('ppppppppppppppppp', id)
+      // console.log('router:', router.currentRoute.value.query)
+
+      const routerObj = router.currentRoute.value.query
+
+      RouterObj.value = routerObj
+
+      if (routerObj.id ) {
+
         setTimeout(() => {
-          focusStar(Number(id) - 1)
+          focusStar(Number(routerObj.id) - 1)
         }, 400)
       }
+
     })
 
     // 详情数据
@@ -232,6 +238,9 @@ export default {
       // 发送接口拿到详情数据
       getInfoFu(id)
 
+      // 星球id存起来
+      qiuId.value = id
+
       console.log('click planet', id)
       onClickStar(id - 1)
     }
@@ -258,7 +267,10 @@ export default {
       onClickStar,
 
       isShowLoadingMask,
-      G4info
+      G4info,
+      RouterObj,
+      backTypeObj,
+      qiuId
     }
   }
 }
@@ -305,12 +317,21 @@ export default {
     }
 
     >h2 {
-      flex: 0 0 auto;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      // flex: 0 0 auto;
       font-size: 24px;
       font-family: Source Han Sans CN-Bold, Source Han Sans CN;
       font-weight: bold;
       color: #FFFFFF;
       margin-bottom: 21px;
+     .addBackImg{
+        cursor: pointer;
+        display: inline-block;
+        margin-right: 20px;
+        height: 50px;
+      }
     }
 
     >img.splitter {
@@ -363,116 +384,67 @@ export default {
         }
 
         // 企业
-        .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%;
-          }
+        .G41rowMain {
+          max-height: 150px;
+          overflow-y: auto;
 
-          &::after {
-            content: '';
-            opacity: 0;
-            position: absolute;
-            top: 50%;
-            left: 4px;
-            transform: translateY(-50%);
-            width: 16px;
-            height: 16px;
-            border: 1px dashed #FFE59F;
-            border-radius: 50%;
+          &::-webkit-scrollbar {
+            background: transparent;
+            width: calc(4 / 1080 * 83vh);
+          }
 
+          /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+          &::-webkit-scrollbar-thumb {
+            background: rgba(220, 231, 240, 0.2);
+            border-radius: 2px;
           }
 
-          &:hover {
-            color: #FFE59F;
+          .G41row {
+            position: relative;
+            padding-left: 30px;
+            cursor: pointer;
+            font-size: 16px;
+            height: 30px;
+            line-height: 30px;
 
             &::before {
-              opacity: 1;
+              opacity: .5;
+              content: '';
+              position: absolute;
+              top: 50%;
+              left: 8px;
+              transform: translateY(-50%);
+              width: 10px;
+              height: 10px;
+              background-color: #FFE59F;
+              border-radius: 50%;
             }
 
             &::after {
-              opacity: 1;
-            }
-          }
-        }
+              content: '';
+              opacity: 0;
+              position: absolute;
+              top: 50%;
+              left: 4px;
+              transform: translateY(-50%);
+              width: 16px;
+              height: 16px;
+              border: 1px dashed #FFE59F;
+              border-radius: 50%;
 
-        // 人物
-        .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;
-            }
-          }
-        }
+            &:hover {
+              color: #FFE59F;
 
-        // 重器
-        .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;
+              &::before {
+                opacity: 1;
+              }
 
+              &::after {
+                opacity: 1;
+              }
+            }
           }
         }
 

src/views/TreasureDetail.vue

@@ -20,6 +20,19 @@
       x5-video-player-type="h5"
     />
     <button
+      v-if="RouterObj.bid&&RouterObj.T"
+      class="back"
+      @click="$router.push(`${backTypeObj[RouterObj.T]}?id=${RouterObj.bid}`)"
+    >
+      <img
+        class=""
+        src="@/assets/images/icon_back.png"
+        alt=""
+        draggable="false"
+      >
+    </button>
+    <button
+      v-else
       class="back"
       @click="$router.push({
         name: 'TreasureView',
@@ -205,7 +218,7 @@
           v-for="item in G4ResList"
           :key="item.id"
           class="G3tabRow"
-          @click="$router.push(`/metaverse?id=${item.id}`)"
+          @click="$router.push(`/metaverse?id=${item.id}&bid=${RouterObj.id}&T=5`)"
         >
           {{ item.name }}
         </span>
@@ -271,7 +284,6 @@ import {
   onMounted,
   reactive,
   ref,
-  toRefs,
   watch,
   onUnmounted,
 } from 'vue'
@@ -280,8 +292,17 @@ import { useStore } from "vuex"
 import Swiper from 'swiper/bundle'
 import 'swiper/css/bundle'
 
+import { useRouter } from 'vue-router'
+import { backTypeObjTemp } from '@/utils2.js'
+
 export default {
   setup() {
+
+    // 回跳逻辑和回跳 信息
+    const router = useRouter()
+    const RouterObj = ref({})
+    const backTypeObj = ref(backTypeObjTemp)
+
     const prefix = process.env.VUE_APP_API_ORIGIN
     /**
      * 路由
@@ -470,6 +491,14 @@ export default {
       }
     })
 
+    // 路由回跳的信息记录卡里
+    onMounted(async () => {
+      const routerObj = router.currentRoute.value.query
+
+      RouterObj.value = routerObj
+
+    })
+
     return {
       activeSwiperItemIndex,
       activeTabIndex,
@@ -488,7 +517,9 @@ export default {
       prefix,
       rawData,
       videoUrlList,
-      G4ResList
+      G4ResList,
+      RouterObj,
+      backTypeObj,
     }
   },
 }