修改轮播视频播放按钮显示

v1.3.0
于肖磊 2025-04-10 10:03:30 +08:00
parent 5db603fb6b
commit ef30601fbc
3 changed files with 23 additions and 4 deletions

View File

@ -32,10 +32,10 @@
<div v-if="new_style.video_is_show == '1' && item.carousel_video.length > 0" :class="{'x-middle': new_style.video_location == 'center', 'right-0': new_style.video_location == 'flex-end' }" class="z-deep abs oh video-class" :style="`bottom: ${new_style.video_bottom}px;`">
<div class="flex-row gap-5 align-c" :style="video_style">
<template v-if="new_style.video_type == 'img'">
<image-empty v-model="new_style.video_img[0]" class="video_img" error-img-style="width: 1.4rem;height: 1.4rem;" />
<image-empty v-model="new_style.video_img[0]" :style="`width:${ new_style.video_image_width }px;height: ${ new_style.video_image_height }px;`" fit="contain" error-img-style="width: 1.4rem;height: 1.4rem;" />
</template>
<template v-else>
<el-icon :class="`iconfont ${ !isEmpty(new_style.video_icon_class) ? 'icon-' + new_style.video_icon_class : 'icon-bofang' } size-14`" :style="`color:${new_style.video_icon_color};`" />
<el-icon :class="`iconfont ${ !isEmpty(new_style.video_icon_class) ? 'icon-' + new_style.video_icon_class : 'icon-bofang' }`" :style="`color:${new_style.video_icon_color};font-size: ${new_style.video_icon_size}px;`" />
</template>
<span v-if="!isEmpty(item.video_title)" :style="`color:${new_style.video_title_color};font-size: ${new_style.video_title_size}px;text-wrap: nowrap;`">{{ item.video_title }}</span>
</div>
@ -48,10 +48,10 @@
<div v-if="new_style.video_is_show == '1' && item.carousel_video.length > 0" :class="{'x-middle': new_style.video_location == 'center', 'right-0': new_style.video_location == 'flex-end' }" class="z-deep abs oh video-class" :style="`bottom: ${new_style.video_bottom}px;`">
<div class="flex-row gap-5 align-c" :style="video_style">
<template v-if="new_style.video_type == 'img'">
<image-empty v-model="new_style.video_img[0]" class="video_img" error-img-style="width: 1.4rem;height: 1.4rem;" />
<image-empty v-model="new_style.video_img[0]" :style="`width:${ new_style.video_image_width }px;height: ${ new_style.video_image_height }px;`" fit="contain" error-img-style="width: 1.4rem;height: 1.4rem;" />
</template>
<template v-else>
<el-icon :class="`iconfont ${ !isEmpty(new_style.video_icon_class) ? 'icon-' + new_style.video_icon_class : 'icon-bofang' } size-14`" :style="`color:${new_style.video_icon_color};`" />
<el-icon :class="`iconfont ${ !isEmpty(new_style.video_icon_class) ? 'icon-' + new_style.video_icon_class : 'icon-bofang' }`" :style="`color:${new_style.video_icon_color};font-size: ${new_style.video_icon_size}px;`" />
</template>
<span v-if="!isEmpty(item.video_title)" :style="`color:${new_style.video_title_color};font-size: ${new_style.video_title_size}px;text-wrap: nowrap;`">{{ item.video_title }}</span>
</div>

View File

@ -65,6 +65,19 @@
</template>
</div>
</el-form-item>
<el-form-item v-if="form.video_type == 'img'" label="图片设置">
<div class="flex-col gap-10 w h">
<el-form-item label="宽度" label-width="40" class="form-item-child-label">
<slider v-model="form.video_image_width" :max="300"></slider>
</el-form-item>
<el-form-item label="高度" label-width="40" class="form-item-child-label">
<slider v-model="form.video_image_height" :max="300"></slider>
</el-form-item>
</div>
</el-form-item>
<el-form-item v-if="form.video_type == 'icon'" label="图标大小">
<slider v-model="form.video_icon_size" :max="100"></slider>
</el-form-item>
<el-form-item label="位置">
<el-radio-group v-model="form.video_location" is-button>
<el-tooltip content="左对齐" placement="top" effect="dark">

View File

@ -47,6 +47,9 @@ interface defaultSearch {
video_img: uploadList[];
video_icon_class: string;
video_icon_color: string;
video_image_width: number;
video_image_height: number;
video_icon_size: number;
video_location: string;
video_bottom: number;
video_title_color: string;
@ -186,6 +189,9 @@ const defaultSearch: defaultSearch = {
video_icon_class: '',
// 视频左侧icon颜色
video_icon_color: '#ff6868',
video_image_width: 14,
video_image_height: 14,
video_icon_size: 14,
// 视频位置
video_location: 'center',
// 视频距离底部距离