简柏林 / thingskit-view · Commits

Commit ac9b01da7adf8ed964c810676771ea169f865660

Authored by fengwotao
1 parent c4cd1050

fix(src/packages/): 优化小组件下小标题8右边配置装饰

Inline Side-by-side
Showing 3 changed files with 48 additions and 31 deletions
@@ -7,16 +7,11 @@ import { chartInitConfig } from '@/settings/designSetting' @@ -7,16 +7,11 @@ import { chartInitConfig } from '@/settings/designSetting'
7 export const option = { 7 export const option = {
8 dataset: '我是标题', 8 dataset: '我是标题',
9 attribute: { 9 attribute: {
10 - linearColors: [  
11 - '#2AFFFF',  
12 - '#2AFFFF',  
13 - '#2AFFFF',  
14 - '#2AFFFF',  
15 - '#0084ff',  
16 - '#0d4ea8',  
17 - '#4592ff',  
18 - '#ffcc33',  
19 - ], 10 + bgColor1:'#2AFFFF',
  11 + bgColor2:'#0084ff',
  12 + bgColor3:'#0d4ea8',
  13 + bgColor4:'#4592ff',
  14 + bgColor5:'#ffcc33',
20 fontSize: 20, 15 fontSize: 20,
21 fontPos: { 16 fontPos: {
22 x: 0, 17 x: 0,
@@ -20,22 +20,44 @@ @@ -20,22 +20,44 @@
20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button> 20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
21 </SettingItem> 21 </SettingItem>
22 </SettingItemBox> 22 </SettingItemBox>
23 - <SettingItemBox  
24 - :name="`装饰颜色-${index + 1}`"  
25 - v-for="(item, index) in optionData.attribute.linearColors"  
26 - :key="index"  
27 - > 23 + <SettingItemBox :name="`上下边线装饰`">
28 <SettingItem name="颜色"> 24 <SettingItem name="颜色">
29 - <n-color-picker  
30 - size="small"  
31 - :modes="['hex']"  
32 - v-model:value="optionData.attribute.linearColors[index]"  
33 - ></n-color-picker> 25 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
34 </SettingItem> 26 </SettingItem>
35 <SettingItem> 27 <SettingItem>
36 - <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">  
37 - 恢复默认  
38 - </n-button> 28 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#2affff'"> 恢复默认 </n-button>
  29 + </SettingItem>
  30 + </SettingItemBox>
  31 + <SettingItemBox :name="`背景装饰`">
  32 + <SettingItem name="颜色">
  33 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor2"></n-color-picker>
  34 + </SettingItem>
  35 + <SettingItem>
  36 + <n-button size="small" @click="optionData.attribute.bgColor2 = '#0084ff'"> 恢复默认 </n-button>
  37 + </SettingItem>
  38 + </SettingItemBox>
  39 + <SettingItemBox :name="`图形装饰`">
  40 + <SettingItem name="颜色">
  41 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor3"></n-color-picker>
  42 + </SettingItem>
  43 + <SettingItem>
  44 + <n-button size="small" @click="optionData.attribute.bgColor3 = '#0d4ea8'"> 恢复默认 </n-button>
  45 + </SettingItem>
  46 + </SettingItemBox>
  47 + <SettingItemBox :name="`图形边框装饰`">
  48 + <SettingItem name="颜色">
  49 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor4"></n-color-picker>
  50 + </SettingItem>
  51 + <SettingItem>
  52 + <n-button size="small" @click="optionData.attribute.bgColor4 = '#4592ff'"> 恢复默认 </n-button>
  53 + </SettingItem>
  54 + </SettingItemBox>
  55 + <SettingItemBox :name="`圆形装饰`">
  56 + <SettingItem name="颜色">
  57 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor5"></n-color-picker>
  58 + </SettingItem>
  59 + <SettingItem>
  60 + <n-button size="small" @click="optionData.attribute.bgColor5 = '#ffcc33'"> 恢复默认 </n-button>
39 </SettingItem> 61 </SettingItem>
40 </SettingItemBox> 62 </SettingItemBox>
41 </CollapseItem> 63 </CollapseItem>
@@ -9,12 +9,12 @@ @@ -9,12 +9,12 @@
9 > 9 >
10 <defs> 10 <defs>
11 <linearGradient id="subtitle8_linear_0" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox"> 11 <linearGradient id="subtitle8_linear_0" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox">
12 - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="0.5" />  
13 - <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="0" /> 12 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="0.5" />
  13 + <stop offset="1" :stop-color="attribute.bgColor1" stop-opacity="0" />
14 </linearGradient> 14 </linearGradient>
15 <linearGradient id="subtitle8_linear_1" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox"> 15 <linearGradient id="subtitle8_linear_1" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox">
16 - <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="0.5" />  
17 - <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="0" /> 16 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="0.5" />
  17 + <stop offset="1" :stop-color="attribute.bgColor1" stop-opacity="0" />
18 </linearGradient> 18 </linearGradient>
19 <filter 19 <filter
20 id="subtitle8_filter_14" 20 id="subtitle8_filter_14"
@@ -55,7 +55,7 @@ @@ -55,7 +55,7 @@
55 <path 55 <path
56 id="矩形 31" 56 id="矩形 31"
57 fill-rule="evenodd" 57 fill-rule="evenodd"
58 - :style="{ fill: attribute.linearColors[4] }" 58 + :style="{ fill: attribute.bgColor2 }"
59 transform="translate(17 1.9999999999999183) rotate(0 237.5 15)" 59 transform="translate(17 1.9999999999999183) rotate(0 237.5 15)"
60 opacity="0.2" 60 opacity="0.2"
61 :d="`M0,${h}L${w - 10},${h}L${w - 10},0L0,0L0,${h}Z `" 61 :d="`M0,${h}L${w - 10},${h}L${w - 10},0L0,0L0,${h}Z `"
@@ -79,7 +79,7 @@ @@ -79,7 +79,7 @@
79 <path 79 <path
80 id="矩形 32" 80 id="矩形 32"
81 fill-rule="evenodd" 81 fill-rule="evenodd"
82 - :style="{ fill: attribute.linearColors[5] }" 82 + :style="{ fill: attribute.bgColor3 }"
83 :transform="`translate(4.979184719828627 ${ 83 :transform="`translate(4.979184719828627 ${
84 h / 2 - 34 / 2 + 6 84 h / 2 - 34 / 2 + 6
85 }) rotate(-45 12.020815280171146 12.020815280171146)`" 85 }) rotate(-45 12.020815280171146 12.020815280171146)`"
@@ -88,7 +88,7 @@ @@ -88,7 +88,7 @@
88 /> 88 />
89 <rect 89 <rect
90 id="矩形 32" 90 id="矩形 32"
91 - :style="{ stroke: attribute.linearColors[6], strokeWidth: 1, strokeOpacity: 1 }" 91 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 1 }"
92 :transform="`translate(4.979184719828627 ${ 92 :transform="`translate(4.979184719828627 ${
93 h / 2 - 34 / 2 + 6 93 h / 2 - 34 / 2 + 6
94 }) rotate(-45 12.020815280171146 12.020815280171146)`" 94 }) rotate(-45 12.020815280171146 12.020815280171146)`"
@@ -101,7 +101,7 @@ @@ -101,7 +101,7 @@
101 <path 101 <path
102 id="圆形 10" 102 id="圆形 10"
103 fill-rule="evenodd" 103 fill-rule="evenodd"
104 - :style="{ fill: attribute.linearColors[7] }" 104 + :style="{ fill: attribute.bgColor5 }"
105 :transform="`translate(11.999999999999805 ${h / 2 - 34 / 2 + 12}) rotate(0 5 5)`" 105 :transform="`translate(11.999999999999805 ${h / 2 - 34 / 2 + 12}) rotate(0 5 5)`"
106 opacity="1" 106 opacity="1"
107 d="M5,0C2.24,0 0,2.24 0,5C0,7.76 2.24,10 5,10C7.76,10 10,7.76 10,5C10,2.24 7.76,0 5,0Z " 107 d="M5,0C2.24,0 0,2.24 0,5C0,7.76 2.24,10 5,10C7.76,10 10,7.76 10,5C10,2.24 7.76,0 5,0Z "