wenyongda/ZrAdminNetCore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化UI

Browse Source
This commit is contained in:
不做码农 2022-03-20 17:55:24 +08:00
parent 822122d9cc
commit b96db9453b
8 changed files with 83 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
ZR.Vue/src/assets/styles/btn.scss
View File

@ -40,60 +40,3 @@
.yellow-btn { .yellow-btn {
@include colorBtn($yellow) @include colorBtn($yellow)
} }
.pan-btn {
font-size: 14px;
color: #fff;
padding: 14px 36px;
border-radius: 8px;
border: none;
outline: none;
transition: 600ms ease all;
position: relative;
display: inline-block;
&:hover {
background: #fff;
&:before,
&:after {
width: 100%;
transition: 600ms ease all;
}
}
&:before,
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
&::after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
}
.custom-button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
color: #fff;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: 0;
margin: 0;
padding: 10px 15px;
font-size: 14px;
border-radius: 4px;
}

213
ZR.Vue/src/assets/styles/index.scss
View File

@ -96,71 +96,15 @@ div:focus {
} }
} }
aside {
background: #eef1f6;
padding: 8px 24px;
margin-bottom: 20px;
border-radius: 2px;
display: block;
line-height: 32px;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
color: #2c3e50;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
a {
color: #337ab7;
cursor: pointer;
&:hover {
color: rgb(32, 160, 255);
}
}
}
//main-container全局样式 //main-container全局样式
.app-container { .app-container {
padding: 20px; padding: 20px;
} }
.components-container {
margin: 30px 50px;
position: relative;
}
.pagination-container {
margin-top: 30px;
}
.text-center { .text-center {
text-align: center text-align: center
} }
.sub-navbar {
height: 50px;
line-height: 50px;
position: relative;
width: 100%;
text-align: right;
padding-right: 20px;
transition: 600ms ease position;
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
.subtitle {
font-size: 20px;
color: #fff;
}
&.draft {
background: #d0d0d0;
}
&.deleted {
background: #d0d0d0;
}
}
.link-type, .link-type,
.link-type:focus { .link-type:focus {
color: #337ab7; color: #337ab7;
@ -171,15 +115,6 @@ aside {
} }
} }
//refine vue-multiselect plugin
.multiselect {
line-height: 16px;
}
.multiselect--active {
z-index: 1000 !important;
}
/** 基础通用 **/ /** 基础通用 **/
.pt5 { .pt5 {
padding-top: 5px; padding-top: 5px;
@ -265,27 +200,6 @@ aside {
margin-top: 6vh !important; margin-top: 6vh !important;
} }
/** 表格布局 **/
.pagination-container {
position: relative;
height: 25px;
margin-top: 5px;
padding: 10px 20px !important;
}
/* tree border */
.tree-border {
margin-top: 5px;
border: 1px solid #e5e6e7;
background: #FFFFFF none;
border-radius: 4px;
}
.pagination-container .el-pagination {
right: 0;
position: absolute;
}
.pull-right { .pull-right {
float: right !important; float: right !important;
} }
@ -336,139 +250,12 @@ aside {
border-radius: 50%; border-radius: 50%;
} }
.img-lg {
width: 120px;
height: 120px;
}
.vue-treeselect.mini {
font-size: 12px !important;
}
.vue-treeselect.small {
font-size: 13px !important;
}
.vue-treeselect.medium {
font-size: 14px !important;
}
.vue-treeselect.mini .vue-treeselect__control {
height: 28px;
}
.vue-treeselect.small .vue-treeselect__control {
height: 32px;
}
.vue-treeselect.medium .vue-treeselect__control {
height: 34px;
}
.vue-treeselect.mini .vue-treeselect__single-value {
line-height: 28px;
}
.vue-treeselect.small .vue-treeselect__single-value {
line-height: 32px;
}
.vue-treeselect.medium .vue-treeselect__single-value {
line-height: 34px;
}
.list-group-striped>.list-group-item {
border-left: 0;
border-right: 0;
border-radius: 0;
padding-left: 0;
padding-right: 0;
}
.list-group {
padding-left: 0px;
list-style: none;
}
.list-group-item {
border-bottom: 1px solid #e7eaec;
border-top: 1px solid #e7eaec;
margin-bottom: -1px;
padding: 11px 0px;
font-size: 13px;
}
.pull-right {
float: right !important;
}
.el-card__header {
padding: 14px 15px 7px;
min-height: 40px;
}
.el-card__body {
padding: 15px 20px 20px 20px;
}
.card-box { .card-box {
padding-right: 15px; padding-right: 15px;
padding-left: 15px; padding-left: 15px;
margin-bottom: 10px; margin-bottom: 10px;
} }
/* button color */
.el-button--cyan.is-active,
.el-button--cyan:active {
background: #20B2AA;
border-color: #20B2AA;
color: #FFFFFF;
}
.el-button--cyan:focus,
.el-button--cyan:hover {
background: #48D1CC;
border-color: #48D1CC;
color: #FFFFFF;
}
.el-button--cyan {
background-color: #20B2AA;
border-color: #20B2AA;
color: #FFFFFF;
}
.img-lg {
width: 120px;
height: 120px;
}
// 导航栏头像
.avatar-upload-preview {
position: absolute;
top: 50%;
transform: translate(50%, -50%);
width: 180px;
height: 180px;
border-radius: 50%;
box-shadow: 0 0 4px #ccc;
overflow: hidden;
}
/* 拖拽列样式 */
.sortable-ghost {
opacity: .8;
color: #fff !important;
background: #42b983 !important;
}
.top-right-btn {
position: relative;
float: right;
}
.icon { .icon {
width: 100px; width: 100px;
} }

