ec.uniapp-master/pages/index/classification/classification.less

page{
  height: 100%;
}
#classification{
  /*background-color: #FFFFFF;*/
  height: 100%;
  &.hiddens {
    overflow: hidden;

  }
  .class__banner{
    width: 100%;
    //background: url("http://img1.imgtn.bdimg.com/it/u=3033504449,3572953986&fm=27&gp=0.jpg") no-repeat center;
    margin-bottom: 15px;
    swiper{
      //height: 100px;
      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .class__item_box{
	  /* #ifdef H5 */
	  padding-bottom: 50px;
	  /* #endif */
    .class__item{
      .img_item{
        position: relative;
        width: 100%;
        height: 110px;
        .img_text{
          position: absolute;
          top: 40%;
          width: 100%;
          transform: translate(0, -50%);
          text-align: center;
          .text_top{
            //display: flex;
            text-align: center;
            line-height: 90px;
            //align-items: center;
            .text_line{
              display: inline-block;
              height: 1px;
              width: 40px;
              background: #D8D8D8;
              margin-bottom: 5px;
            }
            .text_content{
              display: inline-block;
              font-size: 18px;
              color: #ffffff;
              padding: 0 8px;
              font-weight: bold;

            }
          }
          .text_btn{
            text-align: center;
            margin-top: -30px;
            font-size: 11px;
            color: #ffffff;
            bottom: 20px;
          }
        }

        image {
          width: 100%;
          height: 110px;
          object-fit: cover;
        }
      }
      .class__tag{
        padding: 10px;
        .tag__item{
          display: inline-block;
          padding: 0 5px 5px 5px;
          height: 60px;
          width: 50%;
          .tag_flex{
            background: #fff;
            display: flex;
            .tag_img{
              width: 60px;
              height: 60px;
              image{
                width: 60px;
                height: 60px;
              }
            }
            .tag_text{
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              line-height: 60px;
              color: #4A4A4A;
              font-size: 13px;
              padding-left: 7px;
            }
          }
        }
      }
    }
  }


  //  新的分类页面
  .classifical{
    display: flex;
    height: 100%;
    overflow: hidden;
    .left-menu{
      width: 90px;
      text-align: center;
      background-color:#F3F3F3;
      height: 100%;
      overflow: auto;
      .item{
        position: relative;
        width: 90px;
        height: 50px;
        color:#4A4A4A ;
        font-size: 13px;
        line-height: 50px;
        &.active{
          color:#EA4448;
          background-color: #FFFFFF;
          &::after{
            content:"";
            position: absolute;
            height:50px;
            width:2px;
            background-color:#EA4448;
            left: 0;
            top: 0;
          }
        }
      }
    }
    .right-content{
      flex: 1;
      background-color: #FFFFFF;
      height: 100%;
      overflow: auto;
      .title{
        display:flex;
        align-items: center;
        justify-content: space-between;
        color:#4A4A4A;
        height: 50px;
        line-height: 50px;
        font-size: 13px;
        padding: 0 15px;
        .iconfont{
          font-size: 13px;
          color:#909090;
        }
      }
      .list{
        display: flex;
        flex-wrap: wrap;
        padding: 0 7px;
        .list-item{
          width:33%;
          padding: 7px;
          .photo{
            width: 100%;
            image{
              width: 100%;
            }
          }
          .txt{
            font-size: 12px;
            line-height: 17px;
            color:#909090;
            padding-top: 5px;
            text-align: center;
          }
        }
      }
    }
  }
}