初步完成静态首页

web/src/components/welcome/index.vue

@@ -8,15 +8,6 @@
       <span class="txt">进入线上展厅</span>
       <span>主办方：主办方名称</span>
       </div>
-      <!-- 点击跳转 -->
-      <a class="skip"></a>
-      <a class="skip skip2"></a>
-      <a class="skip skip3"></a>
-      <a class="skip skip4"></a>
-      <a class="skip skip5"></a>
-      <a class="skip skip6"></a>
-      <a class="skip skip7"></a>
-      <a class="skip skip8"></a>
   </div>
 </template>
 
@@ -77,46 +68,6 @@ export default {
       color: #AC3334;
     }
   }
-  .skip{
-    position: absolute;
-    width: 150px;
-    height: 100px;
-    background-color: rosybrown;
-    left: 17vw;
-    top: 30vh;
-  }
-  .skip2{
-    left: 33vw;
-  }
-  .skip3{
-    width: 100px;
-    top:44vh;
-  }
-  .skip4{
-    width: 100px;
-    top:44vh;
-    left: 25vw;
-  }
-  .skip5 {
-    width: 100px;
-    top:44vh;
-    left: 34vw;
-  }
-  .skip6 {
-    width: 100px;
-    top:57vh;
-  }
-  .skip7 {
-    width: 100px;
-    top:57vh;
-    left: 25vw;
-  }
-  .skip8 {
-    left: 34vw;
-    width: 100px;
-    top:57vh;
-  }
-  
 }
 
 

web/src/views/gui/menu.vue

@@ -262,12 +262,25 @@
         </div>
       </div>
     </div>
+    <!-- 中间名字 -->
+    <div class="centenName">珠海高新区中共党史学习教育园地线上展厅</div>
     <!-- 右侧菜单栏 -->
-    <div class="rightTab">
-      <div>
-        <img src="" alt="">
+    <div class="rightTab" v-if="!isMobile">
+      <div :title="item.name" v-for="(item,index) in rightTab" :key="index" @click="open(index)">
+        <img :src="require('@/assets/tab/ac' + item.img)" v-if="item.isShow">
+        <img :src="require('@/assets/tab/' + item.img)" v-else>
       </div>
     </div>
+    <!-- 菜单栏-手机 -->
+    <div v-else class="shouji" @click="isShowMo=!isShowMo">
+      <img src="@/assets/tab/shouji.png" alt="">
+      <ul v-show="isShowMo">
+        <li v-for="(item,index) in rightTabMo" :key="index">
+          <img :src="require('@/assets/tab/' + item.img)" alt="">
+          <span v-html="item.name"></span>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -277,6 +290,21 @@ export default {
   data() {
     return {
       isGuide: true,
+      rightTab:[
+        {name:'党历路线',img:'tab1.png',isShow:false},
+        {name:'党历问答',img:'tab2.png',isShow:false},
+        {name:'打 卡',img:'tab3.png',isShow:false},
+        {name:'留 言 板',img:'tab4.png',isShow:false},
+        {name:'分 享',img:'tab5.png',isShow:false},
+      ],
+      rightTabMo:[
+        {name:'党历路线',img:'tab1.png',isShowMo:false},
+        {name:'党历问答',img:'tab2.png',isShowMo:false},
+        {name:'留&nbsp;言&nbsp;板',img:'tab4.png',isShowMo:false},
+        {name:'打&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;卡',img:'tab3.png',isShowMo:false},
+        {name:'分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;享',img:'tab5.png',isShowMo:false},
+      ],
+      isShowMo:false,
     };
   },
   computed: {},
@@ -284,7 +312,13 @@ export default {
      
   },
   methods: {
-    
+    //点击右侧tab栏
+    open(index){
+      this.rightTab.forEach((v,i)=>{
+        if(i===index) v.isShow=true
+        else v.isShow=false
+      })
+    },
     switchBGM() {
       if ($("#volume img")[0].src.indexOf("on.png") > -1) {
         window.manage.switchBgmState(true);
@@ -297,6 +331,49 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.shouji{
+  width: 30px;
+  height: 30px;
+  position: fixed;
+  top: 17px;
+  right: 5px;
+  img{
+    width: 30px;
+    height: 30px;
+  }
+  ul {
+    position: fixed;
+    top: 55px;
+    right: 5px;
+    width: 108px;
+    height: 175px;
+    background-color: rgba(0,0,0,.5);
+    li {
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      width: 100%;
+      height: 20%;
+      img {
+        margin:0 10px ;
+        width: 20px;
+        height: 20px;
+      }
+
+    }
+  }
+}
+.centenName{
+  padding: 10px 40px;
+  border-radius: 45px;
+  background-color: rgba(0,0,0,.5);
+  position: fixed;
+  top: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 20px;
+  color: #fff;
+}
 .rightTab{
   position: fixed;
   right: 0;
@@ -305,6 +382,18 @@ export default {
   width: 110px;
   height: 465px;
   background-color: rgba(0,0,0,.5);
+  &>div {
+    cursor: pointer;
+    width: 100%;
+    height: 20%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &>img{
+      width: 45px;
+      height: 45px;
+    }
+  }
 }
 // 右侧菜单栏
 @wh: 22px;
@@ -381,8 +470,16 @@ export default {
     }
   }
 }
-
+@media only screen and (max-width: 900px) {
+  .centenName{
+    text-align: center;
+    font-size:14px;
+    width: 78%;
+    padding: 8px;
+  }
+}
 @media only screen and (max-width: 487px) {
+
   #myMoMu{
   display: block !important;
 }
@@ -390,7 +487,7 @@ export default {
   margin-left: 12px;
 }
 .viewContainer{
-  background-color: rgba(0,0,0,.7);
+  background-color: rgba(0,0,0,.5);
   padding: 15px 0 10px;
   border-radius: 50px;
 }
@@ -447,4 +544,10 @@ export default {
   }
   
 }
+@media only screen and (max-width: 360px) {
+    .centenName{
+    left:45%;
+    font-size:12px;
+  }
+}
 </style>