CSS样式美化

QMPlusVuePage/src/style/main.scss

@@ -530,3 +530,187 @@ ol,
 li {
     list-style-type: none;
 }
+
+
+// navbar
+.el-scrollbar {
+    .el-scrollbar__view {
+      .el-menu-vertical{
+    background-color: #001529;
+      }
+      .el-menu-item:hover i,
+      .el-menu-item:hover span{
+        color:#fff;
+      }
+      li{
+         background-color: #001529;
+        
+        ul{
+          .el-menu-item{
+             background-color: #000408;
+             height: 44px;
+             line-height: 44px;
+          }
+         
+          .is-active{
+           background-color:#1890ff;
+         }
+        }
+      }
+      .el-submenu__title:hover{
+         background-color: #001529;
+      }
+      .el-submenu__title:hover i,
+      .el-submenu__title:hover span{
+        color:#fff;
+      }
+
+      .el-menu--inline{
+          border-left: 5px solid #2c3b41;
+      }
+    }
+  }
+
+//   layout
+    .layout-cont{
+        .main-cont{
+            &.el-main {
+                background-color: #ecf0f5;
+                padding: 0;
+            }
+            .breadcrumb{
+                background-color: #fff;
+                padding: 0 0 15px 15px;
+            }
+        }
+    }
+
+    .admin-box {
+        padding: 15px 20px;
+        .el-button{
+            padding: 7px 10px;
+        }
+        .el-input__inner{
+            height: 30px;
+            line-height: 30px;
+        }
+        .el-input__icon{
+            line-height: 30px;
+        }
+    }
+    .button-box{
+        background: #fff;
+        border: 1px solid #ebeef5;
+        border-bottom: none;
+
+    }
+    
+    .search-term{
+        background: #fff;
+        padding: 0 15px;
+        border-left: 1px solid #ebeef5;
+        border-right: 1px solid #ebeef5;
+    }
+       
+
+
+// table
+.has-gutter{
+    tr{
+        
+        th{
+            background-color: #fafafa;
+        }
+    }
+}
+.el-table--striped{
+    .el-table__body{
+        tr.el-table__row--striped{
+            td{
+                background: #fff!important;
+            }
+        }
+    }
+}  
+.el-table th, .el-table tr{
+    background-color: #fafafa;
+}
+.el-pagination{
+    .btn-prev,
+    .btn-next{
+        border: 1px solid #ddd;
+        border-radius: 4px;
+    }
+    .el-pager{
+        
+        
+        li{
+            color: #666;
+            font-size: 12px;
+            margin: 0 5px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+    } 
+}
+
+
+
+// el-form
+.el-form{
+    background-color: #fff;
+    padding: 10px 0;
+}
+.el-row{
+    padding: 10px 0;
+    .el-col>label{
+       
+            line-height: 30px;
+            text-align: right;
+            width: 80%;
+            padding-right: 15px;
+            display: inline-block;
+       
+    }
+    
+    .line{
+        line-height: 30px;
+        text-align: center;
+    }
+}
+// edit_container
+.edit_container{
+    background-color: #fff;
+    padding: 15px;
+    .el-button {
+        margin: 15px 0;
+    }
+}
+.edit{
+    background-color: #fff;
+    padding: 15px; 
+    .el-button {
+        margin: 15px 0;
+    }
+}
+// upload-demo
+.upload-demo,
+.upload{
+    background-color: #fff;
+    padding: 15px; 
+    .el-upload-list__item-status-label{
+        right: 0;
+        left: 120px;
+    }
+    .el-upload__tip{
+        margin: 10px 0;
+       }
+}
+
+// system
+.system{
+    padding: 15px;
+    .el-input__inner{
+        width: 80%;
+    }
+}

QMPlusVuePage/src/view/example/form/form.vue

@@ -1,7 +1,84 @@
 <template>
   <div>
     <el-form :model="form" label-width="80px" ref="form">
-      <el-form-item label="活动名称">
+      <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-row>
+      <el-row>
+        <el-col  :span="3"><label for="">活动区域</label></el-col>
+        <el-col  :span="10">
+           <el-select placeholder="请选择活动区域" v-model="form.region">
+            <el-option label="上海" value="shanghai"></el-option>
+            <el-option label="北京" value="beijing"></el-option>
+           </el-select>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col  :span="3"><label for="">活动时间</label></el-col>
+        <el-col  :span="10">
+           <el-col :span="11">
+          <el-date-picker placeholder="选择日期" style="width: 100%;" type="date" v-model="form.date1"></el-date-picker>
+        </el-col>
+        <el-col :span="2" class="line">——</el-col>
+        <el-col :span="11">
+          <el-time-picker placeholder="选择时间" style="width: 100%;" v-model="form.date2"></el-time-picker>
+        </el-col>
+        </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-row>
+      <el-row>
+        <el-col  :span="3"><label for="">活动性质</label></el-col>
+        <el-col  :span="10">
+          <el-checkbox-group v-model="form.type">
+            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
+            <el-checkbox label="地推活动" name="type"></el-checkbox>
+            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
+            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
+          </el-checkbox-group>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col  :span="3"><label for="">特殊资源</label></el-col>
+        <el-col  :span="10">
+          <el-radio-group v-model="form.resource">
+            <el-radio label="线上品牌商赞助"></el-radio>
+            <el-radio label="线下场地免费"></el-radio>
+          </el-radio-group>
+        </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-row>
+      <el-row>
+        <el-col  :span="3"><label for="">穿梭框</label></el-col>
+        <el-col  :span="20">
+          <el-transfer
+            :data="data"
+            :filter-method="filterMethod"
+            filter-placeholder="请输入城市拼音"
+            filterable
+            v-model="value"
+          ></el-transfer>
+        </el-col>
+      </el-row>
+      <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-row>
+      <el-row type="flex" justify="center">
+        <el-col :span="13">
+          <el-button @click="onSubmit" type="primary">立即创建</el-button>
+          <el-button>取消</el-button>
+        </el-col>
+        
+      </el-row>
+
+      <!-- <el-form-item label="活动名称">
         <el-input v-model="form.name"></el-input>
       </el-form-item>
       <el-form-item>
@@ -51,7 +128,7 @@
       <el-form-item>
         <el-button @click="onSubmit" type="primary">立即创建</el-button>
         <el-button>取消</el-button>
-      </el-form-item>
+      </el-form-item> -->
     </el-form>
   </div>
 </template>

QMPlusVuePage/src/view/example/rte/rte.vue

@@ -11,7 +11,7 @@
       ></quill-editor>
       <el-button  plain @click="saveHtml">保存</el-button>
     </div>
-    <div>
+    <div class="edit">
       <mavon-editor v-model="model.content"></mavon-editor>
       <el-button type="primary" size="small" @click="submit">发表</el-button>
     </div>
@@ -47,7 +47,3 @@ export default {
   }
 }
 </script>
