feat：修改色版展示

src/views/chart/ContentDetails/components/CanvasPage/components/ChartTheme/index.vue

@@ -15,12 +15,16 @@
           <div class="go-flex-items-center">
             <n-text>{{ chartColorsName[key] }}</n-text>
             <span
-              class="color-item"
+              class="theme-color-item"
               v-for="colorItem in fetchShowColors(value.color)"
               :key="colorItem"
               :style="{ backgroundColor: colorItem }"
             />
           </div>
+          <div
+            class="theme-bottom"
+            :style="{ backgroundImage: chartColorsshow[key] }"
+          ></div>
         </n-card>
       </n-collapse-item>
     </n-collapse>
@@ -31,7 +35,11 @@
 import { ref, computed } from 'vue'
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasFilterEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { chartColors, chartColorsName } from '@/settings/chartThemes/index'
+import {
+  chartColors,
+  chartColorsName,
+  chartColorsshow
+} from '@/settings/chartThemes/index'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import cloneDeep from 'lodash/cloneDeep'
 import { icon } from '@/plugins'
@@ -65,14 +73,16 @@ const selectTheme = (theme: string) => {
     padding: 0;
     @include filter-bg-color('background-color4-shallow');
     border-radius: 23px;
+    overflow: hidden;
     @include deep() {
       .n-card__content {
         padding-top: 5px;
-        padding-bottom: 5px;
+        padding-bottom: 10px;
       }
     }
     &.selected {
       border: 1px solid v-bind('themeColor');
+      border-bottom: 1px solid rgba(0, 0, 0, 0);
     }
     &:first-child {
       margin-top: 0;
@@ -80,12 +90,20 @@ const selectTheme = (theme: string) => {
     .go-flex-items-center {
       justify-content: space-between;
     }
-    .color-item {
+    .theme-color-item {
       display: inline-block;
       width: 20px;
       height: 20px;
       border-radius: 50%;
     }
+    .theme-bottom {
+      position: absolute;
+      left: 0;
+      bottom: 0px;
+      width: 100%;
+      height: 3px;
+      background-image: linear-gradient(to right, #e0c3fc 0%, #8ec5fc 100%);
+    }
   }
 }
 </style>