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

修改图片魔方和轮播图位置

v1.0.0
于肖磊 2024-10-16 17:03:35 +08:00
parent d80e27bbd8
commit ad36bb57e1
8 changed files with 38 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -139,7 +139,7 @@ const seat_list = computed(() => {
}
})
// 轮播图自适应高度
const newHeight = computed(() => new_style.value.height + 'px');
const newHeight = computed(() => form.value.height + 'px');
// 轮播图样式
const interval_type = ref('');
// 轮播图key值

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

@ -24,6 +24,9 @@
<el-form-item v-if="form.is_roll == '1'" label="间隔时间">
<slider v-model="form.interval_time" :min="1" :max="100"></slider>
</el-form-item>
<el-form-item label="高度设置">
<slider v-model="form.height" :max="1000"></slider>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container>

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

@ -7,16 +7,15 @@
<radius :value="form" @update:value="radius_change"></radius>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">轮播设置</div>
<el-form-item label="高度设置">
<slider v-model="form.height" :max="1000"></slider>
</el-form-item>
<el-form-item v-if="['oneDragOne', 'twoDragOne'].includes(new_content.carousel_type)" label="图片间距">
<slider v-model="form.image_spacing" :max="100"></slider>
</el-form-item>
</card-container>
<template v-if="['oneDragOne', 'twoDragOne'].includes(new_content.carousel_type)">
<div class="divider-line"></div>
<card-container>
<div class="mb-12">轮播设置</div>
<el-form-item label="图片间距">
<slider v-model="form.image_spacing" :max="100"></slider>
</el-form-item>
</card-container>
</template>
<div class="divider-line"></div>
<card-container>
<carousel-indicator :value="form"></carousel-indicator>

4
src/components/model-img-magic/index.vue
View File

@ -25,8 +25,8 @@
</div>
</template>
<template v-else>
<div v-for="(item, index) in form.img_magic_list" :key="index" class="img-spacing-border" :style="`${ selected_style(item) };height: ${ new_style.image_height }px;`">
<image-empty v-model="item.img[0]" :style="content_img_radius" fit="contain"></image-empty>
<div v-for="(item, index) in form.img_magic_list" :key="index" class="img-spacing-border" :style="`${ selected_style(item) };height: ${ form.image_height }px;`">
<image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
</div>
</template>
</template>

22
src/components/model-img-magic/model-img-magic-content.vue
View File

@ -17,11 +17,23 @@
<el-radio value="cover">等比剪切</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-else label="图片设置">
<el-radio-group v-model="img_fit_10">
<el-radio value="contain">等比缩放</el-radio>
</el-radio-group>
</el-form-item>
<template v-else>
<el-form-item label="限制尺寸">
<el-switch v-model="form.limit_size" active-value="1" inactive-value="0" />
</el-form-item>
<template v-if="form.limit_size == '1'">
<el-form-item label="图片高度">
<slider v-model="form.image_height" :max="500"></slider>
</el-form-item>
<el-form-item label="图片设置">
<el-radio-group v-model="form.img_fit">
<el-radio value="contain">等比缩放</el-radio>
<el-radio value="fill">铺满</el-radio>
<el-radio value="cover">等比剪切</el-radio>
</el-radio-group>
</el-form-item>
</template>
</template>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>

8
src/components/model-img-magic/model-img-magic-styles.vue
View File

@ -9,14 +9,6 @@
<el-form-item label="图片圆角">
<radius :value="form" @update:value="radius_change"></radius>
</el-form-item>
<template v-if="new_content.style_actived === 10">
<el-form-item label="限制尺寸">
<el-switch v-model="form.limit_size" active-value="1" inactive-value="0" />
</el-form-item>
<el-form-item v-if="form.limit_size == '1'" label="图片高度">
<slider v-model="form.image_height" :max="500"></slider>
</el-form-item>
</template>
</card-container>
</el-form>
<div class="bg-f5 divider-line" />

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

@ -14,6 +14,7 @@ interface defaultSearch {
img_fit: string,
is_roll: string;
interval_time: number;
height: number,
};
style: {
radius: number;
@ -22,7 +23,6 @@ interface defaultSearch {
radius_bottom_left: number;
radius_bottom_right: number;
is_show: string;
height: number,
image_spacing: number,
indicator_style: string;
indicator_location: string;
@ -53,6 +53,7 @@ const defaultSearch: defaultSearch = {
img_fit: 'contain',
is_roll: '1',
interval_time: 3,
height: 300,
carousel_list: [
{
carousel_img: [],
@ -81,7 +82,6 @@ const defaultSearch: defaultSearch = {
radius_bottom_left: 0,
radius_bottom_right: 0,
is_show: '1',
height: 300,
image_spacing: 10,
indicator_style: 'dot',
indicator_location: 'center',

8
src/config/const/img-magic.ts
View File

@ -11,6 +11,8 @@ interface defaultSearch {
style_actived: number;
img_magic_list: img_magic[];
img_fit: string;
limit_size: string,
image_height: number;
};
style: {
radius: number;
@ -19,8 +21,6 @@ interface defaultSearch {
radius_bottom_left: number;
radius_bottom_right: number;
image_spacing: number;
limit_size: boolean,
image_height: number;
common_style: object;
};
}
@ -43,6 +43,8 @@ const defaultSearch: defaultSearch = {
}
],
img_fit: 'cover',
limit_size: '0',
image_height: 100,
},
style: {
radius: 0,
@ -51,8 +53,6 @@ const defaultSearch: defaultSearch = {
radius_bottom_left: 0,
radius_bottom_right: 0,
image_spacing: 2,
limit_size: false,
image_height: 100,
common_style: defaultCommon,
},
};