miaoguo_master/pages/main/detail.wxss

page{
  background-color: #D2D2D2;
}

.square{
  background-color: #181A21;
  width:136rpx;
  line-height:53rpx;
  text-align: center;
  color: #fff;
  border-radius:10rpx;
  font-size:24rpx;
  font-weight: 500;
  z-index: 101;
  position: relative;
}

.CombinedShape1{
  width:80rpx;
  height:80rpx;
  justify-content: flex-start;
}

.CombinedShape11{
  width:19rpx;
  height:34rpx;
}

/* 工具栏 */
.panelTop {
  width: 100%;
  height: 110rpx;
  position: fixed;
  font-size: 20rpx;
  z-index: 20;
}

.panelCancel {
  width: 100rpx;
  height: 110rpx;
  margin: 0 10rpx;
}

.panelCancel0 {
  width: 70rpx;
  height: 70rpx;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}

.universalpic_light_gray_20x28{
  width: 20rpx;
  height: 28rpx;
}
.universalpic_undo_white_30p_26x20 {
  width: 26rpx;
  height: 19rpx;
}
.universalpic_han_gray_28x25{
  width: 28rpx;
  height: 25rpx;
}
.universalpic_wrench_gray_26x26 {
  width: 26rpx;
  height: 26rpx;
}

.universalpic_edit_gray_25x25 {
  width: 25rpx;
  height: 25rpx;
}

.universalpic_star_gray_34x34 {
  width: 34rpx;
  height: 34rpx;
}

.panelNumber {
  width: 218rpx;
  height: 50rpx;
  margin: 20rpx 31rpx;
  align-items: flex-start;
}

.panelNumber1 {
  font-family: 'Roboto-Black';
  font-size: 20rpx;
  margin: 0 3rpx;
  height: 50rpx;
  min-width: 50rpx;
  text-align: center;
  line-height: 50rpx;
  color: rgba(255, 255, 255, 0.5);
}

.panelNumber2 {
  color: #fff;
}

.panelNumber2Line {
  width: 70%;
  height: 6rpx;
  margin-top: -7rpx;
}


.panelField10 {
  width: 100%;
  height: 110rpx;
}

.footerShade{
  width: 100%;
  position: fixed;
  height:480rpx;
  bottom: 0;
  z-index: 1;
}

/* 段落显示************************ */

.editFieldNull{
  height:50rpx;
}
.editFieldNull2{
  height:60rpx;
}

.panelItem {
  width: 650rpx;
  font-weight: 400;
  flex-wrap: wrap;
  justify-content: flex-start;
  z-index: 5;
  position: relative;
}

.panelField1 {
  width: 100%;
  justify-content: flex-start;
  z-index: 5;
  position: relative;
}

.panelField11 {
  font-size: 48rpx;
  justify-content: flex-start;
  color: #fff;
}

.panelTag {
  width: 100%;
  min-height: 95rpx;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: 60rpx;
  z-index: 5;
}

.panelTag .panelTagLine {
  margin: 0 0 0 50rpx;
  max-width: 650rpx;
  height: 10rpx;
}

.panelTag .panelTag1 {
  margin: 0 0 0 50rpx;
  width: 650rpx;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}

.panelTag .tag {
  font-size: 46rpx;
  margin: 0 30rpx 20rpx 0;
  font-weight: 400;
  color: #F1AB1E;
}

.right2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 134rpx;
  height: 150rpx;
  align-items: flex-start;
}

.universalpic_show_white_30x30 {
  width: 36rpx;
  height: 36rpx;
  margin: 68rpx 50rpx 0 50rpx;
}

.universalpic_hide_white_34x34 {
  width: 36rpx;
  height: 20rpx;
  margin: 68rpx 50rpx 0 50rpx;
}
.universalpic_4blocks_gray_28x28{
  width: 28rpx;
  height: 28rpx;
}

.panelField20 {
  width: 100%;
  justify-content: flex-start;
  z-index: 5; 
  position: relative;
  min-height:240rpx;
}

