简柏林 / thingskit-view · Commits

Commit ccc68f806bdd7bec5ce72506969f8be01c85523a

Authored by fengwotao
1 parent a3a4a3be

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

Inline Side-by-side
Showing 3 changed files with 39 additions and 49 deletions
@@ -7,25 +7,9 @@ import { chartInitConfig } from '@/settings/designSetting' @@ -7,25 +7,9 @@ import { chartInitConfig } from '@/settings/designSetting'
7 export const option = { 7 export const option = {
8 dataset: '我是标题', 8 dataset: '我是标题',
9 attribute: { 9 attribute: {
10 - linearColors: [  
11 - '#060F1E',  
12 - '#032E52',  
13 - '#060F1E',  
14 - '#2affff',  
15 - '#2affff',  
16 - '#2affff',  
17 - '#2affff',  
18 - '#2affff',  
19 - '#2affff',  
20 - '#2affff',  
21 - '#2affff',  
22 - '#2affff',  
23 - '#2affff',  
24 - '#2affff',  
25 - '#2affff',  
26 - '#2affff',  
27 - '#2affff'  
28 - ], 10 + bgColor1:'#060F1E',
  11 + bgColor2:'#032E52',
  12 + bgColor3:'#2affff',
29 fontSize: 20, 13 fontSize: 20,
30 fontPos: { 14 fontPos: {
31 x: 0, 15 x: 0,
@@ -20,22 +20,28 @@ @@ -20,22 +20,28 @@
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 = '#060F1E'"> 恢复默认 </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 = '#032E52'"> 恢复默认 </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 = '#2affff'"> 恢复默认 </n-button>
39 </SettingItem> 45 </SettingItem>
40 </SettingItemBox> 46 </SettingItemBox>
41 </CollapseItem> 47 </CollapseItem>
@@ -9,27 +9,27 @@ @@ -9,27 +9,27 @@
9 > 9 >
10 <defs> 10 <defs>
11 <linearGradient id="subtitle5_linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 11 <linearGradient id="subtitle5_linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
12 - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />  
13 - <stop offset="0.498" :stop-color="attribute.linearColors[1]" stop-opacity="1" />  
14 - <stop offset="1" :stop-color="attribute.linearColors[2]" stop-opacity="1" /> 12 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="1" />
  13 + <stop offset="0.498" :stop-color="attribute.bgColor2" stop-opacity="1" />
  14 + <stop offset="1" :stop-color="attribute.bgColor1" stop-opacity="1" />
15 </linearGradient> 15 </linearGradient>
16 <linearGradient id="subtitle5_linear_1" x1="0%" y1="0%" x2="1%" y2="100%" gradientUnits="objectBoundingBox"> 16 <linearGradient id="subtitle5_linear_1" x1="0%" y1="0%" x2="1%" y2="100%" gradientUnits="objectBoundingBox">
17 - <stop offset="0" :stop-color="attribute.linearColors[3]" stop-opacity="0" />  
18 - <stop offset="0.5313" :stop-color="attribute.linearColors[4]" stop-opacity="1" />  
19 - <stop offset="0.9988" :stop-color="attribute.linearColors[5]" stop-opacity="0" /> 17 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="0" />
  18 + <stop offset="0.5313" :stop-color="attribute.bgColor3" stop-opacity="1" />
  19 + <stop offset="0.9988" :stop-color="attribute.bgColor3" stop-opacity="0" />
20 </linearGradient> 20 </linearGradient>
21 <linearGradient id="subtitle5_linear_2" x1="0%" y1="0%" x2="1%" y2="100%" gradientUnits="objectBoundingBox"> 21 <linearGradient id="subtitle5_linear_2" x1="0%" y1="0%" x2="1%" y2="100%" gradientUnits="objectBoundingBox">
22 - <stop offset="0" :stop-color="attribute.linearColors[6]" stop-opacity="0" />  
23 - <stop offset="0.5313" :stop-color="attribute.linearColors[7]" stop-opacity="1" />  
24 - <stop offset="0.9988" :stop-color="attribute.linearColors[8]" stop-opacity="0" /> 22 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="0" />
  23 + <stop offset="0.5313" :stop-color="attribute.bgColor3" stop-opacity="1" />
  24 + <stop offset="0.9988" :stop-color="attribute.bgColor3" stop-opacity="0" />
25 </linearGradient> 25 </linearGradient>
26 <linearGradient id="subtitle5_linear_3" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 26 <linearGradient id="subtitle5_linear_3" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
27 - <stop offset="0" :stop-color="attribute.linearColors[9]" stop-opacity="1" />  
28 - <stop offset="1" :stop-color="attribute.linearColors[10]" stop-opacity="0" /> 27 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  28 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="0" />
29 </linearGradient> 29 </linearGradient>
30 <linearGradient id="subtitle5_linear_4" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox"> 30 <linearGradient id="subtitle5_linear_4" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox">
31 - <stop offset="0" :stop-color="attribute.linearColors[11]" stop-opacity="1" />  
32 - <stop offset="1" :stop-color="attribute.linearColors[12]" stop-opacity="0" /> 31 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  32 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="0" />
33 </linearGradient> 33 </linearGradient>
34 </defs> 34 </defs>
35 <g opacity="1" transform="translate(0 0) rotate(0 246 15)"> 35 <g opacity="1" transform="translate(0 0) rotate(0 246 15)">
@@ -89,14 +89,14 @@ @@ -89,14 +89,14 @@
89 /> 89 />
90 <path 90 <path
91 id="多边形 1" 91 id="多边形 1"
92 - :style="{stroke: attribute.linearColors[13], strokeWidth: 1,strokeOpacity: 1}" 92 + :style="{stroke: attribute.bgColor3, strokeWidth: 1,strokeOpacity: 1}"
93 transform="translate(2.348076211353317 2.3480762113533187) rotate(30 6.415063509461105 6.4150635094611035)" 93 transform="translate(2.348076211353317 2.3480762113533187) rotate(30 6.415063509461105 6.4150635094611035)"
94 d="M6.42,0L0.86,3.21L0.86,9.62L6.42,12.83L11.97,9.62L11.97,3.21L6.42,0Z " 94 d="M6.42,0L0.86,3.21L0.86,9.62L6.42,12.83L11.97,9.62L11.97,3.21L6.42,0Z "
95 /> 95 />
96 <path 96 <path
97 id="圆形 8" 97 id="圆形 8"
98 fill-rule="evenodd" 98 fill-rule="evenodd"
99 - :style="{ fill: attribute.linearColors[14] }" 99 + :style="{ fill: attribute.bgColor3 }"
100 transform="translate(6.763139720814309 6.763139720814425) rotate(0 2 2)" 100 transform="translate(6.763139720814309 6.763139720814425) rotate(0 2 2)"
101 opacity="1" 101 opacity="1"
102 d="M2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0Z " 102 d="M2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0Z "
@@ -118,14 +118,14 @@ @@ -118,14 +118,14 @@
118 /> 118 />
119 <path 119 <path
120 id="多边形 1" 120 id="多边形 1"
121 - :style="{stroke: attribute.linearColors[15], strokeWidth: 1, strokeOpacity: 1}" 121 + :style="{stroke: attribute.bgColor3, strokeWidth: 1, strokeOpacity: 1}"
122 transform="translate(28.07836663013154 2.3480762113533187) rotate(-30 6.415063509461105 6.4150635094611035)" 122 transform="translate(28.07836663013154 2.3480762113533187) rotate(-30 6.415063509461105 6.4150635094611035)"
123 d="M0.86,9.62L6.42,12.83L11.97,9.62L11.97,3.21L6.42,0L0.86,3.21L0.86,9.62Z " 123 d="M0.86,9.62L6.42,12.83L11.97,9.62L11.97,3.21L6.42,0L0.86,3.21L0.86,9.62Z "
124 /> 124 />
125 <path 125 <path
126 id="圆形 8" 126 id="圆形 8"
127 fill-rule="evenodd" 127 fill-rule="evenodd"
128 - :style="{ fill: attribute.linearColors[16] }" 128 + :style="{ fill: attribute.bgColor3 }"
129 transform="translate(32.49343013959276 6.763139720814425) rotate(0 2 2)" 129 transform="translate(32.49343013959276 6.763139720814425) rotate(0 2 2)"
130 opacity="1" 130 opacity="1"
131 d="M2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4Z " 131 d="M2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4Z "