|
|
@ -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> |
|
|
|