角标设置显示

src/components/common/subscript/subscript-index.vue

@@ -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;
 });

src/components/common/subscript/subscript-styles.vue

@@ -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-left', type: ['nav-group', 'other']  },
-        { name: '上中', value: 'top-center' },
+        { name: '上中', value: 'top-center', type: ['other'] },
-        { name: '上右', value: 'top-right' },
+        { name: '上右', value: 'top-right', type: ['nav-group', 'other'] },
-        { name: '下左', value: 'bottom-left' },
+        { name: '下左', value: 'bottom-left', type: ['nav-group', 'other'] },
-        { name: '下中', value: 'bottom-center' },
+        { name: '下中', value: 'bottom-center', type: ['other'] },
-        { name: '下右', value: 'bottom-right' },
+        { name: '下右', value: 'bottom-right', type: ['nav-group', 'other'] },
     ],
 };
 // 背景设置

src/components/model-nav-group/index.vue

@@ -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;
+            width: 2rem;
-            height: 3.5rem;
+            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>

src/components/model-nav-group/model-nav-group-styles.vue

@@ -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>

src/config/const/subscript-style.ts

@@ -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[],