Merge branch 'dev-sws' into dev-yxl

v1.0.0
于肖磊 2024-10-15 11:36:44 +08:00
commit 6e33bab5f3
16 changed files with 86 additions and 32 deletions

View File

@ -4,7 +4,7 @@
<el-radio-group v-if="typeList.includes('typeface')" v-model="typeface">
<el-radio v-for="item in font_weight" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
<el-form-item v-if="typeList.includes('size')" label="字号" label-width="40" class="mb-0 w form-item-child-label">
<el-form-item v-if="typeList.includes('size')" :label="sliderName" label-width="40" class="mb-0 w form-item-child-label">
<slider v-model="size" :max="100"></slider>
</el-form-item>
</div>
@ -14,22 +14,24 @@
interface Props {
defaultColor?: string;
typeList?: string[]; // 3
sliderName?: string;
}
const props = withDefaults(defineProps<Props>(), {
defaultColor: '',
typeList: () => ['color', 'typeface', 'size'],
sliderName: '字号',
});
const color = defineModel('color', {
type: String,
default: ''
default: '',
});
const typeface = defineModel('typeface', {
type: String,
default: '400'
default: '400',
});
const size = defineModel('size', {
type: Number,
default: 15
default: 15,
});
const font_weight = [
@ -38,5 +40,4 @@ const font_weight = [
];
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>

View File

@ -12,7 +12,7 @@
<div class="title" :style="title_style(index)">{{ item.title }}</div>
<div class="desc" :style="tabs_theme_index == '1' && index == activeIndex ? 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 class="bottom_line" :class="tabs_bottom_line_theme" :style="tabs_check"></div>
</div>
</template>
</div>
@ -61,6 +61,10 @@ const tabs_theme = computed(() => {
}
return tabs_theme;
});
const tabs_bottom_line_theme = computed(() => {
return new_style.value.tabs_one_theme == '1' ? 'tabs-bottom-line-theme' : '';
});
//
const tabs_check = computed(() => {
const new_gradient_params = {
@ -152,6 +156,15 @@ const icon_tabs_check = () => {
display: block;
}
}
.tabs-bottom-line-theme {
opacity: 0.6;
bottom: 0.8rem;
z-index: 0;
height: 0.7rem;
border-radius: 0;
width: 76%;
left: 12%;
}
}
&.tabs-style-2 {
&.active {

View File

@ -4,7 +4,7 @@
<model-article-tabs-content :value="value.content" :tab-style="value.style" :default-config="data_config"></model-article-tabs-content>
</template>
<template v-else-if="type == '2'">
<model-article-tabs-styles :value="value.style" :content="value.content" :default-config="data_config"></model-article-tabs-styles>
<model-article-tabs-styles :value="value.style" :content="value.content" :tabs-style="value.content.tabs_theme" :default-config="data_config"></model-article-tabs-styles>
</template>
</div>
</template>

View File

@ -4,6 +4,10 @@
<card-container>
<div class="mb-12">选项卡样式</div>
<el-form-item label="选中装饰">
<el-radio-group v-if="tabsStyle == '0'" v-model="form.tabs_one_theme">
<el-radio value="0">样式一</el-radio>
<el-radio value="1">样式二</el-radio>
</el-radio-group>
<mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
</el-form-item>
<el-form-item label="选中文字">
@ -90,6 +94,10 @@ const props = defineProps({
img_radius_1: 0,
}),
},
tabsStyle: {
type: String,
default: '',
},
});
//
const state = reactive({

View File

@ -11,7 +11,7 @@
</el-form-item>
<template v-if="theme != '6'">
<el-form-item label="已售数量">
<color-text-size-group v-model:color="form.shop_sold_number_color" v-model:typeface="form.shop_sold_number_typeface" v-model:size="form.shop_sold_number_size" default-color="#000000"></color-text-size-group>
<color-text-size-group v-model:color="form.shop_sold_number_color" v-model:typeface="form.shop_sold_number_typeface" v-model:size="form.shop_sold_number_size" slider-name="" default-color="#000000"></color-text-size-group>
</el-form-item>
</template>
<!-- <el-form-item label="评分">
@ -68,7 +68,7 @@
</template>
<template v-else>
<el-form-item label="图标设置">
<color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
<color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" slider-name="" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
</template>
</card-container>

View File

@ -4,7 +4,7 @@
<model-goods-tabs-content :value="value.content" :tab-style="value.style" :default-config="data_config"></model-goods-tabs-content>
</template>
<template v-if="type == '2'">
<model-goods-tabs-styles :value="value.style" :content="value.content" :default-config="data_config"></model-goods-tabs-styles>
<model-goods-tabs-styles :value="value.style" :tabs-style="value.content.tabs_theme" :content="value.content" :default-config="data_config"></model-goods-tabs-styles>
</template>
</div>
</template>

View File

@ -4,6 +4,10 @@
<card-container>
<div class="mb-12">选项卡样式</div>
<el-form-item label="选中装饰">
<el-radio-group v-if="tabsStyle == '0'" v-model="form.tabs_one_theme">
<el-radio value="0">样式一</el-radio>
<el-radio value="1">样式二</el-radio>
</el-radio-group>
<mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
</el-form-item>
<el-form-item label="选中文字">
@ -27,7 +31,7 @@
</el-form-item>
<template v-if="theme != '6'">
<el-form-item label="已售数量">
<color-text-size-group v-model:color="form.shop_sold_number_color" v-model:typeface="form.shop_sold_number_typeface" v-model:size="form.shop_sold_number_size" default-color="#000000"></color-text-size-group>
<color-text-size-group v-model:color="form.shop_sold_number_color" v-model:typeface="form.shop_sold_number_typeface" v-model:size="form.shop_sold_number_size" slider-name="" default-color="#000000"></color-text-size-group>
</el-form-item>
</template>
<el-form-item label="内容圆角">
@ -64,7 +68,7 @@
<card-container>
<div class="mb-12">轮播设置</div>
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" active-value="1" inactive-value="0"/>
<el-switch v-model="form.is_roll" active-value="1" inactive-value="0" />
</el-form-item>
<el-form-item v-if="form.is_roll == '1'" label="间隔时间">
<slider v-model="form.interval_time" :min="1" :max="100"></slider>
@ -84,7 +88,7 @@
</template>
<template v-else>
<el-form-item label="图标设置">
<color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
<color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" slider-name="" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
</template>
</card-container>
@ -111,6 +115,11 @@ const props = defineProps({
img_radius_1: 0,
}),
},
//
tabsStyle: {
type: String,
default: '',
},
});
//