2
ZR.Vue/src/components/Pagination/index.vue
View File

@ -93,7 +93,7 @@ export default {
<style scoped> <style scoped>
.pagination-container { .pagination-container {
background: #fff; background: #fff;
padding: 32px 16px; padding: 16px 16px;
} }
.pagination-container.hidden { .pagination-container.hidden {
display: none; display: none;

6
ZR.Vue/src/components/RightToolbar/index.vue
View File

@ -86,4 +86,10 @@ export default {
.el-dropdown-item { .el-dropdown-item {
padding: 5px; padding: 5px;
} }
.top-right-btn {
position: relative;
float: right;
}
</style> </style>

2
ZR.Vue/src/views/system/article/publish.vue
View File

@ -31,7 +31,7 @@
</el-col> </el-col>
<el-col :lg="24"> <el-col :lg="24">
<el-form-item label="" style="text-align:right;"> <el-form-item label="" style="text-align:right;">
<el-button type="cyan" size="mini" @click="handlePublish('1')">发布文章</el-button> <el-button size="mini" @click="handlePublish('1')">发布文章</el-button>
<el-button type="success" size="mini" @click="handlePublish('2')">存为草稿</el-button> <el-button type="success" size="mini" @click="handlePublish('2')">存为草稿</el-button>
</el-form-item> </el-form-item>
</el-col> </el-col>

9
ZR.Vue/src/views/system/role/index.vue
View File

@ -589,3 +589,12 @@ export default {
} }
} }
</script> </script>
<style scoped>
/* tree border */
.tree-border {
margin-top: 5px;
border: 1px solid #e5e6e7;
background: #ffffff none;
border-radius: 4px;
}
</style>

66
ZR.Vue/src/views/system/user/profile/index.vue
View File

@ -64,39 +64,65 @@
</template> </template>
<script> <script>
import userAvatar from "./userAvatar"; import userAvatar from './userAvatar'
import userInfo from "./userInfo"; import userInfo from './userInfo'
import resetPwd from "./resetPwd"; import resetPwd from './resetPwd'
import operLog from "./operLog.vue"; import operLog from './operLog.vue'
import { getUserProfile } from "@/api/system/user"; import { getUserProfile } from '@/api/system/user'
export default { export default {
name: "Profile", name: 'Profile',
components: { userAvatar, userInfo, resetPwd, operLog }, components: { userAvatar, userInfo, resetPwd, operLog },
data() { data() {
return { return {
user: {}, user: {},
roles: [], roles: [],
postGroup: "", postGroup: '',
activeTab: "userinfo", activeTab: 'userinfo',
activeName: "first", activeName: 'first'
}; }
}, },
created() { created() {
this.getUser(); this.getUser()
}, },
methods: { methods: {
getUser() { getUser() {
getUserProfile().then((response) => { getUserProfile().then((response) => {
this.user = response.data.user; this.user = response.data.user
this.roles = response.data.roles; this.roles = response.data.roles
this.roleGroup = response.data.roleGroup; this.roleGroup = response.data.roleGroup
this.postGroup = response.data.postGroup; this.postGroup = response.data.postGroup
}); })
}, },
handleTabClick(tab, event) { handleTabClick(tab, event) {
console.log(tab, event); console.log(tab, event)
}, }
}, }
}; }
</script> </script>
<style scoped>
.list-group-striped > .list-group-item {
border-left: 0;
border-right: 0;
border-radius: 0;
padding-left: 0;
padding-right: 0;
}
.list-group {
padding-left: 0px;
list-style: none;
}
.list-group-item {
border-bottom: 1px solid #e7eaec;
border-top: 1px solid #e7eaec;
margin-bottom: -1px;
padding: 11px 0px;
font-size: 13px;
}
.pull-right {
float: right !important;
}
</style>

18
ZR.Vue/src/views/system/user/profile/userAvatar.vue
View File

@ -154,4 +154,22 @@ export default {
line-height: 110px; line-height: 110px;
border-radius: 50%; border-radius: 50%;
} }
.img-lg {
width: 120px;
height: 120px;
}
// 导航栏头像
.avatar-upload-preview {
position: absolute;
top: 50%;
transform: translate(50%, -50%);
width: 180px;
height: 180px;
border-radius: 50%;
box-shadow: 0 0 4px #ccc;
overflow: hidden;
}
</style> </style>