lachang-wxapp/app.wxss

/**app.wxss**/
view, button, div, button{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font: "microsoft yahei";
}
button{
  padding: 0 !important;
  margin: 0 !important;
  background: #fff !important;
  font-weight: 400 !important;
}
.flex{
  display: flex;
}
.flex-c{
  display: flex;
  align-items: center;
}
.flex-c-c{
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-c-end{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.flex-c-bet{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-bet{
  display: flex;
  justify-content: space-between;
}
.flex-column{
  display: flex;
  flex-direction: column;
}
.flex-column-bet{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.flex-column-c{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flex-column-c-c{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.flex-column-end{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.flex-wrap{
  display: flex;
  flex-wrap: wrap;
}
.space{
  white-space: nowrap;
  overflow: hidden; 
  text-overflow: ellipsis;
}
.textSpill2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.textSpill3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.icon{
  width: 48rpx;
  height: 48rpx;
}
.opacity{
  opacity: .5 !important;
}
.icon2{
  width: 72rpx;
  height: 72rpx;
}
.noDataPage{
  padding-top: 68rpx;
}
.emptyImage{
  width: 300rpx;
  height: 228rpx;
}
.emptyTitle{
  font-size: 28rpx;
  color: #5f6268;
  padding-top: 80rpx;
}
.is_bottom {
  color:#5f6268;
  font-size:26rpx;
  text-align:center;
  padding: 24rpx 0;
}
.iphone_x{
  height: 138rpx !important;
  padding-bottom: 20rpx !important;
}
/*公共搜索栏样式*/
.searchContainer{
  height: 88rpx;
}
.searchFixed{
  height: 88rpx;
  position: fixed;
  width: 100%;
  right: 0;
  top: 0;
  left: 0;
  z-index: 99;
  background: #FFFFFF;
}
.searchContent{
  flex: 1;
  height: 64rpx;
  border-radius: 40rpx;
  margin-left: 24rpx;
  padding-left: 16rpx;
  position: relative;
}
.searchContent:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  border: 2rpx solid #DF3120 !important;
  width: 100%;
  height: 100%;
  /* -webkit-transform: scale(0.5); */
  /* transform: scale(0.5); */
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-radius: 80rpx;
}
.searchContent .sIcon{
  width: 48rpx;
  height: 48rpx;
  margin-right: 8rpx;
} 
.searchContent .cInput{
  font-size: 28rpx;
  font-weight: 400;
  flex: 1;
  height: 100%;
  margin-right: 80rpx;
  position: relative;
  z-index: 99;
}
.searchContent .cClear{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  padding: 0 16rpx;
}
.searchContent .cClear .icon{
  width: 48rpx;
  height: 48rpx;
}
.searchCancel{
  width: 128rpx;
  height: 100%;
  font-size: 32rpx;
  color: #5F6268 !important;
}
/*公共价格样式*/
.price_style{
  color:#E73E2D;
  font-size: 24rpx;
}
.price_style > text{
  margin-left: 8rpx;
  font-size: 36rpx;
  font-weight: 700;
}
.defaultLogo{
  background-color: #f5f5f5;
}
.phcolor{
  font-size: 26rpx;
  color: #909297;
}

/*公共无数据样式*/
.emptyPage{
  margin-top: 240rpx;
}
.emptyPage > .image{
  width: 300rpx;
  height: 228rpx;
}
.emptyPage > .tips{
  font-size: 28rpx;
  color: #5f6268;
  margin-top: 80rpx;
}
.emptyPage > .btn{
  width: 176rpx;
  height: 72rpx;
  background: #e73e2d;
  border-radius: 48rpx;
  color: #fff;
  font-size: 28rpx;
  font-weight: 700;
  margin-top: 80rpx;
}
/*公共未登录页面样式*/
.noLogPage{
  text-align: center;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99;
  background: #FFFFFF !important;
}
.noLogPage .image{
  width: 300rpx;
  height: 226rpx;
  margin-top: 120rpx;
}
.noLogPage .tips{
  font-size: 28rpx;
  color: #5f6268;
  margin-top: 80rpx;
}
.noLogPage .toLog{
  margin: 0 !important;
  padding: 0 !important;
  margin-top: 80rpx !important;
  width: 176rpx !important;
  height: 72rpx !important;
  background: #e73e2d !important;
  border-radius: 48rpx!important;
  font-size: 28rpx !important;
  font-weight: bold !important;
  color: #ffffff !important;
}
/* 用户身份标签 */
.userTag{
  padding: 0 16rpx;
  height: 38rpx;
  line-height: 38rpx;
  background: rgba(156, 156, 156, 0.1) !important;
  border-radius: 24rpx;
  opacity: 1;
  font-size: 24rpx;
  color: #5F6268 !important;
  margin-top: 16rpx;
  display: inline-block;
}
.userTag .icon{
  width: 28rpx;
  height: 28rpx;
  margin-right: 8rpx;
  vertical-align: text-top;
  margin-top: 2rpx;
}
.userTag.boss{
  color: #D47709 !important;
  background: rgba(236, 174, 17, 0.1) !important;
}
.userTag.wner{
  color: #D4613E !important;
  background: rgba(219, 129, 101, 0.1) !important;
}
.userTag.clerk{
  color: #5B8DC5 !important;
  background: rgba(124, 164, 209, 0.1) !important;
}
.userTag.cook{
  color: #5B2C2A !important;
  background: rgba(96, 50, 48, 0.1) !important;
}
.userTag.dis{
  color: #5F6268 !important;
  background: #EFEFEF !important;
}
.userTag.dis.g{
  color: #DF3120 !important;
  background: #F5ECDF !important;
}
.userTag.dis.c{
  color: #ECA927 !important;
  background: #F8F2E6 !important;
}


/* 新版本用户身份标签 */
.newUserTag{
  padding: 0 16rpx;
  height: 38rpx;
  line-height: 38rpx;
  background: #EFEFEF !important;
  border-radius: 24rpx;
  opacity: 1;
  font-size: 24rpx;
  color: #5F6268 !important;
  display: inline-block;
  margin-right: 16rpx;
}
.newUserTag .icon{
  width: 28rpx;
  height: 28rpx;
  margin-right: 8rpx;
  vertical-align: text-top;
  margin-top: 2rpx;
}
.newUserTag.showCash{
  color: #FFFFFF !important;
  background: rgba(239, 239, 239, 0.4) !important;
}
.newUserTag.boss{
  color: #EE5F0E !important;
  background: rgba(247, 240, 225, 0.4) !important;
}
.newUserTag.wner{
  color: #E5653D !important;
  background: rgba(245, 236, 233, 0.4) !important;
}
.newUserTag.clerk{
  color: #4A9CF9 !important;
  background: rgba(235, 239, 244, 0.4) !important;
}
.newUserTag.cook{
  color: #5B2C2A !important;
  background: rgba(233, 228, 228, 0.4) !important;
}
.newUserTag.dis{
  color: #FFFFFF !important;
  background: rgba(239, 239, 239, 0.3) !important;
}
.newUserTag.dis.g{
  color: #986B28 !important;
  background: rgba(245, 236, 223, 0.4) !important;
}
.newUserTag.dis.c{
  color: #FFE146 !important;
  background: rgba(248, 242, 230, 0.4) !important;
}


/* 弹窗样式 */
.modalContainer{
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(22,23,25,.7);
}
.modalConten{
  width: 580rpx;
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  position: relative;
  padding: 32rpx 32rpx 64rpx 32rpx;
}
.closeModal{
  top: 0;
  right: 0;
  z-index: 1;
  position: absolute;
  padding: 32rpx 32rpx 16rpx 16rpx;
}
.modalTitle{
  padding-top: 48rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #161719;
}
.modalButtonBox{
    padding-top: 56rpx;
}
.modalButton{
  width: auto !important;
  height: 72rpx !important;
  background: #e73e2d !important;
  border-radius: 48rpx !important;
  padding: 0 32rpx !important;
  font-size: 28rpx !important;
  color: #ffffff !important;
}
.modalImg{
  padding-top: 80rpx;
  padding-bottom: 32rpx;
}
.modalImg image{
  width: 300rpx;
  height: 228rpx;
}

/* 底部按钮样式 */
.pageButtonBox{
  height: 164rpx;
}
.pageButtonFixed{
   position: fixed;
   height: 164rpx;
   bottom: 0;
   z-index: 99;
   right: 0;
   left: 0;
   padding: 0 32rpx;
   background: #F7F7F7 !important;
}
.pageButtonFixed.FFFFFF{
  background: #FFFFFF !important;
}
.pageButtonFixed.transparent{
  background: transparent !important;
}
.pageButtonBox.iphoneX{
   height: 204rpx;
}
.pageButtonBox.iphoneX .pageButtonFixed{
   padding-bottom: 40rpx;
   height: 204rpx;
}
.pageButtonFixed .pageButton{
   width: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
   height: 84rpx !important;
   background: #e73e2d !important;
   font-size: 32rpx !important;
   font-weight: bold !important;
   color: #ffffff !important;
   border-radius: 48rpx !important;
}
.pageButtonFixed .pageViewButton{
  flex: 1;
  height: 84rpx;
  background: #e73e2d;
  font-size: 32rpx ;
  font-weight: bold;
  color: #ffffff ;
  border-radius: 48rpx;
}

.appModal{
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(22,23,25,.7);
    padding: 0 84rpx;
}
.appModalContent{
    background: #ffffff;
    border-radius: 16rpx;
    overflow: hidden;
    position: relative;
    padding: 40rpx 32rpx;
    margin-top: 34vh;
    text-align: center;
}
.appModalTitle{
  font-size: 36rpx;
  color: #161719;
}
.appModalTisp{
  font-size: 24rpx;
  color: #5f6268;
  padding-top: 8rpx;
}
.appModalBtnBox{
  padding-top: 40rpx;
}
.appModalBtnBox .appModalBtn{
  width: 176rpx;
  height: 72rpx;
  border-radius: 48rpx;
  font-size: 28rpx;
  color: #ffffff;
  margin: 0 16rpx;
}
.appModalBtnBox .appModalBtn.cancel{
  color: #e73e2d;
  position: relative;
  width: 174rpx;
  height: 70rpx;
}
.appModalBtnBox .appModalBtn.confirm{
  background: #e73e2d;
  color: #ffffff;
}
.appModalBtnBox .appModalBtn.cancel::after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  border: 2rpx solid #e73e2d;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-radius: 96rpx;
}
.modalCustom{
  padding: 40rpx 32rpx;
}
.newModalTitle{
  font-size: 36rpx;
  color: #161719 !important;
  text-align: center;
}
.newModalTool{
  font-size: 28rpx;
  color: #5f6268;
  padding-top: 16rpx;
  text-align: center;
}
.newModalButtonBox{
   margin-top: 40rpx;
}
.newModalButtonBox .mButton{
  width: 176rpx;
  height: 72rpx;
  background: #e73e2d;
  border-radius: 48rpx;
  font-size: 28rpx;
  color: #ffffff !important;
  margin: 0 16rpx;
}
.newModalButtonBox .mButton.border{
  position: relative;
  color: #e73e2d !important;
  height: 68rpx;
  background: transparent;
}
.newModalButtonBox .mButton.border::after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  border: 2rpx solid #e73e2d !important;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-radius: 96rpx;
}
.memberPriceBox{
  height: 38rpx;
  background: #FFE8C6 !important;
  border-radius: 8rpx;
  overflow: hidden;
  margin-top: 8rpx;
  padding-left: 8rpx;
}
.memberPriceBox .price{
  font-size: 22rpx;
  color: #333333 !important;
  font-weight: bold;
  margin-right: 4rpx;
}
.memberPriceBox .price .pr{
  font-size: 24rpx;
  margin-left: 4rpx;
  font-weight: bold;
}
.memberPriceBox .icon{
  height: 38rpx;
  width: 36rpx;
}
/* @import 'app-wxa-auto-dark.wxss' */