jzmall_wx/pages/ucenter/orderDetail/orderDetail.wxss

.order-info {
    padding-top: 25rpx;
    background: #fff;
    height: auto;
    overflow: hidden;
  }
  
  .item {
    padding-left: 30rpx;
    /* height: 42.5rpx; */
    /* padding-bottom: 12.5rpx; */
    line-height: 52rpx;
    font-size: 30rpx;
    color: #333;
  }
  
  .item-c {
    margin-left: 31.25rpx;
    border-top: 1px solid #f4f4f4;
    height: 103rpx;
    line-height: 103rpx;
  }
  
  .item-c .l {
    float: left;
  }
  
  .item-c .r {
    height: 103rpx;
    float: right;
    display: flex;
    align-items: center;
    padding-right: 16rpx;
  }
  
  .item-c .r .btn {
    float: right;
  }
  
  .item-c .cost {
    color: #b4282d;
  }
  
  .item-c .btn {
    line-height: 66rpx;
    border-radius: 5rpx;
    text-align: center;
    margin: 0 15rpx;
    padding: 0 20rpx;
    height: 66rpx;
  }
  
  .item-c .btn.active {
    background: #b4282d;
    color: #fff;
  }
  
  .order-goods {
    margin-top: 20rpx;
    background: #fff;
  }
  
  .order-goods .h {
    height: 93.75rpx;
    line-height: 93.75rpx;
    margin-left: 31.25rpx;
    border-bottom: 1px solid #f4f4f4;
    padding-right: 31.25rpx;
  }
  
  .order-goods .h .label {
    float: left;
    font-size: 30rpx;
    color: #333;
  }
  
  .order-goods .h .status {
    float: right;
    font-size: 30rpx;
    color: #b4282d;
  }
  
  .order-goods .item {
    display: flex;
    align-items: center;
    height: 190rpx;
    padding-right: 30rpx;
    border-bottom: 1px solid #f4f4f4;
    margin:20rpx 0;
  }
  
  .order-goods .item:last-child {
    border-bottom: none;
  }
  
  .order-goods .item .img {
    height: 190rpx;
    width: 190rpx;
    background: #f4f4f4;
  }
  
  .order-goods .item .img image {
    height: 190rpx;
    width: 190rpx;
    border-radius: 10rpx;
  }
  
  .order-goods .item .info {
    flex: 1;
    height: 190rpx;
    margin-left: 20rpx;
  }
  
  .order-goods .item .t {
    margin-top: 8rpx;
    line-height: 34rpx;
    margin-bottom: 10rpx;
    display: flex;
    justify-content: space-between;
  }
  
  .order-goods .item .t .name {
   
    color: #333;
    font-size: 30rpx;
  }
  
  .order-goods .item .t .number {
   
    height: 34rpx;
    text-align: right;
    line-height: 34rpx;
    color: #666;
    font-size: 28rpx;
  }
  
  .order-goods .item .attr {
    height: 29rpx;
    line-height: 29rpx;
    margin-top: 10rpx;
    color: #666;
    margin-top: 10rpx;
    font-size: 25rpx;
  }
  
  .order-goods .item .price {
    display: block;
    float: left;
    height: 30rpx;
    line-height: 30rpx;
    color: #333;
    font-size: 28rpx;
    margin-top:16rpx
  }
  
  .order-goods .item .btn {
    height: 50rpx;
    line-height: 50rpx;
    border-radius: 5rpx;
    text-align: center;
    display: block;
    float: right;
    margin: 0 15rpx;
    padding: 0 20rpx;
  }
  
  .order-goods .item .btn.active {
    background: #b4282d;
    color: #fff;
  }
  
  .order-bottom1 {
    margin-top: 20rpx;
    padding-left: 31.25rpx;
    height: auto;
    overflow: hidden;
    background: #fff;
  }
  
  .order-bottom .address {
    /* height: 128rpx; */
    padding-top: 25rpx;
    border-top: 1px solid #f4f4f4;
    border-bottom: 1px solid #f4f4f4;
  }
  
  .order-bottom .address .t {
    height: 35rpx;
    line-height: 35rpx;
    margin-bottom: 20rpx;
  }
  
  .order-bottom .address .name {
    display: inline-block;
    height: 35rpx;
    /* width: 140rpx; */
    line-height: 35rpx;
    font-size: 30rpx;
    margin-right:40rpx;
  }
  
  .order-bottom .address .mobile {
    display: inline-block;
    height: 35rpx;
    line-height: 35rpx;
    font-size: 30rpx;
  }
  
  .order-bottom .address .b {
    /* height: 35rpx; */
    line-height: 40rpx;
    font-size: 28rpx;
    padding-right:30rpx;
    text-align: justify;
  }
  
  .order-bottom .total {
    height: 130rpx;
    padding-top: 20rpx;
    border-bottom: 1px solid #f4f4f4;
  }
  
  .order-bottom .total .t {
    height: 44rpx;
    line-height: 44rpx;
    margin-bottom: 10rpx;
    display: flex;
  }
  
  .order-bottom .total .label {
    width: 150rpx;
    display: inline-block;
    height: 35rpx;
    line-height: 35rpx;
    font-size: 30rpx;
  }
  
  .order-bottom .total .txt {
    flex: 1;
    display: inline-block;
    height: 35rpx;
    line-height: 35rpx;
    font-size: 30rpx;
  }
  
  .order-bottom .pay-fee {
    height: 81rpx;
    line-height: 81rpx;
  }
  
  .order-bottom .pay-fee .label {
    display: inline-block;
    width: 140rpx;
    color: #b4282d;
  }
  
  .order-bottom .pay-fee .txt {
    display: inline-block;
    width: 140rpx;
    color: #b4282d;
  }
  
  .order-express {
    margin-top: 20rpx;
    width: 100%;
    height: 100rpx;
    background: #fff;
  }
  
  .order-express .title {
    float: left;
    margin-bottom: 20rpx;
    padding: 10rpx;
  }
  
  .order-express .ti {
    float: right;
    width: 52rpx;
    height: 52rpx;
    margin-right: 16rpx;
    margin-top: 28rpx;
  }
  
  .order-express .t {
    font-size: 29rpx;
    margin-left: 10.25rpx;
    color: #a78845;
  }
  
  .order-express .b {
    font-size: 29rpx;
    margin-left: 10.25rpx;
    color: #a78845;
  }
  
  .order-express .traces {
    padding: 17.5rpx;
    background: #fff;
    border-bottom: 1rpx solid #f1e6cdcc;
  }
  
  .order-express .trace {
    padding-bottom: 17.5rpx;
    padding-top: 17.5rpx;
    background: #fff;
  }
  
  .order-express .acceptTime {
    margin-top: 20rpx;
    margin-right: 40rpx;
    text-align: right;
    font-size: 26rpx;
  }
  
  .order-express .acceptStation {
    font-size: 26rpx;
  }
  /* 订单详情顶部 */
  .order-main-top{
    height:200rpx;
    background:url('https://mall.zhaijieshi.cc/file/jzmall/weixin/order-detail-bg.png') no-repeat center;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin:0 0 20rpx;
    padding:0 24rpx;
  }
  .order-main-top view,.order-main-top text{
    color:#fff;
    font-size: 28rpx;
  }
  .order-main-top .order-detail-status{
    font-size: 40rpx;
    font-weight: bold;
    margin-bottom:20rpx;
  }
  .order-main-right{
    text-align: right;
  }
  .order-main-right .view-service{
    width:148rpx;
    height: 44rpx;
    line-height: 44rpx;
    border-radius:44rpx;
    border:1rpx solid #fff;
    text-align:center;
    margin:10rpx 0 0;
  }
  .order-main-right .current-times{
    font-size: 40rpx;
    font-weight: bold;
  }
  
  
  
  
  
  
  
  page {
    height: 100%;
    width: 100%;
    background: #f4f4f4;
  }
  .container{
    padding:24rpx 24rpx 180rpx;
  }
  /* 未支付订单 */
  .not-pay-module{
    padding:28rpx 0 48rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  
  }
  .not-pay-module .pay-amount{
    height: 50rpx;
   
    display: flex;
    align-items: center;
  }
  .not-pay-module .pay-amount image{
    width:40rpx;
    height: 40rpx;
    margin-right:12rpx;
  }
  .not-pay-module .pay-amount{
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
  }
  .not-pay-module .pay-amount text{
    color: #FF0000;
  }
  .not-pay-module .over-time{
    height: 36rpx;
  font-size: 26rpx;
  color: #333;
  margin:26rpx 0 44rpx;
  }
  .not-pay-module .pay-now{
    width: 160rpx;
    height: 56rpx;
    line-height: 56rpx;
    background: linear-gradient(90deg, #FF9C49 0%, #FF8219 100%);
    border-radius: 28rpx;
    color: #F9F4F5;
    font-size: 24rpx;
    text-align: center;
  }
  /* 卡片 */
  .top-card{
    width:702rpx;
    height:224rpx;
    background: url('https://mall.zhaijieshi.cc/file/jzmall-dy/order-card-bg.png') no-repeat center;
    background-size: 100% 100%;
    padding:20rpx 30rpx 24rpx;
    color:#fff;
    position: relative;
  }
  .top-name-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44rpx;
    overflow: hidden;
  }
  .top-name{
    height: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 44rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  }
  .top-sku-name{
    font-size: 24rpx;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex:1;
  }
  .top-times{
    margin:12rpx 0 54rpx;
    display: flex;
    height: 42rpx;
    align-items: center;
  }
  .top-times view{
    font-size: 24rpx;
    font-weight: bold;
  }
  .top-times view.serviced-times{
  
    margin-left:20rpx;
  }
  .top-times view text{
    font-size: 30rpx;
  }
  .top-tips{
    height: 28rpx;
    line-height: 28rpx;
    font-size: 20rpx;
  }
  .appoint-tag{
    position: absolute;
    top:136rpx;
    right:0;
    width: 196rpx;
  height: 64rpx;
  line-height: 64rpx;
  background: linear-gradient(316deg, #FFFFFF 0%, rgba(255,255,255,0.8) 100%);
  border-radius: 32rpx 0rpx 0rpx 32rpx;
  color: #FF8219;
  font-size: 24rpx;
  text-align: center;
  font-weight: bold;
  }
  /* 退款工单 */
  .refund-order-module{
    margin-top:24rpx;
    width:702rpx;
    background: #fff;
    border-radius:24rpx;
    padding:0 24rpx;
  }
  .refund-title{
    height: 80rpx;
    display: flex;
    align-items: center;
  
    border-bottom: 2rpx solid #E0E0E0;
  }
  .refund-title .title-text{
    color: #191919;
    font-size: 30rpx;
    font-weight: bold;
  }
  .refund-title .title-order{
   flex:1;
   color: #666666;
   font-size: 24rpx;
   margin:0 10rpx;
  }
  .refund-title .title-status{
    color: #FCC17C;
    font-size:26rpx ;
  }
  .refund-main{
    padding:12rpx 0;
  }
  .refund-main .row{
    height: 56rpx;
    line-height: 56rpx;
    display: flex;
    color: rgba(0,0,0,0.9);
    font-size: 26rpx;
    font-weight: bold;
  }
  .refund-main .row text{
    color: #666666;
    font-weight: normal;
  }
  .refuse-remark-wrapper{
    padding: 24rpx 0;
    border-top: 2rpx solid #E0E0E0;
  }
  .refund-order-module .refuse-remark{
    width: 652rpx;
  height: 56rpx;
  line-height: 56rpx;
  background: #EBEBEB;
  border-radius: 16rpx;
  color: #000000;
  padding:0 16rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  }
  .refund-order-module .refuse-remark text{
    color: #FE2B54;
    font-weight: bold;
  }
  .refund-operate{
    padding:24rpx 0;
    border-top: 2rpx solid #E0E0E0;
    display: flex;
    justify-content: flex-end;
  }
  .refund-operate view{
    width: 160rpx;
  height: 56rpx;
  line-height: 56rpx;
  border-radius: 28rpx;
  border: 2rpx solid #D8D8D8;
  text-align: center;
  color: #666666;
  font-size: 24rpx;
  }
  
  /* 工单列表 */
  .service-item{
    margin-top:24rpx;
    background: #FFFFFF;
  border-radius: 24rpx;
  width:702rpx;
  padding:0 24rpx;
  }
  .service-item .service-title{
    height:80rpx;
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid #E0E0E0;
  }
  .service-title .sercive-name{
    color: #191919;
    font-size: 30rpx;
    font-weight: bold;
  }
  .service-title .service-id{
    color: #666666;
    font-size: 24rpx;
    margin:0 12rpx;
    flex:1;
  }
  .service-title .service-status{
    color: #008DFF;
    font-size: 26rpx;
  }
  .service-main{
    padding:12rpx 0 16rpx;
  }
  .customer-info{
    display: flex;
    align-items: center;
  }
  .customer-info image{
    width:48rpx;
    height:48rpx;
    margin-right:24rpx;
  
  }
  .customer-info .customer-main{
    display: flex;
    padding:18rpx 0 4rpx;
    flex-direction: column;
    flex:1;
  }
  .main-line{
    display: flex;
    height:44rpx;
    margin-bottom:4rpx;
    align-items: center;
  }
  .main-line view{
    color: #333333;
    font-size: 32rpx;
  }
  .main-line view.phone{
    color: #999999;
    font-size: 24rpx;
    margin-left:14rpx;
  }
  .customer-info .customer-address{
    color: #666666;
  line-height: 40rpx;
  }
  .service-main .row{
    /* height: 56rpx;
    line-height: 56rpx; */
    display: flex;
    color: rgba(0,0,0,0.9);
    font-size: 26rpx;
    font-weight: bold;
    align-items: center;
    margin: 10rpx 0;
  }
  .service-main .row text{
    color: #666666;
    font-weight: normal;
    /* white-space: nowrap; */
  }
  .service-remark-wrapper{
    padding: 24rpx 0;
    border-top: 2rpx solid #E0E0E0;
  }
  .service-store{
    height:36rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .service-store>view{
    display: flex;
    height: 36rpx;
    align-items: center;
  }
  .store-left image{
    width:36rpx;
    height:36rpx;
    margin-right:16rpx;
  }
  .store-left view{
    color: rgba(0,0,0,0.9);
    font-size: 26rpx;
    font-weight: bold;
  }
  .store-right view{
    color: #666666;
    font-size: 24rpx;
  }
  .store-right image{
    width:24rpx;
    height:24rpx;
    margin-left:16rpx;
  }
  .service-remark-wrapper .service-remark{
    width: 652rpx;
  /* height: 56rpx; */
  line-height: 44rpx;
  background: #EBEBEB;
  border-radius: 16rpx;
  color: #000000;
  padding:8rpx 16rpx;
  /* white-space: nowrap;
  text-overflow: ellipsis;*/
  display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
  margin-top:20rpx;
  }
  .service-remark text{
    color: #FE2B54;
    font-weight: bold;
  }
  .service-operate{
    padding:24rpx 0;
    border-top: 2rpx solid #E0E0E0;
    display: flex;
    justify-content: flex-end;
  }
  .service-operate view{
    width: 160rpx;
  height: 56rpx;
  line-height: 56rpx;
  border-radius: 28rpx;
  text-align: center;
  color: #F9F4F5;
  font-size: 24rpx;
  background: linear-gradient(90deg, #00BAFF 0%, #008DFF 100%);
  margin-left:28rpx;
  }
  
  /* 产品订单信息 */
  .product-block { 
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 24rpx;
    margin: 24rpx 0;
  }
  
  .product-block .title {
    height: 88rpx;
    line-height: 78rpx;
  }
  
  .profuct-info {
    height: 190rpx;
    display: flex;
    align-items: flex-start;
  }
  
  .product-img {
    width: 190rpx;
    height: 190rpx;
    border-radius: 10rpx;
    margin-right:20rpx;
  }
  
  .info-right {
    /* padding-top: 10rpx; */
    flex:1;
  }
  .info-main{
    display: flex;
    height: 40rpx;
    align-items: center;
    justify-content: space-between;
    /* margin-bottom: 58rpx; */
  }
  .info-right .sku-name{
    color: #666666;
    font-size: 24rpx;
    margin:10rpx 0;
    height: 34rpx;
    line-height: 34rpx;
    display: flex;
    justify-content: space-between;
  }
  .product-name {
    line-height: 40rpx;
    font-size: 28rpx;
    /* padding-left: 20rpx;
    text-indent: -16rpx; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 328rpx;
    font-weight: bold;
    color: rgba(0,0,0,0.9);
  }
  .info-main .price{
    color: rgba(0,0,0,0.9);
    font-size: 18rpx;
    font-weight: bold;
  }
  
  .info-right .other-info {
    font-size: 24rpx;
    color: rgba(0,0,0,0.9);
    line-height: 34rpx;
  }
  .order-info{
    background: #FFFFFF;
  border-radius: 24rpx;
  padding:20rpx 24rpx;
  }
  .order-info .order-top{
    display: flex;
    align-items: center;
    height: 36rpx;
    margin-bottom:6rpx;
  }
  .order-top view{
    font-size: 26rpx;
    color: #333;
  }
  .order-top view.topic{
    color:#666;
    margin-right:16rpx;
  }
  .order-top .copy-img{
    width:24rpx;
    height:24rpx;
    margin-left:20rpx;
  }
  .order-bottom{
    border-top: 2rpx solid #E0E0E0;
    margin-top:14rpx;
    padding-top:16rpx;
  }
  .order-price,.coupon-price{
    display: flex;
    align-items: center;
    height: 36rpx;
    margin-bottom:6rpx;
    justify-content: space-between;
  }
  .order-price view,.coupon-price view{
    font-size: 26rpx;
    color: rgba(0,0,0,0.9);
    font-weight: bold;
  }
  .order-price view.topic,.coupon-price view.topic{
    color:#666;
    margin-right:16rpx;
    font-weight: normal;
  }
  .order-bottom .real-price{
    display: flex;
    align-items: center;
    height: 36rpx;
    justify-content: flex-end;
    font-size: 26rpx;
    font-weight: bold;
  }
  .order-bottom .real-price text{
    color:#FF004E;
    font-size: 26rpx;
  }
  /* 客户服务 */
  .customer-service{
    background: #FFFFFF;
  border-radius: 24rpx;
  padding:0 24rpx;
  margin-top:36rpx;
  
  }
  .customer-service .title{
    height: 52rpx;
    line-height: 52rpx;
    color: #191919;
    font-size: 30rpx;
    font-weight: bold;
  }
  .contact-store{
  
  border-bottom: 2rpx solid #E0E0E0;
  }
  .contact-store,.contact-company{
    height: 92rpx;
    display: flex;
    align-items: center;
  }
  .contact-company{
    position: relative;
  }
  
  .customer-service image{
    width:24rpx;
    height:24rpx;
  }
  .customer-service .topic{
    color: rgba(0,0,0,0.9);
    font-size: 26rpx;
  }
  .customer-service .remark{
    flex:1;
    color: #666666;
    font-size: 20rpx;
    margin-left:14rpx;
    padding-top:4rpx;
  }
  .contact-btn {
    height: 40rpx;
    width: 40rpx;
    position: absolute;
    top: 26;
    bottom: 26;
    right: 0;
    z-index: 99;
    opacity: 0;
  }
  /* 底部按钮 */
  .fixed-bottom{
    position: fixed;
    bottom:0;
    left:0;
    right:0;
    padding:14rpx 24rpx 24rpx; 
    background: #fff;
  
  }
  .order-operate-wrapper{
    /* height: 80rpx; */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex:1;
    flex-wrap: wrap;
    /* border-top: 2rpx solid #E0E0E0; */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .order-operate-wrapper>view{
    text-align: center;
    font-size: 24rpx;
    color: #fff;
    margin-left:20rpx;
    width: 160rpx;
  height: 56rpx;
  line-height: 56rpx;
  background: linear-gradient(90deg, #FF9C49 0%, #FF8219 100%);
  border-radius: 56rpx;
  margin-top:10rpx;
  }
  .order-operate-wrapper>view.del{
    border: 2rpx solid #D8D8D8;
    color: #666666;
    background: #fff;
  }
  .order-operate-wrapper>view.appoint{
    background: linear-gradient(90deg, #00BAFF 0%, #008DFF 100%);
  }
  .order-operate-wrapper view.eval-btn{
    border: 2rpx solid #FF8219;
    color: #FF8219;
    background: #fff;
   }
   .refund-tips-bar{
     height: 34rpx;
     margin-top:30rpx;
     display: flex;
     align-items: center;
   }
   .refund-tips-bar image{
     width:40rpx;
     height: 40rpx;
     margin-right:4rpx;
   }
   .refund-tips-bar view{
     font-size: 24rpx;
     margin-right:16rpx;
     color:#666;
   }
   /* 投诉建议弹框 */
  .goods-info-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .goods-info-popup {
    width: 622rpx;
    border-radius: 24rpx;
    background: #fff;
    overflow: hidden;
  }
  
  .popup-title {
    height: 94rpx;
    line-height: 94rpx;
    text-align: center;
    color: #FFFFFF;
    font-size: 34rpx;
    background: url('https://mall.zhaijieshi.cc/file/jzmall-dy/verify-dy-title.png') no-repeat center center;
    background-size: 100% 100%;
    background-color: #008DFF;
  }
  
  .tips-title {
    /* height: 180rpx; */
    line-height: 40rpx;
    padding: 34rpx 32rpx;
    font-weight: 600;
    color: #191919;
    font-size: 28rpx;
  }
  
  .goods-info-popup .goods {
    display: flex;
    padding: 24rpx 20rpx 22rpx 22rpx;
  }
  
  .goods .img image {
    height: 168rpx;
    width: 168rpx;
    overflow: hidden;
    border-radius: 8rpx;
  
  }
  
  .goods .info {
    height: 168rpx;
    flex: 1;
    padding-left: 18rpx;
  }
  
  .info-main {
    display: flex;
    height: 40rpx;
    align-items: center;
    justify-content: space-between;
  
  }
  
  .info .sku-name {
    color: #666666;
    font-size: 24rpx;
    margin: 12rpx 0;
    height: 34rpx;
    line-height: 34rpx;
  }
  
  .product-name {
    line-height: 40rpx;
    font-size: 28rpx;
    /* padding-left: 20rpx;
    text-indent: -16rpx; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 310rpx;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.9);
  }
  
  .info-main .price {
    color: rgba(0, 0, 0, 0.9);
    font-size: 24rpx;
    font-weight: bold;
  }
  
  .info .other-info {
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.9);
    line-height: 34rpx;
  }
  
  
  
  .popup-bottom {
    height: 106rpx;
    padding: 14rpx 104rpx 34rpx;
    display: flex;
    justify-content: space-between;
  }
  
  .btn-cancel {
    height: 58rpx;
    line-height: 58rpx;
    border-radius: 58rpx;
    width: 162rpx;
    text-align: center;
    color: #0091FF;
    font-size: 24rpx;
    border: 2rpx solid #0091FF;
  }
  
  .btn-conf {
    height: 58rpx;
    line-height: 58rpx;
    border-radius: 58rpx;
    width: 162rpx;
    text-align: center;
    color: #fff;
    font-size: 24rpx;
    background: linear-gradient(270deg, #00BAFF 0%, #008DFF 100%);
  }
  
  .ticket{
    padding: 10rpx 20rpx;
    margin-bottom: 10px;
    background-color: rgb(247 240 240);
    border-radius: 15rpx;
  }
  
  .ticket .title{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  
  
  .ticket .comment{
    color: #09afff;
    text-decoration: underline;
  }
  
  .timeline {
      margin: 44rpx auto 0rpx auto;
      position: relative;
      width: 100%; 
  }
  
  
  .timeline::before{
    background-color: #6DD1C9;
    content: '';
    margin-left: -1rpx;
    position: absolute;
    top: 0rpx;
    left: 8px;
    width: 2rpx;
    bottom: -250rpx;
    height: calc(100% - 47rpx);
  }
  
      
      .timeline-event{
           position: relative;
      }
      
      .timeline-event-copy {
          padding: 32rpx 24rpx;
          position: relative;
          top: -47rpx;
          left: 42rpx;
          width: 536rpx;
          background-color: #FFFFFF;
          /* margin-bottom: 20rpx; */
          border-radius: 20rpx;
      }
      
      .timeline-event-icon{
          background-color: #ffffff00;
          outline: 0rpx solid #FF0000;
          display: block;
          margin: 0rpx 0rpx 0rpx 0rpx;
          position: absolute;
          top: 0rpx;
          left: 0rpx;
          width: 28rpx;
          height: 28rpx;
      }
      
      .timeline-event-thumbnail{
          color: #333;
          font-weight: bold;
          font-size: 30rpx;
   
          display: inline-flex;
          width: 100%;
          margin-bottom: 0rpx;
          align-items: center;
          justify-content: space-between;
      }
      
      .timeline-event-content{
          display: flex;
          flex-direction: column;
          margin-top: 20rpx;
          margin-bottom: 20rpx; 
      }
  
    .timeline-text{
      font-weight: 100;
      color: #a09494;
      font-size: 15px;
    }
  
    .timeline-marker{
      border-radius: 50%; 
      height: 15px;
      width: 15px;
    }
  
  
    .ticket-tips{
      color: rgb(179 165 165);
      font-size: 13px;
      text-align: center;
      padding: 10px 0;
      margin-bottom: 10px;
      height: 27px;
    }
  
    .ticket-tips-content{
      padding:0 20rpx 40rpx 32rpx;
      margin-top: 21px;
      font-size: 16px;
    }
  
    .ticket-img{
      height: 45px;
      width: 45px;
    }
  
  
    
  .appoint-overlay-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    z-index: 999;
  }
  
  
  .remark-text {
    font-size: 26rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 486rpx;
    padding-left: 40rpx;
    margin: 0 10rpx 0 20rpx;
    text-align: right;
  }
  
  .remark-popup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 860rpx;
    background: #fff;
    border-radius: 20rpx 20rpx 0px 0px;
    padding: 40rpx 30rpx 50rpx;
    z-index: 9999;
  }
  
  .remark-popup .title {
    height: 30rpx;
    line-height: 30rpx;
    font-size: 30rpx;
    color: #333333;
  }
  
  .remark-textarea {
    width: 690rpx;
    height: 240rpx;
    background: #F8F8F8;
    border-radius: 10rpx;
    padding: 20rpx 36rpx 36rpx 20rpx;
    font-size: 26rpx;
    line-height: 40rpx;
    margin: 30rpx 0 330rpx;
    box-sizing: border-box;
  }
  
  .remark-popup .btn {
    width: 690rpx;
    height: 100rpx;
    background: #00B9FF;
    border-radius: 50rpx;
    line-height: 100rpx;
    font-size: 30rpx;
    text-align: center;
    color: #fff;
  }
  
  
  .blue-color{
    background: linear-gradient(90deg, #00BAFF 0%, #008DFF 100%) !important;
  }
  
  
  .warning-color{
    background: linear-gradient(90deg, #af4318 0%, #c96405 100%) !important;
  }
  
  
  
  .appoint-overlay-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    z-index: 999;
  }
  
  /* 选择时间 */
  view.popup-wrapper {
    /* padding: 0 0 20rpx; */
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* height: 80%; */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 9999;
    border-radius: 36rpx 36rpx 0rpx 0rpx;
    overflow: hidden;
  }
  
  view.popup-wrapper view.confirm-btn {
    background: #09AFFF;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 88rpx;
    text-align: center;
    color: #fff;
  }
  
  
  /* 选择备注 */
  .appoint-overlay-wrapper.remark-overlay {
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  
  .remark-select {
    width: 750rpx;
    padding: 0 24rpx 56rpx;
    background: #FFFFFF;
    border-radius: 24rpx 24rpx 0 0;
  }
  
  .remark-select .title {
    font-weight: 600;
    color: #191919;
    font-size: 30rpx;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    border-bottom: 2rpx solid #E0E0E0;
  }
  
  .remark-item .remark-value {
    color: #191919;
    font-size: 26rpx;
    font-weight: bold;
    flex: 1;
    text-align: left;
  }
  
  .remark-list .remark-item {
    height: 84rpx;
    display: flex;
    border-bottom: 2rpx solid #E0E0E0;
    align-items: center;
  }
  
  .remark-item .radio-img {
    width: 26rpx;
    height: 26rpx;
  }
  
  .remark-conf-btn {
    width: 652rpx;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 90rpx;
    border: 4rpx solid #FF8219;
    text-align: center;
    font-size: 36rpx;
    color: #FF8219;
    margin: 0 auto;
    margin-top: 54rpx;
  
  }
  .several-people {
		border-radius: 18rpx;
		background-color: #F1FAFE;
		width: 650rpx;
		/* height: 150rpx; */
		margin: auto;
		padding: 16rpx;
  }
  .title-tips {
		display: flex;
	}
	
	.title-tips .tips-content {
		font-size: 16rpx;
		margin-left: 8rpx;
		color: #999;
		height: 36rpx;
		padding-top: 5rpx;
	}
	
	.title-tips .image {
		width: 51rpx;
		height: 36rpx;
	}
	
	.title-tips .image image {
		width: 100%;
		height: 100%;
  }
  .product-one {
		margin-top: 10rpx;
		display: flex;
	}
	
	.product-one .service-name {
		margin-right: 15rpx;
		font-size: 24rpx;
	}
	
	.product-one .service-peoplenum {
		margin-right: 25rpx;
		font-size: 24rpx;
	}
	
	.product-one .service-time {
		color: #000;
		font-size: 24rpx;
	}