完善页面
This commit is contained in:
wangxiaowei
@ -1,84 +1,30 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="shop">
|
||||
<view>
|
||||
<u-swiper :list="list" height="500" border-radius="0" mode="number" indicator-pos="bottomRight"></u-swiper>
|
||||
</view>
|
||||
|
||||
<view class="bg-white mx24 px24 u-m-t-24 u-padding-top-20 u-padding-bottom-20 br24">
|
||||
<view class="nr">煎饼果子套餐</view>
|
||||
<view class="mt10 row u-row-between">
|
||||
<view class="row">
|
||||
<view class="primary">
|
||||
<price-format :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
|
||||
</view>
|
||||
<view class="sale u-text-center primary u-m-l-12">0折</view>
|
||||
<view class="primary u-m-l-12">
|
||||
<price-format :lineThrough="true" color="#999" :subscriptSize="22" :firstSize="22" :secondSize="22" :price="16.9"></price-format>
|
||||
<view class="shop">
|
||||
<view class="bg">
|
||||
<view class="grid list">
|
||||
<view class="bg-white item br16" v-for="(item, index) in 10">
|
||||
<view class="u-relative">
|
||||
<u-image :src="cloudPath + 'img/banner.png'" width="336" height="336" border-radius="16rpx 16rpx 0 0"></u-image>
|
||||
<view class="tag u-absolute top-0 left-0 text-fff sm">
|
||||
1号柜
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-999">已售66</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-20 u-m-b-20">
|
||||
<u-line color="#eee" />
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
<text>须知</text>
|
||||
<text class="text-999 ml20">周一至周日可用</text>
|
||||
</view>
|
||||
|
||||
<view class="row-between mt20">
|
||||
<view>
|
||||
<text>保障</text>
|
||||
<text class="text-999 ml20">随时退 过期自动退</text>
|
||||
<view class="u-p-t-16 u-p-l-16 u-p-r-16 u-m-b-20">
|
||||
<view class="u-line-2">
|
||||
<view class="title">孜然煎饼果子套餐孜然煎饼果子套餐孜然煎饼果子套餐孜然煎饼果子套餐孜然煎饼果子套餐</view>
|
||||
</view>
|
||||
<view>
|
||||
<u-button @click="chooseSpec" hover-class="none"
|
||||
:customStyle="{width: '116rpx', height: '46rpx', fontSize: '24rpx', backgroundColor: themeColor, color: '#fff', border: 'none', paddingTop: '8rpx'}"
|
||||
:hair-line="false"
|
||||
shape="circle">
|
||||
选规格
|
||||
</u-button>
|
||||
<view class="row-between u-m-t-20">
|
||||
<view>
|
||||
<price-format color="#FF0000" :price="121.99" :subscriptSize="20" :firstSize="36" :secondSize="36"></price-format>
|
||||
</view>
|
||||
<view>
|
||||
<u-icon name="plus-circle-fill" color="#FE6004" size="54"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-24">
|
||||
<view class="u-m-l-48 nr">详情</view>
|
||||
<view class="bg-white mx24 px24 u-m-t-24 u-padding-top-20 u-padding-bottom-20 br24">
|
||||
<u-image :src="cloudPath + 'img/banner.png'" height="600"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-24">
|
||||
<view class="u-m-l-48 nr">购买须知</view>
|
||||
<view class="bg-white mx24 px24 u-m-t-24 u-padding-top-20 u-padding-bottom-20 br24">
|
||||
这里是购买须知的内容
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fixed bg-white row-between px48 u-padding-top-20 u-padding-bottom-20">
|
||||
<view class="column u-text-center">
|
||||
<view class="row-center">
|
||||
<u-image :src="cloudPath + 'img/icon_store.png'" width="48" height="48"></u-image>
|
||||
</view>
|
||||
<view>门店</view>
|
||||
</view>
|
||||
<view class="u-m-l-64 flex1">
|
||||
<u-button hover-class="none"
|
||||
:customStyle="{height: '92rpx', fontSize: '24rpx', backgroundColor: themeColor, color: '#fff', border: 'none', paddingTop: '8rpx'}"
|
||||
:hair-line="false"
|
||||
shape="circle">
|
||||
立即购买
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<shop-spec v-model="showSpec" @close="showSpec = false"></shop-spec>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -86,22 +32,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
image: "http://jianbing-media.stnav.com/frontend/img/banner.png",
|
||||
title: "昨夜星辰昨夜风，画楼西畔桂堂东",
|
||||
},
|
||||
{
|
||||
image: "http://jianbing-media.stnav.com/frontend/img/banner.png",
|
||||
title: "身无彩凤双飞翼，心有灵犀一点通",
|
||||
}
|
||||
],
|
||||
showSpec: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseSpec() {
|
||||
this.showSpec = true
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -109,20 +40,35 @@
|
||||
|
||||
<style lang="scss">
|
||||
.shop {
|
||||
padding-bottom: 180rpx;
|
||||
.sale {
|
||||
background-color: #FEFBEA;
|
||||
width: 100rpx;
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
.bg {
|
||||
height: 633rpx;
|
||||
background: url(#{$cloudPath}img/banner.png) no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding-top: 406rpx;
|
||||
padding-bottom: 60rpx;
|
||||
margin: 0 32rpx;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 336rpx;
|
||||
|
||||
.tag {
|
||||
width: 120rpx;
|
||||
height: 54rpx;
|
||||
border-radius: 16rpx 0 16rpx 0;
|
||||
background: linear-gradient( 139deg, #FFBF5F 0%, #FF9A62 100%);
|
||||
padding: 6rpx 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user