update code

src/App.vue

@@ -7,7 +7,19 @@
 <script>
 export default {
   name: 'App',
+  data(){
+      return{
+      }
+      
+  },
   mounted() {
+      //可用于设置自适应屏幕，根据获得的可视宽度（兼容性）判断是否显示
+		// let w = document.documentElement.offsetWidth || document.body.offsetWidth;
+        // console.log("this.$isPhone = true"+w)
+		// if(w < 1000){
+		// 	this.$isPhone = true
+		// }
+        // console.log("this.$isPhone ="+this.$isPhone)
   },
   metaInfo: {
         title: "",

src/common.vue

@@ -0,0 +1,9 @@
+<script type="text/javascript">
+    // 定义一些公共的属性和方法
+    const isPhone = (document.documentElement.offsetWidth || 
+            document.body.offsetWidth) < 1000
+    // 暴露出这些属性和方法
+    export default {
+        isPhone
+    }
+</script>

src/index.less

@@ -1,14 +1,19 @@
 body {
   background: #F5F5F5 !important;
   font-size: 12px;
+  box-sizing: border-box;
 }
 
 @media screen and (min-width: 769px) {
+    .main-container {
+        width: 1200px;
+        margin: 0 auto;
+        min-height: 500px;
+      }
     }
     
     @media screen and (min-device-width: 641px) and (max-device-width: 768px) {
         .main-container {
-            width: 640px;
             margin: 0 auto;
             min-height: 500px;
           }
@@ -16,7 +21,6 @@ body {
     
     @media screen and (min-device-width: 401px) and (max-device-width: 640px) {
         .main-container {
-            width: 640px;
             margin: 0 auto;
             min-height: 500px;
           }
@@ -24,7 +28,6 @@ body {
     
     @media only screen and (max-device-width: 400px) {
         .main-container {
-            width: 640px;
             margin: 0 auto;
             min-height: 500px;
           }
@@ -32,11 +35,7 @@ body {
 
 
 
-.main-container {
-  width: 1200px;
-  margin: 0 auto;
-  min-height: 500px;
-}
+
 .main-container .breadcrumb{
   margin-bottom: 10px;
   font-size: 12px;
@@ -210,16 +209,7 @@ body {
   background-color: #d3dce6;
 }
 
-.logo {
-  font-size: 20px;
-  font-weight: 900;
-  position: absolute;
-  margin-right: 100px;
-  left: -200px;
-  top: 0px;
-  text-align: center;
-  line-height: 50px;
-}
+
 
 .logo a, .logo a:hover {
   color: #fff;

src/main.js

@@ -19,6 +19,9 @@ import 'element-ui/lib/theme-chalk/index.css';
 import Toast from 'vue2-toast'
 import Moment from 'moment'
 import Meta from "vue-meta";
+import global from './common.vue'
+
+
 Vue.use(Meta);
 
 
@@ -28,6 +31,7 @@ Vue.use(Meta);
 //   })
   Vue.prototype.$moment = Moment;//赋值使用 
   Vue.use(Toast)
+  Vue.prototype.COMMON = global
   
 // import ElementUI from 'element-ui'
 // import { ElementTiptapPlugin } from 'element-tiptap'

src/view/km.vue

@@ -207,6 +207,7 @@ export default {
 
       changeType(index){
           this.activeIndex = index;
+          this.isShow = false
           this.getChannelInformationsRequest(this.titleList[index].id)
           
       }

src/view/main/main.vue

@@ -1,11 +1,21 @@
 <template>
   <el-container>
     <el-header class="header linear">
-      <el-menu :default-active="activeIndex" mode="horizontal" style="position: relative;padding-left: 100px;width: 960px;text-align: center;margin: 0 auto;border: none;background: transparent;overflow: visible">
-        <div class="logo">
+      <el-menu :default-active="activeIndex" mode="horizontal" 
+      class="menu_class" v-if="!COMMON.isPhone"
+      >
+        <div class="logo" >
             <img src="../../assets/images/logo.jpg" style="width: 300px; height: 60px;">
         </div>
-        <el-menu-item index="1"><router-link to="/overview">首页</router-link></el-menu-item>
+        <el-menu-item
+            :key="index"
+            v-for="(item,index) in menuLists"
+            :route="item.path"
+            :index="item.index">
+            <router-link :to="item.path">{{item.text}}</router-link>
+            </el-menu-item>
+
+        <!-- <el-menu-item index="1"><router-link to="/overview">首页</router-link></el-menu-item>
         <el-menu-item index="2"><router-link to="/about">关于我们</router-link></el-menu-item>
         <el-menu-item index="3"><router-link to="/trode">行业动态</router-link></el-menu-item>
         <el-menu-item index="4"><router-link to="/vip-service">会员服务</router-link></el-menu-item>
@@ -17,17 +27,59 @@
         <el-menu-item index="9"><router-link to="/company">企业评估</router-link></el-menu-item>
         <el-menu-item index="10"><router-link to="/people">人力发展</router-link></el-menu-item>
         <el-menu-item index="11"><router-link to="/news">通知</router-link></el-menu-item>
-        <!-- <el-menu-item index="5"><router-link to="/news">新闻资讯</router-link></el-menu-item> -->
-        
+        <el-menu-item index="12"><router-link to="/connect">联系我们</router-link></el-menu-item> -->
 
-        <!-- <el-menu-item index="7"><router-link to="/trode">行业动态</router-link></el-menu-item>
+        <!-- <el-menu-item index="5"><router-link to="/news">新闻资讯</router-link></el-menu-item>
+        <el-menu-item index="7"><router-link to="/trode">行业动态</router-link></el-menu-item>
         <el-menu-item index="8"><router-link to="/exchange">合作交流</router-link></el-menu-item>
-        
-        <el-menu-item index="10"><router-link to="/member">会员产品</router-link></el-menu-item> -->
-        
-        
-        <el-menu-item index="12"><router-link to="/connect">联系我们</router-link></el-menu-item>
+        <el-menu-item index="10"><router-link to="/member">会员产品</router-link></el-menu-item>
+         -->
       </el-menu>
+
+      <div class="allSort" v-if="COMMON.isPhone">
+       <div class="sortMenu clearfix">
+        <ul class="sortMenu-ul" >
+          <li class="cell" v-for="(item, index) in menuLists" :key="index">
+            <router-link :to="item.path">{{item.text}}</router-link>
+          </li>
+        </ul>
+        
+      </div>
+    </div>
+
+      <!-- <el-menu v-if="COMMON.isPhone">
+          <div class="m_logo" >
+            <img src="../../assets/images/logo.jpg" style="width: 300px; height: 60px;">
+        </div>
+          <el-submenu
+            style="float:left;"
+            class="right-item"
+            v-if="Object.keys(menuLists).length === 0?false:true"
+            index="10"
+            >
+            <template slot="title">
+            <i class="el-icon-s-fold" style="font-size:28px;color:#2d2d2d;"></i>
+            </template>
+            <el-menu-item
+            :key="key"
+            style="background-color: #fff;"
+            v-for="(item,key) in menuLists"
+            :index="item.index"
+            :route="item.activeIndex">
+            <router-link :to="item.path">{{item.text}}</router-link>
+            </el-menu-item>
+            </el-submenu>
+      </el-menu> -->
+
+      <!-- <el-footer style="height: 100px;flex: 0 0 auto;width: 100%" class="linear" v-if="COMMON.isPhone">
+      <div class="footer">
+        <div class="footer-bar">
+          <span @click="clickItem(index)"
+            v-for="(item, index) in menuLists" :key="index" >{{item.text}}</span>
+        </div>
+      </div>
+    </el-footer> -->
+
     </el-header>
     <router-view/>
     <el-footer style="height: 100px;flex: 0 0 auto;width: 100%" class="linear">
@@ -79,18 +131,18 @@ export default {
       isFullscreen: false,
       height: 'height:'+((document.documentElement.clientHeight || document.body.clientHeight) - 50)+'px',
       menuLists: [
-          {text: '首页', path: '/overview'},
-          {text: '关于我们', path: '/about'},
-          {text: '行业动态', path: '/trode'},
-          {text: '会员服务', path: '/vip-service'},
-          {text: '合作交流', path: '/exchange'},
-          {text: '产业研究', path: '/policy'},
-          {text: '统计分析', path: '/data'},
-          {text: '知识产权', path: '/km'},
-          {text: '企业评估', path: '/company'},
-          {text: '人力发展', path: '/people'},
-          {text: '通知', path: '/news'},
-          {text: '联系我们', path: '/connect'},
+          {text: '首页', path: '/overview', index:'1'},
+          {text: '关于我们', path: '/about', index:'2'},
+          {text: '行业动态', path: '/trode', index:'3'},
+          {text: '会员服务', path: '/vip-service', index:'4'},
+          {text: '合作交流', path: '/exchange', index:'5'},
+          {text: '产业研究', path: '/policy', index:'6'},
+          {text: '统计分析', path: '/data', index:'7'},
+          {text: '知识产权', path: '/km', index:'8'},
+          {text: '企业评估', path: '/company', index:'9'},
+          {text: '人力发展', path: '/people', index:'10'},
+          {text: '通知', path: '/news', index:'11'},
+          {text: '联系我们', path: '/connect', index:'12'},
         ]
     }
   },
@@ -129,7 +181,7 @@ export default {
     ]),
     clickItem(index){
         this.activeIndex = index + 1 + ""
-        this.$router.push(this.menuList[index].path)
+        this.$router.push(this.menuLists[index].path)
         this.$forceUpdate()
     },
     turnToPage (route) {
@@ -244,7 +296,140 @@ export default {
     flex-direction: row;
     align-items: center;
     justify-content: center;
+    font-size: 20px;
+  font-weight: 900;
+  position: absolute;
+  margin-right: 100px;
+  left: -200px;
+  top: 0px;
+  text-align: center;
+  line-height: 50px;
+}
+.m_logo {
+  display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+  font-weight: 900;
+  position: absolute;
+  left: 50px;
+  top: 0px;
+  text-align: center;
+  line-height: 50px;
+}
+
+.el-submenu__title:hover{
+    background-color: transparent!important;
+}
+
+.menu_class{
+    padding-left: 100px!important;
+    width: 960px;
+    position: relative!important;
+    text-align: center;
+    margin: 0 auto!important;
+    border: none!important;
+    background-color: transparent!important;
+    overflow: visible
+}
+
+.el-menu{
+    background-color: transparent!important;
+    border-right: solid 1px transparent!important;
+    position: relative;
+    z-index: 10;
+}
+
+.sortMenu{
+  width: 100%; 
+  background-color:transparent; 
+  overflow-x: scroll; 
+  -webkit-overflow-x: scroll;
+}
+.sortMenu::-webkit-scrollbar{ 
+  width: 0; 
+  height: 0;   
+  background-color: #fff;  
+}
+.sortMenu-ul { 
+  min-width:500px; 
+  display: flex;
+  justify-content: flex-start;
 }
+.sortMenu .cell{ 
+  display: inline-block; 
+  font-size: 12px;
+  margin: 0px 1em;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  position: relative;
+      text-overflow: ellipsis;
+    word-break: keep-all;
+}
+.sortMenu .cell.special a{
+  color: #ff474c;
+}
+.sortMenu .cell.special:before {
+  content: '';
+  height: 2px;
+  width: 100%;
+  background: #ff474c;
+  position: absolute;
+  bottom: 0px;
+}
+.sortMenu .all{
+  right: 0;
+  top: 0;
+  height: 35px;
+  width: 35px;
+  position: absolute;
+  background: #fff;
+  z-index: 10;
+  display: flex;
+  justify-content:center;
+  align-items:center;
+}
+.sortMenu .all:before{
+  content: '';
+  height: 25px;
+  width: 1px;
+  position: absolute;
+  box-shadow: 1px 0px 1px #e0e0e0;
+  left: 0px;
+}
+.sortMenu .all img{
+  display: block;
+  width: 16px;
+}
+.sortMenu .pull-down{
+  position: absolute;
+  top: 40px;
+  height:auto;
+  width: 100%;
+  background: #fff;
+  z-index: 1;
+  border-top: 1px solid #f2f2f2;
+ 
+}
+.pull-down-sort{
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  align-content: space-around;
+  flex-wrap: wrap;
+  flex-direction: row
+}
+.pull-down-sort li{
+  float: left;
+  padding: .1rem
+}
+.pull-down-sort li a:hover{
+  color: #ff474c;
+}
+
 
 /* a{
     color: #fff!important;

src/view/overview.vue

@@ -385,6 +385,7 @@ export default {
   mounted() {
     // this.getData()
     this.getPositionRequest()
+    console.log("COMMON $isPhone:"+this.COMMON.isPhone)
   }
 }
 </script>

src/view/people.vue

@@ -99,6 +99,7 @@ export default {
 
       changeType(index){
           this.activeIndex = index;
+          this.isShow = false
           this.getChannelInformationsRequest(this.titleList[index].id)
       }
   },