文物静态页面开发

vue/package-lock.json

@@ -9,7 +9,9 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.6.5",
+        "v-viewer": "^1.5.1",
         "vue": "^2.6.11",
+        "vue-lazyload": "^1.3.3",
         "vue-router": "^3.2.0"
       },
       "devDependencies": {
@@ -12484,6 +12486,14 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/throttle-debounce": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmmirror.com/through2/-/through2-2.0.5.tgz",
@@ -13085,6 +13095,19 @@
         "uuid": "bin/uuid"
       }
     },
+    "node_modules/v-viewer": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmmirror.com/v-viewer/-/v-viewer-1.6.4.tgz",
+      "integrity": "sha512-LVkiUHpmsbsZXebeNXnu8krRCi5i2n07FeLFxoIVGhw8lVvTBO0ffpbDC6mLEuacCjrIh09HjIqpciwUtWE8lQ==",
+      "dependencies": {
+        "throttle-debounce": "^2.0.1",
+        "viewerjs": "^1.5.0"
+      },
+      "engines": {
+        "node": ">=4",
+        "npm": ">=3"
+      }
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmmirror.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -13130,6 +13153,11 @@
       "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
       "dev": true
     },
+    "node_modules/viewerjs": {
+      "version": "1.10.5",
+      "resolved": "https://registry.npmmirror.com/viewerjs/-/viewerjs-1.10.5.tgz",
+      "integrity": "sha512-QwKrmXlSfKg5x4y74F/jicpHIRqBMMfHXyboOxHDi5n4XAaejjpalphPq4/HW6venQAoMiD57HpVwBk0JvqpSA=="
+    },
     "node_modules/vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -13151,6 +13179,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "node_modules/vue-lazyload": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.4.tgz",
+      "integrity": "sha512-K0frbPQJuvFHVpdl/ov5CqCR/CHWeLGs8E8V1d/09DIETqBjeGhC1fLMmwUy3Go2Yd/VX610AZ7Mdn4B54592Q=="
+    },
     "node_modules/vue-loader": {
       "version": "15.10.0",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.0.tgz",
@@ -16117,7 +16150,8 @@
       "version": "4.5.19",
       "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.19.tgz",
       "integrity": "sha512-DUmfdkG3pCdkP7Iznd87RfE9Qm42mgp2hcrNcYQYSru1W1gX2dG/JcW8bxmeGSa06lsxi9LEIc/QD1yPajSCZw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "4.5.19",
@@ -16275,7 +16309,8 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
       "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
@@ -16514,13 +16549,15 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/ajv-errors/-/ajv-errors-1.0.1.tgz",
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -24557,6 +24594,11 @@
         }
       }
     },
+    "throttle-debounce": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ=="
+    },
     "through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmmirror.com/through2/-/through2-2.0.5.tgz",
@@ -25054,6 +25096,15 @@
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
       "dev": true
     },
+    "v-viewer": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmmirror.com/v-viewer/-/v-viewer-1.6.4.tgz",
+      "integrity": "sha512-LVkiUHpmsbsZXebeNXnu8krRCi5i2n07FeLFxoIVGhw8lVvTBO0ffpbDC6mLEuacCjrIh09HjIqpciwUtWE8lQ==",
+      "requires": {
+        "throttle-debounce": "^2.0.1",
+        "viewerjs": "^1.5.0"
+      }
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmmirror.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -25095,6 +25146,11 @@
         }
       }
     },
+    "viewerjs": {
+      "version": "1.10.5",
+      "resolved": "https://registry.npmmirror.com/viewerjs/-/viewerjs-1.10.5.tgz",
+      "integrity": "sha512-QwKrmXlSfKg5x4y74F/jicpHIRqBMMfHXyboOxHDi5n4XAaejjpalphPq4/HW6venQAoMiD57HpVwBk0JvqpSA=="
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -25116,6 +25172,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-lazyload": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.4.tgz",
+      "integrity": "sha512-K0frbPQJuvFHVpdl/ov5CqCR/CHWeLGs8E8V1d/09DIETqBjeGhC1fLMmwUy3Go2Yd/VX610AZ7Mdn4B54592Q=="
+    },
     "vue-loader": {
       "version": "15.10.0",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.0.tgz",

vue/package.json

@@ -9,7 +9,9 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
-    "vue-router": "^3.2.0"
+    "vue-router": "^3.2.0",
+    "v-viewer": "^1.5.1",
+    "vue-lazyload": "^1.3.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.13",

vue/public/index.html

@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="icon" href="./favicon.ico">
+    <title>雨花台烈士纪念馆</title>
   </head>
   <body>
     <noscript>

vue/src/assets/style/base.css

@@ -1,6 +1,47 @@
-*{
+* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   user-select: none;
+}
+
+/*修改提示文字的颜色*/
+input::-webkit-input-placeholder {
+  /* WebKit browsers */
+  color: #B7B7B7;
+}
+
+input:-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */
+  color: #B7B7B7;
+}
+
+input::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+  color: #B7B7B7;
+}
+
+input:-ms-input-placeholder {
+  /* Internet Explorer 10+ */
+  color: #B7B7B7;
+}
+
+.viewer-title {
+  display: none !important;
+}
+
+.viewer-prev {
+  display: none !important;
+}
+
+.viewer-next {
+  display: none !important;
+}
+
+.viewer-navbar {
+  display: none !important;
+}
+
+.viewer-close {
+  display: none !important;
 }

