|
|
@@ -15,7 +15,11 @@ let state = ref({
|
|
|
showDialog: false,
|
|
|
ids: [],
|
|
|
showDel: false,
|
|
|
-})
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
</script>
|
|
|
|
|
|
@@ -25,7 +29,7 @@ let state = ref({
|
|
|
<div class="content commonsScrollbar">
|
|
|
<div class="contentTitle">
|
|
|
<div class="contentTitle-line"></div>
|
|
|
- <div class="contentTitle-text">学生管理</div>
|
|
|
+ <div class="contentTitle-text">账号管理</div>
|
|
|
</div>
|
|
|
<div class="contentRow">
|
|
|
<div class="rowLeft">
|
|
|
@@ -112,7 +116,7 @@ let state = ref({
|
|
|
v-model:page-size="state.userListParams.limit"
|
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
|
background
|
|
|
- :layout="'prev, next, jumper'"
|
|
|
+ :layout="' ->, total,prev, pager, next, jumper'"
|
|
|
:total="state.userTotal"
|
|
|
@size-change="handleSizeChange"
|
|
|
@current-change="handleCurrentChange"
|
|
|
@@ -148,5 +152,198 @@ let state = ref({
|
|
|
left: 0px;
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
+ .content {
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ border-radius: 1rem;
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 2rem 4rem 2rem 3rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .contentTitle {
|
|
|
+ padding: 0 0.5rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .contentTitle-line {
|
|
|
+ width: 0.35rem;
|
|
|
+ height: 2rem;
|
|
|
+ background: #2c68ff;
|
|
|
+ border-radius: 0.85rem;
|
|
|
+ }
|
|
|
+ .contentTitle-text {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 1.8rem;
|
|
|
+ color: #373737;
|
|
|
+ margin-left: 1.4rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .contentRow {
|
|
|
+ margin-top: 2.8rem;
|
|
|
+ padding: 0 1.5rem 0 1rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .rowLeft {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .rowSelect {
|
|
|
+ :deep(.el-select__wrapper) {
|
|
|
+ height: 3rem;
|
|
|
+ font-size: 1.1rem;
|
|
|
+ min-height: 0;
|
|
|
+ border-radius: 0.57rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rowBtn {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 8.8rem;
|
|
|
+ height: 3rem;
|
|
|
+ border-radius: 0.57rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 2rem;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 1.5rem;
|
|
|
+ height: 1.5rem;
|
|
|
+ }
|
|
|
+ .rowBtn-text {
|
|
|
+ font-size: 1.15rem;
|
|
|
+ margin-left: 0.7rem;
|
|
|
+ }
|
|
|
+ .rowBtn-text1 {
|
|
|
+ color: #3d7cff;
|
|
|
+ }
|
|
|
+ .rowBtn-text2 {
|
|
|
+ color: #d8a216;
|
|
|
+ }
|
|
|
+ .rowBtn-text3 {
|
|
|
+ color: #e84d4d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rowBtn1 {
|
|
|
+ background: #e5eeff;
|
|
|
+ &:hover {
|
|
|
+ background: #edf3ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rowBtn2 {
|
|
|
+ background: rgba(214, 154, 1, 0.1);
|
|
|
+ &:hover {
|
|
|
+ background: #f4e5bd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rowBtn3 {
|
|
|
+ background: rgba(232, 77, 77, 0.05);
|
|
|
+ &:hover {
|
|
|
+ background: #fad4d4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rowRight {
|
|
|
+ display: flex;
|
|
|
+ :deep(.el-input__wrapper) {
|
|
|
+ font-size: 1rem;
|
|
|
+ border-radius: 0.57rem;
|
|
|
+ }
|
|
|
+ .rowSearch {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 3.9rem;
|
|
|
+ height: 3rem;
|
|
|
+ background: #3d7cff;
|
|
|
+ border-radius: 0.57rem;
|
|
|
+ font-size: 1.1rem;
|
|
|
+ color: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 0.7rem;
|
|
|
+ &:hover {
|
|
|
+ background: #77a3ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .contentTable {
|
|
|
+ margin-top: 2.3rem;
|
|
|
+ height: 35rem;
|
|
|
+
|
|
|
+ :deep(tr) {
|
|
|
+ border-radius: 0.57rem;
|
|
|
+ }
|
|
|
+ :deep(th) {
|
|
|
+ background: #f5f7fa;
|
|
|
+ height: 6rem;
|
|
|
+ font-size: 1.4rem;
|
|
|
+ color: #333746;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ :deep(td) {
|
|
|
+ height: 7rem;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ :deep(.cell) {
|
|
|
+ height: 2rem;
|
|
|
+ }
|
|
|
+ :deep(.el-checkbox) {
|
|
|
+ --el-checkbox-input-height: 2rem;
|
|
|
+ --el-checkbox-input-width: 2rem;
|
|
|
+ --el-checkbox-border-radius: 0.28rem;
|
|
|
+ // border: 1px solid #cad2d8;
|
|
|
+ }
|
|
|
+ :deep(.el-checkbox__inner:after) {
|
|
|
+ height: 1.07rem;
|
|
|
+ left: 0.64rem;
|
|
|
+ top: 0.21rem;
|
|
|
+ width: 0.5rem;
|
|
|
+ }
|
|
|
+ :deep(.el-checkbox__inner::before) {
|
|
|
+ top: 0.85rem;
|
|
|
+ }
|
|
|
+ :deep(.el-button) {
|
|
|
+ font-size: 1.2rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.classPagination) {
|
|
|
+ .el-pagination__rightwrapper {
|
|
|
+ justify-content: center;
|
|
|
+ .el-pagination__total {
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .btn-prev,
|
|
|
+ .btn-next {
|
|
|
+ background: #f7f7f7;
|
|
|
+ color: #000000;
|
|
|
+ border-radius: 1rem;
|
|
|
+ }
|
|
|
+ .number {
|
|
|
+ background: #f7f7f7;
|
|
|
+ color: #000000;
|
|
|
+ border-radius: 0.5rem;
|
|
|
+ }
|
|
|
+ .is-active {
|
|
|
+ background: #2c68ff;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .el-pagination__jump {
|
|
|
+ color: #000000;
|
|
|
+ .el-pagination__editor.el-input {
|
|
|
+ width: 4.57rem;
|
|
|
+ .el-input__wrapper {
|
|
|
+ border-radius: 1rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
</style>
|
