左右侧关联的CSS效果

最新推荐文章于 2024-11-01 16:54:21 发布

youngAda

最新推荐文章于 2024-11-01 16:54:21 发布

阅读量116

点赞数

文章标签： css

本文链接：https://blog.csdn.net/youngAda/article/details/109248595

版权

<style scoped lang="scss">
ul {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
.category-info {
  display: flex;
  flex-flow: row nowrap;
  overflow: hidden;
  width: 100%;
  text-align: center;
  .menu-left {
    flex: 0 0 2.32rem;
    background: #f5f5f5;
    .menu-item {
      color: #1f2020;
      font-size: 0.28rem;
      width: 100%;
      height: 54px;
      line-height: 54px;
      transition-duration: 0.2s;
    }
    .current {
      color: #1f2020;
      font-weight: bold;
      font-size: 0.3rem;
      background: #fff;
    }
  }
  .menu-right {
    flex: 1;
    width: 100%;
    background: #fff;
    overflow: hidden;
    .cate {
      padding: 10px;
      .title {
        text-align: left;
        font-weight: bold;
        font-size: 14px;
        color: #1f2020;
      }
      .cate-item-box {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        overflow: hidden;
        padding: 0 0.1rem;
      }
      .cate-item {
        width: 1.32rem;
        margin: 0.1rem;
        img {
          width: 100%;
          border-radius: 6px;
        }
        span {
          display: inline-block;
          font-size: 12px;
          color: #8f8f8f;
        }
      }
    }
  }
}
</style>