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

<template>
  <div class="container main">
    <div class="title">深圳艾斯佰丽生物科技有限公司</div>
    <div class="date">2022-02-16 17:42</div>
    <div class="line"></div>
    <div class="detail">
      <p>
        深圳艾斯佰丽生物科技有限公司主营来自西班牙备受美容养生界青睐的云智能体疗管理系统「BINARY PREMIUM」，是西班牙 ROS'S BINARY
        PREMIUM中国区总代理，拥有资深的健康专家团队，优质、专业的售后服务团队，为您提供全方位一站式体验 和服务。
      </p>
      <p>我们期待有梦想,有激情,有能力的你加入我们,为你提供 “有成长、有舞台、有未来” 的平台!</p>
      <img src="/img/news-detail-cover.png" alt="" />
      <p>
        我们希望艾斯佰丽能给我们同事的，不仅仅是一份工作，也是一段成长的旅程。但个人的成长肯定不是温室式的成长，我们都是透过克
        服一个又一个困难而成长。每个有能力的人，都希望有一个舞台让他发挥所长。一个足球员，一定会希望有个球场实现他冠军的梦，一
        个百米飞人，肯定希望有个奥林匹克的赛道。我们经常说互联网就是商界的奥林匹克，在艾斯佰丽这里，我们希望大家能有机会把自己 的所知所能的，发挥到极致。
      </p>
      <p>我们相信的是，只要艾斯佰丽有美好的将来，也一定会带给同事更好的未来。</p>
    </div>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: '首页-艾斯佰丽官网-新闻详情',
    }
  },
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 768px) {
  .main {
    padding-top: 50px;
    .title {
      font-size: 28px;
    }
    .date {
      font-size: 18px;
      color: #b2b2b2;
      margin-top: 16px;
    }
    .line {
      width: 100%;
      margin: 40px 0 70px;
      position: relative;
      height: 1px;
      background-color: #d8d8d8;
      &::after {
        content: '';
        display: block;
        width: 24px;
        height: 2px;
        background: #0688d2;
      }
    }
    .detail {
      p {
        line-height: 34px;
        margin: 32px 0;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .main {
    padding: 0.8rem 0.32rem;
    .title {
      font-size: 0.34rem;
    }

    .date {
      font-size: 0.24rem;
      color: #b2b2b2;
      margin-top: 0.16rem;
    }

    .line {
      width: 100%;
      margin: 0.34rem 0 0.5rem;
      position: relative;
      height: 0.01rem;
      background-color: #d8d8d8;
      &::after {
        content: '';
        display: block;
        width: 0.4rem;
        height: 0.03rem;
        background: #0688d2;
      }
    }
    .detail {
      p {
        line-height: 0.48rem;
        margin: 0.32rem 0;
        font-size: 0.26rem;
        color: #404040;
      }

      img {
        max-width: 100%;
      }
    }
  }
}
</style>