初步完成军歌

webM/package-lock.json

@@ -15,6 +15,7 @@
         "moment": "^2.29.1",
         "swiper": "^5.3.8",
         "v-viewer": "^1.6.4",
+        "vant": "^2.12.45",
         "vue": "^2.6.11",
         "vue-awesome-swiper": "^4.1.1",
         "vue-lazyload": "^1.3.3",
@@ -1580,7 +1581,6 @@
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
       "integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -1715,6 +1715,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.4.tgz",
+      "integrity": "sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg=="
+    },
     "node_modules/@soda/friendly-errors-webpack-plugin": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.0.tgz",
@@ -2024,11 +2029,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@vant/icons": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmmirror.com/@vant/icons/-/icons-1.7.3.tgz",
+      "integrity": "sha512-tW4EqzxN4kXw1rnlnQJQHofEifPbt/gECOWiibomht8QLyvoGuE4iUmDFS288dJ07ZjuTy0bhdABj0SENo2fmQ=="
+    },
+    "node_modules/@vant/popperjs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.1.0.tgz",
+      "integrity": "sha512-8MD1gz146awV/uPxYjz4pet22f7a9YVKqk7T+gFkWFwT9mEcrIUEg/xPrdOnWKLP9puXyYtm7oVfSDSefZ/p/w==",
+      "dependencies": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
     "node_modules/@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
-      "integrity": "sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA==",
-      "dev": true
+      "integrity": "sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA=="
     },
     "node_modules/@vue/babel-helper-vue-transform-on": {
       "version": "1.0.2",
@@ -11445,8 +11462,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.14.5",
@@ -13799,6 +13815,26 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "node_modules/vant": {
+      "version": "2.12.45",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-2.12.45.tgz",
+      "integrity": "sha512-My/Nt2DfzJhjiHVBBlRBzGyMAp3xh670nXqeUynsASnk7of1RGM41GmJVMoMao7TXT9A9NuUHbqiAwR5AJIOcw==",
+      "dependencies": {
+        "@babel/runtime": "7.x",
+        "@vant/icons": "^1.7.1",
+        "@vant/popperjs": "^1.1.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+        "vue-lazyload": "1.2.3"
+      },
+      "peerDependencies": {
+        "vue": ">= 2.6.0"
+      }
+    },
+    "node_modules/vant/node_modules/vue-lazyload": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
+      "integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -16117,7 +16153,6 @@
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
       "integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -16226,6 +16261,11 @@
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.4.tgz",
+      "integrity": "sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg=="
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.0.tgz",
@@ -16514,11 +16554,23 @@
         }
       }
     },
