From 9b02ca78bde22fe2a98356ed65db2d98884d4265 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Thu, 12 Sep 2024 15:08:33 +0800
Subject: [PATCH] =?UTF-8?q?1.diy----=20=E7=83=AD=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/coupon.vue    | 294 +++++++++++++++--------------------
 components/diy/footer.vue    |  28 ++--
 components/diy/user-info.vue |   2 +-
 3 files changed, 144 insertions(+), 180 deletions(-)

diff --git a/components/diy/coupon.vue b/components/diy/coupon.vue
index d6989e22..321b0a19 100644
--- a/components/diy/coupon.vue
+++ b/components/diy/coupon.vue
@@ -2,55 +2,58 @@
     <!-- 优惠券 -->
     <view class="coupon-theme-container">
         <view class="pr" :style="style_container">
-            <el-scrollbar class="hide-scrollbar">
+            <view class="hide-scrollbar">
                 <template v-if="theme == '1'">
-                    <view class="coupon-theme-1">
-                        <view v-for="item in data_list" :key="item" class="item">
+                    <view class="coupon-theme-1" :style="'gap:' + theme_style.spacing">
+                        <view v-for="item in data_list" :key="item" class="item" :style="'background: ' + theme_style.background">
                             <view class="coupon-theme-1-content tc" :style="'background-image: url(' + theme_bg_img.url_1 + ');background-size: 100% 100%;'">
-                                <view class="name text-line-1">{{ item.name }}</view>
-                                <view class="price">
+                                <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
+                                <view class="price" :style="'color:' + theme_style.price_color">
                                     <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
                                     <span class="number">{{ item.discount_value }}</span>
                                     <span v-if="item.type == '1'" class="symbol">折</span>
                                 </view>
                             </view>
-                            <view class="coupon-btn">立即领取</view>
+                            <view class="coupon-btn" :style="'color:' + theme_style.btn_color + ';background:' + theme_style.btn_background">立即领取</view>
                         </view>
                     </view>
                 </template>
                 <template v-else-if="theme == '2'">
-                    <view class="coupon-theme-2">
+                    <view class="coupon-theme-2" :style="'gap:' + theme_style.spacing">
                         <view v-for="item in data_list" :key="item" class="item" :style="'background-image: url(' + theme_bg_img.url_2 + ');background-size: 100% 100%;'">
                             <view class="tc">
-                                <view class="price">
+                                <view class="price" :style="'color:' + theme_style.price_color">
                                     <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
                                     <span class="number">{{ item.discount_value }}</span>
                                     <span v-if="item.type == '1'" class="symbol">折</span>
                                 </view>
-                                <view class="name text-line-1">{{ item.name }}</view>
-                                <view class="desc text-line-1">{{ item.desc }}</view>
+                                <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
+                                <view class="desc text-line-1" :style="'color:' + theme_style.desc_color">{{ item.desc }}</view>
                             </view>
-                            <view class="coupon-btn">立即领取</view>
+                            <view class="coupon-btn" :style="'color:' + theme_style.btn_color + ';background:' + theme_style.btn_background">立即领取</view>
                         </view>
                     </view>
                 </template>
                 <template v-else-if="theme == '3'">
-                    <view class="coupon-theme-3">
-                        <view v-for="item in data_list" :key="item" class="item">
-                            <view class="left">
-                                <view class="price">
-                                    <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
-                                    <span class="number">{{ item.discount_value }}</span>
-                                    <span v-if="item.type == '1'" class="symbol self-e">折</span>
-                                </view>
+                    <view class="coupon-theme-3" :style="'gap:' + theme_style.spacing">
+                        <view v-for="item in data_list" :key="item" class="item" :style="'background: ' + theme_style.background">
+                            <view class="left" :style="'background: ' + theme_style.background_inside">
+                                <div class="price-before" :style="'border-left: 0.1rem dashed ' + theme_style.border_style + '">
+                                    <view class="price" :style="'color:' + theme_style.price_color">
+                                        <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
+                                        <span class="number">{{ item.discount_value }}</span>
+                                        <span v-if="item.type == '1'" class="symbol self-e">折</span>
+                                    </view>
+                                </div>
                                 <view class="text pl-3 pr-8">
