caimei-authentic-www/pages/_template/ross/center/device/index.vue

<template>
  <div class="page">
    <div class="page-content">
      <div class="title">设备认证信息</div>
      <template v-if="!isAuth">
        <div class="tip">抱歉，您暂未认证设备</div>
        <div class="btn">去认证</div>
      </template>
      <div class="device-list" v-else>
        <div class="device" @click="toDetail">
          <div class="cover">
            <img src="https://picsum.photos/120/120" alt="" />
          </div>
          <div class="content">
            <div class="name">B-BEAUTY童颜皮肤管理（海宁店）</div>
            <div class="sncode">SN码：SN********5666</div>
          </div>
        </div>
        <div class="device">
          <div class="cover">
            <img src="https://picsum.photos/120/120" alt="" />
          </div>
          <div class="content">
            <div class="name">B-BEAUTY童颜皮肤管理（海宁店）</div>
            <div class="sncode">SN码：SN********5666</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  layout: 'app-ross',
  data() {
    return {
      isAuth: false,
    }
  },
  computed: {
    ...mapGetters(['routePrefix']),
  },
  methods: {
    toDetail() {
      this.$router.push(`${this.routePrefix}/center/device/detail`)
    },
  },
}
</script>

<style lang="scss" scoped>
@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) {
  .page-content {
    width: 1000px;
    margin: 0 auto;
    .title {
      font-size: 24px;
      text-align: center;
      font-weight: bold;
      padding: 60px 0;
    }

    .tip {
      font-size: 16px;
      color: #b2b2b2;
      margin-top: 200px;
      margin-bottom: 24px;
      text-align: center;
    }

    .btn {
      width: 98px;
      height: 36px;
      background: #f3920d;
      border-radius: 4px;
      text-align: center;
      line-height: 36px;
      color: #fff;
      font-size: 16px;
      margin: 0 auto;
      cursor: pointer;
    }

    .device-list {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .device {
        width: 490px;
        height: 136px;
        background: #f3f5f6;
        border-radius: 8px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 16px;
        cursor: pointer;

        .cover {
          img {
            display: block;
            width: 106px;
            height: 106px;
          }
        }
        .content {
          width: 320px;
          margin-left: 16px;
          .name {
            font-size: 18px;
            color: #282828;
            font-weight: bold;
            margin-bottom: 24px;
            @include ellipsis(1);
          }
          .sncode {
            font-size: 16px;
            color: #666666;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .page-content {
    .title {
      font-size: 4.2vw;
      text-align: center;
      font-weight: bold;
      padding: 8vw 0;
    }

    .tip {
      font-size: 3vw;
      color: #b2b2b2;
      margin-top: 60vw;
      margin-bottom: 4.8vw;
      text-align: center;
    }

    .btn {
      width: 36vw;
      height: 8.8vw;
      background: #f3920d;
      border-radius: 0.4vw;
      text-align: center;
      line-height: 8.8vw;
      color: #fff;
      font-size: 3.4vw;
      margin: 0 auto;
    }

    .device-list {
      padding: 0 3.2vw;
      .device {
        height: 26vw;
        background: #f3f5f6;
        border-radius: 0.8vw;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 3.2vw;
        margin-bottom: 3.2vw;
        cursor: pointer;

        .cover {
          img {
            display: block;
            width: 19.6vw;
            height: 19.6vw;
          }
        }
        .content {
          width: 59vw;
          margin-left: 3.2vw;
          .name {
            font-size: 3.6vw;
            color: #282828;
            font-weight: bold;
            margin-bottom: 3.2vw;
            @include ellipsis(1);
          }
          .sncode {
            font-size: 3.6vw;
            color: #666666;
          }
        }
      }
    }
  }
}
</style>