up

houtai/src/utils/request.js

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

web/public/4dage/Model.html

@@ -28,7 +28,7 @@
     <script type="text/javascript" src="js/weixin.js"></script>
     <script>
          var number = getQueryVariable("m");
-       fdage.embed('http://192.168.0.245:8005'+number, { width: 800, height: 600, autoStart: true, fullFrame: true, pagePreset: false });
+       fdage.embed('http://192.168.0.135:8003'+number, { width: 800, height: 600, autoStart: true, fullFrame: true, pagePreset: false });
 
         var number = getQueryVariable("m");
         let pageNum = number.split("_")[1];

web/src/utils/api.js

@@ -1,4 +1,15 @@
 import axios from './request'
+// -----------------数字荣誉室----------------
+
+
+// -----------------文物史料信息库----------------
+// 获取模块列表
+export const moduleList = (module) => {
+  return axios({
+    url: `/web/moduleList/${module}`
+  })
+}
+
 // 获取文物史料信息库列表
 export const goodList = (data) => {
   return axios({
@@ -14,50 +25,19 @@ export const goodDetail = (id) => {
     url: `/web/goodDetail/${id}`
   })
 }
-// 学院宣传片列表
-export const videoList = (data) => {
-  return axios({
-    method: 'post',
-    url: '/web/videoList',
-    data
-  })
-}
-// 美丽校园列表列表
-export const imgList = (data) => {
-  return axios({
-    method: 'post',
-    url: '/web/imgList',
-    data
-  })
-}
-// 领导列表
-export const leaderList = (data) => {
-  return axios({
-    method: 'post',
-    url: '/web/leaderList',
-    data
-  })
-}
-// 领导列表
-export const studentList = (data) => {
+// 保存访问量
+export const webVisit = (type,id) => {
   return axios({
-    method: 'post',
-    url: '/web/studentList',
-    data
+    url: `/web/visit/${type}/${id}`,
   })
 }
-// 军歌列表
-export const musicList = (data) => {
+
+// -----------------教育基地----------------
+// 获取列表
+export const newsList = (data) => {
   return axios({
     method: 'post',
-    url: '/web/musicList',
+    url: '/web/newsList',
     data
   })
-}
-
-// 保存访问量
-export const webVisit = (type,id) => {
-  return axios({
-    url: `/web/visit/${type}/${id}`,
-  })
 }

web/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.135:8003', // 本地调试
+  // baseURL: 'http://192.168.0.245:8005', // 线上调试
+  // baseURL: '', // build
   timeout: 5000
 })
 // 请求拦截器

web/src/views/tab3/index.vue

@@ -2,33 +2,35 @@
 <template>
   <div class="tab3">
     <div class="left">
-      <ul>
+      <ul :style="{ width: `${220 * listData.length - 1}px` }">
         <li
-          :class="{ active: formData.type === item.type }"
-          v-for="item in listData"
+          v-for="(item, index) in listData"
           :key="item.id"
-          @click="cutTab(item)"
+          @click="cutTab(item, index)"
         >
-          <p v-if="formData.type === item.type">
-            ◆&emsp;{{ item.name }}&emsp;◆
+          <p
+            :title="item.name"
+            :class="{ active: formData.moduleId === item.id }"
+          >
+            {{ item.name }}
           </p>
-          <p v-else>{{ item.name }}</p>
-          <span> {{ item.biaoshi }} </span>
+          <span v-if="index !== listData.length - 1"> / </span>
         </li>
       </ul>
-      <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>
     <!-- 右侧内容 -->
     <!-- 没有数据时 -->
+    <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="hint" v-if="myArr.length === 0">暂 无 数 据</div>
+
     <div class="right" v-else>
       <div class="row" v-for="item in myArr" :key="item.id">
         <!-- 模型/视频 -->
@@ -36,13 +38,13 @@
           @click="goodClick(item)"
           :src="baseURL + item.thumb"
           alt=""
-          v-if="formData.type === 'model' || formData.type === 'video'"
-          :class="{ vidAc: formData.type === 'video' }"
+          v-if="item.type === 'model' || item.type === 'video'"
+          :class="{ vidAc: item.type === 'video' }"
         />
         <!-- 图库 -->
         <el-image
           @click="goodClick(item)"
-          v-else-if="formData.type === 'img'"
+          v-else-if="item.type === 'img'"
           style="width: 351px; height: 200px"
           :src="baseURL + item.thumb"
           :preview-src-list="srcList"
@@ -52,7 +54,7 @@
         <!-- 视频的鼠标移上去的遮照 -->
         <div
           class="videoSM"
-          v-if="formData.type === 'video'"
+          v-if="item.type === 'video'"
           @click="goodClick(item)"
         >
           <img src="../../assets/img/playMove.png" alt="" />
@@ -63,17 +65,17 @@
           class="listTxt"
           :title="item.name"
           :class="{
-            imgAc: formData.type === 'img',
-            vidAcTxt: formData.type === 'video',
+            imgAc: item.type === 'img',
+            vidAcTxt: item.type === 'video',
           }"
         >
           <img
             src="../../assets/img/play.png"
             alt=""
-            v-if="formData.type === 'video'"
+            v-if="item.type === 'video'"
           />
           {{ item.name }}
