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

修改内容显示

v1.1.0
于肖磊 2024-12-13 19:10:09 +08:00
parent 97436441b1
commit ebb4ec7d93
23 changed files with 88 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/common/common-styles/index.vue
View File

@ -5,15 +5,7 @@
<el-form :model="form" label-width="70">
<div class="mb-12">通用</div>
<el-form-item label="底部背景">
<div v-if="isMultBackground" class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.background_img_style"></bg-btn-style>
</div>
<upload v-model="form.background_img" :limit="1" @update:model-value="background_img_change"></upload>
</div>
<background-common v-if="isMultBackground" v-model:color_list="form.color_list" v-model:direction="form.direction" v-model:img_style="form.background_img_style" v-model:img="form.background_img" @mult_color_picker_event="mult_color_picker_event" />
<div v-else>
<color-picker v-model="form.color_list[0].color"></color-picker>
</div>

10
src/components/common/custom-module/model-panel/model-panel-style.vue
View File

@ -22,15 +22,7 @@
</el-select>
</el-form-item>
<el-form-item label="背景颜色">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.background_img_style"></bg-btn-style>
</div>
<upload v-model="form.background_img" :limit="1"></upload>
</div>
<background-common v-model:color_list="form.color_list" v-model:direction="form.direction" v-model:img_style="form.background_img_style" v-model:img="form.background_img" @mult_color_picker_event="mult_color_picker_event" />
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.bg_radius" @update:value="bg_radius_change"></radius>

10
src/components/common/subscript/subscript-styles.vue
View File

@ -30,15 +30,7 @@
</el-form-item>
</template>
<el-form-item label="背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-col gap-10 jc-sb">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.background_img_style"></bg-btn-style>
</div>
<upload v-model="form.background_img" :limit="1"></upload>
</div>
<background-common v-model:color_list="form.color_list" v-model:direction="form.direction" v-model:img_style="form.background_img_style" v-model:img="form.background_img" @mult_color_picker_event="mult_color_picker_event" />
</el-form-item>
<el-form-item label="外间距">
<margin :value="form"></margin>

10
src/components/model-article-list/model-article-list-styles.vue
View File

@ -4,15 +4,7 @@
<card-container>
<div class="mb-12">列表样式</div>
<el-form-item v-if="theme != '3'" label="文章背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.article_color_list" :type="form.article_direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.article_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.article_background_img" :limit="1" @update:model-value="background_img_change"></upload>
</div>
<background-common v-model:color_list="form.article_color_list" v-model:direction="form.article_direction" v-model:img_style="form.article_background_img_style" v-model:img="form.article_background_img" @mult_color_picker_event="mult_color_picker_event" />
</el-form-item>
<el-form-item label="文章名称">
<color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size" :label-width="data.theme == '4' && data.name_float == '1' ? 60 : 40">

29
src/components/model-article-tabs/model-article-tabs-content.vue
View File

