horzi_rai_wxa/pages/reportForm/components/coverGuide.vue

<template>
  <u-mask :show="show">
    <view class="warp">
      <view class="top-bg">
        <image style="width: 80rpx; height: 80rpx" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/guide-1.png" mode=""></image>
        <view class="guide-tow">
          <image style="width: 181rpx; height: 239rpx" src="https://hzstatic.hzinsights.com/cygx/czbk/guide-2.png" mode=""></image>
        </view>
        <view class="content-text">
          <text>新增产业关注功能</text>
          <text>点击关注后可获取产业内容更新提醒</text>
          <image @click="isShow" style="width: 237rpx; height: 104rpx" src="https://hzstatic.hzinsights.com/cygx/czbk/guide-3.png" mode=""></image>
        </view>
      </view>
    </view>
  </u-mask>
</template>

<script>
export default {
  props: {
    isGuideShow: {
      type: Boolean,
      default: false,
      required: true,
    },
  },
  data() {
    return {
      show: true,
    };
  },
  watch: {
    isGuideShow: {
      handler() {
        this.show = this.isGuideShow;
      },
      immediate: true,
    },
  },
  methods: {
    isShow() {
      this.$parent.isGuideShow = false;
    },
  },
};
</script>

<style scoped lang="scss">
.warp {
  display: flex;
  height: 100%;
  .top-bg {
    margin-top: 80%;
    .guide-tow {
      padding-left: 100rpx;
      margin-top: -60rpx;
    }
  }
  .content-text {
    width: 750rpx;
    font-size: 28rpx;
    color: #fff;
    text {
      text-align: center;
    }
    image {
      margin-top: 50rpx;
      padding-left: 100%;
      transform: translateX(-50%);
    }
  }
}
</style>