简柏林 / thingskit-view · Commits

Commit 43378e43f59865e340fd82b60fd98a3d8a3d414e

Authored by fengwotao
1 parent 6aa9ce70

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

Inline Side-by-side
Showing 4 changed files with 47 additions and 21 deletions
@@ -36,7 +36,7 @@ @@ -36,7 +36,7 @@
36 <n-button size="small" @click="optionData.attribute.bgRightColor = '#2AFFFF'"> 恢复默认 </n-button> 36 <n-button size="small" @click="optionData.attribute.bgRightColor = '#2AFFFF'"> 恢复默认 </n-button>
37 </SettingItem> 37 </SettingItem>
38 </SettingItemBox> 38 </SettingItemBox>
39 - <SettingItemBox :name="`装饰`"> 39 + <SettingItemBox :name="`矩形装饰`">
40 <SettingItem name="颜色"> 40 <SettingItem name="颜色">
41 <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.rect17"></n-color-picker> 41 <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.rect17"></n-color-picker>
42 </SettingItem> 42 </SettingItem>
@@ -7,7 +7,11 @@ import { chartInitConfig } from '@/settings/designSetting' @@ -7,7 +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: ['#21649C', '#060F1E', '#2AFFFF', '#000000', '#ffcc33', '#ffcc33'], 10 + bgLeftColor1:'#21649C',
  11 + bgLeftColor2:'#060F1E',
  12 + bgLeftColor3:'#2AFFFF',
  13 + bgLeftColor4:'#000000',
  14 + rect19:'#FFCC33',
11 fontSize: 20, 15 fontSize: 20,
12 fontPos: { 16 fontPos: {
13 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="`左边装饰1`">
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.bgLeftColor1"></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.bgLeftColor1 = '#21649C'"> 恢复默认 </n-button>
  29 + </SettingItem>
  30 + </SettingItemBox>
  31 + <SettingItemBox :name="`右边装饰1`">
  32 + <SettingItem name="颜色">
  33 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgLeftColor2"></n-color-picker>
  34 + </SettingItem>
  35 + <SettingItem>
  36 + <n-button size="small" @click="optionData.attribute.bgLeftColor2 = '#060F1E'"> 恢复默认 </n-button>
  37 + </SettingItem>
  38 + </SettingItemBox>
  39 + <SettingItemBox :name="`右边装饰3`">
  40 + <SettingItem name="颜色">
  41 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgLeftColor3"></n-color-picker>
  42 + </SettingItem>
  43 + <SettingItem>
  44 + <n-button size="small" @click="optionData.attribute.bgLeftColor3 = '#2AFFFF'"> 恢复默认 </n-button>
  45 + </SettingItem>
  46 + </SettingItemBox>
  47 + <SettingItemBox :name="`右边装饰4`">
  48 + <SettingItem name="颜色">
  49 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgLeftColor4"></n-color-picker>
  50 + </SettingItem>
  51 + <SettingItem>
  52 + <n-button size="small" @click="optionData.attribute.bgLeftColor4 = '#000000'"> 恢复默认 </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.rect19"></n-color-picker>
  58 + </SettingItem>
  59 + <SettingItem>
  60 + <n-button size="small" @click="optionData.attribute.rect19 = '#FFCC33'"> 恢复默认 </n-button>
39 </SettingItem> 61 </SettingItem>
40 </SettingItemBox> 62 </SettingItemBox>
41 </CollapseItem> 63 </CollapseItem>
@@ -3,12 +3,12 @@ @@ -3,12 +3,12 @@
3 <svg :width="w" :height="h" fill="none"> 3 <svg :width="w" :height="h" fill="none">
4 <defs xmlns="http://www.w3.org/2000/svg"> 4 <defs xmlns="http://www.w3.org/2000/svg">
5 <linearGradient id="title2_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 5 <linearGradient id="title2_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.bgLeftColor1" stop-opacity="1" />
  7 + <stop offset="1" :stop-color="attribute.bgLeftColor2" stop-opacity="1" />
8 </linearGradient> 8 </linearGradient>
9 <linearGradient id="title2_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 9 <linearGradient id="title2_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
10 - <stop offset="0" :stop-color="attribute.linearColors[3]" stop-opacity="1" />  
11 - <stop offset="1" :stop-color="attribute.linearColors[4]" stop-opacity="0" /> 10 + <stop offset="0" :stop-color="attribute.bgLeftColor3" stop-opacity="1" />
  11 + <stop offset="1" :stop-color="attribute.bgLeftColor4" stop-opacity="0" />
12 </linearGradient> 12 </linearGradient>
13 </defs> 13 </defs>
14 <g opacity="1" transform="translate(0 0) rotate(0 160 15)"> 14 <g opacity="1" transform="translate(0 0) rotate(0 160 15)">
@@ -47,7 +47,7 @@ @@ -47,7 +47,7 @@
47 <path 47 <path
48 id="矩形 title2_d" 48 id="矩形 title2_d"
49 fill-rule="evenodd" 49 fill-rule="evenodd"
50 - :style="{ fill: attribute.linearColors[4] }" 50 + :style="{ fill: attribute.rect19 }"
51 :transform="`translate(9 ${h / 2 - 15 / 2}) rotate(0 3.5 7.5)`" 51 :transform="`translate(9 ${h / 2 - 15 / 2}) rotate(0 3.5 7.5)`"
52 opacity="1" 52 opacity="1"
53 d="M0,15L2,15L7,0L5,0L0,15Z " 53 d="M0,15L2,15L7,0L5,0L0,15Z "
@@ -55,7 +55,7 @@ @@ -55,7 +55,7 @@
55 <path 55 <path
56 id="矩形 title2_d" 56 id="矩形 title2_d"
57 fill-rule="evenodd" 57 fill-rule="evenodd"
58 - :style="{ fill: attribute.linearColors[5] }" 58 + :style="{ fill: attribute.rect19}"
59 :transform="`translate(15 ${h / 2 - 15 / 2}) rotate(0 3.5 7.5)`" 59 :transform="`translate(15 ${h / 2 - 15 / 2}) rotate(0 3.5 7.5)`"
60 opacity="1" 60 opacity="1"
61 d="M0,15L2,15L7,0L5,0L0,15Z " 61 d="M0,15L2,15L7,0L5,0L0,15Z "