english_learned_master/packageReader/main/article.wxss

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

.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: 40rpx 0 250rpx 0; /* 增加上边距，确保内容不会被导航栏遮挡 */
  justify-content: flex-start;
  align-items: flex-start;
}

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

.textArticleTranslate{
  font-weight: 400;
  font-size: 28rpx;
  width:100%;
  margin: 30rpx 0 40rpx 0;
  line-height:40rpx;
}

.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;
}
.DarkColor .sentence-def-highlight {
  color: #52C41A; 
}

.LightColor .highlight{
  color:#009933;
  font-weight: bold;
}
.LightColor .sentence-def-highlight {
  color: #1890FF; 
}

.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:620rpx;
}
.btn3{
  width:310rpx;
  height:90rpx;
  background: #303030;
  border-radius: 20rpx;
  color:#F2F2F2;
  margin-top: 50rpx;
}


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

.DarkColor .panelError{
  color: #C1E1C1;
}

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

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

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


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

/* 翻译 */
.panelTranslate{
  width: 710rpx;
  min-height:170rpx;
  z-index: 30;
  position: fixed;
  bottom: 50rpx;
  left:20rpx;
  background: #F0F0F0;
  box-shadow: 0 30rpx 0 0 rgba(0,0,0,0.50);
  border-radius: 40rpx;
  align-items: flex-start;
  justify-content: flex-start;
  color: #2E2E2E;
}

.panelTranslate2{
  height:1000rpx;
}

.panelTranslateTest1{
  width: 630rpx;
  margin: 30rpx 0 20rpx 40rpx;
  font-size: 36rpx;
  font-weight: 700;
}
.panelTranslateTest10{
  margin: 30rpx 0 20rpx 0rpx;
}
.panelTranslateTest2{
  width: 630rpx;
  margin:0 0 30rpx 40rpx;
  font-size: 36rpx;
  font-weight: 400;
}
.panelTranslateCollect{
  position: absolute;
  top:0;
  right:0;
}
.panelTranslateCollect1{
  width:80rpx;
  height:90rpx;
}

.panelTranslate21{
  width: 100%;
}

.panelTranslateScroll{
  width:100%;
  height:910rpx;
  justify-content: flex-start;
  align-items: flex-start;
}

.sysIcon_a35{
  width: 30rpx;
  height:30rpx;
}
.sysIcon_a45{
  width: 26rpx;
  height:30rpx;
}
.sysIcon_a09{
  width: 20rpx;
  height:20rpx;
}
.panelTranslate22{
  width: 100%;
  justify-content: flex-start;
}

.panelTranslate22Text{
  height:100rpx;
  font-size: 36rpx;
  margin-right: 30rpx;
}
.panelTranslate22Text0{
  margin-left: 40rpx;
}
.sysIcon_a44{
  width: 38rpx;
  height:30rpx;
  margin-left: 16rpx;
}
.panelTranslateLine{
  width:630rpx;
  height:1rpx;
  background-color: #d2d2d2;
  margin-left: 40rpx;
}

.panelTranslate23{
  width: 100%;
  display: flex;
  white-space: nowrap;
}
.panelTranslate231{
  line-height:50rpx;
  border: 3rpx solid #D2D2D2;
  border-radius: 25rpx;
  padding: 0 20rpx;
  margin: 30rpx 0 30rpx 40rpx;
  display: inline-block;
  font-size: 24rpx;
}

.panelTranslate232{
  margin: 30rpx 0 30rpx 20rpx;
}
.panelTranslate24{
  width:630rpx;
  align-items: flex-start;
  color:#2E2E2E;
}
.panelTranslate241{
  width: 100%;
  margin: 30rpx 0 0 40rpx;
  font-weight: 400;
  font-size: 28rpx;
}
.panelTranslate242{
  font-weight: 700;
}
.panelTranslate243{
  margin-top: 0;
}
.panelTranslateText1{
  text-decoration: underline;
}

/* 生成中 */
.panelBuildindParent{
  z-index: 50;
}

.pic_08{
  width: 100%;
  position: fixed;
  top:0rpx;
  z-index: 50;
}

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

.panelBuildingDarkColor{
  background-image: linear-gradient(180deg, rgba(0,68,51,0.70) 0%, rgba(0,20,15,0.60) 100%);
}
.panelBuildingLightColor{
  background-image: linear-gradient(180deg, rgba(208,236,211,0.50) 0%, rgba(165,221,187,0.50) 100%);
}

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

.pic_03{
  width:100%;
  height:1050rpx;
  position: absolute;
  top:0;
}
.sysIcon_b08{
  width:100%;
  height:150rpx;
  position: absolute;
  top: 353rpx;
  z-index: 25;
}

.panelBuilding11{
  position: absolute;
  top: 150rpx;
  left:100rpx;
  color: #2E2E2E;
  align-items: flex-start;
}

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

.panelBuilding12{
  position: absolute;
  top: 533rpx;
  color: #FDAD94;
  align-items: flex-start;
}

.text10{
  margin-left: 50rpx;
  font-size: 24rpx;
  text-align: center;
}

.panelBuilding121{
  width:650rpx;
  height: 70rpx;
  background: rgba(0,0,0,0.25);
  border-radius: 35rpx;
  margin: 0 0 20rpx 0;
}
.panelBuilding122{
  width:252rpx;
  height: 70rpx;
  font-size: 28rpx;
  font-weight: 400;
}

.sysIcon_a17{
  width:30rpx;
  height:30rpx;
  margin: 5rpx 20rpx 0 0;
}
.panelBuilding121text{
  width:550rpx;
  font-size: 28rpx;
  font-weight: 400;
  overflow: hidden;
  white-space: nowrap;
}

.panelGuideContainer .pic_ha07{
  width: 610rpx;
  height: 378rpx;
}
.panelGuideContainer .pic_ha08{
  width: 610rpx;
  height: 643rpx;
}

.panelPercentage {
  /* 若使用绝对定位，可参考如下（根据实际布局微调 top/left/right/bottom） */
  position: fixed;
  top: 4rpx;
  right: 20rpx;

  /* 尺寸 */
  font-size: 32rpx;           /* 字体大小，可根据整体设计调整 */
  min-width: 80rpx;          /* 保证数字不会太拥挤，可根据需要调整 */
  height: 50rpx;              /* 高度，便于垂直居中或布局整齐 */
  line-height: 50rpx;         /* 行高，实现垂直居中 */

  /* 颜色与背景 */
  color: #333333;             /* 深色文字，确保清晰易读，也可以使用 #000000 或主题色 */
  background-color: #f5f5f5;  /* 浅灰背景，增加层次感，也可用透明或主题色 */
  border-radius: 30rpx;       /* 圆角，使显示更柔和，数值约为高度的一半 */

  /* 字体样式 */
  font-weight: bold;          /* 加粗，突出百分比数字 */
  text-align: center;         /* 文字居中，配合 line-height 实现垂直居中 */

  /* 内边距（如果需要） */
  padding: 0 20rpx;    
  /* 外边距（如有需要，用来与其他元素保持间距） */
  margin: 10rpx 0;            /* 上下外边距，根据布局调整 */
}