@ -31,7 +31,7 @@
<card-container>
<div class="mb-12">选项卡设置</div>
<div class="nav-list">
<drag :data="form.tabs_list" type="card" icon-position="top" :space-col="20" @click="tabs_list_click" @remove="tabs_list_remove" @on-sort="tabs_list_sort">
<drag :data="tabs_list" type="card" icon-position="top" :space-col="20" @click="tabs_list_click" @remove="tabs_list_remove" @on-sort="tabs_list_sort">
<template #default="{ row, index }">
<div class="flex-col w">
<el-form-item label="数据类型" class="w mb-10">
@ -86,6 +86,7 @@
</div>
</template>
<script setup lang="ts">
import { isEmpty } from 'lodash';
import { get_math, tabs_style } from '@/utils';
import { commonStore } from '@/store';
const common_store = commonStore();
@ -138,16 +139,6 @@ const base_list = reactive({
{ name: '选择文章', value: '0' },
{ name: '筛选文章', value: '1' },
],
// article_category_list: [] as select_1[],
// sort_list: [
// { name: '综合', value: '0' },
// { name: '时间', value: '1' },
// { name: '浏览量', value: '2' },
// ],
// order_by_rule_list: [
// { name: '降序（desc）', value: '0' },
// { name: '升序（asc）', value: '1' },
// ],
field_show_list: [
{ name: '文章标题', value: '3' },
{ name: '日期时间', value: '0' },
@ -157,12 +148,6 @@ const base_list = reactive({
});
const emits = defineEmits(['theme_change']);
onMounted(() => {
// nextTick(() => {
// // 定时获取common_store.common.article_category的数据，直到拿到值或者关闭页面为止
// if (common_store.common.article_category.length > 0) {
// base_list.article_category_list = common_store.common.article_category;
// }
// });
// 如果历史数据没有操作，则修改默认值
const { content_img_width = '', content_img_height = '' } = styles;
// 宽度和高度为空的时候，并且不是无图模式和左右滑动模式的时候，修改默认值
@ -173,6 +158,16 @@ onMounted(() => {
}
}
});
const tabs_list = computed(() => {
return form.tabs_list.map((item: any) => ({
...item,
tabs_img: isEmpty(item.data_type) ? [] : item.tabs_img,
tabs_icon: isEmpty(item.data_type) ? '' : item.tabs_icon,
tabs_type: isEmpty(item.data_type) ? '0' : item.data_type,
}));
});
// 监听tabs_theme_list的变化
const article_theme_change = (val: any) => {
if (val == '3' || val == '4') {

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

@ -44,15 +44,7 @@
<slider v-model="form.tabs_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="选项卡背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.tabs_bg_color_list" :type="form.tabs_bg_direction" @update:value="tabs_bg_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.tabs_bg_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.tabs_bg_background_img" :limit="1" @update:model-value="tabs_bg_background_img_change"></upload>
</div>
<background-common v-model:color_list="form.tabs_bg_color_list" v-model:direction="form.tabs_bg_direction" v-model:img_style="form.tabs_bg_background_img_style" v-model:img="form.tabs_bg_background_img" @mult_color_picker_event="tabs_bg_mult_color_picker_event" />
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.tabs_radius"></radius>
@ -65,15 +57,7 @@
<card-container>
<div class="mb-12">内容样式</div>
<el-form-item label="内容背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.article_content_color_list" :type="form.article_content_direction" @update:value="article_content_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.article_content_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.article_content_background_img" :limit="1" @update:model-value="article_content_background_img_change"></upload>
</div>
<background-common v-model:color_list="form.article_content_color_list" v-model:direction="form.article_content_direction" v-model:img_style="form.article_content_background_img_style" v-model:img="form.article_content_background_img" @mult_color_picker_event="article_content_mult_color_picker_event" />
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.article_content_radius"></radius>
@ -92,15 +76,7 @@
<card-container>
<div class="mb-12">文章样式</div>
<el-form-item v-if="theme != '3'" label="文章背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.article_color_list" :type="form.article_direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.article_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.article_background_img" :limit="1" @update:model-value="background_img_change"></upload>
</div>
<background-common v-model:color_list="form.article_color_list" v-model:direction="form.article_direction" v-model:img_style="form.article_background_img_style" v-model:img="form.article_background_img" @mult_color_picker_event="mult_color_picker_event" />
</el-form-item>
<el-form-item label="文章名称">
<color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size" :label-width="data.article_theme == '4' && data.name_float == '1' ? 60 : 40">

10
src/components/model-carousel/index.vue
View File

@ -1,6 +1,7 @@
<template>
<div :style="style_container + swiper_bg_style">
<div class="re" :style="style_img_container + swiper_bg_img_style">
<div class="re" :style="style_container + swiper_bg_style">
<div class="abs z-i top-0 w h" :style="swiper_bg_img_style"></div>
<div class="re" :style="style_img_container">
<div ref="swiperSize" class="swiper-container w h oh">
<swiper
:key="carouselKey"
@ -296,8 +297,9 @@ const swiper_bg_style = computed(() => {
} catch (error) {
return '';
}
} else {
return '';
}
return '';
}
return '';
});
@ -307,7 +309,7 @@ const swiper_bg_img_style = computed(() => {
return '';
}
if (!isEmpty(form.value.carousel_list[actived_index.value]?.style?.background_img)) {
return background_computer(form.value.carousel_list[actived_index.value].style);
return background_computer(form.value.carousel_list[actived_index.value].style) + `filter: blur(${form.value.carousel_list[actived_index.value]?.style?.background_img_blur || 0}px);`;
}
return '';
});

