Compare commits
2 Commits
eaab153631
...
eb4b68bd36
| Author | SHA1 | Date | |
|---|---|---|---|
| eb4b68bd36 | |||
| 60462fb27d |
@ -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="new-class flex flex-row text-12px"
|
class="new-class flex-row text-12px"
|
||||||
:style="{
|
:style="{
|
||||||
gap: `${property.space}px`,
|
gap: `${property.space}px`,
|
||||||
width: scrollbarWidth
|
width: scrollbarWidth
|
||||||
@ -13,11 +13,13 @@
|
|||||||
background: property.bgImg
|
background: property.bgImg
|
||||||
? `url(${property.bgImg}) 100% center / 100% 100% no-repeat`
|
? `url(${property.bgImg}) 100% center / 100% 100% no-repeat`
|
||||||
: '#fff',
|
: '#fff',
|
||||||
width: `${couponWidth}px`,
|
width: `150px`,
|
||||||
|
padding: `10px 10px`,
|
||||||
color: property.textColor
|
color: property.textColor
|
||||||
}"
|
}"
|
||||||
v-for="(coupon, index) in couponList"
|
v-for="(coupon, index) in couponList"
|
||||||
:key="index"
|
:key="index"
|
||||||
|
style="padding-left: 0px;padding-right: 4px;"
|
||||||
>
|
>
|
||||||
<!-- 布局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">
|
||||||
@ -41,16 +43,17 @@
|
|||||||
<!-- 布局2：2列-->
|
<!-- 布局2：2列-->
|
||||||
<!-- v-else-if="property.columns === 2"s -->
|
<!-- v-else-if="property.columns === 2"s -->
|
||||||
<div
|
<div
|
||||||
class="m-l-16px flex flex-row justify-between"
|
class="flex flex-row justify-between"
|
||||||
|
style=""
|
||||||
>
|
>
|
||||||
<div class="flex flex-col justify-evenly gap-4px">
|
<div class="flex flex-col justify-evenly gap-4px" style="flex:1;">
|
||||||
<!-- 优惠值 -->
|
<!-- 优惠值 -->
|
||||||
<CouponDiscount :coupon="coupon" />
|
<CouponDiscount :coupon="coupon" style="text-align:center;" />
|
||||||
<div>{{ coupon.name }}</div>
|
<div style="text-align:center;">{{ coupon.name }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col" style="writing-mode: vertical-rl;">
|
||||||
<div
|
<div
|
||||||
class="h-full w-20px rounded-20px p-x-2px p-y-8px text-center"
|
class="h-full w-20px rounded-20px text-center"
|
||||||
:style="{
|
:style="{
|
||||||
color: property.button.color,
|
color: property.button.color,
|
||||||
background: property.button.bgColor
|
background: property.button.bgColor
|
||||||
@ -138,8 +141,11 @@ onMounted(() => {
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.new-class{
|
.new-class{
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
|
overflow-x:scroll;
|
||||||
|
white-space: nowrap;
|
||||||
.box-content{
|
.box-content{
|
||||||
margin-right:10px;
|
margin-right:10px;
|
||||||
|
display:inline-block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
<div
|
<div
|
||||||
v-for="(item, index) in property.list"
|
v-for="(item, index) in property.list"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="relative flex flex-col items-center p-b-14px p-t-20px"
|
class="relative flex flex-col items-center"
|
||||||
:style="{ width: `${100 * (1 / property.column)}%` }"
|
:style="{ width: `${100 * (1 / property.column)}%` }"
|
||||||
>
|
>
|
||||||
<!-- 右上角角标 -->
|
<!-- 右上角角标 -->
|
||||||
@ -14,11 +14,11 @@
|
|||||||
>
|
>
|
||||||
{{ item.badge.text }}
|
{{ item.badge.text }}
|
||||||
</span>
|
</span>
|
||||||
<el-image v-if="item.iconUrl" class="h-28px w-28px" :src="item.iconUrl" />
|
<el-image v-if="item.iconUrl" class="h-40px w-40px" :src="item.iconUrl" />
|
||||||
<span class="m-t-8px h-16px text-12px leading-16px" :style="{ color: item.titleColor }">
|
<span class="m-t-8px h-16px text-12px leading-16px" :style="{ color: item.titleColor }">
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</span>
|
</span>
|
||||||
<span class="m-t-6px h-12px text-10px leading-12px" :style="{ color: item.subtitleColor }">
|
<span v-if="item.subtitle" class="m-t-6px h-12px text-10px leading-12px" :style="{ color: item.subtitleColor }">
|
||||||
{{ item.subtitle }}
|
{{ item.subtitle }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -32,4 +32,9 @@ defineOptions({ name: 'MenuGrid' })
|
|||||||
defineProps<{ property: MenuGridProperty }>()
|
defineProps<{ property: MenuGridProperty }>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
.items-center{
|
||||||
|
margin:5px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,80 @@
|
|||||||
|
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
|
||||||
|
import { cloneDeep } from 'lodash-es'
|
||||||
|
|
||||||
|
/** 宫格导航属性 */
|
||||||
|
export interface MenuGridProperty {
|
||||||
|
// 列数
|
||||||
|
column: number
|
||||||
|
// 导航菜单列表
|
||||||
|
list: MenuGridItemProperty[]
|
||||||
|
// 组件样式
|
||||||
|
style: ComponentStyle
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 宫格导航项目属性 */
|
||||||
|
export interface MenuGridItemProperty {
|
||||||
|
// 图标链接
|
||||||
|
iconUrl: string
|
||||||
|
// 标题
|
||||||
|
title: string
|
||||||
|
// 标题颜色
|
||||||
|
titleColor: string
|
||||||
|
// 副标题
|
||||||
|
subtitle: string
|
||||||
|
// 副标题颜色
|
||||||
|
subtitleColor: string
|
||||||
|
// 链接
|
||||||
|
url: string
|
||||||
|
// 角标
|
||||||
|
badge: {
|
||||||
|
// 是否显示
|
||||||
|
show: boolean
|
||||||
|
// 角标文字
|
||||||
|
text: string
|
||||||
|
// 角标文字颜色
|
||||||
|
textColor: string
|
||||||
|
// 角标背景颜色
|
||||||
|
bgColor: string
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
|
||||||
|
title: '标题',
|
||||||
|
titleColor: '#333',
|
||||||
|
subtitle: '副标题',
|
||||||
|
subtitleColor: '#bbb',
|
||||||
|
badge: {
|
||||||
|
show: false,
|
||||||
|
textColor: '#fff',
|
||||||
|
bgColor: '#FF6000'
|
||||||
|
}
|
||||||
|
} as MenuGridItemProperty
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-04.png'
|
||||||
|
// 定义组件
|
||||||
|
export const component = {
|
||||||
|
id: 'MenuGridTow',
|
||||||
|
name: '魔方',
|
||||||
|
// icon: 'bi:grid-3x3-gap',
|
||||||
|
icon: logo,
|
||||||
|
property: {
|
||||||
|
column: 3,
|
||||||
|
list: [cloneDeep(EMPTY_MENU_GRID_ITEM_PROPERTY)],
|
||||||
|
style: {
|
||||||
|
bgType: 'color',
|
||||||
|
bgColor: '#fff',
|
||||||
|
marginBottom: 8,
|
||||||
|
marginLeft: 8,
|
||||||
|
marginRight: 8,
|
||||||
|
padding: 8,
|
||||||
|
paddingTop: 8,
|
||||||
|
paddingRight: 8,
|
||||||
|
paddingBottom: 8,
|
||||||
|
paddingLeft: 8,
|
||||||
|
borderRadius: 8,
|
||||||
|
borderTopLeftRadius: 8,
|
||||||
|
borderTopRightRadius: 8,
|
||||||
|
borderBottomRightRadius: 8,
|
||||||
|
borderBottomLeftRadius: 8
|
||||||
|
} as ComponentStyle
|
||||||
|
}
|
||||||
|
} as DiyComponent<MenuGridProperty>
|
||||||
@ -0,0 +1,201 @@
|
|||||||
|
<template>
|
||||||
|
<div class='new_czbk'>
|
||||||
|
<div class="t">
|
||||||
|
<text class="left-font">超值爆款</text>
|
||||||
|
<div class="sub">美好生活由此开始</div>
|
||||||
|
</div>
|
||||||
|
<div class="new-list">
|
||||||
|
<!-- <div class="item" @click="sheep.$router.go('/pages/goods/sales', {
|
||||||
|
activityType: 'recommendBest',
|
||||||
|
});"> -->
|
||||||
|
<div class="item" >
|
||||||
|
<div class="nei">
|
||||||
|
<div class="l">
|
||||||
|
<div class="t">今日推荐</div>
|
||||||
|
<div class="c">店主诚意推荐品质商品</div>
|
||||||
|
<div class="b">
|
||||||
|
<!-- GO! -->
|
||||||
|
<img src="https://zysc.fjptzykj.com:3000/shangcheng/40a7582be7aeb5a6047415ab3a6728439a2798a4752ffcc1c063d66a534aa630.png"
|
||||||
|
class="img"/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="r">
|
||||||
|
<img
|
||||||
|
src="https://zysc.fjptzykj.com:3000/shangcheng/c80faeeeb2d6dadcdbe7e6d1a4caa06869b94301612cdf157414a10559b38267.png"
|
||||||
|
class="img"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="item" @click="sheep.$router.go('/pages/goods/sales', {
|
||||||
|
activityType: 'recommendHot',
|
||||||
|
});"> -->
|
||||||
|
<div class="item">
|
||||||
|
<div class="nei">
|
||||||
|
<div class="l">
|
||||||
|
<div class="t">热门榜单</div>
|
||||||
|
<div class="c">店主诚意推荐品质商品</div>
|
||||||
|
<div class="b">
|
||||||
|
<!-- GO! -->
|
||||||
|
<img
|
||||||
|
src="https://zysc.fjptzykj.com:3000/shangcheng/5c72fc99989bf0a7e59b57f519c76c9a98cb20478384e20b1b934aa8f80cc598.png"
|
||||||
|
class="img"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="r">
|
||||||
|
<img
|
||||||
|
src="https://zysc.fjptzykj.com:3000/shangcheng/904fd4848fde8025ccc17693662efd5b7bf5ec3f2656ecc7de407c8c46f910b2.png"
|
||||||
|
class="img"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="item" @click="sheep.$router.go('/pages/goods/sales', {
|
||||||
|
activityType: 'recommendNew',
|
||||||
|
});"> -->
|
||||||
|
<div class="item">
|
||||||
|
<div class="nei">
|
||||||
|
<div class="l">
|
||||||
|
<div class="t">首发新品</div>
|
||||||
|
<div class="c">新品上架等 你来拿</div>
|
||||||
|
<div class="b">
|
||||||
|
<!-- GO! -->
|
||||||
|
<img
|
||||||
|
src="https://zysc.fjptzykj.com:3000/shangcheng/ebb2fc0512d1bd6a6d21a2c07f6603bfd2ea6f7e23377eb4cd8118d89d666589.png"
|
||||||
|
class="img"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="r">
|
||||||
|
<img
|
||||||
|
src="https://zysc.fjptzykj.com:3000/shangcheng/7c71cbf2c757418302ea9ef2952893c24e1d46c4cc35a821f56be0f315bcabb0.png"
|
||||||
|
class="img"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="item" @click="sheep.$router.go('/pages/goods/sales', {
|
||||||
|
activityType: 'recommendGood',
|
||||||
|
});"> -->
|
||||||
|
<div class="item">
|
||||||
|
<div class="nei">
|
||||||
|
<div class="l">
|
||||||
|
<div class="t">促销单品</div>
|
||||||
|
<div class="c">综合评选好 产品</div>
|
||||||
|
<div class="b">
|
||||||
|
<!-- GO! -->
|
||||||
|
<img
|
||||||
|
src="https://zysc.fjptzykj.com:3000/shangcheng/aac8baa7a6feb9ee3459d1cf75ba9a7e8bacb5d93c88ac95c1b0ecd29b847f96.png"
|
||||||
|
class="img"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="r">
|
||||||
|
<img
|
||||||
|
src="https://zysc.fjptzykj.com:3000/shangcheng/8a61c35d82702c61f97ef3db43a8d6755b2eca3d78a22dbaa55851e815e96a23.png"
|
||||||
|
class="img" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="clear:both;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { MenuGridProperty } from './config'
|
||||||
|
/** 宫格导航 */
|
||||||
|
defineOptions({ name: 'MenuGridTow' })
|
||||||
|
defineProps<{ property: MenuGridProperty }>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.new_czbk {
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(255, 229, 227);
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 5px 0;
|
||||||
|
margin-top: 10px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
&>.t {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding:0 10px;
|
||||||
|
.left-font {
|
||||||
|
color: rgba(252, 60, 62);
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub {
|
||||||
|
background: rgba(248, 79, 43);
|
||||||
|
color: white;
|
||||||
|
border-radius: 20px 0px 20px 0px;
|
||||||
|
padding: 0 13px;
|
||||||
|
margin-left: 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-list {
|
||||||
|
// width: 100%;
|
||||||
|
margin-right:10px;
|
||||||
|
.item {
|
||||||
|
float: left;
|
||||||
|
width: 50%;
|
||||||
|
|
||||||
|
.nei {
|
||||||
|
margin: 10px;
|
||||||
|
margin-right:0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
background: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.l {
|
||||||
|
width: 50%;
|
||||||
|
|
||||||
|
.t {
|
||||||
|
// font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c {
|
||||||
|
color: rgba(153, 153, 153);
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 3px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b {
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
// justify-content: space-around;
|
||||||
|
// background: #329cff;
|
||||||
|
// margin: 0 3px;
|
||||||
|
// border-radius: 15px;
|
||||||
|
// color: white;
|
||||||
|
// font-weight: 700;
|
||||||
|
// padding: 0px 9px;
|
||||||
|
// font-style: oblique;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 76%;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.r {
|
||||||
|
width: 49%;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
<template>
|
||||||
|
<ComponentContainerProperty v-model="formData.style">
|
||||||
|
<!-- 表单 -->
|
||||||
|
<el-form label-width="80px" :model="formData" class="m-t-8px">
|
||||||
|
<el-form-item label="每行数量" prop="column">
|
||||||
|
<el-radio-group v-model="formData.column">
|
||||||
|
<el-radio :label="3">3个</el-radio>
|
||||||
|
<el-radio :label="4">4个</el-radio>
|
||||||
|
<el-radio :label="5">5个</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-card header="菜单设置" class="property-group" shadow="never">
|
||||||
|
<Draggable v-model="formData.list" :empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY">
|
||||||
|
<template #default="{ element }">
|
||||||
|
<el-form-item label="图标" prop="iconUrl">
|
||||||
|
<UploadImg v-model="element.iconUrl" height="80px" width="80px">
|
||||||
|
<template #tip> 建议尺寸：44 * 44 </template>
|
||||||
|
</UploadImg>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="标题" prop="title">
|
||||||
|
<InputWithColor v-model="element.title" v-model:color="element.titleColor" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="副标题" prop="subtitle">
|
||||||
|
<InputWithColor v-model="element.subtitle" v-model:color="element.subtitleColor" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="链接" prop="url">
|
||||||
|
<AppLinkInput v-model="element.url" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="显示角标" prop="badge.show">
|
||||||
|
<el-switch v-model="element.badge.show" />
|
||||||
|
</el-form-item>
|
||||||
|
<template v-if="element.badge.show">
|
||||||
|
<el-form-item label="角标内容" prop="badge.text">
|
||||||
|
<InputWithColor
|
||||||
|
v-model="element.badge.text"
|
||||||
|
v-model:color="element.badge.textColor"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="背景颜色" prop="badge.bgColor">
|
||||||
|
<ColorInput v-model="element.badge.bgColor" />
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</Draggable>
|
||||||
|
</el-card>
|
||||||
|
</el-form>
|
||||||
|
</ComponentContainerProperty>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { usePropertyForm } from '@/components/DiyEditor/util'
|
||||||
|
import {
|
||||||
|
EMPTY_MENU_GRID_ITEM_PROPERTY,
|
||||||
|
MenuGridProperty
|
||||||
|
} from '@/components/DiyEditor/components/mobile/MenuGrid/config'
|
||||||
|
|
||||||
|
/** 宫格导航属性面板 */
|
||||||
|
defineOptions({ name: 'MenuGridProperty' })
|
||||||
|
|
||||||
|
const props = defineProps<{ modelValue: MenuGridProperty }>()
|
||||||
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
const { formData } = usePropertyForm(props.modelValue, emit)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
@ -10,7 +10,7 @@
|
|||||||
<div class="h-24px truncate leading-24px">{{ item.text }}</div>
|
<div class="h-24px truncate leading-24px">{{ item.text }}</div>
|
||||||
</el-carousel-item>
|
</el-carousel-item>
|
||||||
</el-carousel>
|
</el-carousel>
|
||||||
<Icon icon="ep:arrow-right" />
|
<!-- <Icon icon="ep:arrow-right" /> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="`box-content min-h-30px w-full flex flex-row flex-wrap`" ref="containerRef">
|
<div :class="`box-content min-h-30px w-full flex flex-row flex-wrap`" ref="containerRef">
|
||||||
|
<view class="new-fenlei">
|
||||||
|
<view class="list on">
|
||||||
|
<view class="t">首页新品</view>
|
||||||
|
<view class="b">最新出炉</view>
|
||||||
|
</view>
|
||||||
|
<view class="list">
|
||||||
|
<view class="t">精品推荐</view>
|
||||||
|
<view class="b">猜你喜欢</view>
|
||||||
|
</view>
|
||||||
|
<view class="list">
|
||||||
|
<view class="t">热门榜单</view>
|
||||||
|
<view class="b">好评如云</view>
|
||||||
|
</view>
|
||||||
|
<view class="list">
|
||||||
|
<view class="t">促销单品</view>
|
||||||
|
<view class="b">多买多销</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
<div
|
<div
|
||||||
class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
|
class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
|
||||||
:style="{
|
:style="{
|
||||||
@ -164,4 +182,44 @@ const calculateWidth = () => {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
.new-fenlei {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
margin:10px 0;
|
||||||
|
justify-content: space-around;
|
||||||
|
.list {
|
||||||
|
width: 100%;
|
||||||
|
display:flex;
|
||||||
|
flex-wrap:wrap;
|
||||||
|
&.on{
|
||||||
|
.t {
|
||||||
|
color: #e93422;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b {
|
||||||
|
background: #e93422;
|
||||||
|
color:white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.t {
|
||||||
|
width:100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b {
|
||||||
|
// background: rgba(255, 102, 7);
|
||||||
|
text-align: center;
|
||||||
|
color: rgba(153,153,153);
|
||||||
|
border-radius: 15px;
|
||||||
|
width: 63%;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top:5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|||||||
@ -27,8 +27,8 @@
|
|||||||
:style="{
|
:style="{
|
||||||
gridGap: `${property.space}px`,
|
gridGap: `${property.space}px`,
|
||||||
gridTemplateColumns,
|
gridTemplateColumns,
|
||||||
width: scrollbarWidth
|
|
||||||
}"
|
}"
|
||||||
|
style="padding:0 10px;padding-bottom: 8px;"
|
||||||
>
|
>
|
||||||
<!-- 商品 -->
|
<!-- 商品 -->
|
||||||
<div
|
<div
|
||||||
@ -53,7 +53,7 @@
|
|||||||
<el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
|
<el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
|
||||||
<div
|
<div
|
||||||
:class="[
|
:class="[
|
||||||
'flex flex-col gap-8px p-8px box-border',
|
'flex flex-col p-8px box-border',
|
||||||
{
|
{
|
||||||
'w-[calc(100%-64px)]': columns === 2,
|
'w-[calc(100%-64px)]': columns === 2,
|
||||||
'w-full': columns === 3
|
'w-full': columns === 3
|
||||||
@ -79,6 +79,7 @@
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<view class="sss">参与拼团</view>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
@ -145,9 +146,18 @@ onMounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.sss {
|
||||||
|
width: 100%;
|
||||||
|
// margin-top: 10px;
|
||||||
|
padding: 3px;
|
||||||
|
font-size: 13px;
|
||||||
|
background: #e93422;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
border-radius: 0px 0px 5px 5px;
|
||||||
|
}
|
||||||
.new-class{
|
.new-class{
|
||||||
padding: 10px;
|
padding:0 0;
|
||||||
// width:42%;
|
// width:42%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -10,7 +10,12 @@
|
|||||||
src="https://zysc.fjptzykj.com:3000/shangcheng/cb995c399d784c08e27d8f56b0a63ace2d13af3a1ee6aba5a2da71868dc4cf00.png" />
|
src="https://zysc.fjptzykj.com:3000/shangcheng/cb995c399d784c08e27d8f56b0a63ace2d13af3a1ee6aba5a2da71868dc4cf00.png" />
|
||||||
<span class="new-text">限时秒杀</span>
|
<span class="new-text">限时秒杀</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="text-16px" style="color: rgb(187, 187, 187);">已有99人购买</span>
|
<div style="color: rgba(255, 51, 35, 1); font-size:15px;" class="title-text">
|
||||||
|
<span class="time">05</span>:
|
||||||
|
<span class="time">00</span>:
|
||||||
|
<span class="time">00</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-center flex flex-row justify-center gap-4px">
|
<div class="item-center flex flex-row justify-center gap-4px">
|
||||||
<span class="text-12px" style="color: rgb(187, 187, 187);">查看更多</span>
|
<span class="text-12px" style="color: rgb(187, 187, 187);">查看更多</span>
|
||||||
@ -23,10 +28,8 @@
|
|||||||
<!-- 商品网格 -->
|
<!-- 商品网格 -->
|
||||||
<!-- gridGap: `${property.space}px`, -->
|
<!-- gridGap: `${property.space}px`, -->
|
||||||
<div class="new-main" :style="{
|
<div class="new-main" :style="{
|
||||||
|
gridTemplateColumns,
|
||||||
gridTemplateColumns,
|
}" style="padding:0 10px;">
|
||||||
width: scrollbarWidth
|
|
||||||
}">
|
|
||||||
<!-- 商品 -->
|
<!-- 商品 -->
|
||||||
<!--
|
<!--
|
||||||
:style="{
|
:style="{
|
||||||
@ -44,19 +47,14 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- 商品封面图 -->
|
<!-- 商品封面图 -->
|
||||||
<el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
|
<el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
|
||||||
<div :class="[
|
<div>
|
||||||
'flex flex-col gap-8px p-8px box-border',
|
|
||||||
{
|
|
||||||
'w-[calc(100%-64px)]': columns === 2,
|
|
||||||
'w-full': columns === 3
|
|
||||||
}
|
|
||||||
]">
|
|
||||||
<!-- 商品名称 -->
|
<!-- 商品名称 -->
|
||||||
<div v-if="property.fields.name.show" class="truncate text-12px"
|
<div v-if="property.fields.name.show" class="truncate text-12px"
|
||||||
:style="{ color: property.fields.name.color }">
|
:style="{ color: property.fields.name.color }" style="margin: 5px 0;">
|
||||||
{{ spu.name }}
|
{{ spu.name }}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div style="display: flex;">
|
||||||
|
<div class="fff">抢</div>
|
||||||
<!-- 商品价格 -->
|
<!-- 商品价格 -->
|
||||||
<span v-if="property.fields.price.show" class="text-12px"
|
<span v-if="property.fields.price.show" class="text-12px"
|
||||||
:style="{ color: property.fields.price.color }">
|
:style="{ color: property.fields.price.color }">
|
||||||
@ -129,6 +127,24 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.fff {
|
||||||
|
padding: 1px 3px;
|
||||||
|
font-size: 8px;
|
||||||
|
background: #e93422;
|
||||||
|
color: white;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: rgba(255, 237, 238, 1);
|
||||||
|
color: rgba(255, 51, 35, 1);
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 3px;
|
||||||
|
}
|
||||||
|
|
||||||
:deep(.el-scrollbar__view) {
|
:deep(.el-scrollbar__view) {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
@ -136,28 +152,36 @@
|
|||||||
|
|
||||||
.new-class {
|
.new-class {
|
||||||
width: 33%;
|
width: 33%;
|
||||||
padding: 10px;
|
border-radius: 8px 8px 8px 0px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
// padding: 10px;
|
||||||
// width:42%;
|
// width:42%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.new-main {
|
.new-main {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
grid-template-columns: repeat(3, auto);
|
||||||
|
padding: 0px 10px 8px;
|
||||||
|
padding-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-image) {
|
// :deep(.el-image) {
|
||||||
width: 100% !important;
|
// width: 100% !important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.wh {
|
.wh {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.new-text1{
|
|
||||||
width:30px;
|
.new-text1 {
|
||||||
|
width: 30px;
|
||||||
}
|
}
|
||||||
.new-text{
|
|
||||||
font-weight: 700;
|
.new-text {
|
||||||
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -118,7 +118,8 @@ export const PAGE_LIBS = [
|
|||||||
'MenuGrid',
|
'MenuGrid',
|
||||||
'MenuList',
|
'MenuList',
|
||||||
'Popover',
|
'Popover',
|
||||||
'FloatingActionButton'
|
'FloatingActionButton',
|
||||||
|
"MenuGridTow"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user