初步完成文物史料信息科

web/src/App.vue

@@ -21,7 +21,7 @@ export default {
 .vvvv{
     width: 100%;
     height: 100%;
-    min-width: 1800px;
+    min-width: 1918px;
     min-height: 900px;
 }
 

web/src/assets/css/base.css

@@ -10,11 +10,11 @@ ul li {
   border: 1px solid #C7C7C7;
 }
 .el-input.is-active .el-input__inner, .el-input__inner:focus{
-  border-color: #b9412e;
+  border-color: #BE1220;
 }
 .el-icon-search{
   font-weight: 700;
-  color: #b9412e;
+  color: #BE1220;
 }
 /* 分页 */
 .el-pagination{
@@ -28,28 +28,28 @@ ul li {
   height: 28px;
   padding: 0;
   margin: 0 8px;
-  border: 1px solid #C7C7C7;
   border-radius: 50%;
+  color: #BE1220;
+  background-color: transparent;
 }
 .el-pager li:hover{
-  color: #b9412e;
+  background-color: #BE1220;
+  border-radius: 50%;
+  color: #fff;
 }
 .el-pager li.active{
-  width: 30px;
-  height: 30px;
-  background-color: #b9412e;
+  background-color: #BE1220;
   border-radius: 50%;
   color: #fff;
 }
 .el-pager li.active+li{
-  border: 1px solid #C7C7C7;
+  /* border: 1px solid #C7C7C7; */
 }
 .el-pagination button:hover{
-  color: #b9412e;
+  color: #BE1220;
 }
 .el-image__preview{
   object-fit: cover;
-  border: 2px solid #b9412e;
 }
 .el-image-viewer__img{
   object-fit: cover;
@@ -71,4 +71,22 @@ ul li {
 }
 .el-image-viewer__actions{
   width: 120px;
+}
+.el-image-viewer__mask{
+  opacity: .7;
+}
+.el-image-viewer__next, .el-image-viewer__prev{
+  border: 2px solid #fff;
+  background-color: transparent;
+}
+.el-image-viewer__close{
+  font-size: 30px;
+  background-color: transparent;
+}
+.el-image-viewer__actions{
+  border: 2px solid #fff;
+  background-color: transparent;
+}
+.el-image-viewer__actions__inner{
+  cursor: pointer;
 }

web/src/views/layout/index.vue

@@ -99,7 +99,7 @@ export default {
   color: #fff;
   .lay_top {
     display: flex;
-    z-index: 99999;
+    z-index: 999;
     position: relative;
     width: 100%;
     height: 90px;

web/src/views/tab3/index.vue

@@ -9,12 +9,14 @@
           :key="item.id"
           @click="cutTab(item)"
         >
-          <span>·</span> {{ item.name }}
+          <p v-if="formData.type === item.type">◆&emsp;{{ item.name }}&emsp;◆</p>
+          <p v-else>{{ item.name }}</p>
+          <span> {{ item.biaoshi }} </span>
         </li>
       </ul>
-      <div class="search">
+      <div class="search" @keyup.enter="mySearch">
         <el-input
-          placeholder="搜索"
+          placeholder="请输入关键词..."
           suffix-icon="el-icon-search"
           v-model="formData.searchKey"
         >
@@ -33,24 +35,51 @@
           :src="baseURL + item.thumb"
           alt=""
           v-if="formData.type === 'model' || formData.type === 'video'"
+          :class="{ vidAc: formData.type === 'video' }"
         />
         <!-- 图库 -->
         <el-image
           @click="goodClick(item)"
           v-else-if="formData.type === 'img'"
-          style="width: 418px; height: 200px"
+          style="width: 351px; height: 200px"
           :src="baseURL + item.thumb"
           :preview-src-list="srcList"
         >
         </el-image>
-        <p class="listTxt" :title="item.name">{{ item.name }}</p>
+
+        <!-- 视频的鼠标移上去的遮照 -->
+        <div
+          class="videoSM"
+          v-if="formData.type === 'video'"
+          @click="goodClick(item)"
+        >
+          <img src="../../assets/img/playMove.png" alt="" />
+          <p>{{ item.name }}</p>
+        </div>
+
+        <div
+          class="listTxt"
+          :title="item.name"
+          :class="{
+            imgAc: formData.type === 'img',
+            vidAcTxt: formData.type === 'video',
+          }"
+        >
+          <img
+            src="../../assets/img/play.png"
+            alt=""
+            v-if="formData.type === 'video'"
+          />
+          {{ item.name }}
+          <div class="right_bac" v-if="formData.type === 'model'"></div>
+        </div>
       </div>
       <!-- 分页 -->
       <div class="paging">
         <el-pagination
           layout="prev,pager,next,jumper"
           :total="total"
-          :page-size="9"
+          :page-size="8"
           :current-page="formData.pageNum"
           @current-change="currentChange"
           @size-change="sizeChange"
@@ -75,8 +104,8 @@
     <!-- 视频档案里面的弹窗 -->
     <div class="model" v-if="myVideoShow">
       <!-- 关闭按钮 -->
-      <div class="btnX el-icon-close" @click="myVideoShow = false"></div>
       <div class="videoPlay">
+        <div class="btnX el-icon-close" @click="myVideoShow = false"></div>
         <video :src="myVideoSrc" v-if="myVideoSrc" controls autoplay></video>
       </div>
     </div>
@@ -85,7 +114,7 @@
 
 <script>
 import axios from "@/utils/request";
-import { goodList, goodDetail,webVisit } from "@/utils/api";
+import { goodList, goodDetail, webVisit } from "@/utils/api";
 export default {
   name: "tab3",
   components: {},
@@ -97,13 +126,13 @@ export default {
       fullscreen: false,
       modelShow: false,
       listData: [
-        { id: 1, name: "实物模型", type: "model" },
-        { id: 2, name: "专题图库", type: "img" },
-        { id: 3, name: "视频档案", type: "video" },
+        { biaoshi: "/", id: 1, name: "实物模型", type: "model" },
+        { biaoshi: "/", id: 2, name: "专题图库", type: "img" },
+        { biaoshi: "", id: 3, name: "视频档案", type: "video" },
       ],
       formData: {
         pageNum: 1,
-        pageSize: 9,
+        pageSize: 8,
         searchKey: "",
         type: "model",
       },
@@ -244,7 +273,7 @@ export default {
         this.myVideoSrc = this.baseURL + item.filePath;
       }
       // 记录访问量
-    await webVisit('goods',item.id)
+      await webVisit("goods", item.id);
     },
     cutTab(val) {
       if (this.formData.type === val.type) return;
@@ -334,47 +363,90 @@ export default {
 </script>
 <style lang='less' scoped>
 .tab3 {
+  width: 100%;
+  height: 100%;
   display: flex;
-  padding: 50px 30px 0;
+  flex-direction: column;
   color: #3e3e3e;
   .left {
-    width: 300px;
-    height: 800px;
+    position: relative;
+    width: 100%;
+    height: 200px;
+    background: url("../../assets/img/tab3Tab.png");
+    background-size: 100% 100%;
     ul {
-      margin-bottom: 20px;
-      border: 1px solid #c7c7c7;
-      height: 120px;
+      display: flex;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
       li {
-        margin-left: -1px;
-        width: 300px;
-        cursor: pointer;
         display: flex;
-        align-items: center;
-        padding-left: 20px;
-        height: 40px;
+        justify-content: center;
+        font-size: 20px;
+        color: #fff;
+        width: 240px;
+        cursor: pointer;
+        &:hover {
+          color: #f2cd83;
+        }
         & > span {
-          font-size: 40px;
-          margin-right: 10px;
+          margin-left: 50px;
+          color: #fff !important;
         }
-        &:hover {
-          background-color: #b9412e;
-          color: #fff;
+        &>p{
+          text-align: center;
+          width: 145px;
         }
       }
       .active {
-        background-color: #b9412e;
-        color: #fff;
+        color: #f2cd83;
       }
     }
     .search {
-      position: relative;
+      z-index: 10;
+      /*修改提示文字的颜色*/
+      /deep/input::-webkit-input-placeholder {
+        /* WebKit browsers */
+        color: #be1220;
+      }
+      /deep/input:-moz-placeholder {
+        /* Mozilla Firefox 4 to 18 */
+        color: #be1220;
+      }
+      /deep/input::-moz-placeholder {
+        /* Mozilla Firefox 19+ */
+        color: #be1220;
+      }
+      /deep/input:-ms-input-placeholder {
+        /* Internet Explorer 10+ */
+        color: #be1220;
+      }
+
+      width: 700px;
+      height: 50px;
+      position: absolute;
+      bottom: -25px;
+      left: 50%;
+      transform: translateX(-50%);
+      /deep/.el-input__suffix {
+        width: 50px;
+        height: 50px;
+        font-size: 20px;
+        right: 0;
+      }
+      /deep/.el-input__inner {
+        border-radius: 50px;
+        height: 50px;
+        border: 1px solid #be1220;
+      }
       .btn {
         cursor: pointer;
         position: absolute;
         right: 0;
         top: 0;
-        height: 40px;
-        width: 40px;
+        height: 50px;
+        width: 50px;
+        border-radius: 50%;
         background-color: transparent;
       }
     }
@@ -389,6 +461,11 @@ export default {
     align-items: center;
   }
   .right {
+    background: url("../../assets/img/tabBg.png");
+    background-size: 100% 100%;
+    min-width: 19;
+    padding: 0 200px;
+    padding-top: 60px;
     position: relative;
     justify-content: start;
     align-content: flex-start;
@@ -398,25 +475,111 @@ export default {
     flex: 1;
     height: 825px;
     .row {
-      margin-bottom: 20px;
-      margin-left: 40px;
+      position: relative;
+      background-color: #fff;
+      box-shadow: 1px 1px 2px 2px #ccc;
+      margin-right: 30px;
+      margin-bottom: 30px;
       cursor: pointer;
-      width: 30%;
+      width: 351px;
+      height: 240px;
       text-align: center;
+      &:nth-of-type(4n) {
+        margin-right: 0;
+      }
       & > img {
         width: 100%;
         height: 200px;
         object-fit: cover;
-        border: 2px solid #b9412e;
       }
-      & > p {
-        margin-top: 10px;
+      .vidAc {
+        height: 100%;
+      }
+      .listTxt {
+        position: relative;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-align: left;
+        height: 40px;
+        line-height: 40px;
+        padding: 0 50px 0 20px;
+        font-size: 20px;
+        color: #626260;
+        .right_bac {
+          position: absolute;
+          right: 5px;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 28px;
+          height: 28px;
+          background: url("../../assets/img/enter.png");
+          background-size: 100% 100%;
+        }
+      }
+      .imgAc {
+        transform: translateY(-4px);
+        text-align: center;
+        padding: 0 15px;
+      }
+      .vidAcTxt {
+        font-size: 18px;
+        width: 351px;
+        background-color: rgba(0, 0, 0, 0.7);
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        padding: 0 15px 0 20px;
+        color: #fff;
+        & > img {
+          width: 23px;
+          height: 23px;
+        }
+      }
+      .videoSM {
+        z-index: 10;
+        text-align: center;
+        display: none;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background-color: rgba(80, 25, 25, 0.7);
+        & > img {
+          margin-top: 70px;
+          width: 83px;
+          height: 83px;
+        }
+        & > p {
+          padding: 0 10px;
+          text-align: center;
+          font-size: 18px;
+          color: #fff;
+          margin-top: 10px;
+        }
+      }
+      &:hover {
+        .listTxt {
+          background-color: #be1220;
+          color: #fff;
+          .right_bac {
+            background: url("../../assets/img/enterAc.png");
+            background-size: 100% 100%;
+          }
+        }
+        .vidAcTxt {
+          display: none;
+        }
+        .videoSM {
+          display: block;
+        }
       }
     }
     .paging {
       position: absolute;
       left: 50%;
-      bottom: 0;
+      bottom: 20px;
       transform: translateX(-50%);
       /deep/.el-input__inner {
         width: 30px;
@@ -425,15 +588,9 @@ export default {
         border-radius: 50%;
       }
     }
-    .listTxt {
-      font-size: 18px;
-      color: #b9412e;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
   }
   .model {
+    z-index: 1000;
     position: fixed;
     top: 0;
     left: 0;
@@ -443,7 +600,8 @@ export default {
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.5);
     .ifrCon {
-      border: 10px solid #fff;
+      border-top: 10px solid #be1220;
+      border-bottom: 10px solid #be1220;
       position: absolute;
       left: 50%;
       top: 50%;
@@ -467,16 +625,18 @@ export default {
       }
     }
     .btnX {
+      z-index: 999;
       cursor: pointer;
       position: absolute;
       right: 10px;
       top: 10px;
-      color: #fff;
+      color: #be1220;
       font-size: 40px;
     }
 
     .videoPlay {
-      border: 2px solid #b9412e;
+      border-top: 10px solid #be1220;
+      border-bottom: 10px solid #be1220;
       position: absolute;
       top: 50%;
       left: 50%;