|
|
@@ -0,0 +1,135 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="warn-tit">开启微信提醒</view>
|
|
|
+ <view class="step-view_box">
|
|
|
+ <view
|
|
|
+ v-for="(item,index) in stepList"
|
|
|
+ :key="index"
|
|
|
+ class="step-li_box">
|
|
|
+ <view class="step-head_box">
|
|
|
+ <view class="step-icon_num">
|
|
|
+ {{index + 1}}
|
|
|
+ </view>
|
|
|
+ <view v-if="stepList.length - 1 !== index " class="step-line"></view>
|
|
|
+ </view>
|
|
|
+ <view class="step-main_box">
|
|
|
+ <view class="step-tit">
|
|
|
+ {{item.title}}
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="step-content_box">
|
|
|
+ <tempelte v-if="index === 0">
|
|
|
+ <view class="button-box">
|
|
|
+ <button
|
|
|
+ @bindcontact="handleContact"
|
|
|
+ class="admin-button-com blue big"
|
|
|
+ open-type="contact">打开聊天框</button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </tempelte>
|
|
|
+ <tempelte v-else>
|
|
|
+ <image class="step-img" :src="item.images" mode="widthFix"></image>
|
|
|
+ </tempelte>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name:'OfficialWarn',
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ stepList:[
|
|
|
+ {
|
|
|
+ title:'点击微信聊天框'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'点击框内右下方“开启微信提醒”卡片',
|
|
|
+ images:`${this.$constant.imgUrl}/ghs/official/step3.png`
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'接收二维码点击长按，识别公众号关注即可',
|
|
|
+ images:`${this.$constant.imgUrl}/ghs/official/step2.png`
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ handleContact(e){
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .warn-tit {
|
|
|
+ color: #040404;
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: 600;
|
|
|
+ padding:42px 0 0 52px;
|
|
|
+ }
|
|
|
+ .step-view_box {
|
|
|
+ margin-top: 63px;
|
|
|
+ padding:0 25px 0 40px;
|
|
|
+ & .step-li_box {
|
|
|
+ display: flex;
|
|
|
+ & > .step-head_box {
|
|
|
+ position: relative;
|
|
|
+ & > .step-icon_num {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: $mainColor;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 28px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 50;
|
|
|
+ }
|
|
|
+ & > .step-line {
|
|
|
+ height: 100%;
|
|
|
+ width: 0px;
|
|
|
+ border-left: 1px dashed $mainColor;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ z-index: 45;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & > .step-main_box {
|
|
|
+ flex: 1;
|
|
|
+ padding-left: 30px;
|
|
|
+ & .step-tit {
|
|
|
+ color: #141F25;
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ & .step-content_box {
|
|
|
+ .button-box {
|
|
|
+ width: 100%;
|
|
|
+ padding-right: 25px;
|
|
|
+ & .admin-button-com {
|
|
|
+ margin: 67px 0 85px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ & .step-img {
|
|
|
+ width: 382px;
|
|
|
+ height: 566px;
|
|
|
+ margin: 34px 0 71px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .admin-button-com {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+</style>
|
fuwei