HanziLearn_master/pages/main/index.wxss

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

.panelTop{
  width:100%;
  justify-content: space-between;
  position: relative;
}

.home_header_bg{
  width:750rpx;
  height: 220rpx;
  position: absolute;
  top:0;
  left:0;
}

.panelTop1{
  justify-content: center;
  position: absolute;
  top:50rpx;
  left:50rpx;
  z-index: 10;
}
.panelTop1_1{
  left:170rpx;
}
.panelTop1_2{
  left:290rpx;
}

.number{
  font-style: normal;
  font-size:36rpx;
}

.panelTop11{
  color:#1E1E1E;
  font-size:22rpx;
}


.panelList{
  width:100%;
  flex-wrap: wrap;
  background-color: #DFC7A4;
}

.btn {
  border-radius: 20rpx;
  background-color: #F8F8F8;
  box-shadow: 0 20rpx 1rpx #CDB797;
}

.panelItem{
  width:330rpx;
  height:306rpx;
  background-color: #F8F8F8;
  margin:40rpx 15rpx 0 15rpx;
}

.panelItemAD{
  width:690rpx;
  height:238rpx;
  margin:40rpx 0 0 0;
  background-color: #fff;
}

.itemImg{
  width:207rpx;
  height:206rpx;
}

.panelTool{
  width:690rpx;
  margin:62rpx 0 80rpx 0;
}

.panelTool1{
  color:#593613;
  font-size:48rpx; 
}

.panelTool2{
  width:690rpx;
  margin-top:30rpx;
  justify-content: space-between;
}

.btn1{
  width:100rpx;
  height:100rpx;
}

.btn2{
  width:275rpx;
  height:100rpx;
  position: relative;
  font-size:36rpx;
  line-height: 100rpx;
  text-align: center;
}
.search{
  width:30rpx;
  height:30rpx;
}

.number2{
  min-width:53rpx;
  height:50rpx;
  border-radius: 8rpx;
  background-color: #593613;
  color:#fff;
  line-height: 50rpx;
  text-align: center;
  font-size:24rpx;
  font-family: Arial;
  position: absolute;
  right:20rpx;
}

.png02016{
  width:754rpx;
  height:35rpx;
}

.panelOther0{
  width:100%;
  height:26rpx;
  background-color: #AA6C33;
}
.panelOther{
  width:100%;
  height: 190rpx;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: #55382B;
  position: relative;
}

.panelOther1{
  color:#fff;
  margin:50rpx 0 0 50rpx;
  font-size:48rpx; 
}
.panelOther2{
  color:#fff;
  margin:0rpx 0 0 50rpx;
  font-size:28rpx; 
}

.home_triangle_up{
  width:34rpx;
  height:20rpx;
  position: absolute;
  bottom:0;
  left:100rpx;
  z-index: 10;
}
.panelProduct{
  width:100%;
  background-color: #D5CAC6;
  align-items: flex-start;
}

.cpxl_t01{
  width: 156rpx;
  height:52rpx;
  margin: 60rpx 0 0 50rpx;
}
.cpxl_t02{
  width: 190rpx;
}
.cpxl_t03{
  width: 300rpx;
}

.panelProduct1{
  width:100%;
  margin: 40rpx 0 20rpx 0;
}

.panelProduct100{
  margin: 40rpx 0 0 0;
}

.panelProduct11{
  width:330rpx;
  height:285rpx;
  background: #F8F8F8;
  border: 4rpx solid #B67249;
  box-shadow: 0 16rpx 0 0 rgba(0,0,0,0.30), inset 0 -20rpx 0 0 rgba(0,0,0,0.20);
  border-radius: 30rpx;
  margin: 0 15rpx;
  align-items: flex-start;
  position: relative;
}

.panelProduct10{
  width:690rpx;
  height:811rpx;
}

.cpxl_logo_01{
  width:90rpx;
  height:90rpx;
  margin-left: 40rpx;
}


.panelProduct111{
  font-size: 34rpx;
  font-weight: 600;
  color:#1E1E1E;
  margin: 20rpx 0 0 40rpx;
}

