commit

04.系统编码/Frontend/.idea/workspace.xml

@@ -46,6 +46,7 @@
       <workItem from="1638233761575" duration="1033000" />
       <workItem from="1638235051409" duration="129000" />
       <workItem from="1638235200843" duration="11502000" />
+      <workItem from="1638248948876" duration="8558000" />
     </task>
     <servers />
   </component>

04.系统编码/Frontend/src/components/Login.vue

@@ -22,7 +22,7 @@
 
 <script lang="ts">
 import {reactive, toRefs} from "vue";
-import { ElMessageBox, ElMessage } from 'element-plus'
+import { ElMessageBox } from 'element-plus'
 export default {
   name: 'Login',
   setup() {
@@ -128,6 +128,7 @@ export default {
             height: 17.92px;
             position: absolute;
             top: -7px;
+            left: 18px;
           }
       }
       }

04.系统编码/Frontend/src/components/SystemManagement.vue

@@ -3,21 +3,69 @@
     </div>
     <div class="main">
         <div class="container system-container panel">
-            
+          <div class="box">
+          <div class="left">
+              <h1>用户名称：</h1>
+
+            <el-select v-model="value">
+              <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+              </el-option>
+            </el-select>
+
+
+           <img src="/images/search.png">
+          </div>
+          <div class="right">
+            <span>添加新用户</span>
+          </div>
+          </div>
+
+          <div class="tableMessage">
+          <el-table :data="tableData" border  style="width: 100%">
+            <el-table-column prop="date" label="序号" width="216px" align="center"/>
+            <el-table-column prop="name" label="用户账号" width="300px" align="center"/>
+            <el-table-column prop="name" label="电话" width="301px" align="center"/>
+            <el-table-column prop="name" label="邮箱" width="351px" align="center"/>
+            <el-table-column prop="name" label="操作" width="351px" align="center"/>
+          </el-table>
+          </div>
+
         </div>
+
+
     </div>
 </template>
 
+
+
 <script lang="ts">
-    import { reactive, toRefs } from 'vue';
-    
+    import { reactive, toRefs,ref} from 'vue';
+
     export default {
         name: 'SystemManagement',
         setup() {
-            
+          let option = reactive({
+            options:[ {
+              value: 'Option1',
+              label: 'Option1',
+            },
+              {
+                value: 'Option2',
+                label: 'Option2',
+              },
+              {
+                value: 'Option3',
+                label: 'Option3',
+              },]
+          })
 
             return {
-                
+              ...toRefs(option),
+              value: ref(''),
             }
         }
     }
@@ -26,5 +74,56 @@
     .system-container {
         width: calc(~"100% - 40px");
         margin: 0 20px;
+      .box{
+        padding: 28px 20px 0px ;
+        display: flex;
+        justify-content: space-between;
+        .left{
+
+
+          display: flex;
+          justify-content: space-between;
+          h1{
+            width: 100px;
+            height: 26px;
+            font-size: 20px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            line-height: 26px;
+            color: #000000;
+            opacity: 1;
+          }
+          img{
+            width: 44px;
+            height: 44px;
+            margin-left: 10px;
+            cursor: pointer;
+          }
+        }
+        .right{
+          width: 100px;
+          height: 26px;
+          font-size: 20px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          line-height: 26px;
+          color: #498DF0;
+          opacity: 1;
+
+          span{
+            width: 96px;
+            height: 0px;
+            border-bottom: 1px solid #498DF0;
+            opacity: 1;
+            cursor: pointer;
+          }
+
+        }
+      }
+    .tableMessage{
+
+      padding: 56px 20px 20px;
+    }
+
     }
 </style>