大改ui

houtai/src/utils/request.js

@@ -1,8 +1,8 @@
 import axios from 'axios'
 const service = axios.create({
   // baseURL: 'http://192.168.0.135:8005/', // 本地调试
-  baseURL: 'http://192.168.0.245:8005/', // 线上调试
-  // baseURL: '', // build
+  // baseURL: 'http://192.168.0.245:8005/', // 线上调试
+  baseURL: '', // build
   timeout: 5000
 })
 // 请求拦截器

web/public/static/js/main_2020_show.js

@@ -7309,10 +7309,9 @@ window.Modernizr = function(n, e, t) {
             }();
             $(document).on("fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange", function(e) {
                 // 点击全屏和取消全屏
-                let temp =$('.parent-body')
-                let temp1 = document.body.clientWidth
-                if(temp.css('width')!==temp1+'px') temp.css('width','100%')
-                else temp.css('width',`${temp1 - 164}px`)
+                let temp =$('.parent-body .lay_top')
+                if(temp.css('display')==='none') temp.css('display','flex')
+                else temp.css('display','none')
            
 
                 $("#gui-fullscreen").toggle(!K.isFullscreen()),

web/src/assets/css/base.css

@@ -24,32 +24,34 @@ ul li {
 .el-pager li{
   font-weight: 400;
   min-width: 24px;
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
   padding: 0;
   margin: 0 8px;
-  border: 1px solid #C7C7C7;
+  border: none;
+  background-color: transparent;
   border-radius: 50%;
 }
 .el-pager li:hover{
   color: #b9412e;
 }
 .el-pager li.active{
-  width: 30px;
-  height: 30px;
+  width: 26px;
+  height: 26px;
   background-color: #b9412e;
   border-radius: 50%;
   color: #fff;
 }
 .el-pager li.active+li{
-  border: 1px solid #C7C7C7;
+  border: none;
+  background-color: transparent;
 }
 .el-pagination button:hover{
   color: #b9412e;
 }
 .el-image__preview{
   object-fit: cover;
-  border: 2px solid #b9412e;
+  /* border: 2px solid #b9412e; */
 }
 .el-image-viewer__img{
   object-fit: cover;

web/src/pages/Home.vue

@@ -8,31 +8,35 @@
     <div id="gui-thumb"></div>
 
     <!-- 左侧固定导航栏 -->
-    <div class="lay_left">
-      <div class="logo">
+    <div class="lay_top">
+      <div class="login">
         <img src="@/assets/img/logo.png" alt="" />
+        <p>&nbsp;中国人民解放军 陆 军 勤 务 学 院</p>
       </div>
-      <div class="lay_con">
-        <div
-          class="tab"
-          @click="jump(item.img)"
-          v-for="item in tabArr"
-          :key="item.id"
-        >
-          <img
-            :src="require('@/assets/img/' + item.img + 'ac.png')"
-            alt=""
-            v-if="1 === item.id"
-          />
-          <img
-            :src="require('@/assets/img/' + item.img + '.png')"
-            alt=""
-            v-else
-          />
+      <!-- 右边的盒子 -->
+      <div class="conten">
+        <!-- 当前时间 -->
+        <div class="bot_time">
+          {{ moment().format("LL") }} {{ moment().format("dddd") }}
+        </div>
+        <!-- tab栏 -->
+        <div class="tab">
+          <div
+            class="tab_row"
+            v-for="item in tabArr"
+            :key="item.id"
+            @click="jump(item.url)"
+          >
+            <div :class="{ active: 1 === item.id }">
+              {{ item.name }}
+            </div>
+            <img
+              v-show="1 === item.id"
+              src="@/assets/img/active.png"
+              alt=""
+            />
+          </div>
         </div>
-      </div>
-      <div class="bot_time">
-        {{ moment().format("LL") }} {{ moment().format("dddd") }}
       </div>
     </div>
 
@@ -139,10 +143,10 @@ export default {
   data() {
     return {
       tabArr: [
-        { id: 1, img: "tab1" },
-        { id: 2, img: "tab2" },
-        { id: 3, img: "tab3" },
-        { id: 4, img: "tab4" },
+        { url: "tab1", id: 1, name: "数字史馆" },
+        { url: "tab2", id: 2, name: "校园全景" },
+        { url: "tab3", id: 3, name: "文物典藏" },
+        { url: "tab4", id: 4, name: "信息检索" }
       ],
 
       showWelcome: true,
@@ -159,7 +163,7 @@ export default {
       this.$nextTick(() => {
         setTimeout(() => {
           location.reload(true);
-        }, 100);
+        }, 300);
       });
     },
     hideWelcome() {
@@ -221,45 +225,71 @@ export default {
   right: 0;
   bottom: 0;
   width: 100%;
-  width: calc(100vw - 164px);
   height: 100%;
-  .lay_left {
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    min-height: 875px;
-    min-width: 164px;
-    width: 164px;
-    height: 100vh;
-    background-color: #b9412e;
-    .logo {
-      padding-top: 20px;
-      width: 120px;
-      margin: 0 auto;
+  .lay_top {
+    display: flex;
+    z-index: 999;
+    position: relative;
+    width: 100%;
+    height: 120px;
+    background-color: #b0111e;
+    .login {
+      display: flex;
+      align-items: center;
+      margin-left: 100px;
+      width: 320px;
+      height: 120px;
+      background-size: 100% 100%;
       & > img {
-        width: 100%;
+        width: 80px;
+        height: 80px;
+      }
+      & > p {
+        font-size: 24px;
+        color: #f2cd83;
+        font-weight: 700;
+        padding: 21px;
       }
     }
-    .lay_con {
-      padding: 20px 0;
-      min-height: 510px;
-      height: calc(100vh - 185px);
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
+    .conten {
+      color: #f2cd83;
+      flex: 1;
+      .bot_time {
+        text-align: right;
+        padding-right: 260px;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 1px solid #f2cd83;
+      }
       .tab {
-        cursor: pointer;
-        margin: 0 auto;
-        width: 91px;
-        & > img {
-          width: 100%;
+        padding-top: 13px;
+        height: 79px;
+        background: url('../assets/img/layTopBac.png') no-repeat right;
+        display: flex;
+        justify-content: space-around;
+        padding-right: 120px;
+        .tab_row {
+          cursor: pointer;
+          text-align: center;
+          font-size: 18px;
+          height: 60px;
+          & > div {
+            color: #fff;
+          }
+          .active {
+            color: #f2cd83;
+            font-weight: 700;
+          }
+          & > img {
+            width: 53px;
+            height: 19px;
+          }
+          &:hover div{
+            color: #f2cd83;
+          }
         }
       }
     }
-    .bot_time {
-      text-align: center;
-      font-size: 14px;
-    }
   }
 }
 

web/src/views/home/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="home">
-    <div class="btnR" @click="goIndex">立即进入</div>
+    <div class="btnR" @click="goIndex">
+      <p>进 入</p>
+      <p>史 馆</p>
+    </div>
   </div>
 </template>
 
@@ -48,18 +51,21 @@ export default {
   background: url("../../assets/img/indexBac.png");
   background-size: 100% 100%;
   .btnR {
-    font-size: 20px;
+    font-size: 18px;
     border-radius: 8px;
     cursor: pointer;
-    background-color: #b9412e;
     position: absolute;
     left: 50%;
     bottom: 80px;
     transform: translateX(-50%);
-    width: 188px;
-    height: 44px;
-    line-height: 44px;
-    text-align: center;
+    width: 80px;
+    height: 80px;
+    background: url('../../assets/img/homeBtn.png');
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
   }
 }
 </style>

web/src/views/layout/index.vue

@@ -1,35 +1,39 @@
 <!--  -->
 <template>
   <div class="layout">
-    <!-- 左侧固定导航栏 -->
-    <div class="lay_left">
-      <div class="logo">
+    <!-- 上侧固定导航栏 -->
+    <div class="lay_top">
+      <div class="login">
         <img src="@/assets/img/logo.png" alt="" />
+        <p>&nbsp;中国人民解放军 陆 军 勤 务 学 院</p>
       </div>
-      <div class="lay_con">
-        <div
-          class="tab"
-          @click="jump(item.img)"
-          v-for="item in tabArr"
-          :key="item.id"
-        >
-          <img
-            :src="require('@/assets/img/' + item.img + 'ac.png')"
-            alt=""
-            v-if="$route.meta.myInd === item.id"
-          />
-          <img
-            :src="require('@/assets/img/' + item.img + '.png')"
-            alt=""
-            v-else
-          />
+      <!-- 右边的盒子 -->
+      <div class="conten">
+        <!-- 当前时间 -->
+        <div class="bot_time">
+          {{ moment().format("LL") }} {{ moment().format("dddd") }}
+        </div>
+        <!-- tab栏 -->
+        <div class="tab">
+          <div
+            class="tab_row"
+            v-for="item in tabArr"
+            :key="item.id"
+            @click="jump(item.url)"
+          >
+            <div :class="{ active: $route.meta.myInd === item.id }">
+              {{ item.name }}
+            </div>
+            <img
+              v-show="$route.meta.myInd === item.id"
+              src="@/assets/img/active.png"
+              alt=""
+            />
+          </div>
         </div>
-      </div>
-      <div class="bot_time">
-        {{ moment().format("LL") }} {{ moment().format("dddd") }}
       </div>
     </div>
-    <!-- 右侧内容 -->
+    <!-- 下侧内容 -->
     <div class="right_con">
       <Router-view />
     </div>
@@ -44,10 +48,10 @@ export default {
     // 这里存放数据
     return {
       tabArr: [
-        { id: 1, img: "tab1" },
-        { id: 2, img: "tab2" },
-        { id: 3, img: "tab3" },
-        { id: 4, img: "tab4" },
+        { url: "tab1", id: 1, name: "数字史馆" },
+        { url: "tab2", id: 2, name: "校园全景" },
+        { url: "tab3", id: 3, name: "文物典藏" },
+        { url: "tab4", id: 4, name: "信息检索" }
       ],
     };
   },
@@ -57,7 +61,7 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    // 点击左侧tab栏
+    // 点击tab栏
     jump(url) {
       if (url === "tab1") url = "/index?m=1151";
       this.$router.replace(url).catch(() => {});
@@ -65,7 +69,7 @@ export default {
         this.$nextTick(() => {
           setTimeout(() => {
             location.reload(true);
-          }, 100);
+          }, 300);
         });
       }
     },
@@ -86,46 +90,81 @@ export default {
 <style lang='less' scoped>
 .layout {
   display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 1900px;
+  min-height: 900px;
   color: #fff;
-  .lay_left {
-    min-height: 875px;
-    min-width: 164px;
-    width: 164px;
-    height: 100vh;
-    background-color: #b9412e;
-    .logo {
-      padding-top: 20px;
-      width: 120px;
-      margin: 0 auto;
+  .lay_top {
+    display: flex;
+    z-index: 999;
+    position: relative;
+    width: 100%;
+    height: 120px;
+    background-color: #b0111e;
+    .login {
+      display: flex;
+      align-items: center;
+      margin-left: 100px;
+      width: 320px;
+      height: 120px;
+      background-size: 100% 100%;
       & > img {
-        width: 100%;
+        width: 80px;
+        height: 80px;
+      }
+      & > p {
+        font-size: 24px;
+        color: #f2cd83;
+        font-weight: 700;
+        padding: 21px;
       }
     }
-    .lay_con {
-      padding: 20px 0;
-      min-height: 510px;
-      height: calc(100vh - 185px);
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
+    .conten {
+      color: #f2cd83;
+      flex: 1;
+      .bot_time {
+        text-align: right;
+        padding-right: 260px;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 1px solid #f2cd83;
+      }
       .tab {
-        cursor: pointer;
-        margin: 0 auto;
-        width: 91px;
-        & > img {
-          width: 100%;
+        padding-top: 13px;
+        height: 79px;
+        background: url('../../assets/img/layTopBac.png') no-repeat right;
+        display: flex;
+        justify-content: space-around;
+        padding-right: 120px;
+        .tab_row {
+          cursor: pointer;
+          text-align: center;
+          font-size: 18px;
+          height: 60px;
+          & > div {
+            color: #fff;
+          }
+          .active {
+            color: #f2cd83;
+            font-weight: 700;
+          }
+          & > img {
+            width: 53px;
+            height: 19px;
+          }
+          &:hover div{
+            color: #f2cd83;
+          }
         }
       }
     }
-    .bot_time {
-      text-align: center;
-      font-size: 14px;
-    }
   }
   .right_con {
+    background: url('../../assets/img/layoutBac.png');
+    background-size: 100% 100%;
     position: relative;
-    max-width: 1756px;
-    max-height: 973px;
     flex: 1;
   }
 }

web/src/views/tab2/index.vue

@@ -77,11 +77,11 @@ export default {
   height: 100%;
 }
 .con {
-  width: 90%;
+  width: 98%;
   height: 100%;
   margin: 0 auto;
   .swiper-container {
-    padding-top: 200px;
+    padding-top: 110px;
     min-width: 1500px;
     width: 100%;
     height: 100%;
@@ -91,12 +91,14 @@ export default {
         text-align: center;
         color: #b9412e;
         width: 100%;
-        height: 500px;
+        height: 600px;
         overflow: hidden;
         img {
-          border: 2px solid #b9412e;
+          opacity: .5;
+          border-top: 5px solid #b9412e;
+          border-bottom: 5px solid #b9412e;
           width: 100%;
-          height: 500px;
+          height: 600px;
           object-fit: cover;
         }
       }
@@ -105,25 +107,45 @@ export default {
     //   transform: translate(0, 0);
     // }
     /deep/.swiper-slide.swiper-slide-next {
-      transform:scale(1.3) ;
+      transform:scale(2.4,1.2) ;
       overflow: visible;
       z-index: 9999 !important;
+    }    
+    /deep/.swiper-slide.swiper-slide-next >img {
+      opacity: 1;
     }
   }
   // /deep/html:root{
   //       --swiper-theme-color: transparent !important;
   // }
   .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
-    background-image: url('../../assets/img/swiLeft.png') !important;
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    left: 50px;
+    border: 4px solid #fff;
+    color: #fff;
+    font-weight: 700;
+    background-image:none;
+    // background-image: url('../../assets/img/swiLeft.png') !important;
   }
   .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
-    background-image: url('../../assets/img/swiRight.png') !important;
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    right: 50px;
+    border: 4px solid #fff;
+    color: #fff;
+    font-weight: 700;
+    background-image:none;
+    // background-image: url('../../assets/img/swiRight.png') !important;
   }
   --swiper-theme-color: transparent;/* 设置Swiper风格 */
   --swiper-navigation-color: transparent;/* 单独设置按钮颜色 */
   --swiper-navigation-size: 30px;/* 设置按钮大小 */
   .imgName{
-    margin-top: 5px;
+    color: #fff;
+    margin-top: -35px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap; 

web/src/views/tab3/index.vue

@@ -9,12 +9,16 @@
           :key="item.id"
           @click="cutTab(item)"
         >
-          <span>·</span> {{ item.name }}
+          <p v-if="formData.type === item.type">
+            ★&nbsp;{{ item.name }}&nbsp;★
+          </p>
+          <p v-else>{{ item.name }}</p>
+          <span> {{ item.biaoshi }} </span>
         </li>
       </ul>
-      <div class="search" @keyup.enter='mySearch'>
+      <div class="search" @keyup.enter="mySearch">
         <el-input
-          placeholder="搜索"
+          placeholder="请输入关键词..."
           suffix-icon="el-icon-search"
           v-model="formData.searchKey"
         >
@@ -33,24 +37,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"
@@ -65,7 +96,10 @@
         <!-- 关闭按钮 -->
         <div class="btnX el-icon-close" @click="modelShow = false"></div>
         <!-- 全屏按钮 -->
-        <div class="full" @click="screen"></div>
+        <div class="full" @click="screen">
+          <img src="../../assets/img/tab3FullX.png" alt="" v-if="fullscreen">
+          <img src="../../assets/img/tab3Full.png" alt="" v-else>
+        </div>
       </div>
     </div>
     <!-- 大图预览里面的文字显示 -->
@@ -75,8 +109,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 +119,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 +131,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 +278,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 +368,91 @@ 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: 180px;
+    background: url("../../assets/img/tab3Tab.png");
+    background-size: 100% 100%;
     ul {
-      margin-bottom: 20px;
-      border: 1px solid #c7c7c7;
-      height: 120px;
+      padding-left: 40px;
+      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 +467,8 @@ export default {
     align-items: center;
   }
   .right {
+    padding: 0 200px;
+    padding-top: 50px;
     position: relative;
     justify-content: start;
     align-content: flex-start;
@@ -398,25 +478,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 +591,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 +603,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%;
@@ -457,26 +618,30 @@ export default {
       .full {
         width: 30px;
         height: 30px;
-        background: url("../../assets/img/tab3Full.png");
-        background-size: 30px 30px;
         cursor: pointer;
         position: absolute;
         right: 10px;
         bottom: 10px;
         color: #fff;
+        &>img{
+          width: 30px;
+          height: 30px;
+        }
       }
     }
     .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%;
@@ -484,9 +649,9 @@ export default {
       width: 800px;
       height: auto;
       video {
+        max-height: 90vh;
         vertical-align: top;
         width: 100%;
-        max-height: 96vh;
       }
     }
   }

web/src/views/tab4/audio.vue

@@ -169,10 +169,10 @@ export default {
   }
   @color: #dba761;
   .audiocon {
+    margin: 0 auto;
     position: relative;
-    width: 100%;
+    width: 70%;
     height: 100%;
-    background-color: #c04340;
     .adcon {
       .titleTxt {
         letter-spacing:2px;
@@ -184,8 +184,8 @@ export default {
       }
       .time {
         position: absolute;
-        right: 0;
-        top: -20px;
+        right: -100px;
+        top: 4px;
       }
       width: 85%;
       margin: 0 auto;
@@ -208,7 +208,7 @@ export default {
           cursor: pointer;
           overflow: hidden;
           position: absolute;
-          background-color: #fff;
+          background-color: rgba(237, 211, 176, .5);
           top: 50%;
           transform: translateY(-50%);
           border-radius: 12px;
@@ -224,7 +224,7 @@ export default {
           left: 0;
           height: 5px;
           cursor: pointer;
-          background-color: #fad676;
+          background-color: #EDD3B0;
           top: 50%;
           transform: translateY(-50%);
 
@@ -291,8 +291,8 @@ export default {
         background-size: 100% 100%;
       }
       .play {
-        width: 30px;
-        height: 30px;
+        width: 50px;
+        height: 50px;
         & > img {
           width: 100%;
           height: 100%;

web/src/views/tab4/index.vue

@@ -1,13 +1,22 @@
 <template>
 <div class='tab4'>
   <div class="conten">
-      <div class="con_top">
-        <div :class="{active:imgListInd===item.url}" v-for="item in imgList" :key="item.id" @click="cutTab(item.url)">
-          <img :src="require('@/assets/images/tab4/4_'+item.id+'.png')" alt="" v-if="imgListInd===item.url">
-          <img :src="require('@/assets/images/tab4/4_'+item.id+'ac.png')" alt="" v-else>
-          {{item.name}}
-          </div>
-      </div>
+    <div class="left">
+      <ul>
+        <li
+          :class="{ active: imgListInd===item.url }"
+          v-for="item in imgList"
+          :key="item.id"
+          @click="cutTab(item.url)"
+        >
+          <p v-if="imgListInd===item.url">
+            ★&nbsp;{{ item.name }}&nbsp;★
+          </p>
+          <p v-else>{{ item.name }}</p>
+          <span> {{ item.biaoshi }} </span>
+        </li>
+      </ul>
+    </div>
       <!-- 动态组件 -->
       <keep-alive>
         <component :is="imgListInd"></component>
@@ -30,10 +39,10 @@ export default {
     return {
       imgListInd: 'tab4one',
       imgList: [
-        { id: 1, name: '学校宣传片', url: 'tab4one' },
-        { id: 2, name: '美丽校园', url: 'tab4tow' },
-        { id: 3, name: '军歌嘹亮', url: 'tab4three' },
-        { id: 4, name: '历任学校领导', url: 'tab4four' },
+        { id: 1, name: '学校宣传片', url: 'tab4one',biaoshi:'/' },
+        { id: 2, name: '美丽校园', url: 'tab4tow' ,biaoshi:'/'},
+        { id: 3, name: '军歌嘹亮', url: 'tab4three',biaoshi:'/' },
+        { id: 4, name: '历任学校领导', url: 'tab4four',biaoshi:'/' },
         { id: 5, name: '学籍查询', url: 'tab4five' }
       ]
     }
@@ -67,36 +76,53 @@ export default {
 </script>
 <style lang='less' scoped>
 .tab4{
-  background-color: #f2f2f2;
   height: 100%;
     .conten{
-    padding: 50px 100px 0;
     height: 100%;
     min-width: 1740px;
-    .con_top{
-      margin-bottom: 40px;
+      .left {
+    position: relative;
+    width: 100%;
+    height: 180px;
+    background: url("../../assets/img/tab4Tab.png");
+    background-size: 100% 100%;
+    ul {
+      padding-left: 40px;
       display: flex;
-      justify-content: space-between;
-      height: 60px;
-      border-bottom: 4px solid #b9412e;
-      &>div {
-        font-weight: 700;
-        font-size: 20px;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+      li {
         display: flex;
         justify-content: center;
-        align-items: center;
-        width: 280px;
+        font-size: 20px;
+        color: #fff;
+        width: 240px;
         cursor: pointer;
-        color: #bc4b39;
-        &>img{
-          margin-right: 10px;
+        &:hover {
+          color: #f2cd83;
+        }
+        & > span {
+          margin-left: 50px;
+          color: #fff !important;
+        }
+        & > p {
+          text-align: center;
+          width: 145px;
+        }
+        &:nth-of-type(4){
+          &>p{
+            width: 165px;
+          }
         }
       }
       .active {
-        background-color: #b9412e;
-        color: #fff;
+        color: #f2cd83;
       }
     }
+
+  }
+
     .con_tab{
       height: 700px;
       }

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

@@ -1,20 +1,7 @@
 <!--  -->
 <template>
   <div class="tab4-1" v-if="videoList.length !== 0">
-    <!-- 左侧列表 -->
-    <div class="one_left">
-      <div
-        class="alone"
-        :class="{active:videoInd===index}"
-        v-for="(item,index) in videoList"
-        :key="item.id"
-        @click="videoChange(item,index)"
-      >
-        <div class="video_name" :title="item.name">{{ item.name }}</div>
-        <img :src="baseURL + item.thumb" alt="" />
-      </div>
-    </div>
-    <!-- 右侧视频 -->
+    <!-- 左侧视频 -->
     <div class="one_right">
       <video
         v-if="videoSrc"
@@ -22,7 +9,26 @@
         autoplay
         controls
       ></video>
-      <p>{{videoTxt}}</p>
+      <p>{{ videoTxt }}</p>
+    </div>
+    <!-- 右侧列表 -->
+    <div class="one_left">
+      <div
+        class="alone"
+        :class="{ active: videoInd === index }"
+        v-for="(item, index) in videoList"
+        :key="item.id"
+      >
+        <div class="video_name" :title="item.name">
+          <img src="../../assets/img/play.png" alt="" />{{ item.name }}
+        </div>
+        <img :src="baseURL + item.thumb" alt="" />
+        <!-- 鼠标移动上去的遮罩 -->
+        <div class="moveShow" @click="videoChange(item, index)">
+          <img src="../../assets/img/playMove.png" alt="" />
+          <p>{{ item.name }}</p>
+        </div>
+      </div>
     </div>
   </div>
   <div class="tab4-1 conNull" v-else>暂 无 数 据</div>
@@ -37,11 +43,11 @@ export default {
   data() {
     // 这里存放数据
     return {
-      videoInd:0,
+      videoInd: 0,
       videoSrc: "",
       videoList: [],
       baseURL: "",
-      videoTxt:''
+      videoTxt: "",
     };
   },
   // 监听属性 类似于data概念
@@ -50,10 +56,10 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    async videoChange(val,ind) {
-      this.videoTxt=val.name
+    async videoChange(val, ind) {
+      this.videoTxt = val.name;
       this.videoSrc = val.filePath;
-      this.videoInd=ind
+      this.videoInd = ind;
       // 记录访问量
       await webVisit("video", val.id);
     },
@@ -69,8 +75,8 @@ export default {
     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
+    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() {}, // 生命周期 - 创建之前
@@ -84,8 +90,8 @@ export default {
 </script>
 <style lang='less' scoped>
 /deep/::-webkit-scrollbar-thumb {
-  background-color: #b9412e !important;
-  outline: 1px solid #b9412e !important;
+  background-color: #D8B581 !important;
+  outline: 1px solid #D8B581 !important;
   outline-offset: 0;
 }
 .conNull {
@@ -95,25 +101,54 @@ export default {
   color: #b9412e;
 }
 .tab4-1 {
+  padding: 30px 200px;
   display: flex;
   width: 100%;
-  height: 675px;
-  min-width: 1500px;
+  height: 620px;
   .one_left {
-    padding-right: 5px;
-    margin-right: 24px;
-    width: 280px;
+    padding-right: 15px;
+    margin-left: 40px;
+    width: 350px;
     height: 100%;
     overflow-y: auto;
     .alone {
       position: relative;
       cursor: pointer;
       width: 100%;
-      height: 158px;
+      height: 257px;
       margin-bottom: 10px;
       // border: 2px solid #b9412e;
-      &:hover{
-      border: 2px solid #b9412e;
+      .moveShow {
+        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 {
+        // border: 2px solid #b9412e;
+        .video_name {
+          display: none;
+        }
+        .moveShow {
+          display: block;
+        }
       }
       &:last-child {
         margin-bottom: 0;
@@ -132,29 +167,44 @@ export default {
         position: absolute;
         bottom: 0;
         left: 0;
-        background-color: rgba(0, 0, 0, 0.8);
-        height: 24px;
-        line-height: 24px;
+        background-color: rgba(0, 0, 0, 0.6);
+        height: 35px;
+        line-height: 35px;
         color: #fff;
         text-align: center;
+        & > img {
+          margin-right: 5px;
+        }
       }
     }
-    .active{
-      border: 2px solid #b9412e;
+    .active {
+      .video_name {
+        display: none;
+      }
+
+      .moveShow {
+        display: block;
+      }
     }
   }
   .one_right {
     flex: 1;
+    position: relative;
     & > video {
       width: 100%;
-      height: 95%;
+      height: 100%;
     }
-    &>P {
+    & > P {
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
       padding: 0 10px;
-      text-align: center;
       font-size: 18px;
-      height: 5%;
-      color: #bc4b39;
+      height: 40px;
+      line-height: 40px;
+      color: #fff;
+      background-image: linear-gradient(to right, #b9412e, transparent);
     }
   }
 }

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

@@ -1,22 +1,20 @@
 <template>
   <div class="tab4-2">
-    <div class="top">
-      <div class="search" @keyup.enter="mySearch">
-        <el-input
-          placeholder="请输入内容"
-          suffix-icon="el-icon-search"
-          v-model="formData.searchKey"
-        >
-        </el-input>
-        <span class="btn" @click="mySearch">搜 索</span>
-      </div>
+    <div class="search" @keyup.enter="mySearch">
+      <el-input
+        placeholder="请输入关键词..."
+        suffix-icon="el-icon-search"
+        v-model="formData.searchKey"
+      >
+      </el-input>
+      <span class="btn" @click="mySearch"></span>
     </div>
     <!-- 内容 -->
     <div class="conten" v-if="myArr.length !== 0">
       <div class="row" v-for="(item, index) in myArr" :key="item.id">
         <el-image
           @click="lookBigImg(item, index)"
-          style="width: 260px; height: 280px"
+          style="width: 351px; height: 200px"
           :src="baseURL + item.thumb"
           :preview-src-list="srcList"
         >
@@ -57,7 +55,7 @@ export default {
       total: 0,
       formData: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 8,
         searchKey: "",
       },
       baseURL: "",
@@ -183,6 +181,7 @@ export default {
   color: #b9412e !important;
 }
 .tab4-2 {
+  position: relative;
   /*修改提示文字的颜色*/
   /deep/input::-webkit-input-placeholder {
     /* WebKit browsers */
@@ -201,80 +200,102 @@ export default {
     color: #b9412e;
   }
   // position: relative;
+  padding: 30px 200px;
+  display: flex;
   width: 100%;
-  height: 750px;
-  min-width: 1500px;
+  height: 620px;
   color: black;
-  .top {
-    height: 10px;
-    position: relative;
-    width: 100%;
-    text-align: center;
-    color: #b9412e;
-    font-size: 26px;
-    font-weight: 700;
-    .search {
-      /deep/.el-input__inner {
-        border-radius: 40px;
-        border: 1px solid #b9412e;
-      }
-      width: 350px;
-      left: 0;
-      bottom: -10px;
+
+  .search {
+    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;
+    top: -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;
-      .btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #fff;
-        z-index: 999;
-        background-color: #b9412e;
-        border-radius: 40px;
-        cursor: pointer;
-        position: absolute;
-        right: -20px;
-        top: 3px;
-        height: 40px;
-        width: 60px;
-      }
+      right: 0;
+      top: 0;
+      height: 50px;
+      width: 50px;
+      border-radius: 50%;
+      background-color: transparent;
     }
   }
+
   .conten {
-    margin-top: 10px;
-    min-width: 1556px;
-    height: 680px;
+    height: 530px;
     display: flex;
     flex-wrap: wrap;
     .row {
+      color: #626260;
+      background-color: #fff;
+      box-shadow: 1px 1px 2px 2px #ccc;
       cursor: pointer;
-      margin: 20px 64px 10px 0;
-      width: 260px;
-      height: 316px;
+      margin: 20px 30px 10px 0;
+      width: 351px;
+      height: 235px;
       /deep/.el-image__preview {
         object-fit: cover;
       }
       & > img {
-        width: 260px;
-        height: 280px;
+        width: 351px;
+        height: 200px;
       }
       & > p {
+        padding: 0 5px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         font-size: 18px;
-        color: #b9412e;
-        margin-top: 8px;
+        margin-top: 3px;
         text-align: center;
       }
+      &:hover {
+        background-color: #be1220;
+        color: #fff;
+      }
     }
-    .row:nth-of-type(5n) {
+    .row:nth-of-type(4n) {
       margin-right: 0;
     }
   }
   .paging {
     position: absolute;
     left: 50%;
-    bottom: 20px;
+    bottom: 10px;
     transform: translateX(-50%);
     /deep/.el-input__inner {
       width: 30px;

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

@@ -1,5 +1,21 @@
 <template>
   <div class="tab4-3" v-if="musicList.length !== 0">
+    <div class="right">
+      <div class="right_img"></div>
+      <div class="right_top">
+        <!-- 歌词 -->
+        <div class="title">{{ myObj.name }}</div>
+        <div class="txt" v-html="myObj.description"></div>
+      </div>
+      <div class="right_bottom">
+        <Audio
+          :audioSrc="baseURL + myObj.filePath"
+          :title="myObj.name"
+          @sonCutMu="sonCutMu"
+        />
+      </div>
+    </div>
+
     <div class="left">
       <div class="title">歌单列表</div>
       <div class="listCon">
@@ -10,32 +26,16 @@
           :class="{ active: audioInd === index }"
           @click="cutMusic(item.id, index)"
         >
-          <img
-            src="@/assets/images/tab4/11.png"
-            alt=""
-            v-if="audioInd === index"
-          />
-          <span v-else>{{ index + 1 }}</span>
+          <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 class="right">
-      <div class="right_top">
-        <!-- 歌词 -->
-        <div class="title">《{{ myObj.name }}》</div>
-        <div class="txt" v-html="myObj.description"></div>
-      </div>
-      <div class="right_bottom">
-        <Audio
-          :audioSrc="baseURL + myObj.filePath"
-          :title="myObj.name"
-          @sonCutMu="sonCutMu"
-        />
-      </div>
-    </div>
   </div>
   <div class="tab4-3 conNull" v-else>暂 无 数 据</div>
 </template>
@@ -117,35 +117,52 @@ export default {
   justify-content: center;
   color: #b9412e;
 }
-
 /deep/::-webkit-scrollbar-thumb {
-  background-color: #b9412e !important;
-  outline: 1px solid #b9412e !important;
+  background-color: #d8b581 !important;
+  outline: 1px solid #d8b581 !important;
   outline-offset: 0;
 }
+
 .tab4-3 {
+  padding: 30px 200px;
   display: flex;
   width: 100%;
-  height: 675px;
-  min-width: 1500px;
+  height: 595px;
   .left {
-    margin-right: 24px;
+    margin-left: 30px;
     border-radius: 8px;
     padding: 10px 0;
     text-align: center;
-    color: #b9412e;
-    width: 280px;
+    color: #333333;
+    width: 300px;
     height: 100%;
-    background-color: #fff;
     .title {
-      font-size: 28px;
+      font-weight: 700;
+      text-align: left;
+      padding-left: 72px;
+      font-size: 22px;
       margin-bottom: 10px;
     }
     .listCon {
-      height: 617px;
+      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;
@@ -160,36 +177,32 @@ export default {
         margin-top: -5px;
       }
       &:hover {
-        background-color: #b9412e;
-        color: #fff;
+        color: #b9412e;
       }
       &:first-child {
         margin-top: 0px;
       }
     }
     .active {
-      background-color: #b9412e;
-      color: #fff;
+      color: #b9412e;
     }
   }
   .right {
     flex: 1;
+    display: flex;
+    .right_img {
+      width: 270px;
+      background: url('../../assets/img/musicC.png') no-repeat center center;
+    }
     .right_top {
       overflow-y: auto;
       padding: 15px 50px;
-      background: url("../../assets/images/tab4/bg.png") #f3ebdd center center
-        no-repeat;
-      background-size: 750px 287px;
-      width: 100%;
-      height: 580px;
-      margin-bottom: 23px;
+      padding-top: 0;
+      flex: 1;
       & > div {
         margin: 10px 0;
         text-align: center;
-        color: #c04340;
-      }
-      .title {
-        font-size: 30px;
+        color: #333333;
       }
       .txt {
         font-size: 22px;
@@ -198,12 +211,19 @@ export default {
           font-size: 18px;
         }
       }
+      .title {
+        margin-top: 0;
+        font-size: 24px;
+        font-weight: 700;
+      }
     }
     .right_bottom {
+      position: fixed;
+      bottom: 0;
+      left: 0;
       width: 100%;
       height: 70px;
-      background-color: #c04340;
-      border-radius: 10px;
+      background-color: rgba(0,0,0,.6);
     }
   }
 }

web/src/views/tab4/tab4-4.vue

@@ -1,18 +1,16 @@
 <template>
   <div class="tab4-4">
-    <div class="top">
-      <div class="search" @keyup.enter="mySearch">
-        <el-input
-          placeholder="请输入姓名"
-          suffix-icon="el-icon-search"
-          v-model="formData.searchKey"
-        >
-        </el-input>
-        <span class="btn" @click="mySearch">搜 索</span>
-      </div>
+    <div class="search" @keyup.enter="mySearch" v-show="!details">
+      <el-input
+        placeholder="请输入关键词..."
+        suffix-icon="el-icon-search"
+        v-model="formData.searchKey"
+      >
+      </el-input>
+        <span class="btn" @click="mySearch"></span>
     </div>
     <!-- 内容 -->
-    <div class="conten" v-if="myArr.length !== 0">
+    <div class="conten" v-if="myArr.length !== 0" v-show="!details">
       <div
         class="row"
         v-for="item in myArr"
@@ -20,12 +18,30 @@
         @click="lookBigImg(item)"
       >
         <img class="imgLook" :src="baseURL + item.thumb" alt="" />
-        <p :title="item.name">{{ item.name }}</p>
+        <!-- 右边信息盒子 -->
+        <div class="row_right">
+          <h2 :title="item.name">
+            {{
+              item.name.length > 5
+                ? item.name.substring(0, 5) + "..."
+                : item.name
+            }}
+          </h2>
+          <p>{{ item.politics }}</p>
+          <p>
+            {{
+              item.job.length > 5 ? item.job.substring(0, 5) + "..." : item.job
+            }}
+          </p>
+          <div class="pitchOn">
+            <div>查看更多</div>
+          </div>
+        </div>
       </div>
     </div>
     <div class="tab4-4 conNull" v-else>暂 无 数 据</div>
     <!-- 分页 -->
-    <div class="paging">
+    <div class="paging" v-show="!details">
       <el-pagination
         layout="prev,pager,next,jumper"
         :total="total"
@@ -38,7 +54,7 @@
     <!-- 点击领导详情 -->
     <div class="details" v-show="details">
       <div class="left">
-        <div class="el-icon-arrow-left" @click="details = false"></div>
+        <div class="el-icon-arrow-left" @click="details = false">返 回</div>
         <img :src="baseURL + txtObj.thumb" alt="" v-if="txtObj.thumb" />
         <p>{{ txtObj.name }}</p>
       </div>
@@ -75,7 +91,7 @@ export default {
       total: 0,
       formData: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 8,
         searchKey: "",
       },
       baseURL: "",
@@ -142,8 +158,8 @@ export default {
 </script>
 <style lang='less' scoped>
 /deep/::-webkit-scrollbar-thumb {
-  background-color: #b9412e !important;
-  outline: 1px solid #b9412e !important;
+  background-color: #D8B581 !important;
+  outline: 1px solid #D8B581 !important;
   outline-offset: 0;
 }
 
@@ -155,6 +171,7 @@ export default {
   color: #b9412e !important;
 }
 .tab4-4 {
+  position: relative;
   /*修改提示文字的颜色*/
   /deep/input::-webkit-input-placeholder {
     /* WebKit browsers */
@@ -173,73 +190,138 @@ export default {
     color: #b9412e;
   }
   // position: relative;
+  padding: 30px 200px;
+  display: flex;
   width: 100%;
-  height: 750px;
-  min-width: 1500px;
+  height: 620px;
   color: black;
-  .top {
-    height: 10px;
-    position: relative;
-    width: 100%;
-    text-align: center;
-    color: #b9412e;
-    font-size: 26px;
-    font-weight: 700;
-    .search {
-      /deep/.el-input__inner {
-        border-radius: 40px;
-        border: 1px solid #b9412e;
-      }
-      width: 350px;
-      left: 0;
-      bottom: -10px;
+
+  .search {
+    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;
+    top: -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;
-      .btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #fff;
-        z-index: 999;
-        background-color: #b9412e;
-        border-radius: 40px;
-        cursor: pointer;
-        position: absolute;
-        right: -20px;
-        top: 3px;
-        height: 40px;
-        width: 60px;
-      }
+      right: 0;
+      top: 0;
+      height: 50px;
+      width: 50px;
+      border-radius: 50%;
+      background-color: transparent;
     }
   }
   .conten {
-    margin-top: 10px;
-    min-width: 1556px;
-    height: 680px;
+    margin-top: 50px;
+    height: 500px;
     display: flex;
     flex-wrap: wrap;
     .row {
+      display: flex;
       cursor: pointer;
-      margin: 20px 64px 10px 0;
-      width: 260px;
-      height: 316px;
-
+      width: 350px;
+      height: 190px;
+      border-radius: 6px;
+      overflow: hidden;
+      background-color: #fbf8f8;
+      margin: 0 35px 35px 0;
+      &:nth-of-type(4n) {
+        margin-right: 0;
+      }
       & > img {
+        width: 150px;
+        height: 190px;
         object-fit: cover;
-        border: 2px solid #b9412e;
-        width: 260px;
-        height: 280px;
       }
-      & > p {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-size: 18px;
-        color: #b9412e;
-        margin-top: 12px;
-        text-align: center;
+      .row_right {
+        padding: 0 30px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        color: #a17e3a;
+        font-size: 20px;
+
+        & > p {
+          color: #333333;
+          text-align: center;
+          margin-top: 25px;
+          font-size: 18px;
+        }
+        .pitchOn {
+          margin-top: 25px;
+          position: relative;
+          font-size: 14px;
+          color: #be1220;
+          width: 58px;
+          height: 55px;
+          display: none;
+          background: url("../../assets/img/tab5pitch.png");
+          background-size: 100% 100%;
+          & > div {
+            line-height: 14px;
+            width: 28px;
+            height: 28px;
+            position: absolute;
+            top: 58%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+          }
+        }
+      }
+      &:hover {
+        padding: 5px;
+        background-color: #be1220;
+        & > img {
+          width: 140px;
+          height: 180px;
+        }
+        .row_right {
+          color: #fff;
+          & > P {
+            display: none;
+          }
+          .pitchOn {
+            display: block;
+          }
+        }
       }
     }
-    .row:nth-of-type(5n) {
+    .row:nth-of-type(4n) {
       margin-right: 0;
     }
   }
@@ -256,41 +338,43 @@ export default {
     }
   }
   .details {
-    background-color: #fff;
     z-index: 9999;
     position: absolute;
-    right: 0;
+    left: 0;
     top: 0;
     display: flex;
     // width: calc(100% - 160px);
     width: 100%;
-    height: 100%;
-    padding: 0px 0 0 80px;
+    height: 620px;
+    padding: 30px 200px 0 200px;
     color: #707070;
     .left {
       margin-right: 100px;
-      padding-top: 50px;
+      padding-top: 20px;
       width: 200px;
       height: auto;
       & > div {
-        margin-left: -12px;
         cursor: pointer;
-        font-size: 50px;
+        font-size: 20px;
         margin-bottom: 30px;
+        color: #BE1220;
       }
       & > img {
-        width: 200px;
-        height: 230px;
+        width: 210px;
+        height: 300px;
         object-fit: cover;
       }
       & > P {
+        font-weight: 700;
+        font-size: 20px;
         margin-top: 8px;
         text-align: center;
+        color: #D32424;
       }
     }
     .right {
       flex: 1;
-      padding-top: 100px;
+      overflow-y: auto;
       & > div {
         margin-top: 30px;
         width: 1000px;
@@ -313,8 +397,6 @@ export default {
       .intro {
         padding-top: 15px;
         margin-top: 0px;
-        height: 450px;
-        overflow-y: auto;
         border-bottom: none;
         font-size: 16px;
         /deep/p {

web/src/views/tab4/tab4-5.vue

@@ -1,17 +1,12 @@
 <template>
   <div class="tab4-5">
-    <div class="top">
       <div class="search" @keyup.enter="mySearch">
         <el-input
-          placeholder="请输入姓名或学籍号"
+          placeholder="姓名/学籍号"
           suffix-icon="el-icon-search"
           v-model="formData.searchKey"
         >
         </el-input>
-        <span class="btn" @click="mySearch">
-          <i class="el-icon-search"></i>&nbsp; 查 询</span
-        >
-      </div>
     </div>
     <!-- 内容 -->
     <div class="conten conNull" v-if="baseTxt && myArr.length === 0">
@@ -139,6 +134,7 @@ export default {
   color: #b9412e !important;
 }
 .tab4-5 {
+  position: relative;
   /*修改提示文字的颜色*/
   /deep/input::-webkit-input-placeholder {
     /* WebKit browsers */
@@ -157,54 +153,63 @@ export default {
     color: #b9412e;
   }
   // position: relative;
+  padding: 30px 200px;
+  display: flex;
   width: 100%;
-  height: 750px;
-  min-width: 1500px;
+  height: 620px;
   color: black;
-  .top {
-    height: 100px;
-    position: relative;
-    width: 100%;
-    text-align: center;
-    color: #b9412e;
-    font-size: 26px;
-    font-weight: 700;
-    .search {
-      /deep/.el-input__inner {
-        border-radius: 40px;
-        border: 1px solid #b9412e;
-      }
-      width: 500px;
-      left: 50%;
-      transform: translateX(-50%);
-      bottom: 0px;
-      position: absolute;
-      .btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #fff;
-        z-index: 999;
-        background-color: #b9412e;
-        border-radius: 40px;
-        cursor: pointer;
-        position: absolute;
-        right: -20px;
-        top: 3px;
-        height: 40px;
-        width: 80px;
-        /deep/.el-icon-search {
-          color: #fff;
-          font-weight: 400;
-          font-size: 16px;
-        }
-      }
+  .search {
+    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;
+    top: -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: 50px;
+      width: 50px;
+      border-radius: 50%;
+      background-color: transparent;
+    
+  }
   }
   .conten {
     margin-top: 50px;
-    min-width: 1556px;
-    height: 600px;
+    height: 550px;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;