分类页

渐变色分类页

预览

将themes\butterfly\source\css\_page\categories.styl内容全部替换即可

.category-lists
  .category-title
    font-size: 2.57em

    +maxWidth768()
      font-size: 2em

  .category-list
    gap: 12px
    padding: 0 
    display: flex
    flex-wrap: wrap

    .category-list-item
      cursor: pointer
      width: calc(100% / 3 - 8px)
      padding: 1rem 2rem
      border-radius: 15px
      height: 130px
      font-size: 1.5rem
      font-weight: 600
      list-style: none
      position: relative

      @media screen and (max-width: 950px)
        width: calc(50% - 6px)

      @media screen and (max-width: 768px)
        width: 95%
        margin: auto

      &:hover
        .category-list-link::after
          width: 100%
          transition: all .5s
        
      &:nth-child(1)
        background: linear-gradient(to right, #fbd786, #f7797d)
      
      &:nth-child(2)
        background: linear-gradient(to right, #00b09b, #96c93d)
      
      &:nth-child(3)
        background: linear-gradient(to right, #ff6e7f, #bfe9ff)
      
      &:nth-child(4)
        background: linear-gradient(to right, #ef32d9, #89fffd)
      
      &:nth-child(5)
        background: linear-gradient(to right, #c0c0aa, #1cefff)
      
      &:nth-child(6)
        background: linear-gradient(to right, #ff5f6d, #ffc371)

      &:nth-child(7)
        background: linear-gradient(to right, #9796f0, #fbc7d4)

      &:nth-child(8)
        background: linear-gradient(to right, #81baff, #79cbca)

      &:nth-child(9)
        background: linear-gradient(to right, #4776e6, #8e54e9)

      &:nth-child(10)
        background: linear-gradient(to right, #acb6e5, #86fde8)

      .category-list-link
        color: var(--light-grey)
        position: absolute
        height: calc(100% - 2rem)
        width: calc(100% - 4rem)

        &::before 
          content: '|'
          color: var(--light-grey)
          margin: -2px 10px 0 0

        &::after
          content: ''
          position: relative
          width: 0
          bottom: 0
          display: block
          height: 3px
          border-radius: 3px
          background-color: #fff

      .category-list-count
        color: var(--light-grey)
        position: absolute
        bottom: 1rem

        &:before
          content: '\f02d'
          padding-right: 15px
          font-size: 1.3rem
          font: var(--fa-font-solid)