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

修改秒杀图片

v1.0.0
于肖磊 2024-09-03 18:49:41 +08:00
parent d6c1042cfd
commit f2241a1739
5 changed files with 30 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/components/model-seckill/theme-4.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/images/components/model-seckill/time.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 691 B

31
src/components/model-seckill/index.vue
View File

@ -11,7 +11,7 @@
<div class="flex-row align-c gap-4">
<span class="size-10" :style="`color: ${ new_style.end_text_color }`">距离结束</span>
<div class="flex-row gap-3 jc-c align-c" :style="[form.theme == '4'? `${ time_bg };padding: 0.3rem 0.4rem;border-radius: 1.1rem;` : '']">
<img v-if="form.theme == '4'" class="seckill-head-icon radius-xs" :src="url_computer('time')" />
<img v-if="form.theme == '4'" class="seckill-head-icon radius-xs" :src="new_url" />
<template v-for="(item, index) in time_config" :key="item.key">
<template v-if="form.theme == '4'">
<div class="size-12" :style="`color: ${ new_style.countdown_color }`">{{ item.value }}</div>
@ -31,7 +31,7 @@
</div>
</div>
<div class="flex flex-wrap" :style="`gap: ${ content_outer_spacing }px;`">
<div v-for="(item, index) in list" :key="index" :class="layout_type" :style="`${ content_radius }; ${ content_padding }`">
<div v-for="(item, index) in list" :key="index" :class="layout_type" :style="`${ content_radius }; ${ shop_style_type == '1' ? content_padding : '' }`">
<template v-if="!isEmpty(item)">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
@ -40,8 +40,8 @@
<image-empty v-model="item.images" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
</template>
</template>
<div class="flex-col gap-10">
<div class="flex-col gap-10" :style="content_style">
<div>{{ item.title }}</div>
</div>
</div>
</div>
@ -51,6 +51,7 @@
<script setup lang="ts">
import { background_computer, common_styles_computer, gradient_computer, padding_computer, radius_computer } from '@/utils';
import { isEmpty } from 'lodash';
import { online_url } from '@/utils';
const props = defineProps({
value: {
@ -60,6 +61,12 @@ const props = defineProps({
},
},
});
const new_url = ref('');
onBeforeMount(async () => {
const url = await online_url('/static/plugins/seckill/images/diy/').then(res => res);
new_url.value = url + 'time.png';
})
const form = computed(() => props.value?.content || {});
const new_style = computed(() => props.value?.style || {});
const time_config = [
@ -157,6 +164,17 @@ const content_radius = computed(() => radius_computer(new_style.value.shop_radiu
const shop_style_type = computed(() => form.value.shop_style_type);
// 内边距设置
const content_padding = computed(() => padding_computer(new_style.value.shop_padding));
// 内容区域的样式
const content_style = computed(() => {
const spacing_value = new_style.value.content_spacing;
let spacing = '';
if (shop_style_type.value == '1') {
spacing = `margin-left: ${spacing_value}px;`;
} else {
spacing = content_padding.value;
}
return `${spacing}`;
});
// 不同风格下的样式
const layout_type = computed(() => {
let class_type = '';
@ -190,11 +208,6 @@ const multicolumn_columns_width = computed(() => {
});
// 图片圆角设置
const content_img_radius = computed(() => radius_computer(new_style.value.shop_img_radius));
const url_computer = (name: string) => {
const new_url = ref(new URL(`../../assets/images/components/model-seckill/${name}.png`, import.meta.url).href).value;
return new_url;
};
</script>
<style lang="scss" scoped>
:deep(.el-image) {

2
src/components/model-seckill/model-seckill-setting.vue
View File

@ -136,7 +136,7 @@ onBeforeMount(async () => {
style: {
topic_color: '#000',
head_button_color: '#000',
end_text_color: '',
end_text_color: '#666',
header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
header_background_img_url: [],
countdown_bg_color_list: [{ color: '#FF5000', color_percentage: undefined }],

14
src/components/model-seckill/model-seckill-styles.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="w">
<el-form :model="form" label-width="70">
<template v-if="form.head_state == '1'">
<template v-if="data.head_state == '1'">
<card-container>
<div class="mb-12">头部样式</div>
<el-form-item v-if="form.topic_type == 'text'" label="标题设置">
<el-form-item v-if="data.topic_type == 'text'" label="标题设置">
<color-text-size-group v-model:color="form.topic_color" v-model:size="form.topic_size" :default-color="clone_form.topic_color" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
<el-form-item v-if="form.button_status == '1'" label="按钮设置">
<el-form-item v-if="data.button_status == '1'" label="按钮设置">
<color-text-size-group v-model:color="form.head_button_color" v-model:size="form.head_button_size" :default-color="clone_form.head_button_color" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
<el-form-item label="秒杀提示">
@ -68,13 +68,13 @@
<el-form-item label="内间距">
<padding :value="form.shop_padding"></padding>
</el-form-item>
<el-form-item v-if="form.shop_style_type == '1'" label="内容间距">
<el-form-item v-if="data.shop_style_type == '1'" label="内容间距">
<slider v-model="form.content_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="商品间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider>
</el-form-item>
<template v-if="form.shop_style_type == '3'">
<template v-if="data.shop_style_type == '3'">
<el-form-item label="内容高度">
<slider v-model="form.content_outer_height" :max="1000"></slider>
</el-form-item>
@ -93,7 +93,7 @@
</div>
</el-form-item>
</card-container>
<template v-if="form.shop_style_type == '1'">
<template v-if="data.shop_style_type == '1'">
<div class="divider-line"></div>
<card-container>
<div class="mb-12">进度条设置</div>
@ -114,7 +114,7 @@
</el-form-item>
</card-container>
</template>
<template v-if="form.shop_style_type == '3'">
<template v-if="data.shop_style_type == '3'">
<div class="divider-line"></div>
<card-container>
<div class="mb-12">轮播设置</div>