移动端优化

src/layouts/header/index.vue

@@ -30,28 +30,31 @@
       </div>
     </template>
     <!-- 手机端 -->
-    <template v-else>
-      <i class="rightBox"
+    <div v-else
+         class="mobile-tools">
+      <i class="menu-icon"
          :class="modelType ? 'el-icon-s-fold': 'el-icon-s-unfold' "
-         @click="updateModelType"></i>
+         @click.stop="updateModelType"></i>
       <div class="contentBox"
            v-show="modelType">
         <navbar ref="nav"
                 :isHome.sync="isHome"
                 @updateModelType="updateType"></navbar>
       </div>
-
-    </template>
+      <i class="login el-icon-user-solid"
+         @click="toLogin"></i>
+    </div>
 
     <el-dialog title=""
                :visible.sync="qrcodeVisible"
-               width="500px"
+               fullscreen
                center
                :top="qrcodeTop"
                append-to-body
                custom-class="qrcode-dia">
       <div>
         <img width="100%"
+             style="height: 100vh;object-fit: cover;"
              src="@/assets/images/occupationlab.png"
              alt="">
       </div>
@@ -109,6 +112,10 @@ export default {
     this.qrcodeTop = (height > 0 ? height : 0) + 'px'
     this.setKeyword('')
     window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
+    document.body.addEventListener('click', e => {
+      e.stopPropagation()
+      this.modelType = false
+    })
   },
   methods: {
     ...mapMutations('content', [
@@ -241,6 +248,21 @@ $height: 90px;
     .search {
         margin-right: 43px;
     }
+    .mobile-tools {
+        display: inline-flex;
+        align-items: center;
+        .login {
+            font-size: 1.5rem;
+            color: #c1c1c1;
+            cursor: pointer;
+        }
+    }
+    .menu-icon {
+        margin-right: 10px;
+        font-size: 1.8rem;
+        color: #c1c1c1;
+        cursor: pointer;
+    }
 }
 .search-wrap {
     position: absolute;
@@ -278,13 +300,6 @@ $height: 90px;
         font-size: 1rem;
     }
 }
-.rightBox {
-    position: absolute;
-    right: 10px;
-    top: 2rem;
-    font-size: 2rem;
-    color: #c1c1c1;
-}
 .contentBox {
     width: 100%;
     position: absolute;
@@ -295,19 +310,6 @@ $height: 90px;
     max-height: 30rem;
     overflow-y: scroll;
 }
-.searchBox,
-.languageBox {
-    padding-left: 20px;
-    height: 56px;
-    line-height: 56px;
-}
-.modelBox {
-    position: relative;
-    padding-bottom: 20px;
-    .search-wrap {
-        top: 0;
-    }
-}
 /deep/.qrcode-dia {
     .el-dialog__header,
     .el-dialog__body {
@@ -336,14 +338,6 @@ $height: 90px;
         color: black !important;
         background-color: #fff;
     }
-    .contentBox {
-        .searchBox,
-        .languageBox {
-            padding-left: 20px;
-            height: 40px;
-            line-height: 40px;
-        }
-    }
     .search-wrap {
         right: 10px;
         top: 0;

src/layouts/navbar/index.vue

@@ -27,14 +27,13 @@
 <script>
 import menuTree from '@/components/menuTree'
 import mixins from '@/mixins/article'
-import { mapState, mapMutations, mapGetters } from 'vuex'
+import { mapMutations, mapGetters } from 'vuex'
 import Setting from '@/setting'
 export default {
-  props: ['isHome', 'isEstate', 'isIasf'],
+  props: ['isEstate', 'isIasf'],
   mixins: [mixins],
   data () {
     return {
-      lastHome: true,
       active: this.$route.query.id,
       menus: [],
       bgColor: '#fff',
@@ -66,18 +65,12 @@ export default {
         this.getColumn()
         this.setSite(siteId)
       }
-      this.handleColor()
-    },
-    isHome () {
-      this.handleColor()
     },
     getNavSum () {
       this.getColumn()
     }
   },
   mounted () {
-    this.lastHome = this.isHome
-    this.handleColor()
     this.getColumn()
   },
   methods: {
@@ -127,20 +120,6 @@ export default {
         }
       }).catch(err => { })
     },
-    // 改变菜单颜色
-    handleColor () {
-      // const home = this.isHome
-      // if (this.lastHome !== home) this.showMenu = false
-      // this.bgColor = home ? 'transparent' : '#fff'
-      // this.textColor = home ? '#f9f9f9' : '#333'
-      // this.lastHome !== home && this.$nextTick(() => {
-      //   setTimeout(() => {
-      //     this.showMenu = true
-      //   }, 200)
-      // })
-      // this.lastHome = home
-      // this.menuRefresh++
-    },
     // 获取点击菜单的路径
     getPath (data, id) {
       for (const e of data) {

src/pages/aboutUs/index.vue

@@ -257,8 +257,8 @@
             <div class="text">
               <p class="title">售前咨询</p>
               <p class="tel-num"
-                 style="margin-bottom: 5px">郭老师</p>
-              <p class="tel-num">17671782660</p>
+                 style="margin-bottom: 5px">金老师</p>
+              <p class="tel-num">15218726836</p>
             </div>
           </div>
           <div class="line">

src/pages/column/index.vue

@@ -913,6 +913,9 @@ export default {
         width: 83%;
         &:only-child {
             width: 100%;
+            .detail:only-child {
+                max-width: none;
+            }
         }
     }
 
@@ -1325,8 +1328,10 @@ export default {
 }
 .detail {
     flex: 1;
+    max-width: 77%;
     padding: 10px 15px;
     background-color: #fff;
+    overflow: auto;
     h2 {
         margin-bottom: 1rem;
         font-size: 1.9rem;

src/pages/index/show/index.vue

@@ -1,13 +1,16 @@
 <template>
   <div class="wrap">
-    <el-card shadow="hover"
+    <!-- <el-card shadow="hover"
              class="m-b-20">
       <div class="flex-between">
         <el-page-header @back="$router.back()"
                         :content="form.mall.productName"></el-page-header>
       </div>
-    </el-card>
+    </el-card> -->
+
     <div class="inner">
+      <Breadcrumb ref="breadcrumb"
+                  :data.sync="routes" />
       <div class="top">
         <el-carousel class="pics"
                      :interval="6000"
@@ -209,10 +212,12 @@
 <script>
 import Util from "@/libs/util"
 import Setting from "@/setting"
+import Breadcrumb from '@/components/breadcrumb'
 export default {
   data () {
     return {
       id: this.$route.query.id,
+      routes: {},
       curTab: 0,
       tabs: [
         {
@@ -236,6 +241,9 @@ export default {
       qrcodeTop: '100px'
     };
   },
+  components: {
+    Breadcrumb,
+  },
   computed: {
     // 是否没关联产品或者产品类型是数据前瞻，并且设置了链接
     withLink () {
@@ -294,6 +302,19 @@ export default {
           e.interfaceDiagrams = pics
         }
         this.form = e
+        this.routes = [
+          {
+            name: '职站商城',
+            path: '/index',
+            query: {
+              id: 13,
+              siteId: 1
+            }
+          },
+          {
+            name: e.mall.productName
+          }
+        ]
         this.chapterList = ''
         e.mall.associatedProduct && this.getChapter()
         this.$nextTick(() => {
@@ -520,6 +541,10 @@ export default {
             span {
                 font-family: PingFangSC-Regular !important;
             }
+            img {
+                max-width: 100%;
+                object-fit: cover;
+            }
         }
         .chapters {
             margin-top: 16px;
@@ -584,6 +609,7 @@ export default {
                 width: 100%;
                 height: 140px;
                 transition: 0.3s;
+                object-fit: cover;
             }
             .my-school {
                 position: absolute;
@@ -688,4 +714,42 @@ export default {
         color: #fff;
     }
 }
+@media (max-width: 1200px) {
+    .wrap {
+        .inner {
+            width: 100%;
+        }
+        .top {
+            flex-direction: column;
+            .pics {
+                width: 100%;
+                margin-bottom: 20px;
+            }
+            .el-image__preview {
+                object-fit: cover;
+            }
+            .right {
+                width: 100%;
+            }
+        }
+        .course {
+            flex-direction: column;
+            .detail {
+                width: 100%;
+                margin-bottom: 20px;
+            }
+            .products {
+                width: 100%;
+                margin-left: 0;
+            }
+        }
+    }
+}
+@media (max-width: 480px) {
+    .wrap {
+        .tab {
+            position: static;
+        }
+    }
+}
 </style>