14
src/components/model-carousel/model-carousel-content.vue
View File

@ -57,14 +57,10 @@
</el-tab-pane>
<el-tab-pane label="样式设置" name="styles">
<el-form-item label-width="0">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="item.style.color_list" :type="item.style.direction" @update:value="(...value: [color_list[], number]) => carousel_tabs_mult_color_picker_event(...value, index)"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="item.style.background_img_style"></bg-btn-style>
</div>
<upload v-model="item.style.background_img" :limit="1" @update:model-value="carousel_tabs_background_img_change($event, index)"></upload>
<background-common v-model:color_list="item.style.color_list" v-model:direction="item.style.direction" v-model:img_style="item.style.background_img_style" v-model:img="item.style.background_img" :tooltip-content="'1.背景图的优先级比背景色的优先级高<br/>2.覆盖通用背景样式'" @mult_color_picker_event="(...value: [color_list[], number]) => carousel_tabs_mult_color_picker_event(...value, index)" />
<div class="flex-col w gap-10">
<div class="size-12">背景图模糊</div>
<slider v-model="item.style.background_img_blur" :min="0" :max="100"></slider>
</div>
</el-form-item>
</el-tab-pane>
@ -100,6 +96,7 @@ const carousel_list = computed(() => {
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
background_img_blur: 0,
}
}
});
@ -117,6 +114,7 @@ const add = () => {
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
background_img_blur: 0,
}
});
};

10
src/components/model-carousel/model-carousel-styles.vue
View File

@ -5,15 +5,7 @@
<card-container>
<div class="mb-12">内容设置</div>
<el-form-item label="内容背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.carousel_content_color_list" :type="form.carousel_content_direction" @update:value="carousel_content_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.carousel_content_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.carousel_content_background_img" :limit="1" @update:model-value="carousel_content_background_img_change"></upload>
</div>
<background-common v-model:color_list="form.carousel_content_color_list" v-model:direction="form.carousel_content_direction" v-model:img_style="form.carousel_content_background_img_style" v-model:img="form.carousel_content_background_img" @mult_color_picker_event="carousel_content_mult_color_picker_event" />
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.carousel_content_radius"></radius>

10
src/components/model-custom/model-custom-styles.vue
View File

@ -28,15 +28,7 @@
<card-container>
<div class="mb-12">数据样式</div>
<el-form-item label="背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.data_style.color_list" :type="form.data_style.direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.data_style.background_img_style"></bg-btn-style>
</div>
<upload v-model="form.data_style.background_img" :limit="1"></upload>
</div>
<background-common v-model:color_list="form.data_style.color_list" v-model:direction="form.data_style.direction" v-model:img_style="form.data_style.background_img_style" v-model:img="form.data_style.background_img" @mult_color_picker_event="mult_color_picker_event" />
</el-form-item>
<el-form-item label="外间距">
<margin :value="form.data_style"></margin>

30
src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
View File

