english_learned_master/pages/main/article.wxss

.DarkColor{
  background-color: #004433;
  color:#C1E1C1;
}
.LightColor{
  background-color: #D0ECD3;
  color:#151815;
}

/* 导航栏吸顶样式 */
.fixed-nav {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); 添加阴影效果 */
}

/* 设置不同主题下的返回箭头颜色 */
.DarkColor.fixed-nav .weui-navigation-bar__btn_goback {
  background-color: #C1E1C1 !important; /* 使用与DarkColor主题文字相同的颜色 */
}

.LightColor.fixed-nav .weui-navigation-bar__btn_goback {
  background-color: #151815 !important; /* 使用与LightColor主题文字相同的颜色 */
}

.panel1{
  width:670rpx;
  margin: 180rpx 0 250rpx 0; /* 增加上边距，确保内容不会被导航栏遮挡 */
  justify-content: flex-start;
  align-items: flex-start;
}

.textArticle{
  width:670rpx;
  font-size: 48rpx;
  line-height: 90rpx;
  font-weight: 400;
}

.textArticleTranslate{
  font-weight: 400;
  font-size: 28rpx;
  width:100%;
  margin: 20rpx 0 0 0;
}

.DarkColor .textArticleTranslate{
  color: #A6FCA6;
}
.LightColor .textArticleTranslate{
  color: #5A7D5A;
}


.panelLine{
  width:100%;
  height:8rpx;
  margin: 20rpx 0;
}
.DarkColor .panelLine{
  background: rgba(0,0,0,0.20);
}
.LightColor .panelLine{
  background: rgba(255,255,255,0.60);
}

.DarkColor .highlight{
  color: #FFDD88; 
  font-weight: bold;
}

.LightColor .highlight{
  color:#009933;
  font-weight: bold;
}


.DarkColor .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;
}

.LightColor .panelFooter{
  width: 100%;
  height:180rpx;
  background-color: #D0ECD3;
  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:370rpx;
  height:120rpx;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  margin: 0 10rpx;
  font-size:36rpx;
}
.panelFooter13{
  width:160rpx;
  height:120rpx;
  border-radius: 10rpx 5rpx 50rpx 10rpx;
}
.text02{
  font-size:24rpx;
  margin-top: 17rpx;
}

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

.sysIcon_a15{
  width:28rpx;
  height:20rpx;
}

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

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

.sysIcon_b07{
  width:100%;
  height: 697rpx;
  position: absolute;
}

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

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


.pic_08{
  width: 100%;
  position: fixed;
  top:200rpx;
}

.panelBuilding{
  z-index: 20;
  position: fixed;
  top:0;
  width:100%;
  justify-content: flex-start;
  font-weight: 700;
}

.DarkColor .panelBuilding{
  background-image: linear-gradient(180deg, rgba(0,68,51,0.70) 0%, rgba(0,20,15,0.60) 100%);
}
.LightColor .panelBuilding{
  background-image: linear-gradient(180deg, rgba(208,236,211,0.50) 0%, rgba(159,180,161,0.70) 100%);
}

.panelError{
  margin-top: 560rpx;
  font-size: 28rpx;
}

.DarkColor .panelError{
  color: #C1E1C1;
}

.LightColor .panelError{
  color: #5A7D5A;
}

.sysIcon_b14{
  width:102rpx;
  height:52rpx;
  margin-bottom: 50rpx;
}
.textError2{
  font-weight: 400;
  font-size: 24rpx;
  margin-top: 10rpx;
}




.panelBuilding1{
  width: 100%;
  position: fixed;
  top:345rpx;
}

.pic_03{
  width:100%;
  height:880rpx;
  position: absolute;
  top:0;
}
.sysIcon_b08{
  width:220rpx;
  height:220rpx;
  position: absolute;
  top:337rpx;
  z-index: 25;
}

.panelBuilding11{
  position: absolute;
  top: 190rpx;
  color: #2E2E2E;
}

.text08{
  font-size: 48rpx;
}
.text09{
  font-size: 28rpx;
  text-align: center;
  margin-top: 20rpx;
  font-weight: 400;
}

.panelBuilding12{
  position: absolute;
  top: 610rpx;
  color: #FDAD94;
}

.text10{
  font-size: 24rpx;
  text-align: center;
}
.text11{
  font-size: 28rpx;
  text-align: center;
  margin-top: 10rpx;
  font-weight: 400;
  width: 640rpx;
}

.panelAnswer{
  width:100%;
  position: fixed;
  bottom:0;
  z-index: 10;
  border-radius: 60rpx 60rpx 0 0;
  justify-content: flex-start;
}

.DarkColor .panelAnswer{
  background: #1E1E1E;
  color: #C1E1C1;
}

.LightColor .panelAnswer{
  background: #FFFFFF;
  color: #2E2E2E;
}

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

.DarkColor .text03{
  background: #1E1E1E;
  color: #f2f2f2;
}

.LightColor .text03{
  background: #FFFFFF;
  color: #2E2E2E;
}

.btnClose{
  width: 88rpx;
  line-height:60rpx;
  border-radius: 20rpx;
  font-size:24rpx;
  text-align: center;
  position: absolute;
  top:40rpx;
  right:40rpx;
}

.DarkColor .btnClose{
  background: #303030;
  color:#F2F2F2;
}

.LightColor .btnClose{
  background: #F0F0F0;
  color:#2E2E2E;
}

.btnClose2{
  width: 60rpx;
  height:60rpx;
  border-radius: 50%;
  top:40rpx;
  right:40rpx;
}


.panelAnswer1{
  width: 100%;
  height:630rpx;
}

