shuichacha/shuichacha-for-KL/pages/invoice/invoice.wxss

/* pages/invoice/invoice.wxss */
.invoice {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.invoice .top-opt {
  width: 100%;
  height: 178rpx;
  background: rgba(250, 252, 255, 1);
  padding: 20rpx 40rpx;
  box-sizing: border-box;
  position: fixed;
  top:0;
  z-index: 9999;
}

.invoice .top-opt .title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(104, 107, 120, 1);
  line-height: 40rpx;
}

.invoice .top-opt .title .item {
  width: 240rpx;
  height: 72rpx;
  text-align: center;
  line-height: 72rpx;
  background: rgba(255, 255, 255, 1);
}

.invoice .top-opt .title .item:first-child {
  border-radius: 200rpx 0rpx 0rpx 200rpx;
}

.invoice .top-opt .title .item:last-child {
  border-radius: 0rpx 200rpx 200rpx 0rpx;
}

.invoice .top-opt .title .active {
  background: rgba(0, 145, 255, 1);
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}

.invoice .date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(104, 107, 120, 1);
}

.invoice picker {
  height: 80rpx;
  display: flex;
  align-items: center;
}

.invoice .picker .icon-up {
  display: inline-block;
  width: 16rpx;
  height: 10rpx;
  margin-left: 22rpx;
  vertical-align: middle;
}

.invoice .right {
  width: 178rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.invoice .right .icon-doubt {
  width: 32rpx;
  height: 34rpx;
  display: inline-block;
}

.invoice .content {
  width: 100%;
  position: relative;
  padding: 40rpx;
  top:160rpx;
  box-sizing: border-box;
}

.invoice .content .open-invoce {
  width: 670rpx;
  height: 200rpx;
  background: rgba(249, 250, 252, 1);
  border-radius: 16rpx;
  border: 2rpx solid rgba(241, 241, 241, 1);
  padding: 36rpx 44rpx 40rpx 36rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(104, 107, 120, 1);
  line-height: 40px;
}

.invoice .content .open-invoce:not(:first-child) {
  margin-top: 20rpx;
}

.invoice .content .open-invoce .top,
.invoice .content .open-invoce .bottom {
  display: flex;
  justify-content: space-between;
  height: 60rpx;
  line-height: 60rpx;
}

.invoice .content .open-invoce .top .bold {
  font-size: 36rpx;
  font-weight: 500;
  color: rgba(66, 70, 86, 1);
  line-height: 50rpx;
  margin-right: 10rpx;
}

.invoice .content .open-invoce .bottom .open {
  width: 120rpx;
  height: 60rpx;
  background: rgba(0, 145, 255, 1);
  border-radius: 200rpx;
  text-align: center;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 60rpx;
}

.invoice .content .open-invoce .bottom .opening {
  width: 120rpx;
  height: 60rpx;
  border-radius: 200rpx;
  text-align: center;
  font-weight: 500;
  color: rgba(0,145,255,1);
  border: 2rpx solid rgba(0,145,255,1);
  line-height: 60rpx;
}

.invoice .content .open-invoce .bottom .alreadyopen {
  width: 120rpx;
  height: 60rpx;
  background-color: rgba(0, 145, 255, 0);
  border-radius: 200rpx;
  text-align: center;
  font-weight: 500;
  color: #D7D7D7;
  border: 2rpx solid rgba(242, 242, 242, 1);
  line-height: 60rpx;
}

.invoice .content .my-invoce {
  width: 670rpx;
  height: 200rpx;
  background: rgba(249, 250, 252, 1);
  border-radius: 16rpx;
  border: 2rpx solid rgba(241, 241, 241, 1);
  padding: 34rpx 40rpx 40rpx 36rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(104, 107, 120, 1);
}
.invoice .content .my-invoce:not(:first-child) {
  margin-top: 20rpx;
}

.invoice .content .my-invoce .top,
.invoice .content .my-invoce .bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60rpx;
  line-height: 60rpx;

}

.invoice .content .my-invoce .top .bold {
  font-size: 36rpx;
  font-weight: 500;
  color: rgba(66, 70, 86, 1);
  /* line-height:50px; */
}

.invoice .content .my-invoce .top .left {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.invoice .content .my-invoce .top .tag {
  width: 120rpx;
  height: 47rpx;
  display: inline-block;
  margin-left: 10rpx;
}

.invoice .content .my-invoce .top .icon-up {
  display: inline-block;
  width: 16rpx;
  height: 10rpx;
}
.invoice .content .my-invoce .top .icon-left {
  display: inline-block;
  width: 10rpx;
  height: 16rpx;
}

.invoice .content .my-invoce .bottom .view {
  width:160rpx;
  height:60rpx;
  background:rgba(0,145,255,1);
  border-radius:200rpx;
  font-size:28rpx;
  font-family:PingFangSC-Medium,PingFang SC;
  font-weight:500;
  color:rgba(255,255,255,1);
  line-height:60rpx;
  text-align: center;
}
.invoice .content .my-invoce .bottom .expired{
  width:160rpx;
  height:60rpx;
  border-radius:200px;
  border:2rpx solid rgba(230,231,233,1);
  font-size:28rpx;
  font-family:PingFangSC-Medium,PingFang SC;
  font-weight:500;
  color:rgba(204,204,204,1);
  line-height:60rpx;
  text-align: center;
}