Compare commits

..

No commits in common. "eb4b68bd369c8b6ec1bb728d97bd91bd6f11415b" and "eaab153631d4e58e8b1bcf5ca306f2cf413bb1ea" have entirely different histories.

10 changed files with 41 additions and 492 deletions

View File

@ -1,7 +1,7 @@
<template>
<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
<div
class="new-class flex-row text-12px"
class="new-class flex flex-row text-12px"
:style="{
gap: `${property.space}px`,
width: scrollbarWidth
@ -13,13 +13,11 @@
background: property.bgImg
? `url(${property.bgImg}) 100% center / 100% 100% no-repeat`
: '#fff',
width: `150px`,
padding: `10px 10px`,
width: `${couponWidth}px`,
color: property.textColor
}"
v-for="(coupon, index) in couponList"
:key="index"
style="padding-left: 0px;padding-right: 4px;"
>
<!-- 布局11-->
<!-- <div v-if="property.columns === 1" class="m-l-16px flex flex-row justify-between p-8px">
@ -43,17 +41,16 @@
<!-- 布局22-->
<!-- v-else-if="property.columns === 2"s -->
<div
class="flex flex-row justify-between"
style=""
class="m-l-16px flex flex-row justify-between"
>
<div class="flex flex-col justify-evenly gap-4px" style="flex:1;">
<div class="flex flex-col justify-evenly gap-4px">
<!-- 优惠值 -->
<CouponDiscount :coupon="coupon" style="text-align:center;" />
<div style="text-align:center;">{{ coupon.name }}</div>
<CouponDiscount :coupon="coupon" />
<div>{{ coupon.name }}</div>
</div>
<div class="flex flex-col" style="writing-mode: vertical-rl;">
<div class="flex flex-col">
<div
class="h-full w-20px rounded-20px text-center"
class="h-full w-20px rounded-20px p-x-2px p-y-8px text-center"
:style="{
color: property.button.color,
background: property.button.bgColor
@ -141,11 +138,8 @@ onMounted(() => {
<style scoped lang="scss">
.new-class{
margin-left: 10px;
overflow-x:scroll;
white-space: nowrap;
.box-content{
margin-right:10px;
display:inline-block;
}
}
</style>

View File

@ -3,7 +3,7 @@
<div
v-for="(item, index) in property.list"
:key="index"
class="relative flex flex-col items-center"
class="relative flex flex-col items-center p-b-14px p-t-20px"
:style="{ width: `${100 * (1 / property.column)}%` }"
>
<!-- 右上角角标 -->
@ -14,11 +14,11 @@
>
{{ item.badge.text }}
</span>
<el-image v-if="item.iconUrl" class="h-40px w-40px" :src="item.iconUrl" />
<el-image v-if="item.iconUrl" class="h-28px w-28px" :src="item.iconUrl" />
<span class="m-t-8px h-16px text-12px leading-16px" :style="{ color: item.titleColor }">
{{ item.title }}
</span>
<span v-if="item.subtitle" class="m-t-6px h-12px text-10px leading-12px" :style="{ color: item.subtitleColor }">
<span class="m-t-6px h-12px text-10px leading-12px" :style="{ color: item.subtitleColor }">
{{ item.subtitle }}
</span>
</div>
@ -32,9 +32,4 @@ defineOptions({ name: 'MenuGrid' })
defineProps<{ property: MenuGridProperty }>()
</script>
<style scoped lang="scss">
.items-center{
margin:5px 0;
}
</style>
<style scoped lang="scss"></style>

View File

@ -1,80 +0,0 @@
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>

View File

@ -1,201 +0,0 @@
<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>

View File

@ -1,66 +0,0 @@
<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>

View File

@ -10,7 +10,7 @@
<div class="h-24px truncate leading-24px">{{ item.text }}</div>
</el-carousel-item>
</el-carousel>
<!-- <Icon icon="ep:arrow-right" /> -->
<Icon icon="ep:arrow-right" />
</div>
</template>

View File

@ -1,23 +1,5 @@
<template>
<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
class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
:style="{
@ -182,44 +164,4 @@ const calculateWidth = () => {
}
</script>
<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>
<style scoped lang="scss"></style>

View File

@ -27,8 +27,8 @@
:style="{
gridGap: `${property.space}px`,
gridTemplateColumns,
width: scrollbarWidth
}"
style="padding:0 10px;padding-bottom: 8px;"
>
<!-- 商品 -->
<div
@ -53,7 +53,7 @@
<el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
<div
:class="[
'flex flex-col p-8px box-border',
'flex flex-col gap-8px p-8px box-border',
{
'w-[calc(100%-64px)]': columns === 2,
'w-full': columns === 3
@ -79,7 +79,6 @@
</span>
</div>
</div>
<view class="sss">参与拼团</view>
</div>
</div>
</el-scrollbar>
@ -146,18 +145,9 @@ onMounted(() => {
</script>
<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{
padding:0 0;
padding: 10px;
// width:42%;
}

View File

@ -10,12 +10,7 @@
src="https://zysc.fjptzykj.com:3000/shangcheng/cb995c399d784c08e27d8f56b0a63ace2d13af3a1ee6aba5a2da71868dc4cf00.png" />
<span class="new-text">限时秒杀</span>
</div>
<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>
<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>
@ -28,8 +23,10 @@
<!-- 商品网格 -->
<!-- gridGap: `${property.space}px`, -->
<div class="new-main" :style="{
gridTemplateColumns,
}" style="padding:0 10px;">
width: scrollbarWidth
}">
<!-- 商品 -->
<!--
:style="{
@ -47,14 +44,19 @@
</div>
<!-- 商品封面图 -->
<el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
<div>
<div :class="[
'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"
:style="{ color: property.fields.name.color }" style="margin: 5px 0;">
:style="{ color: property.fields.name.color }">
{{ spu.name }}
</div>
<div style="display: flex;">
<div class="fff"></div>
<div>
<!-- 商品价格 -->
<span v-if="property.fields.price.show" class="text-12px"
:style="{ color: property.fields.price.color }">
@ -127,24 +129,6 @@
</script>
<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) {
background-color: white;
border-radius: 12px;
@ -152,34 +136,26 @@
.new-class {
width: 33%;
border-radius: 8px 8px 8px 0px;
padding-bottom: 10px;
// padding: 10px;
padding: 10px;
// width:42%;
}
.new-main {
display: flex;
gap: 8px;
grid-template-columns: repeat(3, auto);
padding: 0px 10px 8px;
padding-bottom: 10px;
}
// :deep(.el-image) {
// width: 100% !important;
// }
:deep(.el-image) {
width: 100% !important;
}
.wh {
position: relative;
padding-right: 10px;
display: flex;
align-items: center;
.new-text1{
width:30px;
}
.new-text{
font-weight: 700;
}

View File

@ -118,8 +118,7 @@ export const PAGE_LIBS = [
'MenuGrid',
'MenuList',
'Popover',
'FloatingActionButton',
"MenuGridTow"
'FloatingActionButton'
]
},
{