.panelField2 {
  width: 710rpx;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  min-height:240rpx;
}

.panelField21 {
  width: 650rpx;
  font-size: 36rpx;
  margin: 40rpx;
  line-height: 66rpx;
}

.panelItem .panelSound {
  width: 40rpx;
  height: 40rpx;
  margin: 0 10rpx 0 0;
  background-color: #fff;
  border-radius: 50%;
}

.panelItem .panelSoundHover {
  background-color: #d2d2d2;
}
.panelItem .panelSoundHover1 {
  color: #d2d2d2;
}

.panelItem .universalpic_starting_tc01_26x26{
  width: 26rpx;
  height: 26rpx;
  margin: 10rpx 20rpx 10rpx 0;
}

.panelItem .universalpic_read_mark_black_20x20 {
  width: 21rpx;
  height: 20rpx;
}

.panelItem .textProblem{
  padding: 3rpx 20rpx;
  background-color: #F1AB1E;
  border-radius: 22rpx;
  text-align: center;
  font-size:28rpx;
  line-height: 45rpx;
  font-weight: 500;
  color:#1e1e1e;
  margin: 0 0 10rpx 0;
}

.panelItem .textDot{
  color: #F1AB1E;
  font-size:36rpx;
  margin-right: 20rpx;
}

.panelItem .textLine {
  text-decoration: underline;
}

.panelItem .textHighlighter {
  color:#1E1E1E;
}

.panelItem .textNormal {
  min-height: 50rpx;
  overflow:hidden; 
  color:#fff;
}

.panelItem .textBigword{
  font-size:108rpx;
  line-height: 108rpx;
}

.panelItem .textNormal2 {
  font-size: 36rpx;
}

.panelItem .textPinyin {
  text-decoration: underline;
  margin-right: 10rpx;
}


.panelItem .panelRecorder {
  width:100%;
  justify-content: flex-start;
}
.panelItem .panelRecorder0 {
  width: 168rpx;
  height: 70rpx;
  background-color: #fff;
  border-radius: 10rpx;
}


.panelItem .imageContainer {
  width: 650rpx;
  margin: 6rpx 0;
  border-radius: 20rpx;
  background-color: rgba(0,0,0,0.1);
  position: relative;
}

.panelItem .imageFree {
  width: 650rpx;
  border-radius: 6rpx;
}

.panelItem .imageContainer2 {
  width: 650rpx;
  border-radius: 10rpx;
  background-color: rgba(0,0,0,0.1);
  position: relative;
}
.panelItem .imageFree2 {
  width: 650rpx;
  border-radius: 10rpx;
}


.panelItem .BishunPlay{
  width:80rpx;
  height:80rpx;
  background-color: #9B9B9B;
  color:#fff;
  position: absolute;
  bottom:0;
  right:0;
  z-index: 10;
  font-size:28rpx;
  text-align: center;
  line-height: 80rpx;
}

.panelItem .textBr {
  width: 100%;
  height: 24rpx;
}

.panelItem .textReturn {
  width: 100%;
}

.panelItem .textReturn2 {
  width: 100%;
  height: 30rpx;
}

/* ******************************** */

/* 底部记忆选择 */

.footer{
  width: 710rpx;
  position: fixed;
  bottom: 0;
  z-index: 10;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}

.footerImage{
  width:710rpx;
  position: absolute;
  bottom:0;
  height:80rpx;
  z-index: 10;
}
.panelFooter {
  width: 710rpx;
  margin-bottom: 20rpx;
  background-color: #181a21;
  border-radius: 20rpx;
  color: #d2d2d2;
  font-size: 48rpx;
  text-align: center;
  line-height: 140rpx;
  z-index: 15;
  position: relative;
  top:0;
  left:0;
  overflow: hidden;
}

.panelFooter0 {
  line-height: 40rpx;
}

.panelBottomAnswer {
  width: 1420rpx;
  position: relative;
  top:0;
  left:355rpx;
}

.panelBottomAnswer0{
  width: 710rpx;
  font-size: 28rpx;
  justify-content: space-between;
  z-index: 10;
  height: 140rpx;
}

