首页装修与小程序样式一致调整
This commit is contained in:
parent
eaab153631
commit
60462fb27d
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
|
||||
<div
|
||||
class="new-class flex flex-row text-12px"
|
||||
class="new-class flex-row text-12px"
|
||||
:style="{
|
||||
gap: `${property.space}px`,
|
||||
width: scrollbarWidth
|
||||
@ -13,11 +13,13 @@
|
||||
background: property.bgImg
|
||||
? `url(${property.bgImg}) 100% center / 100% 100% no-repeat`
|
||||
: '#fff',
|
||||
width: `${couponWidth}px`,
|
||||
width: `150px`,
|
||||
padding: `10px 10px`,
|
||||
color: property.textColor
|
||||
}"
|
||||
v-for="(coupon, index) in couponList"
|
||||
:key="index"
|
||||
style="padding-left: 0px;padding-right: 4px;"
|
||||
>
|
||||
<!-- 布局1：1列-->
|
||||
<!-- <div v-if="property.columns === 1" class="m-l-16px flex flex-row justify-between p-8px">
|
||||
@ -41,16 +43,17 @@
|
||||
<!-- 布局2：2列-->
|
||||
<!-- v-else-if="property.columns === 2"s -->
|
||||
<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" />
|
||||
<div>{{ coupon.name }}</div>
|
||||
<CouponDiscount :coupon="coupon" style="text-align:center;" />
|
||||
<div style="text-align:center;">{{ coupon.name }}</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col" style="writing-mode: vertical-rl;">
|
||||
<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="{
|
||||
color: property.button.color,
|
||||
background: property.button.bgColor
|
||||
@ -138,8 +141,11 @@ 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>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div
|
||||
v-for="(item, index) in property.list"
|
||||
: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)}%` }"
|
||||
>
|
||||
<!-- 右上角角标 -->
|
||||
@ -14,11 +14,11 @@
|
||||
>
|
||||
{{ item.badge.text }}
|
||||
</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 }">
|
||||
{{ item.title }}
|
||||
</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 }}
|
||||
</span>
|
||||
</div>
|
||||
@ -32,4 +32,9 @@ defineOptions({ name: 'MenuGrid' })
|
||||
defineProps<{ property: MenuGridProperty }>()
|
||||
</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>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<Icon icon="ep:arrow-right" />
|
||||
<!-- <Icon icon="ep:arrow-right" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,23 @@
|
||||
<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="{
|
||||
@ -164,4 +182,44 @@ const calculateWidth = () => {
|
||||
}
|
||||
</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="{
|
||||
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 gap-8px p-8px box-border',
|
||||
'flex flex-col p-8px box-border',
|
||||
{
|
||||
'w-[calc(100%-64px)]': columns === 2,
|
||||
'w-full': columns === 3
|
||||
@ -79,6 +79,7 @@
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<view class="sss">参与拼团</view>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
@ -145,9 +146,18 @@ 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: 10px;
|
||||
padding:0 0;
|
||||
// width:42%;
|
||||
}
|
||||
|
||||
|
||||
@ -10,7 +10,12 @@
|
||||
src="https://zysc.fjptzykj.com:3000/shangcheng/cb995c399d784c08e27d8f56b0a63ace2d13af3a1ee6aba5a2da71868dc4cf00.png" />
|
||||
<span class="new-text">限时秒杀</span>
|
||||
</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 class="item-center flex flex-row justify-center gap-4px">
|
||||
<span class="text-12px" style="color: rgb(187, 187, 187);">查看更多</span>
|
||||
@ -23,10 +28,8 @@
|
||||
<!-- 商品网格 -->
|
||||
<!-- gridGap: `${property.space}px`, -->
|
||||
<div class="new-main" :style="{
|
||||
|
||||
gridTemplateColumns,
|
||||
width: scrollbarWidth
|
||||
}">
|
||||
gridTemplateColumns,
|
||||
}" style="padding:0 10px;">
|
||||
<!-- 商品 -->
|
||||
<!--
|
||||
:style="{
|
||||
@ -44,19 +47,14 @@
|
||||
</div>
|
||||
<!-- 商品封面图 -->
|
||||
<el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
|
||||
<div :class="[
|
||||
'flex flex-col gap-8px p-8px box-border',
|
||||
{
|
||||
'w-[calc(100%-64px)]': columns === 2,
|
||||
'w-full': columns === 3
|
||||
}
|
||||
]">
|
||||
<div>
|
||||
<!-- 商品名称 -->
|
||||
<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 }}
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex;">
|
||||
<div class="fff">抢</div>
|
||||
<!-- 商品价格 -->
|
||||
<span v-if="property.fields.price.show" class="text-12px"
|
||||
:style="{ color: property.fields.price.color }">
|
||||
@ -129,6 +127,24 @@
|
||||
</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;
|
||||
@ -136,28 +152,36 @@
|
||||
|
||||
.new-class {
|
||||
width: 33%;
|
||||
padding: 10px;
|
||||
border-radius: 8px 8px 8px 0px;
|
||||
padding-bottom: 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-text1 {
|
||||
width: 30px;
|
||||
}
|
||||
.new-text{
|
||||
font-weight: 700;
|
||||
|
||||
.new-text {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -118,7 +118,8 @@ export const PAGE_LIBS = [
|
||||
'MenuGrid',
|
||||
'MenuList',
|
||||
'Popover',
|
||||
'FloatingActionButton'
|
||||
'FloatingActionButton',
|
||||
"MenuGridTow"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user