mini_program/pages/index/index.wxss

/**index.wxss**/
.top {
  padding: 30rpx;
}

.banner {
  border-radius: 16rpx;
  height: 408rpx;
  overflow: hidden;
}

.swiper-item {
  width: 100%;
  height: 100%;
  border-radius: 16rpx;
}

.b-img {
  width: 100%;
  height: 100%;
  border-radius: 16rpx;
}

.tabs {
  display: flex;
  padding-top: 30rpx;
}

.t-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.t-item image {
  width: 110rpx;
  height: 110rpx;
}

.t-item text {
  font-size: 30rpx;
  color: #262936;
  font-weight: bold;
}

.main {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding-bottom: 100rpx;
}

.main-head {
  padding: 30rpx 30rpx 0 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main-head .title {
  font-size: 34rpx;
  font-weight: 700;
  color: #262936;
}

.search {
  width: 309rpx;
  height: 63rpx;
  background: #f7f7f7;
  border: 1rpx solid #f0f0f0;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  padding: 0 40rpx;
  box-sizing: border-box;
}

.search>input {
  flex: 1;
}

.search>image {
  margin-left: 10rpx;
  width: 31rpx;
  height: 31rpx;
}

.list-box {
  flex: 1;
  overflow: hidden;
}

.list {
  height: 100%;
}

.list-item {
  border-radius: 18rpx;
  margin: 0 auto;
  margin-bottom: 24rpx;
  padding: 34rpx 30rpx 0 30rpx;
  box-sizing: border-box;
  display: flex;
}

.item-img {
  width: 166rpx;
  height: 151rpx;
  border-radius: 16rpx;
}

.list-info {
  flex: 1;
  padding-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.list-title {
  width: 484rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #262936;
  line-height: 42rpx;
}

.item-tag {
  font-size: 22rpx;
  font-weight: bold;
  display: inline-block;
  color: #fff;
  border-radius: 6rpx;
  padding: 0 10rpx;
  line-height: 42rpx;
}

.list-timer {
  font-size: 22rpx;
  color: #c3c3c3;
}

.tag-study{
  background-color: #146ae7;
}

.tag-report{
  background-color: #f7a40f;
}

.tag-research{
  background-color: #10c769;
}

.tag-promotion{
  background-color: #fe573e;
}