<template>
  <div class="event-box">
    <el-row :gutter="60" style="width:100%">
        <el-col :span="12" style="border-right: 1px dotted #8BABF8">
            <div class="event-title">
                <span class="titleicon"></span>
                <span>直客营销事件</span>
            </div>
            <div class="events">
                <el-badge :value="r[0]" :max="9999" class="item">
                    <div class="event" @click="goBirth">
                        <img src="../../assets/img/event/shengri.png" />
                        <div class="content">
                            <div class="ti">生日事件</div>
                            <el-tooltip class="item" effect="dark" content="近七日即将过生日的客户，可以向客户或者关联同行发送生日涵" placement="top">
                            <div class="desc">
                                近七日即将过生日的客户，可以向客户或者关联同行发送生日涵
                            </div>
                            </el-tooltip>
                        </div>
                    </div>
                </el-badge>
                <el-badge :value="r[1]" :max="9999" class="item">
                    <div class="event">
                        <img src="../../assets/img/event/biye.png" />
                        <div class="content">
                            <div class="ti">毕业季事件</div>
                            <el-tooltip class="item" effect="dark" content="进入毕业季6-8月份正值初中，高中，大学学生毕业的客户名单，可以向客户或在关联同行发出恭贺函，并且关联部分产品信息" placement="top">
                                <div class="desc">
                                    推荐3-6月发送一次，为考试前的加油函，6-9月发送一次为考试后的毕业恭喜函，提供初中，高中，大学学生毕业的客户名单，可以向客户或在关联同行发出恭贺函，并且关联部分产品信息
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                </el-badge>
                <div class="event">
                    <img src="../../assets/img/event/jieri.png" />
                    <div class="content">
                        <div class="ti">节日事件</div>
                        <el-tooltip class="item" effect="dark" content="系统内置跨年、元旦、情人节、妇女节等等10多种节日模板，可以快速发送给客人祝福" placement="top">
                        <div class="desc">
                            系统内置跨年、元旦、情人节、妇女节等等10多种节日模板，可以快速发送给客人祝福
                        </div>
                        </el-tooltip>
                    </div>
                </div>
                 <div class="event">
                    <img src="../../assets/img/event/jinji.png" />
                    <div class="content">
                        <div class="ti">突发事件</div>
                        <el-tooltip class="item" effect="dark" content=" 产生突发事件，例如极端天气、灾难、事故快速通知所有的客人。" placement="top">
                            <div class="desc">
                                产生突发事件，例如极端天气、灾难、事故快速通知所有的客人。
                            </div>
                        </el-tooltip>
                    </div>
                </div>
                <div class="event">
                    <img src="../../assets/img/event/yijian.png" />
                    <div class="content">
                        <div class="ti">意见反馈事件</div>
                        <el-tooltip class="item" effect="dark" content="客户填写了意见调查以后， 可以快速批量转发给关联同行" placement="top">
                            <div class="desc">
                                客户填写了意见调查以后， 可以快速批量转发给关联同行
                            </div>
                        </el-tooltip>
                    </div>
                </div>
                <div class="event">
                    <img src="../../assets/img/event/nexttrip.png" />
                    <div class="content">
                        <div class="ti">下次出行事件</div>
                        <el-tooltip class="item" effect="dark" content="跟进客人填写的意见调查的下次出游计划，提前一个月的时间发出提醒，可以把相关产品信息发送给客人或关联同行" placement="top">
                            <div class="desc">
                               跟进客人填写的意见调查的下次出游计划，提前一个月的时间发出提醒，可以把相关产品信息发送给客人或关联同行
                            </div>
                        </el-tooltip>
                    </div>
                </div>
                
            </div>
        </el-col>
        <el-col :span="12">
            <div class="event-title">
                <span class="titleicon yellow"></span>
                <span>同行营销事件</span>
            </div>
            <div class="events">
                <div class="event">
                    <img src="../../assets/img/event/newline.png" />
                    <div class="content">
                        <div class="ti">新线路推广</div>
                        <div class="desc">
                            在客户生日的时候，发送一封祝贺函，能让客户感受到印象之旅的温度，也能让同行感受到印象无微不至的关怀。
                        </div>
                    </div>
                </div>
                <div class="event">
                    <img src="../../assets/img/event/newteam.png" />
                    <div class="content">
                        <div class="ti">新系列推广</div>
                        <div class="desc">
                            在客户生日的时候，发送一封祝贺函，能让客户感受到印象之旅的温度，也能让同行感受到印象无微不至的关怀。
                        </div>
                    </div>
                </div>
                <div class="event">
                    <img src="../../assets/img/event/weidan.png" />
                    <div class="content">
                        <div class="ti">尾单发送</div>
                        <div class="desc">
                            在客户生日的时候，发送一封祝贺函，能让客户感受到印象之旅的温度，也能让同行感受到印象无微不至的关怀。
                        </div>
                    </div>
                </div>
                 <div class="event">
                    <img src="../../assets/img/event/jieri.png" />
                    <div class="content">
                        <div class="ti">节日事件</div>
                        <div class="desc">
                            在客户生日的时候，发送一封祝贺函，能让客户感受到印象之旅的温度，也能让同行感受到印象无微不至的关怀。
                        </div>
                    </div>
                </div>
                <div class="event">
                    <img src="../../assets/img/event/fanyong.png" />
                    <div class="content">
                        <div class="ti">返佣、幸福存折通知</div>
                        <div class="desc">
                            在客户生日的时候，发送一封祝贺函，能让客户感受到印象之旅的温度，也能让同行感受到印象无微不至的关怀。
                        </div>
                    </div>
                </div>
                <div class="event" style="cursor:default;">&nbsp;</div>
            </div>
        </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
    data() {
        return {
            r:[0,0]
        }
    },
    created() {
        this.init();
    },
    methods:{
        init(){
            this.apipost("/api/SellEvent/GetSellEventToCCount",{},r=>{
                console.log(r.data)
                if(r.data.resultCode==1){
                    this.r=r.data.data
                }
            })
        },
        goBirth(){
            this.$router.push('/birthdayEvent');
        }
    }
}
</script>

<style>
.event-box{
   
}
.event-box .event-title .titleicon{
    display:inline-block;
    width:4px;
    height:14px;
    background: #0D2481;
    margin-right: 10px;
}
.event-box .event-title .titleicon.yellow{
    background:#FFA475;
}
.event-box .event-title{
    font-size:14px;
    font-weight: 900;
    font-family: perfectFont;
}
.event-box .events{
    display: flex;
    flex-flow:row wrap;
    justify-content: space-between;
    margin-top:30px;
}
.event-box .events .event{
    width:248px;
    height:370px;
    background:rgba(244,245,249,1);
    margin-bottom: 30px;
    cursor: pointer;
}
.event-box .events .event img{
    width:100%;
    height: 268px;
}
.event-box .events .event .content{
    height: 102px;
    padding:19px;
    box-sizing: border-box;
    border:1px solid #ddd;
    border-top:none;
    margin-top:-4px;
}
.event-box .events .event .content .ti{
    font-size:14px;
    font-family:perfectFont;
    font-weight:bold;
    margin-bottom: 15px;
}
.event-box .events .event .content .desc{
    height:34px;
    font-size:12px;
    font-family:Microsoft YaHei;
    font-weight:400;
    color:rgba(17,17,17,1);
    line-height: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 2;
}
</style>