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; } .panelField2 { width: 710rpx; margin-bottom: 20rpx; border-radius: 20rpx; } .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 .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 0 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 }