.iphoneX {
  width: 100%;
  height: 60rpx;
  z-index: 10;
}

.Answer {
  flex: 1;
  font-size: 24rpx;
  justify-content: flex-start;
  height: 140rpx;
}
.Answer00 {
  flex: 1;
  font-size: 24rpx;
  height: 140rpx;
  color:#D2D2D2;
}

.AnswerLeft{
  border-top-left-radius: 20rpx;
  border-bottom-left-radius: 20rpx;
}

.AnswerRight{
  border-top-right-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
  width:110rpx;
  font-size: 24rpx;
  height: 140rpx;
}

.line2{
  width:2rpx;
  height:70rpx;
  background-color: #2D313E;
}
.line3{
  width:2rpx;
  height:30rpx;
  background-color: #2D313E;
}

.AnswerHover{
  background-color: #262935;
}

.btnColor {
  height: 14rpx;
  width: 75%;
  border-radius: 4rpx;
  margin-top: 16rpx;
}

.btnTime {
  margin-top: 34rpx;
}

.Answer0 {
  background-color: #fe6659;
}

.Answer1 {
  background-color: #ffbc00;
}

.Answer1Recommend {
  height: 50rpx;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-top: 16rpx;
}

.Answer2 {
  background-color: #329468;
}

.Answer3 {
  background-color: #0a60be;
}

.Answer4 {
  background-color: #3C4152;
  width:30rpx;
}

.footer0 {
  height: 180rpx;
  width: 100%;
  z-index: 1;
}

/* 最后一页 */

.panelLast {
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  position: fixed;
  color: #fff;
  z-index: 20;
}


.text1 {
  margin: 80rpx 0 60rpx 40rpx;
  font-size: 144rpx;
}

.text1_iPad {
  margin: -80rpx 0 10rpx 40rpx;
  font-size: 144rpx;
}

.panelLastTime {
  font-size: 36rpx;
  font-weight: 400;
  color: #d2d2d2;
  margin: 0 0 40rpx 40rpx;
  align-items: flex-start;
}

.panelLastTime .time1 {
  font-size: 28rpx;
}
.panelLastTime .time11 {
  font-size: 144rpx;
  font-family: 'Roboto-Black';
}
.panelLastTime .time11_1 {
  margin-top: 70rpx;
}

.panelLastTime2{
  width:100%;
}
.panelLastTime2 .panelLastTime21{
  width:345rpx;
  height:212rpx;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius:20rpx;
  margin: 0 10rpx;
  font-size:36rpx;
  color:#d2d2d2;
  font-weight: 400;
  align-items: flex-start;
}

.panelLastTime2 .panelLastTime211{
  margin-left: 70rpx;
  font-weight: 400;
}

.panelLastTime2 .time2 {
  margin-left: 70rpx;
  justify-content: flex-start;
}
.panelLastTime2 .time21{
  font-size: 96rpx;
  font-family: 'Roboto-Black';
}
.panelLastTime2 .time21_1{
  margin: 30rpx 0 0 10rpx;
}

.panelLastTime3{
  margin: 30rpx 0 0 50rpx;
  font-size: 24rpx;
  color:#d2d2d2;
}

.panelLastTime4{
  width: 710rpx;
  height:100rpx;
  margin:20rpx 0 0 20rpx;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 20rpx;
}

.panelLastTime4 .panelLastTime41{
  font-size: 28rpx;
  margin-left: 30rpx;
  color:#f2f2f2;
}

.panelLastFooter {
  width: 100%;
  position: fixed;
  bottom: 0;
  justify-content: flex-end;
  z-index: 100;
}

.panelLastFooter .panelLastFooter1 {
  width: 730rpx;
  height: 140rpx;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
  border-bottom-left-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
  background-color: #181A21;
  margin-bottom: 10rpx;
  position: relative;
}

.panelLastFooter .panelLastFooter11 {
  width:365rpx;
  height:140rpx;
  font-size: 24rpx;
  color:#D2D2D2;
}

