pet-front/otherPages/orderTakingManage/detail/index.css

@charset "UTF-8";
.box {
  width: 100vw;
  height: 100vh;
  background-color: #F5F5F5;
  padding: 2% 3% 0 3%;
}

.box-size {
  box-sizing: border-box;
}

.level {
  display: flex;
}

/* 垂直、水平居中 */
.vertically_center {
  display: grid;
  place-items: center;
}

.top {
  width: 710rpx;
  height: 176rpx;
  background-color: #FFFFFF;
  padding: 1% 2%;
  font-size: 22rpx;
  display: grid;
  justify-content: space-between;
}

.top_left {
  width: 520rpx;
  height: auto;
  display: flex;
  justify-content: space-between;
  padding-top: 20rpx;
}

.text1 {
  color: #FF2A2A;
  font-size: 25rpx;
}

.top_bottom {
  /* background-color: aqua; */
  margin-left: 10rpx;
  color: #999999;
}

.top-button {
  width: 132rpx;
  height: 54rpx;
  border: 1rpx solid #FFBF60;
  color: #FFBF60;
  display: grid;
  justify-content: center;
  line-height: 54rpx;
  position: absolute;
  top: 30rpx;
  right: 30rpx;
}

.information {
  width: 710rpx;
  background-color: #FFFFFF;
  /* background-color: pink; */
  margin-top: 10rpx;
  padding: 10rpx 10rpx;
}

.time {
  width: 660rpx;
  /* background-color: gray; */
  padding: 0 2%;
  margin-top: 50rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.time .time-content {
  width: 500rpx;
}

.service {
  width: 710rpx;
  height: auto;
  background-color: #FFFFFF;
  margin-top: 2%;
  padding: 0 3% 3% 3%;
}

.horizontal_distribution {
  display: flex;
  justify-content: space-between;
}

.flex {
  display: flex;
}

.service_top {
  width: 670rpx;
}

.text2 {
  width: auto;
  height: 20rpx;
  margin-top: 45rpx;
  font-size: 22rpx;
  color: #999999;
}

.pet_information {
  width: 670rpx;
  height: auto;
  /* background-color: pink; */
  padding: 5% 0 0 3%;
}

.pet_item {
  color: #999999;
  font-size: 28rpx;
}

.img image {
  width: 140rpx;
  height: 140rpx;
  border-radius: 100rpx;
  margin-right: 20rpx;
}

.name {
  margin-bottom: 15rpx;
}

.name image {
  width: 35rpx;
  height: 35rpx;
  border-radius: 35rpx;
  background-color: red;
  margin-left: 15rpx;
}

.name_text {
  color: #000 !important;
  font-size: 30rpx !important;
}

.pet- {
  height: 40rpx;
  line-height: 40rpx;
  color: #999999;
  font-size: 28rpx;
  margin: 20rpx 0 20rpx 0;
}

.pet- text {
  margin: 0 8rpx 0 30rpx;
  color: #000;
}

.money_total {
  width: 670rpx;
  height: 45rpx;
  /* background-color: pink; */
  margin: 60rpx 0 20rpx 0;
  justify-content: space-between;
  font-size: 30rpx;
}

.money_text {
  color: red !important;
  font-size: 34rpx !important;
}

.other_information {
  width: 710rpx;
  height: 350rpx;
  background-color: #FFFFFF;
  /* background-color: pink; */
  margin-top: 20rpx;
  padding: 0 1% 0 3%;
}

.text3 {
  margin: 40rpx 15rpx 0 15rpx;
}

.bottom {
  width: 100vw;
  height: 163rpx;
  background-color: #FFFFFF;
  margin-top: 20rpx;
  position: relative;
}

.bottom_button {
  width: 594rpx;
  height: 94rpx;
  background-color: #FFBF60;
  color: #FFFFFF;
  font-size: 30rpx;
  line-height: 94rpx;
  justify-content: center;
  position: absolute;
  top: 19%;
  left: 11%;
}

.success {
  width: 310rpx;
  height: 370rpx;
  background-color: #FFFFFF;
}

.pop_top {
  width: 310rpx;
  height: 100rpx;
  background-image: linear-gradient(to bottom, #FFBF60, #FFD494);
}

.code {
  width: 250rpx;
  height: 50rpx;
  background-color: #F3F3F3;
  margin: 30rpx 0 0 30rpx;
}

.pop_image {
  display: grid;
  place-items: center;
  margin-top: 20rpx;
}

.copy {
  width: 260rpx;
  height: 50rpx;
  background-color: #FFBF60;
  margin: 30rpx 0 0 25rpx;
}

.cancel {
  width: 40rpx;
  height: 40rpx;
  background-color: #FFFFFF;
  position: absolute;
  top: -20rpx;
  right: -17rpx;
}