upp

linjiagou/src/components/Button/index.vue

@@ -1,11 +1,25 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const screenWidth = ref();
+import Left from "@/assets/img/icon/left.png";
+import LeftM from "@/assets/img/icon/leftM.png";
+
+onMounted(() => {
+  window.onresize = () => {
+    screenWidth.value = window.innerWidth;
+  };
+});
+
+const getAssetURL = (image: string) => {
+  return new URL(`../../assets/img/product/${image}`, import.meta.url).href;
+};
+</script>
 
 <template>
   <div class="back-button">
     <div class="icon">
-      <img src="../../assets/img/icon/left.png" alt="" />
+      <img :src="screenWidth > 480 ? Left : LeftM" alt="" />
     </div>
-    <div class="txt">返回</div>
+    <div class="txt" v-show="screenWidth > 480">返回</div>
   </div>
 </template>
 
@@ -42,4 +56,22 @@
     font-size: 15px;
   }
 }
+@media screen and (max-width: 480px) {
+  .back-button {
+    width: 40px;
+    height: 40px;
+    justify-content: center;
+    padding: 0;
+    cursor: pointer;
+    .icon {
+      width: 0;
+      height: 0;
+      margin-right: 0px;
+      img {
+        width: 30px;
+        height: 30px;
+      }
+    }
+  }
+}
 </style>

linjiagou/src/routes/index.ts

@@ -19,6 +19,12 @@ let routes = [
     name: "detail",
     component: () => import("@/view/product/detail/index.vue"),
   },
+  // 线上展厅——详情
+  {
+    path: "/sceneDetail",
+    name: "sceneDetail",
+    component: () => import("@/view/sceneDetail/index.vue"),
+  },
 ];
 // 路由
 const router = createRouter({

linjiagou/src/view/home/components/scene/index.vue

@@ -1,22 +1,111 @@
 <script setup lang="ts">
 import dataList from "@/data/data";
+const getAssetsFile = (image: string) => {
+  const url = `../../../../assets/img/home/scenes/${image}`;
+  return new URL(url, import.meta.url).href;
+};
+
+const emit = defineEmits(["close"]);
+const close = () => {
+  emit("close");
+};
+
+const router = useRouter();
+
+const goDetail = (name: string) => {
+  console.log(name);
+  router.push({
+    name: "sceneDetail",
+    query: {
+      name: name,
+    },
+  });
+};
 </script>
 
 <template>
-  <div class="list">
-    <div class="list-item">
-      
+  <div class="scene-box">
+    <div class="list">
+      <div
+        class="list-item"
+        v-for="(item, index) in dataList.scene"
+        :style="{
+          backgroundImage: 'url(' + getAssetsFile(item.bgImg) + ')',
+        }"
+        @click="goDetail(item.name)"
+      >
+        <div class="item-con">
+          <img class="thumbnail-box" :src="getAssetsFile(item.img)" alt="" />
+          <img class="name-box" :src="getAssetsFile(item.titleImg)" alt="" />
+          <div class="disc-box">{{ item.disc }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="close" @click="close">
+      <img src="../../../../assets/img/home/scenes/close.png" alt="" />
     </div>
   </div>
 </template>
 
 <style lang="less" scoped>
-.list {
+.scene-box {
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.466);
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  position: absolute;
+  z-index: 3;
+
+  .list {
+    width: 100%;
+    height: 90%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 5% 5% 0 5%;
+    justify-content: space-between;
+
+    .list-item {
+      width: 20%;
+      height: 100%;
+      background-size: 100% 100%;
+      position: relative;
+      cursor: pointer;
+
+      .item-con {
+        width: 92%;
+        height: 95%;
+        // background: #05cb63a6;
+        position: absolute;
+        left: 0.5%;
+        top: 2.5%;
+        padding: 3%;
+        box-sizing: border-box;
+        .thumbnail-box {
+          width: 100%;
+        }
+        .name-box {
+          width: 100%;
+          margin-top: 5px;
+        }
+        .disc-box {
+          font-size: 14px;
+          font-family: "SourceHanSerifCN-Medium";
+          line-height: 28px;
+          white-space: pre-wrap;
+          margin-top: 5px;
+        }
+      }
+    }
+  }
+  .close {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    img {
+      width: 40px;
+      cursor: pointer;
+    }
+  }
 }
 </style>

linjiagou/src/view/home/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Introduce from "./components/introduce/index.vue";
+import Scene from "./components/scene/index.vue";
 
 import Icon1 from "@/assets/img/home/icon1.png";
 import Icon2 from "@/assets/img/home/icon2.png";
@@ -81,6 +82,16 @@ onMounted(() => {
       "
     />
 
+    <!-- 线上展厅列表 -->
+    <Scene
+      v-show="moduleIndex == 2"
+      @close="
+        () => {
+          moduleIndex = 0;
+        }
+      "
+    />
+
     <!--  -->
 
     <img class="wave" :src="Bolang" alt="" />

linjiagou/src/view/product/detail/index.vue

@@ -91,4 +91,34 @@ onMounted(() => {
     }
   }
 }
+@media screen and (max-width: 480px) {
+  .all {
+    padding: 20px;
+    .back-btn {
+      left: 85%;
+      top: 90%;
+    }
+    .module-box {
+      width: 100%;
+      
+    }
+    .info-box {
+      width: 100%;
+
+      .info-title {
+        font-size: 16px;
+        margin: 10px 0;
+      }
+      div{
+        font-size: 14px;
+      }
+      .top {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+    }
+  }
+}
 </style>

linjiagou/src/view/sceneDetail/index.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import dataList from "@/data/data";
+import BButton from "@/components/Button/index.vue";
+
+const router = useRouter();
+const route = useRoute();
+
+const goBack = () => {
+  router.back();
+};
+
+const sceneItem = ref();
+
+onMounted(() => {
+  sceneItem.value = dataList.scene.find((item: any) => {
+    return item.name == route.query.name;
+  });
+  console.log(route.query.name,sceneItem.value);
+});
+</script>
+
+<template>
+  <div class="all" v-if="sceneItem">
+    <BButton class="back-btn" @click="goBack()" />
+    <iframe :src="sceneItem.sceneUrl" frameborder="0"></iframe>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.all {
+  width: 100vw;
+  height: 100vh;
+  box-sizing: border-box;
+  .back-btn {
+    position: absolute;
+    left: 5%;
+    top: 5%;
+    z-index: 2;
+  }
+  iframe {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+</style>

scene/public/static/css/main.css

@@ -4499,12 +4499,12 @@ a.tag-link {
 
 .frame-container {
     float: left;
-    width: calc(100% - 58px);
+    /* width: calc(100% - 58px); */
     height: 100%;
 }
 
 .fullWidth .frame-container {
-    width: 100%
+    width: 100%;
 }
 
 .frame {
@@ -4513,8 +4513,8 @@ a.tag-link {
     height: 132px;
     /* float: left; */
     position: relative;
-    display: flex;
-    justify-content: center;
+    /* display: flex;
+    justify-content: center; */
 }
 
 .frame.noScroll {

scene/src/components/info/index.vue

@@ -54,7 +54,7 @@ export default {
   position: absolute;
   z-index: 10000;
   height: 58px;
-  width: 575px;
+  min-width: 575px;
   top: 10px;
   left: 50%;
   transform: translateX(-50%);