.icon_reload_1{
  width: 30rpx;
  height: 30rpx;
  margin: 0 20rpx 20rpx 0;
}

.icon_report_1{
  width: 24rpx;
  height: 30rpx;
  margin-bottom: 20rpx;
}

.panelLastFooter2{
  background-image: linear-gradient(141deg, #746D6B 0%, #504846 100%);
  border-radius: 10rpx;
  width:80rpx;
  height:100rpx;
  position: absolute;
  bottom:90rpx;
  left:150rpx;
  justify-content: flex-end;
}

.icon_flag_3{
  width:80rpx;
  height:75rpx;
  border-radius: 0 0 10rpx 10rpx;
}


.universalpic_undo_gray_26x20 {
  width: 26rpx;
  height: 19rpx;
  margin: 0 20rpx 0 30rpx;
}

.universalpic_screenshot_gray_30x30 {
  width: 30rpx;
  height: 30rpx;
  margin: 0 20rpx 0 30rpx;
}

 .universalpic_close_gray_24x24{
  width: 24rpx;
  height: 24rpx;
 }

.numberContainer {
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  position: fixed;
  bottom: 0;
  color: #fff;
  z-index: 20;
}

.numberContainer .numberContainer11 {
  margin: 50rpx 0 0 30rpx;
  font-size:32rpx;
}

.numberContainer .left {
  margin-left: 30rpx;
  font-weight: 400;
  font-size:28rpx;
}

.numberContainer .right3 {
  margin-right: 30rpx;
  font-weight: 500;
  font-size:28rpx;
}

.numberContainer .numberContainer12 {
  justify-content: space-between;
  height: 100rpx;
  width: 100%;
  font-weight: 400;
}

.numberContainer .numberContaineFooter{
  width: 100%;
  position: fixed;
  bottom: 0;
  align-items: flex-start;
  font-size: 36rpx;
  border-top: 1rpx solid rgba(0, 0, 0, 0.2);
  text-align: center;
  line-height: 131rpx;
}

.lineWidthAll{
  width: 100%;
  justify-content: flex-end;
  height: 1rpx;
  background-color: transparent;
}
.lineWidth720{
  width: 720rpx;
  height: 1rpx;
  background-color:rgba(0, 0, 0, 0.2);
}

.lineFooter{
  width: 100%;
  height: 1rpx;
  background-color:rgba(0, 0, 0, 0.2);
}

.lineWidth670{
  width: 670rpx;
  height: 1rpx;
  background-color:rgba(0, 0, 0, 0.2);
}

.practice_introduction_marks_a {
  width: 22rpx;
  height: 16rpx;
  margin-top: 104rpx;
}

.text2 {
  margin-top: 30rpx;
  font-size: 28rpx;
  font-weight: 400;
  text-align: center;
}

.practice_introduction_marks_b {
  width: 22rpx;
  height: 16rpx;
  margin-top: 30rpx;
}

.text3 {
  margin-top: 40rpx;
  font-size: 20rpx;
  font-weight: 500;
  text-align: center;
}

/* 更多功能 */
.numberContainerFooter1{
  width:100%;
  position: fixed;
  bottom:131rpx;
}

.numberContainerFooter102{
  width:100%;
  height: 132rpx;
  justify-content: flex-start;
}

.numberContainerFooter103{
  width:100%;
  height: 111rpx;
  justify-content: flex-start;
}
.numberContainerFooter104{
  width:100%;
  height: 100rpx;
  justify-content: flex-start;
}
.numberContainerFooter101{
  width:100%;
  height: 234rpx;
  justify-content: flex-start;
  align-items: flex-start;
}

.universalpic_sendtoback_gray_30x26{
  width: 30rpx; 
  height: 26rpx;
  margin: 0 30rpx;
}

.universalpic_practisemodel_gray_30x28{
  width: 30rpx; 
  height: 28rpx;
  margin: 0 30rpx;
}

.universalpic_autoread_gray_30x23{
  width:30rpx;
  height:23rpx;
  margin: 0 30rpx;
}

.numberContainerFooter11{
  align-items: flex-start;
  margin-top: 40rpx;
}

.numberContainerFooter111{
  font-size:36rpx;
  font-weight: 400;
}
.numberContainerFooter1111{
  margin-top: 40rpx;
}
.numberContainerFooter113{
  font-size:28rpx;
  font-weight: 400;
  margin-left: 80rpx;
}

.numberContainerFooter112{
  justify-content: flex-start;
}

.switch{
  position: absolute;
  right:30rpx;
}

.StopAudioPlay{
  position: fixed;
  top:278rpx;
  right:0rpx;
  width:170rpx;
  height:70rpx;
  border-top-left-radius: 35rpx;
  border-bottom-left-radius: 35rpx;
  z-index: 20;
  font-size:20rpx;
  color:#D2D2D2;
  line-height: 70rpx;
}

.universalpic_cardlist_gray_30x28{
  width:30rpx;
  height:28rpx;
  margin: 0 30rpx;
}

.numberContainerFooter107{
  width:100%;
  justify-content: space-between;
  height:132rpx;
}

.Arrow{
  width:16rpx;
  height:26rpx;
  margin-right: 30rpx;
}

.numberContainerFooter106{
  width:100%;
  justify-content: flex-start;
  align-items: flex-start;
  position: absolute;
  top:30rpx;
  z-index: 10;
}
.numberContainerFooter1061{
  font-size:32rpx;
  margin:0 0 0 30rpx;
}
.numberContainerFooter1062{
  font-size:20rpx;
  color:rgba(255, 255, 255, 0.6);
  margin:4rpx 0 0 30rpx;
  width:690rpx;
}

.FolderList{
  width:100%;
  height:780rpx;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top:200rpx;
  z-index: 10;
  justify-content: flex-start;
}

.FolderItem{
  width:710rpx;
  height:100rpx;
  border-radius: 10rpx;
  border:2rpx solid rgba(255,255,255,0.2);
  margin:30rpx 0 0 20rpx;
  justify-content: space-between;
}

.FolderItem0{
  margin:20rpx 0 0 20rpx;
}
.FolderItem1{
  margin:0 30rpx;
  font-size:28rpx;
  font-weight: 400;
}
.FolderItem2{
  color:rgba(255, 255, 255, 0.4);
  font-weight: 500;
}

.FolderTitle{
  margin:50rpx 50rpx 0 50rpx;
  width:650rpx;
  font-size:28rpx;
}

.numberContainerFooter105{
  width:100%;
  height: 125rpx;
  position: fixed;
  bottom:131rpx;
  justify-content: space-between;
  z-index: 50;
}


.numberContainerFooter1051{
  align-items: flex-start;
  margin: 0 0 0 30rpx;
}

.numberContainerFooter10511{
  font-size:24rpx;
  font-weight: 400;
}
.numberContainerFooter10512{
  font-size:20rpx;
  color:rgba(255, 255, 255, 0.6);
}

.FolderTitle2{
  margin: 4rpx 0 0 50rpx;
  font-size:20rpx;
  color:rgba(255, 255, 255, 0.6);
}

.universalpic_typesize_gray_30x18{ 
  width: 30rpx;  
  height: 18rpx; 
  margin: 57rpx 20rpx 0 30rpx; 
} 
 
.numberContainerFooter1121{ 
  width:108rpx; 
  line-height:73rpx; 
  border:3rpx solid #D2D2D2; 
  border-radius: 10rpx; 
  text-align: center; 
  margin: 30rpx 30rpx 0 0; 
  font-size:24rpx; 
} 
 
.numberContainerFooter1121Select{ 
  border:3rpx solid #F1AB1E; 
  color:#F1AB1E 
} 

.line4{
  width:2rpx;
  height:28rpx;
  background-color: #2D313E;
}
.mg4_iconTools_4{
  width: 28rpx;
  height:34rpx;
  margin: 0 20rpx 0 30rpx;
}

.text4{
  font-size: 24rpx;
  margin-right: 42rpx;
}