角标设置显示
于肖磊
parent
7f64da5ee4
commit
a0d9e02bbf
|
|
@ -35,20 +35,21 @@ const new_style = computed(() => props.value?.style || {});
|
|||
const corner_marker = computed(() => {
|
||||
const { subscript_style } = new_style.value;
|
||||
let location = common_styles_computer(subscript_style);
|
||||
const seckill_subscript_location = subscript_style.seckill_subscript_location;
|
||||
// 获取内部的显示数据
|
||||
const { seckill_subscript_location, top_or_bottom_spacing, left_or_right_spacing } = subscript_style;
|
||||
// 圆角根据图片的圆角来计算 对角线是同样的圆角
|
||||
if (seckill_subscript_location == 'top-left') {
|
||||
location += 'top: 0;left: 0;';
|
||||
location += `top: ${ top_or_bottom_spacing }px;left: ${ left_or_right_spacing }px;`;
|
||||
} else if (seckill_subscript_location == 'top-center') {
|
||||
location += 'top: 0;left: 50%;transform: translateX(-50%);';
|
||||
} else if (seckill_subscript_location == 'top-right') {
|
||||
location += 'top: 0;right: 0;';
|
||||
location += `top: ${ top_or_bottom_spacing }px;right:${ left_or_right_spacing }px;`;
|
||||
} else if (seckill_subscript_location == 'bottom-left') {
|
||||
location += 'bottom: 0;left: 0';
|
||||
location += `bottom: ${ top_or_bottom_spacing }px;left: ${ left_or_right_spacing }px;`;
|
||||
} else if (seckill_subscript_location == 'bottom-center') {
|
||||
location += 'bottom: 0;left: 50%;transform: translateX(-50%);';
|
||||
} else if (seckill_subscript_location == 'bottom-right') {
|
||||
location += 'bottom: 0;right: 0;';
|
||||
location += `bottom: ${ top_or_bottom_spacing }px;right: ${ left_or_right_spacing }px;`;
|
||||
}
|
||||
return location;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,13 +1,21 @@
|
|||
<template>
|
||||
<card-container>
|
||||
<div class="mb-12">秒杀角标</div>
|
||||
<div class="mb-12">角标设置</div>
|
||||
<el-form-item label="角标位置">
|
||||
<div class="flex-col gap-10">
|
||||
<el-radio-group v-model="form.seckill_subscript_location">
|
||||
<el-radio v-for="item in base_list.location_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
|
||||
<el-radio v-for="item in base_list.location_list.filter(item => item.type.includes(props.type))" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<template v-if="props.type == 'nav-group'">
|
||||
<el-form-item :label="['top-left', 'top-right'].includes(form.seckill_subscript_location) ? '上间距' : '下间距'">
|
||||
<slider v-model="form.top_or_bottom_spacing" :min="-100" :max="100"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item :label="['top-left', 'bottom-left'].includes(form.seckill_subscript_location) ? '左间距' : '右间距'">
|
||||
<slider v-model="form.left_or_right_spacing" :min="-100" :max="100"></slider>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="data.subscript_type == 'img-icon' && !isEmpty(data.subscript_img_src)">
|
||||
<el-form-item label="图片宽度">
|
||||
<slider v-model="form.img_width" :max="200"></slider>
|
||||
|
|
@ -103,6 +111,10 @@ const props = defineProps({
|
|||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'other',
|
||||
},
|
||||
});
|
||||
|
||||
const form = ref(props.value);
|
||||
|
|
@ -110,12 +122,12 @@ let clone_form = cloneDeep(props.value);
|
|||
|
||||
const base_list = {
|
||||
location_list: [
|
||||
{ name: '上左', value: 'top-left' },
|
||||
{ name: '上中', value: 'top-center' },
|
||||
{ name: '上右', value: 'top-right' },
|
||||
{ name: '下左', value: 'bottom-left' },
|
||||
{ name: '下中', value: 'bottom-center' },
|
||||
{ name: '下右', value: 'bottom-right' },
|
||||
{ name: '上左', value: 'top-left', type: ['nav-group', 'other'] },
|
||||
{ name: '上中', value: 'top-center', type: ['other'] },
|
||||
{ name: '上右', value: 'top-right', type: ['nav-group', 'other'] },
|
||||
{ name: '下左', value: 'bottom-left', type: ['nav-group', 'other'] },
|
||||
{ name: '下中', value: 'bottom-center', type: ['other'] },
|
||||
{ name: '下右', value: 'bottom-right', type: ['nav-group', 'other'] },
|
||||
],
|
||||
};
|
||||
// 背景设置
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div :style="style_container">
|
||||
<div class="re" :style="style_img_container">
|
||||
<div class="re group-container" :style="style_img_container">
|
||||
<swiper :key="carouselKey" class="w flex" direction="horizontal" :loop="true" :autoplay="autoplay" :slides-per-view="slides_per_view" :slides-per-group="1" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
|
||||
<swiper-slide v-for="(item, index) in nav_content_list" :key="index">
|
||||
<div ref="bannerImg" class="flex flex-wrap" :style="nav_space">
|
||||
|
|
@ -222,8 +222,8 @@ const slideChange = (swiper: { realIndex: number }) => {
|
|||
height: v-bind(img_size);
|
||||
width: v-bind(img_size);
|
||||
img {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -238,8 +238,8 @@ const slideChange = (swiper: { realIndex: number }) => {
|
|||
color: v-bind(actived_color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.swiper) {
|
||||
height: v-bind(newHeight);
|
||||
overflow: unset !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
<!-- 角标 -->
|
||||
<template v-if="data_content.seckill_subscript_show == '1'">
|
||||
<div class="divider-line"></div>
|
||||
<subscript-styles :value="form.subscript_style" :data="data_content"></subscript-styles>
|
||||
<subscript-styles :value="form.subscript_style" :data="data_content" type="nav-group"></subscript-styles>
|
||||
</template>
|
||||
</el-form>
|
||||
<div class="divider-line"></div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ const subscriptStyle: object = {
|
|||
img_width: 20,
|
||||
img_height: 20,
|
||||
direction: '90deg',
|
||||
top_or_bottom_spacing: 0,
|
||||
left_or_right_spacing: 0,
|
||||
color_list: [{ color: '#FF7607', color_percentage: undefined }],
|
||||
background_img_style: '2',
|
||||
background_img: [] as uploadList[],
|
||||
|
|
|
|||
Loading…
Reference in New Issue