caimei-authentic-website-ross/pages/news/index.vue

<template>
  <div>
    <!-- banner区域 start -->
    <div id="banner" class="swiper-container banner">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a href="https://mp.weixin.qq.com/s/t6CwZNTit7foTLTwPmn-Vg" target="_blank"><img src="/img/news-banner-1.jpg" alt="" /></a>
        </div>
        <div class="swiper-slide">
          <a href="https://mp.weixin.qq.com/s/2_6rKIZIZ005ns5nCBc3SQ" target="_blank"><img src="/img/news-banner-2.jpg" alt="" /></a>
        </div>
        <div class="swiper-slide">
          <a href="https://mp.weixin.qq.com/s/bo1NYlIOr19O8aCLupFFOQ" target="_blank"><img src="/img/news-banner-3.jpg" alt="" /></a>
        </div>
        <div class="swiper-slide">
          <a href="https://mp.weixin.qq.com/s/ft1Ch0DsrF3bp9krUrRXPQ" target="_blank"><img src="/img/news-banner-4.jpg" alt="" /></a>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <!-- banner区域 end -->

    <div class="main">
      <div class="container">
        <div class="news-list">
          <div class="news-item">
            <div class="cover">
              <a href="https://mp.weixin.qq.com/s/mlaAUsziUoQvOBP0iDh3Pw" target="_blank"><img src="/img/news-cover-15.jpg" alt="" /></a>
            </div>
            <div class="title">案例分享 | 摩洛哥足球教练的康复历程</div>
            <div class="line"></div>
            <div class="foot">
              <a href="https://mp.weixin.qq.com/s/mlaAUsziUoQvOBP0iDh3Pw" target="_blank" class="link">点击浏览</a>
              <div class="date">2023/06/02</div>
            </div>
          </div>
          <div class="news-item">
            <div class="cover">
              <a href="https://mp.weixin.qq.com/s/mk8XXvvFYPQnK9u_FSn8mQ" target="_blank"><img src="/img/news-cover-14.jpg" alt="" /></a>
            </div>
            <div class="title">程晓玥官宣当妈！西班牙ROS'S助她解决产后烦恼</div>
            <div class="line"></div>
            <div class="foot">
              <a href="https://mp.weixin.qq.com/s/mk8XXvvFYPQnK9u_FSn8mQ" target="_blank" class="link">点击浏览</a>
              <div class="date">2023/05/23</div>
            </div>
          </div>
          <div class="news-item">
            <div class="cover">
              <a href="https://mp.weixin.qq.com/s/0VmZkSw-UQJfJq3zoT3XQA" target="_blank"><img src="/img/news-cover-13.jpg" alt="" /></a>
            </div>
            <div class="title">CBE中国美容博览会完美落幕，ROSS黑科技持续震撼魔都</div>
            <div class="line"></div>
            <div class="foot">
              <a href="https://mp.weixin.qq.com/s/0VmZkSw-UQJfJq3zoT3XQA" target="_blank" class="link">点击浏览</a>
              <div class="date">2023/05/14</div>
            </div>
          </div>
          <div class="news-item">
            <div class="cover">
              <a href="https://mp.weixin.qq.com/s/gTr_ScIUigyB37krKETlYQ" target="_blank"><img src="/img/news-cover-12.jpg" alt="" /></a>
            </div>
            <div class="title">西班牙ROSS || 智能黑科技，专注改善睡眠障碍</div>
            <div class="line"></div>
            <div class="foot">
              <a href="https://mp.weixin.qq.com/s/gTr_ScIUigyB37krKETlYQ" target="_blank" class="link">点击浏览</a>
              <div class="date">2023/04/14</div>
            </div>
          </div>
          <div class="news-item">
            <div class="cover">
              <a href="https://mp.weixin.qq.com/s/lVYCg_Ze28TlkPbpPjFC0g" target="_blank"><img src="/img/news-cover-11.jpg" alt="" /></a>
            </div>
            <div class="title">广州美博会圆满结束，西班牙ROSS精彩永不落幕！</div>
            <div class="line"></div>
            <div class="foot">
              <a href="https://mp.weixin.qq.com/s/lVYCg_Ze28TlkPbpPjFC0g" target="_blank" class="link">点击浏览</a>
              <div class="date">2023/03/12</div>
            </div>
          </div>


          <div class="news-item">
            <div class="cover">
              <a href="https://mp.weixin.qq.com/s/Sn4ARzEf10Z_hIEcIswu1g" target="_blank"><img src="/img/news-cover-01.png" alt="" /></a>
            </div>
            <div class="title">ROS'S探店 | 苏州人情味 · 打卡指南</div>
            <div class="line"></div>
            <div class="foot">
              <a href="https://mp.weixin.qq.com/s/Sn4ARzEf10Z_hIEcIswu1g" target="_blank" class="link">点击浏览</a>
              <div class="date">2022/11/04</div>
            </div>
          </div>
          <div class="news-item">
            <div class="cover">
              <a href="https://mp.weixin.qq.com/s/PkI8dk61lZeLXS8aWdUGQQ" target="_blank"><img src="/img/news-cover-02.png" alt="" /></a>
            </div>
            <div class="title">西班牙ROS'S携新品亮相SpaChina中国养生与水疗峰会!</div>
            <div class="line"></div>
            <div class="foot">
              <a href="https://mp.weixin.qq.com/s/PkI8dk61lZeLXS8aWdUGQQ" target="_blank" class="link">点击浏览</a>
              <div class="date">2022/10/28</div>
            </div>
          </div>
          <div class="news-item">
            <div class="cover">
              <a href="https://mp.weixin.qq.com/s/pIBE7S1cDG3qOkGDZXaGXg" target="_blank"><img src="/img/news-cover-03.png" alt="" /></a>
            </div>
            <div class="title">西班牙ROS'S受邀出席SpaChina中国养生与水疗峰会</div>
            <div class="line"></div>
            <div class="foot">
              <a href="https://mp.weixin.qq.com/s/pIBE7S1cDG3qOkGDZXaGXg" target="_blank" class="link">点击浏览</a>
              <div class="date">2022/10/20</div>
            </div>
          </div>
          <div class="news-item">
            <div class="cover">
              <a href="https://mp.weixin.qq.com/s/HiEWESthowKQCG7tdCJwCQ" target="_blank"><img src="/img/news-cover-04.png" alt="" /></a>
            </div>
            <div class="title">ROS'S探店 | 常熟首家ROS'S认证机构 · 打卡指南</div>
            <div class="line"></div>
            <div class="foot">
              <a href="https://mp.weixin.qq.com/s/HiEWESthowKQCG7tdCJwCQ" target="_blank" class="link">点击浏览</a>
              <div class="date">2022/10/14</div>
            </div>
          </div>
          <div class="news-item">
            <div class="cover">
              <a href="https://mp.weixin.qq.com/s/87Nve7cISNe9hMiUfBUO5g" target="_blank"><img src="/img/news-cover-05.png" alt="" /></a>
            </div>
            <div class="title">国庆小长假，与ROS'S偷偷“卷”起来！</div>
            <div class="line"></div>
            <div class="foot">
              <a href="https://mp.weixin.qq.com/s/87Nve7cISNe9hMiUfBUO5g" target="_blank" class="link">点击浏览</a>
              <div class="date">2022/09/30</div>
            </div>
          </div>
          <div class="news-item">
            <div class="cover">
              <a href="https://mp.weixin.qq.com/s/bo1NYlIOr19O8aCLupFFOQ" target="_blank"><img src="/img/news-cover-06.png" alt="" /></a>
            </div>
            <div class="title">西班牙ROS'S便携式康复理疗设备 | 迈向科技产康新高度</div>
            <div class="line"></div>
            <div class="foot">
              <a href="https://mp.weixin.qq.com/s/bo1NYlIOr19O8aCLupFFOQ" target="_blank" class="link">点击浏览</a>
              <div class="date">2022/09/23</div>
            </div>
          </div>
          <div class="news-item">
            <div class="cover">
              <a href="https://mp.weixin.qq.com/s/eRyMKfvwk4kjaTf2dJUXCw" target="_blank"><img src="/img/news-cover-07.png" alt="" /></a>
            </div>
            <div class="title">西班牙ROS'S | 为什么我这么穷，我还能有“富贵包”？</div>
            <div class="line"></div>
            <div class="foot">
              <a href="https://mp.weixin.qq.com/s/eRyMKfvwk4kjaTf2dJUXCw" target="_blank" class="link">点击浏览</a>
              <div class="date">2022/09/16</div>
            </div>
          </div>
          <div class="news-item">
            <div class="cover">
              <a href="https://mp.weixin.qq.com/s/IYrNOAgthPGvqcztzAzhbw" target="_blank"><img src="/img/news-cover-08.png" alt="" /></a>
            </div>
            <div class="title">在厕所时，千万不要做这个“姿势”！</div>
            <div class="line"></div>
            <div class="foot">
              <a href="https://mp.weixin.qq.com/s/IYrNOAgthPGvqcztzAzhbw" target="_blank" class="link">点击浏览</a>
              <div class="date">2022/08/26</div>
            </div>
          </div>
          <div class="news-item">
            <div class="cover">
              <a href="https://mp.weixin.qq.com/s/KwYJv5WABtJtWSd_Amsxjg" target="_blank"><img src="/img/news-cover-09.png" alt="" /></a>
            </div>
            <div class="title">真人实证 | 00后自媒体辣妈养成记！</div>
            <div class="line"></div>
            <div class="foot">
              <a href="https://mp.weixin.qq.com/s/KwYJv5WABtJtWSd_Amsxjg" target="_blank" class="link">点击浏览</a>
              <div class="date">2022/08/19</div>
            </div>
          </div>
          <div class="news-item">
            <div class="cover">
              <a href="https://mp.weixin.qq.com/s/zzOtos57deUU7qcJihkuuQ" target="_blank"><img src="/img/news-cover-10.png" alt="" /></a>
            </div>
            <div class="title">西班牙ROS'S | 听说这一届年轻人，“下半身”都不太行？</div>
            <div class="line"></div>
            <div class="foot">
              <a href="https://mp.weixin.qq.com/s/zzOtos57deUU7qcJihkuuQ" target="_blank" class="link">点击浏览</a>
              <div class="date">2022/08/12</div>
            </div>
          </div>
        </div>
        <div class="pagination">
          <span class="home">首页</span>
          <span class="prev">上一页</span>
          <span class="num current">1</span>
          <span class="num">2</span>
          <span class="num">3</span>
          <span class="num">4</span>
          <span class="omit">...</span>
          <span class="next">下一页</span>
          <span class="last">尾页</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: '首页-艾斯佰丽官网-新闻动态',
    }
  },
  mounted() {
    new Swiper('#banner', {
      loop: true, // 循环模式选项
      autoplay: true,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
    })
  },
}
</script>

