From dfcbf4e810b4c57092ec2c1e6b1b59584ecccc30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Sat, 14 Sep 2024 17:53:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=80=89=E9=A1=B9=E5=8D=A1?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/div-content/index.vue   |  4 ++
 src/components/common/tabs-view/index.vue     | 37 +++++++++++--------
 src/components/model-tabs/index.vue           |  2 +-
 .../model-tabs/model-tabs-styles.vue          | 13 +++++++
 .../layout/components/main/default/tabs.ts    |  6 +++
 src/views/layout/components/main/index.scss   |  4 --
 6 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/src/components/common/div-content/index.vue b/src/components/common/div-content/index.vue
index ba2b6c8c..616d2ab6 100644
--- a/src/components/common/div-content/index.vue
+++ b/src/components/common/div-content/index.vue
@@ -377,4 +377,8 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
     margin: 0 auto;
     z-index: 3;
 }
+.main-content {
+    max-width: 39rem;
+    overflow: hidden;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/common/tabs-view/index.vue b/src/components/common/tabs-view/index.vue
index dfda5e04..2ba77a2a 100644
--- a/src/components/common/tabs-view/index.vue
+++ b/src/components/common/tabs-view/index.vue
@@ -1,19 +1,22 @@
 <template>
-    <div class="tabs flex-row oh" :style="`column-gap: ${ new_style.tabs_spacing }px;`">
-        <template v-for="(item, index) in form.tabs_list" :key="index">
-            <div class="item nowrap flex-col jc-c gap-4" :class="tabs_theme + (index == 0 ? ' active' : '')">
-                <template v-if="!isEmpty(item.img)">
-                    <image-empty v-model="item.img[0]" class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
-                </template>
-                <template v-else>
-                    <image-empty class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
-                </template>
-                <div class="title" :style="title_style(index)">{{ item.title }}</div>
-                <div class="desc" :style="tabs_theme_index == '1' && index == 0 ? tabs_check : ''">{{ item.desc }}</div>
-                <icon name="checked-1" class="icon" :style="tabs_theme_index == '3' ? icon_tabs_check() : ''"></icon>
-                <div class="bottom_line" :style="tabs_check"></div>
-            </div>
-        </template>
+    <div class="flex-row gap-10 jc-sb">
+        <div class="tabs flex-row oh" :style="`column-gap: ${ new_style.tabs_spacing }px;`">
+            <template v-for="(item, index) in form.tabs_list" :key="index">
+                <div class="item nowrap flex-col jc-c gap-4" :class="tabs_theme + (index == 0 ? ' active' : '')">
+                    <template v-if="!isEmpty(item.img)">
+                        <image-empty v-model="item.img[0]" class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
+                    </template>
+                    <template v-else>
+                        <image-empty class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
+                    </template>
+                    <div class="title" :style="title_style(index)">{{ item.title }}</div>
+                    <div class="desc" :style="tabs_theme_index == '1' && index == 0 ? tabs_check : ''">{{ item.desc }}</div>
+                    <icon name="checked-1" class="icon" :style="tabs_theme_index == '3' ? icon_tabs_check() : ''"></icon>
+                    <div class="bottom_line" :style="tabs_check"></div>
+                </div>
+            </template>
+        </div>
+        <icon v-if="isTabs" :name="new_style.more_icon_class || 'fenlei-more'" :size="new_style.more_icon_size + '' || '14'" :color="new_style.more_icon_color || '#000'"></icon>
     </div>
 </template>
 
@@ -25,6 +28,10 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    isTabs: {
+        type: Boolean,
+        default: false,
+    }
 });
 // const tabs = ref(props.value);
 // 用于页面判断显示
diff --git a/src/components/model-tabs/index.vue b/src/components/model-tabs/index.vue
index e2b3701d..9868512a 100644
--- a/src/components/model-tabs/index.vue
+++ b/src/components/model-tabs/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div :style="style">
-        <tabs-view ref="tabs" :value="tabs_list"></tabs-view>
+        <tabs-view ref="tabs" :value="tabs_list" :is-tabs="true"></tabs-view>
     </div>
 </template>
 <script setup lang="ts">
diff --git a/src/components/model-tabs/model-tabs-styles.vue b/src/components/model-tabs/model-tabs-styles.vue
index cf3bd7b7..f5bf7abb 100644
--- a/src/components/model-tabs/model-tabs-styles.vue
+++ b/src/components/model-tabs/model-tabs-styles.vue
@@ -16,6 +16,19 @@
                     <slider v-model="form.tabs_spacing" :max="100"></slider>
                 </el-form-item>
             </card-container>
+            <div class="divider-line"></div>
+            <card-container>
+                <div class="mb-12">更多样式</div>
+                <el-form-item label="图标">
+                    <upload v-model:icon-value="form.more_icon_class" type="icon" is-icon :limit="1" size="50"></upload>
+                </el-form-item>
+                <el-form-item label="图标颜色">
+                    <color-picker v-model="form.more_icon_color" default-color="#CCCCCC"></color-picker>
+                </el-form-item>
+                <el-form-item label="图标大小">
+                    <slider v-model="form.more_icon_size" :max="100"></slider>
+                </el-form-item>
+            </card-container>
         </el-form>
         <div class="divider-line"></div>
         <common-styles :value="form.common_style" @update:value="common_styles_update" />
diff --git a/src/views/layout/components/main/default/tabs.ts b/src/views/layout/components/main/default/tabs.ts
index 4a3e2364..23178301 100644
--- a/src/views/layout/components/main/default/tabs.ts
+++ b/src/views/layout/components/main/default/tabs.ts
@@ -27,6 +27,9 @@ interface defaultTabs {
         tabs_size: number;
         tabs_color: string;
         tabs_spacing: number;
+        more_icon_class: string;
+        more_icon_color: string;
+        more_icon_size: number;
         common_style: object;
     };
 }
@@ -54,6 +57,9 @@ const defaultTabs: defaultTabs = {
         tabs_size: 14,
         tabs_color: 'rgba(51,51,51,1)',
         tabs_spacing: 20,
+        more_icon_class: 'fenlei-more',
+        more_icon_color: '#000',
+        more_icon_size: 14,
         common_style: {
             ...defaultCommon,
             padding: 10,
diff --git a/src/views/layout/components/main/index.scss b/src/views/layout/components/main/index.scss
index 7aabbd9f..346d12d3 100644
--- a/src/views/layout/components/main/index.scss
+++ b/src/views/layout/components/main/index.scss
@@ -103,10 +103,6 @@
                     display: flex;
                     flex-direction: column;
                     align-items: stretch;
-                    .main-content {
-                        max-width: 39rem;
-                        overflow: hidden;
-                    }
                     .model-wall-content {
                         min-height: 100%;
                         flex: 1;