/**index.wxss**/ .wrap{ height: 100vh; } .store_wrap{ width: 750rpx; height: 150rpx; padding: 0 30rpx; border-bottom: 1rpx solid rgba(0,0,0,.15); display: flex; align-items: center; justify-content: space-between; } .store_wrap .store_l{ display: flex; align-items: center; } .store_wrap .store_l .logo_wrap{ width: 98rpx; height: 98rpx; background: #F6F6F6; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .store_wrap .store_l .logo{ /* width: 98rpx; */ height: 70rpx; } .store_wrap .store_t_info{ padding-left: 30rpx; display: flex; align-items: center; } .store_wrap .store_t_info_t{ display: flex; align-items: center; /* justify-content: space-around; */ width: 320rpx; } .store_wrap .store_t_info .name{ /* width: 100%; */ font-size: 30rpx; color: #080808; padding-right: 40rpx; flex: 1; } .store_wrap .icon_phone{ width: 32rpx; height: 32rpx; } .store_wrap .store_t_info .desc{ font-size: 26rpx; color: rgba(51,51,51,.54); } .store_wrap .store_r{ width: 180rpx; height: 60rpx; background: #F6F6F6; border-radius: 30rpx; display: flex; align-items: center; justify-content: center; position: relative; } .store_wrap .store_r .wenzi{ width: 90rpx; height: 50rpx; flex: 1; display: flex; align-items: center; justify-content: center; font-size: 26rpx; color: rgba(51,51,51,.54); background: #F6F6F6; border-radius: 30rpx; } .store_wrap .store_r .wenzi.active{ background: #295C56; color: #FFFFFF; } .heji_wrap{ width: 750rpx; height: 100rpx; background-repeat: no-repeat; background-size: 100% 100%; position: fixed; bottom: 0; left: 0rpx; display: flex; align-items: center; justify-content: space-between; z-index: 3; background: #F8F8F8; box-shadow: 0rpx -5rpx 10rpx 0rpx rgba(161, 161, 161, 0.09); } .heji_wrap .heji_l{ /* width: 470rpx; */ display: flex; align-items: center; padding-left: 30rpx; } .heji_wrap .total_price{ padding-left: 40rpx; font-size: 38rpx; color: #000000; } .heji_wrap .total_price .unit{ font-size: 26rpx; } .heji_wrap .heji_r{ /* flex: 1; */ margin-left: 58rpx; } .heji_wrap .heji_btn{ width: 198rpx; height: 100rpx; color: #FFFFFF; background: #295C56; display: flex; align-items: center; justify-content: center; } /* 商品 */ .goods_wrap{ width: 100%; display: flex; } .goods_wrap_l{ width: 176rpx; background: #F6F6F6; } .goods_wrap_l .cate_item{ padding-left: 30rpx; height: 98rpx; /* line-height: 98rpx; */ font-size: 28rpx; color: rgba(8,8,8,.54); display: flex; align-items: center; } .goods_wrap_l .cate_item.active{ background: #295C56; color: #FFFFFF; border-radius: 0 10rpx 10rpx 0; } .goods_wrap_r{ width: 574rpx; flex: 1; padding: 30rpx 30rpx 30rpx 15rpx; padding-top: 0; } .goods_wrap_r .goods_ad{ width: 544rpx; height: 265rpx; border-radius: 5rpx; } .goods_list_w .cate_name{ font-size: 28rpx; color: rgba(8,8,8,.54); padding-top: 26rpx; } /* 步进器 */ .stepper .step_input { /* height: 24rpx; */ height: 42rpx; line-height: 24rpx; padding-top: 0; font-size: 26rpx; color: rgba(0, 0, 0, 1); background: none; } .stepper .plus,.stepper .minus{ border-radius: 50%; overflow: hidden; vertical-align: bottom; width: 42rpx; height: 42rpx; } /* .stepper .plus{ color: #333333; border: 1px solid #FFD102; background: #FFD102; } .stepper .minus{ border: 1px solid #FFD102; color: rgba(0, 0, 0, 1); background: #fff; } */ /* 规格 */ .guige_wrap{ width: 670rpx; border-radius: 10rpx; margin: 0 auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 5; } .guige{ width: 670rpx; padding-bottom: 38rpx; background: #FFFFFF; } .guige .goods_thumb_wrap{ width: 670rpx; height: auto; position: relative; } .guige .goods_thumb_wrap .line{ width: 670rpx; height: 30rpx; position: absolute; bottom: 0; left: 0; background-repeat: repeat-x; background-size: 18rpx 30rpx; } .guige .goods_thumb{ width: 670rpx; /* width: 500rpx; */ height: auto; display: block; margin: 0 auto; } .guige .goods_name{ padding: 20rpx 30rpx 0; font-size: 30rpx; color: #080808; display: flex; align-items: center; justify-content: space-between; } .guige .goods_labels{ padding: 0 30rpx; font-size: 24rpx; color: rgba(8,8,8,.54); display: flex; flex-wrap: wrap; } .guige .goods_labels .label{ padding: 6rpx; background: #F6F6F6; margin: 10rpx 14rpx 0 0; } .guige .goods_desc{ padding: 10rpx 30rpx 0; } .guige .goods_desc .goods_desc_name{ font-size: 26rpx; color: rgba(51,51,51,.54); } .guige .goods_desc .goods_desc_nr{ /* padding-top: 20rpx; */ font-size: 24rpx; color: rgba(8,8,8,.54); } .guige .goods_guige{ padding: 20rpx 30rpx 0; } .guige .goods_guige .goods_guige_name{ font-size: 26rpx; color: rgba(51,51,51,.54); } .guige .goods_guige .goods_guige_nr{ display: flex; flex-wrap: wrap; } .guige .guige_item{ height: 59rpx; font-size: 24rpx; color: #333333; background: #FFFFFF; border: 1rpx solid rgba(0, 0, 0, .12); border-radius: 5rpx; display: flex; align-items: center; margin: 20rpx 20rpx 0 0; } .guige .guige_item:last-child{ margin-right: 0; } .guige .guige_item .item_wenzi{ display: flex; } .guige .guige_item .item_wenzi text{ padding: 0 16rpx 0 12rpx; display: flex; align-items: center; } .guige .guige_item .item_wenzi text:not(:last-child)::after{ content: ""; display: block; width: 2rpx; height: 16rpx; background: rgba(0, 0, 0, .12); margin-left: 16rpx; } .guige .guige_item .price{ padding: 0 18rpx; font-size: 28rpx; border-left: 1rpx solid rgba(0, 0, 0, .12); } .guige .guige_item .price .unit{ font-size: 20rpx; } .guige .guige_item.selected{ background: #FFFBF0; border-color: #ED8C17; color: #ED8C17; } /* .guige .guige_item.selected .item_wenzi text:not(:last-child)::after{ background: #D54C43; } */ .guige .guige_item.selected .price{ color: #EA4335; border-left-color: #ED8C17; } .guige .guige_selected{ margin-top: 20rpx; height: 60rpx; background: #FAFAFA; border: 1rpx solid rgba(0, 0, 0, .05); border-left: 0 none; border-right: 0 none; padding: 0rpx 30rpx; display: flex; align-items: center; font-size: 26rpx; color: #000000; } .guige .guige_selected .label{ color: rgba(0,0,0,.54); } .guige .guige_b{ margin-top: 30rpx; padding: 0 30rpx; display: flex; align-items: center; justify-content: space-between; } .guige .guige_b .guige_b_l{ font-size: 26rpx; color: #000000; } .guige .guige_b .price{ font-size: 38rpx; color: #EA4335; padding-left: 10rpx; } .guige .guige_b .price .unit{ font-size: 22rpx; } .guige .guige_b .item{ font-size: 24rpx; color: rgba(0, 0, 0, .54); } .guige .guige_b .guige_b_r{ width: 350rpx; height: 90rpx; background: #D54C43; border-radius: 45rpx; font-size: 34rpx; color: #FFFFFF; display: flex; align-items: center; justify-content: center; } .guige_wrap .btn_close{ width: 100%; } .guige_wrap .btn_close .van-icon{ /* width: 56rpx; height: 56rpx; */ display: block; margin: 36rpx auto; } /* 购物车 */ .shopcar_wrap{ width: 750rpx; padding: 0 0 130rpx; border-radius: 20rpx 20rpx 0rpx 0rpx; background: #FFFFFF; position: fixed; bottom: 0; left: 0; z-index: 2; } /* .shopcar_wrap::after{ content: ""; display: block; width: 0; height: 0; border: 16rpx solid transparent; border-bottom-color: #FFFFFF; position: absolute; top: -30rpx; left: 60rpx; } */ .shopcar .shopcar_t{ padding: 0 30rpx; display: flex; align-items: center; justify-content: space-between; padding-top: 25rpx; font-size: 26rpx; color: #080808; } .shopcar .shopcar_t .shopcar_t_r{ display: flex; align-items: center; font-size: 24rpx; color: rgba(8,8,8,.54); } .shopcar .shopcar_t .icon_empty{ width: 21rpx; height: 23rpx; margin-right: 6rpx; } .shopcar .goods_scroll{ height: 560rpx; } .shopcar .goods_list{ padding: 0 30rpx; } .shopcar .goods_list .goods_item .goods_tu{ width: 138rpx; height: 138rpx; } .shopcar .goods_list .goods_item .goods_info{ min-height: 160rpx; display: flex; flex-direction: column; justify-content: space-between; } /* 购物车按钮 */ .cart_w{ /* position: fixed; left: 40rpx; z-index: 4; */ position: relative; } .cart_w .cart_tu{ width: 120rpx; height: 122rpx; margin-top: -30rpx; } .cart_w .goods_num{ min-width: 34rpx; height: 34rpx; border-radius: 50%; background: #FFD102; display: flex; align-items: center; justify-content: center; position: absolute; top: -28rpx; right: 16rpx; font-size: 24rpx; font-weight: bold; color: #000000; } /* 外卖 */ .store_wrap .store_l.takeout{ display: block; width: 450rpx; } .store_wrap .takeout .user_address{ display: flex; align-items: center; font-size: 30rpx; } .store_wrap .takeout .store_t_info{ padding-left: 0; display: flex; align-items: center; font-size: 28rpx; color: rgba(51,51,51,.87); } .store_wrap .takeout .store_t_info .wenzi{ color: rgba(51,51,51,.54); padding-right: 10rpx; } .store_wrap .takeout .store_t_info .name{ padding-right: 4rpx; } .store_t_info .icon_change{ width: 25rpx; height: 19rpx; margin-left: 10rpx; } /* 配送方式 */ .fare_w{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #FFFFFF; font-size: 36rpx; text-align: center; } .fare_w .type{ display: flex; position: relative; margin: 40rpx 0; } .fare_w .type .type_item{ width: 257rpx; height: 210rpx; color: #333333; padding: 30rpx 0 0 30rpx; text-align: left; } .fare_w .type .type_item.waimai{ position: absolute; top: 0; left: 0; } .fare_w .type .type_item.ziqu{ position: absolute; top: 0; right: 0; } .fare_w .type_bg{ width: 602rpx; height: 212rpx; } /* 二级分类 */ .erji_cate{ display: flex; align-items: center; font-size: 28rpx; color: rgba(8,8,8,.54); /* position: fixed; top: 0; */ background: #ffffff; z-index: 16; width: 100%; height: 80rpx; } .erji_cate .cate_item{ padding: 4rpx; background: #F6F6F6; margin-left: 20rpx; } .erji_cate .cate_item.active{ background: #295C56; color: #FFFFFF; } /* 会员价 */ .goods_list .goods_item .goods_specs .price .vip{ /* position: relative; width: 57rpx; */ /* height: 20rpx; */ /* padding: 2rpx; */ /* line-height: 20rpx; */ /* background: #FFD102; color: #333333; font-size: 18rpx; text-align: center; display: inline-block; margin-left: 4rpx; */ padding: 4rpx 10rpx; font-size: 20rpx; /* font-weight: bold; */ background: #FFFFFF; border: 1px solid #F1A223; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #F1A223; } .guige .guige_b .guige_b_l .vip{ padding-left: 8rpx; } /* .guige .guige_item .price .vip{ font-size: 18rpx; padding-left: 4rpx; } .guige .guige_b .price .vip{ font-size: 18rpx; padding-left: 4rpx; }*/ .heji_wrap .total_price .vip{ padding-left: 8rpx; } /* 规格加总数 */ .topNum_w{ position: relative; } .topNum_w .topNum{ position: absolute; top: -20rpx; right: -8rpx; min-width: 34rpx; height: 34rpx; background: #F1A223; font-size: 24rpx; color: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* 未营业 */ .heji_wrap .heji_btn.un_open{ background: rgba(0,0,0,.2); } /* 不参与活动的提示 */ .use_coupon{ width: 100%; padding: 12rpx 14rpx; background: #F6F6F6; border-radius: 5rpx; font-size: 24rpx; color: rgba(8,8,8,.54); }