english_learned_master/pages/main/articlefine.wxss

.container{
  background-color: #DAD2C1;
  color:#2E2E2E;
}

.panel1{
  width: 690rpx;
  height:620rpx;
  margin-top: 30rpx;
  border-radius: 40rpx;
  overflow: hidden;
}
.swiper{
  width: 100%;
  height:100%;
}
.panel1Item{
  width: 100%;
}
.img{
  width: 690rpx;
  height:620rpx;
}

.panel1Item1{
  position: absolute;
  bottom: 0;
  width: 100%;
  min-height: 200rpx;
  background-image: linear-gradient(180deg, rgba(40,40,40,0.30) 0%, rgba(40,40,40,0.90) 100%);
  border-radius: 0 0 40rpx 40rpx;
}
.panel1Item11{
  margin: 30rpx 0 64rpx 40rpx;
  color: #FFFFFF;
  align-items: flex-start;
}
.panel1Item .text1{
  font-size: 24rpx;
  text-shadow: 0 3rpx 0 rgba(0,0,0,0.30);
  position: absolute;
  top:30rpx;
  left:30rpx;
  background: rgba(0,0,0,0.40);
  border-radius: 25rpx;
  color:#fff;
  padding: 8rpx 20rpx;
}
.panel1Item1 .text2{
  font-size: 32rpx;
  width: 610rpx;
  text-shadow: 0 3rpx 0 rgba(0,0,0,0.30);
  overflow: hidden;
  white-space: nowrap;
}
.panel1Item1 .text3{
  font-size: 36rpx;
  width: 610rpx;
  text-shadow: 0 3rpx 0 rgba(0,0,0,0.30);
}
.wx-swiper-dot {
  width: 14rpx !important;
  height: 14rpx !important;
  margin-left: 10rpx !important;
  margin-right: 10rpx !important;
}

.wx-swiper-dot {
  background-color: #858282 !important;
}

.wx-swiper-dot-active {
  background-color: #DAD2C1 !important;
}

.panel2{
  width: 100%;
  justify-content: flex-start;
}
.panelTitle{
  align-self: start;
  margin: 80rpx 0 0 60rpx;
  font-size:36rpx;
  position: relative;
}
.panelHelp{
  font-size: 24rpx;
  color: #2E2E2E;
  position: absolute;
  top:12rpx;
  right:-510rpx;
}
.sysIcon_a43{
  width:24rpx;
  height:24rpx;
  margin-right: 10rpx;
}

.panel21{
  width: 100%;
  margin-top: 40rpx;
}
.panel211{
  width: 158rpx;
  height:213rpx;
  border-radius: 20rpx;
  font-size: 36rpx;
  position: relative;
  margin: 0 10rpx;
}
.sysIcon_a19{
  width: 30rpx;
  height:30rpx;
  position: absolute;
  top:40rpx;
  left:34rpx;
}

.panel211 .text4{
  position: absolute;
  top:110rpx;
  left:20rpx;
}

.panel211 .text5{
  position: absolute;
  top:160rpx;
  left:20rpx;
  font-size:24rpx;
}

.panel3{
  width: 100%;
  justify-content: flex-start;
  margin-top: 40rpx;
}

.panel3Item{
  width: 690rpx;
  max-height: 226rpx;
  background: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  justify-content: space-between;
}

.panel3ItemLeft{
  margin-left: 30rpx;
  font-size: 24rpx;
  align-items: flex-start;
  font-weight: 400;
  justify-content: flex-start;
}

.panel3ItemLeft .text11{
  font-size: 24rpx;
  margin: 30rpx 0 0 0;
  color: #2e2e2e;
}
.panel3ItemLeft .text6{
  font-size: 32rpx;
  width: 420rpx;
  margin: 10rpx 0 10rpx 0;
  color: #4d4d4d;
  font-weight: 700;
}
.panel3ItemLeft .text7{
  margin:0 0 30rpx 0;
  color: #2e2e2e;
}

.img2{
  width: 180rpx;
  height:166rpx;
  margin: 30rpx 30rpx 30rpx 0;
  border-radius: 10rpx;
}

.panel3Item0{
  height:143rpx;
  background-color: #F0EDE6;
}

.panel3ItemLeft .text8{
  margin:30rpx 0 0 0;
  font-size: 28rpx;
  font-weight: 700;
  color: #4D4D4D;
}

.panel3ItemLeft .text81{
  margin:10rpx 0 30rpx 0;
  font-size: 24rpx;
  font-weight: 400;
  color: #2e2e2e;
}

.sysIcon_b20{
  width: 130rpx;
  height:143rpx;
  border-radius: 0 20rpx 20rpx 0;
}

.panel4{
  width:690rpx;
  min-height: 852rpx;
  border-radius: 20rpx;
  background-color: #F0EDE6;
  margin: 40rpx 0 60rpx 0;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.panel4Item{
  width: 230rpx;
  height:203rpx;
}
.panel4Item1{
  width: 60rpx;
  height:60rpx;
  background: #DAD2C1;
  border-radius: 16rpx;
}

.sysIcon_a23{
  width: 30rpx;
  height:30rpx;
}

.panel4Item .text9{
  font-size: 28rpx;
  margin-top: 10rpx;
}

.panel4Item .text10{
  font-size: 24rpx;
  color:#4D4D4D;
  font-weight: 400;
}

.panelVersion{
  height: 200rpx;
}

.panelFooter{
  width: 100%;
  background-color: #fff;
  color: #004433;
  position: fixed;
  bottom: 0;
  z-index: 10;
}

.panelFooter1{
  width:100%;
}

.panelFooterBtn{
  width: 50%;
  font-size: 36rpx;
  height: 100rpx;
  justify-content: flex-end;
}
.panelFooterLine{
  width: 72rpx;
  height:16rpx;
  margin-top: 9rpx;
}
.panelFooterLine1{
  width: 72rpx;
  height:16rpx;
  margin-top: 9rpx;
  background-color: #004433;
}

.iphone10plus{
  width:100%;
  height:30rpx;
  background-color: #fff;
}