-          <div class="right_bac" v-if="formData.type === 'model'"></div>
+          <div class="right_bac" v-if="item.type === 'model'"></div>
         </div>
       </div>
       <!-- 分页 -->
@@ -97,8 +99,8 @@
         <div class="btnX el-icon-close" @click="modelShow = false"></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>
+          <img src="../../assets/img/tab3FullX.png" alt="" v-if="fullscreen" />
+          <img src="../../assets/img/tab3Full.png" alt="" v-else />
         </div>
       </div>
     </div>
@@ -119,7 +121,7 @@
 
 <script>
 import axios from "@/utils/request";
-import { goodList, goodDetail, webVisit } from "@/utils/api";
+import { goodList, goodDetail, webVisit, moduleList } from "@/utils/api";
 export default {
   name: "tab3",
   components: {},
@@ -131,15 +133,15 @@ export default {
       fullscreen: false,
       modelShow: false,
       listData: [
-        { biaoshi: "/", id: 1, name: "实物模型", type: "model" },
-        { biaoshi: "/", id: 2, name: "专题图库", type: "img" },
-        { biaoshi: "", id: 3, name: "视频档案", type: "video" },
+        { id: 1, name: "实物模型", type: "model" },
+        { id: 2, name: "专题图库", type: "img" },
+        { id: 3, name: "视频档案", type: "video" },
       ],
       formData: {
         pageNum: 1,
         pageSize: 8,
         searchKey: "",
-        type: "model",
+        moduleId: 1,
       },
       myArr: [],
       mySrc: "",
@@ -280,11 +282,18 @@ export default {
       // 记录访问量
       await webVisit("goods", item.id);
     },
-    cutTab(val) {
-      if (this.formData.type === val.type) return;
+    cutTab(val, index) {
+      if (this.formData.moduleId === val.id) return;
       this.formData.pageNum = 1;
-      this.formData.type = val.type;
+      this.formData.moduleId = val.id;
       this.goodList(this.formData);
+      // 滚动条
+      let dom = document.querySelector(".left");
+      let temp = Math.floor(this.listData.length / 2);
+      dom.scrollTo({
+        left: (index + 1) * 220 - 220 * temp,
+        behavior: "smooth",
+      });
     },
     mySearch() {
       this.formData.pageNum = 1;
@@ -295,19 +304,16 @@ export default {
       const res = await goodList(data);
       this.total = res.data.total;
       this.myArr = res.data.records;
-      // if (this.formData.type === 'img') {
-      //   this.myArr.forEach(v => {
-      //     this.srcList = [this.baseURL + v.thumb]
-      //   })
-      // }
-      // console.log(998, res)
     },
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created() {
+  async created() {
     // 获取服务器前缀地址
     this.baseURL = axios.defaults.baseURL;
     this.goodList(this.formData);
+    // 获取模块列表
+    let res = await moduleList("goods");
+    this.listData = res.data;
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
@@ -373,87 +379,71 @@ export default {
   display: flex;
   flex-direction: column;
   color: #3e3e3e;
+  .left::-webkit-scrollbar-thumb {
+    height: 50px;
+    background-color: #edc2be;
+    -webkit-border-radius: 4px;
+    outline: 2px solid #edc2be;
+    outline-offset: -2px;
+  }
+  .left::-webkit-scrollbar {
+    height: 0px;
+  }
+
   .left {
+    padding: 0 30px;
     position: relative;
     width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
     height: 200px;
     background: url("../../assets/img/tab3Tab.png");
     background-size: 100% 100%;
     ul {
-      padding-left: 40px;
+      margin: 0 auto;
       display: flex;
-      height: 100%;
       align-items: center;
-      justify-content: center;
+      height: 100%;
       li {
         display: flex;
-        justify-content: center;
         font-size: 20px;
         color: #fff;
-        width: 240px;
+        width: 200px;
         cursor: pointer;
+        margin-right: 20px;
         &:hover {
           color: #f2cd83;
         }
         & > span {
-          margin-left: 50px;
+          margin-left: 30px;
           color: #fff !important;
         }
         & > p {
+          padding: 0 20px 0 20px;
+          position: relative;
+          width: 200px;
           text-align: center;
-          width: 145px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .active {
+          color: #f2cd83;
+          &::before {
+            content: "◆";
+            position: absolute;
+            top: 50%;
+            right: 0px;
+            transform: translateY(-50%);
+          }
+          &::after {
+            content: "◆";
+            position: absolute;
+            top: 50%;
+            left: 0px;
+            transform: translateY(-50%);
+          }
         }
-      }
-      .active {
-        color: #f2cd83;
-      }
-    }
-    .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;
-      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: 50px;
-        width: 50px;
-        border-radius: 50%;
-        background-color: transparent;
       }
     }
   }
@@ -465,6 +455,56 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+    background: url("../../assets/img/tabBg.png");
+    background-size: 100% 100%;
+  }
+  .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: 175px;
+    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;
+    }
   }
   .right {
     background: url("../../assets/img/tabBg.png");
@@ -626,7 +666,7 @@ export default {
         right: 10px;
         bottom: 10px;
         color: #fff;
-        &>img{
+        & > img {
           width: 30px;
           height: 30px;
         }