app/workbench/service/service.wxss

/* pages/my/service/service.wxss */
page {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.service-detail-container {
  padding-bottom: constant(safe-area-inset-bottom);
  /*兼容 IOS<11.2*/
  padding-bottom: env(safe-area-inset-bottom);
  /*兼容 IOS>11.2*/
}

.header {
  padding: 30rpx 0;
  background-color: #fff;
}

.header .groupWay {
  font-size: 28rpx;
  font-family: 'PingFang SC, PingFang SC-Regular';
  font-weight: 400;
  color: #1a1a1a;
  margin-left: 40rpx;
}

.header .groupWay .text {
  color: #808080;
}

.header .title {
  margin-bottom: 35rpx;
  text-align: center;
  font-size: 28rpx;
  font-family: 'PingFang SC, PingFang SC-Regular';
  font-weight: 400;
  color: #1a1a1a;
}

.header .title .label {
  margin-right: 40rpx;
}

.header .title .label:last-child {
  margin-right: 0;
}

.header .title .text {
  color: #808080;
}

.header .photo {
  display: flex;
  justify-content: center;
}

.header .photo .img-box {
  position: relative;
}

.header .photo .img-box:first-child:before {
  position: absolute;
  top: -20rpx;
  left: -30rpx;
  display: block;
  content: '拼主';
  width: 61rpx;
  height: 39rpx;
  background: #ffdc2f;
  border: 4rpx solid #ffffff;
  border-radius: 24rpx;
  font-size: 24rpx;
  text-align: center;
  line-height: 39rpx;
  z-index: 3;
}

.header .photo .img {
  width: 89rpx;
  height: 89rpx;
  margin-right: 30rpx;
  border-radius: 50%;
}

.header .photo .first-img {
  position: relative;
  width: 95rpx;
  height: 95rpx;
  margin-top: -10rpx;
}

.gary {
  height: 10rpx;
  background: #f5f5f5;
}

.detail {
  padding: 30rpx 30rpx 0;
  font-size: 28rpx;
  font-family: 'PingFang SC, PingFang SC-Regular';
  font-weight: 400;
  color: #808080;
}

.detail .title {
  margin-bottom: 20rpx;
  font-family: 'PingFang SC, PingFang SC-Bold';
  font-weight: 700;
  color: #060606;
}

.detail .tip {
  margin-bottom: 20rpx;
}

.detail .label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.label .price {
  font-size: 20rpx;
  font-family: 'PingFang SC, PingFang SC-Medium';
  font-weight: 700;
  color: #ec2e26;
}

.label .price .num {
  font-size: 32rpx;
}

.detail .label .label-text {
  flex-shrink: 0;
  color: #060606;
}

.share {
  padding: 30rpx;
  background-color: #fff;
  font-family: 'PingFang SC, PingFang SC-Regular';
  font-weight: 400;
  font-size: 24rpx;
  color: #1a1a1a;
}

.share .title {
  margin-bottom: 15rpx;
  font-size: 28rpx;
  font-family: 'PingFang SC, PingFang SC-Bold';
  font-weight: 700;
}

.share .share-people {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  font-size: 30rpx;
}

.share .share-people .avater {
  width: 83rpx;
  height: 83rpx;
  border-radius: 50%;
  margin-right: 18rpx;
}

.share .share-people .time {
  margin-left: auto;
  color: #999999;
}

.share .share-text {
  color: #666666;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.footer .btn-box {
  display: flex;
  padding: 30rpx;
  border-top: 1px dashed #ccc;
}

.footer .btn {
  width: 320rpx;
  height: 85rpx;
  background: #fffae1;
  border: 1rpx solid #ffa836;
  border-radius: 44rpx;
  text-align: center;
  line-height: 85rpx;
  font-size: 30rpx;
  font-family: 'PingFang SC, PingFang SC-Regular';
  font-weight: 400;
  color: #ffa836;
}

.footer .other-btn {
  background: #ffa022;
  color: #1a1a1a;
}

.footer .text {
  height: 90rpx;
  text-align: center;
  line-height: 90rpx;
  font-size: 28rpx;
  font-family: 'PingFang SC, PingFang SC-Bold';
  font-weight: 700;
  color: #ffa836;
  background: #fffae1;
}

.textarea {
  width: 100%;
  height: 270rpx;
  padding: 20rpx;
  text-align: left;
  border: 1px solid #cccccc;
  border-radius: 10px;
  box-sizing: border-box;
}

.contactBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  z-index: 9;
  box-sizing: border-box;
}

.contactBox .box {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 30rpx;
  border-radius: 20rpx 20rpx 0 0;
  background-color: #fff;
  box-sizing: border-box;
}

.contactItem {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 30rpx;
  color: #1a1a1a;
  padding: 30rpx 0;
}

.contactBox .cancel {
  padding: 30rpx 0;
  text-align: center;
}

.contactBox .gary {
  height: 10rpx;
  background-color: #f3f3f3;
}