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

1.选项卡新增风格1的风格选择样式

v1.0.0
sws 2024-10-15 10:29:07 +08:00
parent b574432d3c
commit f47594a415
9 changed files with 49 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/common/tabs-view/index.vue
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 {

2
src/components/model-article-tabs/model-article-tabs-setting.vue
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>

6
src/components/model-article-tabs/model-article-tabs-styles.vue
View File

@ -4,7 +4,7 @@
<card-container>
<div class="mb-12">选项卡样式</div>
<el-form-item label="选中装饰">
<el-radio-group v-model="form.tabs_one_theme">
<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>
@ -94,6 +94,10 @@ const props = defineProps({
img_radius_1: 0,
}),
},
tabsStyle: {
type: String,
default: '',
},
});
// 默认值
const state = reactive({

2
src/components/model-goods-tabs/model-goods-tabs-setting.vue
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>

9
src/components/model-goods-tabs/model-goods-tabs-styles.vue
View File

@ -4,7 +4,7 @@
<card-container>
<div class="mb-12">选项卡样式</div>
<el-form-item label="选中装饰">
<el-radio-group v-model="form.tabs_one_theme">
<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>
@ -68,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>
@ -115,6 +115,11 @@ const props = defineProps({
img_radius_1: 0,
}),
},
// 选项卡的风格
tabsStyle: {
type: String,
default: '',
},
});
// 默认值

5
src/components/model-tabs-carousel/model-tabs-carousel-setting.vue
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>

10
src/components/model-tabs-carousel/model-tabs-carousel-styles.vue
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%;
}
}

5
src/components/model-tabs/model-tabs-setting.vue
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>

11
src/components/model-tabs/model-tabs-styles.vue
View File

@ -4,7 +4,7 @@
<card-container>
<div class="mb-12">选项卡样式</div>
<el-form-item label="选中装饰">
<el-radio-group v-model="form.tabs_one_theme">
<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>
@ -50,6 +50,10 @@ const props = defineProps({
type: Boolean,
default: true,
},
tabsStyle: {
type: String,
default: '',
},
});
const state = reactive({
@ -60,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();