From 49d8c357474d48e2c05cbb5feffa9c669720f7b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
<1262327911@qq.com>
Date: Fri, 24 Feb 2023 21:42:27 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E4=B8=BB=E9=A2=98?=
=?UTF-8?q?=E9=A2=9C=E8=89=B2UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/ChartThemeColor/index.vue | 27 ++++++-------------
.../chart/ContentHeader/headerTitle/index.vue | 5 ++--
2 files changed, 11 insertions(+), 21 deletions(-)
diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue
index 8313bda2..fdca3b4a 100644
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue
@@ -17,12 +17,9 @@
v-for="colorItem in fetchShowColors(value.color)"
:key="colorItem"
:style="{ backgroundColor: colorItem }"
- ></span>
+ ></span>
</div>
- <div
- class="theme-bottom"
- :style="{ backgroundImage: chartColorsshow[key] }"
- ></div>
+ <div class="theme-bottom" :style="{ backgroundImage: chartColorsshow[key] }"></div>
</n-card>
</div>
</template>
@@ -31,12 +28,7 @@
import { computed } from 'vue'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import {
- chartColors,
- chartColorsName,
- chartColorsshow,
- ChartColorsNameType
-} from '@/settings/chartThemes/index'
+import { chartColors, chartColorsName, chartColorsshow, ChartColorsNameType } from '@/settings/chartThemes/index'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import cloneDeep from 'lodash/cloneDeep'
import { icon } from '@/plugins'
@@ -69,6 +61,8 @@ const selectTheme = (theme: ChartColorsNameType) => {
</script>
<style lang="scss" scoped>
+$radius: 10px;
+
@include go(chart-theme-color) {
padding-top: 20px;
.card-box {
@@ -76,14 +70,8 @@ const selectTheme = (theme: ChartColorsNameType) => {
margin-top: 15px;
padding: 0;
@include fetch-bg-color('background-color4-shallow');
- border-radius: 23px;
+ border-radius: $radius;
overflow: hidden;
- @include deep() {
- .n-card__content {
- padding-top: 5px;
- padding-bottom: 10px;
- }
- }
&.selected {
border: 1px solid v-bind('themeColor');
border-bottom: 1px solid rgba(0, 0, 0, 0);
@@ -93,12 +81,13 @@ const selectTheme = (theme: ChartColorsNameType) => {
}
.go-flex-items-center {
justify-content: space-between;
+ margin-top: -4px;
}
.theme-color-item {
display: inline-block;
width: 20px;
height: 20px;
- border-radius: 50%;
+ border-radius: $radius;
}
.theme-bottom {
position: absolute;
diff --git a/src/views/chart/ContentHeader/headerTitle/index.vue b/src/views/chart/ContentHeader/headerTitle/index.vue
index 3b8efb71..d41541ce 100644
--- a/src/views/chart/ContentHeader/headerTitle/index.vue
+++ b/src/views/chart/ContentHeader/headerTitle/index.vue
@@ -5,7 +5,7 @@
</n-icon>
<n-text @click="handleFocus">
工作空间 -
- <n-button v-show="!focus" secondary round size="tiny">
+ <n-button v-show="!focus" secondary size="tiny">
<span class="title">
{{ comTitle }}
</span>
@@ -19,7 +19,6 @@
type="text"
maxlength="16"
show-count
- round
placeholder="请输入项目名称"
v-model:value.trim="title"
@keyup.enter="handleBlur"
@@ -74,6 +73,8 @@ const handleBlur = () => {
</script>
<style lang="scss" scoped>
.title {
+ padding-left: 5px;
+ padding-right: 5px;
font-size: 15px;
}
</style>