+    "@vant/icons": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmmirror.com/@vant/icons/-/icons-1.7.3.tgz",
+      "integrity": "sha512-tW4EqzxN4kXw1rnlnQJQHofEifPbt/gECOWiibomht8QLyvoGuE4iUmDFS288dJ07ZjuTy0bhdABj0SENo2fmQ=="
+    },
+    "@vant/popperjs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.1.0.tgz",
+      "integrity": "sha512-8MD1gz146awV/uPxYjz4pet22f7a9YVKqk7T+gFkWFwT9mEcrIUEg/xPrdOnWKLP9puXyYtm7oVfSDSefZ/p/w==",
+      "requires": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
-      "integrity": "sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA==",
-      "dev": true
+      "integrity": "sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA=="
     },
     "@vue/babel-helper-vue-transform-on": {
       "version": "1.0.2",
@@ -24374,8 +24426,7 @@
     "regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -26359,6 +26410,25 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "vant": {
+      "version": "2.12.45",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-2.12.45.tgz",
+      "integrity": "sha512-My/Nt2DfzJhjiHVBBlRBzGyMAp3xh670nXqeUynsASnk7of1RGM41GmJVMoMao7TXT9A9NuUHbqiAwR5AJIOcw==",
+      "requires": {
+        "@babel/runtime": "7.x",
+        "@vant/icons": "^1.7.1",
+        "@vant/popperjs": "^1.1.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+        "vue-lazyload": "1.2.3"
+      },
+      "dependencies": {
+        "vue-lazyload": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
+          "integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
+        }
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

webM/package.json

@@ -17,6 +17,7 @@
     "moment": "^2.29.1",
     "swiper": "^5.3.8",
     "v-viewer": "^1.6.4",
+    "vant": "^2.12.45",
     "vue": "^2.6.11",
     "vue-awesome-swiper": "^4.1.1",
     "vue-lazyload": "^1.3.3",

webM/src/assets/css/base.css

@@ -84,4 +84,4 @@ ul li {
 .el-image-viewer__close{
   top: 15px;
   right: 15px;
-}
+}

webM/src/main.js

@@ -9,12 +9,15 @@ import moment from 'moment'
 import 'moment/locale/zh-cn'
 
 // 图片懒加载
-import VueLazyLoad from 'vue-lazyload'
-Vue.use(VueLazyLoad, {
+import { Lazyload } from 'vant';
+Vue.use(Lazyload,{
+  lazyComponent: true,
   error: require('./assets/imgM/IMGerror.png'),
   loading: require('./assets/imgM/loading.gif')
 })
 
+import 'vant/lib/index.css';
+
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
 Vue.prototype.moment = moment

webM/src/views/tab3/index.vue

@@ -31,12 +31,13 @@
         :key="item.id"
         @click="imgClick(item)"
       >
-        <el-image
+        <img v-lazy="baseURL + item.thumb" alt="" />
+        <!-- <el-image
           lazy
           :src="baseURL + item.thumb"
           :preview-src-list="srcList"
           style="width: 165px; height: 164px"
-        />
+        /> -->
         <p>{{ item.name }}</p>
       </div>
     </div>
@@ -60,10 +61,6 @@
       <!-- 关闭按钮 -->
       <div class="btnX el-icon-close" @click="modelShow = false"></div>
     </div>
-    <!-- 大图预览里面的文字显示 -->
-    <div class="imgDialog" v-if="imgBigShow">
-      {{ imgBigNum }} / {{ srcList.length }}
-    </div>
     <!-- 视频档案里面的弹窗 -->
     <div class="model" v-if="myVideoShow">
       <!-- 关闭按钮 -->
@@ -76,6 +73,7 @@
 </template>
 
 <script>
+import { ImagePreview } from 'vant';
 import axios from "@/utils/request";
 import { goodList, goodDetail, webVisit } from "@/utils/api";
 export default {
@@ -100,10 +98,6 @@ export default {
       // 有关模型的数据
       modelShow: false,
       modelSrc: "",
-      // 有关专题图库的数据
-      imgBigShow: false,
-      imgBigNum: 1,
-      srcList: [""],
       // 有关视频档案的数据
       myVideoShow: false,
       myVideoSrc: "",
@@ -114,6 +108,8 @@ export default {
     // 切换顶部tab栏
     cutChange(item) {
       this.dataArr = [];
+      // 回到顶部
+      window.scrollTo({ top: 0 })
       this.topArrInd = item.id;
       this.goodList({ ...this.formData, type: item.type });
     },
@@ -126,12 +122,9 @@ export default {
     },
     // 点击图库
     async imgClick(item) {
-      this.imgBigNum = 1;
       const res = await goodDetail(item.id);
-      // console.log(998, res)
       const temp = [];
       res.data.file.forEach((v) => {
-        // console.log(998, v)
         if (v.isIndex === 1) temp.push(this.baseURL + v.filePath);
         else {
           setTimeout(() => {
@@ -139,34 +132,12 @@ export default {
           }, 0);
         }
       });
-      this.srcList = temp;
-      this.$nextTick(() => {
-        setTimeout(() => {
-          this.imgBigShow = true;
-          const myTemp = document.querySelector(".el-image-viewer__mask");
-          myTemp.addEventListener("click", () => {
-            this.imgBigShow = false;
-          });
-          const temp = document.querySelector(".el-image-viewer__close");
-          temp.addEventListener("click", () => {
-            this.imgBigShow = false;
-            this.srcList = [""];
-            // console.log('我点了里面的关闭')
-          });
-          // 左按钮
-          const tempLeft = document.querySelector(".el-image-viewer__prev");
-          tempLeft.addEventListener("click", () => {
-            this.imgBigNum--;
-            if (this.imgBigNum === 0) this.imgBigNum = this.srcList.length;
-          });
-          // 右按钮
-          const tempRight = document.querySelector(".el-image-viewer__next");
-          tempRight.addEventListener("click", () => {
-            this.imgBigNum++;
-            if (this.imgBigNum === this.srcList.length + 1) this.imgBigNum = 1;
-          });
-        }, 100);
-      });
+      ImagePreview({
+        images:temp,
+        showIndex:true,
+        loop:true,
+        closeable: true,
+      })
       // 记录访问量
       await webVisit("goods", item.id);
     },
@@ -206,9 +177,13 @@ export default {
   min-height: 100vh;
   background: url("../../assets/imgM/bigBac.png");
   .top {
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 45px;
-    background-color: rgba(255, 255, 255, 0.7);
+    background-color: #f8f2e5;
     display: flex;
     justify-content: space-around;
     & > div {
@@ -226,6 +201,7 @@ export default {
   }
   // 实物模型
   .modelBox {
+    margin-top: 45px;
     padding: 10px;
     .modelSon {
       position: relative;
@@ -252,6 +228,7 @@ export default {
   }
   // 专题图库
   .imgBox {
+    margin-top: 45px;
     padding: 10px;
     padding-right: 0;
     display: flex;
@@ -282,6 +259,7 @@ export default {
   }
   // 视频档案
   .videoBox {
+    margin-top: 45px;
     padding: 10px;
     padding-right: 0;
     display: flex;
@@ -312,6 +290,7 @@ export default {
   }
   // 模型弹窗
   .modelDialog {
+    z-index: 999;
     position: fixed;
     top: 0;
     left: 0;
@@ -332,6 +311,7 @@ export default {
   }
   // 图库弹窗图片数量
   .imgDialog {
+
     padding: 3px 5px;
     background-color: rgba(0, 0, 0, 0.7);
     font-size: 18px;
@@ -344,6 +324,7 @@ export default {
   }
   // 视频弹窗
   .videoDialog {
+    z-index: 999;
     position: fixed;
     top: 0;
     left: 0;

webM/src/views/tab4/audio.vue

@@ -173,29 +173,34 @@ export default {
   }
   @color: #dba761;
   .audiocon {
-    margin: 0 auto;
     position: relative;
-    width: 70%;
+    width: 100%;
     height: 100%;
     .adcon {
       .titleTxt {
+        text-align: left;
+        width: calc(100% - 78px);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
         letter-spacing: 2px;
         position: absolute;
-        left: 5px;
-        top: -20px;
+        left: 0px;
+        top: -10px;
         color: #fff;
-        font-size: 16px;
+        font-size: 14px;
       }
       .time {
+        font-size: 12px;
         position: absolute;
-        right: -100px;
-        top: 4px;
+        right: 0px;
+        top: -8px;
       }
-      width: 85%;
+      width: calc(100% - 120px);
       margin: 0 auto;
       position: absolute;
-      bottom: 7px;
-      right: 40px;
+      bottom: 3px;
+      right: 10px;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -208,7 +213,7 @@ export default {
         height: 30px;
         overflow: visible;
         .activeLine {
-          height: 5px;
+          height: 3px;
           cursor: pointer;
           overflow: hidden;
           position: absolute;
@@ -226,7 +231,7 @@ export default {
           position: absolute;
           top: 0;
           left: 0;
-          height: 5px;
+          height: 3px;
           cursor: pointer;
           background-color: #edd3b0;
           top: 50%;
@@ -253,7 +258,6 @@ export default {
       }
 
       .time {
-        width: 100px;
         text-align: center;
         > span {
           &:first-of-type {
@@ -268,35 +272,27 @@ export default {
     }
     .leftBtn {
       cursor: pointer;
-      margin-left: 12px;
+      margin-left: 10px;
       height: 100%;
       display: flex;
-      width: 120px;
+      width: 90px;
       justify-content: space-around;
       align-items: center;
       & > div {
-        width: 18px;
-        height: 24px;
+        width: 15px;
+        height: 15px;
       }
       .left {
         background: url("../../assets/images/tab4/12.png");
         background-size: 100% 100%;
       }
-      .left:hover {
-        background: url("../../assets/images/tab4/13.png");
-        background-size: 100% 100%;
-      }
       .right {
         background: url("../../assets/images/tab4/14.png");
         background-size: 100% 100%;
       }
-      .right:hover {
-        background: url("../../assets/images/tab4/15.png");
-        background-size: 100% 100%;
-      }
       .play {
-        width: 50px;
-        height: 50px;
+        width: 30px;
+        height: 30px;
         & > img {
           width: 100%;
           height: 100%;

webM/src/views/tab4/index.vue

@@ -11,9 +11,7 @@
       </li>
     </ul>
     <!-- 动态组件 -->
-    <keep-alive>
       <component :is="imgListInd"></component>
-    </keep-alive>
   </div>
 </template>
 
@@ -48,6 +46,8 @@ export default {
     // 点击顶部的tab栏切换
     cutTab(val) {
       this.imgListInd = val;
+      // 回到顶部
+      window.scrollTo({ top: 0 })
     },
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
@@ -73,11 +73,16 @@ export default {
   width: 100%;
   min-height: 100vh;
   background: url('../../assets/imgM/bigBac.png');
+  padding-top: 45px;
   ul{
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    left: 0;
     padding: 0 10px;
     width: 100vw;
     height: 45px;
-    background-color: rgba(255, 255, 255, 0.7);
+    background-color: #f8f2e5;
     overflow-x: auto;
     display: flex;
     &>li{

webM/src/views/tab4/tab4-1.vue

@@ -13,13 +13,14 @@
         <img class="imgShow" v-lazy="baseURL + item.thumb" alt="" />
       </div>
       <p>{{ item.name }}</p>
-      <!-- <video
-        v-if="videoSrc"
-        :src="baseURL + videoSrc"
-        autoplay
-        controls
-      ></video>
-      <p>{{ videoTxt }}</p> -->
+    </div>
+    <!-- 视频档案里面的弹窗 -->
+    <div class="model" v-if="myVideoShow">
+      <!-- 关闭按钮 -->
+      <div class="videoDialog">
+        <div class="btnX el-icon-close" @click="myVideoShow = false"></div>
+        <video :src="myVideoSrc" v-if="myVideoSrc" controls autoplay></video>
+      </div>
     </div>
   </div>
   <div class="tab4-1 conNull" v-else>暂 无 数 据</div>
@@ -34,11 +35,10 @@ export default {
   data() {
     // 这里存放数据
     return {
-      videoInd: 0,
-      videoSrc: "",
+      myVideoShow: false,
+      myVideoSrc: "",
       videoList: [],
       baseURL: "",
-      videoTxt: "",
     };
   },
   // 监听属性 类似于data概念
@@ -47,10 +47,9 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    async videoChange(val, ind) {
-      this.videoTxt = val.name;
-      this.videoSrc = val.filePath;
-      this.videoInd = ind;
+    async videoChange(val) {
+      this.myVideoShow=true
+      this.myVideoSrc = this.baseURL+val.filePath;
       // 记录访问量
       await webVisit("video", val.id);
     },
@@ -64,11 +63,6 @@ export default {
   async mounted() {
     let res = await videoList({ pageNum: 1, pageSize: 999 });
     this.videoList = res.data.records;
-    this.videoSrc = this.videoList[0].filePath;
-    // 进页面为第一个视频添加访问量
-    if (res.data.records[0]) await webVisit("video", res.data.records[0].id);
-    this.videoTxt = res.data.records[0].name;
-    // console.log(998,res);
   },
   beforeCreate() {}, // 生命周期 - 创建之前
   beforeMount() {}, // 生命周期 - 挂载之前
@@ -123,5 +117,32 @@ export default {
       padding: 0 10px;
     }
   }
+  // 视频弹窗
+  .videoDialog {
+    position: fixed;
+    z-index: 999;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.7);
+    video {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      transform: translateY(-50%);
+      max-height: 85vh;
+      vertical-align: top;
+      width: 100%;
+    }
+    .btnX {
+      z-index: 999;
+      position: absolute;
+      right: 15px;
+      top: 15px;
+      color: #fff;
+      font-size: 30px;
+    }
+  }
 }
 </style>

webM/src/views/tab4/tab4-2.vue

@@ -1,41 +1,103 @@
 <!--  -->
 <template>
-<div class='tab4-2'></div>
+  <div class="tab4-2" v-if="dataArr.length !== 0">
+    <!-- 实物模型的盒子 -->
+    <div class="imgBox">
+      <div
+        class="imgSon"
+        v-for="item in dataArr"
+        :key="item.id"
+        @click="imgClick(item)"
+      >
+        <img v-lazy="baseURL + item.thumb" alt="" />
+        <p>{{ item.name }}</p>
+      </div>
+    </div>
+  </div>
+  <div class="tab4-1 conNull" v-else>暂 无 数 据</div>
 </template>
 
 <script>
+import { ImagePreview } from "vant";
+import { imgList, webVisit } from "@/utils/api";
+import axios from "@/utils/request";
 export default {
-name:'tab4',
-components: {},
-data() {
-return {
-
+  name: "tab4",
+  components: {},
+  data() {
+    return {
+      formData: {
+        pageNum: 1,
+        pageSize: 99999,
+        searchKey: "",
+      },
+      baseURL: "",
+      dataArr: [],
+    };
+  },
+  computed: {},
+  methods: {
+    async imgClick(item) {
+      ImagePreview({
+        images: [this.baseURL + item.thumb],
+        closeable: true,
+      });
+      // 记录访问量
+      await webVisit("img", item.id);
+    },
+    // 封装获取列表函数
+    async imgList(data) {
+      const res = await imgList(data);
+      this.dataArr = res.data.records;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL;
+    this.imgList(this.formData);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
-},
-computed: {},
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
 </script>
 <style lang='less' scoped>
-.tab4{
-
+.conNull {
+  display: flex;
+  height: calc(100vh - 54px);
+  font-size: 30px;
+  color: #b9412e;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.tab4-2 {
+  padding: 10px;
+  .imgBox {
+    padding: 10px;
+    .imgSon {
+      background-color: #fff;
+      box-shadow: 1px 1px 2px 2px #ccc;
+      position: relative;
+      width: 100%;
+      margin-bottom: 10px;
+      & > img {
+        width: 100%;
+      }
+      & > P {
+        padding: 10px;
+        text-align: center;
+        width: 100%;
+        font-size: 16px;
+      }
+    }
+  }
 }
-
 </style>

webM/src/views/tab4/tab4-3.vue

@@ -1,16 +1,30 @@
 <template>
   <div class="tab4-3" v-if="musicList.length !== 0">
-    <div class="right">
+    <div
+      class="audioBox"
+      v-for="(item, index) in musicList"
+      :key="item.id"
+      @click="musicInfo(item.id, index)"
+    >
+      <span>{{ index + 1 }}</span
+      >&emsp;
+      <p>{{ item.name }}</p>
+    </div>
+    <!-- 音乐详情 -->
+    <div class="musicinfoBox" v-if="musicInfoShow">
+      <!-- 返回按钮 -->
+      <div class="musicBack el-icon-arrow-left" @click="musicInfoShow=false"></div>
       <!-- 唱片 -->
       <div class="right_img" :class="{ musciPlay: musicCdShow }">
-        <img class="cd" src="../../assets/img/musicC.png" alt=""/>
-        <img class="hk" src="../../assets/img/musicH.png" alt="" />
+        <img class="cd" src="../../assets/imgM/musicC.png" alt="" />
+        <img class="hk" src="../../assets/imgM/musicH.png" alt="" />
       </div>
-      <div class="right_top">
-        <!-- 歌词 -->
+      <!-- 歌词 -->
+      <div class="lyric">
         <div class="title">{{ myObj.name }}</div>
         <div class="txt" v-html="myObj.description"></div>
       </div>
+      <!-- 底部菜单 -->
       <div class="right_bottom">
         <Audio
           :audioSrc="baseURL + myObj.filePath"
@@ -20,69 +34,48 @@
         />
       </div>
     </div>
-
-    <div class="left">
-      <div class="title">歌单列表</div>
-      <div class="listCon">
-        <p
-          :title="item.name"
-          v-for="(item, index) in musicList"
-          :key="item.id"
-          :class="{ active: audioInd === index }"
-          @click="cutMusic(item.id, index)"
-        >
-          <span
-            class="triangle"
-            :class="{ triangleShow: audioInd === index }"
-          ></span>
-          <span>{{ index + 1 }}</span>
-          &emsp;{{ item.name }}
-        </p>
-      </div>
-    </div>
-    <!-- <div class="right_top" :style="{'background':`url(${baseURL+myObj.thumb}) #f3ebdd no-repeat center center`}"> -->
   </div>
   <div class="tab4-3 conNull" v-else>暂 无 数 据</div>
 </template>
 
 <script>
 import Audio from "./audio.vue";
-import axios from "@/utils/request";
+
 import { musicList, webVisit } from "@/utils/api";
+import axios from "@/utils/request";
+
 export default {
   name: "tab4-3",
   components: { Audio },
   data() {
-    // 这里存放数据
+    //这里存放数据
     return {
       audioInd: 0,
       baseURL: "",
       musicList: [],
-      myObj: {},
       // 控制唱片的样式
       musicCdShow: true,
+      myObj: {},
+      musicInfoShow:false
     };
   },
-  // 监听属性 类似于data概念
+  //监听属性 类似于data概念
   computed: {},
-  // 监控data中的数据变化
+  //监控data中的数据变化
   watch: {
     audioInd(index) {
       this.myObj = this.musicList[index];
-      //控制被选中的音乐滚动在中间
-      const gundong = document.querySelector(".listCon");
-      gundong.scrollTo({ top: index * 40, behavior: "smooth" });
     },
   },
-  // 方法集合
+  //方法集合
   methods: {
-    // 点击左侧音乐
-    async cutMusic(id, index) {
+    // 点击音乐列表
+    async musicInfo(id, index) {
+      this.musicInfoShow=true
       this.audioInd = index;
-      // 记录访问量
-      await webVisit("music", id);
+      await webVisit("video", id);
       // 唱片播放
-      this.musicCdShow=true
+      this.musicCdShow = true;
     },
     //子组件传过来的上一首下一首方法
     sonCutMu(val) {
@@ -99,123 +92,82 @@ export default {
       this.musicCdShow = val;
     },
   },
-  // 生命周期 - 创建完成（可以访问当前this实例）
+  //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     // 获取服务器前缀地址
     this.baseURL = axios.defaults.baseURL;
   },
-  // 生命周期 - 挂载完成（可以访问DOM元素）
+  //生命周期 - 挂载完成（可以访问DOM元素）
   async mounted() {
     let res = await musicList({ pageNum: 1, pageSize: 999 });
     this.musicList = res.data.records;
     this.myObj = this.musicList[0];
-    // 进页面为第一个视频添加访问量
-    if (res.data.records[0]) await webVisit("music", res.data.records[0].id);
-    // this.videoSrc=this.musicList[0].filePath
-    // console.log(998, res);
   },
-  beforeCreate() {}, // 生命周期 - 创建之前
-  beforeMount() {}, // 生命周期 - 挂载之前
-  beforeUpdate() {}, // 生命周期 - 更新之前
-  updated() {}, // 生命周期 - 更新之后
-  beforeDestroy() {}, // 生命周期 - 销毁之前
-  destroyed() {}, // 生命周期 - 销毁完成
-  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang='less' scoped>
 .conNull {
+  display: flex;
+  height: calc(100vh - 54px);
   font-size: 30px;
-  align-items: center;
-  justify-content: center;
   color: #b9412e;
-}
-/deep/::-webkit-scrollbar-thumb {
-  background-color: #d8b581 !important;
-  outline: 1px solid #d8b581 !important;
-  outline-offset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .tab4-3 {
-  padding: 30px 200px;
-  display: flex;
-  width: 100%;
-  height: 595px;
-  .left {
-    margin-left: 30px;
-    border-radius: 8px;
-    padding: 10px 0;
-    text-align: center;
-    color: #333333;
-    width: 300px;
-    height: 100%;
-    .title {
-      font-weight: 700;
-      text-align: left;
-      padding-left: 72px;
-      font-size: 22px;
-      margin-bottom: 10px;
-    }
-    .listCon {
+  padding: 10px 30px 30px;
+  .audioBox {
+    padding: 20px 0;
+    background: url("../../assets/imgM/tab4_3play.png") no-repeat center right;
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #d8b581;
+    color: #c19a5f;
+    & > p {
       padding-right: 30px;
-      height: 485px;
-      overflow-y: auto;
-    }
-    p {
-      .triangle {
-        margin-right: 10px;
-        display: inline-block;
-        width: 0;
-        height: 0;
-        border-top: 8px solid transparent;
-        border-left: 15px solid transparent;
-        border-bottom: 8px solid transparent;
-      }
-      .triangleShow {
-        border-top: 8px solid transparent;
-        border-left: 15px solid #b9412e;
-        border-bottom: 8px solid transparent;
-      }
-      text-align: left;
-      padding: 0 20px 0 50px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      cursor: pointer;
-      font-size: 20px;
-      height: 40px;
-      line-height: 40px;
-      margin: 10px 0;
-      & > img {
-        margin-top: -5px;
-      }
-      &:hover {
-        color: #b9412e;
-      }
-      &:first-child {
-        margin-top: 0px;
-      }
-    }
-    .active {
-      color: #b9412e;
+      font-size: 18px;
+      font-weight: 700;
     }
   }
-  .right {
-    flex: 1;
-    display: flex;
+  // 音乐详情盒子
+  .musicinfoBox {
+    z-index: 9999;
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    background: url("../../assets/imgM/bigBac.png") #ede7db center center;
+    .musicBack{
+      z-index: 999;
+      position: absolute;
+      top: 20px;
+      left: 20px;
+      font-size: 30px;
+    }
     .right_img {
       position: relative;
-      width: 270px;
+      width: 188px;
+      margin: 50px auto 20px;
       .cd {
         display: block;
-        margin: 172px auto 0;
       }
       .hk {
         position: absolute;
-        left: 26px;
-        top: 150px;
-        transition: all .3s;
-        transform: rotate(-30deg);
+        left: 0px;
+        top: -15px;
+        transition: all 0.3s;
+        transform: rotate(-24deg);
         transform-origin: left;
       }
     }
@@ -240,27 +192,24 @@ export default {
         -o-animation: rotation 1.4s linear infinite;
       }
     }
-    .right_top {
+    /deep/.lyric::-webkit-scrollbar-thumb {
+      outline: 2px solid #e4dcca;
+    }
+    .lyric {
+      width: 100%;
+      height: calc(100% - 322px);
       overflow-y: auto;
-      padding: 15px 50px;
-      padding-top: 0;
-      flex: 1;
-      & > div {
-        margin: 10px 0;
+      padding: 10px 15px 15px;
+      font-size: 14px;
+      line-height: 24px;
+
+      .title {
         text-align: center;
-        color: #333333;
-      }
-      .txt {
-        font-size: 22px;
-        /deep/p {
-          margin: 10px 0;
-          font-size: 18px;
-        }
+        color: #a1a1a1;
+        font-size: 16px;
       }
-      .title {
-        margin-top: 0;
-        font-size: 24px;
-        font-weight: 700;
+      .txt{
+        text-align: center;
       }
     }
     .right_bottom {
@@ -268,9 +217,9 @@ export default {
       bottom: 0;
       left: 0;
       width: 100%;
-      height: 70px;
-      background-color: rgba(0, 0, 0, 0.6);
+      height: 50px;
+      background-color: rgba(216, 181, 129, 0.8);
     }
   }
 }
-</style>
+</style>