kind.wxss 2.4 KB
@import '../pocketlesson/pocketlesson.wxss';

.kindnav{
height:80rpx;
display:flex;
justify-content:space-between;
text-align:center;
white-space:nowrap;
overflow-x:scroll;
align-items:center;

background:#fff;
font-size:0;
border-bottom:2rpx solid #f5f5f5;
padding:0 32rpx;

}

.kindnav_item {
white-space:nowrap;
list-style:none;
font-size:28rpx;
color:#8D8D8D;
width:auto;
padding:0 36rpx;
position:relative;



}
.kindactive {
  color:#007AFF;
}
.kindactive:after{
  display:block;
  content:"";
  width:70rpx;
  height:2rpx;
  background: #007AFF;
  position: absolute;
  bottom:-20rpx;
  left:0;
  right:0;
  margin: 0 auto;
}
.kindname{
  display:flex;
  justify-content: center;
  align-items: center;
  padding: 24rpx 0 0;
  border-top:1rpx solid #f5f5f5;
}
.kindimg{
  width:32rpx;
  height:26rpx;
  font-size: 0;
}
.kindimg image{
  width:100%;
  height:100%;
}
.kindtypename{
  color:#333333;
  font-size: 34rpx;
  padding: 0 34rpx;
  font-weight: bold;
}
.kindlist{
  display:flex;
  align-items: center;
  padding:0 32rpx;
  flex-wrap: wrap;
}
.kindlistitem{
  width:326rpx;
  /* height:250rpx; */
  margin-top: 23rpx;
  border:1rpx solid#f5f5f5;
  padding: 19rpx 0;
  box-shadow:0px 1px 4px 0px rgba(64,64,64,0.11);

}
.kindlistitemimg{
  width:290rpx;
  /* height:196rpx; */
  max-height: 196rpx;
  overflow: hidden;
  font-size: 0;
  margin: 0 auto;
}
.kindlistitemimg image{
  width:100%;
}
.kindlistitemnaem{
  width:290rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color:#333333;
  font-size: 32rpx;
  /* text-align: center; */
  margin: 14rpx auto 0;
}
.kindlistitem:nth-child(2n){
  margin-left: 26rpx;
}
.kindseemore{
  width:180rpx;
  height:105rpx;
  font-size: 0;
  margin: 10rpx auto 25rpx;
  position: relative;

}
.kindseemore image{
  width:100%;
  height:100%;
}
.kindmoreword{
  color:#333333;
  font-size: 28rpx;
  position: absolute;
  top:12rpx;
  left:0;
  right:0;

  text-align: center;

}
.kindlowrow{
  width:58rpx;
  height:22rpx;
  font-size: 0;
  position: absolute;
  top:56rpx;
  bottom:12rpx;
  left:0;
  right:0;
  margin: 0 auto;
}
.kindlowrow image{
  width:100%;
  height:100%;
}
.hiderow{
  width:58rpx;
  height:22rpx;
  font-size: 0;
  position: absolute;
  top:12rpx;
  left:0;
  right:0;
  margin: 0 auto;
}
.hide{
  color:#333333;
  font-size: 28rpx;
  position: absolute;
  top:42rpx;
  bottom:12rpx;
  left:0;
  right:0;
  margin: 0 auto;
  text-align: center;
}