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

<template>
    <div class="tabs">
    </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,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(''),
            }
        }
    }
</script>
<style lang="less" scoped>
    .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>