Identification/pages/index/index.vue

<template>
  <view class="content">
    <CustomNavbar></CustomNavbar>
    <view class="devicesBox">
      <h3 style="font-size: 2rem">我的设备</h3>
      <!--      设备列表-->
      <view class="box">
        <view class="devices" v-for="item in 8">
          <!--   设备卡片-->
          <h5>客厅智能电视</h5>
          <span>在线</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import CustomNavbar from '../../components/CustomNavbar.vue'

export default {
  components: {
    CustomNavbar
  },
  data() {
    return {
    }
  },
  onLoad() {
  },
  async onShow() {
  },
  methods: {}
}
</script>

<style lang="scss">
.content {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100vh;
  background: rgba(218, 218, 218, 0.5);
}

.devicesBox {
  margin: .5rem 1rem;
}
.box{
  height: 72vh;
  overflow-y: scroll;
}
.devices {
  font-size: 1rem;
  border: 1px solid #c3c3c3;
  padding: 10px;
}
</style>