Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
0287a635 by 任超
Options

style:tags样式修改

1 parent 67655b34
Inline Side-by-side
Showing 8 changed files with 56 additions and 209 deletions
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-27 09:42:59
-->
# 安装依赖
npm install
# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
......@@ -15,4 +20,3 @@ npm install --registry=https://registry.npm.taobao.org
- `chore` 依赖更新/脚手架配置修改等
- `wip` 开发中
......
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-27 09:53:16
*/
import dialogBox from '@/components/DialogBox'
import LbTable from '@/components/LbTable'
import Theme from '@/components/Theme.vue'
import Breadcrumb from "@/components/Breadcrumb.vue";
// 引入按钮
import btn from '@/components/Button.vue'
......@@ -12,8 +16,6 @@ export default {
Vue.component('Breadcrumb', Breadcrumb);
Vue.component('btn', btn);
Vue.component('lbTable', LbTable);
Vue.component('Theme', Theme);
Vue.prototype.$popup = Popup.install;
Vue.prototype.$alertMes = MessageBox.alert;
}
}
\ No newline at end of file
......
<template>
<el-color-picker v-model="theme"
:predefine="['#409EFF', '#1890ff', '#304156', '#212121', '#11a983', '#13c2c2', '#6959CD', '#f5222d',]"
class="theme-picker" popper-class="theme-picker-dropdown" />
</template>
<script>
const version = require('element-ui/package.json').version // element-ui version from node_modules
const ORIGINAL_THEME = '#409EFF' // default color
export default {
data () {
return {
chalk: '', // content of theme-chalk css
theme: ''
}
},
computed: {
defaultTheme () {
return this.$store.state.app.theme
}
},
watch: {
defaultTheme: {
handler: function (val, oldVal) {
this.theme = val
},
immediate: true
},
async theme (val) {
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
if (typeof val !== 'string') return
const themeCluster = this.getThemeCluster(val.replace('#', ''))
const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
const $message = this.$message({
message: ' Compiling the theme',
customClass: 'theme-message',
type: 'success',
duration: 0,
iconClass: 'el-icon-loading'
})
const getHandler = (variable, id) => {
return () => {
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
let styleTag = document.getElementById(id)
if (!styleTag) {
styleTag = document.createElement('style')
styleTag.setAttribute('id', id)
document.head.appendChild(styleTag)
}
styleTag.innerText = newStyle
}
}
if (!this.chalk) {
const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
await this.getCSSString(url, 'chalk')
}
const chalkHandler = getHandler('chalk', 'chalk-style')
chalkHandler()
const styles = [].slice.call(document.querySelectorAll('style'))
.filter(style => {
const text = style.innerText
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
})
styles.forEach(style => {
const { innerText } = style
if (typeof innerText !== 'string') return
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
})
this.$emit('change', val)
$message.close()
}
},
methods: {
updateStyle (style, oldCluster, newCluster) {
let newStyle = style
oldCluster.forEach((color, index) => {
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
})
return newStyle
},
getCSSString (url, variable) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
resolve()
}
}
xhr.open('GET', url)
xhr.send()
})
},
getThemeCluster (theme) {
const tintColor = (color, tint) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)
if (tint === 0) { // when primary color is in its rgb space
return [red, green, blue].join(',')
} else {
red += Math.round(tint * (255 - red))
green += Math.round(tint * (255 - green))
blue += Math.round(tint * (255 - blue))
red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16)
return `#${red}${green}${blue}`
}
}
const shadeColor = (color, shade) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)
red = Math.round((1 - shade) * red)
green = Math.round((1 - shade) * green)
blue = Math.round((1 - shade) * blue)
red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16)
return `#${red}${green}${blue}`
}
const clusters = [theme]
for (let i = 0; i <= 9; i++) {
clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
}
clusters.push(shadeColor(theme, 0.1))
return clusters
}
}
}
</script>
<style>
.theme-message,
.theme-picker-dropdown {
z-index: 99999 !important;
}
.theme-picker .el-color-picker__trigger {
height: 26px !important;
width: 26px !important;
padding: 2px;
}
.theme-picker-dropdown .el-color-dropdown__link-btn {
display: none;
}
</style>
\ No newline at end of file
......@@ -3,7 +3,8 @@
<scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
<router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
@click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''" @contextmenu.prevent.native="openMenu(tag, $event)">
@click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent.native="openMenu(tag, $event)">
{{ tag.title }}
<span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
</router-link>
......@@ -190,30 +191,32 @@ export default {
</script>
<style lang="scss" scoped>
@import "~@/styles/_handle.scss";
.tags-view-container {
height: 40px;
height: 46px;
width: 100%;
background: #fff;
border-bottom: 1px solid #d8dce5;
box-sizing: border-box;
padding-top: 3px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
margin-bottom: 5px;
padding-top: 5px;
margin-bottom: 7px;
border-radius: 4px;
.tags-view-wrapper {
.tags-view-item {
display: inline-block;
position: relative;
cursor: pointer;
height: 26px;
line-height: 26px;
border: 1px solid #d8dce5;
color: #495060;
background: #fff;
color: #4A4A4A;
@include font_color("tagsText");
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
border-radius: 4px;
@include borderColor("tagsBorderColor");
&:first-of-type {
margin-left: 15px;
......@@ -224,13 +227,13 @@ export default {
}
&.active {
background-color: #0794FF;
color: #fff;
border-color: #0794FF;
@include background("tagsBg");
@include borderColor("tagsActiveText");
@include font_color("tagsActiveText");
&::before {
content: '';
background: #fff;
@include background("tagsActiveText");
display: inline-block;
width: 8px;
height: 8px;
......
......@@ -20,6 +20,15 @@
@function themed($key) {
@return map-get($theme-map, $key);
}
//获取边框颜色
@mixin borderColor($color) {
@include themeify {
border: 1px solid themed($color) !important;
}
}
//获取渐变背景
@mixin background($color) {
@include themeify {
......@@ -33,9 +42,10 @@
background-color: themed($color) !important;
}
}
//获取字体颜色
@mixin font_color($color) {
@include themeify {
color: themed($color)!important;
color: themed($color) !important;
}
}
\ No newline at end of file
......
......@@ -7,15 +7,19 @@ $themes: (blue: ( //背景
menuActiveText: #4162D8,
// 没有子集
submenuBg: #3D59C4,
submenuColor: #FFFFFF
),
submenuColor: #FFFFFF,
// tags
tagsBorderColor: #E5E5E5,
tagsBg: rgba(65, 98, 216, 0.1),
tagsText: #4A4A4A,
tagsActiveText: #4162D8,
// 操纵btn
btnBg: #4162D8,
btnColor: #4162D8),
green: (
navbg: #0F8B80,
green: (navbg: #0F8B80,
menuBg:#121A2E,
menuActive: linear-gradient(90deg, rgba(61,90,198,0.7) 0%, rgba(61,90,198,0) 100%),
menuActive: linear-gradient(90deg, rgba(61, 90, 198, 0.7) 0%, rgba(61, 90, 198, 0) 100%),
//字体
menuText: #A1A7C2,
menuActiveText: #FFFFFF
)
)
\ No newline at end of file
menuActiveText: #FFFFFF))
\ No newline at end of file
......
......@@ -4,7 +4,7 @@
**/
/* theme color */
$--color-primary: #0F93F6;
$--color-primary: #4162D8;
$--color-success: #67C23B;
$--color-warning: #E6A23C;
$--color-danger: #F46C6C;
......
@import '~@/styles/sbElement-ui.scss';
@import "~@/styles/_handle.scss";
.from-clues {
height: 100%;
......@@ -96,7 +97,7 @@
.cx {
width: 86px;
height: 32px;
background-color: #4162D8;
@include background_color("btnBg");
color: white;
border: none;
}
......@@ -104,7 +105,7 @@
.cx:hover {
width: 86px;
height: 32px;
background-color: #4162D8;
@include background_color("btnBg");
color: white;
border: none;
}
......@@ -113,8 +114,7 @@
width: 86px;
height: 32px;
background-color: white;
color: #4162D8;
@include font_color("btnColor");
border: 1px solid rgba(65, 98, 216, 0.3);
}
......@@ -122,23 +122,17 @@
width: 86px;
height: 32px;
background-color: white;
color: #4162D8;
@include font_color("btnColor");
border: 1px solid rgba(65, 98, 216, 0.3);
}
.el-button:focus {
// background: none;
}
.cx:focus {
color: white;
background-color: #4162D8;
@include background_color("btnBg");
background-size: cover;
}
.cz:focus {
color: #4162D8;
background-color: white;
;
background-size: cover;
}
\ No newline at end of file
......