123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238 |
- <template>
- <view class="container">
- <view class="header flex flex-y-center">
- <view :class="['item','flex','flex-center',typeActive == 1 ? 'active' : '']" @click="onTypeChange(1)">
- <view class="title">全部商品</view>
- </view>
- <view :class="['item','flex','flex-center',typeActive == 2 ? 'active' : '']" @click="onTypeChange(2)">
- <view class="title">售卖中</view>
- </view>
- <view :class="['item','flex','flex-center',typeActive == 3 ? 'active' : '']" @click="onTypeChange(3)">
- <view class="title">已下架</view>
- </view>
- <view :class="['item','flex','flex-center',typeActive == 4 ? 'active' : '']" @click="onTypeChange(4)">
- <view class="title">已售罄</view>
- </view>
- </view>
- <view class="main-block flex box-pack-between">
- <scroll-view scroll-y class="left-bar">
- <view class="item" :class="[catIndex == -1?'active':'']" @click="onCatChange(-1)">全部(500)</view>
- <view class="item" :class="[catIndex == index?'active':'']" v-for="(item,index) in 20" :key="index" @click="onCatChange(index)">美味午餐</view>
- </scroll-view>
- <scroll-view scroll-y class="right-bar">
- <view class="cat-name">美味午餐</view>
- <view class="goods-list">
- <view class="item flex" v-for="(item,index) in 15" :key="index">
- <view class="goods-img-block">
- <image src="../static/images/icon_6.png" mode="aspectFill" class="goods-img"></image>
- </view>
- <view class="info-block">
- <view class="goods-name text-1 flex flex-y-center box-pack-between arr-r">香辣鸡翅套餐</view>
- <view class="flex flex-y-center box-pack-between" style="margin-top: 16rpx;">
- <view class="stock">库存:100</view>
- <view class="choose-btn">
- <image src="../static/images/icon_19.png" mode="aspectFit" class="icon-19"></image>
- </view>
- </view>
- <view class="goods-btm flex flex-y-center box-pack-between">
- <view class="price">¥14.70</view>
- </view>
- </view>
- </view>
- </view>
-
- </scroll-view>
- </view>
- <view class="footer-bar">
- <view class="content flex flex-center">
- <view class="btn">指定商品</view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- typeActive: 1,
- catIndex:-1,//选中分类
- }
- },
- methods: {
- onTypeChange(index) {
- if (index != this.typeActive) {
- this.typeActive = index
- }
- },
- onCatChange(index){
- if(index != this.catIndex){
- this.catIndex = index
- }
- }
- }
- }
- </script>
- <style>
- @import url("../static/css/common.css");
- page {}
- .header {
- height: 96rpx;
- background-color: #fff;
- position: sticky;
- top: 0;
- z-index: 100;
- box-sizing: border-box;
- border-bottom: 8rpx solid #F4F5F7;
- }
- .header .item {
- width: 25vw;
- box-sizing: border-box;
- flex: none;
- height: 88rpx;
- position: relative;
- }
- .header .item.active .title{
- color: #247EFF;
- font-size: 32rpx;
- font-weight: 600;
- }
- .header .item.active::after {
- content: "";
- display: block;
- width: 40rpx;
- height: 4rpx;
- border-radius: 2rpx;
- background-color: #247EFF;
- position: absolute;
- bottom: 8rpx;
- left: 50%;
- transform: translateX(-50%);
- }
- .header .item .title {
- font-size: 28rpx;
- color: #666;
- }
- .main-block{
- width: 100%;
- height: calc(100vh - 96rpx - 160rpx);
- padding-bottom: constant(safe-area-inset-bottom);
- /*兼容 IOS>11.2*/
- padding-bottom: env(safe-area-inset-bottom);
- }
- .main-block .left-bar{
- width: 176rpx;
- flex:none;
- height: 100%;
- background-color: #F4F5F7;
- /*兼容 IOS<11.2*/
-
- }
- .main-block .item {
- padding:30rpx 15rpx;
- font-size: 28rpx;
- color: #666;
- font-weight: 500;
- line-height: 40rpx;
- }
- .main-block .item.active {
- color: #247EFF;
- font-weight: 600;
- background-color: #fff;
- }
- .main-block .right-bar{
- width: 574rpx;
- flex:none;
- height: 100%;
- background-color: #fff;
- box-sizing: border-box;
- padding:30rpx 0 0 25rpx ;
- position: relative;
-
- }
- .main-block .right-bar .cat-name{
- font-size: 30rpx;
- font-weight: 600;
- color: #333;
- line-height: 42rpx;
- background-color: #fff;
-
- }
- .main-block .right-bar .item{
- padding:40rpx 30rpx 40rpx 0;
- border-bottom: 1rpx solid #f5f5f5;
- }
- .main-block .right-bar .item .goods-img-block{
- flex:none;
- width: 120rpx;
- height: 120rpx;
- overflow: hidden;
- border-radius: 8rpx;
- position: relative;
- }
- .main-block .right-bar .item .goods-img-block .goods-img{
- display: block;
- width: 120rpx;
- height: 120rpx;
- }
- .main-block .right-bar .item .goods-img-block .goods-tips{
- background-color: rgba(0,0,0,0.5);
- width: 100%;
- height: 35rpx;
- position: absolute;
- left: 0;
- bottom: 0;
- color: #fff;
- line-height: 35rpx;
- text-align: center;
- font-size: 20rpx;
- }
- .main-block .right-bar .item .info-block{
- padding-left: 24rpx;
- width: 405rpx;
- box-sizing: border-box;
- }
- .main-block .right-bar .item .info-block .goods-name{
- padding-right: 15rpx;
- font-size: 30rpx;
- font-weight: 600;
- color: #333;
- line-height: 1;
- }
- .main-block .right-bar .item .arr-r::after{
- border-color: #333 #333 transparent transparent;
- }
- .main-block .right-bar .item .info-block .stock{
- font-size: 24rpx;
- color: #999;
- line-height: 1;
-
- }
- .main-block .right-bar .item .info-block .goods-btm{
- margin-top: 12rpx;
- }
- .main-block .right-bar .item .info-block .goods-btm .price{
- font-size: 30rpx;
- color: #FD3939;
- font-weight: 600;
- }
- .main-block .right-bar .item .info-block .choose-btn{
- width: 30rpx;
- height: 30rpx;
- border-radius: 50%;
- border:2rpx solid #CDCDCD;
- }
- .main-block .right-bar .item .info-block .choose-btn .icon-19{
- display: block;
- width: 100%;
- height: 100%;
- }
- </style>
|