|
|
@@ -0,0 +1,145 @@
|
|
|
+<template>
|
|
|
+ <view :data-theme="theme">
|
|
|
+ <view class="cart_nav" :style='"height:"+navH+"rpx;"'>
|
|
|
+ <nav-bar iconColor='#fff' backgroundColor="#FF6702" ref="navBarRef" navTitle="今日吃啥">
|
|
|
+ </nav-bar>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="items">
|
|
|
+ <view class="item" v-for="(item,i) in items" :key="i" :class="item.checked ? 'active':'notActive'"
|
|
|
+ @click="handleCheck(i)">
|
|
|
+ <img :src="item.icon" alt="" style="height: 80rpx;width: 80rpx;margin-right: 19rpx;"/>
|
|
|
+ <view class="">
|
|
|
+ {{item.label}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import navBar from '@/components/navBar';
|
|
|
+ var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
|
|
|
+ let app = getApp();
|
|
|
+ export default {
|
|
|
+ components:{navBar},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ theme: app.globalData.theme,
|
|
|
+ navH:'',
|
|
|
+ statusBarHeight: app.globalData.statusBarHeight,
|
|
|
+ navigationBarHeight: 0,
|
|
|
+ loading: false,
|
|
|
+ loadTitle: '',
|
|
|
+ items:[
|
|
|
+ {
|
|
|
+ label:'我不挑食',
|
|
|
+ icon:require('../static/img/甜点.png'),
|
|
|
+ checked:true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:'减肥套餐',
|
|
|
+ icon:require('../static/img/减肥餐.png'),
|
|
|
+ checked:true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:'精致小食',
|
|
|
+ icon:require('../static/img/小食.png'),
|
|
|
+ checked:true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:'豪华美食',
|
|
|
+ icon:require('../static/img/豪华餐.png'),
|
|
|
+ checked:true
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //下拉刷新
|
|
|
+ onPullDownRefresh() {
|
|
|
+
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.navH = 96;
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleCheck(i) {
|
|
|
+ this.items[i].checked = !this.items[i].checked
|
|
|
+ },
|
|
|
+ handBack() {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .order-nav {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 35rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background-color: #FF6702;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .back-button {
|
|
|
+
|
|
|
+ width: 25rpx;
|
|
|
+
|
|
|
+ height: 25rpx;
|
|
|
+
|
|
|
+ border-right: 4rpx solid #fff;
|
|
|
+ border-bottom: 4rpx solid #fff;
|
|
|
+
|
|
|
+ transform: rotate(135deg);
|
|
|
+
|
|
|
+ margin-left: 10rpx;
|
|
|
+
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ left: 40rpx;
|
|
|
+ top: 25rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .content {
|
|
|
+ margin-top: 96rpx;
|
|
|
+ padding-top: 39rpx;
|
|
|
+ }
|
|
|
+ .items {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: auto auto;
|
|
|
+ grid-gap: 19.23rpx;
|
|
|
+ margin: 0 57rpx;
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #B16F22;
|
|
|
+ font-size: 35rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ width: 308rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ background: linear-gradient( 180deg, #FFE7CA 0%, #FFFFFF 100%);
|
|
|
+ border-radius: 8rpx;
|
|
|
+ border: 4rpx solid;
|
|
|
+ border-image: linear-gradient(225deg, rgba(255, 194, 80, 1), rgba(255, 220, 107, 1), rgba(255, 225, 133, 1)) 4 4 !important;
|
|
|
+ padding: 9rpx;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ border: 4rpx solid;
|
|
|
+ }
|
|
|
+ .notActive {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+</style>
|
