|
|
@@ -1,7 +1,24 @@
|
|
|
<template>
|
|
|
<view class="w-full">
|
|
|
+ <view>
|
|
|
+ <u-row justify="space-between" customStyle="margin-bottom: 10px">
|
|
|
+ <u-col span="3">
|
|
|
+ <view class="icon-container">
|
|
|
+ <u-icon label="自提" labelPos="bottom" size="42" name="order"></u-icon>
|
|
|
+ <u-tag class="ictag" text="0" shape="circle" type="error"></u-tag>
|
|
|
+ </view>
|
|
|
+ </u-col>
|
|
|
+ <view>
|
|
|
+ <u-tag text="营业中" plain shape="circle" type="success"></u-tag>
|
|
|
+ <u-icon label="当前餐车名称" labelPos="left" size="16" name="arrow-down"></u-icon>
|
|
|
+ </view>
|
|
|
+ <u-col span="3">
|
|
|
+ <u-icon label="我的" labelPos="bottom" size="42" name="account"></u-icon>
|
|
|
+ </u-col>
|
|
|
+ </u-row>
|
|
|
+ </view>
|
|
|
<!-- <top-search :isSearch="false" @searchClick="searchClick"></top-search>
|
|
|
- <view class="w-full padding-lr-sm box-sizing-b dflex-b">
|
|
|
+ <view class="w-full padding-lr-sm box-sizing-b dflex-b">
|
|
|
<scroll-view class="goods-category" scroll-x>
|
|
|
<view class="category-box">
|
|
|
<view class="category-item padding-lr-lg" v-for="item in 8" :key="item" :class="{'on-category':onIndex === item}">分类{{item+1}}</view>
|
|
|
@@ -33,7 +50,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<my-gap :height="130" />
|
|
|
-
|
|
|
+
|
|
|
<view class="cart-bottom padding-sm dflex-b">
|
|
|
<view class="cart padding-lr">
|
|
|
<uni-badge size="small" :text="100" absolute="rightTop">
|
|
|
@@ -50,17 +67,19 @@
|
|
|
<script>
|
|
|
import cartPopupVue from '../../components/cartPopup.vue'
|
|
|
export default {
|
|
|
- components:{cartPopupVue},
|
|
|
+ components: {
|
|
|
+ cartPopupVue
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- onIndex:0,
|
|
|
- show:false
|
|
|
+ onIndex: 0,
|
|
|
+ show: false
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
// 加购
|
|
|
- goCart(){},
|
|
|
- showCart(){
|
|
|
+ goCart() {},
|
|
|
+ showCart() {
|
|
|
this.$refs.cartPopup.setShow(true);
|
|
|
}
|
|
|
}
|
|
|
@@ -68,87 +87,112 @@
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.goods-category{
|
|
|
- width: calc(100% - 100rpx);
|
|
|
- border-radius: 14rpx;
|
|
|
- overflow: hidden;
|
|
|
- .category-box{
|
|
|
- height: 70rpx;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .category-item{
|
|
|
- font-size: 14px;
|
|
|
- flex-shrink: 0;
|
|
|
- height: 100%;
|
|
|
- line-height: 70rpx;
|
|
|
+ .goods-category {
|
|
|
+ width: calc(100% - 100rpx);
|
|
|
+ border-radius: 14rpx;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .category-box {
|
|
|
+ height: 70rpx;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .category-item {
|
|
|
+ font-size: 14px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 70rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .on-category {
|
|
|
+ color: #FFF;
|
|
|
+ background-color: #000;
|
|
|
+ }
|
|
|
}
|
|
|
- .on-category{
|
|
|
- color: #FFF;
|
|
|
- background-color: #000;
|
|
|
+
|
|
|
+ .classify-icon {
|
|
|
+ width: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
}
|
|
|
}
|
|
|
- .classify-icon{
|
|
|
- width: 100rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
-}
|
|
|
-.goods-item{
|
|
|
- width: 48%;
|
|
|
- overflow: hidden;
|
|
|
- box-sizing: border-box;
|
|
|
- border:solid 4px #FFF;
|
|
|
- border-radius: 5px;
|
|
|
- box-shadow: 0px 3px 10px 0px rgba(213,221,232,0.5);
|
|
|
- .img{
|
|
|
- width: 100%;
|
|
|
- height: 350rpx;
|
|
|
+
|
|
|
+ .goods-item {
|
|
|
+ width: 48%;
|
|
|
overflow: hidden;
|
|
|
- background: #EEE;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: solid 4px #FFF;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 0px 3px 10px 0px rgba(213, 221, 232, 0.5);
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 100%;
|
|
|
+ height: 350rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #EEE;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ padding: 10rpx;
|
|
|
+ }
|
|
|
}
|
|
|
- .title{
|
|
|
+
|
|
|
+ .cart-bottom {
|
|
|
width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- padding: 10rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-.cart-bottom{
|
|
|
- width: 100%;
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- height: 130rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background-color: #FFF;
|
|
|
- box-shadow: 0px -4px 16px 0px rgba(0,0,0,0.15);
|
|
|
- z-index: 10800;
|
|
|
- .cart{
|
|
|
- width: calc(100% - 220rpx);
|
|
|
- border-radius: 5px;
|
|
|
- background-color: #FEEEE4;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 100%;
|
|
|
- .cart-total{
|
|
|
- padding-left: 40rpx;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 700;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ height: 130rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #FFF;
|
|
|
+ box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.15);
|
|
|
+ z-index: 10800;
|
|
|
+
|
|
|
+ .cart {
|
|
|
+ width: calc(100% - 220rpx);
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: #FEEEE4;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .cart-total {
|
|
|
+ padding-left: 40rpx;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .balance {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #FF0000;
|
|
|
+ font-size: $uni-font-size-lg;
|
|
|
+ border-radius: 5px;
|
|
|
+ color: #FFF;
|
|
|
}
|
|
|
}
|
|
|
- .balance{
|
|
|
- width: 200rpx;
|
|
|
- height: 100%;
|
|
|
- background-color: #FF0000;
|
|
|
- font-size: $uni-font-size-lg;
|
|
|
- border-radius: 5px;
|
|
|
- color: #FFF;
|
|
|
+
|
|
|
+ .classify-popup {
|
|
|
+ width: 400rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-container {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ width: 42px; // 根据u-icon的size调整
|
|
|
+ height: 42px; // 根据u-icon的size调整
|
|
|
+ }
|
|
|
+ .ictag {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 1;
|
|
|
}
|
|
|
-}
|
|
|
-.classify-popup{
|
|
|
- width: 400rpx;
|
|
|
-}
|
|
|
-</style>
|
|
|
+</style>
|
lyy@qq.com