up

src/components/son2.vue

@@ -5,7 +5,7 @@
       <div class="row" @click="toInfo(item.id)" :style="`width: ${item.ww};`">
         <img
           :style="`height: ${item.hh};`"
-          :src="require(`@/assets/img/zhongxi/${item.id}.png`)"
+          :src="require(`@/assets/img/zhanpin/${item.id}.png`)"
           alt=""
         />
         <p>{{ item.name }}</p>

src/components/son4.vue

@@ -17,7 +17,7 @@
       <div class="row" @click="toInfo(item.id)" :style="`width: ${item.ww};`">
         <img
           :style="`height: ${item.hh};`"
-          :src="require(`@/assets/img/shengchan/${item.id}.png`)"
+          :src="require(`@/assets/img/zhanpin/${item.id}.png`)"
           alt=""
         />
         <p>{{ item.name }}</p>
@@ -61,6 +61,7 @@ export default {
           name: "东印度旗帜",
           ww: "254px",
           hh: "161px",
+          pad: true,
         },
         {
           id: 23,

src/components/son5.vue

@@ -1,45 +1,171 @@
 <template>
-<div class='son5'>son5</div>
+  <div class="son5">
+    <div class="sonBj1"></div>
+    <div
+      class="rowBox"
+      v-for="item in data"
+      :key="item.id"
+      :class="{ noPad: item.pad,centenAc:item.centen }"
+    >
+      <div class="row" @click="toInfo(item.id)" :style="`width: ${item.ww};`">
+        <img
+          :style="`height: ${item.hh};`"
+          :src="require(`@/assets/img/zhanpin/${item.id}.png`)"
+          alt=""
+        />
+        <p>{{ item.name }}</p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-name:'son5',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "son5",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [
+        {
+          id: 25,
+          name: "清鹤顶骨嘴犀角杆竹节形鸦片烟枪",
+          ww: "200px",
+          hh: "43px",
+        },
+        {
+          id: 26,
+          name: "清玉嘴竹杆包铜“光庭写”款瓷斗鸦片烟枪",
+          ww: "184px",
+          hh: "60px",
+        },
+        {
+          id: 27,
+          name: "清玉嘴铜杆“庚午夏”款瓷斗鸦片烟枪",
+          ww: "207px",
+          hh: "45px",
+        },
+        {
+          id: 28,
+          name: "清玻璃罩铜底座青花菊花纹瓷鸦片烟灯",
+          ww: "118px",
+          hh: "237px",
+        },
+        {
+          id: 29,
+          name: "清玻璃罩富贵寿考花鸟纹铜鸦片烟灯",
+          ww: "128px",
+          hh: "231px",
+        },
+        {
+          id: 30,
+          name: "19世纪掐丝洋花卉纹铜胎珐琅木底盖鸦片烟具",
+          ww: "179px",
+          hh: "107px",
+        },
+        {
+          id: 31,
+          name: "清代铜鸦片烟具",
+          ww: "152px",
+          hh: "120px",
+        },
+        {
+          id: 32,
+          name: "清佚名画家绘吸食鸦片图通草纸水彩画",
+          ww: "233px",
+          hh: "183px",
+          pad: true,
+        },
+        {
+          id: 33,
+          name: "19世纪吸食鸦片的中国人印刷铜版画",
+          ww: "237px",
+          hh: "208px",
+          pad: true,
+        },
+        {
+          id: 34,
+          name: "1850年吸食鸦片的中国人彩色印刷铜版画",
+          ww: "223px",
+          hh: "229px",
+          pad: true,
+        },
+        {
+          id: 35,
+          name: "1850年吸食鸦片的中国人彩色印刷铜版画",
+          ww: "251px",
+          hh: "226px",
+          pad: true,
+        },
+        {
+          id: 36,
+          name: "19世纪鸦片危害漫画",
+          ww: "227px",
+          hh: "316px",
+          pad: true,
+          centen:true
+        },
+        {
+          id: 37,
+          name: "1922年陈乐琴愁城十二景四条屏",
+          ww: "100%",
+          hh: "auto",
+          pad: true,
+        },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    toInfo(id) {
+      this.$router.push(`/info/${id}`);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前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>
-.son5{
-  color: red;
+.son5 {
+  .rowBox {
+    padding: 0 24px;
+    margin-bottom: 50px;
+    display: flex;
+    .row {
+      & > img {
+        width: 100%;
+      }
+      & > p {
+        color: #ffffff;
+        font-size: 16px;
+        text-align: center;
+        width: 100%;
+        padding: 10px;
+        line-height: 24px;
+      }
+    }
+    &:nth-of-type(2n + 1) {
+      justify-content: end;
+    }
+  }
+  .noPad {
+    padding: 0;
+  }
+  .centenAc{
+    justify-content: center !important;
+  }
 }
-
 </style>

src/components/son6.vue

@@ -1,45 +1,195 @@
 <template>
-<div class='son6'>son6</div>
+  <div class="son6">
+    <!-- 点击视频播放的盒子 -->
+    <div class="videoPlayBox" v-if="videoId">
+      <video controls autoplay :src="`/data/${videoId}.mp4`"></video>
+      <!-- 关闭按钮 -->
+      <div class="close" @click="videoId = null"></div>
+    </div>
+
+    <!-- 点击场景播放的盒子 -->
+    <div class="videoPlayBox" v-if="modelId">
+      <iframe :src="modelId" frameborder="0"></iframe>
+      <!-- 关闭按钮 -->
+      <div class="close" @click="modelId = null"></div>
+    </div>
+
+    <!-- 场景 -->
+    <div class="modelBox">
+      <div
+        class="modelPlay"
+        @click="
+          modelId =
+            'https://www.4dkankan.com/panorama/show.html?id=WK1526492643662524416&vr=fd720_JUXrSixwc'
+        "
+      ></div>
+      <img src="../assets/img/mod1.png" alt="" />
+    </div>
+    <div class="shuming">场景：围馆封仓</div>
+
+    <div class="sonBj1"></div>
+    <div
+      class="rowBox"
+      v-for="item in data"
+      :key="item.id"
+      :class="{ noPad: item.pad }"
+    >
+      <div class="row" @click="toInfo(item.id)" :style="`width: ${item.ww};`">
+        <img
+          :style="`height: ${item.hh};`"
+          :src="require(`@/assets/img/zhanpin/${item.id}.png`)"
+          alt=""
+        />
+        <p>{{ item.name }}</p>
+      </div>
+    </div>
+    <div class="sonBj2"></div>
+    <!-- 视频 -->
+    <div class="videoBox">
+      <div class="vidPlay" @click="videoId = '3'"></div>
+      <img src="../assets/img/vid4.png" alt="" />
+    </div>
+    <div class="shuming">《传讯行商》</div>
+  </div>
 </template>
 
 <script>
 export default {
-name:'son6',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "son6",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      videoId: null,
+      modelId: null,
+      data: [
+        {
+          id: 38,
+          name: "林则徐画像",
+          ww: "155px",
+          hh: "183px",
+          pad: true,
+        },
+        {
+          id: 39,
+          name: "（油画）销烟壮举",
+          ww: "257px",
+          hh: "190px",
+        },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    toInfo(id) {
+      this.$router.push(`/info/${id}`);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前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>
-.son6{
-  color: red;
-}
+.son6 {
+  .videoPlayBox {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.9);
+    video {
+      position: absolute;
+      width: 100%;
+      max-height: 60vh;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .close {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 32px;
+      height: 32px;
+      background: url("../assets/img/close.png");
+      background-size: 100% 100%;
+    }
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .videoBox {
+    position: relative;
+    & > img {
+      width: 100%;
+    }
+    .vidPlay {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 77px;
+      height: 77px;
+      background: url("../assets/img/videoPlay.png");
+      background-size: 100% 100%;
+    }
+  }
+  .modelBox {
+    position: relative;
+    & > img {
+      width: 100%;
+    }
+    .modelPlay {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 77px;
+      height: 77px;
+      background: url("../assets/img/modelPlay.png");
+      background-size: 100% 100%;
+    }
+  }
 
+  .rowBox {
+    padding: 0;
+    margin-bottom: 50px;
+    display: flex;
+    .row {
+      & > img {
+        width: 100%;
+      }
+      & > p {
+        color: #ffffff;
+        font-size: 16px;
+        text-align: center;
+        width: 100%;
+        padding: 10px;
+        line-height: 24px;
+      }
+    }
+    &:nth-of-type(2n) {
+      justify-content: end;
+    }
+  }
+  .noPad {
+    padding: 0 24px;
+  }
+}
 </style>

src/components/son7.vue

@@ -1,45 +1,145 @@
 <template>
-<div class='son7'>son7</div>
+  <div class="son7">
+    <!-- 点击视频播放的盒子 -->
+    <div class="videoPlayBox" v-if="videoId">
+      <video controls autoplay :src="`/data/${videoId}.mp4`"></video>
+      <!-- 关闭按钮 -->
+      <div class="close" @click="videoId = null"></div>
+    </div>
+
+    <div class="sonBj1"></div>
+    <div
+      class="rowBox"
+      v-for="item in data"
+      :key="item.id"
+    >
+      <div class="row" @click="toInfo(item.id)" :style="`width: ${item.ww};`">
+        <img
+          :style="`height: ${item.hh};`"
+          :src="require(`@/assets/img/zhanpin/${item.id}.png`)"
+          alt=""
+        />
+        <p>{{ item.name }}</p>
+      </div>
+    </div>
+    <div class="sonBj2"></div>
+    <!-- 视频 -->
+    <div class="videoBox">
+      <div class="vidPlay" @click="videoId = '5'"></div>
+      <img src="../assets/img/vid5.png" alt="" />
+    </div>
+    <div class="shuming">《销烟原理》</div>
+    <div class="videoBox">
+      <div class="vidPlay" @click="videoId = '6'"></div>
+      <img src="../assets/img/vid6.png" alt="" />
+    </div>
+    <div class="shuming">《销烟始末》</div>
+  </div>
 </template>
 
 <script>
 export default {
-name:'son7',
-components: {},
-data() {
-//这里存放数据
-return {
+  name: "son7",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      videoId: null,
+      data: [
+        {
+          id: 40,
+          name: "销烟池木桩",
+          ww: "267px",
+          hh: "149px",
+        },
 
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    toInfo(id) {
+      this.$router.push(`/info/${id}`);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前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>
-.son7{
-  color: red;
+.son7 {
+  .videoPlayBox {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.9);
+    video {
+      position: absolute;
+      width: 100%;
+      max-height: 60vh;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .close {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 32px;
+      height: 32px;
+      background: url("../assets/img/close.png");
+      background-size: 100% 100%;
+    }
+  }
+  .videoBox {
+    position: relative;
+    & > img {
+      width: 100%;
+    }
+    .vidPlay {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 77px;
+      height: 77px;
+      background: url("../assets/img/videoPlay.png");
+      background-size: 100% 100%;
+    }
+  }
+  .rowBox {
+    margin-bottom: 50px;
+    display: flex;
+    justify-content: center;
+    .row {
+      & > img {
+        width: 100%;
+      }
+      & > p {
+        color: #ffffff;
+        font-size: 16px;
+        text-align: center;
+        width: 100%;
+        padding: 10px;
+        line-height: 24px;
+      }
+    }
+  }
 }
-
 </style>

src/views/info/index.vue

@@ -81,7 +81,6 @@ export default {
     }
   }
   .model {
-    padding: 0 50px;
     width: 100%;
     height: 200px;
     iframe {