<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">
                        <template v-if="index === 0">
                            <view class="button-box">
                                <button 
                                    @bindcontact="handleContact"
                                    class="admin-button-com blue big" 
                                    open-type="contact">打开聊天框</button>
                            </view>
                            
                        </template>
                        <template v-else>
                            <image class="step-img" :src="item.images" mode="widthFix"></image>
                        </template>
                    </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>