@ -68,15 +68,7 @@
<card-container>
<div class="mb-12">数据样式</div>
<el-form-item label="背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :key="form.carouselKey" :value="form.data_color_list" :type="form.data_direction" @update:value="data_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.data_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.data_background_img" :limit="1"></upload>
</div>
<background-common :key="form.carouselKey" v-model:color_list="form.data_color_list" v-model:direction="form.data_direction" v-model:img_style="form.data_background_img_style" v-model:img="form.data_background_img" @mult_color_picker_event="data_mult_color_picker_event" />
</el-form-item>
<el-form-item v-if="tabs_content.data_type == 'custom'" label="外间距">
<margin :key="form.carouselKey" :value="form.data_chunk_margin" @update:value="data_chunk_margin_change"></margin>
@ -143,15 +135,7 @@
</template>
</template>
<el-form-item label="背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :key="form.carouselKey" :value="form.goods_color_list" :type="form.goods_direction" @update:value="goods_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.goods_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.goods_background_img" :limit="1"></upload>
</div>
<background-common :key="form.carouselKey" v-model:color_list="form.goods_color_list" v-model:direction="form.goods_direction" v-model:img_style="form.goods_background_img_style" v-model:img="form.goods_background_img" @mult_color_picker_event="goods_mult_color_picker_event" />
</el-form-item>
<el-form-item label="内间距">
<padding :key="form.carouselKey" :value="form.goods_chunk_padding" @update:value="goods_chunk_padding_change"></padding>
@ -165,15 +149,7 @@
<card-container class="mb-8">
<div class="mb-12">通用样式</div>
<el-form-item label="底部背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :key="form.carouselKey" :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.background_img_style"></bg-btn-style>
</div>
<upload v-model="form.background_img" :limit="1"></upload>
</div>
<background-common :key="form.carouselKey" v-model:color_list="form.color_list" v-model:direction="form.direction" v-model:img_style="form.background_img_style" v-model:img="form.background_img" @mult_color_picker_event="mult_color_picker_event" />
</el-form-item>
<el-form-item v-if="tabs_content.data_type != 'custom'" label="内间距">
<padding :key="form.carouselKey" :value="form.chunk_padding" @update:value="chunk_padding_change"></padding>

10
src/components/model-goods-list/model-goods-list-styles.vue
View File

@ -4,15 +4,7 @@
<card-container>
<div class="mb-12">商品样式</div>
<el-form-item v-if="theme != '6'" label="商品背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.shop_color_list" :type="form.shop_direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.shop_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.shop_background_img" :limit="1" @update:model-value="background_img_change"></upload>
</div>
<background-common v-model:color_list="form.shop_color_list" v-model:direction="form.shop_direction" v-model:img_style="form.shop_background_img_style" v-model:img="form.shop_background_img" @mult_color_picker_event="mult_color_picker_event" />
</el-form-item>
<template v-if="data.is_show.includes('title')">
<el-form-item label="商品名称">

40
src/components/model-goods-tabs/model-goods-tabs-content.vue
View File

