手机端ui

web/src/view/layout/index.vue

@@ -16,18 +16,25 @@
             :style="{width: `calc(100% - ${isMobile?'0px':isCollapse?'54px':'220px'})`}"
             class="topfix"
           >
+          <el-row>
+            <!-- :xs="8" :sm="6" :md="4" :lg="3" :xl="1" -->
             <el-header class="header-cont">
-              <div @click="totalCollapse" class="menu-total">
-                <i class="el-icon-s-unfold" v-if="isCollapse"></i>
-                <i class="el-icon-s-fold" v-else></i>
-              </div>
-              <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
-                <el-breadcrumb-item
-                  :key="item.path"
-                  v-for="item in matched.slice(1,matched.length)"
-                >{{item.meta.title}}</el-breadcrumb-item>
-              </el-breadcrumb>
-              <div class="fl-right right-box">
+               <el-col :xs="2" :lg="1" :md="1" :sm="1" :xl="1">
+                  <div @click="totalCollapse" class="menu-total">
+                    <i class="el-icon-s-unfold" v-if="isCollapse"></i>
+                    <i class="el-icon-s-fold" v-else></i>
+                  </div>
+                </el-col>
+              <el-col :xs="10" :lg="14" :md='14' :sm="14" :xl="14">
+                 <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
+                  <el-breadcrumb-item
+                    :key="item.path"
+                    v-for="item in matched.slice(1,matched.length)"
+                  >{{item.meta.title}}</el-breadcrumb-item>
+                </el-breadcrumb>
+              </el-col>
+               <el-col :xs="12" :lg="9" :md="9" :sm="9" :xl="9">
+                 <div class="fl-right right-box">
                 <Search />
                 <Screenfull class="screenfull"></Screenfull>
                 <el-dropdown>
@@ -48,7 +55,10 @@
                   </el-dropdown-menu>
                 </el-dropdown>
               </div>
+               </el-col>
+
             </el-header>
+          </el-row>
             <!-- 当前面包屑用路由自动生成可根据需求修改 -->
             <!--
             :to="{ path: item.path }" 暂时注释不用-->
@@ -172,8 +182,9 @@ export default {
   }
 }
 </script>
-
 <style lang="scss">
+@import '@/style/mobile.scss';
+
 // $headerHigh: 52px;
 // $mainHight: 100vh;
 // .dropdown-group {