.DarkColor .panelAnswer1{
  background-color: #1e1e1e;
 }
.LightColor .panelAnswer1{
  background-color: #FFFFFF;
}
.panelAnswer1Item{
  margin-top: 20rpx;
  width: 750rpx;
}
.panelAnswer1Item1{
  width: 750rpx;
  height:580rpx;
}
.DarkColor .panelAnswer1Item1{
  background-color: #1e1e1e;
}
.LightColor .panelAnswer1Item1{
  background-color: #fff;
}
.panelAnswer2{
  width:100%;
  margin: 30rpx 0 0 0;
  align-items: flex-start;
}
.sysIcon_c01{
  width: 40rpx;
  height:40rpx;
  margin: 10rpx 30rpx 0 0;
}

.text04{
  width: 600rpx;
  word-wrap: break-word;
  white-space: normal;
}
.text041{
  width:100%;
  font-size: 48rpx;
  word-wrap: break-word;
  white-space: normal;
}
.text042{
  width:100%;
  font-weight: 400;
  font-size: 28rpx;
  margin:10rpx 0 0 0;
}

.panelAnswer3{
  width:100%;
  margin-top: 40rpx;
  margin-bottom: 60rpx;
}
.panelAnswer31{
  width:100%;
  justify-content: flex-start;
}

.DarkColor .panelAnswer31{
  background: #1e1e1e;
}
.LightColor .panelAnswer31{
  background: #fff;
  color: #2E2E2E;
}

.DarkColor .panelAnswer310{
  background: #C1E1C1;
  color: #004433;
}
.LightColor .panelAnswer310{
  background: #009933;
  color: #FFFFFF;
}

.panelAnswer311{
  border-radius: 50%;
  width:40rpx;
  height:40rpx;
  margin: 0 30rpx 0 40rpx;
}


.DarkColor .panelAnswer311{
  background: #303030;
  border: 3rpx solid #4D4D4D;
}
.LightColor .panelAnswer311{
  background: #F8F8F8;
  border: 3rpx solid #D2D2D2;
}

.DarkColor .panelAnswer3110{
  background: #C1E1C1;
  border: 3rpx solid #C1E1C1;
}
.LightColor .panelAnswer3110{
  background: #009933;
  border: 3rpx solid #009933;
}

.sysIcon_a10{
  width:20rpx;
  height:16rpx;
}

.text05{
  width: 600rpx;
  margin: 20rpx 0;
}
.text051{
  width:100%;
  font-weight: 400;
  font-size: 36rpx;
}
.text052{
  width:100%;
  font-weight: 400;
  font-size: 28rpx;
  margin:10rpx 0 0 0;
}

.DarkColor .panelLine2{
  width:100%;
  height:10rpx;
  background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.30) 100%);
}
.LightColor .panelLine2{
  width:100%;
  height:10rpx;
  background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.10) 100%);
}

.panelAnswer4{
  width:100%;
}

.btn1{
  border-radius: 20rpx;
  width:310rpx;
  height:90rpx;
  margin:60rpx 15rpx;
  font-size: 36rpx;
}


.DarkColor .btn1{
  background: #303030;
}
.LightColor .btn1{
  background: #F0F0F0;
}

.btn10{
  color: #1E1E1E;
}

.text06{
  font-size: 28rpx;
  color: #F2F2F2;
}

.btn2{
  width:670rpx;
  height:90rpx;
  border-radius: 20rpx;
  margin: 70rpx 0 40rpx 0;
}

.DarkColor .btn2{
  background: #303030;
  color:#F2F2F2;
}

.LightColor .btn2{
  background: #F0F0F0;
  color:#2E2E2E;
}

.panelAnswer5{
  width:100%;
}
.panelAnswer51{
  width:100%;
  justify-content: space-between;
  margin: 40rpx 0;
}
.text12{
  margin-left: 40rpx;
  font-size: 28rpx;
}

.DarkColor .text12{
  color:#F2F2F2;
}

.LightColor .text12{
  color:#2E2E2E;
}

.text13{
  width: 670rpx;
  font-size: 24rpx;
  font-weight: 400;
  margin-bottom: 30rpx;
}

.DarkColor .text13{
  color: #E3E3E3;
}

.LightColor .text13{
  color:#787878;
}
.panelLine3{
  width:670rpx;
  height:1rpx;
  background-color: #131313;
}
.panelAnswer510{
  margin-bottom: 100rpx;
}
.switchClass{
  margin-right: 40rpx;
}

/* 自定义switch样式 */
/* 修改switch关闭时的背景颜色 */
.DarkColor .wx-switch-input {
  background-color: #D2D2D2 !important; /* 深色主题下关闭时的颜色 */
}

.LightColor .wx-switch-input {
  background-color: #D2D2D2 !important; /* 浅色主题下关闭时的颜色 */
}

/* 修改switch选中时的颜色 */
.wx-switch-input.wx-switch-input-checked {
  border-color: #4aa010 !important;
  background-color: #4aa010 !important;
}


.wx-swiper-dot {
  width: 14rpx !important;
  height: 14rpx !important;
  margin-left: 5rpx !important;
  margin-right: 5rpx !important;
}


.DarkColor .wx-swiper-dot {
  background-color: #4d4d4d !important;
}

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

.DarkColor .wx-swiper-dot-active {
  background-color: #C1E1C1 !important;
}
.LightColor .wx-swiper-dot-active {
  background-color: #787878 !important;
}

/* 自定义swiper指示点位置 */
.wx-swiper-dots {
  position: absolute;
  right: -20rpx !important;
  left: unset !important;
}