系统管理静态页面

src/views/holding/holding0.vue

@@ -169,7 +169,7 @@ export default {
       background-color: #fff;
     }
     .conten {
-      padding: 20px 20px 60px;
+      padding: 20px 20px 40px;
       width: 100%;
       height: 829px;
       .middle {

src/views/holding/holding1.vue

@@ -142,7 +142,7 @@ export default {
       background-color: #fff;
     }
     .conten {
-      padding: 20px 20px 60px;
+      padding: 20px 20px 40px;
       width: 100%;
       height: 829px;
       .middle {

src/views/holding/holding1_Dialog.vue

@@ -2,7 +2,11 @@
   <el-dialog title="添加藏品" :visible="dialogFormVisible" @close="cancel()">
     <div class="query">
       <span>藏品名称：</span>
-      <el-input v-model="name" placeholder="请输入" style="width:280px; margin-right:40px"></el-input>
+      <el-input
+        v-model="name"
+        placeholder="请输入"
+        style="width: 280px; margin-right: 40px"
+      ></el-input>
       <el-button>查 询</el-button>
     </div>
     <!-- 表格 -->
@@ -24,15 +28,15 @@
       <el-table-column prop="address" label="藏品名称"> </el-table-column>
       <el-table-column prop="name" label="类别" width="140"> </el-table-column>
     </el-table>
-              <!-- 分页器 -->
-          <div class="paging">
-            <el-pagination
-              background
-              layout="prev, pager, next,sizes,jumper"
-              :total="30"
-            >
-            </el-pagination>
-          </div>
+    <!-- 分页器 -->
+    <div class="paging">
+      <el-pagination
+        background
+        layout="prev, pager, next,sizes,jumper"
+        :total="30"
+      >
+      </el-pagination>
+    </div>
     <div slot="footer" class="dialog-footer">
       <el-button type="primary" @click="cancel">确 定</el-button>
     </div>
@@ -65,7 +69,6 @@ export default {
           address: '上海市普陀区金沙江路 1518 弄'
         }
       ]
-
     }
   },
   // 监听属性 类似于data概念
@@ -113,13 +116,12 @@ export default {
     flex: 1;
   }
 }