@ -34,7 +34,7 @@
<card-container>
<div class="mb-12">选项卡设置</div>
<div class="nav-list">
<drag :data="form.tabs_list" type="card" icon-position="top" :space-col="20" @click="tabs_list_click" @remove="tabs_list_remove" @on-sort="tabs_list_sort">
<drag :data="tabs_list" type="card" icon-position="top" :space-col="20" @click="tabs_list_click" @remove="tabs_list_remove" @on-sort="tabs_list_sort">
<template #default="{ row, index }">
<div class="flex-col w">
<el-form-item label="数据类型" class="w mb-10">
@ -81,6 +81,7 @@
</div>
</template>
<script setup lang="ts">
import { isEmpty } from 'lodash';
import { get_math, tabs_style } from '@/utils';
import { commonStore } from '@/store';
const common_store = commonStore();
@ -131,36 +132,9 @@ const base_list = reactive({
{ name: '指定商品', value: '0' },
{ name: '筛选商品', value: '1' },
],
// product_category_list: [] as select_1[],
// product_brand_list: [] as select_1[],
// sort_list: [
// { name: '综合', value: '0' },
// { name: '销量', value: '1' },
// { name: '热度', value: '2' },
// { name: '价格', value: '3' },
// { name: '最新', value: '4' },
// ],
// order_by_rule_list: [
// { name: '降序（desc）', value: '0' },
// { name: '升序（asc）', value: '1' },
// ],
// list_show_list: [
// { name: '日期时间', value: '0' },
// { name: '浏览量', value: '1' },
// ],
});
const emits = defineEmits(['theme_change']);
onBeforeMount(() => {
// nextTick(() => {
// // 定时获取common_store.common.article_category的数据，直到拿到值或者关闭页面为止
// const interval = setInterval(() => {
// if (common_store.common.goods_category.length > 0 || common_store.common.brand_list.length > 0) {
// base_list.product_category_list = common_store.common.goods_category;
// base_list.product_brand_list = common_store.common.brand_list;
// clearInterval(interval);
// }
// }, 1000);
// });
// 如果历史数据没有操作，则修改默认值
const { content_img_width = '', content_img_height = '' } = styles.value;
// 宽度和高度为空的时候，并且不是无图模式和左右滑动模式的时候，修改默认值
@ -171,6 +145,16 @@ onBeforeMount(() => {
}
}
});
const tabs_list = computed(() => {
return form.value.tabs_list.map((item: any) => ({
...item,
tabs_img: isEmpty(item.data_type) ? [] : item.tabs_img,
tabs_icon: isEmpty(item.data_type) ? '' : item.tabs_icon,
tabs_type: isEmpty(item.data_type) ? '0' : item.data_type,
}));
});
const tabs_list_click = (item: any, index: number) => {
form.value.tabs_active_index = index;
};

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

@ -54,15 +54,7 @@
<slider v-model="form.tabs_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="选项卡背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.tabs_bg_color_list" :type="form.tabs_bg_direction" @update:value="tabs_bg_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.tabs_bg_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.tabs_bg_background_img" :limit="1" @update:model-value="tabs_bg_background_img_change"></upload>
</div>
<background-common v-model:color_list="form.tabs_bg_color_list" v-model:direction="form.tabs_bg_direction" v-model:img_style="form.tabs_bg_background_img_style" v-model:img="form.tabs_bg_background_img" @mult_color_picker_event="tabs_bg_mult_color_picker_event" />
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.tabs_radius"></radius>
@ -75,15 +67,7 @@
<card-container>
<div class="mb-12">内容样式</div>
<el-form-item label="内容背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.shop_content_color_list" :type="form.shop_content_direction" @update:value="shop_content_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.shop_content_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.shop_content_background_img" :limit="1" @update:model-value="shop_content_background_img_change"></upload>
</div>
<background-common v-model:color_list="form.shop_content_color_list" v-model:direction="form.shop_content_direction" v-model:img_style="form.shop_content_background_img_style" v-model:img="form.shop_content_background_img" @mult_color_picker_event="shop_content_mult_color_picker_event" />
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.shop_content_radius"></radius>
@ -102,15 +86,7 @@
<card-container>
<div class="mb-12">商品样式</div>
<el-form-item v-if="theme != '6'" label="商品背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.shop_color_list" :type="form.shop_direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.shop_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.shop_background_img" :limit="1" @update:model-value="background_img_change"></upload>
</div>
<background-common v-model:color_list="form.shop_color_list" v-model:direction="form.shop_direction" v-model:img_style="form.shop_background_img_style" v-model:img="form.shop_background_img" @mult_color_picker_event="mult_color_picker_event" />
</el-form-item>
<template v-if="data.is_show.includes('title')">
<el-form-item label="商品名称">

10
src/components/model-notice/model-notice-styles.vue
View File

@ -60,15 +60,7 @@
</el-form-item>
</template>
<el-form-item label="容器背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.container_color_list" :type="form.container_direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.container_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.container_background_img" :limit="1"></upload>
</div>
<background-common v-model:color_list="form.container_color_list" v-model:direction="form.container_direction" v-model:img_style="form.container_background_img_style" v-model:img="form.container_background_img" @mult_color_picker_event="mult_color_picker_event" />
</el-form-item>
<el-form-item label="容器圆角">
<radius :value="form.container_radius"></radius>

