caimei-authentic-ross-static/css/news.scss

/* scss中可以用mixin来扩展 */
@mixin ellipsis($line: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

@media screen and (min-width: 768px) {
  .main {
    .container {
      &.news-list {
        .title {
          font-size: 34px;
          text-align: center;
          margin: 80px 0;
        }

        .new {
          display: block;
          -webkit-transition: all 0.4s;
          transition: all 0.4s;
          margin-bottom: 40px;
          .cover {
            width: 290px;
            height: 190px;
            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }

          &:hover {
            -webkit-box-shadow: 0 6px 30px rgba(6, 136, 210, 0.2);
            box-shadow: 0 6px 30px rgba(6, 136, 210, 0.2);
            .name {
              color: #0688d2;
            }
          }
          .content {
            width: 780px;
            margin-left: 49px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding: 32px 0;
            .name {
              font-size: 20px;
              -webkit-transition: all 0.4s;
              transition: all 0.4s;
            }
            .date {
              font-size: 16px;
              color: #999999;
              margin-top: 14px;
            }
            .line {
              width: 100%;
              height: 1px;
              background: #e8e8e8;
              margin: 18px 0;
            }
            .desc {
              font-size: 16px;
              color: #505050;
            }
          }
        }
      }

      .pagination {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding-top: 25px;

        li {
          background: #e8e8e8;
          margin: 0 8px;

          &.active {
            background: #0688d2;
            a {
              color: #fff;
            }
          }

          &.more {
            background: transparent !important;
            a {
              color: #505050 !important;
              min-width: unset !important;
              padding: 0 !important;
            }
          }

          &:hover {
            background: #0688d2;
            a {
              color: #fff;
            }
          }

          a {
            display: block;
            height: 32px;
            line-height: 32px;
            padding: 0 10px;
            font-size: 12px;
            color: #505050;
            min-width: 32px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
          }
        }
      }
    }
  }

  .footer {
    margin-top: 40px;
  }
}

@media screen and (max-width: 768px) {
  .main {
    .container {
      &.news-list {
        padding: 0 0.32rem;
        .title {
          font-size: 0.34rem;
          text-align: center;
          margin-top: 1.2rem;
        }

        .new {
          display: block;
          margin: 0.4rem 0;

          .cover {
            width: 2.9rem;
            height: 1.9rem;
            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
          .content {
            width: 3.96rem;
            height: 1.9rem;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding: 0.24rem;
            border: 1px solid #e8e8e8;
            border-left: 0;
            .name {
              font-size: 0.3rem;
              @include ellipsis(1);
            }
            .date {
              font-size: 0.24rem;
              color: #999999;
              margin-top: 0.06rem;
            }
            .line {
              width: 100%;
              height: 0.01rem;
              background: #e8e8e8;
              margin: 0.16rem 0;
            }
            .desc {
              font-size: 0.24rem;
              color: #505050;
              @include ellipsis(1);
            }
          }
        }
      }

      .pagination {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding-top: 0.8rem;

        li {
          background: #e8e8e8;
          margin: 0 0.12rem;

          &.active {
            background: #0688d2;
            a {
              color: #fff;
            }
          }

          &.more {
            background: transparent !important;
            a {
              color: #505050 !important;
              min-width: unset !important;
              padding: 0 !important;
            }
          }

          &:hover {
            background: #0688d2;
            a {
              color: #fff;
            }
          }

          a {
            display: block;
            height: 0.56rem;
            line-height: 0.56rem;
            padding: 0 10px;
            font-size: 12px;
            color: #505050;
            min-width: 0.56rem;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
          }
        }
      }
    }
  }

  .footer {
    margin-top: 40px;
  }
}