HanziLearn_master/pages/main/list.wxss

.container {
  background-color: #dfc7a4;
  justify-content: flex-start;
  font-weight: 500;
  color: #1e1e1e;
}

.line {
  width: 100%;
  height: 10rpx;
  background-color: #593613;
}

.line1 {
  background-color: #c4a271;
}


.top {
  position: fixed;
  top:0;
  z-index: 10;
}

.top2 {
  top:10rpx;
}

.topImage {
  margin-top: 20rpx;
  width: 100%;
  height: 430rpx;
}

.list1 {
  width: 100%;
  height: 100rpx;
  background-color: #c4a270;
  font-size: 36rpx;
}

.list1 .nav {
  width: 50%;
  height: 100rpx;
  justify-content: flex-end;
}

.list1 .nav1 {
  border-bottom: 10rpx solid #593613;
  line-height: 70rpx;
}

.list1 .nav2 {
  border-bottom: 10rpx solid #c4a270;
  line-height: 70rpx;
}

.list2 {
  width: 100%;
  background-color: #dfc7a4;
  font-size: 36rpx;
}

.list2 .btn {
  width: 690rpx;
  height: 192rpx;
  background-color: #CDB797;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.list2 .btn1 {
  width: 100%;
  height: 180rpx;
  background-color: #F0F0F0;
  border-radius: 10rpx;
  position: relative;
  top: 0;
  justify-content: space-between;
}

.list2 .left {
  margin-left: 40rpx;
}

.list2 .right {
  margin-right: 40rpx;
  align-items: flex-end;
}

.list2 .right1 {
  margin-bottom: 10rpx;
}

.list2 .img04005 {
  width:24rpx;
  height:30rpx;
}
.list2 .img04007 {
  width:24rpx;
  height:39rpx;
}
.list2 .img04008 {
  width:30rpx;
  height:30rpx;
}

.list2 .title {
  margin-left: 30rpx;
  font-size:58rpx;
  font-weight: 450;
}

.list2 .line {
  width:5rpx;
  height:20rpx;
  background-color: #DFC7A4;
}

.list2 .title2 {
  font-size:22rpx;
  margin-left: 30rpx;
}
.list2 .title3 {
  font-size:20rpx;
  margin-left: 10rpx;
}

.line2 {
  background-color: #dfc7a4;
  height:40rpx;
}
.line3 {
  background-color: #dfc7a4;
  height:100rpx;
}
.line4 {
  background-color: #dfc7a4;
  height:80rpx;
}

.group{
  width:100%;
  justify-content: flex-start;
  background-color: #F5E2BE;
  margin-bottom: 20rpx;
}
.group .title{
  width:100%;
  margin: 50rpx 0 0 0;
  justify-content: flex-start;
}
.group .title1{
  margin: 0 0 0 30rpx;
  font-size:28rpx;
}
.group .table{
  margin: 40rpx 20rpx 60rpx 20rpx;
  font-size:48rpx;
  /* justify-content: flex-start; */
  align-items: flex-start;
  flex-wrap: wrap;
  /* background-color: #000; */
}
.group .box{
  margin: 0 3rpx 7rpx 3rpx;
  background-color: #fff;
  width:106rpx;
  height:106rpx;
  line-height: 106rpx;
  text-align: center;
  font-weight: 400;
  border:1rpx solid #CDB797;
}
.group .boxSelect{
  color:#fff;
  background-color: #FFA556;
  border:1rpx solid #593613;
  width:106rpx;
  height:106rpx;
}
.group .boxNull{
  background-color: #F5E2BE;
  border:1rpx solid #F5E2BE;
  width:106rpx;
  height:106rpx;
}


.PayInfo{
  z-index: 100;
  position: fixed;
  width: 100%;
  left:0;
  top:0;
  background-color: rgba(240,240,240,0.95);
}

.PayInfo .btn {
  width: 600rpx;
  height: 420rpx;
  background-color: #F19805;
  border-radius: 40rpx;
  margin-top: 282rpx;
  box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.5);
}
.PayInfo .btn1 {
  width: 100%;
  height: 400rpx;
  background-color: #FFDD0C;
  border-radius: 40rpx;
  position:relative;
  top:0;
  justify-content: flex-start;
}
.PayInfo .panel1 {
  width: 100%;
  height: 280rpx;
  background-color: #F9676C;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
}
.PayInfo .img {
  width: 518rpx;
  height: 175rpx;
}
.PayInfo .panel2 {
  width: 100%;
  height: 120rpx;
  font-size:48rpx;
}

.PayInfo .text1{
  margin-top: 126rpx;
  font-size:32rpx;
}
.PayInfo .text2{
  margin-top: 20rpx;
  font-size:36rpx;
  color:#A20602;
}
.PayInfo .Triangle{
  width: 16rpx;
  height:22rpx;
  margin-right: 22rpx;
}
.PayInfo .close {
  width: 100%;
  height: 155rpx;
  position: fixed;
  bottom: 0;
  justify-content: flex-start;
}

.PayInfo .closeImage {
  width: 33rpx;
  height: 33rpx;
  margin-top: 30rpx;
}

.hand{
  width:60rpx;
  height:90rpx;
  position: absolute;
  right:158rpx;
  top:405rpx;
  z-index: 100;
}