o卡 o oo o
parent
db5f4f92b7
commit
702b4f5829
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="tabs flex-row oh">
|
||||
<div class="tabs flex-row oh" :style="`column-gap: ${ new_style.tabs_spacing }px;`">
|
||||
<template v-for="(item, index) in form.tabs_list" :key="index">
|
||||
<div class="item nowrap flex-col jc-c gap-4" :class="tabs_theme + (index == 0 ? ' active' : '')">
|
||||
<template v-if="!isEmpty(item.img)">
|
||||
|
|
@ -92,7 +92,7 @@ const icon_tabs_check = () => {
|
|||
max-width: 39rem;
|
||||
.item {
|
||||
padding: 0 0 0.5rem 0;
|
||||
margin: 0 1rem;
|
||||
// margin: 0 1rem;
|
||||
position: relative;
|
||||
&:first-of-type {
|
||||
margin-left: 0;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="styles">
|
||||
<el-form :model="form" label-width="70">
|
||||
<el-form :model="form" label-width="74">
|
||||
<card-container>
|
||||
<div class="mb-12">选项卡样式</div>
|
||||
<el-form-item label="选中装饰">
|
||||
|
|
@ -12,6 +12,9 @@
|
|||
<el-form-item label="未选文字">
|
||||
<color-text-size-group v-model:color="form.tabs_color" v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size" default-color="rgba(51,51,51,1)"></color-text-size-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="选项卡间距">
|
||||
<slider v-model="form.tabs_spacing" :max="100"></slider>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="divider-line"></div>
|
||||
<card-container>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="w">
|
||||
<el-form :model="form" label-width="70">
|
||||
<el-form :model="form" label-width="74">
|
||||
<card-container>
|
||||
<div class="mb-12">选项卡样式</div>
|
||||
<el-form-item label="选中装饰">
|
||||
|
|
@ -12,6 +12,9 @@
|
|||
<el-form-item label="未选文字">
|
||||
<color-text-size-group v-model:color="form.tabs_color" v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size" default-color="rgba(51,51,51,1)"></color-text-size-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="选项卡间距">
|
||||
<slider v-model="form.tabs_spacing" :max="100"></slider>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="divider-line"></div>
|
||||
<card-container>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@
|
|||
<el-form-item label="未选文字">
|
||||
<color-text-size-group v-model:color="form.tabs_color" v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size" default-color="rgba(51,51,51,1)"></color-text-size-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="选项卡间距">
|
||||
<slider v-model="form.tabs_spacing" :max="100"></slider>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
</el-form>
|
||||
<div class="divider-line"></div>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,6 @@ const roll_style = computed(() => {
|
|||
} else {
|
||||
style += `background: transparent;`;
|
||||
}
|
||||
console.log(style);
|
||||
return style
|
||||
});
|
||||
const url_computer = (name: string) => {
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ interface DefaultArticleTabs {
|
|||
tabs_weight: string;
|
||||
tabs_size: number;
|
||||
tabs_color: string;
|
||||
tabs_spacing: number;
|
||||
name_weight: string;
|
||||
name_size: number;
|
||||
name_color: string;
|
||||
|
|
@ -77,6 +78,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
|
|||
tabs_weight: '500',
|
||||
tabs_size: 14,
|
||||
tabs_color: 'rgba(51,51,51,1)',
|
||||
tabs_spacing: 20,
|
||||
name_weight: '500',
|
||||
name_size: 14,
|
||||
name_color: 'rgba(51, 51, 51, 1)',
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ interface DefaultProductList {
|
|||
tabs_weight: string,
|
||||
tabs_size: number,
|
||||
tabs_color: string,
|
||||
tabs_spacing: number;
|
||||
shop_padding: paddingStyle;
|
||||
shop_img_radius: radiusStyle;
|
||||
shop_radius: radiusStyle;
|
||||
|
|
@ -93,6 +94,7 @@ const defaultProductList: DefaultProductList = {
|
|||
tabs_weight: '500',
|
||||
tabs_size: 14,
|
||||
tabs_color: 'rgba(51,51,51,1)',
|
||||
tabs_spacing: 20,
|
||||
shop_padding: {
|
||||
padding: 10,
|
||||
padding_top: 10,
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ interface defaultTabs {
|
|||
tabs_weight: string,
|
||||
tabs_size: number,
|
||||
tabs_color: string,
|
||||
tabs_spacing: number;
|
||||
common_style: object;
|
||||
};
|
||||
}
|
||||
|
|
@ -36,7 +37,7 @@ const defaultTabs: defaultTabs = {
|
|||
{ id: get_math(), title: '热门推荐', desc: '简介', data_type: 'micro_page', classify: {}, micro_page: '', micro_page_list: [], category_list: [] },
|
||||
{ id: get_math(), title: '测试一', desc: '简介', data_type: 'micro_page', classify: {}, micro_page: '', micro_page_list: [], category_list: [] },
|
||||
{ id: get_math(), title: '测试二', desc: '简介', data_type: 'micro_page', classify: {}, micro_page: '', micro_page_list: [], category_list: [] },
|
||||
],
|
||||
]
|
||||
},
|
||||
style: {
|
||||
tabs_checked: [{ color: '#FF2222', color_percentage: undefined }, { color: '#FF9898', color_percentage: undefined }],
|
||||
|
|
@ -47,6 +48,7 @@ const defaultTabs: defaultTabs = {
|
|||
tabs_weight: '500',
|
||||
tabs_size: 14,
|
||||
tabs_color: 'rgba(51,51,51,1)',
|
||||
tabs_spacing: 20,
|
||||
common_style: {
|
||||
...defaultCommon,
|
||||
padding: 10,
|
||||
|
|
|
|||
Loading…
Reference in New Issue