-
-<style>
-
-</style>

QMPlusVuePage/src/view/example/upload/upload.vue

@@ -1,5 +1,6 @@
 <template>
   <div v-loading.fullscreen.lock="fullscreenLoading">
+    <div class="upload">
     <el-upload
       :action="`${path}/fileUploadAndDownload/upload`"
       :before-upload="checkFile"
@@ -50,6 +51,7 @@
       layout="total, sizes, prev, pager, next, jumper"
     ></el-pagination>
     </div>
+  </div>
 </template>
    
 <script>

QMPlusVuePage/src/view/layout/aside/index.vue

@@ -8,7 +8,6 @@
         :default-active="active"
         @select="selectMenuItem"
         active-text-color="#fff"
-        background-color="#0F3D5F"
         text-color="rgb(191, 203, 217)"
         unique-opened
       >

QMPlusVuePage/src/view/layout/index.vue

@@ -122,14 +122,14 @@ $mainHight: 100vh;
   .main-cont {
     .breadcrumb {
       line-height: 24px;
-      padding: 6px;
-      border-bottom: 1px solid #eee;
+      // padding: 6px;
+      // border-bottom: 1px solid #eee;
       margin-bottom: 6px;
     }
     &.el-main {
       overflow: auto;
-      padding: 0px 10px;
-      background: #fff;
+      // padding: 0px 10px;
+      // background: #fff;
     }
     height: $mainHight !important;
     overflow: visible;

QMPlusVuePage/src/view/superAdmin/authority/authority.vue

@@ -11,9 +11,10 @@
             stripe
             :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
         <el-table-column label="id" min-width="180" prop="ID"></el-table-column>
+        
         <el-table-column label="角色id" min-width="180" prop="authorityId"></el-table-column>
         <el-table-column label="角色名称" min-width="180" prop="authorityName"></el-table-column>
-        <el-table-column fixed="right" label="操作" width="500">
+        <el-table-column fixed="right" label="操作" width="500" :style="{ background:red , color:red}" >
             <template slot-scope="scope">
                 <el-button @click="opdendrawer(scope.row)" size="small" type="text">设置权限</el-button>
                 <el-button @click="deleteAuth(scope.row)" size="small" type="text">删除角色</el-button>

QMPlusVuePage/src/view/superAdmin/system/system.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form :model="config" label-width="100px" ref="form">
+    <el-form :model="config" label-width="100px" ref="form" class="system">
       <h2>系统配置</h2>
       <el-form-item label="多点登录拦截">
         <el-checkbox v-model="config.system.useMultipoint">开启</el-checkbox>