vue/src/main.js

@@ -2,6 +2,17 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 
+// 图片查看
+import 'viewerjs/dist/viewer.css'
+import Viewer from 'v-viewer'
+
+// 图片懒加载
+import VueLazyLoad from 'vue-lazyload'
+Vue.use(VueLazyLoad, {
+  error: require('@/assets/img/IMGerror.png'),
+  loading: require('@/assets/img/loading.gif')
+})
+Vue.use(Viewer)
 
 import './assets/style/base.css'
 

vue/src/router/index.js

@@ -9,6 +9,11 @@ const routes = [
     name: 'Home',
     component: () => import('../views/Home.vue')
   },
+  {
+    path: '/Goods',
+    name: 'Goods',
+    component: () => import('../views/Goods/index.vue')
+  },
 ]
 
 const router = new VueRouter({

vue/src/views/Goods/components/Img.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="Img">
+    <div class="txt">
+      <h3>20世纪20年代陈景星历史（左三） 在奉三高中与同学合影</h3>
+      <p>年 代：中华民国（1912~1949）</p>
+      <p>类 别：照片</p>
+      <p>质 地：纸</p>
+      <p>尺 寸：10*14cm</p>
+    </div>
+    <div class="close" @click="$emit('close')"></div>
+    <viewer class="viewerCla" ref="viewer" :images="lookPics">
+      <img :src="lookPics[0]" alt="" />
+    </viewer>
+    <div class="imgMain">
+      <div class="swiper-container">
+        <div class="swiper-wrapper">
+          <div
+            class="swiper-slide"
+            v-for="i in 5"
+            :key="i"
+            @click="lookImg(require('@/assets/img/Home/bac.jpg'))"
+          >
+            <img v-lazy="require('@/assets/img/Home/bac.jpg')" alt="" />
+          </div>
+        </div>
+      </div>
+      <div class="swiper-button-prev swiper-button-white"></div>
+      <div class="swiper-button-next swiper-button-white"></div>
+    </div>
+    <div class="swiper-pagination"></div>
+  </div>
+</template>
+
+<script>
+import Swiper from "@/assets/Swiper/swiper.js";
+export default {
+  name: "Img",
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      lookPics: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 点击查看大图
+    lookImg(url) {
+      let dom = this.$refs.viewer.$viewer;
+      this.lookPics = [url];
+      dom.show();
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    new Swiper(".swiper-container", {
+      slidesPerView: 1,
+      // 如果需要前进后退按钮
+      navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
+      },
+      pagination: {
+        el: ".swiper-pagination",
+      },
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+@import "../../../assets/Swiper/swiper.css";
+.viewerCla img {
+  display: none;
+}
+.Img {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url("../../../assets/img/Goods/GoodsBac.png");
+  background-size: 100% 100%;
+  .swiper-pagination {
+    width: 100%;
+    bottom: 40px;
+  }
+  /deep/.swiper-pagination-bullet {
+    margin: 0 4px;
+    background-color: #930909;
+  }
+  .txt {
+    position: absolute;
+    top: 44px;
+    left: 40px;
+    width: 308px;
+    h3 {
+      font-size: 20px;
+      color: #930909;
+      line-height: 28px;
+    }
+    p {
+      font-size: 16px;
+      color: #666666;
+      margin: 15px 0;
+    }
+  }
+  .close {
+    position: absolute;
+    width: 60px;
+    height: 60px;
+    cursor: pointer;
+    top: 44px;
+    right: 40px;
+    background-image: url("../../../assets/img/Goods/close2.png");
+    background-size: 100% 100%;
+  }
+  .imgMain {
+    margin: 120px auto 0;
+    position: relative;
+    width: 1400px;
+    height: 700px;
+    .swiper-button-next {
+      width: 40px;
+      height: 60px;
+      background-image: url("../../../assets/img/Goods/right.png");
+      background-size: 100% 100%;
+      color: transparent;
+    }
+    .swiper-button-prev {
+      width: 40px;
+      height: 60px;
+      background-image: url("../../../assets/img/Goods/left.png");
+      background-size: 100% 100%;
+      color: transparent;
+    }
+  }
+  .swiper-container {
+    width: 900px;
+    height: 700px;
+    margin: 0 auto;
+    .swiper-slide {
+      width: 900px;
+      height: 700px;
+      & > img {
+        cursor: pointer;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+}
+</style>

vue/src/views/Goods/components/Three.vue

@@ -0,0 +1,491 @@
+<!--  -->
+<template>
+  <div class="Three">
+    <div class="main">
+      <div class="bottomSm"></div>
+      <div
+        class="bacXian"
+        @mousedown.stop="mousedown"
+        @mousemove.stop="mousemove"
+        @mouseup.stop="mouseup"
+      >
+        <div class="centen">
+          <div class="rowTop">
+            <div class="row" @click.stop="look3D(i)" v-for="i in 12" :key="i">
+              <img v-lazy="require('@/assets/img/Home/demo.png')" alt="" />
+              <div class="name">民国时期谢士炎烈士用过的墨盒1</div>
+            </div>
+          </div>
+          <div class="rowTop rowFloo">
+            <div class="row" @click.stop="look3D(i)" v-for="i in 12" :key="i">
+              <img v-lazy="require('@/assets/img/Home/demo.png')" alt="" />
+              <div class="name">民国时期谢士炎烈士用过的墨盒2</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 点击3D出来的盒子 -->
+    <div class="Threebox" :class="{ show: modelShow }">
+      <div class="model">
+        <div class="close" @click="(modelShow = false), (move = false)">
+          <img src="../../../assets/img/Goods/close.png" alt="" />
+        </div>
+        <div class="modelll">
+          <img v-lazy="require('@/assets/img/Home/demo.png')" alt="" />
+        </div>
+        <div class="modelrr">
+          <h3>民国时期邓中夏烈士读书时期用的煤油灯</h3>
+          <p>年代：中华民国（1912~1949）</p>
+          <p>类别：其他</p>
+          <p>级别：二级</p>
+          <p>质地：玻璃</p>
+          <p>尺寸：17.5*9.2cm</p>
+          <div class="btnn" @click="modelBoxShow = true">查看三维文物</div>
+        </div>
+      </div>
+      <div class="modelBox" v-if="modelBoxShow">
+        <iframe
+          src="https://4dscene.4dage.com/culturalrelics/NSRDYT/Model2.html?m=nsr01"
+          frameborder="0"
+        ></iframe>
+        <h3>民国时期邓中夏烈士读书时期用的煤油灯</h3>
+        <div
+          class="close"
+          @click="(modelBoxShow = false), (modelShow = false), (move = false)"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Three",
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      move: false,
+      moveX: 0,
+      elDom: null,
+      TimeSrool: null,
+      Time2: null,
+      // 点击文物出来
+      modelShow: false,
+      modelBoxShow: false,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    modelShow(val) {
+      if (!val) {
+        clearInterval(this.Time2);
+        this.Time2 = setTimeout(() => {
+          if (this.modelShow) return;
+          clearInterval(this.TimeSrool);
+          this.TimeSrool = setInterval(() => {
+            const clientWidth = this.elDom.clientWidth;
+            const scrollLeft = this.elDom.scrollLeft;
+            const scrollWidth = this.elDom.scrollWidth;
+            if (clientWidth + scrollLeft >= scrollWidth)
+              this.elDom.scrollLeft = 0;
+            else this.elDom.scrollLeft = this.elDom.scrollLeft + 1;
+          }, 40);
+        }, 5000);
+      }
+    },
+    move(val) {
+      let rowDom = document.querySelectorAll(".rowTop");
+      if (!val) {
+        clearInterval(this.Time2);
+        this.Time2 = setTimeout(() => {
+          if (this.modelShow) return;
+          clearInterval(this.TimeSrool);
+          this.TimeSrool = setInterval(() => {
+            const clientWidth = this.elDom.clientWidth;
+            const scrollLeft = this.elDom.scrollLeft;
+            const scrollWidth = this.elDom.scrollWidth;
+            if (clientWidth + scrollLeft >= scrollWidth)
+              this.elDom.scrollLeft = 0;
+            else this.elDom.scrollLeft = this.elDom.scrollLeft + 1;
+          }, 40);
+        }, 5000);
+        setTimeout(() => {
+          rowDom.forEach((v) => {
+            v.style.pointerEvents = "auto";
+          });
+        }, 200);
+      } else {
+        setTimeout(() => {
+          rowDom.forEach((v) => {
+            v.style.pointerEvents = "none";
+          });
+        }, 100);
+      }
+    },
+  },
+  //方法集合
+  methods: {
+    // 给主页面分享点击的时候调用的方法
+    moveShareCut(val) {
+      if (val) {
+        clearInterval(this.Time2);
+        clearInterval(this.TimeSrool);
+      } else {
+        clearInterval(this.Time2);
+        this.Time2 = setTimeout(() => {
+          if (this.modelShow) return;
+          clearInterval(this.TimeSrool);
+          this.TimeSrool = setInterval(() => {
+            const clientWidth = this.elDom.clientWidth;
+            const scrollLeft = this.elDom.scrollLeft;
+            const scrollWidth = this.elDom.scrollWidth;
+            if (clientWidth + scrollLeft >= scrollWidth)
+              this.elDom.scrollLeft = 0;
+            else this.elDom.scrollLeft = this.elDom.scrollLeft + 1;
+          }, 40);
+        }, 5000);
+      }
+    },
+
+    look3D(id) {
+      this.modelShow = true;
+    },
+    mousedown(e) {
+      this.move = true;
+      //获取x坐标和y坐标
+      this.moveX = e.clientX;
+      clearInterval(this.TimeSrool);
+    },
+    mousemove(e) {
+      if (this.move) {
+        //获取x和y
+        let nx = e.clientX;
+        let nl = this.moveX - nx;
+        this.elDom.scrollLeft = this.elDom.scrollLeft + nl / 10;
+      }
+    },
+    mouseup(e) {
+      this.move = false;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let boxDom = document.querySelector(".bacXian");
+    boxDom.style.width = 300 * 12 + "px";
+    this.elDom = document.querySelector(".main");
+
+    this.Time2 = setTimeout(() => {
+      if (this.modelShow) return;
+      clearInterval(this.TimeSrool);
+      this.TimeSrool = setInterval(() => {
+        const clientWidth = this.elDom.clientWidth;
+        const scrollLeft = this.elDom.scrollLeft;
+        const scrollWidth = this.elDom.scrollWidth;
+        if (clientWidth + scrollLeft >= scrollWidth) this.elDom.scrollLeft = 0;
+        else this.elDom.scrollLeft = this.elDom.scrollLeft + 1;
+      }, 40);
+    }, 5000);
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+
+  //销毁事件
+  beforeDestroy() {
+    clearInterval(this.TimeSrool);
+  },
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Three {
+  padding-bottom: 10px;
+  width: 100%;
+  height: calc(100% - 140px);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  .bottomSm {
+    cursor: default;
+    z-index: 15;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 30px;
+  }
+  .Threebox {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.5s;
+    position: fixed;
+    z-index: 20;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(4px);
+    .model {
+      border-bottom: 6px solid #cea763;
+      border-top: 6px solid #cea763;
+      position: absolute;
+      width: 700px;
+      height: 460px;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-image: url("../../../assets/img/Goods/modelBac.png");
+      background-size: 100% 100%;
+      display: flex;
+      padding: 60px 70px 60px 40px;
+      .close {
+        position: absolute;
+        cursor: pointer;
+        top: 10px;
+        right: 10px;
+        width: 50px;
+        height: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        & > img {
+          width: 40px;
+        }
+      }
+      .modelll {
+        width: 340px;
+        height: 100%;
+        border: 1px solid #d8b275;
+        padding: 15px;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+      .modelrr {
+        position: relative;
+        width: 360px;
+        height: 100%;
+        padding: 0 15px 0 50px;
+        color: #fff;
+        font-size: 14px;
+        h3 {
+          font-size: 20px;
+          color: #cea763;
+          line-height: 28px;
+        }
+        p {
+          margin: 15px 0;
+        }
+        .btnn {
+          cursor: pointer;
+          position: absolute;
+          bottom: 0;
+          left: 40px;
+          width: 140px;
+          height: 50px;
+          border-radius: 24px;
+          background-color: #d8b275;
+          line-height: 50px;
+          text-align: center;
+          font-size: 16px;
+          color: #fff;
+        }
+      }
+    }
+    .modelBox {
+      position: absolute;
+      z-index: 10;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-image: url("../../../assets/img/Goods/GoodsBac.png");
+      background-size: 100% 100%;
+      overflow: hidden;
+      iframe {
+        width: 100%;
+        height: 100%;
+      }
+      h3 {
+        position: absolute;
+        width: 260px;
+        top: 44px;
+        left: 40px;
+        color: #930909;
+        font-size: 20px;
+        line-height: 26px;
+      }
+      .close {
+        position: absolute;
+        width: 60px;
+        height: 60px;
+        cursor: pointer;
+        top: 44px;
+        right: 40px;
+        background-image: url("../../../assets/img/Goods/close2.png");
+        background-size: 100% 100%;
+      }
+    }
+  }
+  .show {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .main::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
+    height: 6px;
+  }
+  .main::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 10px;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: #930909;
+  }
+  .main::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    background: #d8b275;
+  }
+  .main {
+    cursor: grab;
+    width: 100%;
+    height: 100%;
+    overflow-x: auto;
+
+    .bacXian {
+      height: 100%;
+      position: relative;
+      .centen {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        min-width: 100vw;
+        height: 2px;
+        transform: translateY(-50%);
+        background-color: #930909;
+        .rowTop {
+          position: absolute;
+          top: -200px;
+          left: -60px;
+          width: 100%;
+          display: flex;
+          .row {
+            cursor: pointer;
+            position: relative;
+            width: 300px;
+            text-align: center;
+            &::after {
+              content: "";
+              position: absolute;
+              top: 110px;
+              left: 50%;
+              transform: translateX(-50%);
+              height: 90px;
+              width: 2px;
+              background-color: #930909;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              top: 196px;
+              left: 50%;
+              transform: translateX(-50%);
+              width: 8px;
+              height: 8px;
+              background-color: #930909;
+              border-radius: 50%;
+            }
+            .name {
+              position: absolute;
+              top: 142px;
+              left: 50%;
+              width: 100%;
+              height: 60px;
+              padding: 0 10px 0 15px;
+              color: #666666;
+              font-size: 14px;
+              display: flex;
+              align-items: center;
+              word-wrap: break-word;
+              text-align: left;
+            }
+            &:nth-of-type(2n) {
+              top: -100px;
+              &::after {
+                height: 190px;
+              }
+              &::before {
+                top: 296px;
+              }
+              .name {
+                top: 240px;
+              }
+            }
+            img {
+              pointer-events: none;
+              width: 100px;
+              height: 100px;
+              object-fit: contain;
+            }
+          }
+        }
+        .rowFloo {
+          top: auto;
+          bottom: -200px;
+          left: 80px;
+          .row {
+            &::after {
+              content: "";
+              top: auto;
+              bottom: 110px;
+            }
+            &::before {
+              top: auto;
+              bottom: 196px;
+            }
+            .name {
+              top: auto;
+              bottom: 142px;
+              border-top: 2px solid #930909;
+            }
+            &:nth-of-type(2n) {
+              top: auto;
+              bottom: -100px;
+              &::before {
+                top: auto;
+                bottom: 296px;
+              }
+              .name {
+                top: auto;
+                bottom: 242px;
+              }
+            }
+            &:last-child {
+              .name {
+                width: 60%;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

vue/src/views/Goods/components/Tow.vue

@@ -0,0 +1,124 @@
+<!--  -->
+<template>
+  <div class="Tow">
+    <div class="main">
+      <div class="row" @click="lookInfo(i)" v-for="i in 20" :key="i">
+        <div><img v-lazy="require('@/assets/img/Home/demo.png')" alt="" /></div>
+        <p>1924年张应春烈士参加第三次全国运动会获得的银质奖章</p>
+      </div>
+    </div>
+    <!-- 点击图片出来的页面 -->
+    <Img v-if="type === 'img'" @close="type = ''" />
+  </div>
+</template>
+
+<script>
+import Img from "./Img";
+export default {
+  name: "Tow",
+  //import引入的组件需要注入到对象中才能使用
+  components: { Img },
+  data() {
+    //这里存放数据
+    return {
+      type: "",
+      info: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    lookInfo(val) {
+      this.ifnfo = val;
+      this.type = "img";
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Tow {
+  width: 100%;
+  height: calc(100% - 140px);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  padding: 0 80px 0 160px;
+  .main::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
+    height: 0px;
+  }
+  .main::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 10px;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: #930909;
+  }
+  .main::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    background: #d8b275;
+  }
+  .main {
+    width: 100%;
+    height: 96%;
+    overflow-y: auto;
+    padding-right: 60px;
+    display: flex;
+    flex-wrap: wrap;
+    .row {
+      cursor: pointer;
+      border-radius: 6px;
+      overflow: hidden;
+      width: 370px;
+      height: 280px;
+      margin: 0 40px 40px 0;
+      background-color: #dddddd;
+      & > div {
+        width: 100%;
+        height: 210px;
+        padding: 20px;
+        & > img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+      & > P {
+        display: flex;
+        align-items: center;
+        height: 70px;
+        padding: 3px 5px;
+        font-size: 16px;
+        color: #666666;
+        line-height: 24px;
+        background-color: #fff;
+      }
+      &:hover {
+        & > P {
+          color: #930909;
+        }
+      }
+      &:nth-of-type(4n) {
+        margin-right: 0;
+      }
+    }
+  }
+}
+</style>

vue/src/views/Goods/index.vue

@@ -0,0 +1,478 @@
+<!--  -->
+<template>
+  <div class="Goods" @click.once="music = true">
+    <audio src="../../assets/media/bacMusic.mp3" loop id="bacMusic"></audio>
+    <!-- 左侧搜索 -->
+    <div class="leftTop">
+      <div class="model">
+        <div
+          class="row1"
+          @click="model = '3D'"
+          :class="{ active: model === '3D' }"
+        >
+          <div class="rowll"></div>
+          <div class="rowrr">三维文物</div>
+        </div>
+        <div
+          class="row1"
+          @click="model = '2D'"
+          :class="{ active: model === '2D' }"
+        >
+          <div class="rowll"></div>
+          <div class="rowrr">二维文物</div>
+        </div>
+      </div>
+      <div class="type">
+        <div class="typell">类型：</div>
+        <div class="typerr">
+          <div
+            class="row"
+            @click="genre = item.type"
+            :class="{ active: item.type === genre }"
+            v-for="(item, index) in genreList"
+            :key="index"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+      <div class="inputSearch" @keyup.enter="mySearch">
+        <input
+          class="searll"
+          autofocus
+          type="text"
+          v-model="txt"
+          placeholder="请输入文物名称"
+        />
+        <div class="searrr" @click="mySearch">
+          <img src="../../assets/img/Goods/search.svg" alt="" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 右侧图标 -->
+    <div class="rightTop">
+      <div
+        class="row"
+        @click="rightClisk(item.type)"
+        v-for="item in rightList"
+        :key="item.type"
+        :class="{
+          active2:
+            (music && item.type === 2) ||
+            (like && item.type === 3) ||
+            (share && item.type === 4),
+        }"
+      >
+        <img
+          :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
+          alt=""
+          v-if="music && item.type === 2"
+        />
+        <img
+          :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
+          alt=""
+          v-else-if="like && item.type === 3"
+        />
+        <img
+          :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
+          alt=""
+          v-else-if="share && item.type === 4"
+        />
+        <img
+          :src="require(`@/assets/img/Goods/inco${item.type}.png`)"
+          alt=""
+          v-else
+        />
+        <transition name="likeAddAnimate">
+          <div class="likeMove" v-show="like && item.type === 3">+ 1</div>
+        </transition>
+        <p>
+          {{ item.name }}
+        </p>
+      </div>
+    </div>
+
+    <div class="nullSerach" v-if="0">
+      <div>
+        <img src="../../assets/img/Goods/nullSearch.png" alt="" />
+        <p>暂时没有数据</p>
+        <p>请试一下其他关键字</p>
+      </div>
+    </div>
+    <template v-else>
+      <Three ref="ThreeRef" v-if="model === '3D'" />
+      <Tow v-else />
+    </template>
+
+    <!-- 分享页面 -->
+    <div class="shareBox" :class="{ shareBoxShow: share }">
+      <div class="shareMain">
+        <div class="close" @click="share = false"></div>
+        <h3>分享</h3>
+        <p>
+          请使用手机扫描二维码或
+          <br />
+          复制分享链接
+        </p>
+        <img src="../../assets/img/Goods/Rcode.jpg" alt="" />
+        <div class="btnn" @click="copyPcTxt">复制分享链接</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Three from "./components/Three.vue";
+import Tow from "./components/Tow.vue";
+export default {
+  name: "Goods",
+  //import引入的组件需要注入到对象中才能使用
+  components: { Three, Tow },
+  data() {
+    //这里存放数据
+    return {
+      model: "3D",
+      genre: "all",
+      txt: "",
+      genreList: [
+        { name: "全部", type: "all" },
+        { name: "手稿", type: "all1" },
+        { name: "书刊", type: "all2" },
+        { name: "用具", type: "all3" },
+        { name: "服装", type: "all4" },
+      ],
+      rightList: [
+        { name: "首页", type: 1 },
+        { name: "声音", type: 2 },
+        { name: "点赞", type: 3 },
+        { name: "分享", type: 4 },
+      ],
+      rightType: "",
+      music: false,
+      like: false,
+      share: false,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    share(val) {
+      this.$refs.ThreeRef.moveShareCut(val);
+    },
+    music(val) {
+      let dom = document.querySelector("#bacMusic");
+      if (val) dom.play();
+      else dom.pause();
+    },
+    model() {
+      this.genre = "all";
+      this.txt = "";
+    },
+  },
+  //方法集合
+  methods: {
+    mySearch() {},
+    rightClisk(type) {
+      if (type === 1) this.$router.push("/");
+      if (type === 2) this.music = !this.music;
+      if (type === 3) {
+        if (this.like) return;
+        this.like = true;
+        setTimeout(() => {
+          this.like = false;
+        }, 2000);
+      }
+      if (type === 4) this.share = true;
+    },
+    //点击复制链接
+    copyPcTxt() {
+      // 存储传递过来的数据
+      let OrderNumber = window.location.href;
+      // 创建一个input 元素
+      // createElement() 方法通过指定名称创建一个元素
+      let newInput = document.createElement("input");
+      // 讲存储的数据赋值给input的value值
+      newInput.value = OrderNumber;
+      // appendChild() 方法向节点添加最后一个子节点。
+      document.body.appendChild(newInput);
+      // 选中input元素中的文本
+      // select() 方法用于选择该元素中的文本。
+      newInput.select();
+      // 执行浏览器复制命令
+      //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
+      document.execCommand("Copy");
+      // 清空输入框
+      newInput.remove();
+      alert("复制成功");
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.likeAddAnimate-enter-active,
+.likeAddAnimate-leave-active {
+  transition: all 2s ease;
+}
+.likeAddAnimate-enter,
+.likeAddAnimate-leave {
+  transform: translateY(0) scale(0);
+  opacity: 0;
+}
+.likeAddAnimate-enter-to,
+.likeAddAnimate-leave-to {
+  transform: translateY(-30px) scale(1.2);
+  opacity: 1;
+}
+.Goods {
+  padding-top: 140px;
+  width: 100%;
+  height: 100%;
+  background-image: url("../../assets/img/Goods/GoodsBac.png");
+  background-size: 100% 100%;
+  position: relative;
+  .leftTop {
+    position: absolute;
+    top: 42px;
+    left: 160px;
+    height: 40px;
+    display: flex;
+    .model {
+      color: #fff;
+      width: 260px;
+      height: 40px;
+      border-radius: 20px;
+      background-color: #930909;
+      display: flex;
+      justify-content: space-between;
+      padding: 0 22px;
+      margin-right: 50px;
+      .row1 {
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 16px;
+        .rowll {
+          margin-right: 6px;
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+          border: 1px solid #d8b275;
+          position: relative;
+        }
+        .rowrr {
+          padding-bottom: 2px;
+        }
+      }
+      .active {
+        color: #d8b275;
+        .rowll {
+          &::after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            border-radius: 50%;
+            width: 14px;
+            height: 14px;
+            background-color: #d8b275;
+          }
+        }
+      }
+    }
+    .type {
+      display: flex;
+      font-size: 16px;
+      color: #fff;
+      background-color: #930909;
+      height: 40px;
+      border-radius: 20px;
+      padding: 0 20px;
+      margin-right: 50px;
+      .typell {
+        width: 50px;
+        line-height: 38px;
+      }
+      .typerr {
+        display: flex;
+        align-items: center;
+        padding-bottom: 4px;
+        .row {
+          cursor: pointer;
+          margin: 0 10px;
+        }
+        .active {
+          color: #d8b275;
+          position: relative;
+          &::after {
+            content: "";
+            position: absolute;
+            bottom: -4px;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background-color: #d8b275;
+          }
+        }
+      }
+    }
+    .inputSearch {
+      overflow: hidden;
+      display: flex;
+      font-size: 16px;
+      color: #fff;
+      width: 260px;
+      height: 40px;
+      border-radius: 20px;
+      display: flex;
+      .searll {
+        width: 214px;
+        height: 40px;
+        border: none;
+        background-color: #fff;
+        padding: 0 10px 0 20px;
+        &:focus {
+          outline: none;
+        }
+      }
+      .searrr {
+        cursor: pointer;
+        background-color: #930909;
+        width: 46px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-right: 4px;
+        img {
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+  }
+  .rightTop {
+    position: absolute;
+    top: 32px;
+    right: 160px;
+    height: 60px;
+    display: flex;
+    .row {
+      position: relative;
+      cursor: pointer;
+      width: 50px;
+      text-align: center;
+      margin-left: 24px;
+      & > img {
+        width: 50px;
+      }
+      .likeMove {
+        color: #930909;
+        position: absolute;
+        top: 10px;
+        width: 100%;
+        text-align: center;
+      }
+    }
+    .active2 {
+      color: #930909;
+    }
+  }
+  .nullSerach {
+    width: 100%;
+    height: 90%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    & > div {
+      width: 240px;
+      & > img {
+        width: 100%;
+      }
+      & > p {
+        text-align: center;
+        color: #666666;
+        font-size: 24px;
+        margin: 10px 0;
+      }
+    }
+  }
+  .shareBox {
+    z-index: 11;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    pointer-events: none;
+    backdrop-filter: blur(4px);
+    transition: opacity 0.5s;
+    .shareMain {
+      padding: 40px 30px 0;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 450px;
+      height: 650px;
+      background-image: url("../../assets/img/Goods/shareBac.png");
+      background-size: 100% 100%;
+      text-align: center;
+      .close {
+        width: 48px;
+        height: 48px;
+        cursor: pointer;
+        position: absolute;
+        right: -24px;
+        top: -24px;
+        background-image: url("../../assets/img/Goods/shareClose.png");
+        background-size: 100% 100%;
+      }
+      h3 {
+        text-align: left;
+        color: #d8b275;
+        font-size: 24px;
+        margin-bottom: 50px;
+      }
+      p {
+        font-size: 20px;
+        color: #ffffff;
+        margin-bottom: 40px;
+      }
+      img {
+        width: 240px;
+        margin-bottom: 50px;
+      }
+      .btnn {
+        cursor: pointer;
+        width: 280px;
+        margin: 0 auto;
+        height: 60px;
+        border-radius: 30px;
+        border: 2px solid #d8b275;
+        line-height: 58px;
+        font-size: 20px;
+        color: #ffffff;
+      }
+    }
+  }
+  .shareBoxShow {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+</style>

vue/src/views/Home.vue

@@ -1,44 +1,130 @@
 <!--  -->
 <template>
-<div class='Home'>Home</div>
+  <div class="Home" @click.once="music = true">
+    <audio src="../assets/media/bacMusic.mp3" loop id="bacMusic"></audio>
+    <div class="logo">
+      <img src="../assets/img/Home/logo.png" alt="" />
+    </div>
+    <div class="music" @click="music = !music">
+      <img
+        :src="require(`@/assets/img/Home/music${music ? 'X' : ''}.png`)"
+        alt=""
+      />
+    </div>
+    <!-- 底部列表 -->
+    <div class="tab">
+      <div class="row">场馆漫游</div>
+      <div class="row row2">全景风貌</div>
+      <div class="row row3" @click="toGoods">文物赏析</div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-name:'Home',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "Home",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      music: false,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    music(val) {
+      let dom = document.querySelector("#bacMusic");
+      if (val) dom.play();
+      else dom.pause();
+    },
+  },
+  //方法集合
+  methods: {
+    toGoods() {
+      let dom = document.querySelector("#bacMusic");
+      dom.pause();
+      this.$router.push("/Goods");
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
 </script>
 <style lang='less' scoped>
-//@import url(); 引入公共css类
-
+.Home {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-image: url("../assets/img/Home/bac.jpg");
+  background-size: cover;
+  .logo {
+    position: absolute;
+    top: 70px;
+    left: 70px;
+    width: 690px;
+    height: 140px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .music {
+    position: absolute;
+    top: 26px;
+    right: 26px;
+    width: 38px;
+    height: 38px;
+    cursor: pointer;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .tab {
+    position: absolute;
+    bottom: 76px;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: 78px;
+    left: 50%;
+    transform: translateX(-50%);
+    .row {
+      cursor: pointer;
+      width: 276px;
+      height: 78px;
+      background-image: url("../assets/img/Home/list1.png");
+      background-size: 100% 100%;
+      font-size: 24px;
+      color: #fff;
+      text-align: center;
+      line-height: 78px;
+      margin-right: 120px;
+      padding-left: 40px;
+      &:hover {
+        color: #d8b275;
+      }
+    }
+    .row2 {
+      background-image: url("../assets/img/Home/list2.png");
+      background-size: 100% 100%;
+    }
+    .row3 {
+      background-image: url("../assets/img/Home/list3.png");
+      background-size: 100% 100%;
+      margin-right: 0;
+    }
+  }
+}
 </style>