mirror of
https://gitee.com/log4j/pig-ui.git
synced 2025-01-03 23:42:23 +08:00
'admin-21.02.27:新增用户管理、表格适配、移动端滚动条优化等'
This commit is contained in:
lyt-Top
parent
1cc3490440
commit
956aed0c2b
@ -24,26 +24,6 @@ body,
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
// 滚动条的宽度
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
// 滚动条的设置
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(144, 147, 153, 0.3);
|
||||
background-clip: padding-box;
|
||||
min-height: 28px;
|
||||
border-radius: 5px;
|
||||
transition: 0.3s background-color;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(144, 147, 153, 0.5);
|
||||
}
|
||||
|
||||
/* 主布局样式
|
||||
------------------------------- */
|
||||
.layout-container {
|
||||
|
||||
@ -6,3 +6,5 @@
|
||||
@import './home.scss';
|
||||
@import './chart.scss';
|
||||
@import './form.scss';
|
||||
@import './scrollbar.scss';
|
||||
@import './pagination.scss';
|
||||
|
||||
15
src/theme/media/pagination.scss
Normal file
15
src/theme/media/pagination.scss
Normal file
@ -0,0 +1,15 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于576px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $xs) {
|
||||
.el-pager,
|
||||
.el-pagination__jump {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 默认居中对齐
|
||||
.el-pagination {
|
||||
text-align: center !important;
|
||||
}
|
||||
56
src/theme/media/scrollbar.scss
Normal file
56
src/theme/media/scrollbar.scss
Normal file
@ -0,0 +1,56 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于768px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $sm) {
|
||||
// 滚动条的宽度
|
||||
::-webkit-scrollbar {
|
||||
width: 3px !important;
|
||||
height: 3px !important;
|
||||
}
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
// 滚动条的设置
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(144, 147, 153, 0.3);
|
||||
background-clip: padding-box;
|
||||
min-height: 28px;
|
||||
border-radius: 5px;
|
||||
transition: 0.3s background-color;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(144, 147, 153, 0.5);
|
||||
}
|
||||
// element plus scrollbar
|
||||
.el-scrollbar__bar.is-vertical {
|
||||
width: 2px !important;
|
||||
}
|
||||
.el-scrollbar__bar.is-horizontal {
|
||||
height: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度大于768px
|
||||
------------------------------- */
|
||||
@media screen and (min-width: 769px) {
|
||||
// 滚动条的宽度
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
// 滚动条的设置
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(144, 147, 153, 0.3);
|
||||
background-clip: padding-box;
|
||||
min-height: 28px;
|
||||
border-radius: 5px;
|
||||
transition: 0.3s background-color;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(144, 147, 153, 0.5);
|
||||
}
|
||||
}
|
||||
16
src/views/system/menu/component/addMenu.vue
Normal file
16
src/views/system/menu/component/addMenu.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="system-menu-add-container"></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs } from "vue";
|
||||
export default {
|
||||
name: "systemAddMenu",
|
||||
setup() {
|
||||
const state = reactive({});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
16
src/views/system/menu/component/editMenu.vue
Normal file
16
src/views/system/menu/component/editMenu.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="system-menu-edit-container"></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs } from "vue";
|
||||
export default {
|
||||
name: "systemEditMenu",
|
||||
setup() {
|
||||
const state = reactive({});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -3,7 +3,7 @@
|
||||
<el-card shadow="hover">
|
||||
<el-table :data="menuTableData" stripe style="width: 100%" row-key="path"
|
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
|
||||
<el-table-column label="菜单" show-overflow-tooltip>
|
||||
<el-table-column label="菜单名称" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<i :class="scope.row.meta.icon"></i>
|
||||
<span class="ml10">{{ scope.row.meta.title }}</span>
|
||||
@ -41,7 +41,7 @@
|
||||
<span v-else class="color-info">否</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="权限" show-overflow-tooltip>
|
||||
<el-table-column label="权限标识" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.meta.auth }}</span>
|
||||
</template>
|
||||
|
||||
@ -1,21 +1,100 @@
|
||||
<template>
|
||||
<div>
|
||||
systemUser
|
||||
<el-input v-model="val"></el-input>
|
||||
<div class="system-user-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="system-user-search mb15">
|
||||
<el-input size="small" placeholder="请输入用户名" prefix-icon="el-icon-search" style="max-width:180px;"></el-input>
|
||||
<el-button size="small" type="primary" class="ml10">查询</el-button>
|
||||
</div>
|
||||
<el-table :data="tableData.data" stripe style="width: 100%">
|
||||
<el-table-column prop="num" label="ID" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="name" label="用户名" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="头像" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-image class="system-user-photo" :src="scope.row.photo" :preview-src-list="[scope.row.photo]">
|
||||
</el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="phone" label="手机" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="sex" label="性别" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="time" label="加入时间" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="path" label="操作" width="90">
|
||||
<template #default="scope">
|
||||
<el-button size="mini" type="text">修改</el-button>
|
||||
<el-button size="mini" type="text">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
|
||||
:pager-count="5" :page-sizes="[10, 20, 30]" :current-page="tableData.param.pageNum" background
|
||||
:page-size="tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
|
||||
</el-pagination>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive } from "vue";
|
||||
import { toRefs, reactive, onMounted } from "vue";
|
||||
export default {
|
||||
name: "systemUser",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
val: "",
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
for (let i = 0; i < 20; i++) {
|
||||
state.tableData.data.push({
|
||||
num: `00${i + 1}`,
|
||||
name: (Math.round(Math.random() * 20901) + 19968).toString(16),
|
||||
photo:
|
||||
"https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3142181265,1044547961&fm=11&gp=0.jpg",
|
||||
phone: Math.floor(Math.random() * 10000000000),
|
||||
email: `${Math.floor(Math.random() * 1000)}@qq.com`,
|
||||
sex: i % 2 === 0 ? "男" : "女",
|
||||
time: new Date().toLocaleDateString(),
|
||||
});
|
||||
}
|
||||
state.tableData.total = state.tableData.data.length;
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
return {
|
||||
onHandleSizeChange,
|
||||
onHandleCurrentChange,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.system-user-container {
|
||||
.system-user-search {
|
||||
text-align: right;
|
||||
}
|
||||
.system-user-photo {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user