手机端ui

web/src/App.vue

@@ -15,6 +15,7 @@ export default {
 // 引入初始化样式
 @import '@/style/main.scss';
 @import '@/style/base.scss';
+@import '@/style/mobile.scss';
 #app {
   background: #eee;
   height: 100vh;

web/src/style/basics.scss

@@ -32,3 +32,6 @@ $color-table-tbody:#595959;
 $color-table-thead:#262626;
 // dashboard
 $height-car:68px;
+// mobile
+$padding-xs: 5px;
+$margin-xs: 5px;

web/src/style/main.scss

@@ -1204,6 +1204,14 @@ $mainHight: 100vh;
     top: 0;
     box-sizing: border-box;
     z-index: 999;
+    >.el-row{
+        padding: 0;
+        .el-col-lg-14{
+            height: 60px;
+        }
+    }
+   
+
 }
 
 
@@ -1387,14 +1395,14 @@ $mainHight: 100vh;
 
     .car-left {
         height: $height-car;
-        width: 70%;
-        float: left;
+        // width: 70%;
+        // float: left;
     }
 
     .car-right {
         height: $height-car;
-        width: 29%;
-        float: left;
+        // width: 29%;
+        // float: left;
 
         .flow,
         .user-number,

web/src/style/mobile.scss

@@ -0,0 +1,89 @@
+
+@import '@/style/basics.scss';
+@media screen and (min-width: 320px)and (max-width: 750px){
+        .el-header{
+            padding: 0 $padding-xs;
+        }
+        .layout-cont {
+            .main-cont{
+                .breadcrumb{
+                    padding: 0 $padding-xs;
+                }
+            }
+        } 
+        .layout-cont{
+            .right-box{
+                margin-right: $margin-xs;
+            }
+        } 
+        .search-component{
+            width: 30px;
+        }
+        .screenfull{
+            width: 26px;
+            text-align: center;
+        }
+        .el-main{
+            .admin-box{
+                margin-left: 0;
+                margin-right: 0;
+            }
+            .big.admin-box{
+                padding: 0 0 15px 0;
+            }
+            .big {
+                .bottom {
+                    .chart-player{
+                        height: auto!important;
+                        margin-bottom: 15px;
+                    }
+                    .todoapp{
+                        background-color: #fff;
+                        padding-bottom: 10px;
+                    }
+                }
+            }
+        }
+       
+        .card .car-left,
+        .card .car-right{
+            width: 100%;
+            height: 100%;
+        }
+        .card{
+            padding-left: $padding-xs;
+            padding-right: $padding-xs;
+
+        }
+        .card {
+            .text{
+                width: 100%;
+                h4{
+                    white-space: break-spaces;
+                }
+            }
+        }
+        .shadow{
+            margin-left: 5px;
+            margin-right: 5px;
+            .grid-content{
+                margin-bottom: 10px;
+                padding: 0;
+            }
+        } 
+        .el-dialog{
+            width: 90%;
+        }
+        .el-transfer{
+            .el-transfer-panel{
+                width: 40%;
+                display: inline-block;
+            }
+            .el-transfer__buttons{
+                padding: 0 5px;
+                display: inline-block;
+            }
+           
+        }
+       
+}

web/src/view/dashboard/index.vue

@@ -1,179 +1,204 @@
 <template>
- <div class="big">
-         <div class="card">
-             <div class="car-left">
-                 <div>
-                    <span class="card-img"> <img :src="userInfo.headerImg"  alt="" > </span>   
-                    <div class="text"><h4>早安，管理员， 请开始您一天的工作吧！</h4>
-                        <p class="tips-text">
-                            <i class="el-icon-sunny el-icon"></i>
-                            <span>今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</span>
-                        </p>
-                    </div>
-                 </div>
-             </div>
-             <div class="car-right">
-                 <el-row>
-                    <el-col :span="8"><div class="car-item">
-                        <span class="flow"><i class="el-icon-s-grid"></i></span>
-                        <span>今日流量 </span>
-                        <b>13260</b>
-                        </div></el-col>
-                    <el-col :span="8"><div class="car-item">
-                       <span class="user-number">
-                         <i class="el-icon-s-custom "></i>
-                        </span>
-                        <span>总用户 </span>
-                        <b>48286</b>
-                        </div></el-col>
-                    <el-col :span="8"><div class="car-item ">
-                      <span class="feedback">
-                          <i class="el-icon-star-on"></i>
-                      </span> 
-                        <span>好评率 </span>
-                        <b>98%</b>
-                        </div></el-col>
-                 </el-row>
-             </div>
-         </div>
-         <div class="shadow">
-             <el-row :gutter="20">
-                 <el-col :span="4" v-for="(card,key) in toolCards" :key="key" @click.native="toTarget(card.name)">
-                      <el-card shadow="hover" class="grid-content">
-                        <i :class="card.icon" :style="{color:card.color}"></i>
-                        <p>{{card.label}}</p>  
-                    </el-card>  
-                 </el-col>
+  <div class="big">
+    <el-row>
+      <div class="card">
+        <el-col :xs="24" :lg="16" :md="16" >
+          <div class="car-left">
+            <el-row>
+              <div>
+                <el-col :xs="4" :md="3" :lg="3">
+                  <span class="card-img">
+                    <img :src="userInfo.headerImg" alt="" />
+                  </span>
+                </el-col>
+                <el-col :xs="20" :lg="12" :md="12">
+                  <div class="text">
+                    <h4>早安，管理员， 请开始您一天的工作吧！</h4>
+                    <p class="tips-text">
+                      <i class="el-icon-sunny el-icon"></i>
+                      <span>今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</span>
+                    </p>
+                  </div>
+                </el-col>
+              </div>
             </el-row>
-         </div>
-      <div class="bottom">
-         <el-row :gutter="32">
-             <el-col :xs="24" :sm="24" :lg="12">
-                 <div class="chart-player">
-                     <musicPlayer />
-                 </div>
-             </el-col>
-             <el-col :xs="24" :sm="24" :lg="12">
-                 <div  class="chart-player">
-                     <todo-list />
-                 </div>
-             </el-col>
-         </el-row>
-     </div>
- </div>
+          </div>
+        </el-col>
+        <el-col :xs="24" :lg='8' :md="8">
+          <div class="car-right">
+            <el-row>
+              <el-col :span="8"
+                ><div class="car-item">
+                  <span class="flow"><i class="el-icon-s-grid"></i></span>
+                  <span>今日流量 </span>
+                  <b>13260</b>
+                </div></el-col
+              >
+              <el-col :span="8"
+                ><div class="car-item">
+                  <span class="user-number">
+                    <i class="el-icon-s-custom"></i>
+                  </span>
+                  <span>总用户 </span>
+                  <b>48286</b>
+                </div></el-col
+              >
+              <el-col :span="8"
+                ><div class="car-item">
+                  <span class="feedback">
+                    <i class="el-icon-star-on"></i>
+                  </span>
+                  <span>好评率 </span>
+                  <b>98%</b>
+                </div></el-col
+              >
+            </el-row>
+          </div>
+        </el-col>
+      </div>
+    </el-row>
 
+    <div class="shadow">
+      <el-row :gutter="20">
+        <el-col
+          :span="4"
+          v-for="(card, key) in toolCards"
+          :key="key"
+          @click.native="toTarget(card.name)"
+          :xs="8"
+        >
+          <el-card shadow="hover" class="grid-content">
+            <i :class="card.icon" :style="{ color: card.color }"></i>
+            <p>{{ card.label }}</p>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="bottom">
+      <el-row :gutter="32">
+        <el-col :xs="24" :sm="24" :lg="12">
+          <div class="chart-player">
+            <musicPlayer />
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="12">
+          <div class="chart-player">
+            <todo-list />
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
 </template>
 
 <script>
-import musicPlayer from "./component/musicPlayer"
-import TodoList from "./component/todoList"
-import { mapGetters } from 'vuex'
+import musicPlayer from "./component/musicPlayer";
+import TodoList from "./component/todoList";
+import { mapGetters } from "vuex";
 export default {
-  name: 'Dashboard',
+  name: "Dashboard",
   data() {
     return {
-        toolCards:[
-            {
-                label:"用户管理",
-                icon:"el-icon el-icon-monitor",
-                name:"user",
-                color:"#ff9c6e"
-            },
-            {
-                label:"角色管理",
-                icon:"el-icon el-icon-setting",
-                name:"authority",
-                color:"#69c0ff"
-            },
-            {
-                label:"菜单管理",
-                icon:"el-icon el-icon-menu",
-                name:"menu",
-                color:"#b37feb"
-            },
-            {
-                label:"代码生成器",
-                icon:"el-icon el-icon-cpu",
-                name:"autoCode",
-                color:"#ffd666"
-            },
-            {
-                label:"表单生成器",
-                icon:"el-icon el-icon-document-checked",
-                name:"formCreate",
-                color:"#ff85c0"
-            },
-            {
-                label:"关于我们",
-                icon:"el-icon el-icon-user",
-                name:"about",
-                color:"#5cdbd3"
-            }
-
-        ]
-    }
+      toolCards: [
+        {
+          label: "用户管理",
+          icon: "el-icon el-icon-monitor",
+          name: "user",
+          color: "#ff9c6e",
+        },
+        {
+          label: "角色管理",
+          icon: "el-icon el-icon-setting",
+          name: "authority",
+          color: "#69c0ff",
+        },
+        {
+          label: "菜单管理",
+          icon: "el-icon el-icon-menu",
+          name: "menu",
+          color: "#b37feb",
+        },
+        {
+          label: "代码生成器",
+          icon: "el-icon el-icon-cpu",
+          name: "autoCode",
+          color: "#ffd666",
+        },
+        {
+          label: "表单生成器",
+          icon: "el-icon el-icon-document-checked",
+          name: "formCreate",
+          color: "#ff85c0",
+        },
+        {
+          label: "关于我们",
+          icon: "el-icon el-icon-user",
+          name: "about",
+          color: "#5cdbd3",
+        },
+      ],
+    };
   },
-   computed: {
-    ...mapGetters('user', ['userInfo'])
+  computed: {
+    ...mapGetters("user", ["userInfo"]),
   },
-    components:{
-        musicPlayer,  //音乐播放器
-        TodoList, //TodoList
-        // RaddarChart, //雷达图
-        // stackMap, //堆叠图
-        // Sunburst, //旭日图
-    },
-    methods:{
-      toTarget(name){
-          this.$router.push({name})
-      }
+  components: {
+    musicPlayer, //音乐播放器
+    TodoList, //TodoList
+    // RaddarChart, //雷达图
+    // stackMap, //堆叠图
+    // Sunburst, //旭日图
+  },
+  methods: {
+    toTarget(name) {
+      this.$router.push({ name });
     },
-}
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-    .big{
-        margin:100px 0 0 0;
-        padding-top: 0;
-        background-color: rgb(243,243,243);
-        padding-top: 15px;
-        .top{
-            width: 100%;
-            height: 360px;
-            margin-top: 20px;
-            overflow: hidden;
-            .chart-container{
-                position: relative;
-                width: 100%;
-                height: 100%;
-                padding: 20px;
-                background-color: #fff;
-            }
-        }
-        .mid{
-            width: 100%;
-            height: 380px;
-            .chart-wrapper {
-                height: 340px;
-                background: #fff;
-                padding: 16px 16px 0;
-                margin-bottom: 32px;
-            }
-        }
-        .bottom{
-            width: 100%;
-            height: 300px;
-            // margin: 20px 0;
-            .el-row{
-                margin-right: 4px !important;
-            }
-            .chart-player{
-                width: 100%;
-                height: 270px;
-                padding: 10px;
-                background-color: #fff;
-            }
-        }
+.big {
+  margin: 100px 0 0 0;
+  padding-top: 0;
+  background-color: rgb(243, 243, 243);
+  padding-top: 15px;
+  .top {
+    width: 100%;
+    height: 360px;
+    margin-top: 20px;
+    overflow: hidden;
+    .chart-container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      padding: 20px;
+      background-color: #fff;
     }
-
+  }
+  .mid {
+    width: 100%;
+    height: 380px;
+    .chart-wrapper {
+      height: 340px;
+      background: #fff;
+      padding: 16px 16px 0;
+      margin-bottom: 32px;
+    }
+  }
+  .bottom {
+    width: 100%;
+    height: 300px;
+    // margin: 20px 0;
+    .el-row {
+      margin-right: 4px !important;
+    }
+    .chart-player {
+      width: 100%;
+      height: 270px;
+      padding: 10px;
+      background-color: #fff;
+    }
+  }
+}
 </style>

web/src/view/example/form/form.vue

@@ -2,12 +2,12 @@
   <div>
     <el-form :model="form" label-width="80px" ref="form">
       <el-row>
-        <el-col  :span="3"><label for="">活动名称</label></el-col>
-        <el-col  :span="10"><el-input v-model="form.name"></el-input></el-col>
+        <el-col  :span="3" :xs="6"><label for="">活动名称</label></el-col>
+        <el-col  :span="10" :xs="14"><el-input v-model="form.name"></el-input></el-col>
       </el-row>
       <el-row>
-        <el-col  :span="3"><label for="">活动区域</label></el-col>
-        <el-col  :span="10">
+        <el-col  :span="3" :xs="6"><label for="">活动区域</label></el-col>
+        <el-col  :span="10" :xs="14">
            <el-select placeholder="请选择活动区域" v-model="form.region">
             <el-option label="上海" value="shanghai"></el-option>
             <el-option label="北京" value="beijing"></el-option>
@@ -15,8 +15,8 @@
         </el-col>
       </el-row>
       <el-row>
-        <el-col  :span="3"><label for="">活动时间</label></el-col>
-        <el-col  :span="10">
+        <el-col  :span="3" :xs="6"><label for="">活动时间</label></el-col>
+        <el-col  :span="10" :xs="18">
            <el-col :span="11">
           <el-date-picker placeholder="选择日期" style="width: 100%;" type="date" v-model="form.date1"></el-date-picker>
         </el-col>
@@ -27,12 +27,12 @@
         </el-col>
       </el-row>
       <el-row>
-        <el-col  :span="3"><label for="">即时配送</label></el-col>
-        <el-col  :span="10"><el-switch v-model="form.delivery"></el-switch></el-col>
+        <el-col  :span="3" :xs="6"><label for="">即时配送</label></el-col>
+        <el-col  :span="10" :xs="14"><el-switch v-model="form.delivery"></el-switch></el-col>
       </el-row>
       <el-row>
-        <el-col  :span="3"><label for="">活动性质</label></el-col>
-        <el-col  :span="10">
+        <el-col  :span="3" :xs="6"><label for="">活动性质</label></el-col>
+        <el-col  :span="10" :xs="14">
           <el-checkbox-group v-model="form.type">
             <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
             <el-checkbox label="地推活动" name="type"></el-checkbox>
@@ -42,8 +42,8 @@
         </el-col>
       </el-row>
       <el-row>
-        <el-col  :span="3"><label for="">特殊资源</label></el-col>
-        <el-col  :span="10">
+        <el-col  :span="3" :xs="6"><label for="">特殊资源</label></el-col>
+        <el-col  :span="10" :xs="14">
           <el-radio-group v-model="form.resource">
             <el-radio label="线上品牌商赞助"></el-radio>
             <el-radio label="线下场地免费"></el-radio>
@@ -51,12 +51,12 @@
         </el-col>
       </el-row>
       <el-row>
-        <el-col  :span="3"><label for="">活动形式</label></el-col>
-        <el-col  :span="10"><el-input type="textarea" v-model="form.desc"></el-input></el-col>
+        <el-col  :span="3" :xs="6"><label for="">活动形式</label></el-col>
+        <el-col  :span="10" :xs="14"><el-input type="textarea" v-model="form.desc"></el-input></el-col>
       </el-row>
       <el-row>
-        <el-col  :span="3"><label for="">穿梭框</label></el-col>
-        <el-col  :span="20">
+        <el-col  :span="3" :xs="6"><label for="">穿梭框</label></el-col>
+        <el-col  :span="20" :xs="24">
           <el-transfer
             :data="data"
             :filter-method="filterMethod"
@@ -67,7 +67,7 @@
         </el-col>
       </el-row>
       <el-row>
-        <el-col  :span="3"><label for="">活动时间</label></el-col>
+        <el-col  :span="3" :xs="6"><label for="">活动时间</label></el-col>
         <el-col  :span="10"><el-input v-model="form.name"></el-input></el-col>
       </el-row>
       <el-row type="flex" justify="center">

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 {