Merge branch 'dev-sws' into dev-yxl
commit
6e33bab5f3
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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: '',
|
||||
},
|
||||
});
|
||||
|
||||
// 默认值
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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 },
|
||||
|
|
|
|||
|
|
@ -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 },
|
||||
|
|
|
|||
|
|
@ -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 },
|
||||
|
|
|
|||
|
|
@ -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 },
|
||||
|
|
|
|||
Loading…
Reference in New Issue