dvcp_v2_wxcp_app/src/apps/AppResourcesManage/talking.vue

<template>
  <div class="talking">
    <div class="header">
      <p>刘家河村委会、张家村…等<span>20</span>个设备</p>
      <img src="./img/right-img.png" alt="">
    </div>
    <div class="content">
      <!-- <p class="time">00:00:13</p> -->
      <img src="./img/body.png" alt="">
      <p class="text">请先选择设备</p>
      <p class="text">再点击下方按钮开始喊话~</p>
    </div>
    <div class="footer">
      <img :src="`${$cdn}video/stop-img.png`" alt="">
    </div>
  </div>
</template>
<script>
export default {
  name: "talking"
}
</script>
<style lang="scss" scoped>
uni-page-body {
  background-color: #fff;
}

.talking {
  .header {
    width: 100%;
    height: 128px;
    background: #F6F8FC;
    padding: 42px 32px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    p {
      font-size: 32px;
      color: #333;
      line-height: 44px;

      span {
        color: #1174FE;
      }
    }

    img {
      width: 32px;
      height: 32px;
    }
  }

  .content {
    margin-top: 224px;

    .time {
      width: 100%;
      text-align: center;
      font-size: 96px;
      color: #000000;
      line-height: 134px;
    }

    img {
      width: 406px;
      height: 306px;
      margin: 0 0 48px 172px;
    }

    .text {
      font-size: 30px;
      color: #999;
      line-height: 42px;
      text-align: center;
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 168px;
    background: #F6F8FC;
    padding: 20px 310px;
    box-sizing: border-box;

    img {
      width: 128px;
      height: 128px;
    }
  }
}
</style>