index.wxss 4.12 KB
/* cookbook/index.wxss */
@import "../components/food-card/food-card.wxss";
.page{
  background:#4c4e4f;
}

.ptop3{
  padding-top:3px;
}
.menu-operation{
  width: 100%;
  height: 57rpx;
  padding:0 45rpx;
  padding-top: 20rpx;
  box-sizing: border-box;
}
/*菜品标签*/
.menu-ptop-mark{  width:100%;  height: 13px;  padding-top:12px;}
.menu-recommand-image{  float:left;  width:36px;  height:18px; margin-right:8rpx;}
.menu-descration-circle{
  width:10rpx;
  height:10rpx;
  border-radius:50%;
  background:#fff;
}
.menu-descration-line{
  width:65rpx;
  height:3rpx;
  background:#fff;
}
/*菜单分类*/
.menu{
  position: fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:#e14553;
  z-index:1000;
}
.menu-active{
  padding-bottom:10rpx;
  border-bottom:4rpx solid #fff;
  font-weight: bold;
}


.shopping-total{
  width:110rpx;
  height:99rpx;
  position:relative;
}
.shop-button{
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  background:transparent;
}
.show-num{
  width:36rpx;
  height:36rpx;
  position:absolute;
  right:10rpx;
  top:2rpx;
  background:#e14553;
  font-size:20rpx;
  border-radius:50%;
}
.menu-fixed{
  position:fixed;
  bottom:12px;
  left:10px;
  width:80rpx;
  height:80rpx;
  padding:5rpx;
  box-sizing:border-box;
  z-index:1001;
}
.menu-fixed-image{
  width:48rpx;
  height:48rpx;
  margin-right:4%;
}
.menu-fixed-taomei{
  width:68rpx;
  height:68rpx;
  margin-right:4%;
}
.menu-fixed-image-close{
  width:70rpx;
  height:70rpx;
}
.countTotal{
  width:48rpx;
  height:48rpx;
  background-color:#4C4E4F;
  margin-right:5px;
}
.flex-cc text{
  font-size:32rpx;
  color:#fff;
}



.masonry { display: flex; flex-direction: row; }
.section:last-child{
  margin-bottom: 60px;
}
.column { display: flex; flex-direction: column; width: 50%; max-width:50%;  }
.column-space { width: 20px; }
.column .item{width:100%; overflow: hidden; border-radius: 10rpx;}

/**
 列表模式
 */
.page-list{
  background-color: #FEFEFE;
}
.list-model{
  position: static;
}
.list-model .item{
  border-radius: 0rpx;
  border-bottom: 2rpx solid #F5F5F5;
}
.list-layout-buttom-opt{
  background-color: #353535;
  border-radius: 50%;
  width: 120rpx;
  height: 120rpx;
  min-width: 120rpx;
  margin: 0 80rpx 40rpx;
  box-shadow: 0rpx 4rpx 8rpx #353535;
}
.list-layout-buttom-opt .icon{
  width: 44rpx;
  height: 44rpx;
}


/**index.wxss**/
.skeleton .left{
  width: 180rpx;
}
.skeleton .right{
  width: 100%;
  padding-left: 20rpx;
}
.skeleton .left .left-menu{
  width: 180rpx;
  height: 160rpx;
  margin-bottom: 2rpx;
}
.skeleton .right .right-card{
  width: 100%;
  height: 300rpx;
  margin-bottom: 10rpx;
}

.bottom-view{
  position:fixed;
  bottom:0;
  width:100%;
  z-index:2000;
  height:100rpx;
  background-color: #fefefe;
  color:#353535;
  border-top: 2rpx solid #f5f5f5;
}
.bottom-view image{
  width: 100%;
  height: 100%;

}
.share{
  width: 180rpx;
  min-width: 180rpx;
  border-right: 2rpx solid #E0E0E0;
}
.share .icon{
  width: 38rpx;
  height: 34rpx;
}
.share .text{
  font-size: 20rpx;
  line-height: 28rpx;
  height: 28rpx;
  margin-top: 8rpx;
}

.cart{
  width: 100%;
}
.cart .icon{
  margin-left: 54rpx;
  width: 44rpx;
  height: 44rpx;
  position: relative;
}
.cart .icon .dot{
  position: absolute;
  top:-15rpx;
  right: -15rpx;
  background-color: #E14553;
  color:#fefefe;
  font-size: 20rpx;
  width: 30rpx;
  height: 30rpx;
  line-height: 30rpx;
  border-radius: 50%;
  text-align: center;
}
.cart .text{
  font-size: 36rpx;
  margin-left: 34rpx;
}

.place{
  width: 238rpx;
  min-width: 238rpx;
  background-color: #262628;
  color: #fefefe;
  font-size: 34rpx;
  height: 100%;
}
.class_name{
  font-size: 26rpx;
  font-weight: bold;
  height: 120rpx;
  line-height: 120rpx;
  position: relative;
  width: 100%;
  background-color: #fefefe;
}
.class_name .text{
  background-color: #fefefe;
  position: absolute;
  padding-right: 20rpx;
}
.class_name:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 2rpx;
  background-color: #F5F5F5;
}
.class_name-active{
  position: fixed;
  top:100rpx;
  z-index: 999;
  left:200rpx;
  height: 140rpx;
  line-height: 140rpx;
}