sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.轮播选项卡优化

v1.0.0
sws 2024-10-21 18:04:04 +08:00
parent dd5d53d3bc
commit 42ff3c2f04
3 changed files with 120 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

226
src/components/common/tabs-view/index.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="tabs-container flex-row gap-10 jc-sb align-c"> <div class="flex-row gap-10 jc-sb align-c">
<div class="tabs flex-row oh" :style="`column-gap: ${new_style.tabs_spacing}px;`"> <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"> <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 == activeIndex ? ' active' : '')"> <div class="item nowrap flex-col jc-c gap-4" :class="tabs_theme + (index == activeIndex ? ' active' : '') + ((tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? ' pb-0' : '')">
<template v-if="!isEmpty(item.img)"> <template v-if="!isEmpty(item.img)">
<image-empty v-model="item.img[0]" class="img" error-img-style="width:2rem;height:2rem;"></image-empty> <image-empty v-model="item.img[0]" class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
</template> </template>
@ -16,7 +16,7 @@
</div> </div>
</template> </template>
</div> </div>
<icon v-if="isTabs" :name="new_style.more_icon_class || 'category-more'" :size="new_style.more_icon_size + '' || '14'" :color="new_style.more_icon_color || '#000'" :class="tabs_theme_index == '3' ? 'pb-12' : 'pb-6'"></icon> <icon v-if="isTabs" :name="new_style.more_icon_class || 'category-more'" :size="new_style.more_icon_size + '' || '14'" :color="new_style.more_icon_color || '#000'" :class="tabs_theme_index == '3' ? 'pb-14' : (tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? '' : 'pb-5'"></icon>
</div> </div>
</template> </template>
@ -64,6 +64,9 @@ const tabs_theme = computed(() => {
const tabs_bottom_line_theme = computed(() => { const tabs_bottom_line_theme = computed(() => {
return new_style.value.tabs_one_theme == '1' ? 'tabs-bottom-line-theme' : ''; return new_style.value.tabs_one_theme == '1' ? 'tabs-bottom-line-theme' : '';
}); });
const tabs_theme_1_style = computed(() => {
return new_style.value.tabs_one_theme == '1';
});
// 选中的背景渐变色样式 // 选中的背景渐变色样式
const tabs_check = computed(() => { const tabs_check = computed(() => {
@ -100,126 +103,129 @@ const icon_tabs_check = () => {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tabs-container { .tabs {
.tabs { max-width: 39rem;
max-width: 39rem; .item {
min-height: 3rem; padding: 0 0 0.5rem 0;
.item { // margin: 0 1rem;
padding: 0 0 0.8rem 0; position: relative;
position: relative; transition: all 0.3s ease-in-out;
&:first-of-type { &:first-of-type {
margin-left: 0; margin-left: 0;
}
&:last-of-type {
margin-right: 0;
}
.title {
font-size: 1.4rem;
text-align: center;
}
.desc {
font-size: 1.1rem;
color: #999;
text-align: center;
display: none;
}
.bottom_line {
width: 100%;
height: 0.3rem;
border-radius: 1rem;
background-color: red;
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: none;
}
.icon {
position: absolute;
left: 0;
right: 0;
bottom: 0;
text-align: center;
font-size: 2rem;
line-height: 1rem !important;
display: none;
}
.img {
width: 3.9rem;
height: 3.9rem;
border-radius: 100%;
border: 0.1rem solid transparent;
display: none;
}
&.tabs-style-1 {
&.active {
.bottom_line {
display: block;
}
} }
&:last-of-type { .tabs-bottom-line-theme {
margin-right: 0; opacity: 0.6;
bottom: 0.8rem;
z-index: 0;
height: 0.6rem;
border-radius: 0;
width: 76%;
left: 12%;
} }
.title { }
font-size: 1.4rem; &.tabs-style-2 {
text-align: center; &.active {
.desc {
background: #ff5e5e;
color: #fff;
}
} }
.desc { .desc {
font-size: 1.1rem; border-radius: 2rem;
color: #999; padding: 0.2rem 0.6rem;
text-align: center; display: inline-block;
display: none;
} }
.bottom_line { }
width: 100%; &.tabs-style-3 {
height: 0.3rem; &.active {
border-radius: 1rem; .title {
background-color: red; background: #ff2222;
position: absolute;
left: 0;
right: 0;
bottom: 0.4rem;
display: none;
}
.icon {
position: absolute;
left: 0;
right: 0;
bottom: 0;
text-align: center;
font-size: 2rem;
display: none;
}
.img {
width: 3.9rem;
height: 3.9rem;
border-radius: 100%;
border: 0.1rem solid transparent;
display: none;
}
&.tabs-style-1 {
&.active {
.bottom_line {
display: block;
}
}
.tabs-bottom-line-theme {
opacity: 0.6;
bottom: 1.2rem;
z-index: 0;
height: 0.6rem;
border-radius: 0;
width: 76%;
left: 12%;
}
}
&.tabs-style-2 {
&.active {
.desc {
background: #ff5e5e;
color: #fff;
}
}
.desc {
border-radius: 2rem; border-radius: 2rem;
padding: 0.2rem 0.6rem; padding: 0.2rem 1.2rem;
display: inline-block; color: #fff;
} }
} }
&.tabs-style-3 { }
&.active { &.tabs-style-4 {
.title { padding-bottom: 1.4rem;
background: #ff2222; &.active {
border-radius: 2rem; .title {
padding: 0.2rem 1.2rem; color: #ff2222;
color: #fff;
}
} }
} .icon {
&.tabs-style-4 { color: #ff2222;
padding-bottom: 1.2rem;
&.active {
.title {
color: #ff2222;
}
.icon {
color: #ff2222;
display: block;
}
}
}
&.tabs-style-5 {
align-items: center;
&.active {
.title {
font-size: 1.1rem;
background: #ff5e5e;
border-radius: 2rem;
padding: 0.2rem 0.7rem;
color: #fff;
}
.img {
border-color: #ff5e5e;
}
}
.img {
display: block; display: block;
} }
} }
} }
&.tabs-style-5 {
align-items: center;
&.active {
.title {
font-size: 1.1rem;
background: #ff5e5e;
border-radius: 2rem;
padding: 0.2rem 0.7rem;
color: #fff;
}
.img {
border-color: #ff5e5e;
}
}
.img {
display: block;
}
}
} }
} }
.pb-0 {
padding-bottom: 0 !important;
}
</style> </style>

4
src/components/model-tabs-carousel/index.vue
View File

@ -2,7 +2,9 @@
<div :style="style_container"> <div :style="style_container">
<div class="flex-col oh" :style="style_img_container"> <div class="flex-col oh" :style="style_img_container">
<tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :active-index="tabs_active_index"></tabs-view> <tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :active-index="tabs_active_index"></tabs-view>
<model-carousel :value="value" :is-common="false"></model-carousel> <div class="pt-10">
<model-carousel :value="value" :is-common="false"></model-carousel>
</div>
</div> </div>
</div> </div>
</template> </template>

2
src/config/const/tabs-carousel.ts
View File

@ -138,7 +138,7 @@ const defaultTabs: defaultTabs = {
more_icon_color: '#000', more_icon_color: '#000',
more_icon_size: 14, more_icon_size: 14,
// 选项卡与轮播之间的间距 // 选项卡与轮播之间的间距
data_spacing: 10, data_spacing: 0,
// 图片圆角 // 图片圆角
radius: 0, radius: 0,
radius_top_left: 0, radius_top_left: 0,