Browse Source

wanda-adm:feat >修改 表格样式

shaun-sheep 4 years ago
parent
commit
71af90ccd9

+ 3 - 1
src/components/public/adm-multi-table.vue

@@ -1,7 +1,9 @@
 <template>
     <el-table
         :data="tableData"
-        style="width: 100%">
+        style="width: 100%"
+        class="adm-multi-table"
+    >
         <el-table-column
             prop="date"
             label="编辑"

+ 7 - 7
src/layout/index.vue

@@ -1,12 +1,12 @@
 <template>
     <div :class="classObj" class="app-wrapper">
-        <div v-if="classObj.mobile && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-        <sidebar class="sidebar-container" />
-        <navbar />
+        <div v-if="classObj.mobile && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+        <sidebar class="sidebar-container"/>
+        <navbar/>
         <div class="main-container">
-            <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
-            <hr />
-            <app-main />
+            <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
+            <hr/>
+            <app-main/>
         </div>
     </div>
 </template>
@@ -68,7 +68,7 @@ export default class extends mixins(ResizeMixin) {
     position: relative;
     overflow-y: hidden;
     padding: 0 10px 10px;
-    background-color: #f1f2f3;
+    background: #F1F2F3;
 }
 
 .sidebar-container {

+ 0 - 0
src/utils/maintain.ts


+ 40 - 1
src/views/maintain/device/index.vue

@@ -6,9 +6,12 @@
             <admSearch @SearchValue="SearchValue"/>
             <admBtn :btnMsg="btnMsg"/>
         </div>
+        <div class="hr"></div>
         <div class="content">
             <admTabs :paneMsg="paneMsg" @paneValue="paneValue"/>
-            <admMultiTable/>
+            <div class="table">
+                <admMultiTable/>
+            </div>
         </div>
     </div>
 </template>
@@ -65,6 +68,10 @@ export default class extends Vue {
 <style lang="scss" scoped>
 $margin: 12px;
 .adm-device {
+    background: #fff;
+    padding: 12px;
+    height: 100%;
+
     .operation {
         margin: $margin;
 
@@ -75,6 +82,38 @@ $margin: 12px;
         .adm-btn {
             float: right;
         }
+
+    }
+
+    .hr {
+        background: #E1E7EA;
+        color: #E1E7EA;
+        width: 100%;
+        height: 1px;
+        margin-bottom: 16px;
     }
+
+    .content {
+        height: 100%;
+
+        .table {
+            border-left: 1px solid #E1E7EA;
+            border-right: 1px solid #E1E7EA;
+            border-bottom: 1px solid #E1E7EA;
+            height: calc(100% - 230px);
+            padding: 12px;
+        }
+
+        .adm-multi-table {
+
+        }
+
+
+    }
+}
+</style>
+<style>
+.el-tabs__header {
+    margin: 0;
 }
 </style>

+ 2 - 2
vue.config.js

@@ -49,8 +49,8 @@ module.exports = {
         }
     },
     chainWebpack(config) {
-        // provide the app's title in html-webpack-plugin's options list so that
-        // it can be accessed in index.html to inject the correct title.
+        //在html网页包插件的选项列表中提供应用程序的标题,以便
+        //可以在中访问索引.html插入正确的标题。
         // https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin
         config.plugin("html").tap(args => {
             args[0].title = name;