wxmp-wodeshebao/page/home/pages/pay-order/pay-order.wxss

/* header */
.header-bg {
  width: 718rpx;
  margin: 0 auto;
  box-shadow: 0 4rpx 8rpx 0 rgba(0,0,0,0.03); 
}

.header {
  width: 718rpx;
  height: 256rpx;
  margin: 0 auto;
  background: linear-gradient(to right, #88B3CA, #7195A8);
  border-radius: 8rpx 8rpx 0 0;
  display: flex;
  flex-direction: column;
}

.header text {
  font-family: PingFangSC-Semibold;
  margin-left: 40rpx;
  color: white;
}

.header>text:nth-child(1) {
  font-size: 34rpx;
  margin-top: 44rpx;
  margin-bottom: 8rpx;
}

.header>text:nth-child(2) {
  font-size: 28rpx;
  line-height: 60rpx;
}

/* list */
.list {
  background-color: white;
  width: 718rpx;
  margin: 0 auto;
  display: flex;
}

.list text {
  font-size: 28rpx;
  margin: 36rpx 36rpx 20rpx;
  line-height: 64rpx;
}

.list>text:first-child {
  margin-right: auto;
  color: #333333;
}

.list>text:last-child {
  margin-left: auto;
  text-align: right;
  color: #666666;
}

.list+image {
  margin: 0 auto;
  width: 718rpx;
  height: 24rpx;
  display: block;
}

/* total */
.total {
  background-color: white;
  width: 718rpx;
  height: 100rpx;
  margin: 0 auto;
  display: flex;
}

.total text {
  margin: 0 36rpx;
  line-height: 100rpx;
}

.total>text:first-child {
  margin-right: auto;
  color: #333333;
  font-size: 28rpx;
}

.total>text:last-child {
  font-family: PingFangSC-Semibold;
  margin-left: auto;
  color: #FF5E5E;
  font-size: 32rpx;
}

/* discount */
.discount {
  background-color: white;
  width: 718rpx;
  height: 108rpx;
  margin: 16rpx auto 0;
  display: flex;
  box-shadow: 0 4rpx 8rpx 0 rgba(0,0,0,0.03);
}

.discount>text:nth-child(1) {
  color: #333333;
  font-size: 28rpx;
  line-height: 108rpx;
  margin-left: 36rpx;
}

.discount>text:nth-child(2) {
  width: 96rpx;
  height: 32rpx;
  border-radius: 4rpx;
  border: 1rpx solid #FF5E5E;
  color: #FF5E5E;
  font-size: 22rpx;
  line-height: 32rpx;
  text-align: center;
  margin: auto auto auto 20rpx;
}

.discount>text:nth-child(3) {
  color: #666666;
  font-size: 28rpx;
  line-height: 108rpx;
  margin-left: auto;
}

.discount>image {
  width: 14rpx;
  height: 24rpx;
  margin: auto 36rpx auto 22rpx;
}

/* 底部视图 */
.scroll-view-bottom-view {
  width: 100%;
  height: 236rpx;
}

.scroll-view-bottom-view-X {
  width: 100%;
  height: 304rpx;
}

/* 底部固定视图 */
.bottom-view, .bottom-view-X {
  position: fixed;
  width: 100%;
  background-color: white;
  bottom: 0rpx;
  display: flex;
  flex-direction: column;
}

.bottom-view {
  height: 212rpx;
}

.bottom-view-X {
  height: 280rpx;
}

.bottom-view>view:nth-child(1), .bottom-view-X>view:nth-child(1) {
  width: 100%;
  height: 100rpx;
  display: flex;
}

.bottom-view>view:nth-child(1)>text, .bottom-view-X>view:nth-child(1)>text {
  font-size: 32rpx;
  color: #333333;
  line-height: 100rpx;
  margin-left: 30rpx;
}

.bottom-view>view:nth-child(1)>image, .bottom-view-X>view:nth-child(1)>image {
  width: 14rpx;
  height: 24rpx;
  margin: auto 30rpx auto auto;
}

.bottom-view>view:nth-child(2), .bottom-view-X>view:nth-child(2) {
  height: 0.7px;
  margin-left: 30rpx;
  background-color: #eeeeee;
}

.bottom-view>view:nth-child(3), .bottom-view-X>view:nth-child(3) {
  width: 100%;
  height: 110rpx;
  display: flex;
}

.bottom-view>view:nth-child(3)>view:last-child, .bottom-view-X>view:nth-child(3)>view:last-child {
  width: 280rpx;
  height: 84rpx;
  border-radius: 42rpx;
  background-color: #3296FB;
  font-family: PingFangSC-Semibold;
  color: white;
  font-size: 30rpx;
  line-height: 84rpx;
  text-align: center;
  margin: auto 20rpx auto auto;
}

.bottom-view>view:nth-child(3)>text, .bottom-view-X>view:nth-child(3)>text {
  color: #FF5E5E;
  font-size: 26rpx;
  margin: auto auto auto 14rpx;
}

.bottom-view>view:nth-child(3)>view:nth-child(1), .bottom-view-X>view:nth-child(3)>view:nth-child(1) {
  margin: auto 0rpx auto 30rpx;
  display: flex;
}

.bottom-view>view:nth-child(3)>view:nth-child(1)>text, .bottom-view-X>view:nth-child(3)>view:nth-child(1)>text {
  font-family: PingFangSC-Semibold;
  color: #FF5E5E;
  font-size: 24rpx;
  line-height: 24rpx;
  height: 24rpx;
  margin-top: auto;
}

.bottom-view>view:nth-child(3)>view:nth-child(1)>text:nth-child(1), .bottom-view-X>view:nth-child(3)>view:nth-child(1)>text:nth-child(1) {
  margin-bottom: 0.7px;
}

.bottom-view>view:nth-child(3)>view:nth-child(1)>text:nth-child(2), .bottom-view-X>view:nth-child(3)>view:nth-child(1)>text:nth-child(2) {
  font-size: 40rpx;
  line-height: 40rpx;
  height: 40rpx;
}