1.diy---- 热区
sws
parent
25a84d3c4e
commit
9b02ca78bd
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue