完成数字荣誉室静态

web/public/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport"
         content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <title>中国人民解放军陆军勤务学院</title>
+    <title>北京武警执勤第七支队数字史馆</title>
     <meta name="description" content="四维时代">
     <meta property="og:title" content="四维时代">
     <meta property="og:description" content="四维时代">

web/src/App.vue

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

web/src/assets/style/reset.css

@@ -0,0 +1,170 @@
+/* reset */
+html,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+p,
+blockquote,
+pre,
+hr,
+figure,
+table,
+caption,
+th,
+td,
+form,
+fieldset,
+legend,
+input,
+button,
+textarea,
+menu {
+  margin: 0;
+  padding: 0;
+}
+header,
+footer,
+section,
+article,
+aside,
+nav,
+hgroup,
+address,
+figure,
+figcaption,
+menu,
+details {
+  display: block;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+caption,
+th {
+  text-align: left;
+  font-weight: normal;
+}
+html,
+body,
+fieldset,
+img,
+iframe,
+abbr {
+  border: 0;
+}
+i,
+cite,
+em,
+var,
+address,
+dfn {
+  font-style: normal;
+}
+[hidefocus],
+summary {
+  outline: 0;
+}
+li {
+  list-style: none;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+small {
+  font-size: 100%;
+}
+sup,
+sub {
+  font-size: 83%;
+}
+pre,
+code,
+kbd,
+samp {
+  font-family: inherit;
+}
+q:before,
+q:after {
+  content: none;
+}
+textarea {
+  overflow: auto;
+  resize: none;
+}
+label,
+summary {
+  cursor: default;
+}
+a,
+button {
+  cursor: pointer;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+em,
+strong,
+b {
+  font-weight: bold;
+}
+del,
+ins,
+u,
+s,
+a,
+a:hover {
+  text-decoration: none;
+}
+body,
+textarea,
+input,
+button,
+select,
+keygen,
+legend {
+  font: 14px/1.14;
+  outline: 0;
+}
+body {
+  background: #fff;
+}
+* {
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none;
+}
+::-webkit-scrollbar {
+  width: 2px;
+  height: 8px;
+}
+::-webkit-scrollbar-thumb {
+  height: 50px;
+  background-color: #ddd;
+  -webkit-border-radius: 4px;
+  outline: 2px solid #edc2be;
+  outline-offset: -2px;
+}
+::-webkit-scrollbar-thumb:hover {
+  height: 50px;
+  background-color: #9f9f9f;
+  -webkit-border-radius: 4px;
+}

web/src/assets/style/reset.less

@@ -31,7 +31,7 @@ a{text-decoration: none;}
   height: 50px;
   background-color: #ddd;
   -webkit-border-radius: 4px;
-  outline: 2px solid #fff;
+  outline: 2px solid #edc2be;
   outline-offset: -2px;
 }
 

web/src/components/welcome/index.vue

@@ -22,7 +22,7 @@ export default {
 .welcome{
   width: 100%;
   height: 100%;
-  background: url('../../assets/img/indexBac.png');
+  background: url('../../assets/img/indexBac.jpg');
   background-size: 100% 100%;
   .btnR{
     font-size: 20px;

web/src/pages/Home.vue

@@ -7,33 +7,39 @@
     <!-- 加载初始页面 -->
     <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>北京武警执勤第七支队数字史馆</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:item.id===1}">{{ 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>
+    <!-- 下侧内容 -->
+    <div class="right_con">
+      <Router-view />
     </div>
 
     <!-- 主容器 -->
@@ -139,10 +145,13 @@ 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: "教育基地" },
+        { url: "tab5", id: 5, name: "荣誉榜" },
+        { url: "tab6", id: 6, name: "官兵互动" },
+        { url: "tab7", id: 7, name: "留言管理" },
       ],
 
       showWelcome: true,
@@ -191,7 +200,7 @@ export default {
       window.evt.initEvent("loadfinish", false, false);
       window.addEventListener("loadfinish", () => {
         this.loading = false;
-        document.title = "中国人民解放军陆军勤务学院";
+        document.title = "北京武警执勤第七支队数字史馆";
         this.getHotSpotList();
         window.player.on("openTips", () => {
           this.$showTips();
@@ -221,45 +230,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: 99999;
+    position: relative;
+    width: 100%;
+    height: 90px;
+    background-color: #b0111e;
+    .login {
+      margin-right: 100px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-left: 100px;
+      width: 220px;
+      height: 120px;
+      background: url("../assets/img/logoDI.png");
+      background-size: 100% 100%;
       & > img {
-        width: 100%;
+        width: 62px;
+        height: 62px;
+      }
+      & > p {
+        margin-top: 8px;
+        font-weight: 700;
+        color: #be1220;
+        font-size: 14px;
       }
     }
-    .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: 120px;
+        height: 30px;
+        line-height: 30px;
+        border-bottom: 1px solid #f2cd83;
+      }
       .tab {
-        cursor: pointer;
-        margin: 0 auto;
-        width: 91px;
-        & > img {
-          width: 100%;
+        padding-top: 13px;
+        height: 60px;
+        display: flex;
+        justify-content: space-around;
+        .tab_row {
+          cursor: pointer;
+          text-align: center;
+          font-size: 18px;
+          height: 60px;
+          &>div{
+            color: #fff;
+          }
+          .active{
+            color: #f2cd83;
+          }
+          & > img {
+            width: 70px;
+            height: 20px;
+          }
+          &:hover div{
+            color: #f2cd83;
+          }
         }
       }
     }
-    .bot_time {
-      text-align: center;
-      font-size: 14px;
-    }
   }
 }
 

web/src/views/home/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <div class="btnR" @click="goIndex">立即进入</div>
+    <div class="btnR" @click="goIndex">进入数字史馆</div>
   </div>
 </template>
 
@@ -45,20 +45,22 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
-  background: url("../../assets/img/indexBac.png");
+  background: url("../../assets/img/indexBac.jpg");
   background-size: 100% 100%;
   .btnR {
+    font-weight: 600;
+    color: #A17E3A;
     font-size: 20px;
-    border-radius: 8px;
     cursor: pointer;
-    background-color: #b9412e;
+    background: url('../../assets/img/btn.png');
+    background-size: 100% 100%;
     position: absolute;
     left: 50%;
     bottom: 80px;
     transform: translateX(-50%);
-    width: 188px;
-    height: 44px;
-    line-height: 44px;
+    width: 215px;
+    height: 58px;
+    line-height: 58px;
     text-align: center;
   }
 }

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>北京武警执勤第七支队数字史馆</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,13 @@ 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: "教育基地" },
+        { url: "tab5", id: 5, name: "荣誉榜" },
+        { url: "tab6", id: 6, name: "官兵互动" },
+        { url: "tab7", id: 7, name: "留言管理" },
       ],
     };
   },