<style lang="scss" scoped>
/* 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 {
    .news-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 118px;

      .news-item {
        width: 580px;
        height: 430px;
        margin-top: 36px;
        border: 1px solid #000000;

        .cover {
          width: 528px;
          height: 225px;
          margin: 26px auto 0;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .title {
          width: 528px;
          height: 60px;
          margin: 24px auto;
          @include ellipsis(2);
          line-height: 30px;
          font-size: 29px;
          color: #000000;
        }

        .line {
          width: 528px;
          height: 1px;
          margin: 0 auto;
          background: #5b5b5b;
        }

        .foot {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 528px;
          margin: 18px auto 0;

          .link {
            display: block;
            width: 100px;
            height: 35px;
            background: #d2d2d2;
            text-align: center;
            line-height: 35px;

            &:hover {
              background: #f3920d;
              color: #fff;
            }
          }

          .date {
            font-size: 23px;
            font-weight: 300;
            color: #000000;
          }
        }
      }
    }

    .pagination {
      font-size: 0;
      margin-top: 50px;
      text-align: right;
      span {
        display: inline-block;
        font-size: 22px;
        margin: 0 10px;
        cursor: pointer;

        &:hover {
          color: #f3920d;
          border-color: #f3920d !important;

          &.current {
            color: #000000;
          }
        }

        &.num {
          height: 36px;
          border: 1px solid #434343;
          text-align: center;
          line-height: 36px;
          padding: 0 12px;

          &.current {
            background: #f3920d;
            border-color: #f3920d;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .main {
    .news-list {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 0.6rem;

      .news-item {
        width: 6rem;
        height: 5rem;
        margin-top: 0.4rem;
        border: 0.01rem solid #000000;

        .cover {
          width: 5.28rem;
          height: 2.25rem;
          margin: 0.36rem auto 0;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .title {
          width: 5.28rem;
          height: 0.96rem;
          margin: 0.24rem auto;
          @include ellipsis(2);
          line-height: 0.48rem;
          font-size: 0.32rem;
          color: #000000;
        }

        .line {
          width: 5.28rem;
          height: 0.01rem;
          margin: 0 auto;
          background: #5b5b5b;
        }

        .foot {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 5.28rem;
          margin: 0.24rem auto 0;

          .link {
            display: block;
            width: 1.48rem;
            height: 0.48rem;
            background: #d2d2d2;
            text-align: center;
            line-height: 0.48rem;
            font-size: 0.26rem;

            &:hover {
              background: #f3920d;
              color: #fff;
            }
          }

          .date {
            font-size: 0.26rem;
            font-weight: 300;
            color: #000000;
          }
        }
      }
    }

    .pagination {
      font-size: 0;
      margin-top: 0.64rem;
      text-align: center;
      span {
        display: inline-block;
        font-size: 0.26rem;
        margin: 0 0.1rem;

        &:hover {
          color: #f3920d;
          border-color: #f3920d !important;

          &.current {
            color: #000000;
          }
        }

        &.num {
          height: 0.48rem;
          border: 0.01rem solid #434343;
          text-align: center;
          line-height: 0.48rem;
          padding: 0 0.16rem;

          &.current {
            background: #f3920d;
            border-color: #f3920d;
          }
        }
      }
    }
  }
}
</style>