up

SWKK/src/components/Hot.vue

@@ -96,7 +96,7 @@
       <div
         class="row"
         v-show="item.show"
-        v-for="item in rightList"
+        v-for="(item) in rightList"
         :key="item.id"
         @click="type = item.type"
         :class="{ active: item.type === type }"
@@ -110,7 +110,7 @@
           alt=""
         />
 
-        <p>{{ item.name }}</p>
+        <p>{{ item.name }}{{info[item.type]&&info[item.type].length}}</p>
       </div>
     </div>
   </div>

SWKK/src/components/Rbottom.vue

@@ -83,7 +83,7 @@
             @click="cutGoods(index)"
             class="swiper-slide"
             v-for="(item, index) in list[0].list"
-            :class="{ active: acList === index }"
+            :class="{ active: acList === index && playing }"
             :key="index"
           >
             <img :src="item.enter.cover" alt="" />
@@ -123,7 +123,7 @@ import Swiper from "./swiper.js";
 export default {
   name: "Rbottom",
   components: {},
-  props: ["acList", "progress"],
+  props: ["acList", "progress", "playing"],
   data() {
     //这里存放数据
     return {
@@ -290,7 +290,7 @@ export default {
     //点击复制链接
     copyPcTxt() {
       // 存储传递过来的数据
-      let OrderNumber = window.location.origin+'/YHT/index.html';
+      let OrderNumber = window.location.origin + "/YHT/index.html";
       // 创建一个input 元素
       // createElement() 方法通过指定名称创建一个元素
       let newInput = document.createElement("input");

SWKK/src/views/Home.vue

@@ -31,6 +31,7 @@
       @stopPlay="stopPlay"
       :acList="frameId"
       :progress="progress"
+      :playing='playing'
     />
 
     <!-- 左上名字和介绍 -->
@@ -285,7 +286,6 @@ export default {
               video: [],
             };
             temp.forEach((v) => {
-              console.log('pppppppppp',v);
               obj[v.type].push(v);
             });
             this.sonInfo = obj;

vue/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "core-js": "^3.6.5",
         "dayjs": "^1.11.6",
+        "lodash": "^4.17.21",
         "v-viewer": "^1.5.1",
         "vue": "^2.6.11",
         "vue-lazyload": "^1.3.3",
@@ -8452,8 +8453,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
@@ -21323,8 +21323,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.debounce": {
       "version": "4.0.8",

vue/package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "dayjs": "^1.11.6",
+    "lodash": "^4.17.21",
     "v-viewer": "^1.5.1",
     "vue": "^2.6.11",
     "vue-lazyload": "^1.3.3",

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

@@ -1,11 +1,16 @@
 <!--  -->
 <template>
   <div class="Tow">
-    <div class="main">
+    <div
+      class="main"
+      v-for="(val, ind) in handlData"
+      :key="ind"
+      v-show="acInd === ind"
+    >
       <div
         class="row"
         @click="lookInfo(item)"
-        v-for="(item, index) in data"
+        v-for="(item, index) in val"
         :key="index"
       >
         <div v-if="item.imgNum">
@@ -15,12 +20,24 @@
         <p>{{ item.name }}</p>
       </div>
     </div>
+    <!-- 分页 -->
+    <div class="page">
+      <div
+        v-for="i in pageNum"
+        :key="i"
+        @click="acInd = i - 1"
+        :class="{ active: i === acInd + 1 }"
+      >
+        {{ i }}
+      </div>
+    </div>
     <!-- 点击图片出来的页面 -->
     <Img v-if="type === 'img'" @close="type = ''" :info="info" />
   </div>
 </template>
 
 <script>
+import _ from "lodash";
 import Img from "./Img";
 export default {
   name: "Tow",
@@ -37,13 +54,23 @@ export default {
     return {
       type: "",
       info: {},
+      handlData: [],
+      acInd: 0,
+      pageNum: 0,
     };
   },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
   watch: {
-    data() {
+    data(val) {
+      this.pageNum=0
+      if (val.length > 20) this.pageNum = Math.ceil(val.length / 20);
+
+      this.acInd = 0;
+
+      this.handlData = _.chunk(val, 20);
+
       let dom = document.querySelector(".main");
       dom.scrollTop = 0;
     },
@@ -56,7 +83,11 @@ export default {
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    if (this.data.length > 20) this.pageNum = Math.ceil(this.data.length / 20);
+
+    this.handlData = _.chunk(this.data, 20);
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
@@ -94,13 +125,31 @@ export default {
     border-radius: 10px;
     background: #d8b275;
   }
+  .page {
+    height: 6%;
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+    padding-right: 64px;
+    & > div {
+      cursor: pointer;
+      font-size: 20px;
+      padding: 0 10px;
+      color: #666666;
+    }
+    .active {
+      pointer-events: none;
+      color: #930909;
+    }
+  }
   .main {
     width: 100%;
-    height: 96%;
+    height: 92%;
     overflow-y: auto;
     padding-right: 60px;
     display: flex;
     flex-wrap: wrap;
+    align-content: flex-start;
     .row {
       cursor: pointer;
       border-radius: 6px;

vue/src/views/Goods/data.js

@@ -54,5 +54,92 @@ export const goodsData = {
     {bs:'7',imgNum:2, type: 'tool', name: '民国时期侯少裘半身像', age: '', sort: '家具', grain: '瓷，木', long: '', width: '23', tall: '16' },
     // 油画
     {bs:'8', author: '某画家', type: 'Italy', name: '启蒙', age: '1999', sort: '油 画', grain: '', long: '2.03', width: '2.45', tall: '' },
+
+
+
+    // 手稿
+    {bs:'4',imgNum:3, type: 'straw', name: '中华民国时期陈君起烈士读过的《史记》（卷二）', age: '', sort: '书法、绘画', grain: '钢，其他金属，其他无机质', long: '13', width: '', tall: '' },
+    {bs:'5',imgNum:2, type: 'straw', name: '民国时期陈君起烈士读过的《史记》（卷六）', age: '', sort: '文件、宣传品', grain: '其他无机质', long: '5', width: '1.1', tall: '1.2' },
+    // 书刊
+    {bs:'1',imgNum:2, type: 'book', name: '郭凤韶烈士在校写的大字', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '10' },
+    {bs:'2', type: 'book', name: '1921年侯少裘烈士在景贤女中绘制的水彩画', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '5.1' },
+    {bs:'3',imgNum:4, type: 'book', name: '1928年史砚芬烈士在狱中所作画和诗“夜莺啼月”', age: '', sort: '瓷器', grain: '瓷', long: '', width: '8.8', tall: '10' },
+
+    // 用具
+    {bs:'6', type: 'clothing', name: '民国时期郭凤韶烈士穿过的浅蓝色大褂', age: '', sort: '文具', grain: '石', long: '10', width: '', tall: '2' },
+    // 服装
+    {bs:'7',imgNum:2, type: 'tool', name: '民国时期侯少裘半身像', age: '', sort: '家具', grain: '瓷，木', long: '', width: '23', tall: '16' },
+    // 油画
+    {bs:'8', author: '某画家', type: 'Italy', name: '启蒙', age: '1999', sort: '油 画', grain: '', long: '2.03', width: '2.45', tall: '' },
+    // 手稿
+    {bs:'4',imgNum:3, type: 'straw', name: '中华民国时期陈君起烈士读过的《史记》（卷二）', age: '', sort: '书法、绘画', grain: '钢，其他金属，其他无机质', long: '13', width: '', tall: '' },
+    {bs:'5',imgNum:2, type: 'straw', name: '民国时期陈君起烈士读过的《史记》（卷六）', age: '', sort: '文件、宣传品', grain: '其他无机质', long: '5', width: '1.1', tall: '1.2' },
+    // 书刊
+    {bs:'1',imgNum:2, type: 'book', name: '郭凤韶烈士在校写的大字', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '10' },
+    {bs:'2', type: 'book', name: '1921年侯少裘烈士在景贤女中绘制的水彩画', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '5.1' },
+    {bs:'3',imgNum:4, type: 'book', name: '1928年史砚芬烈士在狱中所作画和诗“夜莺啼月”', age: '', sort: '瓷器', grain: '瓷', long: '', width: '8.8', tall: '10' },
+
+    // 用具
+    {bs:'6', type: 'clothing', name: '民国时期郭凤韶烈士穿过的浅蓝色大褂', age: '', sort: '文具', grain: '石', long: '10', width: '', tall: '2' },
+    // 服装
+    {bs:'7',imgNum:2, type: 'tool', name: '民国时期侯少裘半身像', age: '', sort: '家具', grain: '瓷，木', long: '', width: '23', tall: '16' },
+    // 油画
+    {bs:'8', author: '某画家', type: 'Italy', name: '启蒙', age: '1999', sort: '油 画', grain: '', long: '2.03', width: '2.45', tall: '' },
+    // 手稿
+    {bs:'4',imgNum:3, type: 'straw', name: '中华民国时期陈君起烈士读过的《史记》（卷二）', age: '', sort: '书法、绘画', grain: '钢，其他金属，其他无机质', long: '13', width: '', tall: '' },
+    {bs:'5',imgNum:2, type: 'straw', name: '民国时期陈君起烈士读过的《史记》（卷六）', age: '', sort: '文件、宣传品', grain: '其他无机质', long: '5', width: '1.1', tall: '1.2' },
+    // 书刊
+    {bs:'1',imgNum:2, type: 'book', name: '郭凤韶烈士在校写的大字', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '10' },
+    {bs:'2', type: 'book', name: '1921年侯少裘烈士在景贤女中绘制的水彩画', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '5.1' },
+    {bs:'3',imgNum:4, type: 'book', name: '1928年史砚芬烈士在狱中所作画和诗“夜莺啼月”', age: '', sort: '瓷器', grain: '瓷', long: '', width: '8.8', tall: '10' },
+
+    // 用具
+    {bs:'6', type: 'clothing', name: '民国时期郭凤韶烈士穿过的浅蓝色大褂', age: '', sort: '文具', grain: '石', long: '10', width: '', tall: '2' },
+    // 服装
+    {bs:'7',imgNum:2, type: 'tool', name: '民国时期侯少裘半身像', age: '', sort: '家具', grain: '瓷，木', long: '', width: '23', tall: '16' },
+    // 油画
+    {bs:'8', author: '某画家', type: 'Italy', name: '启蒙', age: '1999', sort: '油 画', grain: '', long: '2.03', width: '2.45', tall: '' },
+    // 手稿
+    {bs:'4',imgNum:3, type: 'straw', name: '中华民国时期陈君起烈士读过的《史记》（卷二）', age: '', sort: '书法、绘画', grain: '钢，其他金属，其他无机质', long: '13', width: '', tall: '' },
+    {bs:'5',imgNum:2, type: 'straw', name: '民国时期陈君起烈士读过的《史记》（卷六）', age: '', sort: '文件、宣传品', grain: '其他无机质', long: '5', width: '1.1', tall: '1.2' },
+    // 书刊
+    {bs:'1',imgNum:2, type: 'book', name: '郭凤韶烈士在校写的大字', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '10' },
+    {bs:'2', type: 'book', name: '1921年侯少裘烈士在景贤女中绘制的水彩画', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '5.1' },
+    {bs:'3',imgNum:4, type: 'book', name: '1928年史砚芬烈士在狱中所作画和诗“夜莺啼月”', age: '', sort: '瓷器', grain: '瓷', long: '', width: '8.8', tall: '10' },
+
+    // 用具
+    {bs:'6', type: 'clothing', name: '民国时期郭凤韶烈士穿过的浅蓝色大褂', age: '', sort: '文具', grain: '石', long: '10', width: '', tall: '2' },
+    // 服装
+    {bs:'7',imgNum:2, type: 'tool', name: '民国时期侯少裘半身像', age: '', sort: '家具', grain: '瓷，木', long: '', width: '23', tall: '16' },
+    // 油画
+    {bs:'8', author: '某画家', type: 'Italy', name: '启蒙', age: '1999', sort: '油 画', grain: '', long: '2.03', width: '2.45', tall: '' },
+    // 手稿
+    {bs:'4',imgNum:3, type: 'straw', name: '中华民国时期陈君起烈士读过的《史记》（卷二）', age: '', sort: '书法、绘画', grain: '钢，其他金属，其他无机质', long: '13', width: '', tall: '' },
+    {bs:'5',imgNum:2, type: 'straw', name: '民国时期陈君起烈士读过的《史记》（卷六）', age: '', sort: '文件、宣传品', grain: '其他无机质', long: '5', width: '1.1', tall: '1.2' },
+    // 书刊
+    {bs:'1',imgNum:2, type: 'book', name: '郭凤韶烈士在校写的大字', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '10' },
+    {bs:'2', type: 'book', name: '1921年侯少裘烈士在景贤女中绘制的水彩画', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '5.1' },
+    {bs:'3',imgNum:4, type: 'book', name: '1928年史砚芬烈士在狱中所作画和诗“夜莺啼月”', age: '', sort: '瓷器', grain: '瓷', long: '', width: '8.8', tall: '10' },
+
+    // 用具
+    {bs:'6', type: 'clothing', name: '民国时期郭凤韶烈士穿过的浅蓝色大褂', age: '', sort: '文具', grain: '石', long: '10', width: '', tall: '2' },
+    // 服装
+    {bs:'7',imgNum:2, type: 'tool', name: '民国时期侯少裘半身像', age: '', sort: '家具', grain: '瓷，木', long: '', width: '23', tall: '16' },
+    // 油画
+    {bs:'8', author: '某画家', type: 'Italy', name: '启蒙', age: '1999', sort: '油 画', grain: '', long: '2.03', width: '2.45', tall: '' },
+    // 手稿
+    {bs:'4',imgNum:3, type: 'straw', name: '中华民国时期陈君起烈士读过的《史记》（卷二）', age: '', sort: '书法、绘画', grain: '钢，其他金属，其他无机质', long: '13', width: '', tall: '' },
+    {bs:'5',imgNum:2, type: 'straw', name: '民国时期陈君起烈士读过的《史记》（卷六）', age: '', sort: '文件、宣传品', grain: '其他无机质', long: '5', width: '1.1', tall: '1.2' },
+    // 书刊
+    {bs:'1',imgNum:2, type: 'book', name: '郭凤韶烈士在校写的大字', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '10' },
+    {bs:'2', type: 'book', name: '1921年侯少裘烈士在景贤女中绘制的水彩画', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '5.1' },
+    {bs:'3',imgNum:4, type: 'book', name: '1928年史砚芬烈士在狱中所作画和诗“夜莺啼月”', age: '', sort: '瓷器', grain: '瓷', long: '', width: '8.8', tall: '10' },
+
+    // 用具
+    {bs:'6', type: 'clothing', name: '民国时期郭凤韶烈士穿过的浅蓝色大褂', age: '', sort: '文具', grain: '石', long: '10', width: '', tall: '2' },
+    // 服装
+    {bs:'7',imgNum:2, type: 'tool', name: '民国时期侯少裘半身像', age: '', sort: '家具', grain: '瓷，木', long: '', width: '23', tall: '16' },
+    // 油画
+    {bs:'8', author: '某画家', type: 'Italy', name: '启蒙', age: '1999', sort: '油 画', grain: '', long: '2.03', width: '2.45', tall: '' },
   ]
 }

vue/src/views/Video/index.vue

@@ -66,6 +66,9 @@ export default {
   height: 100%;
   overflow: hidden;
   position: absolute;
+  background-image: url("../../assets/img/Home/bac.jpg");
+  background-size: cover;
+
   top: 0;
   left: 0;
   .videoBox {