10
src/components/model-search/model-search-styles.vue
View File

@ -17,15 +17,7 @@
<color-picker v-model="form.button_inner_color" default-color="#fff"></color-picker>
</el-form-item>
<el-form-item v-if="content.search_type != 'img'" label="背景设置">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.search_botton_color_list" :type="form.search_botton_direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.search_botton_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.search_botton_background_img" :limit="1"></upload>
</div>
<background-common v-model:color_list="form.search_botton_color_list" v-model:direction="form.search_botton_direction" v-model:img_style="form.search_botton_background_img_style" v-model:img="form.search_botton_background_img" @mult_color_picker_event="mult_color_picker_event" />
</el-form-item>
<el-form-item label="按钮圆角">
<radius :value="form.search_button_radius" @update:value="button_radius_change"></radius>

20
src/components/model-seckill/model-seckill-styles.vue
View File

@ -20,15 +20,7 @@
<color-text-size-group v-model:color="form.head_button_color" v-model:size="form.head_button_size" :default-color="clone_form.head_button_color" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
<el-form-item label="头部背景">
<div class="flex-col gap-10">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.header_background_color_list" :type="form.header_background_direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.header_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.header_background_img" :limit="1"></upload>
</div>
<background-common v-model:color_list="form.header_background_color_list" v-model:direction="form.header_background_direction" v-model:img_style="form.header_background_img_style" v-model:img="form.header_background_img" @mult_color_picker_event="mult_color_picker_event" />
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.seckill_head_radius"></radius>
@ -42,15 +34,7 @@
<card-container>
<div class="mb-12">商品样式</div>
<el-form-item label="商品背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.shop_color_list" :type="form.shop_direction" @update:value="shop_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.shop_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.shop_background_img" :limit="1" @update:model-value="shop_background_img_change"></upload>
</div>
<background-common v-model:color_list="form.shop_color_list" v-model:direction="form.shop_direction" v-model:img_style="form.shop_background_img_style" v-model:img="form.shop_background_img" @mult_color_picker_event="shop_mult_color_picker_event" />
</el-form-item>
<template v-if="data.is_show.includes('title')">
<el-form-item label="商品名称">

13
src/components/model-tabs/model-tabs-content.vue
View File