-                                    <view class="name text-line-1">{{ item.name }}</view>
-                                    <view class="desc text-line-1">{{ item.use_limit_type_name }}</view>
-                                    <view v-if="item.limit_send_count && item.limit_send_count > 0" class="limit text-line-1">(限领{{ item.limit_send_count }}张)</view>
+                                    <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
+                                    <view class="desc text-line-1" :style="'color:' + theme_style.desc_color">{{ item.use_limit_type_name }}</view>
+                                    <view v-if="item.limit_send_count && item.limit_send_count > 0" class="limit text-line-1" :style="'color:' + theme_style.limit_send_count">(限领{{ item.limit_send_count }}张)</view>
                                 </view>
                             </view>
                             <view class="right">
-                                <view class="coupon-btn">
+                                <div class="right-before"></div>
+                                <view class="coupon-btn" :style="'color:' + theme_style.btn_color">
                                     <text>立即领取</text>
                                     <icon name="arrow-right-o" class="icon"></icon>
                                 </view>
@@ -59,81 +62,95 @@
                     </view>
                 </template>
                 <template v-else-if="theme == '4'">
-                    <view class="coupon-theme-4">
-                        <el-scrollbar class="hide-scrollbar">
-                            <view class="left">
-                                <view v-for="item in data_list" :key="item" class="item">
-                                    <view class="type">通用券</view>
-                                    <view class="price">
+                    <view class="coupon-theme-4" :style="'background: ' + theme_style.background">
+                        <view class="hide-scrollbar">
+                            <view class="left" :style="'gap: ' + theme_style.spacing">
+                                <view v-for="item in data_list" :key="item" class="item" :style="'background: ' + theme_style.background_inside">
+                                    <view class="type" :style="'background: ' + theme_style.type_background + ';color:' + theme_style.type_color">
+                                        <view class="type-before" :style="'background: ' + theme_style.type_background"></view>
+                                        <text>通用券</text>
+                                        <view class="type-after" :style="'background: ' + theme_style.type_background"></view>
+                                    </view>
+                                    <view class="price" :style="'color:' + theme_style.price_color">
                                         <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
                                         <span class="number">{{ item.discount_value }}</span>
                                         <span v-if="item.type == '1'" class="symbol">折</span>
                                     </view>
-                                    <view class="name text-line-1">{{ item.name }}</view>
+                                    <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
                                 </view>
                             </view>
-                        </el-scrollbar>
+                        </view>
                         <view class="right">
+                            <view class="right-before" :style="'background: ' + theme_style.background"></view>
                             <view class="re z-i flex-col jc-c align-c">
-                                <view class="title text-line-1">{{ content_title }}</view>
-                                <view class="desc text-line-1">{{ content_desc }}</view>
-                                <view class="coupon-btn">领取全部</view>
+                                <view class="title text-line-1" :style="'color:' + theme_style.content_title_color">{{ content_title }}</view>
+                                <view class="desc text-line-1" :style="'color:' + theme_style.content_desc_color">{{ content_desc }}</view>
+                                <view class="coupon-btn" :style="'color:' + theme_style.btn_color + ';background:' + theme_style.btn_background">领取全部</view>
                             </view>
                         </view>
                     </view>
                 </template>
                 <template v-else-if="theme == '5'">
-                    <view class="coupon-theme-5">
+                    <view class="coupon-theme-5" :style="'gap:' + theme_style.spacing">
                         <view v-for="item in data_list" :key="item" class="item">
                             <view class="left" :style="'background-image: url(' + theme_bg_img.url_3 + ');background-size: 100% 100%;'">
-                                <view class="price">
+                                <view class="price" :style="'color:' + theme_style.price_color">
                                     <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
                                     <span class="number">{{ item.discount_value }}</span>
                                     <span v-if="item.type == '1'" class="symbol">折</span>
                                 </view>
-                                <view class="name text-line-1">{{ item.name }}</view>
+                                <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
                             </view>
-                            <view class="right">
-                                <view class="coupon-btn">领取</view>
+                            <view class="right" :style="'background: ' + theme_style.background">
+                                <view class="coupon-btn" :style="'color:' + theme_style.btn_color">领取</view>
                             </view>
                         </view>
                     </view>
                 </template>
                 <template v-else-if="theme == '6'">
