mirror of
https://gitee.com/lyt-top/vue-next-admin
synced 2026-07-08 14:39:53 +08:00
'admin-22.12.06:发布v1.2.0版本，具体更新内容查看CHANGELOG.md'
This commit is contained in:
lyt
11
CHANGELOG.md
11
CHANGELOG.md
@ -2,6 +2,17 @@
|
||||
|
||||
🎉🎉🔥 `vue-prev-admin` 基于 vue2.x + webpack + element ui，适配手机、平板、pc 的后台开源免费模板库（vue3.x 请切换 master 分支）
|
||||
|
||||
## 1.2.0
|
||||
|
||||
`2022.12.06`
|
||||
|
||||
- 🎉 新增 版本升级提示
|
||||
- 🎉 新增 主题色修改
|
||||
- 🎉 新增 深色模式
|
||||
- 🐞 优化 外链界面 `/src/layout/routerView/link.vue`
|
||||
- 🐞 修复 `菜单水平折叠` 刷新界面还原默认值问题
|
||||
- 💔 移除 `vue.config.js` 打包加时间戳方法，因为打包报错了
|
||||
|
||||
## 1.1.1
|
||||
|
||||
`2022.11.17`
|
||||
|
||||
28
README.md
28
README.md
@ -38,7 +38,9 @@
|
||||
|
||||
#### ⚡ 使用说明
|
||||
|
||||
建议使用 cnpm，因为 yarn 有时会报错。`npm install` 安装报错的话，请使用 `cnpm`。
|
||||
建议使用 cnpm，因为 yarn 有时会报错。`npm install` 安装报错的话，请使用 `cnpm install`。
|
||||
|
||||
> 注意：`node` 需大于 `12.xxx` 小于等于 `v16.14.0`，否则安装依赖将报错。
|
||||
|
||||
```bash
|
||||
# 克隆项目
|
||||
@ -60,24 +62,30 @@ cnpm run dev
|
||||
cnpm run build
|
||||
```
|
||||
|
||||
#### 📚 开发文档
|
||||
|
||||
- 查看开发文档：<a href="https://lyt-top.gitee.io/vue-next-admin-doc-preview" target="_blank">vue-next-admin-doc</a>
|
||||
|
||||
#### 💯 学习交流加 QQ 群
|
||||
|
||||
- 若加群了没同意（一般秒过），那就是群满了（500 人群），请换一个群试试。群会定期清理半年（6 个月）未发言的群友，资源有限，请谅解。建议勿加多群，可能会误伤！
|
||||
- 查看开发文档、<a href="https://lyt-top.gitee.io/vue-next-admin-preview/#/login" target="_blank">vue-next-admin</a> 开发文档正在编写中...
|
||||
- 群号码：
|
||||
1 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi">665452019</a>
|
||||
2 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=zVfy3gNy7pNWVK3kMduDzwU369PZg2fw&jump_from=webapi">766356862</a>
|
||||
3 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=02EWb5P2JkP-8iwzaDadgFdxA0HSHPpn&jump_from=webapi">795345435</a>
|
||||
> 若加群了没同意（一般秒过），那就是群满了（500 人群），请换一个群试试。群会定期清理半年（6 个月）未发言的群友，资源有限，请谅解。建议勿加多群，可能会误伤！微信群由于只有 `7天有效` 就不放这里了。
|
||||
|
||||
- 1 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi">665452019</a>
|
||||
- 2 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=zVfy3gNy7pNWVK3kMduDzwU369PZg2fw&jump_from=webapi">766356862</a>
|
||||
- 3 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=02EWb5P2JkP-8iwzaDadgFdxA0HSHPpn&jump_from=webapi">795345435</a>
|
||||
- 4 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=0gTFO04WwkeZZ6R4lju6gucbeXHK-wNd&jump_from=webapi">736626228</a>
|
||||
|
||||
<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi">
|
||||
<img src="https://img-blog.csdnimg.cn/35e00f12a3fe4820892ec630ca72f15f.png" width="220" height="220" alt="vue-next-admin 讨论群1" title="vue-next-admin 讨论群1"/>
|
||||
<img src="https://img-blog.csdnimg.cn/35e00f12a3fe4820892ec630ca72f15f.png" width="220" height="220" alt="vue-next-admin 讨论群1" title="vue-next-admin 讨论群1"/>
|
||||
</a>
|
||||
<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=zVfy3gNy7pNWVK3kMduDzwU369PZg2fw&jump_from=webapi">
|
||||
<img src="https://img-blog.csdnimg.cn/5f1b548abd9f434eb41edde31d1c1fa9.png" width="220" height="220" alt="vue-next-admin 讨论群2" title="vue-next-admin 讨论群2"/>
|
||||
<img src="https://img-blog.csdnimg.cn/5f1b548abd9f434eb41edde31d1c1fa9.png" width="220" height="220" alt="vue-next-admin 讨论群2" title="vue-next-admin 讨论群2"/>
|
||||
</a>
|
||||
<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=02EWb5P2JkP-8iwzaDadgFdxA0HSHPpn&jump_from=webapi">
|
||||
<img src="https://img-blog.csdnimg.cn/70c8a012dd304246bddeac2184c4ab3a.png" width="220" height="220" alt="vue-next-admin 讨论群3" title="vue-next-admin 讨论群3"/>
|
||||
<img src="https://img-blog.csdnimg.cn/70c8a012dd304246bddeac2184c4ab3a.png" width="220" height="220" alt="vue-next-admin 讨论群3" title="vue-next-admin 讨论群3"/>
|
||||
</a>
|
||||
<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=0gTFO04WwkeZZ6R4lju6gucbeXHK-wNd&jump_from=webapi">
|
||||
<img src="https://img-blog.csdnimg.cn/e5c9704eed1342bc9d9e74b37203402d.png" width="220" height="220" alt="vue-next-admin 讨论群4" title="vue-next-admin 讨论群4"/>
|
||||
|
||||
#### 💒 集成后端
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-prev-admin",
|
||||
"version": "1.1.1",
|
||||
"version": "1.2.0",
|
||||
"private": true,
|
||||
"description": "vue2 webpack admin template",
|
||||
"author": "lyt_20201208",
|
||||
|
||||
15
src/App.vue
15
src/App.vue
@ -2,21 +2,34 @@
|
||||
<div id="app">
|
||||
<router-view />
|
||||
<Setings ref="setingsRef" />
|
||||
<Upgrade v-if="getVersion" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from '/package.json';
|
||||
import setIntroduction from '@/utils/setIconfont.js';
|
||||
import { Local } from '@/utils/storage.js';
|
||||
import Setings from '@/layout/navBars/breadcrumb/setings.vue';
|
||||
import Upgrade from '@/layout/upgrade/index.vue';
|
||||
export default {
|
||||
name: 'App',
|
||||
components: { Setings },
|
||||
components: { Setings, Upgrade },
|
||||
mounted() {
|
||||
this.initSetIconfont();
|
||||
this.openSetingsDrawer();
|
||||
this.getLayoutThemeConfig();
|
||||
},
|
||||
computed: {
|
||||
// 获取版本号
|
||||
getVersion() {
|
||||
let isVersion = false;
|
||||
if (this.$route.path !== '/login') {
|
||||
if ((Local.get('version') && Local.get('version') !== config.version) || !Local.get('version')) isVersion = true;
|
||||
}
|
||||
return isVersion;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 设置初始化，防止刷新时恢复默认
|
||||
initSetIconfont() {
|
||||
|
||||
@ -134,6 +134,7 @@ export default {
|
||||
fourIsFooter: 'Open footer',
|
||||
fourIsGrayscale: 'Grey model',
|
||||
fourIsInvert: 'Color weak mode',
|
||||
fourIsDark: 'Dark Mode',
|
||||
fourIsWartermark: 'Turn on watermark',
|
||||
fourWartermarkText: 'Watermark copy',
|
||||
fiveTitle: 'Other settings',
|
||||
@ -152,4 +153,12 @@ export default {
|
||||
copyTextSuccess: 'Copy succeeded!',
|
||||
copyTextError: 'Copy failed!',
|
||||
},
|
||||
upgrade: {
|
||||
title: 'New version',
|
||||
msg: 'The new version is available, please update it now! Dont worry, the update is fast!',
|
||||
desc: 'Prompt: Update will restore the default configuration',
|
||||
btnOne: 'Cruel refusal',
|
||||
btnTwo: 'Update now',
|
||||
btnTwoLoading: 'Updating',
|
||||
},
|
||||
};
|
||||
|
||||
@ -134,6 +134,7 @@ export default {
|
||||
fourIsFooter: '开启 Footer',
|
||||
fourIsGrayscale: '灰色模式',
|
||||
fourIsInvert: '色弱模式',
|
||||
fourIsDark: '深色模式',
|
||||
fourIsWartermark: '开启水印',
|
||||
fourWartermarkText: '水印文案',
|
||||
fiveTitle: '其它设置',
|
||||
@ -152,4 +153,12 @@ export default {
|
||||
copyTextSuccess: '复制成功！',
|
||||
copyTextError: '复制失败！',
|
||||
},
|
||||
upgrade: {
|
||||
title: '新版本升级',
|
||||
msg: '新版本来啦，马上更新尝鲜吧！不用担心，更新很快的哦！',
|
||||
desc: '提示：更新会还原默认配置',
|
||||
btnOne: '残忍拒绝',
|
||||
btnTwo: '马上更新',
|
||||
btnTwoLoading: '更新中',
|
||||
},
|
||||
};
|
||||
|
||||
@ -134,6 +134,7 @@ export default {
|
||||
fourIsFooter: '開啟 Footer',
|
||||
fourIsGrayscale: '灰色模式',
|
||||
fourIsInvert: '色弱模式',
|
||||
fourIsDark: '深色模式',
|
||||
fourIsWartermark: '開啟浮水印',
|
||||
fourWartermarkText: '浮水印文案',
|
||||
fiveTitle: '其它設定',
|
||||
@ -152,4 +153,12 @@ export default {
|
||||
copyTextSuccess: '複製成功！',
|
||||
copyTextError: '複製失敗！',
|
||||
},
|
||||
upgrade: {
|
||||
title: '新版本陞級',
|
||||
msg: '新版本來啦，馬上更新嘗鮮吧！ 不用擔心，更新很快的哦！',
|
||||
desc: '提示：更新會還原默認配寘',
|
||||
btnOne: '殘忍拒絕',
|
||||
btnTwo: '馬上更新',
|
||||
btnTwoLoading: '更新中',
|
||||
},
|
||||
};
|
||||
|
||||
@ -155,11 +155,11 @@ export default {
|
||||
.layout-columns-aside {
|
||||
width: 70px;
|
||||
height: 100%;
|
||||
background: var(--bg-columnsMenuBar);
|
||||
background: var(--prev-bg-columnsMenuBar);
|
||||
ul {
|
||||
position: relative;
|
||||
li {
|
||||
color: var(--bg-columnsMenuBarColor);
|
||||
color: var(--prev-bg-columnsMenuBarColor);
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
@ -191,16 +191,16 @@ export default {
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--bg-columnsMenuBarColor);
|
||||
color: var(--prev-bg-columnsMenuBarColor);
|
||||
}
|
||||
}
|
||||
.layout-columns-active {
|
||||
color: #ffffff;
|
||||
color: var(--prev-color-text-white);
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
.columns-round {
|
||||
background: var(--color-primary);
|
||||
color: #ffffff;
|
||||
background: var(--prev-color-primary);
|
||||
color: var(--prev-color-text-white);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 2px;
|
||||
|
||||
@ -22,7 +22,7 @@ export default {
|
||||
display: flex;
|
||||
&-warp {
|
||||
margin: auto;
|
||||
color: #9e9e9e;
|
||||
color: var(--prev-color-text-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,7 +40,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
|
||||
color: var(--color-primary);
|
||||
color: var(--prev-color-primary);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
animation: logoAnimation 0.3s ease-in-out;
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Local } from '@/utils/storage.js';
|
||||
export default {
|
||||
name: 'layoutBreadcrumb',
|
||||
data() {
|
||||
@ -59,6 +60,12 @@ export default {
|
||||
// breadcrumb icon 点击菜单展开与收起
|
||||
onThemeConfigChange() {
|
||||
this.$store.state.themeConfig.themeConfig.isCollapse = !this.$store.state.themeConfig.themeConfig.isCollapse;
|
||||
this.setLocalThemeConfig();
|
||||
},
|
||||
// 存储布局配置
|
||||
setLocalThemeConfig() {
|
||||
Local.remove('themeConfigPrev');
|
||||
Local.set('themeConfigPrev', this.$store.state.themeConfig.themeConfig);
|
||||
},
|
||||
// 递归设置 breadcrumb
|
||||
getBreadcrumbList(arr) {
|
||||
@ -114,19 +121,19 @@ export default {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
margin-right: 15px;
|
||||
color: var(--bg-topBarColor);
|
||||
color: var(--prev-bg-topBarColor);
|
||||
opacity: 0.8;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.layout-navbars-breadcrumb-span {
|
||||
opacity: 0.7;
|
||||
color: var(--bg-topBarColor);
|
||||
color: var(--prev-bg-topBarColor);
|
||||
}
|
||||
.layout-navbars-breadcrumb-iconfont {
|
||||
font-size: 14px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
& ::v-deep .el-breadcrumb__separator {
|
||||
opacity: 0.7;
|
||||
color: var(--bg-topBarColor);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -70,8 +70,8 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 15px;
|
||||
background: var(--bg-topBar);
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #f1f2f3;
|
||||
background: var(--prev-bg-topBar);
|
||||
border-bottom: 1px solid var(--prev-border-color-lighter);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -55,9 +55,7 @@ export default {
|
||||
return (
|
||||
restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
|
||||
restaurant.meta.title.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
|
||||
this.$t(restaurant.meta.title)
|
||||
.toLowerCase()
|
||||
.indexOf(queryString.toLowerCase()) > -1
|
||||
this.$t(restaurant.meta.title).toLowerCase().indexOf(queryString.toLowerCase()) > -1
|
||||
);
|
||||
};
|
||||
},
|
||||
|
||||
@ -9,24 +9,39 @@
|
||||
@close="onDrawerClose"
|
||||
>
|
||||
<el-scrollbar class="layout-breadcrumb-seting-bar">
|
||||
<!-- 全局主题 -->
|
||||
<el-divider content-position="left">{{ $t('message.layout.oneTitle') }}</el-divider>
|
||||
<div class="layout-breadcrumb-seting-bar-flex">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">primary</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-color-picker v-model="getThemeConfig.primary" size="small" @change="onColorPickerChange"> </el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsDark') }}</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isIsDark" :width="35" @change="onAddDarkChange"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 界面设置 -->
|
||||
<el-divider content-position="left">{{ $t('message.layout.threeTitle') }}</el-divider>
|
||||
<div class="layout-breadcrumb-seting-bar-flex">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsCollapse') }}</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isCollapse" @change="setLocalThemeConfig"></el-switch>
|
||||
<el-switch v-model="getThemeConfig.isCollapse" :width="35" @change="setLocalThemeConfig"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsUniqueOpened') }}</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isUniqueOpened" @change="setLocalThemeConfig"></el-switch>
|
||||
<el-switch v-model="getThemeConfig.isUniqueOpened" :width="35" @change="setLocalThemeConfig"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsFixedHeader') }}</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isFixedHeader" @change="setLocalThemeConfig"></el-switch>
|
||||
<el-switch v-model="getThemeConfig.isFixedHeader" :width="35" @change="setLocalThemeConfig"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -35,7 +50,7 @@
|
||||
<div class="layout-breadcrumb-seting-bar-flex">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsShowLogo') }}</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isShowLogo" @change="setLocalThemeConfig"></el-switch>
|
||||
<el-switch v-model="getThemeConfig.isShowLogo" :width="35" @change="setLocalThemeConfig"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -47,6 +62,7 @@
|
||||
<el-switch
|
||||
v-model="getThemeConfig.isBreadcrumb"
|
||||
:disabled="getThemeConfig.layout === 'classic' || getThemeConfig.layout === 'transverse'"
|
||||
:width="35"
|
||||
@change="setLocalThemeConfig"
|
||||
></el-switch>
|
||||
</div>
|
||||
@ -54,43 +70,43 @@
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsBreadcrumbIcon') }}</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isBreadcrumbIcon" @change="setLocalThemeConfig"></el-switch>
|
||||
<el-switch v-model="getThemeConfig.isBreadcrumbIcon" :width="35" @change="setLocalThemeConfig"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsTagsview') }}</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isTagsview" @change="setLocalThemeConfig"></el-switch>
|
||||
<el-switch v-model="getThemeConfig.isTagsview" :width="35" @change="setLocalThemeConfig"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsTagsviewIcon') }}</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isTagsviewIcon" @change="setLocalThemeConfig"></el-switch>
|
||||
<el-switch v-model="getThemeConfig.isTagsviewIcon" :width="35" @change="setLocalThemeConfig"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsCacheTagsView') }}</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isCacheTagsView" @change="setLocalThemeConfig"></el-switch>
|
||||
<el-switch v-model="getThemeConfig.isCacheTagsView" :width="35" @change="setLocalThemeConfig"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsFooter') }}</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isFooter" @change="setLocalThemeConfig"></el-switch>
|
||||
<el-switch v-model="getThemeConfig.isFooter" :width="35" @change="setLocalThemeConfig"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsGrayscale') }}</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isGrayscale" @change="onAddFilterChange('grayscale')"></el-switch>
|
||||
<el-switch v-model="getThemeConfig.isGrayscale" :width="35" @change="onAddFilterChange('grayscale')"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsInvert') }}</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isInvert" @change="onAddFilterChange('invert')"></el-switch>
|
||||
<el-switch v-model="getThemeConfig.isInvert" :width="35" @change="onAddFilterChange('invert')"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -224,14 +240,10 @@
|
||||
<script>
|
||||
import ClipboardJS from 'clipboard';
|
||||
import { Local } from '@/utils/storage.js';
|
||||
import { useChangeColor } from '@/utils/theme.js';
|
||||
import config from '/package.json';
|
||||
export default {
|
||||
name: 'layoutBreadcrumbSeting',
|
||||
data() {
|
||||
return {
|
||||
isCollapse: false,
|
||||
layout: 'defaults',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 获取布局配置信息
|
||||
getThemeConfig() {
|
||||
@ -255,13 +267,37 @@ export default {
|
||||
this.initLayoutConfig();
|
||||
},
|
||||
methods: {
|
||||
// 全局主题
|
||||
onColorPickerChange() {
|
||||
if (!this.getThemeConfig.primary) return;
|
||||
// 颜色加深
|
||||
document.documentElement.style.setProperty('--prev-color-primary', this.getThemeConfig.primary);
|
||||
// 颜色变浅
|
||||
for (let i = 1; i <= 9; i++) {
|
||||
document.documentElement.style.setProperty(
|
||||
`--prev-color-primary-light-${i}`,
|
||||
`${useChangeColor().getLightColor(this.getThemeConfig.primary, i / 10)}`
|
||||
);
|
||||
}
|
||||
this.setLocalThemeConfig();
|
||||
},
|
||||
// 深色模式
|
||||
onAddDarkChange() {
|
||||
const body = document.documentElement;
|
||||
if (this.getThemeConfig.isIsDark) body.setAttribute('data-theme', 'dark');
|
||||
else body.setAttribute('data-theme', '');
|
||||
},
|
||||
// 初始化：刷新页面时，设置了值，直接取缓存中的值进行初始化
|
||||
initLayoutConfig() {
|
||||
window.addEventListener('load', () => {
|
||||
// 默认样式
|
||||
this.onColorPickerChange();
|
||||
// 灰色模式
|
||||
if (this.$store.state.themeConfig.themeConfig.isGrayscale) this.onAddFilterChange('grayscale');
|
||||
// 色弱模式
|
||||
if (this.$store.state.themeConfig.themeConfig.isInvert) this.onAddFilterChange('invert');
|
||||
// 深色模式
|
||||
if (this.$store.state.themeConfig.themeConfig.isIsDark) this.onAddDarkChange();
|
||||
// 语言国际化
|
||||
if (Local.get('themeConfigPrev')) this.$i18n.locale = Local.get('themeConfigPrev').globalI18n;
|
||||
});
|
||||
@ -333,7 +369,7 @@ export default {
|
||||
},
|
||||
// 菜单 / 顶栏背景等
|
||||
onBgColorPickerChange(bg, rgb) {
|
||||
document.documentElement.style.setProperty(`--bg-${bg}`, rgb);
|
||||
document.documentElement.style.setProperty(`--prev-bg-${bg}`, rgb);
|
||||
this.setLocalThemeConfigStyle();
|
||||
},
|
||||
// 一键复制配置
|
||||
@ -355,6 +391,7 @@ export default {
|
||||
onResetConfigClick() {
|
||||
Local.clear();
|
||||
window.location.reload();
|
||||
Local.set('version', config.version);
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -372,7 +409,7 @@ export default {
|
||||
align-items: center;
|
||||
&-label {
|
||||
flex: 1;
|
||||
color: #666666;
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
}
|
||||
.layout-drawer-content-flex {
|
||||
@ -391,16 +428,16 @@ export default {
|
||||
.el-container {
|
||||
height: 100%;
|
||||
.el-aside-dark {
|
||||
background-color: #b3c0d1;
|
||||
background-color: var(--prev-color-seting-header);
|
||||
}
|
||||
.el-aside {
|
||||
background-color: #d3dce6;
|
||||
background-color: var(--prev-color-seting-aside);
|
||||
}
|
||||
.el-header {
|
||||
background-color: #b3c0d1;
|
||||
background-color: var(--prev-color-seting-header);
|
||||
}
|
||||
.el-main {
|
||||
background-color: #e9eef3;
|
||||
background-color: var(--prev-color-seting-main);
|
||||
}
|
||||
}
|
||||
.el-circular {
|
||||
@ -411,7 +448,7 @@ export default {
|
||||
}
|
||||
.drawer-layout-active {
|
||||
border: 1px solid;
|
||||
border-color: var(--color-primary);
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.layout-tips-warp,
|
||||
.layout-tips-warp-active {
|
||||
@ -421,7 +458,7 @@ export default {
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px solid;
|
||||
border-color: #8cc5ff;
|
||||
border-color: var(--prev-color-primary-light-5);
|
||||
border-radius: 100%;
|
||||
padding: 4px;
|
||||
.layout-tips-box {
|
||||
@ -430,7 +467,7 @@ export default {
|
||||
height: 30px;
|
||||
z-index: 9;
|
||||
border: 1px solid;
|
||||
border-color: #8cc5ff;
|
||||
border-color: var(--prev-color-primary-light-5);
|
||||
border-radius: 100%;
|
||||
.layout-tips-txt {
|
||||
transition: inherit;
|
||||
@ -440,11 +477,11 @@ export default {
|
||||
line-height: 1;
|
||||
letter-spacing: 2px;
|
||||
white-space: nowrap;
|
||||
color: #8cc5ff;
|
||||
color: var(--prev-color-primary-light-5);
|
||||
text-align: center;
|
||||
transform: rotate(30deg);
|
||||
left: -1px;
|
||||
background-color: #e9eef3;
|
||||
background-color: var(--prev-color-seting-main);
|
||||
width: 32px;
|
||||
height: 17px;
|
||||
line-height: 17px;
|
||||
@ -453,13 +490,13 @@ export default {
|
||||
}
|
||||
.layout-tips-warp-active {
|
||||
border: 1px solid;
|
||||
border-color: var(--color-primary);
|
||||
border-color: var(--prev-color-primary);
|
||||
.layout-tips-box {
|
||||
border: 1px solid;
|
||||
border-color: var(--color-primary);
|
||||
border-color: var(--prev-color-primary);
|
||||
.layout-tips-txt {
|
||||
color: var(--color-primary) !important;
|
||||
background-color: #e9eef3 !important;
|
||||
color: var(--prev-color-primary) !important;
|
||||
background-color: var(--prev-color-seting-main) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -467,18 +504,18 @@ export default {
|
||||
.el-circular {
|
||||
transition: all 0.3s ease-in-out;
|
||||
border: 1px solid;
|
||||
border-color: var(--color-primary);
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.layout-tips-warp {
|
||||
transition: all 0.3s ease-in-out;
|
||||
border-color: var(--color-primary);
|
||||
border-color: var(--prev-color-primary);
|
||||
.layout-tips-box {
|
||||
transition: inherit;
|
||||
border-color: var(--color-primary);
|
||||
border-color: var(--prev-color-primary);
|
||||
.layout-tips-txt {
|
||||
transition: inherit;
|
||||
color: var(--color-primary) !important;
|
||||
background-color: #e9eef3 !important;
|
||||
color: var(--prev-color-primary) !important;
|
||||
background-color: var(--prev-color-seting-main) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -240,13 +240,13 @@ export default {
|
||||
&-icon {
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
color: var(--bg-topBarColor);
|
||||
color: var(--prev-bg-topBarColor);
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
background: var(--prev-color-hover);
|
||||
i {
|
||||
display: inline-block;
|
||||
animation: logoAnimation 0.3s ease-in-out;
|
||||
@ -254,7 +254,7 @@ export default {
|
||||
}
|
||||
}
|
||||
& ::v-deep .el-dropdown {
|
||||
color: var(--bg-topBarColor);
|
||||
color: var(--prev-bg-topBarColor);
|
||||
}
|
||||
& ::v-deep .el-badge {
|
||||
height: 40px;
|
||||
|
||||
@ -61,14 +61,14 @@ export default {
|
||||
.layout-navbars-breadcrumb-user-news {
|
||||
.head-box {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
border-bottom: 1px solid var(--prev-border-color-lighter);
|
||||
box-sizing: border-box;
|
||||
color: #333333;
|
||||
color: var(--prev-color-text-primary);
|
||||
justify-content: space-between;
|
||||
height: 35px;
|
||||
align-items: center;
|
||||
.head-box-btn {
|
||||
color: var(--color-primary);
|
||||
color: var(--prev-color-primary);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
@ -85,12 +85,12 @@ export default {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.content-box-msg {
|
||||
color: #999999;
|
||||
color: var(--prev-color-text-secondary);
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.content-box-time {
|
||||
color: #999999;
|
||||
color: var(--prev-color-text-secondary);
|
||||
}
|
||||
}
|
||||
.content-box-empty {
|
||||
@ -107,14 +107,14 @@ export default {
|
||||
}
|
||||
.foot-box {
|
||||
height: 35px;
|
||||
color: var(--color-primary);
|
||||
color: var(--prev-color-primary);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: 1px solid #ebeef5;
|
||||
border-top: 1px solid var(--prev-border-color-lighter);
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -298,8 +298,8 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.layout-navbars-tagsview {
|
||||
flex: 1;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #f1f2f3;
|
||||
background-color: var(--prev-bg-white);
|
||||
border-bottom: 1px solid var(--prev-border-color-lighter);
|
||||
& ::v-deep .is-vertical {
|
||||
display: none !important;
|
||||
}
|
||||
@ -312,7 +312,7 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
color: #606266;
|
||||
color: var(--prev-color-text-regular);
|
||||
font-size: 12px;
|
||||
padding: 0 15px;
|
||||
&-li {
|
||||
@ -320,7 +320,7 @@ export default {
|
||||
line-height: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #ebeef5;
|
||||
border: 1px solid var(--prev-border-color-lighter);
|
||||
padding: 0 12px 0 15px;
|
||||
margin-right: 5px;
|
||||
border-radius: 2px;
|
||||
@ -336,7 +336,7 @@ export default {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: var(--color-primary);
|
||||
background: var(--prev-color-primary);
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transform: scale3d(0.7, 1, 1);
|
||||
@ -344,7 +344,7 @@ export default {
|
||||
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
|
||||
}
|
||||
&:hover {
|
||||
color: #ffffff;
|
||||
color: var(--prev-color-text-white);
|
||||
transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
|
||||
border-color: transparent;
|
||||
&::before {
|
||||
@ -353,7 +353,7 @@ export default {
|
||||
border-radius: 2px;
|
||||
}
|
||||
.is-tagsview-icon {
|
||||
color: #ffffff;
|
||||
color: var(--prev-color-text-white);
|
||||
transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
|
||||
}
|
||||
}
|
||||
@ -361,7 +361,7 @@ export default {
|
||||
position: relative;
|
||||
left: -5px;
|
||||
top: 1px;
|
||||
color: #ffffff;
|
||||
color: var(--prev-color-text-white);
|
||||
}
|
||||
&-icon {
|
||||
border-radius: 100%;
|
||||
@ -373,12 +373,12 @@ export default {
|
||||
top: 1px;
|
||||
}
|
||||
.is-tagsview-icon {
|
||||
color: #606266;
|
||||
color: var(--prev-color-text-regular);
|
||||
transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
|
||||
}
|
||||
}
|
||||
.is-active {
|
||||
color: #ffffff;
|
||||
color: var(--prev-color-text-white);
|
||||
transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
|
||||
border-color: transparent;
|
||||
&::before {
|
||||
|
||||
@ -1,12 +1,20 @@
|
||||
<template>
|
||||
<div class="layout-scrollbar">
|
||||
<div class="layout-scrollbar layout-link-container">
|
||||
<div class="layout-view-bg-white flex layout-view-link">
|
||||
<a :href="meta.isLink" target="_blank" class="flex-margin">{{ meta.title }}：{{ meta.isLink }}</a>
|
||||
<div class="layout-link-warp">
|
||||
<i class="layout-link-icon iconfont icon-xingqiu"></i>
|
||||
<div class="layout-link-msg">页面 "{{ $t(meta.title) }}" 已在新窗口中打开</div>
|
||||
<el-button class="mt30" round size="small" @click="onGotoFullPage">
|
||||
<i class="iconfont icon-lianjie"></i>
|
||||
<span>立即前往体验</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { verifyUrl } from '@/utils/toolsValidate';
|
||||
export default {
|
||||
name: 'layoutLinkView',
|
||||
props: {
|
||||
@ -15,5 +23,61 @@ export default {
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 立即前往
|
||||
onGotoFullPage() {
|
||||
const { origin, pathname } = window.location;
|
||||
if (verifyUrl(this.meta.isLink)) window.open(this.meta.isLink);
|
||||
else window.open(`${origin}${pathname}#${this.meta.isLink}`);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.layout-link-container {
|
||||
.layout-link-warp {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
i.layout-link-icon {
|
||||
position: relative;
|
||||
font-size: 100px;
|
||||
color: var(--prev-color-primary);
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 0;
|
||||
width: 15px;
|
||||
height: 100px;
|
||||
background: linear-gradient(
|
||||
rgba(255, 255, 255, 0.01),
|
||||
rgba(255, 255, 255, 0.01),
|
||||
rgba(255, 255, 255, 0.01),
|
||||
rgba(255, 255, 255, 0.05),
|
||||
rgba(255, 255, 255, 0.05),
|
||||
rgba(255, 255, 255, 0.05),
|
||||
rgba(235, 255, 255, 0.5),
|
||||
rgba(255, 255, 255, 0.05),
|
||||
rgba(255, 255, 255, 0.05),
|
||||
rgba(255, 255, 255, 0.05),
|
||||
rgba(255, 255, 255, 0.01),
|
||||
rgba(255, 255, 255, 0.01),
|
||||
rgba(255, 255, 255, 0.01)
|
||||
);
|
||||
transform: rotate(-15deg);
|
||||
animation: toRight 5s linear infinite;
|
||||
}
|
||||
}
|
||||
.layout-link-msg {
|
||||
font-size: 12px;
|
||||
color: var(--prev-bg-topBarColor);
|
||||
opacity: 0.7;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
144
src/layout/upgrade/index.vue
Normal file
144
src/layout/upgrade/index.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div class="upgrade-dialog">
|
||||
<el-dialog
|
||||
:visible.sync="isUpgrade"
|
||||
width="300px"
|
||||
destroy-on-close
|
||||
:show-close="false"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
>
|
||||
<div class="upgrade-title">
|
||||
<div class="upgrade-title-warp">
|
||||
<span class="upgrade-title-warp-txt">{{ $t('message.upgrade.title') }}</span>
|
||||
<span class="upgrade-title-warp-version">v{{ version }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upgrade-content">
|
||||
{{ getThemeConfig.globalTitle }} {{ $t('message.upgrade.msg') }}
|
||||
<div class="upgrade-content-desc mt5">{{ $t('message.upgrade.desc') }}</div>
|
||||
</div>
|
||||
<div class="upgrade-btn">
|
||||
<el-button round size="small" @click="onCancel">{{ $t('message.upgrade.btnOne') }}</el-button>
|
||||
<el-button type="primary" round size="small" @click="onUpgrade" :loading="isLoading">{{ btnTxt }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Local } from '@/utils/storage';
|
||||
import config from '/package.json';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isUpgrade: false,
|
||||
version: config.version,
|
||||
isLoading: false,
|
||||
btnTxt: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 获取布局配置信息
|
||||
getThemeConfig() {
|
||||
return this.$store.state.themeConfig.themeConfig;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 残忍拒绝
|
||||
onCancel() {
|
||||
this.isUpgrade = false;
|
||||
},
|
||||
// 马上更新
|
||||
onUpgrade() {
|
||||
this.isLoading = true;
|
||||
this.btnTxt = this.$t('message.upgrade.btnTwoLoading');
|
||||
setTimeout(() => {
|
||||
Local.clear();
|
||||
window.location.reload();
|
||||
Local.set('version', this.version);
|
||||
}, 2000);
|
||||
},
|
||||
// 延迟显示，防止刷新时界面显示太快
|
||||
delayShow() {
|
||||
setTimeout(() => {
|
||||
this.isUpgrade = true;
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.delayShow();
|
||||
setTimeout(() => {
|
||||
this.btnTxt = this.$t('message.upgrade.btnTwo');
|
||||
}, 200);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.upgrade-dialog {
|
||||
& ::v-deep .el-dialog {
|
||||
.el-dialog__body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.el-dialog__header {
|
||||
display: none !important;
|
||||
}
|
||||
.upgrade-title {
|
||||
text-align: center;
|
||||
height: 130px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: var(--prev-color-primary-light-1);
|
||||
width: 130%;
|
||||
height: 130px;
|
||||
border-bottom-left-radius: 100%;
|
||||
border-bottom-right-radius: 100%;
|
||||
}
|
||||
.upgrade-title-warp {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
.upgrade-title-warp-txt {
|
||||
color: var(--prev-color-text-white);
|
||||
font-size: 22px;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
.upgrade-title-warp-version {
|
||||
background-color: var(--prev-color-primary-light-4);
|
||||
color: var(--prev-color-text-white);
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: -2px;
|
||||
right: -50px;
|
||||
padding: 2px 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.upgrade-content {
|
||||
padding: 20px;
|
||||
line-height: 22px;
|
||||
color: var(--prev-color-text-regular);
|
||||
.upgrade-content-desc {
|
||||
color: var(--prev-color-text-placeholder);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.upgrade-btn {
|
||||
border-top: 1px solid var(--prev-border-color-lighter);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 15px 20px;
|
||||
.el-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -186,7 +186,6 @@ export function adminUser(router, to, next) {
|
||||
store.dispatch('routesList/setRoutesList', setFilterMenuFun(res.data, store.state.userInfos.userInfos.roles));
|
||||
dynamicRoutes[0].children = res.data;
|
||||
const awaitRoute = await dynamicRouter(dynamicRoutes);
|
||||
console.log(awaitRoute);
|
||||
[...awaitRoute, { path: '*', redirect: '/404' }].forEach((route) => {
|
||||
router.addRoute({ ...route });
|
||||
});
|
||||
|
||||
@ -9,6 +9,33 @@ const themeConfigModule = {
|
||||
// 是否开启布局配置抽屉
|
||||
isDrawer: false,
|
||||
|
||||
/**
|
||||
* 全局主题
|
||||
*/
|
||||
// 默认 primary 主题颜色
|
||||
primary: '#409eff',
|
||||
// 是否开启深色模式
|
||||
isIsDark: false,
|
||||
|
||||
/**
|
||||
* 菜单 / 顶栏
|
||||
* 请注意：
|
||||
* 需要同时修改 `/@/theme/common/var.scss` 对应的值，
|
||||
* 不提供像 vue-next-admin 一样的实现
|
||||
*/
|
||||
// 默认顶栏导航背景颜色
|
||||
topBar: '#ffffff',
|
||||
// 默认顶栏导航字体颜色
|
||||
topBarColor: '#606266',
|
||||
// 默认菜单导航背景颜色
|
||||
menuBar: '#545c64',
|
||||
// 默认菜单导航字体颜色
|
||||
menuBarColor: '#eaeaea',
|
||||
// 默认分栏菜单背景颜色
|
||||
columnsMenuBar: '#545c64',
|
||||
// 默认分栏菜单字体颜色
|
||||
columnsMenuBarColor: '#e6e6e6',
|
||||
|
||||
/**
|
||||
* 界面设置
|
||||
*/
|
||||
|
||||
@ -7,12 +7,40 @@
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
--prev-bg-menuBar: #545c64;
|
||||
--prev-bg-menuBarColor: #eaeaea;
|
||||
--prev-bg-topBar: #ffffff;
|
||||
--prev-bg-topBarColor: #606266;
|
||||
--prev-bg-columnsMenuBar: #545c64;
|
||||
--prev-bg-columnsMenuBarColor: #e6e6e6;
|
||||
--prev-bg-main-color: #f8f8f8;
|
||||
--prev-bg-color: #f5f7fa;
|
||||
--prev-bg-white: #ffffff;
|
||||
--prev-color-primary: #409eff;
|
||||
--prev-color-text-white: #ffffff;
|
||||
--prev-color-text-black: #000000;
|
||||
--prev-color-text-primary: #303133;
|
||||
--prev-color-text-regular: #606266;
|
||||
--prev-color-text-secondary: #909399;
|
||||
--prev-color-text-placeholder: #c0c4cc;
|
||||
--prev-color-hover: rgba(0, 0, 0, 0.04);
|
||||
--prev-color-seting-main: #e9eef3;
|
||||
--prev-color-seting-aside: #d3dce6;
|
||||
--prev-color-seting-header: #b3c0d1;
|
||||
--prev-border-color-hover: #c0c4cc;
|
||||
--prev-border-color-base: #dcdfe6;
|
||||
--prev-border-color-light: #e4e7ed;
|
||||
--prev-border-color-lighter: #ebeef5;
|
||||
--prev-border-color-extra-light: #f2f6fc;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--color-bg);
|
||||
background-color: var(--prev-bg-main-color);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@ -22,7 +50,7 @@ body,
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.layout-aside {
|
||||
background: var(--bg-menuBar);
|
||||
background: var(--prev-bg-menuBar);
|
||||
box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
|
||||
height: inherit;
|
||||
position: relative;
|
||||
@ -41,17 +69,17 @@ body,
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background-color: #f8f8f8;
|
||||
background-color: var(--prev-bg-main-color);
|
||||
}
|
||||
.el-scrollbar {
|
||||
width: 100%;
|
||||
}
|
||||
.layout-view-bg-white {
|
||||
background: white;
|
||||
background: var(--prev-bg-white);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ebeef5;
|
||||
border: 1px solid var(--prev-border-color-lighter);
|
||||
}
|
||||
.layout-el-aside-br-color {
|
||||
border-right: 1px solid rgb(238, 238, 238);
|
||||
@ -85,26 +113,10 @@ body,
|
||||
}
|
||||
}
|
||||
|
||||
/* element plus 全局样式
|
||||
------------------------------- */
|
||||
.layout-breadcrumb-seting {
|
||||
.el-drawer__header {
|
||||
padding: 0 15px !important;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0 !important;
|
||||
border-bottom: 1px solid rgb(230, 230, 230);
|
||||
}
|
||||
.el-divider {
|
||||
background-color: rgb(230, 230, 230);
|
||||
}
|
||||
}
|
||||
|
||||
/* 进度条颜色
|
||||
------------------------------- */
|
||||
#nprogress .bar {
|
||||
background: var(--color-primary) !important;
|
||||
background: var(--prev-color-primary) !important;
|
||||
}
|
||||
|
||||
/* flex 弹性布局
|
||||
@ -158,19 +170,19 @@ body,
|
||||
/* 颜色值
|
||||
------------------------------- */
|
||||
.color-primary {
|
||||
color: var(--color-primary);
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.color-success {
|
||||
color: var(--color-success);
|
||||
color: var(--prev-color-success);
|
||||
}
|
||||
.color-warning {
|
||||
color: var(--color-warning);
|
||||
color: var(--prev-color-warning);
|
||||
}
|
||||
.color-danger {
|
||||
color: var(--color-danger);
|
||||
color: var(--prev-color-danger);
|
||||
}
|
||||
.color-info {
|
||||
color: var(--color-info);
|
||||
color: var(--prev-color-info);
|
||||
}
|
||||
|
||||
/* 溢出省略号
|
||||
|
||||
@ -1,2 +1 @@
|
||||
@import 'common/transition.scss';
|
||||
@import 'common/var.scss';
|
||||
|
||||
@ -86,3 +86,17 @@
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 左右左 link.vue
|
||||
------------------------------- */
|
||||
@keyframes toRight {
|
||||
0% {
|
||||
left: -5px;
|
||||
}
|
||||
50% {
|
||||
left: 100%;
|
||||
}
|
||||
100% {
|
||||
left: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,27 +0,0 @@
|
||||
/* 定义初始颜色
|
||||
------------------------------- */
|
||||
$--color-primary: #409eff !default;
|
||||
$--color-whites: #ffffff !default;
|
||||
$--color-blacks: #000000 !default;
|
||||
$--color-bg: #f8f8f8 !default;
|
||||
$--bg-menuBar: #545c64;
|
||||
$--bg-menuBarColor: #eaeaea;
|
||||
$--bg-topBar: #ffffff;
|
||||
$--bg-topBarColor: #606266;
|
||||
$--bg-columnsMenuBar: #545c64;
|
||||
$--bg-columnsMenuBarColor: #e6e6e6;
|
||||
|
||||
/* 赋值给:root
|
||||
------------------------------- */
|
||||
:root {
|
||||
--color-primary: #{$--color-primary};
|
||||
--color-whites: #{$--color-whites};
|
||||
--color-blacks: #{$--color-blacks};
|
||||
--color-bg: #{$--color-bg};
|
||||
--bg-menuBar: #{$--bg-menuBar};
|
||||
--bg-menuBarColor: #{$--bg-menuBarColor};
|
||||
--bg-topBar: #{$--bg-topBar};
|
||||
--bg-topBarColor: #{$--bg-topBarColor};
|
||||
--bg-columnsMenuBar: #{$--bg-columnsMenuBar};
|
||||
--bg-columnsMenuBarColor: #{$--bg-columnsMenuBarColor};
|
||||
}
|
||||
107
src/theme/dark.scss
Normal file
107
src/theme/dark.scss
Normal file
@ -0,0 +1,107 @@
|
||||
/* 深色模式样式
|
||||
------------------------------- */
|
||||
[data-theme='dark'] {
|
||||
--prev-bg-menuBar: #191919 !important;
|
||||
--prev-bg-menuBarColor: #dadada !important;
|
||||
--prev-bg-topBar: #191919 !important;
|
||||
--prev-bg-topBarColor: #dadada !important;
|
||||
--prev-bg-columnsMenuBar: #191919 !important;
|
||||
--prev-bg-columnsMenuBarColor: #dadada !important;
|
||||
--prev-bg-main-color: #1f1f1f !important;
|
||||
--prev-bg-color: rgba(0, 0, 0, 0.3) !important;
|
||||
--prev-bg-white: #191919 !important;
|
||||
--prev-color-text-black: #ffffff !important;
|
||||
--prev-color-text-primary: #dadada !important;
|
||||
--prev-color-text-regular: #dadada !important;
|
||||
--prev-color-text-secondary: #a3a3a3 !important;
|
||||
--prev-color-hover: rgba(0, 0, 0, 0.3) !important;
|
||||
--prev-color-seting-main: #505050 !important;
|
||||
--prev-color-seting-aside: #3c3c3c !important;
|
||||
--prev-color-seting-header: #303030 !important;
|
||||
--prev-border-color-hover: #616161 !important;
|
||||
--prev-border-color-base: #333333 !important;
|
||||
--prev-border-color-light: #333333 !important;
|
||||
--prev-border-color-lighter: #333333 !important;
|
||||
--prev-border-color-extra-light: #333333 !important;
|
||||
|
||||
// menu
|
||||
.layout-aside {
|
||||
border-right: 1px solid var(--prev-border-color-lighter) !important;
|
||||
}
|
||||
|
||||
// drawer
|
||||
.el-drawer {
|
||||
border-left: 1px solid var(--prev-border-color-lighter) !important;
|
||||
}
|
||||
|
||||
// button
|
||||
.el-button--default {
|
||||
background: var(--prev-bg-white);
|
||||
color: var(--prev-color-text-primary);
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--prev-color-primary) !important;
|
||||
background: var(--prev-color-primary-light-8) !important;
|
||||
border-color: var(--prev-color-primary-light-6) !important;
|
||||
}
|
||||
&:focus {
|
||||
border-color: var(--prev-color-primary-light-1) !important;
|
||||
}
|
||||
&:active {
|
||||
border-color: var(--prev-color-primary-light-6) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// tag
|
||||
.el-tag.el-tag--info {
|
||||
background-color: var(--prev-bg-white) !important;
|
||||
border-color: var(--prev-border-color-light) !important;
|
||||
color: var(--prev-color-text-regular) !important;
|
||||
}
|
||||
|
||||
// switch
|
||||
.el-switch__core {
|
||||
border-color: var(--prev-border-color-base) !important;
|
||||
background-color: var(--prev-border-color-base) !important;
|
||||
}
|
||||
|
||||
// TimePicker
|
||||
.el-time-spinner__item.active:not(.disabled) {
|
||||
color: var(--prev-color-primary) !important;
|
||||
}
|
||||
|
||||
// date
|
||||
.el-date-table td.in-range div,
|
||||
.el-date-table td.in-range div:hover,
|
||||
.el-date-table.is-week-mode .el-date-table__row.current div,
|
||||
.el-date-table.is-week-mode .el-date-table__row:hover div,
|
||||
.el-date-table td.selected div,
|
||||
.el-month-table td.in-range div,
|
||||
.el-month-table td.in-range div:hover {
|
||||
background-color: var(--prev-bg-color) !important;
|
||||
}
|
||||
|
||||
// transfer
|
||||
.el-transfer-panel,
|
||||
.el-transfer-panel .el-transfer-panel__header {
|
||||
background-color: var(--prev-bg-color) !important;
|
||||
}
|
||||
|
||||
// loading
|
||||
.el-loading-mask {
|
||||
background-color: var(--prev-bg-color) !important;
|
||||
}
|
||||
|
||||
// dropdown
|
||||
.el-dropdown-menu__item:focus,
|
||||
.el-dropdown-menu__item:not(.is-disabled):hover {
|
||||
background-color: var(--prev-color-hover) !important;
|
||||
}
|
||||
|
||||
// dialog
|
||||
.el-dialog,
|
||||
.el-calendar {
|
||||
border: 1px solid var(--prev-border-color-lighter);
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,3 @@
|
||||
@import 'mixins/function.scss';
|
||||
|
||||
/* 防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）
|
||||
------------------------------- */
|
||||
.el-scrollbar {
|
||||
@ -46,27 +44,10 @@
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* Drawer 抽屉
|
||||
------------------------------- */
|
||||
.el-drawer__header {
|
||||
margin-bottom: 0 !important;
|
||||
padding: 14px 15px !important;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
color: #333333 !important;
|
||||
}
|
||||
.el-drawer__body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Dialog 对话框
|
||||
------------------------------- */
|
||||
.el-dialog__headerbtn:focus .el-dialog__close,
|
||||
.el-dialog__headerbtn:hover .el-dialog__close {
|
||||
color: set-color(primary);
|
||||
}
|
||||
.el-overlay {
|
||||
.el-overlay,
|
||||
.el-dialog__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -83,35 +64,6 @@
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Divider 分割线
|
||||
------------------------------- */
|
||||
.el-divider {
|
||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||
}
|
||||
|
||||
/* Card 卡片
|
||||
------------------------------- */
|
||||
.el-card__header {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
/* Message 消息提示
|
||||
------------------------------- */
|
||||
.el-message {
|
||||
min-width: auto !important;
|
||||
box-sizing: border-box !important;
|
||||
border-width: 1px !important;
|
||||
border-style: solid !important;
|
||||
border-color: #ebeef5 !important;
|
||||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
|
||||
background-color: #fff !important;
|
||||
border-radius: 3px !important;
|
||||
border: 1px solid #ebeef5 !important;
|
||||
.el-message__icon {
|
||||
font-size: 1.4em !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Alert 警告
|
||||
------------------------------- */
|
||||
.el-alert--warning.is-light {
|
||||
@ -157,15 +109,15 @@
|
||||
.el-submenu__title {
|
||||
height: 50px !important;
|
||||
line-height: 50px !important;
|
||||
color: var(--bg-menuBarColor) !important;
|
||||
color: var(--prev-bg-menuBarColor) !important;
|
||||
transition: none !important;
|
||||
}
|
||||
// horizontal 水平方向时
|
||||
.el-menu--horizontal > .el-menu-item.is-active,
|
||||
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
|
||||
border-bottom: 3px solid !important;
|
||||
border-bottom-color: set-color(primary) !important;
|
||||
color: set-color(primary) !important;
|
||||
border-bottom-color: var(--prev-color-primary) !important;
|
||||
color: var(--prev-color-primary) !important;
|
||||
}
|
||||
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
|
||||
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
|
||||
@ -173,7 +125,7 @@
|
||||
.el-menu--horizontal > .el-submenu:hover .el-submenu__title,
|
||||
.el-menu--horizontal .el-menu .el-menu-item.is-active,
|
||||
.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
|
||||
color: set-color(primary) !important;
|
||||
color: var(--prev-color-primary) !important;
|
||||
}
|
||||
.el-menu.el-menu--horizontal {
|
||||
border-bottom: none !important;
|
||||
@ -197,19 +149,19 @@
|
||||
// 默认 hover 时
|
||||
.el-menu-item:hover,
|
||||
.el-submenu__title:hover {
|
||||
color: set-color(primary) !important;
|
||||
color: var(--prev-color-primary) !important;
|
||||
background-color: transparent !important;
|
||||
i {
|
||||
color: set-color(primary) !important;
|
||||
color: var(--prev-color-primary) !important;
|
||||
}
|
||||
}
|
||||
// 高亮时
|
||||
.el-menu-item.is-active {
|
||||
color: set-color(primary) !important;
|
||||
color: var(--prev-color-primary) !important;
|
||||
}
|
||||
.el-active-extend {
|
||||
color: #ffffff !important;
|
||||
background-color: set-color(primary) !important;
|
||||
background-color: var(--prev-color-primary) !important;
|
||||
i {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
@ -227,7 +179,7 @@
|
||||
}
|
||||
// 菜单收起时鼠标经过背景颜色/字体颜色
|
||||
.el-menu--vertical {
|
||||
background: var(--bg-menuBar) !important;
|
||||
background: var(--prev-bg-menuBar) !important;
|
||||
}
|
||||
.el-menu--horizontal {
|
||||
.el-menu {
|
||||
@ -260,14 +212,6 @@
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Breadcrumb 面包屑
|
||||
------------------------------- */
|
||||
.el-breadcrumb__inner a,
|
||||
.el-breadcrumb__inner.is-link {
|
||||
font-weight: normal;
|
||||
color: var(--bg-topBarColor);
|
||||
}
|
||||
|
||||
/* Alert 警告
|
||||
------------------------------- */
|
||||
.el-alert__title {
|
||||
|
||||
@ -3,3 +3,5 @@
|
||||
@import './other.scss';
|
||||
@import './element.scss';
|
||||
@import './media/media.scss';
|
||||
@import './variables.scss';
|
||||
@import './dark.scss';
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
background-color: var(--color-bg);
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.loading-prev .loading-prev-box {
|
||||
position: absolute;
|
||||
@ -20,7 +20,7 @@
|
||||
.loading-prev .loading-prev-box-warp .loading-prev-box-item {
|
||||
width: 33.333333%;
|
||||
height: 33.333333%;
|
||||
background: var(--color-primary);
|
||||
background: var(--prev-color-primary);
|
||||
float: left;
|
||||
animation: loading-prev-animation 1.2s infinite ease;
|
||||
border-radius: 1px;
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
/* 颜色调用函数
|
||||
------------------------------- */
|
||||
@function set-color($key) {
|
||||
@return var(--color-#{$key});
|
||||
}
|
||||
952
src/theme/variables.scss
Normal file
952
src/theme/variables.scss
Normal file
@ -0,0 +1,952 @@
|
||||
/* Button 按钮
|
||||
------------------------------- */
|
||||
// text
|
||||
.el-button--text {
|
||||
color: var(--prev-color-primary);
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(--prev-color-primary-light-3);
|
||||
}
|
||||
}
|
||||
.el-button--text:active {
|
||||
color: var(--prev-color-primary-light-3);
|
||||
}
|
||||
// default
|
||||
.el-button--default:hover,
|
||||
.el-button--default:focus {
|
||||
color: var(--prev-color-primary);
|
||||
background: var(--prev-color-primary-light-8);
|
||||
border-color: var(--prev-color-primary-light-6);
|
||||
}
|
||||
.el-button--default.is-plain:hover,
|
||||
.el-button--default.is-plain:focus {
|
||||
color: var(--prev-color-primary);
|
||||
background: var(--prev-bg-white);
|
||||
border-color: var(--prev-color-primary-light-1);
|
||||
}
|
||||
.el-button--default:active {
|
||||
color: var(--prev-color-primary);
|
||||
background: var(--prev-bg-white);
|
||||
border-color: var(--prev-color-primary-light-1);
|
||||
}
|
||||
// primary
|
||||
.el-button--primary {
|
||||
color: var(--prev-color-text-white) !important;
|
||||
background: var(--prev-color-primary) !important;
|
||||
border-color: var(--prev-color-primary) !important;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--prev-color-text-white) !important;
|
||||
background: var(--prev-color-primary-light-3) !important;
|
||||
border-color: var(--prev-color-primary-light-3) !important;
|
||||
}
|
||||
}
|
||||
.el-button--primary.is-plain {
|
||||
color: var(--prev-color-primary) !important;
|
||||
background: var(--prev-color-primary-light-8) !important;
|
||||
border-color: var(--prev-color-primary-light-6) !important;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--prev-color-text-white) !important;
|
||||
background: var(--prev-color-primary) !important;
|
||||
border-color: var(--prev-color-primary) !important;
|
||||
}
|
||||
}
|
||||
.el-button--primary.is-disabled,
|
||||
.el-button--primary.is-disabled:active,
|
||||
.el-button--primary.is-disabled:focus,
|
||||
.el-button--primary.is-disabled:hover {
|
||||
color: var(--prev-color-primary) !important;
|
||||
background: var(--prev-color-primary-light-7) !important;
|
||||
border-color: var(--prev-color-primary-light-7) !important;
|
||||
}
|
||||
.el-button--primary.is-active,
|
||||
.el-button--primary:active {
|
||||
color: var(--prev-color-text-white) !important;
|
||||
background: var(--prev-color-primary) !important;
|
||||
border-color: var(--prev-color-primary) !important;
|
||||
}
|
||||
.el-button.is-disabled.is-plain,
|
||||
.el-button.is-disabled.is-plain:focus,
|
||||
.el-button.is-disabled.is-plain:hover {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
color: var(--prev-color-text-placeholder);
|
||||
}
|
||||
|
||||
/* Link 文字链接
|
||||
------------------------------- */
|
||||
// default
|
||||
.el-link.el-link--default:hover {
|
||||
color: var(--prev-color-primary-light-3);
|
||||
}
|
||||
// primary
|
||||
.el-link.el-link--primary {
|
||||
color: var(--prev-color-primary);
|
||||
&:hover {
|
||||
color: var(--prev-color-primary-light-3);
|
||||
}
|
||||
}
|
||||
.el-link.el-link--default::after,
|
||||
.el-link.is-underline:hover::after,
|
||||
.el-link.el-link--primary.is-underline:hover::after,
|
||||
.el-link.el-link--primary::after {
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
|
||||
/* Radio 单选框
|
||||
------------------------------- */
|
||||
.el-radio,
|
||||
.el-checkbox {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-radio__input.is-checked + .el-radio__label,
|
||||
.el-radio-button__inner:hover {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-radio__input.is-checked .el-radio__inner {
|
||||
background-color: var(--prev-color-primary);
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
color: var(--prev-color-text-white);
|
||||
background-color: var(--prev-color-primary);
|
||||
border-color: var(--prev-color-primary);
|
||||
box-shadow: -1px 0 0 0 var(--prev-color-primary);
|
||||
}
|
||||
.el-radio.is-bordered.is-checked,
|
||||
.el-radio__inner:hover {
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-radio-button__inner,
|
||||
.el-checkbox-button__inner {
|
||||
background-color: var(--prev-bg-white);
|
||||
color: var(--prev-color-text-regular);
|
||||
border-color: var(--prev-border-color-base);
|
||||
}
|
||||
.el-radio-button:first-child .el-radio-button__inner,
|
||||
.el-checkbox-button:first-child .el-checkbox-button__inner {
|
||||
border-left-color: var(--prev-border-color-base);
|
||||
}
|
||||
.el-radio.is-bordered,
|
||||
.el-checkbox.is-bordered {
|
||||
border-color: var(--prev-border-color-base);
|
||||
}
|
||||
|
||||
/* Checkbox 多选框
|
||||
------------------------------- */
|
||||
.el-checkbox__input.is-checked + .el-checkbox__label,
|
||||
.el-checkbox-button__inner:hover {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: var(--prev-color-primary);
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-checkbox__input.is-focus .el-checkbox__inner,
|
||||
.el-checkbox__inner:hover,
|
||||
.el-checkbox.is-bordered.is-checked,
|
||||
.el-checkbox-button.is-focus .el-checkbox-button__inner {
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-checkbox-button.is-checked .el-checkbox-button__inner {
|
||||
color: var(--prev-color-text-white);
|
||||
background-color: var(--prev-color-primary);
|
||||
border-color: var(--prev-color-primary);
|
||||
box-shadow: -1px 0 0 0 var(--prev-color-primary);
|
||||
}
|
||||
.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner {
|
||||
border-left-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner,
|
||||
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||||
background-color: var(--prev-color-primary);
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-checkbox-button.is-disabled .el-checkbox-button__inner {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-base);
|
||||
}
|
||||
|
||||
/* Input 输入框、InputNumber 计数器
|
||||
------------------------------- */
|
||||
// input-number
|
||||
.el-input__inner:focus,
|
||||
.el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
|
||||
.el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
|
||||
.el-textarea__inner:focus {
|
||||
border-color: var(--prev-color-primary) !important;
|
||||
}
|
||||
.el-input-number__increase:hover,
|
||||
.el-input-number__decrease:hover {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-input-number__decrease,
|
||||
.el-input-number__increase {
|
||||
background-color: var(--prev-bg-color);
|
||||
border-color: var(--prev-border-color-base) !important;
|
||||
}
|
||||
// input
|
||||
.el-input__inner,
|
||||
.el-textarea__inner {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-base);
|
||||
color: var(--prev-color-text-regular);
|
||||
&:hover {
|
||||
border-color: var(--prev-border-color-hover);
|
||||
}
|
||||
}
|
||||
.el-input.is-disabled .el-input__inner,
|
||||
.el-textarea.is-disabled .el-textarea__inner {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-base);
|
||||
}
|
||||
.el-input-group__append,
|
||||
.el-input-group__prepend {
|
||||
background-color: var(--prev-bg-color);
|
||||
color: var(--prev-color-text-regular);
|
||||
border-color: var(--prev-border-color-base);
|
||||
}
|
||||
.el-input .el-input__count .el-input__count-inner {
|
||||
background-color: var(--prev-bg-color);
|
||||
}
|
||||
// autocomplete
|
||||
.el-autocomplete-suggestion {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-base);
|
||||
}
|
||||
.el-autocomplete-suggestion__wrap {
|
||||
max-height: 280px !important;
|
||||
}
|
||||
// scss 循环
|
||||
$positions: 'top', 'right', 'bottom', 'left';
|
||||
@each $i in $positions {
|
||||
.el-popper[x-placement^='#{$i}'] .popper__arrow {
|
||||
border-#{$i}-color: var(--prev-border-color-base);
|
||||
&::after {
|
||||
border-#{$i}-color: var(--prev-bg-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-autocomplete-suggestion li {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-autocomplete-suggestion li.highlighted,
|
||||
.el-autocomplete-suggestion li:hover {
|
||||
background-color: var(--prev-color-hover);
|
||||
}
|
||||
|
||||
/* Select 选择器
|
||||
------------------------------- */
|
||||
.el-range-editor.is-active,
|
||||
.el-range-editor.is-active:hover,
|
||||
.el-select .el-input.is-focus .el-input__inner,
|
||||
.el-select .el-input__inner:focus {
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-select-dropdown__item.selected {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-select-dropdown {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-light);
|
||||
}
|
||||
.el-select-dropdown__item {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: var(--prev-color-hover);
|
||||
}
|
||||
.el-select-dropdown__item.is-disabled:hover {
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.el-select .el-input.is-disabled .el-input__inner:hover {
|
||||
border-color: var(--prev-border-color-light);
|
||||
}
|
||||
.el-select:hover .el-input__inner {
|
||||
border-color: var(--prev-border-color-hover);
|
||||
}
|
||||
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
|
||||
background-color: var(--prev-color-hover);
|
||||
}
|
||||
.el-select-group__wrap:not(:last-of-type)::after {
|
||||
background: var(--prev-border-color-light);
|
||||
}
|
||||
|
||||
/* Cascader 级联选择器
|
||||
------------------------------- */
|
||||
.el-cascader .el-input .el-input__inner:focus,
|
||||
.el-cascader .el-input.is-focus .el-input__inner {
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-cascader-node.in-active-path,
|
||||
.el-cascader-node.is-active,
|
||||
.el-cascader-node.is-selectable.in-checked-path {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-cascader__dropdown {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-light);
|
||||
}
|
||||
.el-cascader-menu {
|
||||
border-color: var(--prev-border-color-light);
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-cascader-node:not(.is-disabled):focus,
|
||||
.el-cascader-node:not(.is-disabled):hover {
|
||||
background-color: var(--prev-color-hover);
|
||||
}
|
||||
|
||||
/* Switch 开关
|
||||
------------------------------- */
|
||||
.el-switch.is-checked .el-switch__core {
|
||||
border-color: var(--prev-color-primary);
|
||||
background-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-switch__label.is-active {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
|
||||
/* Slider 滑块
|
||||
------------------------------- */
|
||||
.el-slider__bar {
|
||||
background-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-slider__button {
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-slider__runway {
|
||||
background-color: var(--prev-border-color-light);
|
||||
}
|
||||
.el-slider__marks-text {
|
||||
color: var(--prev-color-text-secondary);
|
||||
}
|
||||
|
||||
/* TimePicker 时间选择器
|
||||
------------------------------- */
|
||||
.el-time-panel__btn.confirm,
|
||||
.el-time-spinner__arrow:hover,
|
||||
.time-select-item.selected:not(.disabled) {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-picker-panel {
|
||||
border-color: var(--prev-border-color-light);
|
||||
background-color: var(--prev-bg-white);
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.time-select-item:hover,
|
||||
.el-time-spinner__item:hover:not(.disabled):not(.active),
|
||||
.el-time-spinner__wrapper.is-arrow .el-time-spinner__item:hover:not(.disabled):not(.active) {
|
||||
background-color: var(--prev-color-hover);
|
||||
}
|
||||
.el-time-panel {
|
||||
border-color: var(--prev-border-color-light);
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.el-time-panel__footer,
|
||||
.el-time-panel__content::after,
|
||||
.el-time-panel__content::before,
|
||||
.el-time-range-picker__body {
|
||||
border-color: var(--prev-border-color-light);
|
||||
}
|
||||
.el-time-panel__btn,
|
||||
.el-date-editor .el-range-separator {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
.el-date-editor .el-range-input {
|
||||
background-color: var(--prev-bg-white);
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
|
||||
/* DatePicker 日期选择器
|
||||
------------------------------- */
|
||||
.el-date-table td.today span,
|
||||
.el-date-table td.available:hover,
|
||||
.el-date-picker__header-label.active,
|
||||
.el-date-picker__header-label:hover,
|
||||
.el-picker-panel__icon-btn:hover,
|
||||
.el-year-table td.today .cell,
|
||||
.el-year-table td .cell:hover,
|
||||
.el-year-table td.current:not(.disabled) .cell,
|
||||
.el-month-table td .cell:hover,
|
||||
.el-month-table td.today .cell,
|
||||
.el-month-table td.current:not(.disabled) .cell,
|
||||
.el-picker-panel__shortcut:hover {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-date-table td.current:not(.disabled) span,
|
||||
.el-date-table td.selected span {
|
||||
color: var(--prev-color-text-white);
|
||||
background-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-date-table td.end-date span,
|
||||
.el-date-table td.start-date span,
|
||||
.el-month-table td.end-date .cell,
|
||||
.el-month-table td.start-date .cell {
|
||||
background-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-date-table td.in-range div,
|
||||
.el-date-table td.in-range div:hover,
|
||||
.el-date-table.is-week-mode .el-date-table__row.current div,
|
||||
.el-date-table.is-week-mode .el-date-table__row:hover div,
|
||||
.el-date-table td.selected div {
|
||||
background-color: var(--prev-color-primary-light-9);
|
||||
}
|
||||
.el-date-table th,
|
||||
.el-date-picker__header--bordered,
|
||||
.el-date-range-picker__content.is-left,
|
||||
.el-date-picker__time-header,
|
||||
.el-date-range-picker__time-header {
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-date-table th,
|
||||
.el-date-picker__header-label,
|
||||
.el-picker-panel__shortcut,
|
||||
.el-month-table td .cell,
|
||||
.el-year-table td .cell {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-date-table td.next-month,
|
||||
.el-date-table td.prev-month {
|
||||
color: var(--prev-border-color-hover);
|
||||
}
|
||||
.el-picker-panel__icon-btn {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
.el-date-table td.disabled div {
|
||||
background-color: var(--prev-bg-color);
|
||||
}
|
||||
.el-picker-panel [slot='sidebar'],
|
||||
.el-picker-panel__sidebar,
|
||||
.el-picker-panel__footer {
|
||||
border-color: var(--prev-border-color-light);
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.el-month-table td.end-date .cell,
|
||||
.el-month-table td.start-date .cell {
|
||||
color: var(--prev-color-text-white);
|
||||
}
|
||||
|
||||
/* Upload 上传
|
||||
------------------------------- */
|
||||
.el-upload-list__item.is-success .el-upload-list__item-name:focus,
|
||||
.el-upload-list__item.is-success .el-upload-list__item-name:hover,
|
||||
.el-upload-list__item .el-icon-close-tip,
|
||||
.el-upload-dragger .el-upload__text em {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-upload--picture-card,
|
||||
.el-upload-dragger {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-light);
|
||||
i {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
}
|
||||
.el-upload--picture-card:hover,
|
||||
.el-upload:focus {
|
||||
color: var(--prev-color-primary);
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-upload-dragger:hover,
|
||||
.el-upload:focus .el-upload-dragger {
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-upload__tip,
|
||||
.el-upload-list__item,
|
||||
.el-upload-dragger .el-upload__text,
|
||||
.el-upload-list__item-name,
|
||||
.el-upload-list__item .el-icon-close {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-upload-list__item:hover {
|
||||
background-color: var(--prev-bg-color);
|
||||
}
|
||||
|
||||
/* ColorPicker 颜色选择器
|
||||
------------------------------- */
|
||||
.el-color-picker__trigger {
|
||||
border-color: var(--prev-border-color-light);
|
||||
}
|
||||
|
||||
/* Transfer 穿梭框
|
||||
------------------------------- */
|
||||
.el-transfer-panel__item:hover {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-transfer-panel,
|
||||
.el-transfer-panel .el-transfer-panel__header {
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-transfer-panel .el-transfer-panel__footer {
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
|
||||
/* Form 表单
|
||||
------------------------------- */
|
||||
.el-form {
|
||||
.el-form-item:last-of-type {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
.el-form-item__label {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
|
||||
/* Table 表格
|
||||
------------------------------- */
|
||||
.el-table {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-table .descending .sort-caret.descending {
|
||||
border-top-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-table .ascending .sort-caret.ascending {
|
||||
border-bottom-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-table thead {
|
||||
color: var(--prev-color-text-secondary);
|
||||
}
|
||||
.el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf,
|
||||
.el-table--border,
|
||||
.el-table--group {
|
||||
border-color: var(--prev-border-color-lighter) !important;
|
||||
}
|
||||
.el-table th.el-table__cell,
|
||||
.el-table tr {
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell,
|
||||
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: var(--prev-bg-color);
|
||||
}
|
||||
.el-table--border::after,
|
||||
.el-table--group::after,
|
||||
.el-table::before {
|
||||
background-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
|
||||
/* Tag 标签
|
||||
------------------------------- */
|
||||
// primary
|
||||
.el-tag {
|
||||
color: var(--prev-color-primary);
|
||||
background-color: var(--prev-color-primary-light-8);
|
||||
border-color: var(--prev-color-primary-light-6);
|
||||
}
|
||||
.el-tag .el-tag__close {
|
||||
color: var(--prev-color-primary);
|
||||
&:hover {
|
||||
color: var(--prev-color-text-white);
|
||||
background-color: var(--prev-color-primary);
|
||||
}
|
||||
}
|
||||
.el-tag--dark {
|
||||
color: var(--prev-color-text-white);
|
||||
background-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-tag--dark .el-tag__close {
|
||||
color: var(--prev-color-text-white);
|
||||
&:hover {
|
||||
background-color: var(--prev-color-primary-light-3);
|
||||
}
|
||||
}
|
||||
.el-tag--plain {
|
||||
color: var(--prev-color-primary);
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-color-primary-light-3);
|
||||
}
|
||||
|
||||
/* Progress 进度条
|
||||
------------------------------- */
|
||||
// primary
|
||||
.el-progress-bar__inner {
|
||||
background-color: var(--prev-color-primary) !important;
|
||||
}
|
||||
.el-progress-bar__outer {
|
||||
background-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-progress__text {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
|
||||
/* Tree 树形控件
|
||||
------------------------------- */
|
||||
.el-tree {
|
||||
background-color: var(--prev-bg-white);
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-tree-node__content:hover,
|
||||
.el-tree-node:focus > .el-tree-node__content {
|
||||
background-color: var(--prev-bg-color);
|
||||
}
|
||||
|
||||
/* Pagination 分页
|
||||
------------------------------- */
|
||||
.el-pager li.active,
|
||||
.el-pager li:hover,
|
||||
.el-pagination button:hover,
|
||||
.el-pagination.is-background .el-pager li:not(.disabled):hover {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-pagination__sizes .el-input .el-input__inner:hover {
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: var(--prev-color-primary);
|
||||
color: var(--prev-color-text-white);
|
||||
}
|
||||
.el-pagination__total,
|
||||
.el-pagination__jump {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-pagination button:disabled,
|
||||
.el-pagination .btn-next,
|
||||
.el-pagination .btn-prev {
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.el-pagination .btn-next,
|
||||
.el-pagination .btn-prev {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
.el-pager li {
|
||||
background-color: var(--prev-bg-white);
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
|
||||
/* Badge 标记
|
||||
------------------------------- */
|
||||
// primary
|
||||
.el-badge__content--primary {
|
||||
background-color: var(--prev-color-primary);
|
||||
}
|
||||
|
||||
/* Loading 加载
|
||||
------------------------------- */
|
||||
.el-loading-spinner .path {
|
||||
stroke: var(--prev-color-primary);
|
||||
}
|
||||
.el-loading-spinner .el-loading-text,
|
||||
.el-loading-spinner i {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
|
||||
/* Message 消息提示
|
||||
------------------------------- */
|
||||
// default/info
|
||||
.el-message {
|
||||
min-width: unset !important;
|
||||
padding: 15px !important;
|
||||
}
|
||||
|
||||
/* MessageBox 弹框
|
||||
------------------------------- */
|
||||
.el-message-box__headerbtn:focus .el-message-box__close,
|
||||
.el-message-box__headerbtn:hover .el-message-box__close {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-message-box {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-message-box__title {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
.el-message-box__content {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
|
||||
/* Notification 通知
|
||||
------------------------------- */
|
||||
.el-notification {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
.el-notification__title {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
.el-notification__content {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tabs 标签页
|
||||
------------------------------- */
|
||||
.el-tabs__item.is-active,
|
||||
.el-tabs__item:hover,
|
||||
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active,
|
||||
.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-tabs__active-bar {
|
||||
background-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-tabs__nav-wrap::after {
|
||||
height: 1px !important;
|
||||
}
|
||||
.el-tabs__item {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
.el-tabs__nav-wrap::after {
|
||||
background-color: var(--prev-border-color-light);
|
||||
}
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active,
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__item,
|
||||
.el-tabs--card > .el-tabs__header,
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__nav {
|
||||
border-color: var(--prev-bg-color);
|
||||
}
|
||||
.el-tabs--border-card {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-base);
|
||||
}
|
||||
.el-tabs--border-card > .el-tabs__header {
|
||||
background-color: var(--prev-bg-color);
|
||||
border-color: var(--prev-border-color-light);
|
||||
}
|
||||
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-base);
|
||||
}
|
||||
|
||||
/* Breadcrumb 面包屑
|
||||
------------------------------- */
|
||||
.el-breadcrumb__inner a:hover,
|
||||
.el-breadcrumb__inner.is-link:hover {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-breadcrumb__inner a,
|
||||
.el-breadcrumb__inner.is-link {
|
||||
color: var(--bg-topBarColor);
|
||||
font-weight: normal;
|
||||
}
|
||||
.el-breadcrumb__inner a,
|
||||
.el-breadcrumb__inner.is-link {
|
||||
color: var(--prev-color-text-black);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.el-breadcrumb__separator {
|
||||
color: var(--prev-border-color-hover);
|
||||
}
|
||||
|
||||
/* PageHeader 页头
|
||||
------------------------------- */
|
||||
.el-page-header__left {
|
||||
color: var(--prev-color-text-black);
|
||||
&::after {
|
||||
background-color: var(--prev-border-color-base);
|
||||
}
|
||||
}
|
||||
.el-page-header__content {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
|
||||
/* Dropdown 下拉菜单
|
||||
------------------------------- */
|
||||
.el-dropdown-menu__item:focus,
|
||||
.el-dropdown-menu__item:not(.is-disabled):hover {
|
||||
color: var(--prev-color-primary);
|
||||
background-color: var(--prev-color-primary-light-9);
|
||||
}
|
||||
.el-dropdown-menu {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-dropdown-menu__item {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-dropdown-menu__item--divided {
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-dropdown-menu__item--divided:before {
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
|
||||
/* Steps 步骤条
|
||||
------------------------------- */
|
||||
// default
|
||||
.el-step__title.is-finish,
|
||||
.el-step__description.is-finish,
|
||||
.el-step__head.is-finish {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-step__head.is-finish {
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
|
||||
/* Dialog 对话框
|
||||
------------------------------- */
|
||||
.el-dialog__headerbtn:focus .el-dialog__close,
|
||||
.el-dialog__headerbtn:hover .el-dialog__close {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-dialog {
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.el-dialog__title {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
.el-dialog__body {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
|
||||
/* Popover 弹出框
|
||||
------------------------------- */
|
||||
.el-popover {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-popover__title {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
|
||||
/* Card 卡片
|
||||
------------------------------- */
|
||||
.el-card {
|
||||
color: var(--prev-color-text-primary);
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-card__header {
|
||||
padding: 15px 20px;
|
||||
border-bottom-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
|
||||
/* Collapse 折叠面板
|
||||
------------------------------- */
|
||||
.el-collapse {
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-collapse-item__header {
|
||||
color: var(--prev-color-text-primary);
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-collapse-item__wrap {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-collapse-item__content {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
|
||||
/* Timeline 时间线
|
||||
------------------------------- */
|
||||
// primary
|
||||
.el-timeline-item__node--primary {
|
||||
background-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-timeline-item__content {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
|
||||
/* Divider 分割线
|
||||
------------------------------- */
|
||||
.el-divider {
|
||||
background-color: var(--prev-border-color-base);
|
||||
}
|
||||
|
||||
/* Calendar 日历
|
||||
------------------------------- */
|
||||
.el-calendar-table td {
|
||||
color: var(--prev-color-text-black);
|
||||
}
|
||||
.el-calendar-table td.is-today {
|
||||
color: var(--prev-color-primary) !important;
|
||||
background-color: var(--prev-color-primary-light-9);
|
||||
}
|
||||
.el-calendar-table .el-calendar-day:hover,
|
||||
.el-calendar-table td.is-selected {
|
||||
background-color: var(--prev-color-primary-light-9);
|
||||
color: var(--prev-color-primary) !important;
|
||||
}
|
||||
.el-calendar {
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.el-calendar__title {
|
||||
color: var(--prev-color-text-black);
|
||||
}
|
||||
.el-calendar__header,
|
||||
.el-calendar-table tr:first-child td,
|
||||
.el-calendar-table td,
|
||||
.el-calendar-table tr td:first-child {
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-calendar-table thead th {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-calendar-table:not(.is-range) td.next,
|
||||
.el-calendar-table:not(.is-range) td.prev {
|
||||
color: var(--prev-color-text-placeholder);
|
||||
}
|
||||
.el-calendar__button-group {
|
||||
.el-button {
|
||||
color: var(--prev-color-text-regular);
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-base);
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(--prev-color-primary) !important;
|
||||
background: var(--prev-color-primary-light-8) !important;
|
||||
border-color: var(--prev-color-primary-light-6) !important;
|
||||
}
|
||||
&:active {
|
||||
color: var(--prev-color-primary-light-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Backtop 回到顶部
|
||||
------------------------------- */
|
||||
.el-backtop {
|
||||
color: var(--prev-color-primary);
|
||||
&:hover {
|
||||
background-color: var(--prev-color-primary-light-9);
|
||||
}
|
||||
}
|
||||
|
||||
/* scrollbar
|
||||
------------------------------- */
|
||||
.el-scrollbar__wrap {
|
||||
overflow-x: hidden !important;
|
||||
max-height: 100%; /*防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）*/
|
||||
}
|
||||
.el-select-dropdown .el-scrollbar__wrap {
|
||||
overflow-x: scroll !important;
|
||||
}
|
||||
|
||||
/* Drawer 抽屉
|
||||
------------------------------- */
|
||||
.el-drawer,
|
||||
.el-divider__text {
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.el-divider__text {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
.el-drawer__close-btn:hover {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-drawer__body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.el-drawer__header {
|
||||
padding: 0 15px !important;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0 !important;
|
||||
border-bottom: 1px solid var(--prev-border-color-lighter);
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
63
src/utils/theme.js
Normal file
63
src/utils/theme.js
Normal file
@ -0,0 +1,63 @@
|
||||
import { Message } from 'element-ui';
|
||||
|
||||
/**
|
||||
* 颜色转换函数
|
||||
* @method hexToRgb hex 颜色转 rgb 颜色
|
||||
* @method rgbToHex rgb 颜色转 Hex 颜色
|
||||
* @method getDarkColor 加深颜色值
|
||||
* @method getLightColor 变浅颜色值
|
||||
*/
|
||||
export function useChangeColor() {
|
||||
// str 颜色值字符串
|
||||
const hexToRgb = (str) => {
|
||||
let hexs = '';
|
||||
let reg = /^#?[0-9A-Fa-f]{6}$/;
|
||||
if (!reg.test(str)) {
|
||||
Message.warning('输入错误的hex');
|
||||
return '';
|
||||
}
|
||||
str = str.replace('#', '');
|
||||
hexs = str.match(/../g);
|
||||
for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16);
|
||||
return hexs;
|
||||
};
|
||||
// r 代表红色 | g 代表绿色 | b 代表蓝色
|
||||
const rgbToHex = (r, g, b) => {
|
||||
let reg = /^\d{1,3}$/;
|
||||
if (!reg.test(r) || !reg.test(g) || !reg.test(b)) {
|
||||
Message.warning('输入错误的rgb颜色值');
|
||||
return '';
|
||||
}
|
||||
let hexs = [r.toString(16), g.toString(16), b.toString(16)];
|
||||
for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
|
||||
return `#${hexs.join('')}`;
|
||||
};
|
||||
// color 颜色值字符串 | level 变浅的程度，限0-1之间
|
||||
const getDarkColor = (color, level) => {
|
||||
let reg = /^#?[0-9A-Fa-f]{6}$/;
|
||||
if (!reg.test(color)) {
|
||||
Message.warning('输入错误的hex颜色值');
|
||||
return '';
|
||||
}
|
||||
let rgb = useChangeColor().hexToRgb(color);
|
||||
for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level));
|
||||
return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2]);
|
||||
};
|
||||
// color 颜色值字符串 | level 加深的程度，限0-1之间
|
||||
const getLightColor = (color, level) => {
|
||||
let reg = /^#?[0-9A-Fa-f]{6}$/;
|
||||
if (!reg.test(color)) {
|
||||
Message.warning('输入错误的hex颜色值');
|
||||
return '';
|
||||
}
|
||||
let rgb = useChangeColor().hexToRgb(color);
|
||||
for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);
|
||||
return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2]);
|
||||
};
|
||||
return {
|
||||
hexToRgb,
|
||||
rgbToHex,
|
||||
getDarkColor,
|
||||
getLightColor,
|
||||
};
|
||||
}
|
||||
@ -36,7 +36,7 @@
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
.right-label {
|
||||
color: gray;
|
||||
color: var(--prev-color-text-regular);
|
||||
width: 40px;
|
||||
}
|
||||
.right-value {
|
||||
@ -55,11 +55,11 @@
|
||||
.info-item {
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
color: var(--prev-color-text-regular);
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
color: var(--prev-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
.info-item-left {
|
||||
@ -81,7 +81,7 @@
|
||||
.home-recommend {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
color: #ffffff;
|
||||
color: var(--prev-color-text-white);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
@ -129,7 +129,7 @@
|
||||
.home-charts {
|
||||
height: 282.6px;
|
||||
.home-charts-item {
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--prev-bg-main-color);
|
||||
padding: 19px 15px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
|
||||
@ -112,7 +112,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- v-charts -->
|
||||
<!-- 履约超时预警 -->
|
||||
<el-row :gutter="15">
|
||||
<el-col :md="24" :lg="16" :xl="16" class="home-lg">
|
||||
<el-card shadow="hover">
|
||||
@ -165,6 +165,16 @@ export default {
|
||||
newsInfoList,
|
||||
userInfo: {},
|
||||
dailyMessage: {},
|
||||
charts: {
|
||||
theme: '',
|
||||
bgColor: '',
|
||||
},
|
||||
global: {
|
||||
homeChartOne: null,
|
||||
homeChartTwo: null,
|
||||
homeCharThree: null,
|
||||
dispose: [null, '', undefined],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -203,8 +213,10 @@ export default {
|
||||
},
|
||||
// 库存作业
|
||||
initHomeStock() {
|
||||
const myChart = echarts.init(this.$refs.homeStockRef);
|
||||
if (!this.global.dispose.some((b) => b === this.global.homeChartOne)) this.global.homeChartOne.dispose();
|
||||
this.global.homeChartOne = echarts.init(this.$refs.homeStockRef, this.charts.theme);
|
||||
const option = {
|
||||
backgroundColor: this.charts.bgColor,
|
||||
grid: {
|
||||
top: 50,
|
||||
right: 20,
|
||||
@ -237,15 +249,17 @@ export default {
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
this.global.homeChartOne.setOption(option);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
this.global.homeChartOne.resize();
|
||||
});
|
||||
},
|
||||
// 履约情况
|
||||
initHomeLaboratory() {
|
||||
const myChart = echarts.init(this.$refs.homeLaboratoryRef);
|
||||
if (!this.global.dispose.some((b) => b === this.global.homeChartTwo)) this.global.homeChartTwo.dispose();
|
||||
this.global.homeChartTwo = echarts.init(this.$refs.homeLaboratoryRef, this.charts.theme);
|
||||
const option = {
|
||||
backgroundColor: this.charts.bgColor,
|
||||
grid: {
|
||||
top: 50,
|
||||
right: 20,
|
||||
@ -281,15 +295,17 @@ export default {
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
this.global.homeChartTwo.setOption(option);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
this.global.homeChartTwo.resize();
|
||||
});
|
||||
},
|
||||
// 缺货监控
|
||||
initHomeOvertime() {
|
||||
const myChart = echarts.init(this.$refs.homeOvertimeRef);
|
||||
if (!this.global.dispose.some((b) => b === this.global.homeCharThree)) this.global.homeCharThree.dispose();
|
||||
this.global.homeCharThree = echarts.init(this.$refs.homeOvertimeRef, this.charts.theme);
|
||||
const option = {
|
||||
backgroundColor: this.charts.bgColor,
|
||||
grid: {
|
||||
top: 50,
|
||||
right: 20,
|
||||
@ -335,9 +351,9 @@ export default {
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
this.global.homeCharThree.setOption(option);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
this.global.homeCharThree.resize();
|
||||
});
|
||||
},
|
||||
// 随机语录
|
||||
@ -359,6 +375,28 @@ export default {
|
||||
window.open('https://gitee.com/lyt-top/vue-next-admin');
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 监听 vuex 数据变化
|
||||
'$store.state.themeConfig.themeConfig.isIsDark': {
|
||||
handler(isIsDark) {
|
||||
this.$nextTick(() => {
|
||||
this.charts.theme = isIsDark ? 'dark' : '';
|
||||
this.charts.bgColor = isIsDark ? 'transparent' : '';
|
||||
setTimeout(() => {
|
||||
this.initHomeStock();
|
||||
}, 500);
|
||||
setTimeout(() => {
|
||||
this.initHomeLaboratory();
|
||||
}, 700);
|
||||
setTimeout(() => {
|
||||
this.initHomeOvertime();
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin: 40px 0px 0">
|
||||
<el-button type="primary" class="login-submit" @click="submitForm" :loading="submit.loading">
|
||||
<el-button type="primary" round class="login-submit" @click="submitForm" :loading="submit.loading">
|
||||
<span>{{ $t('message.login.btnText') }}</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
@ -161,8 +161,8 @@ export default {
|
||||
userName: this.ruleForm.userName === 'admin' ? 'admin' : 'test',
|
||||
photo:
|
||||
this.ruleForm.userName === 'admin'
|
||||
? 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg'
|
||||
: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg',
|
||||
? 'https://img0.baidu.com/it/u=1833472230,3849481738&fm=253&fmt=auto?w=200&h=200'
|
||||
: 'https://img2.baidu.com/it/u=2187913762,2708298335&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
|
||||
time: new Date().getTime(),
|
||||
roles: defaultRoles,
|
||||
authBtnList: defaultAuthBtnList,
|
||||
@ -215,16 +215,16 @@ export default {
|
||||
width: 491px;
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
color: var(--prev-color-text-white);
|
||||
position: relative;
|
||||
background-color: rgba(64, 158, 255, 0.8);
|
||||
background-color: var(--prev-color-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
.login-time {
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
color: var(--prev-color-text-white);
|
||||
opacity: 0.9;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
@ -242,13 +242,13 @@ export default {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.title {
|
||||
color: #fff;
|
||||
color: var(--prev-color-text-white);
|
||||
font-weight: 300;
|
||||
letter-spacing: 2px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.msg {
|
||||
color: #fff;
|
||||
color: var(--prev-color-text-white);
|
||||
font-size: 13px;
|
||||
margin-top: 35px;
|
||||
.msg-author {
|
||||
@ -270,14 +270,14 @@ export default {
|
||||
position: relative;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
background-color: var(--prev-bg-white);
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
.login-main {
|
||||
margin: 0 auto;
|
||||
width: 70%;
|
||||
.login-title {
|
||||
color: #333;
|
||||
color: var(--prev-color-text-primary);
|
||||
margin-bottom: 40px;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
@ -287,7 +287,7 @@ export default {
|
||||
.login-form {
|
||||
margin: 10px 0;
|
||||
i {
|
||||
color: #333;
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 20px !important;
|
||||
@ -301,8 +301,8 @@ export default {
|
||||
margin-top: 2px;
|
||||
width: 100px;
|
||||
height: 38px;
|
||||
border: 1px solid #dcdfe6;
|
||||
color: #333;
|
||||
border: 1px solid var(--prev-border-color-base);
|
||||
color: var(--prev-color-text-primary);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 5px;
|
||||
@ -313,16 +313,14 @@ export default {
|
||||
transition: all ease 0.2s;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
border-color: #c0c4cc;
|
||||
border-color: var(--prev-border-color-hover);
|
||||
transition: all ease 0.2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-submit {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -331,12 +329,12 @@ export default {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
a {
|
||||
color: #999;
|
||||
color: var(--prev-color-text-secondary);
|
||||
font-size: 12px;
|
||||
margin: 0 8px;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: #1e9fff;
|
||||
color: var(--prev-color-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,5 +24,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.personal {}
|
||||
.personal {
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -381,7 +381,7 @@ export default {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.tools-warp-form-msg {
|
||||
color: #666666;
|
||||
color: var(--prev-color-text-regular);
|
||||
font-size: 14px;
|
||||
.tools-warp-form-msg-red {
|
||||
color: red;
|
||||
|
||||
@ -25,16 +25,7 @@ module.exports = {
|
||||
config.plugins.delete('preload');
|
||||
config.plugins.delete('prefetch');
|
||||
},
|
||||
configureWebpack: {
|
||||
output: {
|
||||
filename: `js/[name].${new Date().getTime()}.js`,
|
||||
chunkFilename: `js/[name].${new Date().getTime()}.js`,
|
||||
},
|
||||
},
|
||||
css: {
|
||||
extract: {
|
||||
filename: `css/[name].${new Date().getTime()}.css`,
|
||||
chunkFilename: `css/[name].${new Date().getTime()}.css`,
|
||||
},
|
||||
extract: { ignoreOrder: true },
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user