@ -38,7 +38,7 @@
</div>
</el-form-item>
</div>
<drag :data="form.tabs_list" type="card" :space-col="25" @remove="remove" @on-sort="on_sort">
<drag :data="tabs_list" type="card" :space-col="25" @remove="remove" @on-sort="on_sort">
<template #default="scoped">
<div class="flex-col align-c jc-s gap-20 flex-1 w">
<el-form-item label="数据类型" class="w mb-0">
@ -80,6 +80,7 @@
</template>
<script setup lang="ts">
import { get_math, tabs_style } from '@/utils';
import { isEmpty } from 'lodash';
import { commonStore } from '@/store';
const common_store = commonStore();
@ -99,6 +100,16 @@ const state = reactive({
styles: props.tabStyle,
});
const { form, styles } = toRefs(state);
const tabs_list = computed(() => {
return form.value.tabs_list.map((item: any) => ({
...item,
tabs_img: isEmpty(item.data_type) ? [] : item.tabs_img,
tabs_icon: isEmpty(item.data_type) ? '' : item.tabs_icon,
tabs_type: isEmpty(item.data_type) ? '0' : item.data_type,
}));
});
const add = () => {
form.value.tabs_list.push({
id: get_math(),

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

@ -45,15 +45,7 @@
</el-form-item>
<template v-if="!isCommon">
<el-form-item label="选项卡背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.tabs_bg_color_list" :type="form.tabs_bg_direction" @update:value="tabs_bg_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.tabs_bg_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.tabs_bg_background_img" :limit="1" @update:model-value="tabs_bg_background_img_change"></upload>
</div>
<background-common v-model:color_list="form.tabs_bg_color_list" v-model:direction="form.tabs_bg_direction" v-model:img_style="form.tabs_bg_background_img_style" v-model:img="form.tabs_bg_background_img" @mult_color_picker_event="tabs_bg_mult_color_picker_event" />
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.tabs_radius"></radius>

19
src/components/page-settings/page-styles.vue
View File

@ -52,14 +52,7 @@
<upload v-model="form.up_slide_logo" :limit="1"></upload>
</el-form-item>
<el-form-item label="上滑背景">
<div class="w h flex-col gap-10">
<mult-color-picker :value="form?.up_slide_background_color_list || []" :type="form?.up_slide_background_direction || '180deg'" @update:value="up_slide_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.up_slide_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.up_slide_background_img" :limit="1"></upload>
</div>
<background-common v-model:color_list="form.up_slide_background_color_list" v-model:direction="form.up_slide_background_direction" v-model:img_style="form.up_slide_background_img_style" v-model:img="form.up_slide_background_img" @mult_color_picker_event="up_slide_mult_color_picker_event" />
</el-form-item>
</template>
<el-form-item label="返回颜色">
@ -77,15 +70,7 @@
<card-container>
<div class="mb-12">定位设置</div>
<el-form-item label="定位背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.location_color_list" :type="form.location_direction" @update:value="location_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.location_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.location_background_img" :limit="1" @update:model-value="location_background_img_change"></upload>
</div>
<background-common v-model:color_list="form.location_color_list" v-model:direction="form.location_direction" v-model:img_style="form.location_background_img_style" v-model:img="form.location_background_img" @mult_color_picker_event="location_mult_color_picker_event" />
</el-form-item>
<el-form-item label="定位颜色">
<color-picker v-model="form.location_color" default-color="#333"></color-picker>

4
src/config/const/carousel.ts
View File

@ -11,6 +11,7 @@ interface carousel_list {
color_list: color_list[];
background_img_style: string;
background_img: uploadList[];
background_img_blur: 0,
}
}
interface defaultSearch {
@ -73,6 +74,7 @@ const defaultSearch: defaultSearch = {
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
background_img_blur: 0,
}
},
{
@ -85,6 +87,7 @@ const defaultSearch: defaultSearch = {
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
background_img_blur: 0,
}
},
{
@ -97,6 +100,7 @@ const defaultSearch: defaultSearch = {
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
background_img_blur: 0,
}
}
]

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

@ -23,6 +23,7 @@ interface carousel_list {
color_list: color_list[];
background_img_style: string;
background_img: uploadList[];
background_img_blur: number;
}
}
interface defaultTabs {
@ -114,7 +115,7 @@ const defaultTabs: defaultTabs = {
// 选项卡数据
home_data: { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
tabs_list: [
{ id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试一', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试二', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
],
@ -137,6 +138,7 @@ const defaultTabs: defaultTabs = {
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
background_img_blur: 0,
}
},
{
@ -149,6 +151,7 @@ const defaultTabs: defaultTabs = {
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
background_img_blur: 0,
}
},
{
@ -161,6 +164,7 @@ const defaultTabs: defaultTabs = {
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_img: [],
background_img_blur: 0,
}
},
],

8
src/views/layout/components/main/index.vue
View File

@ -163,7 +163,15 @@ const set_padding_top_value = () => {
tabs_data.value.forEach((item: any) => {
item.com_data.style.common_style.padding_top_safe_value = common_store.header_height;
});
// 处理另外一个数组的时候，将所有的padding_top_safe_value设置为0
diy_data.value.forEach((item: any) => {
item.com_data.style.common_style.padding_top_safe_value = 0;
});
} else if (diy_data.value.length > 0) {
// 处理另外一个数组的时候，将所有的padding_top_safe_value设置为0
tabs_data.value.forEach((item: any) => {
item.com_data.style.common_style.padding_top_safe_value = 0;
});
// 初始数据为0
let padding_top_index = 0;
// 如果前几个为悬浮按钮，则加一，找到不是悬浮按钮的第一个处理