mirror of
https://gitee.com/zoujingli/ThinkAdmin.git
synced 2025-04-06 03:58:04 +08:00
修改后台样式
This commit is contained in:
Anyon
parent
e6b33e4a22
commit
6ebf357a63
@ -1,21 +1,26 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-icon :size="16">
|
||||
<edit></edit>
|
||||
</el-icon>
|
||||
{{ userName }}: 你好 vue3
|
||||
</div>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-row justify="space-between">
|
||||
<el-col :span="12">页面标题 导航条</el-col>
|
||||
<el-col :span="12" style="text-align:right">
|
||||
<el-button>功能按钮区</el-button>
|
||||
<el-button>功能按钮区</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-header>
|
||||
<el-main>
|
||||
{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userName: "张三"
|
||||
userName: "ThinkAdmin"
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,10 +1,12 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-header style="padding:0">
|
||||
<el-menu class="think-header"
|
||||
:default-active="1"
|
||||
mode="horizontal" text-color="#fff" style="border-bottom:0"
|
||||
background-color="rgba(54,25,88,0.9)" active-text-color="rgba(54,25,88,1.0)"
|
||||
<el-header>
|
||||
<el-menu
|
||||
:default-active="1"
|
||||
mode="horizontal"
|
||||
text-color="#fff"
|
||||
background-color="rgba(54,25,88,0.9)"
|
||||
active-text-color="rgba(54,25,88,1.0)"
|
||||
>
|
||||
<el-menu-item route="/" index="1">ThinkAdmin For HTML</el-menu-item>
|
||||
<el-sub-menu index="2">
|
||||
@ -18,17 +20,17 @@
|
||||
</el-menu>
|
||||
</el-header>
|
||||
<el-container>
|
||||
<el-aside width="280px">
|
||||
<el-tabs tab-position="left" style="height:100%">
|
||||
<el-aside>
|
||||
<el-tabs tab-position="left">
|
||||
<el-tab-pane v-for="menu in menus">
|
||||
<template #label>{{ menu.name }}</template>
|
||||
<h5 v-text="menu.title">Default colors</h5>
|
||||
<el-menu default-active="2">
|
||||
<el-sub-menu index="1">
|
||||
<template #title>
|
||||
<!-- <el-icon>-->
|
||||
<!-- <location></location>-->
|
||||
<!-- </el-icon>-->
|
||||
<!-- <el-icon>-->
|
||||
<!-- <location></location>-->
|
||||
<!-- </el-icon>-->
|
||||
<span>Navigator One</span>
|
||||
</template>
|
||||
|
||||
@ -38,19 +40,19 @@
|
||||
|
||||
</el-sub-menu>
|
||||
<el-menu-item index="2">
|
||||
<!-- <el-icon>-->
|
||||
<!-- <icon-menu></icon-menu>-->
|
||||
<!-- </el-icon>-->
|
||||
<!-- <el-icon>-->
|
||||
<!-- <icon-menu></icon-menu>-->
|
||||
<!-- </el-icon>-->
|
||||
<span>Navigator Two</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<!-- <el-icon>-->
|
||||
<!-- <document></document>-->
|
||||
<!-- </el-icon>-->
|
||||
<!-- <el-icon>-->
|
||||
<!-- <document></document>-->
|
||||
<!-- </el-icon>-->
|
||||
<span>Navigator Three</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4">
|
||||
<!-- <el-icon>-->
|
||||
<!-- <el-icon>-->
|
||||
<!-- <setting></setting>-->
|
||||
<!-- </el-icon>-->
|
||||
<span>Navigator Four</span>
|
||||
@ -63,7 +65,7 @@
|
||||
<el-main>
|
||||
<router-view></router-view>
|
||||
</el-main>
|
||||
<el-footer>Footer</el-footer>
|
||||
<el-footer>©版权所有 2014-2021 ThinkAdmin</el-footer>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</el-container>
|
||||
@ -74,117 +76,164 @@
|
||||
html, body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
display: block;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
body > .el-container {
|
||||
height: 100%;
|
||||
|
||||
> .el-header {
|
||||
color: #fff;
|
||||
line-height: 60px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
||||
.el-menu {
|
||||
border-bottom: 0;
|
||||
|
||||
.el-menu-item {
|
||||
border-bottom: 0;
|
||||
|
||||
&:not(.is-disabled) {
|
||||
&:first-child {
|
||||
width: 280px;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover, &:active, &:focus, &.is-active {
|
||||
color: #FFFFFF !important;
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #FFFFFF !important;
|
||||
background: rgba(54, 25, 88, 0.9) !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
color: #FFF !important;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-sub-menu {
|
||||
.el-sub-menu__title {
|
||||
color: #FFFFFF !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
&.is-opened {
|
||||
.el-sub-menu__title {
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .el-container {
|
||||
> .el-aside {
|
||||
background: #53a8ff;
|
||||
--el-aside-width: 280px;
|
||||
box-shadow: 10px 10px 5px #888888;
|
||||
|
||||
.el-tabs {
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
||||
.el-tabs__header {
|
||||
width: 60px;
|
||||
margin: 0 !important;
|
||||
background: rgba(54, 25, 88, 0.8);
|
||||
|
||||
.el-tabs__active-bar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap {
|
||||
margin-right: 0 !important;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
color: #FFF;
|
||||
width: 100% !important;
|
||||
height: 60px !important;
|
||||
padding: 0 !important;
|
||||
line-height: 60px !important;
|
||||
text-align: center !important;
|
||||
|
||||
&.is-active {
|
||||
color: #333333;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
&:hover:not(.is-active) {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__content {
|
||||
width: 220px !important;
|
||||
height: 100% !important;
|
||||
background: #FFF;
|
||||
|
||||
h5 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
display: none;
|
||||
border-bottom: 1px solid #CCC;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .el-container {
|
||||
> .el-main {
|
||||
background: #efefef;
|
||||
padding: 0;
|
||||
background: #EFEFEF;
|
||||
|
||||
> .el-container {
|
||||
> .el-header {
|
||||
line-height: 60px;
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
> .el-main {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .el-footer {
|
||||
color: #fff;
|
||||
background: #333;
|
||||
color: #333333;
|
||||
background: #CCCCCC;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.think-header.el-menu {
|
||||
.el-menu-item:not(.is-disabled) {
|
||||
border-bottom: 0 !important;
|
||||
|
||||
&:hover {
|
||||
color: #FFF !important;
|
||||
background: rgba(54, 25, 88, 0.9) !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
color: #FFF !important;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-sub-menu {
|
||||
.el-sub-menu__title {
|
||||
color: #FFF !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
&.is-opened {
|
||||
.el-sub-menu__title {
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs {
|
||||
|
||||
.el-tabs__header {
|
||||
width: 60px;
|
||||
margin: 0 !important;
|
||||
background: rgba(54, 25, 88, 0.8);
|
||||
|
||||
.el-tabs__active-bar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap {
|
||||
margin-right: 0 !important;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
color: #FFF;
|
||||
width: 100% !important;
|
||||
height: 60px !important;
|
||||
padding: 0 !important;
|
||||
line-height: 60px !important;
|
||||
text-align: center !important;
|
||||
|
||||
&.is-active {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
&:hover:not(.is-active) {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__content {
|
||||
width: 220px !important;
|
||||
height: 100% !important;
|
||||
//background: red;
|
||||
text-align: center;
|
||||
background: #FFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "layout",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user