@@ -57,7 +64,7 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    // 点击左侧tab栏
+    // 点击tab栏
     jump(url) {
       if (url === "tab1") url = "/index?m=1151";
       this.$router.replace(url).catch(() => {});
@@ -86,46 +93,77 @@ export default {
 <style lang='less' scoped>
 .layout {
   display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
   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: 99999;
+    position: relative;
+    width: 100%;
+    height: 90px;
+    background-color: #b0111e;
+    .login {
+      margin-right: 100px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-left: 100px;
+      width: 220px;
+      height: 120px;
+      background: url("../../assets/img/logoDI.png");
+      background-size: 100% 100%;
       & > img {
-        width: 100%;
+        width: 62px;
+        height: 62px;
+      }
+      & > p {
+        margin-top: 8px;
+        font-weight: 700;
+        color: #be1220;
+        font-size: 14px;
       }
     }
-    .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: 65px;
+        height: 30px;
+        line-height: 30px;
+        border-bottom: 1px solid #f2cd83;
+      }
       .tab {
-        cursor: pointer;
-        margin: 0 auto;
-        width: 91px;
-        & > img {
-          width: 100%;
+        padding-top: 13px;
+        height: 60px;
+        display: flex;
+        justify-content: space-around;
+        .tab_row {
+          cursor: pointer;
+          text-align: center;
+          font-size: 18px;
+          height: 60px;
+          & > div {
+            color: #fff;
+          }
+          .active {
+            color: #f2cd83;
+          }
+          & > img {
+            width: 70px;
+            height: 20px;
+          }
+          &:hover div{
+            color: #f2cd83;
+          }
         }
       }
     }
-    .bot_time {
-      text-align: center;
-      font-size: 14px;
-    }
   }
   .right_con {
     position: relative;
-    max-width: 1756px;
-    max-height: 973px;
     flex: 1;
   }
 }

