o卡 o oo o

v1.0.0
于肖磊 2024-08-30 14:20:10 +08:00
parent db5f4f92b7
commit 702b4f5829
8 changed files with 20 additions and 6 deletions

View File

@ -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;

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -61,7 +61,6 @@ const roll_style = computed(() => {
} else {
style += `background: transparent;`;
}
console.log(style);
return style
});
const url_computer = (name: string) => {

View File

@ -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)',

View File

@ -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,

View File

@ -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,