View File

@ -93,7 +93,7 @@
</template>
<template v-else>
<el-form-item label="图标设置">
<color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
<color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" slider-name="" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
</template>
</card-container>

View File

@ -4,7 +4,7 @@
<model-tabs-carousel-content :value="value.content" :tab-carousel-style="value.style"></model-tabs-carousel-content>
</template>
<template v-if="type == '2'">
<model-tabs-carousel-styles :value="value.style" :content="value.content"></model-tabs-carousel-styles>
<model-tabs-carousel-styles :value="value.style" :tabs-style="value.content.tabs_theme" :content="value.content"></model-tabs-carousel-styles>
</template>
</div>
</template>
@ -20,5 +20,4 @@ const props = defineProps({
},
});
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>

View File

@ -2,7 +2,7 @@
<div class="w">
<el-tabs v-model="tabs_name" class="content-tabs">
<el-tab-pane label="选项卡" name="tabs">
<model-tabs-styles :value="form" :is-common="false"></model-tabs-styles>
<model-tabs-styles :value="form" :tabs-style="tabsStyle" :is-common="false"></model-tabs-styles>
</el-tab-pane>
<el-tab-pane label="轮播" name="carousel">
<model-carousel-styles :value="form" :content="new_content" :is-common="false"></model-carousel-styles>
@ -31,7 +31,11 @@ const props = defineProps({
content: {
type: Object,
default: () => {},
}
},
tabsStyle: {
type: String,
default: () => {},
},
});
const state = reactive({
@ -59,7 +63,7 @@ const common_styles_update = (val: Object) => {
width: 10rem;
font-size: 1.4rem;
}
.el-tabs__active-bar{
.el-tabs__active-bar {
width: 100%;
}
}

View File

@ -4,7 +4,7 @@
<model-tabs-content :value="value.content" :tab-style="value.style"></model-tabs-content>
</template>
<template v-if="type == '2'">
<model-tabs-styles :value="value.style"></model-tabs-styles>
<model-tabs-styles :value="value.style" :tabs-style="value.content.tabs_theme"></model-tabs-styles>
</template>
</div>
</template>
@ -20,5 +20,4 @@ const props = defineProps({
},
});
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>

View File

@ -4,6 +4,10 @@
<card-container>
<div class="mb-12">选项卡样式</div>
<el-form-item label="选中装饰">
<el-radio-group v-if="tabsStyle == '0'" v-model="form.tabs_one_theme" @change="tabs_one_theme_event">
<el-radio value="0">样式一</el-radio>
<el-radio value="1">样式二</el-radio>
</el-radio-group>
<mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
</el-form-item>
<el-form-item label="选中标题">
@ -46,6 +50,10 @@ const props = defineProps({
type: Boolean,
default: true,
},
tabsStyle: {
type: String,
default: '',
},
});
const state = reactive({
@ -56,6 +64,11 @@ const { form } = toRefs(state);
const common_styles_update = (val: Object) => {
form.value.common_style = val;
};
// 1
const tabs_one_theme_event = (val: any) => {
};
//
const tabs_checked_event = (arry: string[], type: number) => {
form.value.tabs_checked = arry;
form.value.tabs_direction = type.toString();

View File

@ -31,6 +31,7 @@ interface DefaultArticleTabs {
field_show: string[];
};
style: {
tabs_one_theme: string;
tabs_checked: color_list[];
tabs_direction: string;
tabs_weight_checked: string;
@ -78,6 +79,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
field_show: ['0', '1'],
},
style: {
tabs_one_theme: '0',
tabs_checked: [
{ color: '#FF2222', color_percentage: undefined },
{ color: '#FF9898', color_percentage: undefined },

View File

@ -36,6 +36,7 @@ interface DefaultProductList {
shop_button_size: string;
};
style: {
tabs_one_theme: string;
tabs_checked: color_list[];
tabs_direction: string;
tabs_weight_checked: string;
@ -98,6 +99,7 @@ const defaultProductList: DefaultProductList = {
shop_button_size: '1',
},
style: {
tabs_one_theme: '0',
tabs_checked: [
{ color: '#FF2222', color_percentage: undefined },
{ color: '#FF9898', color_percentage: undefined },

View File

@ -24,11 +24,12 @@ interface defaultTabs {
tabs_list: tabs_page[];
carousel_type: string;
carousel_list: carousel_list[];
img_fit: string,
img_fit: string;
is_roll: string;
interval_time: number;
};
style: {
tabs_one_theme: string;
tabs_checked: color_list[];
tabs_direction: string;
tabs_weight_checked: string;
@ -48,8 +49,8 @@ interface defaultTabs {
radius_bottom_left: number;
radius_bottom_right: number;
is_show: string;
height: number,
image_spacing: number,
height: number;
image_spacing: number;
indicator_style: string;
indicator_location: string;
indicator_size: number;
@ -92,23 +93,24 @@ const defaultTabs: defaultTabs = {
carousel_img: [],
carousel_video: [],
carousel_link: {},
video_title: '视频名称'
video_title: '视频名称',
},
{
carousel_img: [],
carousel_video: [],
carousel_link: {},
video_title: '视频名称'
video_title: '视频名称',
},
{
carousel_img: [],
carousel_video: [],
carousel_link: {},
video_title: '视频名称'
}
]
video_title: '视频名称',
},
],
},
style: {
tabs_one_theme: '0',
tabs_checked: [
{ color: '#FF2222', color_percentage: undefined },
{ color: '#FF9898', color_percentage: undefined },

View File

@ -18,6 +18,7 @@ interface defaultTabs {
tabs_list: tabs_page[];
};
style: {
tabs_one_theme: string;
tabs_checked: color_list[];
tabs_direction: string;
tabs_weight_checked: string;
@ -45,6 +46,7 @@ const defaultTabs: defaultTabs = {
],
},
style: {
tabs_one_theme: '0',
tabs_checked: [
{ color: '#FF2222', color_percentage: undefined },
{ color: '#FF9898', color_percentage: undefined },