phone-menu

src/App.vue

@@ -11,6 +11,30 @@
             <router-link to="/news">新闻</router-link>
             <router-link to="/about">关于我们</router-link>
           </div>
+          <img
+            src=".\assets\menu.png"
+            alt="切换目录"
+            @click="aaa = !aaa"
+            class="phonemenu"
+            style="width:32px !important;height:18px !important;"
+          />
+          <div type="button" :class="{ showmenu: aaa, switching: true }" @click="aaa = !aaa">
+            <ul>
+              <li>
+                <router-link to="/"
+                  >首页<span class="sr-only">切换导航</span></router-link
+                >
+              </li>
+              <li>
+                <router-link to="/serve"
+                  >服务<span class="icon-bar"></span
+                ></router-link>
+              </li>
+              <li><router-link to="/teach">人才培养</router-link></li>
+              <li><router-link to="/news">新闻</router-link></li>
+              <li><router-link to="/about">关于我们</router-link></li>
+            </ul>
+          </div>
         </div>
       </div>
       <router-view />
@@ -64,16 +88,46 @@
     margin: auto 8.3% !important;
   }
 }
+
 @media only screen and (max-width: 661px) {
-  #nav-a{
+  #nav-a {
     display: none !important;
   }
+
+  .phonemenu {
+    display: block !important;
+  }
+}
+
+.phonemenu {
+  display: none;
+  position: absolute;
+  right: 0px;
+  z-index: 999
+}
+
+.showmenu {
+  display: none;
+}
+
+.switching {
+  position: absolute;
+  right: 19px;
+  top: 0px;
+  background-image: linear-gradient(-90deg, #30d5ff 0%, #749cf7 100%);
+  border-radius: 2%;
+  padding-top: 40px;
+}
+
+.switching li {
+  padding-bottom: 0px !important;
 }
 
 .liubai {
   width: 1200px;
   margin: 0 auto;
 }
+
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -127,3 +181,16 @@
   margin-bottom: 29px;
 }
 </style>
+
+<script>
+/* eslint-disable */
+
+export default {
+  name: "app",
+  data() {
+    return {
+      aaa: true
+    };
+  }
+};
+</script>

src/components/footer.vue

@@ -19,13 +19,12 @@
                             <p class="text-muted">地址：{{address}}</p>
                         </div>
                     </div>
-                    
                 </div>
             </div>
             <div class="bottom">
                 <h4>Copyright @ 芝麻开花科技有限公司  保留所有权利  京ICP备13040720号-8</h4>
             </div>
-        </div>   
+        </div>
     </div>
 </template>
 

src/views/About.vue

@@ -139,6 +139,14 @@ export default {
 };
 </script>
 <style scoped>
+@media only screen and (max-width: 479px) {
+  .about{
+    margin-top: 40px !important;
+  }
+}
+.about{
+    margin-top: 80px !important;
+  }
 @media screen and (max-width: 1970px) {
     .headline p {
         font-size: 28px!important;

src/views/News.vue

@@ -30,15 +30,15 @@
       </div>
     </div>
     <div class="listcontent">
-      <div v-for="(item,index) in listnews" :key="index">
+      <div v-for="(item, index) in listnews" :key="index">
         <div class="newslist">
           <div class="newslistdays">
             <p class="days">06-23</p>
             <p>2019</p>
           </div>
           <div class="eachnews">
-            <p>{{item.head}}</p>
-            <p class="newscontent">{{item.content}}</p>
+            <p>{{ item.head }}</p>
+            <p class="newscontent">{{ item.content }}</p>
           </div>
           <div>
             <p>MORE</p>
@@ -106,6 +106,14 @@ export default {
 };
 </script>
 <style scoped>
+@media only screen and (max-width: 479px) {
+  .news {
+    margin-top: 40px !important;
+  }
+}
+.news {
+  margin-top: 80px !important;
+}
 * {
   text-align: left;
 }

src/views/Serve.vue

@@ -181,6 +181,14 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+@media only screen and (max-width: 479px) {
+  .serve {
+    margin-top: 40px !important;
+  }
+}
+.serve {
+  margin-top: 80px !important;
+}
 /************************************整体样式********************************************/
 *{
     margin: 0px;

src/views/Teach.vue

@@ -94,9 +94,8 @@
         </div>
 
     </div>
-    <home-footer id="foot"></home-footer> 
-    
-</div>   
+    <home-footer id="foot"></home-footer>
+</div>
 </template>
 
 <script>