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
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-03-27 09:42:59
5 -->
1 # 安装依赖 6 # 安装依赖
2 npm install 7 npm install
3 # 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 8 # 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
...@@ -15,4 +20,3 @@ npm install --registry=https://registry.npm.taobao.org ...@@ -15,4 +20,3 @@ npm install --registry=https://registry.npm.taobao.org
15 - `chore` 依赖更新/脚手架配置修改等 20 - `chore` 依赖更新/脚手架配置修改等
16 - `wip` 开发中 21 - `wip` 开发中
17 22
18
......
1 /*
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-03-27 09:53:16
5 */
1 import dialogBox from '@/components/DialogBox' 6 import dialogBox from '@/components/DialogBox'
2 import LbTable from '@/components/LbTable' 7 import LbTable from '@/components/LbTable'
3 import Theme from '@/components/Theme.vue'
4 import Breadcrumb from "@/components/Breadcrumb.vue"; 8 import Breadcrumb from "@/components/Breadcrumb.vue";
5 // 引入按钮 9 // 引入按钮
6 import btn from '@/components/Button.vue' 10 import btn from '@/components/Button.vue'
...@@ -12,8 +16,6 @@ export default { ...@@ -12,8 +16,6 @@ export default {
12 Vue.component('Breadcrumb', Breadcrumb); 16 Vue.component('Breadcrumb', Breadcrumb);
13 Vue.component('btn', btn); 17 Vue.component('btn', btn);
14 Vue.component('lbTable', LbTable); 18 Vue.component('lbTable', LbTable);
15 Vue.component('Theme', Theme);
16 Vue.prototype.$popup = Popup.install;
17 Vue.prototype.$alertMes = MessageBox.alert; 19 Vue.prototype.$alertMes = MessageBox.alert;
18 } 20 }
19 } 21 }
...\ No newline at end of file ...\ No newline at end of file
......
1 <template>
2 <el-color-picker v-model="theme"
3 :predefine="['#409EFF', '#1890ff', '#304156', '#212121', '#11a983', '#13c2c2', '#6959CD', '#f5222d',]"
4 class="theme-picker" popper-class="theme-picker-dropdown" />
5 </template>
6
7 <script>
8 const version = require('element-ui/package.json').version // element-ui version from node_modules
9 const ORIGINAL_THEME = '#409EFF' // default color
10
11 export default {
12 data () {
13 return {
14 chalk: '', // content of theme-chalk css
15 theme: ''
16 }
17 },
18 computed: {
19 defaultTheme () {
20 return this.$store.state.app.theme
21 }
22 },
23 watch: {
24 defaultTheme: {
25 handler: function (val, oldVal) {
26 this.theme = val
27 },
28 immediate: true
29 },
30 async theme (val) {
31 const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
32 if (typeof val !== 'string') return
33 const themeCluster = this.getThemeCluster(val.replace('#', ''))
34 const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
35 const $message = this.$message({
36 message: ' Compiling the theme',
37 customClass: 'theme-message',
38 type: 'success',
39 duration: 0,
40 iconClass: 'el-icon-loading'
41 })
42
43 const getHandler = (variable, id) => {
44 return () => {
45 const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
46 const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
47
48 let styleTag = document.getElementById(id)
49 if (!styleTag) {
50 styleTag = document.createElement('style')
51 styleTag.setAttribute('id', id)
52 document.head.appendChild(styleTag)
53 }
54 styleTag.innerText = newStyle
55 }
56 }
57
58 if (!this.chalk) {
59 const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
60 await this.getCSSString(url, 'chalk')
61 }
62
63 const chalkHandler = getHandler('chalk', 'chalk-style')
64
65 chalkHandler()
66
67 const styles = [].slice.call(document.querySelectorAll('style'))
68 .filter(style => {
69 const text = style.innerText
70 return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
71 })
72 styles.forEach(style => {
73 const { innerText } = style
74 if (typeof innerText !== 'string') return
75 style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
76 })
77
78 this.$emit('change', val)
79
80 $message.close()
81 }
82 },
83
84 methods: {
85 updateStyle (style, oldCluster, newCluster) {
86 let newStyle = style
87 oldCluster.forEach((color, index) => {
88 newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
89 })
90 return newStyle
91 },
92
93 getCSSString (url, variable) {
94 return new Promise(resolve => {
95 const xhr = new XMLHttpRequest()
96 xhr.onreadystatechange = () => {
97 if (xhr.readyState === 4 && xhr.status === 200) {
98 this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
99 resolve()
100 }
101 }
102 xhr.open('GET', url)
103 xhr.send()
104 })
105 },
106
107 getThemeCluster (theme) {
108 const tintColor = (color, tint) => {
109 let red = parseInt(color.slice(0, 2), 16)
110 let green = parseInt(color.slice(2, 4), 16)
111 let blue = parseInt(color.slice(4, 6), 16)
112
113 if (tint === 0) { // when primary color is in its rgb space
114 return [red, green, blue].join(',')
115 } else {
116 red += Math.round(tint * (255 - red))
117 green += Math.round(tint * (255 - green))
118 blue += Math.round(tint * (255 - blue))
119
120 red = red.toString(16)
121 green = green.toString(16)
122 blue = blue.toString(16)
123
124 return `#${red}${green}${blue}`
125 }
126 }
127
128 const shadeColor = (color, shade) => {
129 let red = parseInt(color.slice(0, 2), 16)
130 let green = parseInt(color.slice(2, 4), 16)
131 let blue = parseInt(color.slice(4, 6), 16)
132
133 red = Math.round((1 - shade) * red)
134 green = Math.round((1 - shade) * green)
135 blue = Math.round((1 - shade) * blue)
136
137 red = red.toString(16)
138 green = green.toString(16)
139 blue = blue.toString(16)
140
141 return `#${red}${green}${blue}`
142 }
143
144 const clusters = [theme]
145 for (let i = 0; i <= 9; i++) {
146 clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
147 }
148 clusters.push(shadeColor(theme, 0.1))
149 return clusters
150 }
151 }
152 }
153 </script>
154
155 <style>
156 .theme-message,
157 .theme-picker-dropdown {
158 z-index: 99999 !important;
159 }
160
161 .theme-picker .el-color-picker__trigger {
162 height: 26px !important;
163 width: 26px !important;
164 padding: 2px;
165 }
166
167 .theme-picker-dropdown .el-color-dropdown__link-btn {
168 display: none;
169 }
170 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
3 <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll"> 3 <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
4 <router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''" 4 <router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''"
5 :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item" 5 :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
6 @click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''" @contextmenu.prevent.native="openMenu(tag, $event)"> 6 @click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
7 @contextmenu.prevent.native="openMenu(tag, $event)">
7 {{ tag.title }} 8 {{ tag.title }}
8 <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" /> 9 <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
9 </router-link> 10 </router-link>
...@@ -190,30 +191,32 @@ export default { ...@@ -190,30 +191,32 @@ export default {
190 </script> 191 </script>
191 192
192 <style lang="scss" scoped> 193 <style lang="scss" scoped>
194 @import "~@/styles/_handle.scss";
195
193 .tags-view-container { 196 .tags-view-container {
194 height: 40px; 197 height: 46px;
195 width: 100%; 198 width: 100%;
196 background: #fff; 199 background: #fff;
197 border-bottom: 1px solid #d8dce5; 200 border-bottom: 1px solid #d8dce5;
198 box-sizing: border-box; 201 box-sizing: border-box;
199 padding-top: 3px; 202 padding-top: 5px;
200 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); 203 margin-bottom: 7px;
201 margin-bottom: 5px; 204 border-radius: 4px;
202 205
203 .tags-view-wrapper { 206 .tags-view-wrapper {
204 .tags-view-item { 207 .tags-view-item {
205 display: inline-block; 208 display: inline-block;
206 position: relative; 209 position: relative;
207 cursor: pointer; 210 cursor: pointer;
208 height: 26px;
209 line-height: 26px; 211 line-height: 26px;
210 border: 1px solid #d8dce5; 212 color: #4A4A4A;
211 color: #495060; 213 @include font_color("tagsText");
212 background: #fff;
213 padding: 0 8px; 214 padding: 0 8px;
214 font-size: 12px; 215 font-size: 12px;
215 margin-left: 5px; 216 margin-left: 5px;
216 margin-top: 4px; 217 margin-top: 4px;
218 border-radius: 4px;
219 @include borderColor("tagsBorderColor");
217 220
218 &:first-of-type { 221 &:first-of-type {
219 margin-left: 15px; 222 margin-left: 15px;
...@@ -224,13 +227,13 @@ export default { ...@@ -224,13 +227,13 @@ export default {
224 } 227 }
225 228
226 &.active { 229 &.active {
227 background-color: #0794FF; 230 @include background("tagsBg");
228 color: #fff; 231 @include borderColor("tagsActiveText");
229 border-color: #0794FF; 232 @include font_color("tagsActiveText");
230 233
231 &::before { 234 &::before {
232 content: ''; 235 content: '';
233 background: #fff; 236 @include background("tagsActiveText");
234 display: inline-block; 237 display: inline-block;
235 width: 8px; 238 width: 8px;
236 height: 8px; 239 height: 8px;
......
...@@ -20,6 +20,15 @@ ...@@ -20,6 +20,15 @@
20 @function themed($key) { 20 @function themed($key) {
21 @return map-get($theme-map, $key); 21 @return map-get($theme-map, $key);
22 } 22 }
23
24 //获取边框颜色
25 @mixin borderColor($color) {
26 @include themeify {
27 border: 1px solid themed($color) !important;
28 }
29 }
30
31
23 //获取渐变背景 32 //获取渐变背景
24 @mixin background($color) { 33 @mixin background($color) {
25 @include themeify { 34 @include themeify {
...@@ -33,9 +42,10 @@ ...@@ -33,9 +42,10 @@
33 background-color: themed($color) !important; 42 background-color: themed($color) !important;
34 } 43 }
35 } 44 }
45
36 //获取字体颜色 46 //获取字体颜色
37 @mixin font_color($color) { 47 @mixin font_color($color) {
38 @include themeify { 48 @include themeify {
39 color: themed($color)!important; 49 color: themed($color) !important;
40 } 50 }
41 } 51 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -7,15 +7,19 @@ $themes: (blue: ( //背景 ...@@ -7,15 +7,19 @@ $themes: (blue: ( //背景
7 menuActiveText: #4162D8, 7 menuActiveText: #4162D8,
8 // 没有子集 8 // 没有子集
9 submenuBg: #3D59C4, 9 submenuBg: #3D59C4,
10 submenuColor: #FFFFFF 10 submenuColor: #FFFFFF,
11 ), 11 // tags
12 tagsBorderColor: #E5E5E5,
13 tagsBg: rgba(65, 98, 216, 0.1),
14 tagsText: #4A4A4A,
15 tagsActiveText: #4162D8,
16 // 操纵btn
17 btnBg: #4162D8,
18 btnColor: #4162D8),
12 19
13 green: ( 20 green: (navbg: #0F8B80,
14 navbg: #0F8B80,
15 menuBg:#121A2E, 21 menuBg:#121A2E,
16 menuActive: linear-gradient(90deg, rgba(61,90,198,0.7) 0%, rgba(61,90,198,0) 100%), 22 menuActive: linear-gradient(90deg, rgba(61, 90, 198, 0.7) 0%, rgba(61, 90, 198, 0) 100%),
17 //字体 23 //字体
18 menuText: #A1A7C2, 24 menuText: #A1A7C2,
19 menuActiveText: #FFFFFF
20 )
21 )
...\ No newline at end of file ...\ No newline at end of file
25 menuActiveText: #FFFFFF))
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 **/ 4 **/
5 5
6 /* theme color */ 6 /* theme color */
7 $--color-primary: #0F93F6; 7 $--color-primary: #4162D8;
8 $--color-success: #67C23B; 8 $--color-success: #67C23B;
9 $--color-warning: #E6A23C; 9 $--color-warning: #E6A23C;
10 $--color-danger: #F46C6C; 10 $--color-danger: #F46C6C;
......
1 @import '~@/styles/sbElement-ui.scss'; 1 @import '~@/styles/sbElement-ui.scss';
2 @import "~@/styles/_handle.scss";
2 3
3 .from-clues { 4 .from-clues {
4 height: 100%; 5 height: 100%;
...@@ -96,7 +97,7 @@ ...@@ -96,7 +97,7 @@
96 .cx { 97 .cx {
97 width: 86px; 98 width: 86px;
98 height: 32px; 99 height: 32px;
99 background-color: #4162D8; 100 @include background_color("btnBg");
100 color: white; 101 color: white;
101 border: none; 102 border: none;
102 } 103 }
...@@ -104,7 +105,7 @@ ...@@ -104,7 +105,7 @@
104 .cx:hover { 105 .cx:hover {
105 width: 86px; 106 width: 86px;
106 height: 32px; 107 height: 32px;
107 background-color: #4162D8; 108 @include background_color("btnBg");
108 color: white; 109 color: white;
109 border: none; 110 border: none;
110 } 111 }
...@@ -113,8 +114,7 @@ ...@@ -113,8 +114,7 @@
113 width: 86px; 114 width: 86px;
114 height: 32px; 115 height: 32px;
115 background-color: white; 116 background-color: white;
116 color: #4162D8; 117 @include font_color("btnColor");
117
118 border: 1px solid rgba(65, 98, 216, 0.3); 118 border: 1px solid rgba(65, 98, 216, 0.3);
119 } 119 }
120 120
...@@ -122,23 +122,17 @@ ...@@ -122,23 +122,17 @@
122 width: 86px; 122 width: 86px;
123 height: 32px; 123 height: 32px;
124 background-color: white; 124 background-color: white;
125 color: #4162D8; 125 @include font_color("btnColor");
126 border: 1px solid rgba(65, 98, 216, 0.3); 126 border: 1px solid rgba(65, 98, 216, 0.3);
127 } 127 }
128 128
129 .el-button:focus {
130 // background: none;
131 }
132
133 .cx:focus { 129 .cx:focus {
134 color: white; 130 color: white;
135 background-color: #4162D8; 131 @include background_color("btnBg");
136 background-size: cover; 132 background-size: cover;
137 } 133 }
138 134
139 .cz:focus { 135 .cz:focus {
140 color: #4162D8;
141 background-color: white; 136 background-color: white;
142 ;
143 background-size: cover; 137 background-size: cover;
144 } 138 }
...\ No newline at end of file ...\ No newline at end of file
......