-                    <view class="coupon-theme-6">
-                        <view v-for="item in data_list" :key="item" class="item">
-                            <view class="top">
-                                <view class="price">
-                                    <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
-                                    <span class="number">{{ item.discount_value }}</span>
-                                    <span v-if="item.type == '1'" class="symbol">折</span>
+                    <view class="coupon-theme-6" :style="'gap:' + theme_style.spacing">
+                        <view v-for="item in data_list" :key="item" class="item" :style="'background: ' + theme_style.background">
+                            <view class="pr">
+                                <view class="top-before"></view>
+                                <view class="top" :style="'background: ' + theme_style.background_inside">
+                                    <view class="price" :style="'color:' + theme_style.price_color">
+                                        <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
+                                        <span class="number">{{ item.discount_value }}</span>
+                                        <span v-if="item.type == '1'" class="symbol">折</span>
+                                    </view>
+                                    <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
                                 </view>
-                                <view class="name text-line-1">{{ item.name }}</view>
+                                <view class="top-after"></view>
                             </view>
                             <view class="bottom">
-                                <view class="coupon-btn">立即领取</view>
+                                <view class="coupon-btn" :style="'color:' + theme_style.btn_color">立即领取</view>
                             </view>
                         </view>
                     </view>
                 </template>
                 <template v-else-if="theme == '7'">
-                    <view class="coupon-theme-7">
-                        <view v-for="item in data_list" :key="item" class="item">
-                            <view class="left">
-                                <view class="price">
-                                    <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
-                                    <span class="number">{{ item.discount_value }}</span>
-                                    <span v-if="item.type == '1'" class="symbol">折</span>
+                    <view class="coupon-theme-7" :style="'gap:' + theme_style.spacing">
+                        <view v-for="item in data_list" :key="item" class="item" :style="'background: ' + theme_style.background">
+                            <view class="item-before" :style="'background: ' + theme_style.theme_7_background"></view>
+                            <view class="flex-row">
+                                <view class="left">
+                                    <view class="price" :style="'color:' + theme_style.price_color">
+                                        <span v-if="item.type == '0'" class="symbol">{{ currency_symbol }}</span>
+                                        <span class="number">{{ item.discount_value }}</span>
+                                        <span v-if="item.type == '1'" class="symbol">折</span>
+                                    </view>
+                                    <view class="name text-line-1" :style="'color:' + theme_style.name_color">{{ item.name }}</view>
+                                </view>
+                                <view class="right">
+                                    <view class="right-before" :style="'border: 2rpx dashed ' + theme_style.theme_7_background"></view>
+                                    <view class="coupon-btn" :style="'color:' + theme_style.btn_color">立即领取</view>
                                 </view>
-                                <view class="name text-line-1">{{ item.name }}</view>
-                            </view>
-                            <view class="right">
-                                <view class="coupon-btn">立即领取</view>
                             </view>
+                            <view class="item-after" :style="'background: ' + theme_style.theme_7_background"></view>
                         </view>
                     </view>
                 </template>
-            </el-scrollbar>
+            </view>
         </view>
     </view>
 </template>
@@ -160,6 +177,11 @@
                 content_title: '',
                 // 主题4 描述
                 content_desc: '',
+                theme_bg_img: {
+                    url_1: '',
+                    url_2: '',
+                    url_3: '',
+                },
             };
         },
         mounted() {
@@ -179,7 +201,6 @@
                 }
                 // 主题
                 this.theme = new_content.theme;
-
                 const new_background = gradient_computer({ color_list: new_style.background, direction: new_style.direction }, false);
                 const new_background_inside = gradient_computer({ color_list: new_style.background_inside, direction: new_style.direction_inside }, false);
                 const new_btn_background = gradient_computer({ color_list: new_style.btn_background, direction: new_style.btn_direction }, false);
@@ -199,9 +220,13 @@
                     ...(!['1', '2', '3', '5', '6', '7'].includes(this.theme) && { content_title_color: new_style.content_title_color }),
                     ...(!['1', '2', '3', '5', '6', '7'].includes(this.theme) && { content_desc_color: new_style.content_desc_color }),
                     ...(['3'].includes(this.theme) && { border_style: new_style.background[0].color }),
-                    ...(['7'].includes(this.theme) && { background: new_style.background[0].width + 'px' }),
+                    ...(['7'].includes(this.theme) && { theme_7_background: new_style.background[0].width + 'px' }),
+                };
+                this.theme_bg_img = {
+                    url_1: new_content.theme_1_static_img[0].url,
+                    url_2: new_content.theme_2_static_img[0].url,
+                    url_3: new_content.theme_5_static_img[0].url,
                 };
-
                 this.style_container = common_styles_computer(new_style.common_style);
             },
         },
