Skip to content
GitLab
Unverified Commit 24ff48b8 authored by 董先生's avatar 董先生 Committed by GitHub
Browse files

style(微信小程序): 更新首页优惠券的样式 🎨 (#520)

parent fe57793b
Hide whitespace changes
Inline Side-by-side
litemall-wx/pages/index/index.wxml
View file @ 24ff48b8
<!--index.wxml-->
<!-- index.wxml -->
<view class="container">
<view class="search">
<navigator url="/pages/search/search" class="input">
<van-icon name="search"/>
<text class="txt">商品搜索, 共{{goodsCount}}款好物</text>
</navigator>
</view>
<swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
<swiper-item wx:for="{{banner}}" wx:key="id">
<block wx:if="{{item.link>0}}">
<navigator url="/pages/goods/goods?id={{item.link}}">
<image src="{{item.url}}" background-size="cover"></image>
<view class="search">
<navigator url="/pages/search/search" class="input">
<van-icon name="search" />
<text class="txt">商品搜索, 共{{goodsCount}}款好物</text>
</navigator>
</block>
<block wx:else>
<image src="{{item.url}}" background-size="cover"></image>
</block>
</swiper-item>
</swiper>
<view class="m-menu">
<navigator class="item" url="/pages/category/category?id={{item.id}}" wx:for="{{channel}}" wx:key="id">
<image src="{{item.iconUrl}}" background-size="cover"></image>
<text>{{item.name}}</text>
</navigator>
</view>
<view class="a-section a-coupon" wx:if="{{coupon.length > 0}}">
<view class="h">
<view class="title">
<view>
<navigator url="/pages/coupon/coupon">
<text class="txt">优惠券</text>
</navigator>
</view>
</view>
</view>
<view wx:if="{{coupon.length>0}}" class="b">
<view class="item" wx:for="{{coupon}}" wx:for-index="index" wx:for-item="item" wx:key="id" bindtap="getCoupon" data-index="{{item.id}}">
<view class="tag">{{item.tag}}</view>
<view class="content">
<view class="left">
<view class="discount">{{item.discount}}元</view>
<view class="min"> 满{{item.min}}元使用</view>
</view>
<view class="right">
<view class="name">{{item.name}}</view>
<view class="desc">{{item.desc}}</view>
<view class="time" wx:if="{{item.days != 0}}">有效期：{{item.days}}天</view>
<view class="time" wx:else> 有效期：{{item.startTime}} - {{item.endTime}}</view>
</view>
</view>
</view>
<swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
<swiper-item wx:for="{{banner}}" wx:key="id">
<block wx:if="{{item.link>0}}">
<navigator url="/pages/goods/goods?id={{item.link}}">
<image src="{{item.url}}" background-size="cover"></image>
</navigator>
</block>
<block wx:else>
<image src="{{item.url}}" background-size="cover"></image>
</block>
</swiper-item>
</swiper>
<view class="m-menu">
<navigator class="item" url="/pages/category/category?id={{item.id}}" wx:for="{{channel}}" wx:key="id">
<image src="{{item.iconUrl}}" background-size="cover"></image>
<text>{{item.name}}</text>
</navigator>
</view>
</view>
<view class="a-section a-groupon" wx:if="{{groupons.length > 0}}">
<view class="h">
<view class="title">
<view>
<navigator url="/pages/groupon/grouponList/grouponList">
<text class="txt">团购专区</text>
</navigator>
<view class="a-section a-coupon" wx:if="{{coupon.length > 0}}">
<view class="h">
<view class="title">
<view>
<navigator url="/pages/coupon/coupon">
<text class="txt">优惠券</text>
</navigator>
</view>
</view>
</view>
</view>
</view>
<view class="b">
<view class="item" wx:for="{{groupons}}" wx:for-index="index" wx:for-item="item" wx:key="id">
<navigator url="/pages/goods/goods?id={{item.id}}">
<image class="img" src="{{item.picUrl}}" background-size="cover"></image>
<view class="right">
<view class="text">
<view class="header">
<text class="name">{{item.name}}</text>
<van-tag type="primary">{{item.grouponMember}}人成团</van-tag>
</view>
<view class="expire">
<van-tag round type="warning">有效期至 {{item.expireTime}}</van-tag>
</view>
<text class="desc">{{item.brief}}</text>
<view class="price">
<view class="counterPrice">现价：￥{{item.retailPrice}}</view>
<view class="retailPrice">团购价：￥{{item.grouponPrice}}</view>
</view>
<view wx:if="{{coupon.length>0}}" class="b">
<view class="coupon_item" wx:for="{{coupon}}" wx:for-index="index" wx:for-item="item" wx:key="id" bindtap="getCoupon" data-index="{{item.id}}">
<view class="coupon_price">
<view>
<!-- <view class="tag"></view> -->
<view class="price">{{item.discount}}元</view>
<view class="p">满{{item.min}}元使用</view>
</view>
</view>
<view class="coupon_msg">
<view class="coupon_condition">
<view class="coupon_tag">
<view class="coupon_tag_text">{{item.tag}}</view>
</view>
<view class="text">{{item.name}}</view>
</view>
<view class="coupon_instruction">{{item.desc}}</view>
<view class="coupon_date" wx:if="{{item.days != 0}}">{{item.days}}天</view>
<view class="coupon_date" wx:else>{{item.startTime}} - {{item.endTime}}</view>
</view>
</view>
</view>
</navigator>
</view>
</view>
</view>
<view class="a-section a-brand">
<view class="h">
<navigator url="../brand/brand">
<text class="txt">品牌制造商直供</text>
</navigator>
</view>
</view>
<view class="b">
<view class="item item-1" wx:for="{{brands}}" wx:key="id">
<navigator url="/pages/brandDetail/brandDetail?id={{item.id}}">
<view class="wrap">
<image class="img" src="{{item.picUrl}}" mode="aspectFill"></image>
<view class="mt">
<text class="brand">{{item.name}}</text>
<text class="price">{{item.floorPrice}}</text>
<text class="unit">元起</text>
<view class="a-section a-groupon" wx:if="{{groupons.length > 0}}">
<view class="h">
<view class="title">
<view>
<navigator url="/pages/groupon/grouponList/grouponList">
<text class="txt">团购专区</text>
</navigator>
</view>
</view>
</view>
</navigator>
</view>
</view>
</view>
<view class="a-section a-new" wx:if="{{newGoods.length > 0}}">
<view class="h">
<view>
<navigator url="../newGoods/newGoods">
<text class="txt">周一周四 · 新品首发</text>
</navigator>
</view>
</view>
<view class="b">
<view class="item" wx:for="{{newGoods}}" wx:for-index="index" wx:for-item="item" wx:key="id">
<navigator url="../goods/goods?id={{item.id}}">
<image class="img" src="{{item.picUrl}}" background-size="cover"></image>
<text class="name">{{item.name}}</text>
<text class="price">￥{{item.retailPrice}}</text>
</navigator>
</view>
</view>
</view>
<view class="a-section a-popular" wx:if="{{hotGoods.length > 0}}">
<view class="h">
<view>
<navigator url="../hotGoods/hotGoods">
<text class="txt">人气推荐</text>
</navigator>
</view>
</view>
<view class="b">
<view class="item" wx:for="{{groupons}}" wx:for-index="index" wx:for-item="item" wx:key="id">
<navigator url="/pages/goods/goods?id={{item.id}}">
<image class="img" src="{{item.picUrl}}" background-size="cover"></image>
<view class="right">
<view class="text">
<view class="header">
<text class="name">{{item.name}}</text>
<van-tag type="primary">{{item.grouponMember}}人成团</van-tag>
</view>
<view class="expire">
<van-tag round type="warning">有效期至 {{item.expireTime}}</van-tag>
</view>
<text class="desc">{{item.brief}}</text>
<view class="price">
<view class="counterPrice">现价：￥{{item.retailPrice}}</view>
<view class="retailPrice">团购价：￥{{item.grouponPrice}}</view>
</view>
</view>
</view>
</navigator>
</view>
</view>
</view>
<view class="b">
<view class="item" wx:for="{{hotGoods}}" wx:for-index="index" wx:for-item="item" wx:key="id">
<navigator url="/pages/goods/goods?id={{item.id}}">
<image class="img" src="{{item.picUrl}}" background-size="cover"></image>
<view class="right">
<view class="text">
<text class="name">{{item.name}}</text>
<text class="desc">{{item.brief}}</text>
<text class="price">￥{{item.retailPrice}}</text>
<view class="a-section a-brand">
<view class="h">
<navigator url="../brand/brand">
<text class="txt">品牌制造商直供</text>
</navigator>
</view>
<view class="b">
<view class="item item-1" wx:for="{{brands}}" wx:key="id">
<navigator url="/pages/brandDetail/brandDetail?id={{item.id}}">
<view class="wrap">
<image class="img" src="{{item.picUrl}}" mode="aspectFill"></image>
<view class="mt">
<text class="brand">{{item.name}}</text>
<text class="price">{{item.floorPrice}}</text>
<text class="unit">元起</text>
</view>
</view>
</navigator>
</view>
</view>
</navigator>
</view>
</view>
</view>
</view>
<view class="a-section a-topic" wx:if="topics.length > 0" hidden="{{topics.length <= 0}}">
<view class="h">
<view>
<navigator url="/pages/topic/topic">
<text class="txt">专题精选</text>
</navigator>
</view>
<view class="a-section a-new" wx:if="{{newGoods.length > 0}}">
<view class="h">
<view>
<navigator url="../newGoods/newGoods">
<text class="txt">周一周四 · 新品首发</text>
</navigator>
</view>
</view>
<view class="b">
<view class="item" wx:for="{{newGoods}}" wx:for-index="index" wx:for-item="item" wx:key="id">
<navigator url="../goods/goods?id={{item.id}}">
<image class="img" src="{{item.picUrl}}" background-size="cover"></image>
<text class="name">{{item.name}}</text>
<text class="price">￥{{item.retailPrice}}</text>
</navigator>
</view>
</view>
</view>
<view class="b">
<scroll-view scroll-x class="list">
<view class="item" wx:for="{{topics}}" wx:for-index="index" wx:for-item="item" wx:key="id">
<navigator url="../topicDetail/topicDetail?id={{item.id}}">
<image class="img" src="{{item.picUrl}}" background-size="cover"></image>
<view class="np">
<text class="name">{{item.title}}</text>
<text class="price">￥{{item.price}}元起</text>
<view class="a-section a-popular" wx:if="{{hotGoods.length > 0}}">
<view class="h">
<view>
<navigator url="../hotGoods/hotGoods">
<text class="txt">人气推荐</text>
</navigator>
</view>
</view>
<view class="b">
<view class="item" wx:for="{{hotGoods}}" wx:for-index="index" wx:for-item="item" wx:key="id">
<navigator url="/pages/goods/goods?id={{item.id}}">
<image class="img" src="{{item.picUrl}}" background-size="cover"></image>
<view class="right">
<view class="text">
<text class="name">{{item.name}}</text>
<text class="desc">{{item.brief}}</text>
<text class="price">￥{{item.retailPrice}}</text>
</view>
</view>
</navigator>
</view>
<text class="desc">{{item.subtitle}}</text>
</navigator>
</view>
</scroll-view>
</view>
</view>
<view class="good-grid" wx:for="{{floorGoods}}" wx:key="id">
<view class="h" wx:if="{{item.goodsList.length>0}}">
<text>{{item.name}}</text>
<view class="a-section a-topic" wx:if="topics.length > 0" hidden="{{topics.length <= 0}}">
<view class="h">
<view>
<navigator url="/pages/topic/topic">
<text class="txt">专题精选</text>
</navigator>
</view>
</view>
<view class="b">
<scroll-view scroll-x class="list">
<view class="item" wx:for="{{topics}}" wx:for-index="index" wx:for-item="item" wx:key="id">
<navigator url="../topicDetail/topicDetail?id={{item.id}}">
<image class="img" src="{{item.picUrl}}" background-size="cover"></image>
<view class="np">
<text class="name">{{item.title}}</text>
<text class="price">￥{{item.price}}元起</text>
</view>
<text class="desc">{{item.subtitle}}</text>
</navigator>
</view>
</scroll-view>
</view>
</view>
<view class="b">
<block wx:for="{{item.goodsList}}" wx:for-index="iindex" wx:for-item="iitem" wx:key="id">
<view class="item {{iindex % 2 == 0 ? '' : 'item-b'}}">
<navigator url="../goods/goods?id={{iitem.id}}" class="a">
<image class="img" src="{{iitem.picUrl}}" background-size="cover"></image>
<text class="name">{{iitem.name}}</text>
<text class="price">￥{{iitem.retailPrice}}</text>
</navigator>
<view class="good-grid" wx:for="{{floorGoods}}" wx:key="id">
<view class="h" wx:if="{{item.goodsList.length>0}}">
<text>{{item.name}}</text>
</view>
</block>
<view class="b">
<block wx:for="{{item.goodsList}}" wx:for-index="iindex" wx:for-item="iitem" wx:key="id">
<view class="item {{iindex % 2 == 0 ? '' : 'item-b'}}">
<navigator url="../goods/goods?id={{iitem.id}}" class="a">
<image class="img" src="{{iitem.picUrl}}" background-size="cover"></image>
<text class="name">{{iitem.name}}</text>
<text class="price">￥{{iitem.retailPrice}}</text>
</navigator>
</view>
</block>
</view>
<navigator url="/pages/category/category?id={{item.id}}" class="t" wx:if="{{item.goodsList.length>0}}">
<view class="txt">{{'更多'+item.name+'好物 >'}}</view>
</navigator>
</view>
<navigator url="/pages/category/category?id={{item.id}}" class="t" wx:if="{{item.goodsList.length>0}}">
<view class="txt">{{'更多'+item.name+'好物 >'}}</view>
</navigator>
</view>
</view>
litemall-wx/pages/index/index.wxss
View file @ 24ff48b8
......@@ -127,73 +127,6 @@
overflow: hidden;
}
.a-coupon .b .item {
position: relative;
height: 200rpx;
width: 700rpx;
background: linear-gradient(to right, #cfa568, #e3bf79);
margin-bottom: 10rpx;
margin-left: 30rpx;
margin-right: 30rpx;
padding-top: 30rpx;
}
.a-coupon .b .tag {
height: 32rpx;
background: #a48143;
padding-left: 16rpx;
padding-right: 16rpx;
position: absolute;
left: 20rpx;
color: #fff;
top: 20rpx;
font-size: 20rpx;
text-align: center;
line-height: 32rpx;
}
.a-coupon .b .content {
margin-top: 24rpx;
margin-left: 40rpx;
display: flex;
margin-right: 40rpx;
flex-direction: row;
}
.a-coupon .b .content .left {
flex: 1;
}
.a-coupon .b .discount {
font-size: 50rpx;
color: #b4282d;
}
.a-coupon .b .min {
color: #fff;
}
.a-coupon .b .content .right {
width: 400rpx;
}
.a-coupon .b .name {
font-size: 44rpx;
color: #fff;
margin-bottom: 14rpx;
}
.a-coupon .b .desc {
font-size: 24rpx;
color: #fff;
}
.a-coupon .b .time {
font-size: 24rpx;
color: #fff;
line-height: 30rpx;
}
.a-groupon {
width: 750rpx;
height: auto;
......@@ -234,11 +167,13 @@
}
.a-groupon .b .name {
float: left;
display: block;
color: #333;
line-height: 50rpx;
font-size: 30rpx;
float: left;
display: block;
color: #333;
line-height: 50rpx;
font-size: 30rpx;
overflow: hidden;
text-overflow: ellipsis;
}
.a-groupon .b .desc {
......@@ -532,4 +467,99 @@
color: #666;
padding-left: 10rpx;
font-size: 30rpx;
}
\ No newline at end of file
}
/* 优惠券 */
.coupon_item {
position: relative;
/* background: linear-gradient(to right, #cfa568, #e3bf79); */
background: linear-gradient(136deg,#fdda96 0,#e3ad61 100%);
margin: 0 .5rem;
margin-bottom: .75rem;
display: flex;
border-radius: .3rem;
}
.coupon_item view {
color: #fff;
}
.coupon_price {
display: flex;
position: relative;
width: 6rem;
font-size: .7rem;
text-align: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-radius: .2rem;
-webkit-box-shadow: 0 0.1rem 0.4rem 0 rgb(0 0 0 / 5%);
box-shadow: 0 0.1rem 0.4rem 0 rgb(0 0 0 / 5%);
background: linear-gradient(136deg,#ff8787 0,#fb3636 100%);
}
.coupon_price .price{
line-height: 1;
font-size: 1.8rem;
}
.coupon_price .p{
margin-top: .25rem;
font-size: .6rem;
line-height: 1;
}
.coupon_msg{
flex: 1;
overflow: hidden;
padding: .3rem 0 0 .35rem;
}
.coupon_condition{
min-height: 1.8rem;
line-height: .95rem;
font-size: .6rem;
padding-right: .6rem;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
display: -webkit-inline-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.coupon_condition .text{
font-size: 0.8rem;
vertical-align: middle;
display: inline;
user-select: none;
white-space: pre-wrap;
}
.coupon_tag{
display: inline-block;
height: .7rem;
color: #fff;
line-height: .7rem;
text-align: center;
padding: 0 .25rem;
border-radius: .35rem;
margin-right: .25rem;
border-color: #fe5b5b;
background-color: #fe5b5b;
}
.coupon_tag_text{
font-size: .5rem;
}
.coupon_instruction{
min-width: 7.5rem;
height: .95rem;
line-height: .95rem;
padding-right: .6rem;
text-overflow: ellipsis;
overflow: hidden;
}
.coupon_date{
font-size: .65rem;
/* line-height: .5rem; */
padding: .5rem 0;
padding-right: .5rem;
width: 100%;
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment