HanziLearn_master/pages/main/detail.wxss

.container {
  background-color: #F0F0F0;
  justify-content: flex-start;
  font-weight: 500;
}

.container .bottom{
  width:100%;
  height:160rpx;
  position: fixed;
  bottom:0;
  background-color: #CDB797;
  justify-content: flex-end;
  z-index: 100;
}
.container .bottom1{
  width:100%;
  height:140rpx;
  background-color: #1B1B1B;
  text-align: center;
  line-height: 140rpx;
  font-size: 48rpx;
  color: #f0f0f0;
}

.container .bottom1 .btn{
  width:20%;
  height:120rpx;
}

.container .bottom1 .btnImage05004{
  width:36rpx;
  height:36rpx;
}

.container .bottom1 .btnImage05005{
  width:45rpx;
  height:44rpx;
}

.container .bottom1 .btnImage05002{
  width:32rpx;
  height:34rpx;
}

.container .bottom1 .btnImage05006{
  width:42rpx;
  height:44rpx;
}

.container .bottom1 .btnImage022{
  width:40rpx;
  height:40rpx;
}

.container .bottom1 .btnImage05001{
  width:33rpx;
  height:40rpx;
}

.main{
  width:100%;
  justify-content: flex-start;
  position: fixed;
  top:0;
  left:0;
  min-height:1050rpx;
}

.main .pinyin{
  font-size:88rpx;
  margin-top: 212rpx;
  font-family: 'GB Pinyinok-C';
  font-weight: normal;
  font-style: normal;
  height:110rpx;
}

.main .pinyinCssIpad{
  margin-top: 112rpx;
}

.main .wordImage{
  margin-top: 40rpx;
  margin-right: 10rpx;
  width:366rpx;
  height:370rpx;
}

.main .ShowHanziContainer{
  width: 100%;
  position: fixed;
  top:320rpx;
  left:0;
  background-color: #F0F0F0;
}
.main .ShowHanziContainer .btn{
  width: 48%;
  height:404rpx;
}
.main .ShowHanziContainer .line{
  width: 4rpx;
  height:120rpx;
  background-color: #D2D2D2;
}
.main .ShowHanziContainer .image05019{
  width:123rpx;
  height:103rpx;
}
.main .ShowHanziContainer .image05020{
  width:100rpx;
  height:100rpx;
}



.detail{
  width:100%;
  justify-content: flex-start;
  position: absolute;
  top:0;
  left:0;
  z-index: 10;
  overflow-x: hidden;
  background-color: #F0F0F0;
  
}
.detail .bishun{
  width:758rpx;
  height:758rpx;
  position: absolute;
  top:-4rpx;
  left:-4rpx;
  z-index: 10;
}
.detail .line{
  width:100%;
  height:10rpx;
  position: absolute;
  top:748rpx;
  background-color: #F0F0F0;
  z-index: 20;
}
.detail .title{
  width:100%;
  height:125rpx;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: #F0F0F0;
}
.detail .title1{
  margin: 50rpx 0 0 30rpx;
  font-size:32rpx;
}
.detail .title2{
  margin-top: 751rpx;
}

.detail .content{
  width:100%;
  background-color: #fff;
  justify-content: flex-start;
  align-items: flex-start;
  font-size:28rpx;
  font-weight: 400;
}


.detail .pinyin{
  min-width:201rpx;
  height:74rpx;
  border-radius: 10rpx;
  border:1rpx solid #979797;
  margin: 50rpx 0 50rpx 40rpx;

}
.detail .btnImage05008{
  width:41rpx;
  height:34rpx;
  margin-left: 20rpx;
}


.detail .content1{
  width:100%;
  justify-content: space-between;
}

.detail .left{
  margin: 30rpx;
}

.detail .right{
  margin: 60rpx;
}

.detail .line2{
  width:100%;
  height:1rpx;
  background-color: #fff;
  justify-content: flex-end;
}

.detail .line3{
  width:720rpx;
  height:1rpx;
  background-color: #D2D2D2;
}


.detail .content2{
  margin: 30rpx 20rpx 30rpx 30rpx;
  background-color: #fff;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-start;
}


.detail .pinyin2{
  font-weight: 600;
  font-size:30rpx;
  justify-content: flex-start;
}
.detail .pinyin3{
  font-family: 'GB Pinyinok-C';
  font-weight: normal;
  font-style: normal;
  margin: 0 10rpx;
}

.detail .explain{
  align-items: flex-start;
  margin-bottom: 5rpx;
}

.detail .bottom1{
  width: 100%;
  background-color: #fff;
  height:160rpx;
}

.detail .combineWords{
  margin-right: 30rpx;
}

.settingContainer {
  position: absolute;
  top: 0;
  background-color: #E3E3E3;
  color: #1e1e1e;
  z-index: 200;
}

.settingContainer .title1 {
  width: 100%;
  height: 125rpx;
  background-color: #E3E3E3;
}

.settingContainer .title1_1 {
  margin: 50rpx 0 0 30rpx;
  font-size: 32rpx;
}

.settingContainer .title2 {
  width: 100%;
  background-color: #FFFFFF;
  font-size: 28rpx;
  height: 100rpx;
  justify-content: space-between;
  font-weight: 400;
}

.settingContainer .title2_1 {
  margin-left: 30rpx;
  align-items: flex-start;
}

.settingContainer .title2_2 {
  margin-right: 30rpx;
}

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

.settingContainer .title3 {
  width: 100%;
  background-color: #FFFFFF;
  font-size: 28rpx;
  height: 139rpx;
  justify-content: space-between;
  font-weight: 400;
}

.settingContainer .title3_2 {
  font-size: 24rpx;
}

.settingContainer .line {
  width: 100%;
  height: 2rpx;
  background-color: #F8F8F8;
  align-items: flex-end;
}

.settingContainer .line1 {
  width: 720rpx;
  height: 1rpx;
  background-color: #E3E3E3;
}

.settingContainer .bottom {
  width:100%;
  height:160rpx;
  position: fixed;
  bottom:0;
  background-color: #CDB797;
  justify-content: flex-end;
}
.settingContainer .bottom1{
  width:100%;
  height:140rpx;
  background-color: #1B1B1B;
  text-align: center;
  line-height: 140rpx;
  font-size: 48rpx;
  color: #f0f0f0;
}
.settingContainer .picker{
  text-align: right;
  width:200rpx;
  height:100rpx;
  line-height: 100rpx;
}

.settingMenu {
  position: fixed;
  top: 0;
  background-color: rgba(46, 49, 55, 0.9);
  z-index: 300;
}

.settingMenu1 {
  width: 100%;
  justify-content: flex-end;
  position: fixed;
  bottom: 0;
  background-color: #d2d2d2;
}

.settingMenuBasic {
  width: 100%;
  height: 110rpx;
  line-height: 110rpx;
  text-align: center;
  background-color: #fff;
  color: #1e1e1e;
  font-size: 36rpx;
  font-weight: 400;
  position: relative;
}

.settingMenuBasic2 {
  width: 100%;
  color: #1e1e1e;
  font-weight: 600;
  height: 173rpx;
  background-color: #d2d2d2;
  font-size: 24rpx;
  justify-content: center;
  align-items: center;
}

.settingMenuIcon {
  width: 80rpx;
  height: 60rpx;
  margin-bottom: 23rpx;
}

.SelectLogo {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  left: 40rpx;
  top: 35rpx;
}

.main .hanziEnd {
  font-family: 'Century Gothic';
  font-weight: bold;
  font-style: normal;
  color: #1e1e1e;
  font-size:36rpx;
  margin-top:102rpx;
}

.main .hanziEnd2 {
  border-bottom:6rpx solid #1e1e1e;
  min-width: 144rpx;
  margin-top:20rpx;
  padding-bottom: 20rpx;
  text-align: center;
  font-size:48rpx;
}

.main .hanziEnd3 {
  margin-top:20rpx;
  font-size:48rpx;
}

.main .btnImage04006{
  width:60rpx;
  height:95rpx;
}

.main .finished{
  margin-top: 170rpx;
  width:200rpx;
  height:200rpx;
  background-color: #CDB797;
  border-radius: 50%;
}

.main .finished1{
  width:176rpx;
  height:176rpx;
  background-color: #F5E2BE;
  border-radius: 50%;
}
.main .finished2{
  background-color: #D2D2D2;
}

.main .finished3{
  background-color: #F0F0F0;
}


.main .Remind{
  min-width: 108rpx;
  height:60rpx;
  background-color: #262626;
  color:#D2D2D2;
  text-align: center;
  line-height: 60rpx;
  font-size:24rpx;
  position: fixed;
  top:946rpx;
  left:323rpx;
  z-index: 20;
  opacity: 0;
  border-radius: 30rpx;
}

.main .Remind2{
  width:180rpx;
  left:287rpx;
}
.main .Remind3{
  width:132rpx;
  left:310rpx;
}


.help {
  position: fixed;
  top: 0;
  background-color: rgba(0, 0, 0, 0);  
  z-index: 100;
}

.help .help1 {
  margin-top: 350rpx;
  /* background-color: rgba(255, 255, 255, 0.3);  */
  width: 100%;
  height: 300rpx;
  z-index: 100;
}

.helpGif {
  width: 114rpx;
  height: 170rpx;
  position: fixed;
  z-index: 100;
}

.helpPosition1 {
  left: 327rpx;
  top: 588rpx;
}