hospital_health_check/src/views/HomeView.vue

<template>
  <div class="home">
    <div class="act_title">医院选择</div>
    <div class="act_shoose">
      <van-button @click="doGuidance" block>海慈医院</van-button>
      <van-button @click="doGuidance" block>即墨人民医院</van-button>
      <van-button @click="doGuidance" block>平度人民医院</van-button>
      <van-button @click="doGuidance" block>胶州医院</van-button>
      <van-button @click="doGuidance" block>莱西市立医院</van-button>
    </div>
    <div class="act_box">
      <van-button type="info" block>我的预约</van-button>
    </div>
    <!-- 阅读须知 -->
    <GuidanceVue @doCancelGuide="doCancelGuide" v-if="guideShow"></GuidanceVue>
  </div>
</template>
<script>
import GuidanceVue from '@/components/Guidance.vue';
export default {
  name: "HomeView",
  components: {
    GuidanceVue,
  },
  data() {
    return {
      guideShow: false
    }
  },
  methods: {
    testAlert() {
      lightAppJssdk.notification.alert({
        message: "这是一个弹窗",
        title: "提示",//可传空
        buttonName: "收到",
        success: function (data) {
          //onSuccess将在点击button之后回调
          /*回调*/
        },
        fail: function (data) { //错误返回
        }
      });
    },
    //取消阅读
    doCancelGuide() {
      this.guideShow = false;
    },
    //阅读须知
    doGuidance() {
      this.guideShow = true;
    },
  }
};
</script>
<style scoped lang="scss">
  .home{
    .act_title{
      font-size: 0.22rem;
      text-align: center;
      padding:0.15rem 0;
    }
    .act_shoose{
      margin: 0.1rem 0;
      padding: 0 0.3rem;
      .van-button{
        margin-bottom: 0.12rem;
      }
    }
    .act_box{
      width: 2rem;
      text-align: center;
      margin:0.15rem auto 0;
    }
  }
</style>