english_learned_master/pages/main/wordsinput.wxss

.panel1{
  width:690rpx;
  color: #C1E1C1;
  position: relative;
}

.text01{
  font-size: 36rpx;
  margin:50rpx 0 0 40rpx;
  align-self: start;
}

.panel11{
  margin: 20rpx 0 30rpx 0;
  font-size:24rpx;
  width: 100%;
  justify-content: space-between;
}

.panel111{
  margin-left: 40rpx;
}
.panel113{
  width:96rpx;
  height:73rpx;
  margin-left: -250rpx;
}
.panel112{
  width: 88rpx;
  height:73rpx;
  border: 3rpx solid #C1E1C1;
  border-radius: 20rpx;
  margin-right: 40rpx;
}
.sysIcon_a01{
  width:24rpx;
  height:24rpx;
  margin-right: 10rpx;
}

.sysIcon_a03{
  width:20rpx;
  height:20rpx;
}

.panel2{
  width: 690rpx;
  min-height: 300rpx;
  background: #002F24;
  box-shadow: 0 10rpx 0 0 rgba(0,0,0,0.50);
  border-radius: 40rpx;
  margin: 0 0 230rpx 0;
}

.panel20{
  width:646rpx;
  height:90rpx;
  background: #061A1B;
  border-radius: 5rpx;
  margin: 10rpx 0 0 0;
  justify-content: flex-start;
  position: relative;
}

.panel21{
  border-radius: 20rpx 20rpx 5rpx 5rpx;
  margin: 30rpx 0 0 0;
}

.panel210{
  border-radius: 5rpx 5rpx 20rpx 20rpx;
  margin: 10rpx 0 30rpx 0;
}
.panel211{
  width:16rpx;
  height:90rpx;
  border-radius: 5rpx 0 0 5rpx;
  margin-right: 14rpx;
}
.panel2110{
  background: #CA4B15;
}

.txtWord{
  width:570rpx;
  height:50rpx;
  text-align: left;
  font-size:36rpx;
  font-weight: 400;
  color: #FFDD88;
}
.txtWordFinished{
  background-color: #004433;
}

.placeholderClass{
  color:#627062;
}

.panel20Delete{
  width:80rpx;
  height:80rpx;
  position: absolute;
  right:0;
  z-index: 10;
}
.sysIcon_a14{
  width: 20rpx;
  height:22rpx;
}

.panelGuide{
  width: 710rpx;
  height:70rpx;
  background: #453C2D;
  border: 5rpx solid #E6971A;
  border-radius: 70rpx;
  position: fixed;
  bottom:195rpx;
  z-index: 10;
  justify-content: space-between;
}

.panelGuide1{
  font-size:28rpx;
  color:#F2F2F2;
  margin-left: 40rpx;
}
.panelGuideText1{
  color:#FFCD00;
  text-decoration: underline;
}
.panelGuide2{
  border-radius: 50%;
  width: 46rpx;
  height:46rpx;
  background-color: #E59819;
  margin-right: 17rpx;
}

