You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
high-mini/qianzhu-KFC/buffet-order/buffet-order.vue

124 lines
3.1 KiB

<template>
<view>
<view class="width100 height120 headsbg backcorfff" @click="jumpupadess('add')">
<view class="height20"></view>
<view class="width100 fotct font18 fcor666">自助餐厅,不支持外卖</view>
<image src="../static/imgs/buffstu.png" mode="widthFix" class="width100"></image>
</view>
<view class="input-box mart20 width90">
<input placeholder="请输入关键字搜索" placeholder-style="color:#c0c0c0;" />
<view class="icon search"></view>
</view>
<view class="mart20 width80 alijusstart fotct marb20">
<view class="width50 fcor333 font16" :class="collection == 1?'colorc8':'fcor333'" @click="changestu(1)">附近餐厅
<text class="bufbtn" :class="collection == 1?'backgrdc8':'backcor33'">97</text>
</view>
<view class="width50 fcor333 font16" :class="collection == 2?'colorc8':'fcor333'" @click="changestu(2)">
收藏的餐厅
<text class="bufbtn" :class="collection == 2?'backgrdc8':'backcor33'">0</text>
</view>
</view>
<view class="mart10 width90 height90 borderrs backcorfff" v-for="(item,index) in kcfShopList" :key="index"
@click="jumpmenulist()">
<view class="paddtop10 width90 alijusstart">
<view class="width80p font16 fcor333 fontwig6">时代天街</view>
<view class="width20 fotrt">
<!-- <image mode="widthFix" class="icon20" src="../static/imgs/nocollection.png"></image> -->
<image mode="widthFix" class="icon20" src="../static/imgs/collection.png"></image>
</view>
</view>
<view class="width90 mart5 font12 fcor999">前门西大街正阳市场1号楼中部</view>
<view class="width90 mart5 alijusstart">
<image class="icon15" src="../static/imgs/location.png" mode="widthFix"></image>
<text class="margle font14 fcor666">0.2km</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
collection: 1, //是否收藏
kcfShopList: [1, 2, 3, 4, 5, 6, 7, 8, 9] //肯德基列表
}
},
methods: {
//更换状态
changestu(item) {
this.collection = item;
},
//跳转菜单
jumpmenulist() {
uni.navigateTo({
url: '../menu-list/menu-list'
})
}
}
}
</script>
<style lang="scss">
page {
background-color: #f0f0f0;
}
.headsbg {
border-radius: 0 0 30px 30px;
}
.colorc8 {
color: #c82b1f;
}
.backgrdc8 {
background-color: #c82b1f;
}
.borderrs {
border-radius: 10px;
}
.bufbtn {
padding-left: 7px;
padding-right: 7px;
padding-top: 1px;
padding-bottom: 1px;
font-size: 12px;
color: #ffffff;
border-radius: 15px;
}
.input-box {
height: 70rpx;
background-color: #ffffff;
border-radius: 30rpx;
position: relative;
display: flex;
align-items: center;
.icon {
display: flex;
align-items: center;
position: absolute;
top: 0;
right: 0;
width: 60upx;
height: 60upx;
font-size: 34upx;
color: #c0c0c0;
}
input {
padding-left: 28upx;
height: 28upx;
font-size: 28upx;
width: 100%;
}
}
</style>