@@ -211,11 +236,9 @@
     .coupon-theme-1 {
         display: flex;
         flex-direction: row;
-        gap: v-bind('theme_style.spacing');
         .item {
             flex-basis: auto;
             flex-shrink: 0;
-            background: v-bind('theme_style.background');
             width: 9rem;
             height: 9rem;
             border-radius: 1rem;
@@ -224,10 +247,8 @@
                 padding: 0.5rem 0.5rem 0 0.5rem;
                 margin-bottom: 0.5rem;
                 font-size: 1rem;
-                color: v-bind('theme_style.name_color');
             }
             .price {
-                color: v-bind('theme_style.price_color');
                 padding: 0.5rem 0 0.8rem 0;
                 .symbol {
                     font-size: 1.2rem;
@@ -244,7 +265,6 @@
             .coupon-theme-1-content {
                 width: calc(100% - 1rem);
                 margin: 0 0.5rem;
-                background-image: v-bind('theme_bg_img.url_1');
                 background-size: 100% 100%;
                 position: relative;
                 top: -1rem;
@@ -257,8 +277,6 @@
                 line-height: 1.756rem;
                 text-align: center;
                 font-size: 0.9rem;
-                color: v-bind('theme_style.btn_color');
-                background: v-bind('theme_style.btn_background');
                 border-radius: 2.3rem;
                 position: relative;
                 top: -0.2rem;
@@ -268,7 +286,6 @@
     .coupon-theme-2 {
         display: flex;
         flex-direction: row;
-        gap: v-bind('theme_style.spacing');
         .item {
             flex-basis: auto;
             flex-shrink: 0;
@@ -280,7 +297,6 @@
             flex-direction: column;
             justify-content: space-between;
             .price {
-                color: v-bind('theme_style.price_color');
                 padding: 0.3rem 0;
                 .symbol {
                     font-size: 0.8rem;
@@ -293,13 +309,11 @@
             }
             .name {
                 font-size: 0.8rem;
-                color: v-bind('theme_style.name_color');
                 font-weight: 500;
                 margin-bottom: 0.4rem;
             }
             .desc {
                 font-size: 0.8rem;
-                color: v-bind('theme_style.desc_color');
             }
 
             .coupon-btn {
@@ -309,8 +323,6 @@
                 line-height: 1.6rem;
                 text-align: center;
                 font-size: 0.9rem;
-                color: v-bind('theme_style.btn_color');
-                background: v-bind('theme_style.btn_background');
                 border-radius: 2.3rem;
                 margin-top: 0.5rem;
                 margin-bottom: 0.2rem;
@@ -319,41 +331,36 @@
     }
     .coupon-theme-3 {
         display: flex;
-        gap: v-bind('theme_style.spacing');
         .item {
             overflow: hidden;
             border-radius: 1.6rem;
             flex-basis: auto;
             flex-shrink: 0;
-            background: v-bind('theme_style.background');
             width: 100%;
             padding: 0.8rem;
             display: flex;
             .left {
                 flex: 1;
                 width: 0;
-                background: v-bind('theme_style.background_inside');
                 border-radius: 0.8rem;
                 padding: 0.6rem 1.2rem 0.3rem 1.2rem;
                 display: flex;
                 align-items: center;
+                .price-before {
+                    content: '';
+                    position: absolute;
+                    right: 0;
+                    top: -3rem;
+                    bottom: -3rem;
+                    width: 0.1rem;
+                    height: calc(100% + 6rem);
+                }
                 .price {
                     text-align: center;
                     width: 10rem;
                     position: relative;
                     display: flex;
                     align-items: flex-start;
-                    color: v-bind('theme_style.price_color');
-                    &::before {
-                        content: '';
-                        position: absolute;
-                        right: 0;
-                        top: -3rem;
-                        bottom: -3rem;
-                        width: 0.1rem;
-                        height: calc(100% + 6rem);
-                        border-left: 0.1rem dashed v-bind('theme_3_border_style');
-                    }
                     .symbol {
                         font-size: 1.8rem;
                         font-weight: 600;
@@ -374,18 +381,15 @@
                     text-align: center;
                     .name {
                         font-size: 1.8rem;
-                        color: v-bind('theme_style.name_color');
                         font-weight: 500;
                         line-height: 2.5rem;
                     }
                     .desc {
                         font-size: 1.4rem;
                         font-weight: 500;
-                        color: v-bind('theme_style.desc_color');
                         line-height: 2rem;
                     }
                     .limit {
-                        color: v-bind('theme_style.limit_send_count');
                         font-size: 1.2rem;
                     }
                 }
@@ -397,19 +401,16 @@
                 text-align: center;
                 display: flex;
                 align-items: center;
-                &::before {
-                    content: '';
+                .right-before {
                     position: absolute;
                     top: 50%;
                     transform: translateY(-50%);
                     width: 200%;
                     height: 200%;
-                    background: v-bind('theme_style.background');
                     left: -1.6rem;
                     border-radius: 100%;
                 }
                 .coupon-btn {
-                    color: v-bind('theme_style.btn_color');
                     position: relative;
                     font-size: 1.8rem;
                     font-weight: 500;
@@ -426,19 +427,16 @@
         border-radius: 1.6rem;
         padding: 0.8rem;
         display: flex;
-        background: v-bind('theme_style.background');
         .left {
             width: 21.4rem;
             display: flex;
             flex-direction: row;
-            gap: v-bind('theme_style.spacing');
             .item {
                 overflow: hidden;
                 flex-basis: auto;
                 flex-shrink: 0;
                 width: 7.2rem;
                 height: 7.2rem;
-                background: v-bind('theme_style.background_inside');
                 border-radius: 1rem;
                 position: relative;
                 display: flex;
@@ -451,27 +449,21 @@
                     top: 0;
                     left: 50%;
                     transform: translateX(-50%);
-                    background: v-bind('theme_style.type_background');
-                    color: v-bind('theme_style.type_color');
                     font-size: 1rem;
                     line-height: 1.4rem;
-                    &::before {
-                        content: '';
+                    .type-before {
                         position: absolute;
                         width: 1.5rem;
                         height: 3rem;
-                        background: v-bind('theme_style.type_background');
                         left: -0.8rem;
                         border-radius: 100%;
                         top: -1.6rem;
                         z-index: -1;
                     }
-                    &::after {
-                        content: '';
+                    .type-after {
                         position: absolute;
                         width: 1.5rem;
                         height: 3rem;
-                        background: v-bind('theme_style.type_background');
                         right: -0.8rem;
                         border-radius: 100%;
                         top: -1.6rem;
@@ -483,7 +475,6 @@
                     position: relative;
                     display: flex;
                     align-items: flex-end;
-                    color: v-bind('theme_style.price_color');
                     .symbol {
                         font-size: 1.2rem;
                     }
@@ -496,7 +487,6 @@
                 }
                 .name {
                     font-size: 1.1rem;
-                    color: v-bind('theme_style.name_color');
                     line-height: 1.6rem;
                 }
             }
@@ -505,8 +495,7 @@
             flex: 1;
             width: 0;
             position: relative;
-            &::before {
-                content: '';
+            .right-before {
                 width: 18rem;
                 height: 18rem;
                 position: absolute;
@@ -514,27 +503,22 @@
                 top: 50%;
                 transform: translateY(-50%);
                 border-radius: 100%;
-                background: v-bind('theme_style.background');
             }
             .title {
                 font-size: 1.6rem;
                 font-weight: 500;
-                color: v-bind('theme_style.content_title_color');
                 line-height: 2.2rem;
             }
             .desc {
                 margin-top: 0.3rem;
                 font-size: 1.2rem;
                 line-height: 1.7rem;
-                color: v-bind('theme_style.content_desc_color');
             }
             .coupon-btn {
                 width: 7.2rem;
                 height: 2.2rem;
                 font-size: 1.2rem;
                 line-height: 2.2rem;
-                background: v-bind('theme_style.btn_background');
-                color: v-bind('theme_style.btn_color');
                 text-align: center;
                 border-radius: 1.2rem;
                 margin-top: 0.6rem;
@@ -544,7 +528,6 @@
     .coupon-theme-5 {
         display: flex;
         flex-direction: row;
-        gap: v-bind('theme_style.spacing');
         .item {
             flex-basis: auto;
             flex-shrink: 0;
@@ -568,7 +551,6 @@
                     position: relative;
                     display: flex;
                     align-items: end;
-                    color: v-bind('theme_style.price_color');
                     margin-bottom: 0.5rem;
                     .symbol {
                         font-size: 1.2rem;
@@ -583,7 +565,6 @@
                 }
                 .name {
                     font-size: 1.2rem;
-                    color: v-bind('theme_style.name_color');
                 }
             }
             .right {
@@ -595,13 +576,11 @@
                 bottom: 0;
                 right: 0;
                 height: 100%;
-                background: v-bind('theme_style.background');
                 text-align: center;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 .coupon-btn {
-                    color: v-bind('theme_style.btn_color');
                     position: relative;
                     font-size: 1.2rem;
                     font-weight: 500;
@@ -614,7 +593,6 @@
     }
     .coupon-theme-6 {
         display: flex;
-        gap: v-bind('theme_style.spacing');
         .item {
             flex-basis: auto;
             flex-shrink: 0;
@@ -623,7 +601,24 @@
             width: 14rem;
             height: 10rem;
             position: relative;
-            background: v-bind('theme_style.background');
+            .top-before {
+                position: absolute;
+                left: -0.7rem;
+                top: 50%;
+                transform: translateY(-50%);
+                width: 1.4rem;
+                height: 1.4rem;
+                border-radius: 50%;
+            }
+            .top-after {
+                position: absolute;
+                right: -0.7rem;
+                top: 50%;
+                transform: translateY(-50%);
+                width: 1.4rem;
+                height: 1.4rem;
+                border-radius: 50%;
+            }
             .top {
                 width: 100%;
                 padding: 0.4rem;
@@ -632,38 +627,14 @@
                 align-items: center;
                 justify-content: center;
                 z-index: 1;
-                background: v-bind('theme_style.background_inside');
                 border-radius: 0.6rem;
                 position: relative;
                 overflow: hidden;
-                &::before {
-                    content: '';
-                    position: absolute;
-                    left: -0.7rem;
-                    top: 50%;
-                    transform: translateY(-50%);
-                    width: 1.4rem;
-                    height: 1.4rem;
-                    background: v-bind('theme_style.background');
-                    border-radius: 50%;
-                }
-                &::after {
-                    content: '';
-                    position: absolute;
-                    right: -0.7rem;
-                    top: 50%;
-                    transform: translateY(-50%);
-                    width: 1.4rem;
-                    height: 1.4rem;
-                    background: v-bind('theme_style.background');
-                    border-radius: 50%;
-                }
                 .price {
                     text-align: center;
                     position: relative;
                     display: flex;
                     align-items: end;
-                    color: v-bind('theme_style.price_color');
                     margin-bottom: 0.1rem;
                     .symbol {
                         font-size: 2.2rem;
@@ -678,14 +649,12 @@
                 }
                 .name {
                     font-size: 1.2rem;
-                    color: v-bind('theme_style.name_color');
                 }
             }
             .bottom {
                 margin-top: 0.6rem;
                 text-align: center;
                 .coupon-btn {
-                    color: v-bind('theme_style.btn_color');
                     position: relative;
                     font-size: 1.6rem;
                     line-height: 2.2rem;
@@ -697,7 +666,6 @@
     }
     .coupon-theme-7 {
         display: flex;
-        gap: v-bind('theme_style.spacing');
         .item {
             flex-basis: auto;
             flex-shrink: 0;
@@ -705,27 +673,22 @@
             width: 11.8rem;
             height: 6.4rem;
             position: relative;
-            background: v-bind('theme_style.background');
             overflow: hidden;
             display: flex;
-            &::before {
-                content: '';
+            .item-before {
                 position: absolute;
                 left: 8rem;
                 top: -0.6rem;
                 width: 1.2rem;
                 height: 1.2rem;
-                background-color: v-bind(theme_7_background_style);
                 border-radius: 50%;
             }
-            &::after {
-                content: '';
+            .item-after {
                 position: absolute;
                 left: 8rem;
                 bottom: -0.6rem;
                 width: 1.2rem;
                 height: 1.2rem;
-                background-color: v-bind(theme_7_background_style);
                 border-radius: 50%;
             }
             .left {
@@ -741,7 +704,6 @@
                     position: relative;
                     display: flex;
                     align-items: end;
-                    color: v-bind('theme_style.price_color');
                     margin-bottom: 0.5rem;
                     .symbol {
                         font-size: 1.2rem;
@@ -756,7 +718,6 @@
                 }
                 .name {
                     font-size: 1.2rem;
-                    color: v-bind('theme_style.name_color');
                 }
             }
             .right {
@@ -764,21 +725,18 @@
                 width: 0;
                 padding-left: 0.7rem;
                 position: relative;
-                &::before {
-                    content: '';
+                .right-before {
                     position: absolute;
                     left: -0.05rem;
                     top: 0;
                     bottom: 0;
                     width: 0;
                     height: 100%;
-                    border: 0.1rem dashed v-bind(theme_7_background_style);
                     opacity: 0.61;
                 }
                 .coupon-btn {
                     padding: 0.4rem;
                     width: 100%;
-                    color: v-bind('theme_style.btn_color');
                     font-size: 1.1rem;
                     font-weight: 500;
                     text-align: center;
@@ -789,8 +747,12 @@
         }
     }
     .hide-scrollbar {
-        :deep(.el-scrollbar__bar) {
-            display: none !important;
+        overflow: auto;
+        &::-webkit-scrollbar {
+            display: none;
+            width: 0;
+            height: 0;
+            color: transparent;
         }
     }
 </style>
diff --git a/components/diy/footer.vue b/components/diy/footer.vue
index 9f1e43a7..022cc8cb 100644
--- a/components/diy/footer.vue
+++ b/components/diy/footer.vue
@@ -1,20 +1,22 @@
 <template>
     <!-- 底部导航 -->
-    <view class="footer-nav flex-row jc-c align-c bottom-line-exclude">
+    <view class="footer-nav flex-row jc-c align-c">
         <view class="footer-nav-content flex-row jc-c align-c wh" :style="style_container">
-            <ul class="flex-row jc-sa align-c wh padding-0">
-                <li v-for="(item, index) in nav_content" :key="index" class="flex-1 flex-col jc-c align-c gap-5" :data-index="index" :data-value="item.link.page" @tap="url_event">
-                    <view v-if="nav_style !== 2" class="img pr">
-                        <view class="img-item pa border-radius-xs animate-linear" :class="is_active != index ? 'active' : ''">
-                            <img :src="item.img[0].url" class="wh-auto ht-auto" />
+            <view class="bottom-line-exclude">
+                <ul class="flex-row jc-sa align-c wh padding-0">
+                    <li v-for="(item, index) in nav_content" :key="index" class="flex-1 flex-col jc-c align-c gap-5" :data-index="index" :data-value="item.link.page" @tap="url_event">
+                        <view v-if="nav_style !== 2" class="img pr">
+                            <view class="img-item pa border-radius-xs animate-linear" :class="is_active != index ? 'active' : ''">
+                                <img :src="item.img[0].url" class="wh-auto ht-auto" />
+                            </view>
+                            <view class="img-item pa border-radius-xs animate-linear" :class="is_active == index ? 'active' : ''">
+                                <img :src="item.img_checked[0].url" class="wh-auto ht-auto" />
+                            </view>
                         </view>
-                        <view class="img-item pa border-radius-xs animate-linear" :class="is_active == index ? 'active' : ''">
-                            <img :src="item.img_checked[0].url" class="wh-auto ht-auto" />
-                        </view>
-                    </view>
-                    <span v-if="nav_style !== 1" class="animate-linear size-12 pr z-i" :style="is_active == index ? text_color_checked : default_text_color">{{ item.name }}</span>
-                </li>
-            </ul>
+                        <span v-if="nav_style !== 1" class="animate-linear size-12 pr z-i" :style="is_active == index ? text_color_checked : default_text_color">{{ item.name }}</span>
+                    </li>
+                </ul>
+            </view>
         </view>
     </view>
 </template>
diff --git a/components/diy/user-info.vue b/components/diy/user-info.vue
index bc034b9f..15cd4338 100644
--- a/components/diy/user-info.vue
+++ b/components/diy/user-info.vue
@@ -4,7 +4,7 @@
         <view class="pr padding-xxl" :style="style">
             <view class="flex-row jc-sb align-c margin-bottom-xxl">
                 <view class="flex-1 flex-row align-c gap-12">
-                    <img class="circle" :src="user_info.user.avatar" :width="base_data.user_avatar_size" :height="base_data.user_avatar_size" />
+                    <image :src="user_info.user.avatar" class="circle" mode="widthFix" :style="'width:' + base_data.user_avatar_size * 2 + 'rpx;height:' + base_data.user_avatar_size * 2 + 'rpx;'" />
                     <view class="flex-col gap-8">
                         <view class="text-size fw-b" :style="user_name_style">{{ user_info.user.user_name_view || '' }}</view>
                         <view v-if="id_bool" class="padding-horizontal-sm padding-vertical-xsss border-radius-sm" :style="number_code_style">ID:{{ user_info.user.number_code || '' }}</view>