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

修改icon和轮播处理

v1.1.0
于肖磊 2024-12-17 17:27:32 +08:00
parent e3c47b7a3e
commit 11e1538db2
10 changed files with 179 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/assets/icons/iconfont.css
View File

File diff suppressed because one or more lines are too long

2
src/assets/icons/iconfont.js
View File

File diff suppressed because one or more lines are too long

77
src/assets/icons/iconfont.json
View File

@ -5,6 +5,83 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "42773571",
"name": "更多四块",
"font_class": "more-four-pieces",
"unicode": "e7b8",
"unicode_decimal": 59320
},
{
"icon_id": "42773581",
"name": "列表挂件",
"font_class": "list-widget",
"unicode": "e7ad",
"unicode_decimal": 59309
},
{
"icon_id": "42773579",
"name": "结算概况",
"font_class": "settlement",
"unicode": "e7ae",
"unicode_decimal": 59310
},
{
"icon_id": "42773580",
"name": "用户列表",
"font_class": "user-group",
"unicode": "e7af",
"unicode_decimal": 59311
},
{
"icon_id": "42773578",
"name": "店铺管理",
"font_class": "shop-setup",
"unicode": "e7b0",
"unicode_decimal": 59312
},
{
"icon_id": "42773576",
"name": "层级3",
"font_class": "triangle-level-3",
"unicode": "e7b1",
"unicode_decimal": 59313
},
{
"icon_id": "42773577",
"name": "成交记录",
"font_class": "log-check",
"unicode": "e7b2",
"unicode_decimal": 59314
},
{
"icon_id": "42773575",
"name": "商品管理",
"font_class": "menu-setup",
"unicode": "e7b3",
"unicode_decimal": 59315
},
{
"icon_id": "42773573",
"name": "列表-斜角",
"font_class": "list-angle",
"unicode": "e7b5",
"unicode_decimal": 59317
},
{
"icon_id": "42773572",
"name": "列表设置",
"font_class": "list-setup",
"unicode": "e7b7",
"unicode_decimal": 59319
},
{
"icon_id": "42435511",
"name": "向下空隙箭头",
"font_class": "down-gap",
"unicode": "e7ac",
"unicode_decimal": 59308
},
{
"icon_id": "42424398",
"name": "小圆背景右箭头",

BIN
src/assets/icons/iconfont.ttf
View File

Binary file not shown.

19
src/components/common/background-common/index.vue
View File

@ -11,16 +11,29 @@
<div class="size-12">背景图</div>
<bg-btn-style v-model="background_img_style"></bg-btn-style>
</div>
<upload v-model="background_img" :limit="1"></upload>
<template v-if="componentType == 'carousel'">
<el-radio-group v-model="background_type">
<el-radio value="custom">自定义图片</el-radio>
<el-radio value="carousel">轮播图片</el-radio>
</el-radio-group>
<template v-if="background_type == 'custom'">
<upload v-model="background_img" :limit="1"></upload>
</template>
</template>
<template v-else>
<upload v-model="background_img" :limit="1"></upload>
</template>
</div>
</template>
<script lang="ts" setup>
interface Props {
tooltipContent?: string;
componentType?: string;
}
const props = withDefaults(defineProps<Props>(), {
tooltipContent: '背景图的优先级比背景色的优先级高',
componentType: 'all'
});
const color_list = defineModel('color_list', {
@ -39,6 +52,10 @@ const background_img = defineModel('img', {
type: Array as PropType<uploadList[]>,
default: () => [],
});
const background_type = defineModel('type', {
type: String,
default: 'custom',
});
const emit = defineEmits(['mult_color_picker_event']);
const mult_color_picker_event = (arry: color_list[], type: number) => {
emit('mult_color_picker_event', arry, type);

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

@ -312,8 +312,17 @@ const swiper_bg_img_style = computed(() => {
if (!props.isCommon) {
return '';
}
if (!isEmpty(form.value.carousel_list[actived_index.value]?.style?.background_img)) {
return background_computer(form.value.carousel_list[actived_index.value].style) + (form.value.carousel_list[actived_index.value].is_background_img_blur == '1' ? `filter: blur(14px);opacity: 0.6;` : '');
const { carousel_img, style = {} } = form.value?.carousel_list[actived_index.value] || {};
// 如果是自定义的图片 判断图片是否存在
if (!isEmpty(carousel_img) && style?.background_type == 'carousel') {
// 如果是使用轮播图，判断轮播图是否存在
const data = {
background_img: carousel_img,
background_img_style: style?.background_img_style || '2',
}
return background_computer(data) + (style.is_background_img_blur == '1' ? `filter: blur(14px);opacity: 0.6;` : '');
} else if (!isEmpty(style?.background_img)) {
return background_computer(style) + (style.is_background_img_blur == '1' ? `filter: blur(14px);opacity: 0.6;` : '');
}
return '';
});

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

@ -57,10 +57,10 @@
</el-tab-pane>
<el-tab-pane label="样式设置" name="styles">
<el-form-item label-width="0">
<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)" />
<background-common v-model:color_list="item.style.color_list" v-model:direction="item.style.direction" v-model:type="item.style.background_type" v-model:img_style="item.style.background_img_style" v-model:img="item.style.background_img" component-type="carousel" :tooltip-content="'1.背景图的优先级比背景色的优先级高<br/>2.覆盖通用背景样式'" @mult_color_picker_event="(...value: [color_list[], number]) => carousel_tabs_mult_color_picker_event(...value, index)" />
<div class="flex-row w gap-10 mt-10">
<div class="size-12">背景图模糊</div>
<el-switch v-model="item.is_background_img_blur" active-value="1" inactive-value="0" />
<el-switch v-model="item.style.is_background_img_blur" active-value="1" inactive-value="0" />
</div>
</el-form-item>
</el-tab-pane>
@ -89,12 +89,13 @@ const { form } = toRefs(state);
const carousel_list = computed(() => {
form.value.carousel_list.forEach((item: any) => {
item.tabs_name = "content";
item.tabs_name = isEmpty(item.tabs_name) ? "content" : item.tabs_name;
if (isEmpty(item.style)) {
item.style = {
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_type: 'custom',
background_img: [],
is_background_img_blur: '0',
}
@ -113,6 +114,7 @@ const add = () => {
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_type: 'custom',
background_img: [],
is_background_img_blur: '0',
}

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

@ -1,5 +1,5 @@
<template>
<div :style="style_container + swiper_bg_style">
<div class="re" :style="style_container + swiper_bg_style">
<div class="abs top-0 w h" :style="swiper_bg_img_style"></div>
<div class="flex-col oh" :style="style_img_container + (!isEmpty(swiper_bg_img_style) ? `background-image: url('');` : '')">
<div class="oh" :style="tabs_container">
@ -93,8 +93,17 @@ const swiper_bg_style = computed(() => {
});
const swiper_bg_img_style = computed(() => {
if (!isEmpty(form.value?.carousel_list[actived_index.value]?.style?.background_img)) {
return background_computer(form.value.carousel_list[actived_index.value].style) + (form.value.carousel_list[actived_index.value].is_background_img_blur == '1' ? `filter: blur(14px);opacity: 0.6;` : '');
const { carousel_img, style = {} } = form.value?.carousel_list[actived_index.value] || {};
// 如果是自定义的图片 判断图片是否存在
if (!isEmpty(carousel_img) && style?.background_type == 'carousel') {
// 如果是使用轮播图，判断轮播图是否存在
const data = {
background_img: carousel_img,
background_img_style: style?.background_img_style || '2',
}
return background_computer(data) + (style.is_background_img_blur == '1' ? `filter: blur(14px);opacity: 0.6;` : '');
} else if (!isEmpty(style?.background_img)) {
return background_computer(style) + (style.is_background_img_blur == '1' ? `filter: blur(14px);opacity: 0.6;` : '');
}
return '';
});

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

@ -10,6 +10,7 @@ interface carousel_list {
direction: string;
color_list: color_list[];
background_img_style: string;
background_type: string; // 背景类型 custom 自定义 carousel 轮播图片
background_img: uploadList[];
is_background_img_blur: string,
}
@ -73,6 +74,7 @@ const defaultSearch: defaultSearch = {
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_type: 'custom',
background_img: [],
is_background_img_blur: '0',
}
@ -86,6 +88,7 @@ const defaultSearch: defaultSearch = {
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_type: 'custom',
background_img: [],
is_background_img_blur: '0',
}
@ -99,6 +102,7 @@ const defaultSearch: defaultSearch = {
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_type: 'custom',
background_img: [],
is_background_img_blur: '0',
}
@ -112,6 +116,7 @@ const defaultSearch: defaultSearch = {
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_type: 'custom',
background_img: [],
is_background_img_blur: '0',
}

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

@ -22,6 +22,7 @@ interface carousel_list {
direction: string;
color_list: color_list[];
background_img_style: string;
background_type: string,
background_img: uploadList[];
is_background_img_blur: string;
}
@ -137,6 +138,7 @@ const defaultTabs: defaultTabs = {
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_type: 'custom',
background_img: [],
is_background_img_blur: '0',
}
@ -150,6 +152,7 @@ const defaultTabs: defaultTabs = {
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_type: 'custom',
background_img: [],
is_background_img_blur: '0',
}
@ -163,6 +166,7 @@ const defaultTabs: defaultTabs = {
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_type: 'custom',
background_img: [],
is_background_img_blur: '0',
}
@ -176,6 +180,7 @@ const defaultTabs: defaultTabs = {
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '2',
background_type: 'custom',
background_img: [],
is_background_img_blur: '0',
}