.panelProduct112{
  font-weight: 400;
  font-size: 24rpx;
  color: #4D4D4D;
  margin: 0 0 10rpx 40rpx;
}
.panelProduct113{
  background: #B67249;
  border-radius: 6rpx;
  font-size: 20rpx;
  color: #FFFFFF;
  text-align: center;
  width: 60rpx;
  height:34rpx;
  line-height: 34rpx;
  position: absolute;
  top:50rpx;
  right:40rpx;
}
.panelProduct114{
  font-weight: 400;
  font-size: 24rpx;
  color: #4D4D4D;
  margin: 0 0 0 40rpx;
  width: 610rpx;
}
.cpxl_ad_01{
  width:610rpx;
  height:410rpx;
  margin: 40rpx 0 0 40rpx;
}

.panelFooter1{
  font-size:24rpx;
  color:#695852;
  margin-top: 20rpx;
}
.panelFooter2{
  font-size:24rpx;
  color:#695852;
  margin-bottom: 100rpx;
}

.home_banner{
  width:100%;
  height: 280rpx;
}

.HelpInfo2 {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background-color:#F5E2BE;
  justify-content: flex-start;
  z-index: 100;
}

.HelpInfo2 .btn {
  width: 600rpx;
  height: 640rpx;
  background-color: #D2D2D2;
  border-radius: 40rpx;
  margin: 15rpx;
  position: relative;
  margin-top: 222rpx;
  box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.5);
}

.HelpInfo2 .btn1 {
  width: 100%;
  height: 640rpx;
  border-radius: 40rpx;
  color: #fff;
  text-align: center;
  font-size: 36rpx;
  justify-content: flex-start;
}

.HelpInfo2 .home_banner_window {
  width: 600rpx;
  height: 500rpx;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
}

.HelpInfo2 .btn2 {
  width: 100%;
  height: 120rpx;
  line-height: 120rpx;
  background-color: #F0F0F0;
  color: #1e1e1e;
  text-align: center;
  font-size: 48rpx;
  font-weight: 500;
  border-bottom-left-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
}
.HelpInfo2 .close2 {
  position: fixed;
  bottom:207rpx;
  font-size:26rpx;
  color: #1e1e1e;
  text-decoration: underline;
  font-weight: 500;
  z-index: 100;
  width:100%;
  height:50rpx;
}
.HelpInfo2 .close {
  width: 100%;
  height: 235rpx;
  position: fixed;
  bottom:0;
}

.HelpInfo2 .closeImage{
  width:33rpx;
  height:33rpx;
}

.PanelMiaoguo{
  width:100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 20;
  position: fixed;
  left: 0;
  top: 0;
  justify-content: flex-start;
}

.PanelMiaoguo1{
  width:100%;
  height:1055rpx;
  background-color: #1A264C;
  color:#fff;
  position: fixed;
  left: 0;
  bottom: 0;
  justify-content: flex-start;
}

.Text1{
  font-size:32rpx;
  margin-top:70rpx;
}
.Text2{
  font-size:64rpx;
}

.Text3{
  font-size:32rpx;
  text-align: center;
}

.Text4{
  font-size:32rpx;
  margin-top:50rpx;
  color:#FF970C;
}
.Text5{
  font-size:68rpx;
  color:#FF970C;
}
.btn3{
  width:580rpx;
  height:130rpx;
  border-radius: 20rpx;
  background-color:#FF970C;
  margin-top:20rpx;
}
.bm_sy_banner-open{
  width:220rpx;
  height:70rpx;
}
.bm_sy_illus{
  width:100%;
  height:360rpx;
}

.btnRecord{
  width:220rpx;
  height:80rpx;
  position: absolute;
  left:232rpx;
  top:270rpx;
  z-index: 20;
}
.btnReadme{
  width:125rpx;
  height:80rpx;
  position: absolute;
  left:35rpx;
  top:270rpx;
  z-index: 20;
}

.HelpInfo21{
  width:100%;
  height:500rpx;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  background-color: #B3443B;
}
.HelpInfo211{
  font-size:60rpx;
  margin-top:30rpx;
}
.HelpInfo212{
  font-size:36rpx;
}
.png02014{
  width:190rpx;
  height:190rpx;
}

.ad_02{
  width:670rpx;
  height:225rpx;
  margin: 40rpx 0 0 40rpx;
}