Commit 45ceba5f authored by jiaxu.yan's avatar jiaxu.yan

fix: 框架文件调整

parent 79dcff0f
<template>
<div v-if="currentPath === '' || currentPath === null || currentPath === 'R' || currentPath === 'G'" :class="classObj" class="app-wrapper">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<div
v-if="
currentPath === '' ||
currentPath === null ||
currentPath === 'R' ||
currentPath === 'G'
"
:class="classObj"
class="app-wrapper"
>
<div
v-if="device === 'mobile' && sidebar.opened"
class="drawer-bg"
@click="handleClickOutside"
/>
<sidebar class="sidebar-container" />
<div class="main-container">
<div class="nav-container fixed-header">
......@@ -8,10 +21,14 @@
</div>
<div class="nav-container-two">
<div class="placeholder" />
<tags-view />
<navbar />
<tags-view v-if="themeType && themeType !== '8'" />
<navbar v-if="themeType && themeType !== '8'" />
</div>
<el-card v-if="themeType && themeType === '8'" style="margin:.75rem">
<app-main />
</el-card>
<app-main v-else />
<right-panel>
<settings />
</right-panel>
......@@ -27,6 +44,7 @@ import RightPanel from '@/components/RightPanel'
import settings from '@/layout/components/Settings/index.vue'
import { Navbar, Sidebar, AppMain, TagsView, Header } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { Card } from 'element-ui'
export default {
name: 'Layout',
......@@ -45,6 +63,9 @@ export default {
// R正常路由跳转 Y打开新页且没有菜单结构 G打开新页有菜单结构
return this.$route.meta.jumpType
},
themeType() {
return localStorage.getItem('theme')
},
sidebar() {
return this.$store.state.app.sidebar
},
......@@ -74,6 +95,4 @@ export default {
}
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>
//table列表title样式
.tableTitle{
margin: 20px 0;
.tableTitle {
color: #333333;
font-size: 0.88rem;
font-size: 1rem;
font-family: Microsoft YaHei;
font-weight: 700;
text-align: LEFT;
position: absolute;
left: 0.25rem;
top: 0.45rem;
// background-color: #000;
}
.container {
margin: 0px !important;
position: relative;
}
.el-tree{
.el-tree {
font-size: 14px;
}
//登录验证码popover位置
.verifyPopover{
left: 576px!important;
.verifyPopover {
left: 576px !important;
padding: 12px 10px;
}
.search{
border-bottom: 14px solid #FAFAFB;
background-color: #FAFAFB;
.el-form-item{
.el-form-item__label{
.search {
border-radius: 0.25rem 0.25rem 0rem 0rem;
display: flex;
justify-content: flex-end;
.el-form-item {
.el-form-item__label {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: #171725;
}
.el-input__inner{
background: #FFFFFF;
.el-input__inner {
background: #ffffff;
border-radius: 0.25rem;
border: 1px solid #E2E2EA;
border: 1px solid #e2e2ea;
}
// input 修改placeholder颜色
::-webkit-input-placeholder {
......@@ -39,9 +47,9 @@
}
}
}
.queryBtn{
.queryBtn {
border: none;
background: #2288FF;
background: #2288ff;
border-radius: 0.25rem;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
......@@ -50,21 +58,21 @@
&:hover {
opacity: 0.85;
border: none;
background: #2288FF;
background: #2288ff;
color: #fff;
border-radius: 10px;
border-radius: 0.25rem;
}
&:focus {
opacity: 0.85;
border: none;
background: #F1F1F5;
background: #2288ff;
color: #696974;
border-radius: 10px;
border-radius: 0.25rem;
}
}
.resetBtn{
.resetBtn {
border: none;
background: #2288FF;
background: #2288ff;
border-radius: 0.25rem;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
......@@ -73,45 +81,45 @@
&:hover {
opacity: 0.85;
border: none;
background: #2288FF;
background: #2288ff;
color: #fff;
border-radius: 10px;
border-radius: 0.25rem;
}
&:focus {
opacity: 0.85;
border: none;
background: #F1F1F5;
background: #2288ff;
color: #696974;
border-radius: 10px;
border-radius: 0.25rem;
}
}
.addBtn{
.addBtn {
border: none;
background: #F1F1F5;
border-radius: 10px;
background: #2288ff;
border-radius: 0.25rem;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 16px;
color: #696974;
color: #fff;
&:hover {
opacity: 0.85;
border: none;
background: #F1F1F5;
color: #696974;
border-radius: 10px;
background: #2288ff;
color: #fff;
border-radius: 0.25rem;
}
&:focus {
opacity: 0.85;
border: none;
background: #F1F1F5;
background: #2288ff;
color: #696974;
border-radius: 10px;
border-radius: 0.25rem;
}
}
.importBtn{
.importBtn {
border: none;
background: #F1F1F5;
border-radius: 10px;
background: #2288ff;
border-radius: 0.25rem;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 16px;
......@@ -119,122 +127,122 @@
&:hover {
opacity: 0.85;
border: none;
background: #F1F1F5;
background: #2288ff;
color: #696974;
border-radius: 10px;
border-radius: 0.25rem;
}
&:focus {
opacity: 0.85;
border: none;
background: #F1F1F5;
background: #2288ff;
color: #696974;
border-radius: 10px;
border-radius: 0.25rem;
}
}
.exportBtn{
.exportBtn {
border: none;
background: #F1F1F5!important;
border-radius: 10px!important;
background: #2288ff !important;
border-radius: 0.25rem !important;
font-family: PingFangSC, PingFang SC;
font-weight: 600!important;
font-size: 16px!important;
color: #696974!important;
font-weight: 600 !important;
font-size: 16px !important;
color: #fff !important;
&:hover {
opacity: 0.85;
border: none;
background: #F1F1F5!important;
color: #696974!important;
border-radius: 10px!important;
background: #2288ff !important;
color: #fff !important;
border-radius: 0.25rem !important;
}
&:focus {
opacity: 0.85;
border: none;
background: #F1F1F5!important;
color: #696974!important;
border-radius: 10px!important;
background: #f1f1f5 !important;
color: #696974 !important;
border-radius: 0.25rem !important;
}
}
//修改按钮文字类型样式
.updateBtn{
.updateBtn {
font-family: Microsoft YaHei, Microsoft YaHei-400;
font-weight: 400;
text-align: LEFT;
color: #0062FF;
color: #337AB7;
}
.delBtn{
.delBtn {
font-family: Microsoft YaHei, Microsoft YaHei-400;
font-weight: 400;
text-align: LEFT;
color: #FF4852;
color: #337AB7;
}
//tree的选中的check框样式
.el-checkbox__input.is-checked .el-checkbox__inner{
background-color: #0062FF;
.el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #0062ff;
}
// switch开样式
.el-switch.is-checked .el-switch__core{
border-color: #0062FF;
background-color: #0062FF;
.el-switch.is-checked .el-switch__core {
border-color: #0062ff;
background-color: #0062ff;
}
// radio开样式
.el-radio__input.is-checked .el-radio__inner{
border-color: #0062FF;
background-color: #0062FF;
.el-radio__input.is-checked .el-radio__inner {
border-color: #0062ff;
background-color: #0062ff;
}
// radio选中的文字样式
.el-radio__input.is-checked+.el-radio__label{
color: #0062FF;
.el-radio__input.is-checked + .el-radio__label {
color: #0062ff;
}
// table列表表头样式
.el-table th .cell{
.el-table th .cell {
background: #f4f4f4;
font-size: 0.88rem;
font-family: Poppins, Poppins;
font-weight: bold;
text-align: center;
color: #242A30;
color: #242a30;
}
// table列表内容样式
.el-table td .cell{
.el-table td .cell {
font-size: 16px;
font-family: Poppins, Poppins;
font-weight: 500;
text-align: LEFT;
color: #44444F;
color: #44444f;
}
.navbar{
background-color: #FAFAFB!important;
.navbar {
background-color: #fafafb !important;
}
.app-main{
background-color: #FAFAFB!important;
.app-main {
background-color: #fff !important;
}
.nav-container-two{
background-color: #FAFAFB!important;
.placeholder{
background-color: #FAFAFB!important;
.nav-container-two {
background-color: #fafafb !important;
.placeholder {
background-color: #fafafb !important;
}
}
.tags-view-container{
background-color: #FAFAFB!important;
.tags-view-container {
background-color: #fafafb !important;
}
.tags-view-container .tags-view-wrapper .tags-view-item{
border-radius: 16px!important;
border: 1px solid #E2E2EA!important;
.tags-view-container .tags-view-wrapper .tags-view-item {
border-radius: 16px !important;
border: 1px solid #e2e2ea !important;
font-family: PingFangSC, PingFang SC;
font-weight: 400!important;
font-size: 14px!important;
color: #696974!important;
background: #FAFAFB!important;
}
.tags-view-container .tags-view-wrapper .tags-view-item.active{
border-radius: 16px!important;
border: 1px solid #E2E2EA!important;
font-weight: 400 !important;
font-size: 14px !important;
color: #696974 !important;
background: #fafafb !important;
}
.tags-view-container .tags-view-wrapper .tags-view-item.active {
border-radius: 16px !important;
border: 1px solid #e2e2ea !important;
font-family: PingFangSC, PingFang SC;
font-weight: 400!important;
font-size: 14px!important;
color: #696974!important;
background: #F1F1F5!important;
font-weight: 400 !important;
font-size: 14px !important;
color: #696974 !important;
background: #f1f1f5 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #242A30;
.el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #242a30;
}
@import "../../styles/mixin";
@import "./variables";
@import '../../styles/mixin';
@import './variables';
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
&.mobile.openSidebar{
&.mobile.openSidebar {
position: fixed;
top: 0;
}
}
.nav-container{
.nav-container {
/*height: 70px;*/
//position: absolute;
top: 0;
width: 100%;
z-index: 1001;
}
.nav-container-two{
.nav-container-two {
width: 100%;
z-index: 1001;
background-color: #ecf0f1;
.placeholder {
height: 1.2vh;
width: 100%;
background-color: #F4F4F4;
background-color: #f4f4f4;
}
}
.drawer-bg {
......@@ -47,7 +48,7 @@
}
.hideSidebar .fixed-header {
width: calc(100% - #{ $sideHideWidth })
width: calc(100% - #{$sideHideWidth});
}
.mobile .fixed-header {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment