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

修改指示器显示

v1.0.0
于肖磊 2024-09-11 14:10:35 +08:00
parent 8e9b040a48
commit 2a89e47d56
11 changed files with 44 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/common/carousel-indicator/index.vue
View File

@ -4,7 +4,7 @@
<el-switch v-model="form.is_show" active-value="1" inactive-value="0"/>
</el-form-item>
<template v-if="form.is_show == '1'">
<el-form-item label="指示器样式">
<el-form-item label="样式">
<el-radio-group v-model="form.indicator_style" is-button>
<el-tooltip content="点" placement="top" effect="light">
<el-radio-button value="dot"><icon name="iconfont icon-round-dot"></icon></el-radio-button>
@ -17,7 +17,7 @@
</el-tooltip>
</el-radio-group>
</el-form-item>
<el-form-item label="指示器位置">
<el-form-item label="位置">
<el-radio-group v-model="form.indicator_location" is-button>
<el-tooltip content="左对齐" placement="top" effect="light">
<el-radio-button value="flex-start"><icon name="iconfont icon-left"></icon></el-radio-button>
@ -30,16 +30,19 @@
</el-tooltip>
</el-radio-group>
</el-form-item>
<el-form-item label="指示器大小">
<el-form-item label="大小">
<slider v-model="form.indicator_size" :max="100"></slider>
</el-form-item>
<el-form-item label="指示器色值">
<el-form-item v-if="isIndicatorBottom" label="下边距">
<slider v-model="form.indicator_bottom" :min="0" :max="100"></slider>
</el-form-item>
<el-form-item label="色值">
<div class="flex-col gap-20">
<div class="flex-row gap-20"><span class="size-12 cr-9">选中样式</span><color-picker v-model="form.actived_color" default-color="#2A94FF" @update:value="color_picker_change($event, 'actived_color')"></color-picker></div>
<div class="flex-row gap-20"><span class="size-12 cr-9">常规样式</span><color-picker v-model="form.color" default-color="#DDDDDD" @update:value="color_picker_change($event, 'color')"></color-picker></div>
</div>
</el-form-item>
<el-form-item v-if="form.indicator_style != 'num'" label="指示器圆角">
<el-form-item v-if="form.indicator_style != 'num'" label="圆角">
<radius :value="form.indicator_radius" @update:value="indicator_radius_change"></radius>
</el-form-item>
</template>
@ -63,6 +66,10 @@ const props = defineProps({
value: {
type: Object,
default: () => {}
},
isIndicatorBottom: {
type: Boolean,
default: true
}
})

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

@ -28,7 +28,7 @@
<color-picker v-model="form.color_list[0].color"></color-picker>
</div>
</el-form-item>
<el-form-item label="组件上浮">
<el-form-item v-if="isFloatingUp" label="组件上浮">
<el-input-number v-model="form.floating_up" :min="0" :max="100" controls-position="right" />
</el-form-item>
<el-form-item label="内边距">
@ -112,6 +112,10 @@ const props = defineProps({
type: Boolean,
default: true,
},
isFloatingUp: {
type: Boolean,
default: true,
}
});
// value 和初始化数据合并数据
let form = ref(props.value);

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

