nnbp_ui/src/views/mb/home/index.vue

<template>
  <div class="mbhome">
     <div class="headerpic">
        <img src="http://gimg1.baidu.com/searchbox_feed/app=2001&g=4n&n=0&q=85&refer=http%3A%2F%2Fwww.baidu.com&size=f9999_10000&src=http%3A%2F%2Fcontentcms-bj.cdn.bcebos.com%2Fcmspic%2F2630adecb9edc231a9d7a583aecbd7be.jpeg%3Fx-bce-process%3Dimage%2Fcrop%2Cx_0%2Cy_0%2Cw_1242%2Ch_699?sec=0&t=36e419603fa30a788071b99471e4b65a"/>
     </div>
     <div class="body">
       <div class="an">
        <van-button round type="primary" @click="gotopage('task')"><van-icon name="phone" />热线工单</van-button>
        <div class="tip">110</div>
       </div>
       <div class="an">
        <van-button round type="primary" @click="gotopage('detection')"><van-icon name="underway" />检测计划</van-button>
        <div class="tip">110</div>
       </div>
       <div class="an">
        <van-button round type="primary" @click="gotopage('maintain')"><van-icon name="points" />养护计划</van-button>
        <div class="tip">110</div>
       </div>
     </div>


  </div>
</template>
<script  setup>
import router from "../../../router"


const gotopage = (name) => {
  router.push(`/mb/${name}`)

}


</script>

<style lang="scss">
.mbhome{
  .headerpic{
    img{
      width:100vw;
      object-fit: contain;
    }
  }
  .body{
    .an{
      width:100%;
      text-align: center;
      margin-top: 60px;
      position: relative;
      .van-button{
        width:80%;
        .van-icon{
          margin-right: 10px;
        }
      }
      .tip{
        background: #E91437;
        color: #fff;
        min-width:20px;
        height: 20px;
        font-size: 10px;
        border-radius: 10px;
        line-height: 18px;
        border:1px solid #fff;
        position: absolute;
        top:-6px;
        padding-left: 5px;
        padding-right: 5px;
        right:10vw;
      }
    }
  }

}

</style>