<template>
  <view class="PublicItyPages">
    <view class="viewTitle">开启微信提醒</view>
    <view class="viewMain">
      <text class="icon_num icon_one">1</text>
      <text class="icon_num icon_two">2</text>
      <text class="icon_num icon_three">3</text>
      <view class="_title">点击框内右下方“开启微信提醒”卡片</view>
      <view class="open_btn">打开聊天框</view>
      <view class="_title">点击框内右下方“开启微信提醒”卡片</view>
      <image
        :src="`${constant.imgUrl}/focus/send.png`"
        class="img_1"
      />
      <view class="_title">点击框内右下方“开启微信提醒”卡片</view>
      <image
        :src="`${constant.imgUrl}/focus/qr_code.png`"
        class="img_1"
      />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.PublicItyPages {
  .viewTitle {
    color: #040404;
    font-size: 36upx;
    font-weight: 700;
    padding: 42upx 0 60upx 50upx;
  }
  .viewMain {
    position: relative;
    padding-left: 119upx;
    &::after {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      left: 68upx;
      height: 995upx;
      width: 1px;
      border-left: 2px dashed #3385ff;
    }
    & > .icon_num {
      position: absolute;
      left: 49upx;
      z-index: 9;
      width: 40upx;
      height: 40upx;
      line-height: 40upx;
      text-align: center;
      font-size: 28upx;
      font-weight: 700;
      background-color: #3385ff;
      border-radius: 50%;
      color: #fff;
    }
    & > .icon_one {
      top: 0upx;
    }
    & > .icon_two {
      top: 285upx;
    }
    & > .icon_three {
      top: 995upx;
    }
    & > ._title {
      font-size: 32upx;
      font-weight: 600;
      color: #141f25;
    }
    & > .open_btn {
      width: 580upx;
      height: 90upx;
      line-height: 90upx;
      text-align: center;
      font-size: 32upx;
      color: #fff;
      background: #3385ff;
      border-radius: 8px;
      margin: 67upx 0 85upx;
    }
    & > .img_1 {
      margin: 34upx 0 71upx;
      width: 382upx;
      height: 566upx;
      background-color: #eee;
    }
  }
}
</style>