@ -34,7 +34,7 @@
<image-empty v-model="item.carousel_img[0]" :style="img_style" :fit="img_fit" error-style="width:5rem;height:5rem"></image-empty>
</div>
</swiper-slide>
<div v-if="new_style.is_show == '1'" :class="{'dot-center': new_style.indicator_location == 'center', 'dot-right': new_style.indicator_location == 'flex-end' }" class="dot flex abs">
<div v-if="new_style.is_show == '1'" :class="{'dot-center': new_style.indicator_location == 'center', 'dot-right': new_style.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${new_style.indicator_bottom}px;`">
<template v-if="new_style.indicator_style == 'num'">
<div :style="indicator_style" class="dot-item">
<span class="num-active">{{ actived_index + 1 }}</span><span>/{{ form.carousel_list.length }}</span>
@ -198,7 +198,6 @@ const slideChange = (swiper: { realIndex: number }) => {
}
.dot {
z-index: 3;
bottom: 6px;
.dot-item {
margin: 0 0.3rem;
&.active {

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

@ -36,6 +36,9 @@
<el-form-item label="图片链接" class="w mb-16">
<url-value v-model="item.carousel_link"></url-value>
</el-form-item>
<div class="upload_style">
<upload v-model="item.carousel_img" :limit="1" type="video"></upload>
</div>
</div>
<el-icon class="iconfont icon-close-o size-16 abs cr-c top-de-5 right-de-5" @click="remove(index)" />
</div>

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

@ -1,6 +1,6 @@
<template>
<div class="common-style-height">
<el-form :model="form" label-width="80">
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">图片设置</div>
<el-form-item label="圆角">

5
src/components/model-data-magic/index.vue
View File

@ -19,7 +19,7 @@
<template v-else>
<magic-carousel :value="item" :content-img-radius="content_img_radius" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
</template>
<div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs">
<div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${new_style.indicator_bottom}px;`">
<template v-if="item.data_style.indicator_style == 'num'">
<div :style="item.data_style.indicator_styles" class="dot-item">
<span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.list.length }}</span>
@ -48,7 +48,7 @@
<template v-else>
<magic-carousel :value="item" :content-img-radius="content_img_radius" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
</template>
<div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs">
<div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${new_style.indicator_bottom}px;`">
<template v-if="item.data_style.indicator_style == 'num'">
<div :style="item.data_style.indicator_styles" class="dot-item">
<span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.list.length }}</span>
@ -355,7 +355,6 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
}
.dot {
z-index: 3;
bottom: 6px;
.dot-item {
margin: 0 0.3rem;
}

11
src/components/model-data-magic/model-data-magic-content.vue
View File

@ -81,12 +81,13 @@ const data_style = {
indicator_style: 'dot',
indicator_location: 'center',
indicator_size: 5,
indicator_bottom: 6,
indicator_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
radius: 4,
radius_top_left: 4,
radius_top_right: 4,
radius_bottom_left: 4,
radius_bottom_right: 4,
},
actived_color: '#2A94FF',
color: '#DDDDDD',

2
src/components/model-nav-group/model-nav-group-styles.vue
View File

@ -20,7 +20,7 @@
</card-container>
<div class="divider-line"></div>
<card-container>
<carousel-indicator :value="form"></carousel-indicator>
<carousel-indicator :value="form" :is-indicator-bottom="false"></carousel-indicator>
</card-container>
<div class="divider-line"></div>
</template>

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

@ -57,7 +57,7 @@
<model-search-styles :value="form" :content="props.content" :is-show-common="false"></model-search-styles>
</template>
<div class="bg-f5 divider-line" />
<common-styles :value="form.common_style" :is-margin="false" :is-shadow="false" :is-radius="false" @update:value="common_styles_update" />
<common-styles :value="form.common_style" :is-margin="false" :is-shadow="false" :is-radius="false" :is-floating-up="false" @update:value="common_styles_update" />
</div>
</template>
<script setup lang="ts">

12
src/views/layout/components/main/default/carousel.ts
View File

@ -24,6 +24,7 @@ interface defaultSearch {
indicator_style: string;
indicator_location: string;
indicator_size: number;
indicator_bottom: number;
indicator_radius: radiusStyle;
actived_color: string;
color: string;
@ -62,12 +63,13 @@ const defaultSearch: defaultSearch = {
indicator_style: 'dot',
indicator_location: 'center',
indicator_size: 5,
indicator_bottom: 6,
indicator_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
radius: 4,
radius_top_left: 4,
radius_top_right: 4,
radius_bottom_left: 4,
radius_bottom_right: 4,
},
actived_color: '#2A94FF',
color: '#DDDDDD',

10
src/views/layout/components/main/default/nav-group.ts
View File

@ -81,11 +81,11 @@ const defaultSearch: defaultSearch = {
indicator_location: 'center',
indicator_size: 5,
indicator_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
radius: 4,
radius_top_left: 4,
radius_top_right: 4,
radius_bottom_left: 4,
radius_bottom_right: 4,
},
actived_color: '#2A94FF',
color: '#DDDDDD',