585 lines
14 KiB
Vue
585 lines
14 KiB
Vue
|
<template>
|
|||
|
|
<view class="container">
|
|||
|
|
<!-- <view class="head-box">
|
|||
|
|
<scroll-view scroll-x="true" class="scroll-view">
|
|||
|
|
<view class="time-item" :class="dataActive == index ? 'active' : ''" v-for="(item,index) in date" :key="index" @click="switchTab(index)" >
|
|||
|
|
<text class="time">{{item.tiems}}</text>
|
|||
|
|
<text class="week">{{item.week}}</text>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view> -->
|
|||
|
|
<view class="head-box">
|
|||
|
|
<view class="form-box" >
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="label">取餐时间</text>
|
|||
|
|
<!-- <view class="ipt-box select" @click="open(1)"> -->
|
|||
|
|
<view class="ipt-box select">
|
|||
|
|
<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
|
|||
|
|
<!-- <input type="text" :value="visitStartTime" placeholder="请选择来访时间"> -->
|
|||
|
|
<datetime-Picker class="picker" :placeholder="'请选择取餐时间'"
|
|||
|
|
:maxDate="defaultMaxDate"
|
|||
|
|
:minDate="defaultMinDate"
|
|||
|
|
:minTime="minTime"
|
|||
|
|
:maxTime="maxTime"
|
|||
|
|
:pickerIndex="1"
|
|||
|
|
@getData="chooseDate" :type="'anyTime'">
|
|||
|
|
</datetime-Picker>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="main">
|
|||
|
|
<view class="classify-box">
|
|||
|
|
<view class="classify-item" :class="chooseClassifyIndex == index ? 'active' : ''" v-for="(item, index) in kinds" :key="index" @click="kindClick(index)">
|
|||
|
|
<text>{{item.name}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="food-list" v-if="foodList.length > 0">
|
|||
|
|
<view class="list-item" v-for="(item,index) in foodList" :key="index">
|
|||
|
|
<view class="img-box">
|
|||
|
|
<image :src="item.picture" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="fr-content">
|
|||
|
|
<view class="name">{{item.food_name}}</view>
|
|||
|
|
<view class="num">剩余{{item.no_buy_num}}份</view>
|
|||
|
|
<view class="quota-num">
|
|||
|
|
<view class="buy-num" v-if="item.quota > 0">限购{{item.quota}}份</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="choose-num">
|
|||
|
|
<image v-if="item.buyNum > 0" @click="removeItem(item)" src="/static/icons/jian.png" mode=""></image>
|
|||
|
|
<text v-if="item.buyNum > 0" >{{item.buyNum}}</text>
|
|||
|
|
<image v-if="(item.quota > 0 && item.buyNum >= item.quota) || item.buyNum >= item.no_buy_num" src="/static/icons/no-jia.png" mode=""></image>
|
|||
|
|
<image v-else @click="addItem(item)" src="/static/icons/jia.png" mode=""></image>
|
|||
|
|
<!-- <image v-if="item.buyNum < item.quota && item.buyNum < item.no_buy_num" @click="addItem(item)" src="/static/icons/jia.png" mode=""></image>
|
|||
|
|
<image v-else src="/static/icons/no-jia.png" mode=""></image> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="price">¥{{item.price}}/{{item.company}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<content-none v-else :padTop="30"></content-none>
|
|||
|
|
</view>
|
|||
|
|
<view class="footer-box " v-if="chooseFoodList.length == 0">
|
|||
|
|
<image class="notCheck" src="../../static/food/notCheck.png" mode="widthFix"></image>
|
|||
|
|
<text>未选购商品</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="pay-box" v-else>
|
|||
|
|
<view class="fr-btn" @click="submit">提交订单</view>
|
|||
|
|
<view class="fl-box" @click="showAlert = true">
|
|||
|
|
<image class="notCheck" src="../../static/icons/carChecked.png" mode="widthFix"></image>
|
|||
|
|
<text>¥{{totalPrice}}（{{totalNum}}）</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="common-shade" v-if="chooseFoodList.length > 0 && showAlert" @click="showAlert = false">
|
|||
|
|
<view class="list-box food-list" @click.stop="">
|
|||
|
|
<view class="list-item" v-for="(item,index) in chooseFoodList" :key="index">
|
|||
|
|
<view class="img-box">
|
|||
|
|
<image :src="item.picture" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="fr-content">
|
|||
|
|
<view class="name">{{item.name}}</view>
|
|||
|
|
<view class="num">剩余{{item.no_buy_num}}份</view>
|
|||
|
|
<view class="quota-num">
|
|||
|
|
<view class="buy-num" v-if="item.quota > 0">限购{{item.quota}}份</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="choose-num">
|
|||
|
|
<image v-if="item.buyNum > 0" @click="removeItem(item)" src="/static/icons/jian.png" mode=""></image>
|
|||
|
|
<text v-if="item.buyNum > 0" >{{item.buyNum}}</text>
|
|||
|
|
<image v-if="(item.quota > 0 && item.buyNum >= item.quota) || item.buyNum >= item.no_buy_num" src="/static/icons/no-jia.png" mode=""></image>
|
|||
|
|
<image v-else @click="addItem(item)" src="/static/icons/jia.png" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="price">¥{{item.price}}/{{item.unit}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import {commodityList,submitOrder} from '@/common/api.js';
|
|||
|
|
import {callbackRequest,alertTip,sureAlterTip,getStorage} from '@/common/util.js';
|
|||
|
|
import contentNone from '@/components/contentNone.vue';
|
|||
|
|
import datetimePicker from '@/components/dateTime.vue';
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
dataActive:0,
|
|||
|
|
chooseClassifyIndex:0,//选中的菜单下标
|
|||
|
|
showAlert:false,//是否显示弹窗
|
|||
|
|
kinds : [
|
|||
|
|
{
|
|||
|
|
id:'1',
|
|||
|
|
name: '熟食',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id:'2',
|
|||
|
|
name: '水果',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id:'3',
|
|||
|
|
name: '凉菜',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id:'4',
|
|||
|
|
name: '热菜',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id:'5',
|
|||
|
|
name: '蔬菜',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id:'6',
|
|||
|
|
name: '主食',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
date : [
|
|||
|
|
{ tiems: "12-13", week: "星期五" },
|
|||
|
|
{ tiems: "12-14", week: "星期六" },
|
|||
|
|
{ tiems: "12-15", week: "星期日" },
|
|||
|
|
{ tiems: "12-16", week: "星期一" },
|
|||
|
|
{ tiems: "12-17", week: "星期二" },
|
|||
|
|
{ tiems: "12-18", week: "星期三" },
|
|||
|
|
{ tiems: "12-19", week: "星期四" },
|
|||
|
|
{ tiems: "12-20", week: "星期五" },
|
|||
|
|
{ tiems: "12-21", week: "星期六" },
|
|||
|
|
{ tiems: "12-22", week: "星期日" },
|
|||
|
|
{ tiems: "12-23", week: "星期一" },
|
|||
|
|
{ tiems: "12-24", week: "星期二" },
|
|||
|
|
],
|
|||
|
|
foodList:[],
|
|||
|
|
chooseFoodList:[],//选中的食品列表
|
|||
|
|
foodListAll:{},//所有商品
|
|||
|
|
userId:getStorage('userInfo').id,
|
|||
|
|
takeFoodTime:""
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
components:{
|
|||
|
|
contentNone,
|
|||
|
|
datetimePicker
|
|||
|
|
},
|
|||
|
|
computed:{
|
|||
|
|
totalPrice(){
|
|||
|
|
let totalPrice = 0;
|
|||
|
|
this.chooseFoodList.forEach((v,i) => {
|
|||
|
|
let itemTotalPrice = v.price * v.buyNum;
|
|||
|
|
totalPrice += itemTotalPrice;
|
|||
|
|
})
|
|||
|
|
return totalPrice;
|
|||
|
|
},
|
|||
|
|
totalNum(){
|
|||
|
|
let totalNum = 0;
|
|||
|
|
this.chooseFoodList.forEach((v,i) => {
|
|||
|
|
totalNum += v.buyNum;
|
|||
|
|
})
|
|||
|
|
return totalNum;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShow(){
|
|||
|
|
this.chooseFoodList = [];
|
|||
|
|
this.getList()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getList(){
|
|||
|
|
let data = {
|
|||
|
|
"method": commodityList,
|
|||
|
|
data:{userId:this.userId,locationId:3}
|
|||
|
|
}
|
|||
|
|
callbackRequest(data)
|
|||
|
|
.then(res => {
|
|||
|
|
if(res.data.returnCode == 1){
|
|||
|
|
let result = res.data.returnData;
|
|||
|
|
this.foodListAll = result.locationDec;
|
|||
|
|
this.kindClick(this.chooseClassifyIndex);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//切换分类
|
|||
|
|
kindClick(index){
|
|||
|
|
this.chooseClassifyIndex = index;
|
|||
|
|
if(index == 0){
|
|||
|
|
this.foodList = this.foodListAll.cookedFoodList || [];
|
|||
|
|
}else if(index == 1){
|
|||
|
|
this.foodList = this.foodListAll.fruitList || [];
|
|||
|
|
}else if(index == 2){
|
|||
|
|
this.foodList = this.foodListAll.coldDishList || [];
|
|||
|
|
}else if(index == 3){
|
|||
|
|
this.foodList = this.foodListAll.hotDishList || [];
|
|||
|
|
}else if(index == 4){
|
|||
|
|
this.foodList = this.foodListAll.vegetablesList || [];
|
|||
|
|
}else if(index == 5){
|
|||
|
|
this.foodList = this.foodListAll.mainFoodList || [];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//点击日期
|
|||
|
|
switchTab(i) {
|
|||
|
|
this.dataActive = i;
|
|||
|
|
},
|
|||
|
|
//加入购物车 || 购物车商品数量 加1
|
|||
|
|
addItem(item){
|
|||
|
|
if(this.chooseFoodList.length == 0){
|
|||
|
|
this.$set(item,'buyNum',1)
|
|||
|
|
this.chooseFoodList.push(item);
|
|||
|
|
return false;
|
|||
|
|
}else {
|
|||
|
|
let boolean = this.chooseFoodList.every(function(value){
|
|||
|
|
return value.id != item.id;
|
|||
|
|
})
|
|||
|
|
console.log(boolean)
|
|||
|
|
if(boolean){
|
|||
|
|
this.$set(item,'buyNum',1)
|
|||
|
|
this.chooseFoodList.push(item);
|
|||
|
|
}else{
|
|||
|
|
item.buyNum ++;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//购物车商品数量 减1
|
|||
|
|
removeItem(item){
|
|||
|
|
// this.$set(item,item.buyNum --);
|
|||
|
|
item.buyNum --;
|
|||
|
|
if(item.buyNum == 0){
|
|||
|
|
this.chooseFoodList.forEach((v,i) => {
|
|||
|
|
if(v.id == item.id){
|
|||
|
|
this.chooseFoodList.splice(i,1);
|
|||
|
|
if(this.chooseFoodList.length == 0){
|
|||
|
|
this.showAlert = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
submit(){
|
|||
|
|
if(!this.takeFoodTime){
|
|||
|
|
alertTip('请选择取餐时间');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if(new Date(this.takeFoodTime + ':00') < new Date()){
|
|||
|
|
alertTip('取餐时间应大于当前时间');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let arr = [];
|
|||
|
|
this.chooseFoodList.forEach((v,i) => {
|
|||
|
|
let item = {
|
|||
|
|
goodsId:v.kinds_id,
|
|||
|
|
goodsNum:v.buyNum
|
|||
|
|
}
|
|||
|
|
arr.push(item)
|
|||
|
|
})
|
|||
|
|
let data = {
|
|||
|
|
"method": submitOrder,
|
|||
|
|
data:{
|
|||
|
|
userId:this.userId,
|
|||
|
|
diningRoomId:3,
|
|||
|
|
takeFoodTime:this.takeFoodTime,
|
|||
|
|
orderDetails:arr
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
callbackRequest(data)
|
|||
|
|
.then(res => {
|
|||
|
|
if(res.data.returnCode == 1){
|
|||
|
|
alertTip('预定成功');
|
|||
|
|
setTimeout(function() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:'/pages/order-form/order-form'
|
|||
|
|
})
|
|||
|
|
}, 1500);
|
|||
|
|
}else{
|
|||
|
|
alertTip(res.data.returnMsg);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
onNavigationBarButtonTap : function(){
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '../order-form/order-form'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
chooseDate(e){
|
|||
|
|
this.takeFoodTime = e.time;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
@import '@/static/css/common.scss';
|
|||
|
|
.container{
|
|||
|
|
position:relative;
|
|||
|
|
min-height:100vh;
|
|||
|
|
}
|
|||
|
|
.head-box{
|
|||
|
|
// position:fixed;
|
|||
|
|
top:0;
|
|||
|
|
left:0;
|
|||
|
|
width:100%;
|
|||
|
|
.scroll-view{
|
|||
|
|
white-space: nowrap;
|
|||
|
|
width:100%;
|
|||
|
|
height:90upx;
|
|||
|
|
.time-item{
|
|||
|
|
padding:0 10upx;
|
|||
|
|
margin:0 16upx;
|
|||
|
|
display:inline-block;
|
|||
|
|
.time{
|
|||
|
|
display:block;
|
|||
|
|
width:100%;
|
|||
|
|
font-size:28upx;
|
|||
|
|
color:#666;
|
|||
|
|
}
|
|||
|
|
.week{
|
|||
|
|
display:block;
|
|||
|
|
width:100%;
|
|||
|
|
font-size:28upx;
|
|||
|
|
color:#666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.active{
|
|||
|
|
.time{
|
|||
|
|
color:#00c277;
|
|||
|
|
}
|
|||
|
|
.week{
|
|||
|
|
color:#00c277;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.form-box{
|
|||
|
|
padding:20upx 30upx 0upx;
|
|||
|
|
margin-bottom: 20upx;
|
|||
|
|
background: #fff;
|
|||
|
|
.form-item{
|
|||
|
|
overflow:hidden;
|
|||
|
|
border-bottom:1px solid #eee;
|
|||
|
|
padding:30upx 0;
|
|||
|
|
.label{
|
|||
|
|
float:left;
|
|||
|
|
width:150upx;
|
|||
|
|
font-size:28upx;
|
|||
|
|
color:#333;
|
|||
|
|
font-weight:bold;
|
|||
|
|
line-height:50upx;
|
|||
|
|
}
|
|||
|
|
.ipt-box{
|
|||
|
|
margin-left:160upx;
|
|||
|
|
input{
|
|||
|
|
width:100%;
|
|||
|
|
height:50upx;
|
|||
|
|
line-height:50upx;
|
|||
|
|
font-size:26upx;
|
|||
|
|
color:#666;
|
|||
|
|
}
|
|||
|
|
.pic{
|
|||
|
|
width:60upx;
|
|||
|
|
height:60upx;
|
|||
|
|
line-height: 80upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.select{
|
|||
|
|
.arrow{
|
|||
|
|
float:right;
|
|||
|
|
width:16upx;
|
|||
|
|
height:29upx;
|
|||
|
|
margin-top:10upx;
|
|||
|
|
}
|
|||
|
|
input{
|
|||
|
|
width:70%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.jian{
|
|||
|
|
width: 50upx;
|
|||
|
|
height:50upx;
|
|||
|
|
margin-left: 280upx;
|
|||
|
|
}
|
|||
|
|
.select {
|
|||
|
|
.arrow {
|
|||
|
|
float: right;
|
|||
|
|
width: 16upx;
|
|||
|
|
height: 29upx;
|
|||
|
|
margin-top: 10upx;
|
|||
|
|
}
|
|||
|
|
.picker {
|
|||
|
|
height: 50upx;
|
|||
|
|
line-height: 50upx;
|
|||
|
|
font-size: 26upx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main{
|
|||
|
|
// border-top:10upx solid #f8f8f8;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position:absolute;
|
|||
|
|
top:150upx;
|
|||
|
|
left:0;
|
|||
|
|
bottom:80upx;
|
|||
|
|
width:100%;
|
|||
|
|
.classify-box{
|
|||
|
|
float:left;
|
|||
|
|
width:150upx;
|
|||
|
|
height:100%;
|
|||
|
|
background: #eee;
|
|||
|
|
overflow:auto;
|
|||
|
|
.classify-item{
|
|||
|
|
padding:30upx 0;
|
|||
|
|
line-height:40upx;
|
|||
|
|
text-align:center;
|
|||
|
|
text{
|
|||
|
|
font-size:26upx;
|
|||
|
|
color:#666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.active{
|
|||
|
|
background: #fff;
|
|||
|
|
text:{
|
|||
|
|
color:#00c277;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.food-list {
|
|||
|
|
margin-left:150upx;
|
|||
|
|
height:100%;
|
|||
|
|
overflow:auto;
|
|||
|
|
background: #fff;
|
|||
|
|
.list-item{
|
|||
|
|
overflow:hidden;
|
|||
|
|
padding:20upx 14upx;
|
|||
|
|
border-bottom:1px solid #f8f8f8;
|
|||
|
|
.img-box{
|
|||
|
|
float:left;
|
|||
|
|
width:200upx;
|
|||
|
|
height:200upx;
|
|||
|
|
image{
|
|||
|
|
display: block;
|
|||
|
|
width:100%;
|
|||
|
|
height:100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.fr-content{
|
|||
|
|
margin-left:220upx;
|
|||
|
|
.name{
|
|||
|
|
font-size:30upx;
|
|||
|
|
color:#333;
|
|||
|
|
font-weight:bold;
|
|||
|
|
@include overstepOne;
|
|||
|
|
line-height:40upx;
|
|||
|
|
margin-bottom:6upx;
|
|||
|
|
}
|
|||
|
|
.num{
|
|||
|
|
font-size:26upx;
|
|||
|
|
color:#666;
|
|||
|
|
line-height:40upx;
|
|||
|
|
margin-bottom:6upx;
|
|||
|
|
}
|
|||
|
|
.quota-num{
|
|||
|
|
min-height:50rpx;
|
|||
|
|
}
|
|||
|
|
.buy-num{
|
|||
|
|
display:inline-block;
|
|||
|
|
border:1px solid #FF0000;
|
|||
|
|
font-size:24upx;
|
|||
|
|
color:#FF0000;
|
|||
|
|
border-radius:8upx;
|
|||
|
|
line-height:32upx;
|
|||
|
|
padding:0 10upx;
|
|||
|
|
vertical-align:top;
|
|||
|
|
}
|
|||
|
|
.choose-num{
|
|||
|
|
float:right;
|
|||
|
|
image{
|
|||
|
|
width:40upx;
|
|||
|
|
height:40upx;
|
|||
|
|
vertical-align:top;
|
|||
|
|
}
|
|||
|
|
text{
|
|||
|
|
display:inline-block;
|
|||
|
|
font-size:28upx;
|
|||
|
|
color:#666;
|
|||
|
|
width:80upx;
|
|||
|
|
text-align:center;
|
|||
|
|
line-height:40upx;
|
|||
|
|
vertical-align:top;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.price{
|
|||
|
|
font-size:32upx;
|
|||
|
|
color:#FF0000;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-box{
|
|||
|
|
position:fixed;
|
|||
|
|
bottom:0;
|
|||
|
|
left:0;
|
|||
|
|
width:100%;
|
|||
|
|
height:80upx;
|
|||
|
|
background: #7AE5BC;
|
|||
|
|
text-align:center;
|
|||
|
|
line-height:80upx;
|
|||
|
|
image{
|
|||
|
|
width:50upx;
|
|||
|
|
vertical-align:middle;
|
|||
|
|
}
|
|||
|
|
text{
|
|||
|
|
font-size:30upx;
|
|||
|
|
color:#fff;
|
|||
|
|
vertical-align:middle;
|
|||
|
|
padding-left:10upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.pay-box{
|
|||
|
|
position:fixed;
|
|||
|
|
bottom:0;
|
|||
|
|
left:0;
|
|||
|
|
width:100%;
|
|||
|
|
height:80upx;
|
|||
|
|
background: #fff;
|
|||
|
|
line-height:80upx;
|
|||
|
|
.fl-box{
|
|||
|
|
// display: inline-block;
|
|||
|
|
// float:left;
|
|||
|
|
padding:10upx 0 0 30upx;
|
|||
|
|
line-height:60upx;
|
|||
|
|
margin-right:230rpx;
|
|||
|
|
image{
|
|||
|
|
width:50upx;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
margin:6upx 24upx 0 0;
|
|||
|
|
vertical-align: top;
|
|||
|
|
}
|
|||
|
|
text{
|
|||
|
|
font-size:28upx;
|
|||
|
|
color:#00c277;
|
|||
|
|
vertical-align: top;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.fr-btn{
|
|||
|
|
float:right;
|
|||
|
|
width:200upx;
|
|||
|
|
background: #00c277;
|
|||
|
|
font-size:28upx;
|
|||
|
|
color:#fff;
|
|||
|
|
text-align:center;
|
|||
|
|
line-height:80upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.common-shade{
|
|||
|
|
bottom:80upx;
|
|||
|
|
height:auto;
|
|||
|
|
.list-box{
|
|||
|
|
width:100%;
|
|||
|
|
height:500upx;
|
|||
|
|
position:absolute;
|
|||
|
|
bottom:0;
|
|||
|
|
left:0;
|
|||
|
|
background: #fff;
|
|||
|
|
margin-left:0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|