优化首页装修
This commit is contained in:
parent
ef82a0d3f0
commit
23fd79bdfe
@ -109,3 +109,13 @@ export const exportSpu = async (params) => {
|
|||||||
export const getSpuSimpleList = async () => {
|
export const getSpuSimpleList = async () => {
|
||||||
return request.get({ url: '/product/spu/list-all-simple' })
|
return request.get({ url: '/product/spu/list-all-simple' })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获得拼团商品 SPU 列表
|
||||||
|
export const getSpuAdminSpuList = async () => {
|
||||||
|
return request.get({ url: '/promotion/combination-activity/adminSpuList' })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得秒杀商品 SPU 列表
|
||||||
|
export const getSpuMiaoShaAdminSpuList = async () => {
|
||||||
|
return request.get({ url: '/promotion/seckill-activity/adminSpuList' })
|
||||||
|
}
|
||||||
|
|||||||
@ -21,24 +21,27 @@
|
|||||||
<!-- 右侧链接列表 -->
|
<!-- 右侧链接列表 -->
|
||||||
<el-scrollbar class="h-full flex-1" @scroll="handleScroll" ref="linkScrollbar">
|
<el-scrollbar class="h-full flex-1" @scroll="handleScroll" ref="linkScrollbar">
|
||||||
<div v-for="(group, groupIndex) in APP_LINK_GROUP_LIST" :key="groupIndex">
|
<div v-for="(group, groupIndex) in APP_LINK_GROUP_LIST" :key="groupIndex">
|
||||||
<!-- 分组标题 -->
|
<template v-if="activeGroup == group.name">
|
||||||
<div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
|
<!-- 分组标题 -->
|
||||||
<!-- 链接列表 -->
|
<div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
|
||||||
<el-tooltip
|
<!-- 链接列表 -->
|
||||||
v-for="(appLink, appLinkIndex) in group.links"
|
<el-tooltip
|
||||||
:key="appLinkIndex"
|
v-for="(appLink, appLinkIndex) in group.links"
|
||||||
:content="appLink.path"
|
:key="appLinkIndex"
|
||||||
placement="bottom"
|
:content="appLink.path"
|
||||||
:show-after="300"
|
placement="bottom"
|
||||||
>
|
:show-after="300"
|
||||||
<el-button
|
>
|
||||||
class="m-b-8px m-r-8px m-l-0px!"
|
<el-button
|
||||||
:type="isSameLink(appLink.path, activeAppLink.path) ? 'primary' : 'default'"
|
class="m-b-8px m-r-8px m-l-0px!"
|
||||||
@click="handleAppLinkSelected(appLink)"
|
:type="isSameLink(appLink.path, activeAppLink.path) ? 'primary' : 'default'"
|
||||||
>
|
@click="handleAppLinkSelected(appLink)"
|
||||||
{{ appLink.name }}
|
>
|
||||||
</el-button>
|
{{ appLink.name }}
|
||||||
</el-tooltip>
|
</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
</template>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</div>
|
</div>
|
||||||
@ -155,11 +158,11 @@ const linkScrollbar = ref<ScrollbarInstance>()
|
|||||||
// 处理分组选中
|
// 处理分组选中
|
||||||
const handleGroupSelected = (group: string) => {
|
const handleGroupSelected = (group: string) => {
|
||||||
activeGroup.value = group
|
activeGroup.value = group
|
||||||
const titleRef = groupTitleRefs.value.find((item: HTMLInputElement) => item.textContent === group)
|
// const titleRef = groupTitleRefs.value.find((item: HTMLInputElement) => item.textContent === group)
|
||||||
if (titleRef) {
|
// if (titleRef) {
|
||||||
// 滚动分组标题
|
// // 滚动分组标题
|
||||||
linkScrollbar.value?.setScrollTop(titleRef.offsetTop)
|
// linkScrollbar.value?.setScrollTop(titleRef.offsetTop)
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
// 分组滚动条
|
// 分组滚动条
|
||||||
|
|||||||
@ -250,5 +250,30 @@ export const APP_LINK_GROUP_LIST = [
|
|||||||
path: '/pages/user/user_vip/index'
|
path: '/pages/user/user_vip/index'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '自定义页面',
|
||||||
|
links: [
|
||||||
|
{
|
||||||
|
name: '促销页面',
|
||||||
|
path: 'ss'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '关于我们',
|
||||||
|
path: '/pages/pay/recharge-lo'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '产品与服务',
|
||||||
|
path: '/pages/pay/recharge-l'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '自定义页面',
|
||||||
|
path: '/pages/pay/recharge-'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '个人中心',
|
||||||
|
path: '/pages/pay/recharge'
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
] as AppLinkGroup[]
|
] as AppLinkGroup[]
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
|
<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
|
||||||
<div
|
<div
|
||||||
class="flex flex-row text-12px"
|
class="new-class flex flex-row text-12px"
|
||||||
:style="{
|
:style="{
|
||||||
gap: `${property.space}px`,
|
gap: `${property.space}px`,
|
||||||
width: scrollbarWidth
|
width: scrollbarWidth
|
||||||
@ -20,13 +20,10 @@
|
|||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<!-- 布局1：1列-->
|
<!-- 布局1：1列-->
|
||||||
<div v-if="property.columns === 1" class="m-l-16px flex flex-row justify-between p-8px">
|
<!-- <div v-if="property.columns === 1" class="m-l-16px flex flex-row justify-between p-8px">
|
||||||
<div class="flex flex-col justify-evenly gap-4px">
|
<div class="flex flex-col justify-evenly gap-4px">
|
||||||
<!-- 优惠值 -->
|
|
||||||
<CouponDiscount :coupon="coupon" />
|
<CouponDiscount :coupon="coupon" />
|
||||||
<!-- 优惠描述 -->
|
|
||||||
<CouponDiscountDesc :coupon="coupon" />
|
<CouponDiscountDesc :coupon="coupon" />
|
||||||
<!-- 有效期 -->
|
|
||||||
<CouponValidTerm :coupon="coupon" />
|
<CouponValidTerm :coupon="coupon" />
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col justify-evenly">
|
<div class="flex flex-col justify-evenly">
|
||||||
@ -40,11 +37,11 @@
|
|||||||
立即领取
|
立即领取
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
<!-- 布局2：2列-->
|
<!-- 布局2：2列-->
|
||||||
|
<!-- v-else-if="property.columns === 2"s -->
|
||||||
<div
|
<div
|
||||||
v-else-if="property.columns === 2"
|
class="m-l-16px flex flex-row justify-between"
|
||||||
class="m-l-16px flex flex-row justify-between p-8px"
|
|
||||||
>
|
>
|
||||||
<div class="flex flex-col justify-evenly gap-4px">
|
<div class="flex flex-col justify-evenly gap-4px">
|
||||||
<!-- 优惠值 -->
|
<!-- 优惠值 -->
|
||||||
@ -64,8 +61,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 布局3：3列-->
|
<!-- 布局3：3列-->
|
||||||
<div v-else class="flex flex-col items-center justify-around gap-4px p-4px">
|
<!-- <div v-else class="flex flex-col items-center justify-around gap-4px p-4px">
|
||||||
<!-- 优惠值 -->
|
|
||||||
<CouponDiscount :coupon="coupon" />
|
<CouponDiscount :coupon="coupon" />
|
||||||
<div>{{ coupon.name }}</div>
|
<div>{{ coupon.name }}</div>
|
||||||
<div
|
<div
|
||||||
@ -77,7 +73,7 @@
|
|||||||
>
|
>
|
||||||
立即领取
|
立即领取
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
@ -139,4 +135,11 @@ onMounted(() => {
|
|||||||
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
|
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss"></style>
|
<style scoped lang="scss">
|
||||||
|
.new-class{
|
||||||
|
margin-left: 10px;
|
||||||
|
.box-content{
|
||||||
|
margin-right:10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -26,6 +26,7 @@
|
|||||||
'w-140px': property.layoutType === 'oneColSmallImg'
|
'w-140px': property.layoutType === 'oneColSmallImg'
|
||||||
}
|
}
|
||||||
]"
|
]"
|
||||||
|
style="padding:10px;"
|
||||||
>
|
>
|
||||||
<el-image fit="cover" class="h-full w-full" :src="spu.picUrl" />
|
<el-image fit="cover" class="h-full w-full" :src="spu.picUrl" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,6 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
|
<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
|
||||||
<!-- 商品网格 -->
|
|
||||||
|
<div class="component">
|
||||||
|
<div style="padding: 0px; border-radius: 0px; overflow: hidden;">
|
||||||
|
<div class="min-h-42px flex flex-col">
|
||||||
|
<div class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px">
|
||||||
|
<div class="flex flex-1 flex-row items-center gap-8px">
|
||||||
|
<div class="wh">
|
||||||
|
<img
|
||||||
|
src="https://zysc.fjptzykj.com:3000/shangcheng/02d372da2be37f10ecb4b79509a68f4d1c3fe6429add76d4c80f3cb9ee401e33.png" />
|
||||||
|
</div>
|
||||||
|
<span class="text-16px" style="color: rgb(187, 187, 187);">92人拼团成功</span>
|
||||||
|
</div>
|
||||||
|
<div class="item-center flex flex-row justify-center gap-4px">
|
||||||
|
<span class="text-12px" style="color: rgb(187, 187, 187);">查看更多</span>
|
||||||
|
<Icon icon="ep-arrow-right" color="#000" :size="16" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 商品网格 -->
|
||||||
<div
|
<div
|
||||||
class="grid overflow-x-auto"
|
class="grid overflow-x-auto"
|
||||||
:style="{
|
:style="{
|
||||||
@ -11,7 +31,7 @@
|
|||||||
>
|
>
|
||||||
<!-- 商品 -->
|
<!-- 商品 -->
|
||||||
<div
|
<div
|
||||||
class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
|
class="new-class relative box-content flex flex-row flex-wrap overflow-hidden "
|
||||||
:style="{
|
:style="{
|
||||||
borderTopLeftRadius: `${property.borderRadiusTop}px`,
|
borderTopLeftRadius: `${property.borderRadiusTop}px`,
|
||||||
borderTopRightRadius: `${property.borderRadiusTop}px`,
|
borderTopRightRadius: `${property.borderRadiusTop}px`,
|
||||||
@ -79,7 +99,8 @@ watch(
|
|||||||
if (!props.property.activityId) return
|
if (!props.property.activityId) return
|
||||||
const activity = await CombinationActivityApi.getCombinationActivity(props.property.activityId)
|
const activity = await CombinationActivityApi.getCombinationActivity(props.property.activityId)
|
||||||
if (!activity?.spuId) return
|
if (!activity?.spuId) return
|
||||||
spuList.value = [await ProductSpuApi.getSpu(activity.spuId)]
|
spuList.value = await ProductSpuApi.getSpuAdminSpuList()
|
||||||
|
console.log(spuList.value,'请求成功')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
immediate: true,
|
immediate: true,
|
||||||
@ -122,4 +143,31 @@ onMounted(() => {
|
|||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
.new-class{
|
||||||
|
padding: 10px;
|
||||||
|
// width:42%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-scrollbar__view) {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wh {
|
||||||
|
position: relative;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wh::after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
width: 1px;
|
||||||
|
height: 57%;
|
||||||
|
border-right: 1px solid #ababab;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -14,7 +14,7 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-card>
|
</el-card>
|
||||||
<el-card header="商品样式" class="property-group" shadow="never">
|
<el-card header="商品样式" class="property-group" shadow="never">
|
||||||
<el-form-item label="布局" prop="type">
|
<!-- <el-form-item label="布局" prop="type">
|
||||||
<el-radio-group v-model="formData.layoutType">
|
<el-radio-group v-model="formData.layoutType">
|
||||||
<el-tooltip class="item" content="单列" placement="bottom">
|
<el-tooltip class="item" content="单列" placement="bottom">
|
||||||
<el-radio-button label="oneCol">
|
<el-radio-button label="oneCol">
|
||||||
@ -27,7 +27,7 @@
|
|||||||
</el-radio-button>
|
</el-radio-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</el-form-item>
|
</el-form-item> -->
|
||||||
<el-form-item label="商品名称" prop="fields.name.show">
|
<el-form-item label="商品名称" prop="fields.name.show">
|
||||||
<div class="flex gap-8px">
|
<div class="flex gap-8px">
|
||||||
<ColorInput v-model="formData.fields.name.color" />
|
<ColorInput v-model="formData.fields.name.color" />
|
||||||
|
|||||||
@ -1,125 +1,165 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
|
<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
|
||||||
<!-- 商品网格 -->
|
<div class="component">
|
||||||
<div
|
<div style="padding: 0px; border-radius: 0px; overflow: hidden;">
|
||||||
class="grid overflow-x-auto"
|
<div class="min-h-42px flex flex-col">
|
||||||
:style="{
|
<div class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px">
|
||||||
gridGap: `${property.space}px`,
|
<div class="flex flex-1 flex-row items-center gap-8px">
|
||||||
|
<div class="wh">
|
||||||
|
<img
|
||||||
|
src="https://zysc.fjptzykj.com:3000/shangcheng/1bd7faadbb3c319c6ad303edc23ecbf12162b8ac22e2c8058b3914397d9dd226.png" />
|
||||||
|
</div>
|
||||||
|
<span class="text-16px" style="color: rgb(187, 187, 187);">已有99人购买</span>
|
||||||
|
</div>
|
||||||
|
<div class="item-center flex flex-row justify-center gap-4px">
|
||||||
|
<span class="text-12px" style="color: rgb(187, 187, 187);">查看更多</span>
|
||||||
|
<Icon icon="ep-arrow-right" color="#000" :size="16" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 商品网格 -->
|
||||||
|
<!-- gridGap: `${property.space}px`, -->
|
||||||
|
<div class="new-main" :style="{
|
||||||
|
|
||||||
gridTemplateColumns,
|
gridTemplateColumns,
|
||||||
width: scrollbarWidth
|
width: scrollbarWidth
|
||||||
}"
|
}">
|
||||||
>
|
<!-- 商品 -->
|
||||||
<!-- 商品 -->
|
<!--
|
||||||
<div
|
:style="{
|
||||||
class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
|
borderTopLeftRadius: `${property.borderRadiusTop}px`,
|
||||||
:style="{
|
borderTopRightRadius: `${property.borderRadiusTop}px`,
|
||||||
borderTopLeftRadius: `${property.borderRadiusTop}px`,
|
borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
|
||||||
borderTopRightRadius: `${property.borderRadiusTop}px`,
|
borderBottomRightRadius: `${property.borderRadiusBottom}px`
|
||||||
borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
|
}"
|
||||||
borderBottomRightRadius: `${property.borderRadiusBottom}px`
|
-->
|
||||||
}"
|
<div class="new-class relative box-content flex-row flex-wrap overflow-hidden"
|
||||||
v-for="(spu, index) in spuList"
|
v-for="(spu, index) in spuList" :key="index">
|
||||||
:key="index"
|
<!-- 角标 -->
|
||||||
>
|
<div v-if="property.badge.show" class="absolute left-0 top-0 z-1 items-center justify-center">
|
||||||
<!-- 角标 -->
|
<el-image fit="cover" :src="property.badge.imgUrl" class="new-img" />
|
||||||
<div
|
</div>
|
||||||
v-if="property.badge.show"
|
<!-- 商品封面图 -->
|
||||||
class="absolute left-0 top-0 z-1 items-center justify-center"
|
<el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
|
||||||
>
|
<div :class="[
|
||||||
<el-image fit="cover" :src="property.badge.imgUrl" class="h-26px w-38px" />
|
|
||||||
</div>
|
|
||||||
<!-- 商品封面图 -->
|
|
||||||
<el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
|
|
||||||
<div
|
|
||||||
:class="[
|
|
||||||
'flex flex-col gap-8px p-8px box-border',
|
'flex flex-col gap-8px p-8px box-border',
|
||||||
{
|
{
|
||||||
'w-[calc(100%-64px)]': columns === 2,
|
'w-[calc(100%-64px)]': columns === 2,
|
||||||
'w-full': columns === 3
|
'w-full': columns === 3
|
||||||
}
|
}
|
||||||
]"
|
]">
|
||||||
>
|
<!-- 商品名称 -->
|
||||||
<!-- 商品名称 -->
|
<div v-if="property.fields.name.show" class="truncate text-12px"
|
||||||
<div
|
:style="{ color: property.fields.name.color }">
|
||||||
v-if="property.fields.name.show"
|
{{ spu.name }}
|
||||||
class="truncate text-12px"
|
</div>
|
||||||
:style="{ color: property.fields.name.color }"
|
<div>
|
||||||
>
|
<!-- 商品价格 -->
|
||||||
{{ spu.name }}
|
<span v-if="property.fields.price.show" class="text-12px"
|
||||||
</div>
|
:style="{ color: property.fields.price.color }">
|
||||||
<div>
|
￥{{ spu.price }}
|
||||||
<!-- 商品价格 -->
|
</span>
|
||||||
<span
|
</div>
|
||||||
v-if="property.fields.price.show"
|
</div>
|
||||||
class="text-12px"
|
</div>
|
||||||
:style="{ color: property.fields.price.color }"
|
</div>
|
||||||
>
|
</el-scrollbar>
|
||||||
￥{{ spu.price }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-scrollbar>
|
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { PromotionSeckillProperty } from './config'
|
import { PromotionSeckillProperty } from './config'
|
||||||
import * as ProductSpuApi from '@/api/mall/product/spu'
|
import * as ProductSpuApi from '@/api/mall/product/spu'
|
||||||
import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
|
import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
|
||||||
|
|
||||||
/** 秒杀 */
|
/** 秒杀 */
|
||||||
defineOptions({ name: 'PromotionSeckill' })
|
defineOptions({ name: 'PromotionSeckill' })
|
||||||
// 定义属性
|
// 定义属性
|
||||||
const props = defineProps<{ property: PromotionSeckillProperty }>()
|
const props = defineProps<{ property : PromotionSeckillProperty }>()
|
||||||
// 商品列表
|
// 商品列表
|
||||||
const spuList = ref<ProductSpuApi.Spu[]>([])
|
const spuList = ref<ProductSpuApi.Spu[]>([])
|
||||||
watch(
|
watch(
|
||||||
() => props.property.activityId,
|
() => props.property.activityId,
|
||||||
async () => {
|
async () => {
|
||||||
if (!props.property.activityId) return
|
if (!props.property.activityId) return
|
||||||
const activity = await SeckillActivityApi.getSeckillActivity(props.property.activityId)
|
const activity = await SeckillActivityApi.getSeckillActivity(props.property.activityId)
|
||||||
if (!activity?.spuId) return
|
if (!activity?.spuId) return
|
||||||
spuList.value = [await ProductSpuApi.getSpu(activity.spuId)]
|
spuList.value = await ProductSpuApi.getSpuMiaoShaAdminSpuList()
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true
|
deep: true
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
// 手机宽度
|
// 手机宽度
|
||||||
const phoneWidth = ref(375)
|
const phoneWidth = ref(375)
|
||||||
// 容器
|
// 容器
|
||||||
const containerRef = ref()
|
const containerRef = ref()
|
||||||
// 商品的列数
|
// 商品的列数
|
||||||
const columns = ref(2)
|
const columns = ref(2)
|
||||||
// 滚动条宽度
|
// 滚动条宽度
|
||||||
const scrollbarWidth = ref('100%')
|
const scrollbarWidth = ref('100%')
|
||||||
// 商品图大小
|
// 商品图大小
|
||||||
const imageSize = ref('0')
|
const imageSize = ref('0')
|
||||||
// 商品网络列数
|
// 商品网络列数
|
||||||
const gridTemplateColumns = ref('')
|
const gridTemplateColumns = ref('')
|
||||||
// 计算布局参数
|
// 计算布局参数
|
||||||
watch(
|
watch(
|
||||||
() => [props.property, phoneWidth, spuList.value.length],
|
() => [props.property, phoneWidth, spuList.value.length],
|
||||||
() => {
|
() => {
|
||||||
// 计算列数
|
// 计算列数
|
||||||
columns.value = props.property.layoutType === 'oneCol' ? 1 : 3
|
columns.value = props.property.layoutType === 'oneCol' ? 1 : 3
|
||||||
// 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数
|
// 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数
|
||||||
const productWidth =
|
const productWidth =
|
||||||
(phoneWidth.value - props.property.space * (columns.value - 1)) / columns.value
|
(phoneWidth.value - props.property.space * (columns.value - 1)) / columns.value
|
||||||
// 商品图布局：2列时，左右布局 3列时，上下布局
|
// 商品图布局：2列时，左右布局 3列时，上下布局
|
||||||
imageSize.value = columns.value === 2 ? '64px' : `${productWidth}px`
|
imageSize.value = columns.value === 2 ? '64px' : `${productWidth}px`
|
||||||
// 指定列数
|
// 指定列数
|
||||||
gridTemplateColumns.value = `repeat(${columns.value}, auto)`
|
gridTemplateColumns.value = `repeat(${columns.value}, auto)`
|
||||||
// 不滚动
|
// 不滚动
|
||||||
scrollbarWidth.value = '100%'
|
scrollbarWidth.value = '100%'
|
||||||
},
|
},
|
||||||
{ immediate: true, deep: true }
|
{ immediate: true, deep: true }
|
||||||
)
|
)
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 提取手机宽度
|
// 提取手机宽度
|
||||||
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
|
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
<style scoped lang="scss">
|
||||||
|
:deep(.el-scrollbar__view) {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-class {
|
||||||
|
width: 33%;
|
||||||
|
padding: 10px;
|
||||||
|
// width:42%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-main {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-image) {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wh {
|
||||||
|
position: relative;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wh::after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
width: 1px;
|
||||||
|
height: 57%;
|
||||||
|
border-right: 1px solid #ababab;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -146,7 +146,7 @@ export const PAGE_LIBS = [
|
|||||||
components: [
|
components: [
|
||||||
'PromotionCombination',
|
'PromotionCombination',
|
||||||
'PromotionSeckill',
|
'PromotionSeckill',
|
||||||
'PromotionPoint',
|
// 'PromotionPoint',
|
||||||
'CouponCard',
|
'CouponCard',
|
||||||
'PromotionArticle'
|
'PromotionArticle'
|
||||||
]
|
]
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user