邓洁 : 用户管理雏形及checkbox样式更改
This commit is contained in:
dengj
@@ -163,6 +163,8 @@ const manageSelect = (index) => {
|
||||
router.push("/site");
|
||||
} else if (index === 1) {
|
||||
router.push("/tunnel/1");
|
||||
}else if (index === 2) {
|
||||
router.push("/user");
|
||||
}
|
||||
};
|
||||
const handleCommand=(item)=>{
|
||||
|
||||
256
src/views/user/index.vue
Normal file
256
src/views/user/index.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div class="tunnel-bgc">
|
||||
<div class="box-top">
|
||||
<div class="back-tunnel" @click="router.push('/')">
|
||||
<div class="back-icon"></div>
|
||||
<span>返回</span>
|
||||
</div>
|
||||
<div class="tunnel-title"></div>
|
||||
<div class="all-del-btn">
|
||||
<div class="all-btn">
|
||||
全选
|
||||
</div>
|
||||
<div class="all-btn del-btn" @click="handleMoreDelete">
|
||||
删除
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-content">
|
||||
<div class="user-box">
|
||||
<div class="user-top">
|
||||
<div class="search-box">
|
||||
<div>
|
||||
<el-input
|
||||
v-model="username"
|
||||
placeholder="输入搜索内容"
|
||||
/>
|
||||
</div>
|
||||
<el-button type="primary" :icon="Search" style="margin-left: 20px">搜索</el-button>
|
||||
</div>
|
||||
<div>用户管理</div>
|
||||
<div class="add-btn">添加用户</div>
|
||||
</div>
|
||||
<div class="device-table">
|
||||
<el-table stripe
|
||||
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
|
||||
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
|
||||
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="userData">
|
||||
<el-table-column type="selection" width="80" />
|
||||
<el-table-column prop="account" label="账户" align="center"/>
|
||||
<el-table-column prop="password" label="密码" align="center"/>
|
||||
<el-table-column prop="identity" label="身份" align="center"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default>
|
||||
<el-button link type="primary" size="large" style="font-size: 40px;color: #17E1E2;">修改</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Search} from '@element-plus/icons-vue'
|
||||
const router = useRouter()
|
||||
const username = ref()
|
||||
const userData = ref([
|
||||
{
|
||||
account: '123343546',
|
||||
password: '243',
|
||||
identity: '超级管理员'
|
||||
},
|
||||
{
|
||||
account: '123343546',
|
||||
password: '243',
|
||||
identity: '超级管理员'
|
||||
},
|
||||
{
|
||||
account: '123343546',
|
||||
password: '243',
|
||||
identity: '超级管理员'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tunnel-bgc {
|
||||
padding: 85px 0 0 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('@/assets/images/tunnel/sd_bj.png');
|
||||
|
||||
.box-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.back-tunnel {
|
||||
cursor: pointer;
|
||||
margin: 0 0 0 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 178px;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
border-radius: 11px;
|
||||
border: 2px solid #08B7B8;
|
||||
font-size: 38px;
|
||||
color: #FFFFFF;
|
||||
|
||||
.back-icon {
|
||||
margin-right: 20px;
|
||||
margin-left: 23px;
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
|
||||
}
|
||||
}
|
||||
|
||||
.all-del-btn {
|
||||
display: flex;
|
||||
|
||||
.del-btn {
|
||||
width: 168px;
|
||||
height: 60px;
|
||||
background: #08B7B8;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.all-btn {
|
||||
cursor: pointer;
|
||||
padding-left: 53px;
|
||||
width: 178px;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
border-radius: 11px;
|
||||
border: 2px solid #08B7B8;
|
||||
color: #FFFFFF;
|
||||
font-size: 38px;
|
||||
|
||||
&:last-child {
|
||||
margin-left: 40px;
|
||||
margin-right: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 247px;
|
||||
|
||||
.user-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 2194px;
|
||||
height: 1321px;
|
||||
background: #064B66;
|
||||
border-radius: 20px;
|
||||
border: 2px solid #05FEFF;
|
||||
box-sizing: border-box;
|
||||
padding: 73px 98px;
|
||||
|
||||
.user-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
> div:nth-child(2) {
|
||||
margin-left: -250px;
|
||||
height: 61px;
|
||||
font-size: 46px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 61px;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
background: #08B7B8;
|
||||
border-radius: 6px;
|
||||
color: #FFFFFF;
|
||||
font-size: 28px;
|
||||
padding-left: 19px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
|
||||
:deep(.el-button) {
|
||||
width: 130px;
|
||||
height: 50px;
|
||||
background: #08B7B8;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
font-size: 28px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
width: 292px;
|
||||
height: 50px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #05FEFF;
|
||||
background-color: transparent;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table--fit) {
|
||||
width: 2000px !important;
|
||||
}
|
||||
|
||||
:deep(.cell) {
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
color: #fff;
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
:deep(.el-table tr) {
|
||||
background-color: #1C5971;
|
||||
}
|
||||
|
||||
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
|
||||
background-color: #1C5971;
|
||||
}
|
||||
|
||||
:deep(.el-table__row--striped) {
|
||||
background-color: #13849C !important;
|
||||
}
|
||||
|
||||
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
|
||||
background-color: #13849C !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__cell) {
|
||||
.el-input {
|
||||
width: 180px;
|
||||
height: 53px;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
border-radius: 6px;
|
||||
border: 1px solid #05FEFF;
|
||||
background-color: transparent;
|
||||
|
||||
.el-input__inner {
|
||||
color: #FFFFFF;
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__inner-wrapper::before) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user