-  .smimg{
-    height: 60px;
-    img {
-      width: 100%;
-      height: 100%;
-      border: 3px solid #ccc;
-    }
+.smimg {
+  height: 60px;
+  img {
+    width: 100%;
+    height: 100%;
+    border: 3px solid #ccc;
   }
-
+}
 </style>

src/views/holding/holding2.vue

@@ -142,7 +142,7 @@ export default {
       background-color: #fff;
     }
     .conten {
-      padding: 20px 20px 60px;
+      padding: 20px 20px 40px;
       width: 100%;
       height: 829px;
       .middle {

src/views/holding/holding3.vue

@@ -201,7 +201,7 @@ export default {
       background-color: #fff;
     }
     .conten {
-      padding: 20px 20px 60px;
+      padding: 20px 20px 40px;
       width: 100%;
       height: 829px;
       .middle {

src/views/system/system0.vue

@@ -18,9 +18,54 @@
           <div class="title">
             <i class="el-icon-arrow-down" v-if="0"></i>
             <i class="el-icon-arrow-up" v-else></i>
+            <span>一号库区</span>
+            <i class="el-icon-plus tiny"></i>
+            <i class="el-icon-edit tiny"></i>
+          </div>
+          <ul class="area">
+            <li>库房A 编号：000668</li>
+            <li>库房A 编号：000668</li>
+          </ul>
+        </div>
+        <div class="conten_right">
+          <div class="title">
+            <b>库房A</b>
+            <span>仓库编号：000668</span>
+            <i class="el-icon-plus"></i>
+            <i class="el-icon-edit"></i>
+            <i class="el-icon-delete"></i>
+          </div>
+          <!-- 表格 -->
+          <div class="table">
+          <el-table
+            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+            :data="tableData"
+            border
+            style="width: 100%"
+          >
+            <el-table-column prop="name" label="货架编号" width="150"></el-table-column>
+            <el-table-column prop="name" label="货架名称" width="150"></el-table-column>
+            <el-table-column prop="name" label="行数" width="100"></el-table-column>
+            <el-table-column prop="name" label="列数" width="100"></el-table-column>
+            <el-table-column prop="address" label="备注"></el-table-column>
+            <el-table-column label="操作" width="140">
+              <template #default>
+                  <i class="el-icon-edit"></i>
+                  <i class="el-icon-delete"></i>
+              </template>
+            </el-table-column>
+          </el-table>
+          </div>
+          <!-- 分页器 -->
+          <div class="paging">
+            <el-pagination
+              background
+              layout="prev, pager, next,sizes,jumper"
+              :total="30"
+            >
+            </el-pagination>
           </div>
         </div>
-        <div class="conten_right"></div>
       </div>
     </div>
   </div>
@@ -34,7 +79,21 @@ export default {
   components: { TabList },
   data () {
     // 这里存放数据
-    return {}
+    return {
+      // 表格数据
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ]
+    }
   },
   // 监听属性 类似于data概念
   computed: {},
@@ -94,14 +153,80 @@ export default {
         height: 80px;
       }
       .title {
+        display: flex;
+        align-items: center;
         height: 55px;
         background-color: #f2f2f2;
+        color: black;
+        & > span {
+          margin: 0 170px 0 20px;
+        }
+        & > i {
+          cursor: pointer;
+          font-size: 30px;
+        }
+        .tiny {
+          margin: 0 10px;
+          font-size: 24px;
+          color: #a5acb3;
+        }
+      }
+      .area {
+        color: black;
+        li {
+          cursor: pointer;
+          width: 100%;
+          height: 33px;
+          line-height: 33px;
+          text-align: center;
+        }
+        li:hover {
+          color: #1890ff;
+        }
+        .active {
+          color: #1890ff;
+        }
       }
     }
     .conten_right {
+      position: relative;
+      .table{
+        max-height: 500px;
+        overflow: auto;
+        i {
+          cursor: pointer;
+          font-size: 24px;
+          color: black;
+          margin-left: 15px;
+        }
+      }
+      .paging{
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 20px;
+      }
       flex: 1;
       height: 650px;
       border: 1px solid #ccc;
+      .title{
+        height: 75px;
+        color: black;
+        display: flex;
+        align-items: center;
+        &>b{
+          font-size: 24px;
+          margin: 0 20px;
+        }
+        &>span {
+          margin-right: 20px;
+        }
+        &>i {
+          cursor: pointer;
+          font-size: 24px;
+          margin: 0 10px;
+        }
+      }
     }
   }
 }

src/views/system/system2.vue

@@ -10,6 +10,56 @@
         </el-breadcrumb>
       </div>
       <div class="conten">
+        <div class="middle">
+          <div class="select">
+            <span>账号：</span>
+            <el-input
+              v-model="userName"
+              placeholder="请输入"
+              style="width: 217px"
+            ></el-input>
+
+            <span>账号：</span>
+            <el-select v-model="role" placeholder="请选择">
+              <el-option
+                v-for="item in source"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+
+            <el-button style="margin-left: 20px">查询</el-button>
+            <el-button type="primary" >新增</el-button>
+          </div>
+          <!--表格 -->
+          <div class="table">
+            <el-table
+              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+              :data="tableData"
+              border
+              style="width: 100%"
+            >
+              <el-table-column prop="date" label="账号" width="180">
+              </el-table-column>
+              <el-table-column prop="name" label="账号角色" width="180">
+              </el-table-column>
+              <el-table-column prop="address" label="手机号">
+              </el-table-column>
+              <el-table-column prop="name" label="状态" width="180">
+              </el-table-column>
+              <el-table-column label="操作" width="180">
+                <template #default>
+                  <el-button type="text">修改</el-button>
+                  <el-button type="text">停用</el-button>
+                  <el-button type="text">注销</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+
+        </div>
       </div>
     </div>
   </div>
@@ -24,6 +74,32 @@ export default {
   data () {
     // 这里存放数据
     return {
+      userName: '',
+      role: '',
+      // 多选数据
+      source: [
+        {
+          value: '选项1',
+          label: '黄金糕'
+        },
+        {
+          value: '选项2',
+          label: '双皮奶'
+        }
+      ],
+      // 表格数据
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ]
 
     }
   },
@@ -69,11 +145,29 @@ export default {
       background-color: #fff;
     }
   }
-  .conten {
+
+   .conten {
     flex: 1;
     background-color: #fff;
     margin: 20px 20px 40px;
-    padding: 30px 60px 0;
-  }
+      .middle {
+        width: 100%;
+        height: 100%;
+        background-color: #fff;
+        .select {
+          color: black;
+          padding: 30px 0 0 0;
+          & > span {
+            margin-left: 30px;
+          }
+        }
+        .table {
+          max-height: 640px;
+          overflow: auto;
+          padding: 24px;
+        }
+      }
+    }
+
 }
 </style>