简柏林 / thingskit-view · Commits

Commit e622770606fe62772e51a4cc9416c07996e8c4de

Authored by fengwotao
1 parent 43378e43

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

Inline Side-by-side
Showing 3 changed files with 34 additions and 39 deletions
@@ -7,20 +7,9 @@ import { chartInitConfig } from '@/settings/designSetting' @@ -7,20 +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 - '#21649C',  
12 - '#060F1E',  
13 - '#2AFFFF',  
14 - '#2AFFFF',  
15 - '#2AFFFF',  
16 - '#2AFFFF',  
17 - '#2affff',  
18 - '#16d9d9',  
19 - '#2affff',  
20 - '#2affff',  
21 - '#2affff',  
22 - '#2affff'  
23 - ], 10 + bgColor1:'#21649C',
  11 + bgColor2:'#060F1E',
  12 + bgColor3:'#2AFFFF',
24 fontSize: 20, 13 fontSize: 20,
25 fontPos: { 14 fontPos: {
26 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 = '#21649C'"> 恢复默认 </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 = '#060F1E'"> 恢复默认 </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>
@@ -3,16 +3,16 @@ @@ -3,16 +3,16 @@
3 <svg :width="w" :height="h" fill="none"> 3 <svg :width="w" :height="h" fill="none">
4 <defs> 4 <defs>
5 <linearGradient id="title3_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 5 <linearGradient id="title3_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
6 - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />  
7 - <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="1" /> 6 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="1" />
  7 + <stop offset="1" :stop-color="attribute.bgColor2" stop-opacity="1" />
8 </linearGradient> 8 </linearGradient>
9 <linearGradient id="title3_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 9 <linearGradient id="title3_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
10 - <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="1" />  
11 - <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="0" /> 10 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  11 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="0" />
12 </linearGradient> 12 </linearGradient>
13 <linearGradient id="title3_2" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 13 <linearGradient id="title3_2" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
14 - <stop offset="0" :stop-color="attribute.linearColors[4]" stop-opacity="1" />  
15 - <stop offset="1" :stop-color="attribute.linearColors[5]" stop-opacity="0" /> 14 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  15 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="0" />
16 </linearGradient> 16 </linearGradient>
17 </defs> 17 </defs>
18 <g opacity="1" transform="translate(-6.249999273677531e-8 0.5) rotate(0 160.00000003125 15.000000000000005)"> 18 <g opacity="1" transform="translate(-6.249999273677531e-8 0.5) rotate(0 160.00000003125 15.000000000000005)">
@@ -54,13 +54,13 @@ @@ -54,13 +54,13 @@
54 /> 54 />
55 <path 55 <path
56 id="路径 5" 56 id="路径 5"
57 - :style="{ stroke: attribute.linearColors[10], strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }" 57 + :style="{ stroke: attribute.bgColor3, strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }"
58 transform="translate(0 0.0005) rotate(0 2.000000062499999 0)" 58 transform="translate(0 0.0005) rotate(0 2.000000062499999 0)"
59 d="M0,0L4,0 " 59 d="M0,0L4,0 "
60 /> 60 />
61 <path 61 <path
62 id="路径 5" 62 id="路径 5"
63 - :style="{ stroke: attribute.linearColors[11], strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }" 63 + :style="{ stroke: attribute.bgColor3, strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }"
64 :transform="`translate(0 ${h - 1}) rotate(0 2.000000062499999 0)`" 64 :transform="`translate(0 ${h - 1}) rotate(0 2.000000062499999 0)`"
65 d="M0,0 L4,0 " 65 d="M0,0 L4,0 "
66 /> 66 />
@@ -68,7 +68,7 @@ @@ -68,7 +68,7 @@
68 <path 68 <path
69 id="三角形 1" 69 id="三角形 1"
70 fill-rule="evenodd" 70 fill-rule="evenodd"
71 - :style="{ fill: attribute.linearColors[6] }" 71 + :style="{ fill: attribute.bgColor3 }"
72 transform="translate(4 0) rotate(0 6.598076211353316 4.5)" 72 transform="translate(4 0) rotate(0 6.598076211353316 4.5)"
73 opacity="1" 73 opacity="1"
74 d="M2.8,9L13.2,9L0,0L2.8,9Z " 74 d="M2.8,9L13.2,9L0,0L2.8,9Z "
@@ -76,7 +76,7 @@ @@ -76,7 +76,7 @@
76 <path 76 <path
77 id="三角形 1" 77 id="三角形 1"
78 fill-rule="evenodd" 78 fill-rule="evenodd"
79 - :style="{ fill: attribute.linearColors[7] }" 79 + :style="{ fill: attribute.bgColor3 }"
80 transform="translate(4 9) rotate(0 6.598076211353316 4.5)" 80 transform="translate(4 9) rotate(0 6.598076211353316 4.5)"
81 opacity="1" 81 opacity="1"
82 d="M13.2,0L2.8,0L0,9L13.2,0Z " 82 d="M13.2,0L2.8,0L0,9L13.2,0Z "
@@ -84,7 +84,7 @@ @@ -84,7 +84,7 @@
84 <path 84 <path
85 id="圆形 7" 85 id="圆形 7"
86 fill-rule="evenodd" 86 fill-rule="evenodd"
87 - :style="{ fill: attribute.linearColors[8] }" 87 + :style="{ fill: attribute.bgColor3 }"
88 transform="translate(0 7) rotate(0 2 2)" 88 transform="translate(0 7) rotate(0 2 2)"
89 opacity="1" 89 opacity="1"
90 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 " 90 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 "
@@ -93,7 +93,7 @@ @@ -93,7 +93,7 @@
93 <path 93 <path
94 id="矩形 17" 94 id="矩形 17"
95 fill-rule="evenodd" 95 fill-rule="evenodd"
96 - :style="{ fill: attribute.linearColors[9] }" 96 + :style="{ fill: attribute.bgColor3 }"
97 transform="translate(6.249999895402425e-8 2) rotate(0 0.5 13)" 97 transform="translate(6.249999895402425e-8 2) rotate(0 0.5 13)"
98 opacity="1" 98 opacity="1"
99 :d="`M0,${h - 5}L1,${h - 5}L1,0L0,0L0,${h - 5}Z`" 99 :d="`M0,${h - 5}L1,${h - 5}L1,0L0,0L0,${h - 5}Z`"