web/src/views/tab2/index.vue

@@ -1,16 +1,28 @@
 <template>
   <div class="tab2">
-    tab2
+    <div class="conten">
+      <div class="nullShow" v-if="cut">
+        <i class="el-icon-arrow-left" @click="cut=false"></i>
+        <img src="../../assets/img/nullShow.png" alt="">
+        <p>内容装修中...</p>
+      </div>
+      <div class="row" v-else v-for="i in 20" :key="i" @click="cut=true">
+        <img src="../../assets/img/demo2.png" alt="" />
+        <p title='某某中队数字荣誉室'>某某中队数字荣誉室</p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'tab2',
+  name: "tab2",
   components: {},
-  data () {
+  data() {
     // 这里存放数据
-    return {}
+    return {
+      cut:false
+    };
   },
   // 监听属性 类似于data概念
   computed: {},
@@ -19,20 +31,77 @@ export default {
   // 方法集合
   methods: {},
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created() {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
-
-  },
-  beforeCreate () {}, // 生命周期 - 创建之前
-  beforeMount () {}, // 生命周期 - 挂载之前
-  beforeUpdate () {}, // 生命周期 - 更新之前
-  updated () {}, // 生命周期 - 更新之后
-  beforeDestroy () {}, // 生命周期 - 销毁之前
-  destroyed () {}, // 生命周期 - 销毁完成
-  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
-}
+  mounted() {},
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {}, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
+};
 </script>
 <style lang='less' scoped>
-
+.tab2 {
+  padding: 100px 75px 100px 150px;
+  width: 100%;
+  height: 100%;
+  background: url("../../assets/img/tabBg.png");
+  background-size: 100% 100%;
+  .conten {
+    position: relative;
+    flex-wrap: wrap;
+    display: flex;
+    padding-right: 75px;
+    width: 100%;
+    height: 640px;
+    overflow-y: auto;
+    .nullShow{
+      margin: 100px auto 0;
+      text-align: center;
+      font-size: 34px;
+      color: #B58989;
+      /deep/.el-icon-arrow-left{
+        cursor: pointer;
+        position: absolute;
+        left: 50px;
+        top: 0px;
+        font-size: 50px;
+      }
+    }
+    .row {
+      margin: 0 45px 45px 0;
+      padding-top: 10px;
+      text-align: center;
+      font-size: 18px;
+      color: #626260;
+      cursor: pointer;
+      width: 340px;
+      height: 224px;
+      background-color: #fff;
+      box-shadow: 1px 1px 2px 2px #ccc;
+      & > img {
+        object-fit: cover;
+        width: 320px;
+        height: 180px;
+      }
+      & > p {
+        padding: 0 10px;
+        margin-top: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      &:nth-of-type(4n){
+        margin-right: 0;
+      }
+      &:hover {
+        color: #fff;
+        background-color: #be1220;
+      }
+    }
+  }
+}
 </style>