.panelFooter{
  width: 100%;
  height:180rpx;
  background-image: linear-gradient(180deg, #004433 0%, #002C21 100%);
  position: fixed;
  bottom: 0rpx;
  align-items: flex-start;
  z-index: 10;
}

.panelFooter1{
  width:730rpx;
  height:140rpx;
  color:#F2F2F2;
  background: #1E1E1E;
  box-shadow: 0 30rpx 0 0 #0C0C0C;
  border-radius: 10rpx 10rpx 60rpx 60rpx;
}
.panelFooter10{
  background-color: #303030;
  font-size:24rpx;
}
.panelFooter11{
  width:160rpx;
  height:120rpx;
  border-radius: 5rpx 10rpx 10rpx 50rpx;
}
.panelFooter12{
  width:160rpx;
  height:120rpx;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  margin: 0 10rpx;
}
.panelFooter13{
  width:370rpx;
  height:120rpx;
  border-radius: 10rpx 5rpx 50rpx 10rpx;
  font-size:36rpx;
}
.text02{
  font-size:24rpx;
  margin-top: 17rpx;
}

.panelHelp{
  background-color: rgba(0,0,0,0.00);
  z-index: 20;
  position: fixed;
  top:0;
}

.panelHelp1{
  width: 100%;
  position: fixed;
  bottom:902rpx;
}

.sysIcon_b06{
  width:100%;
  height: 642rpx;
  position: absolute;
}

.panelHelp2{
  position: absolute;
  left:0;
  right:0;
  top:160rpx;
}

.text07{
  font-size: 36rpx;
  color: #2E2E2E;
  text-align: center;
  width:360rpx;
}
.btn3{
  width:310rpx;
  height:90rpx;
  background: #303030;
  border-radius: 20rpx;
  color:#F2F2F2;
  margin-top: 50rpx;
}

.panelMenu{
  background-color: rgba(26,67,51,0.50);
  z-index: 20;
  position: fixed;
  top:0;
}

.panelMenu1{
  width:100%;
  height:1130rpx;
  background: #1E1E1E;
  border-radius: 60rpx 60rpx 0 0;
  position: fixed;
  color:#F0F0F0;
  bottom:0;
  justify-content: flex-start;
}

.panelMenu11{
  width: 100%;
  margin-bottom: 30rpx;
}
.panelMenu11_1{
  width: 100%;
  justify-content: space-between;
  margin-top: 10rpx;
}
.panelMenu11_11{
  font-size: 24rpx;
  color: #C1E1C1;
  margin: 10rpx 40rpx 0 0;
}



.text04{
  align-self: start;
  margin: 50rpx 0 0 40rpx;
  font-size: 28rpx;
}
.text05{
  margin: 10rpx 0 0 40rpx;
}
.text06{
  margin: 20rpx 0 0 40rpx;
}
.panelMenu111{
  width:100%;
  margin: 30rpx 0 0 60rpx;
  justify-content: flex-start;
  align-items: flex-start;
}
.panelMenu1110{
  width:100%;
  margin: 30rpx 0 -20rpx 0;
  white-space: nowrap;
}
.panelMenu1111{
  width:1008rpx;
  height:260rpx;
  margin-left: 30rpx;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.panelMenu11110{
  height:166rpx;
}
.panelMenu112{
  width: 940rpx;
  height: 320rpx;
  margin:0 30rpx 0 30rpx ;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}

.btn{
  margin: 0 20rpx 20rpx 0;
  height:90rpx;
  padding: 0 26rpx;
  background: #1E1E1E;
  border: 6rpx solid #303030;
  box-shadow: 0 6rpx 0 0 rgba(0,0,0,0.20);
  border-radius: 20rpx;
  color:#C1E1C1;
  font-size: 28rpx;
}

.btn2{
  width: 650rpx;
  height:90rpx;
  background: #303030;
  border-radius: 20rpx;
  margin: 60rpx 0;
  font-size: 36rpx;
  position: fixed;
  bottom:0;
}
.btn4{
  width: 332rpx;
  height:126rpx;
  margin: 0 20rpx 0 0;
  font-size: 24rpx;
}
.btn5{
  width: 284rpx;
  height:126rpx;
  margin: 0 0 20rpx 0;
  font-size: 24rpx;
  background: #1E1E1E;
  border: 6rpx solid #303030;
  box-shadow: 0 6rpx 0 0 rgba(0,0,0,0.20);
  border-radius: 20rpx;
  color:#C1E1C1;
}

.btnSelected{
  background: #0D4433;
  border: 6rpx solid #C1E1C1;
  box-shadow: 0 6rpx 0 0 rgba(0,0,0,0.10);
  color: #C1E1C1;
}

.btn5Selected{
  background: #0D4433;
  border: 6rpx solid #C1E1C1;
  box-shadow: 0 6rpx 0 0 rgba(0,0,0,0.10);
  color: #C1E1C1;
}

.btn41{
  margin: 0 20rpx 0 0;
  font-size: 28rpx;
}

.sysIcon_b01{
  width:40rpx;
  height:40rpx;
  margin-right: 20rpx;
}
.panelClose{
  width:100rpx;
  height:100rpx;
  position: absolute;
  top:20rpx;
  right:30rpx;
}
.panelClose1{
  width:60rpx;
  height:60rpx;
  background: #303030;
  border-radius: 50%;
}

.panelExample{
  background-color: rgba(26,67,51,0.50);
  z-index: 20;
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  overflow: hidden;
}

.exampleScrollView {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 300rpx;
}

.panelExampleBtn{
  width: 100%;
  height:140rpx;
  background: #875A4B;
  font-size: 48rpx;
  color: #F0F0F0;
  position: fixed;
  bottom:0;
  z-index: 20;
  justify-content: flex-start;
}
.panelExampleBtn1{
  margin-top: 20rpx;
}

.pic_h01{
  margin-top: 64rpx;
  margin-left: 15rpx;
  width: 728rpx;
  height:1258rpx;
  margin-bottom: 300rpx;
  z-index: 15;
}
.pic_04{
  width:100%;
  height: 170rpx;
  position: fixed;
  bottom:140rpx;
  z-index: 20;
}

.panelRemind{
  width: 690rpx;
  margin-bottom: 75rpx;
  position: fixed;
  bottom: 0;
  background: #CA4B15;
  box-shadow: 0 20rpx 0 0 #8E3F1D, 0 50rpx 0 0 rgba(0,0,0,0.50);
  border-radius: 60rpx;
  background-image: radial-gradient(circle at 53% 50%, #85261E 0%, rgba(178,71,62,0.00) 50%);
}
.sysIcon_b10{
  width: 360rpx;
  height:140rpx;
  position: absolute;
  right:0;
  top:-22rpx;
}
.panelRemind1{
  width: 100%;
  justify-content: flex-start;
  margin-top: 40rpx;
  font-size: 36rpx;
  color: #FFFFFF;
  z-index: 25rpx;
}
.sysIcon_b09{
  width: 50rpx;
  height:50rpx;
  margin: 0 20rpx 0 50rpx ;
}
.panelRemind2{
  width: 650rpx;
  min-height:220rpx;
  background: #FFFFFF;
  color: #2E2E2E;
  border-radius: 40rpx;
  margin: 30rpx 0;
  justify-content: flex-start;
}
.textRemind{
  width:570rpx;
  font-weight: 400;
  font-size: 28rpx;
  align-items: flex-start;
  margin-top: 80rpx;
}
.btnReind1{
  width:590rpx;
  height:90rpx;
  background: #F0F0F0;
  border-radius: 20rpx;
  font-size: 36rpx;
  margin-top: 60rpx;
  margin-bottom: 40rpx;
}

.panelGuideContainer .pic_ha02{
  width: 370rpx;
  height: 465rpx;
}
.panelGuideContainer .pic_ha03{
  width: 250rpx;
  height: 255rpx;
}
.panelGuideContainer .pic_ha04{
  width: 359rpx;
  height: 420rpx;
}
.panelGuideContainer .pic_ha05{
  width: 329rpx;
  height: 380rpx;
}
.panelGuideContainer .pic_ha06{
  width: 570rpx;
  height: 255rpx;
}