Procházet zdrojové kódy

feat: add back button

chenlei před 6 měsíci
rodič
revize
0ae841a6c7

+ 11 - 1
packages/pc/src/App.vue

@@ -4,7 +4,7 @@ import Topbar from "./components/Topbar.vue";
 </script>
 
 <template>
-  <Topbar />
+  <Topbar v-show="!$route.meta.hideTopbar" />
 
   <RouterView />
 </template>
@@ -19,4 +19,14 @@ import Topbar from "./components/Topbar.vue";
   width: 100%;
   height: 100%;
 }
+
+.icon-back {
+  position: fixed;
+  top: 130px;
+  left: 30px;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  z-index: 100;
+}
 </style>

binární
packages/pc/src/assets/images/back.png


+ 8 - 0
packages/pc/src/router/index.js

@@ -33,6 +33,14 @@ const router = createRouter({
       name: "mediaDetail",
       component: () => import("../views/Media/Detail/index.vue"),
     },
+    {
+      path: "/iframe",
+      name: "iframe",
+      meta: {
+        hideTopbar: true,
+      },
+      component: () => import("../views/Iframe/index.vue"),
+    },
   ],
 });
 

+ 6 - 0
packages/pc/src/views/Antiquity/Detail/index.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="antiquity-detail">
+    <img
+      class="icon-back"
+      src="@/assets/images/back.png"
+      @click="$router.back()"
+    />
+
     <div class="antiquity-detail-two">
       <template v-if="!isThree">
         <div

+ 9 - 1
packages/pc/src/views/Exhibition/index.vue

@@ -17,9 +17,17 @@
 
 <script setup>
 import { exhibitionData, getEnvImagePath } from "@lbc/base";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
 
 const goToDetail = (item) => {
-  window.location = item.link;
+  router.push({
+    name: "iframe",
+    query: {
+      u: encodeURIComponent(item.link),
+    },
+  });
 };
 </script>
 

+ 23 - 0
packages/pc/src/views/Iframe/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <img
+    class="icon-back"
+    src="@/assets/images/back.png"
+    @click="$router.back()"
+  />
+
+  <iframe src="https://www.720yun.com/vr/e17jkrem5y1" />
+</template>
+
+<style lang="scss" scoped>
+.icon-back {
+  top: 30px;
+}
+
+iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+</style>

+ 6 - 0
packages/pc/src/views/Media/Detail/index.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="media-detail">
+    <img
+      class="icon-back"
+      src="@/assets/images/back.png"
+      @click="$router.back()"
+    />
+
     <ElScrollbar class="media-detail-wrap">
       <video
         :src="getEnvImagePath(detail?.url)"