<template>
    <div>
       <img style="width:100%" src="/assets/home/4@2x.png" alt="">
       <div class="animoveleft" style='width:1200px;margin:30px auto;display:flex;justify-content:space-between;'>
           <div style="display:flex;justify-content:space-between;width:50%;flex-wrap:wrap">    
               <div class="traincontent">    
                   <img  src="/assets/train/book.png" alt="">
                   <div style='margin:0 10px;line-height:1.8'>
                        <p style="margin-top:-5px">培训内容</p>
                        <p> 软件开发基础、软件测试专业知识、软件测试工具、真实项目实践+就业</p>
                   </div>
               </div>
               <div class="traincontent">    
                   <img src="/assets/train/bi.png" alt="">
                   <div style='margin:0 10px;line-height:1.8'>
                        <p style="margin-top:-5px">培训类型</p>
                        <p> 静态测试、单元测试、配置项测试、系统测试、黑盒、白盒、功能、性能、接口</p>
                   </div>
               </div>
               <div class="traincontent">    
                   <img src="/assets/train/shu.png" alt="">
                   <div style='margin:0 10px;line-height:1.8'>
                        <p style="margin-top:-5px">培训特点</p>
                        <p>专业性强、时间短、就业无忧精准培训，实用为主，就业为目标</p>
                   </div>
               </div>
               <div class="traincontent">    
                   <img src="/assets/train/ren.png" alt="">
                   <div style='margin:0 10px;line-height:1.8'>
                        <p style="margin-top:-5px">培训理念</p>
                        <p>寓训于测，就业无忧+就业</p>
                   </div>
               </div>
           </div>
           <div class="signupda">
               <img style="margin-top:30px" src="/assets/train/cespei.png" alt="">
               <div style="display:flex;margin:20px 30px 20px">    
                   <img style="margin:10px 10px 10px 0px" src="/assets/train/xingming.png" alt="">
                   <el-input v-model="signdata.signname" placeholder="请输入姓名"></el-input>
               </div>
               <div style="display:flex;margin:20px 30px 20px">    
                   <img style="margin:10px 10px 10px 0px" src="/assets/train/shouji.png" alt="">
                   <el-input v-model="signdata.phone" placeholder="请输入手机号码"></el-input>
               </div>
               <div style="display:flex;margin:20px 30px 20px">    
                   <img style="margin:10px 10px 10px 0px;height:19px" src="/assets/train/info-1-copy.png" alt="">
                   <el-input v-model="signdata.intention" type="textarea" :rows="5" placeholder="报名意向（报名后培训学院专员会与您联系，提供一对一培训课程咨询。）"></el-input>
               </div>
               <div style="text-align:center;">   
                    <el-button type="primary"  @click="signupnow">立即报名</el-button>
                </div>
           </div>
       </div>
    </div>
</template>
<script>
    import {isMobile} from "@/util/validate";
     import {trainsignup} from "@/api/system/message";
    export default{
        data(){
            return{
                signdata:{signname:'',phone:'',intention:'',}
                // name:'',//姓名
                // phone:'',//手机号
                // intention:'',//意向
            }
        },
        mounted(){
            
        },
        methods:{
            //立即报名
            signupnow(){        
                
                let name=this.signdata.signname;
                if(!name){
                    this.$message.warning('请您输入姓名');
                    return;
                }
                let phone=this.signdata.phone;
                if (!phone || !isMobile(phone)) {
                    this.$message.warning('手机格式不对');
                    return;
                }
                let intention=this.signdata.intention;
                if (!intention) {
                    this.$message.warning('请填写报名意向');
                    return;
                }
                let form={
                    name,
                    tel: phone,
                    remark:intention,
                }
                trainsignup(form).then(res=>{
                    // if(res.code==200){
                        this.$alert('报名成功，请耐心等待工作人员和您联系' , {
                            confirmButtonText: '确定',
                            type: 'success'
                        }).then(()=> {
                           next();
                        })   
                    // }
                })          
                
            },
        },

    }
</script>
<style scoped>
    .animoveleft{
	    position:relative;
        animation-name:mymove;
        animation-duration:1s;
        -webkit-animation-name:mymove;
        -webkit-animation-duration:1s; /* Safari 和 Chrome */
    }  
    @keyframes mymove
    {
    from {left:-300px;}
    to {left:0px;}
    }
    @-webkit-keyframes mymove /* Safari and Chrome */
    {
    from {left:-300px;}
    to {left:0px;}
    }
    .traincontent{
        width: 260px;
        /* height: 240px; */
        background: #FFFFFF;
        box-shadow: 0px 2px 8px 0px rgba(54, 61, 67, 0.1);
        border-radius: 4px;
        text-align: center;
        padding-bottom:1px;
        margin-bottom:20px;
    }
    .traincontent:hover{
          transform: scale(1.01);
          transition: 1s;
          box-shadow: 0px 2px 8px 0px #87898d;
     }
     .traincontent:hover :nth-child(1){
         color:#0066EB
     }
    .traincontent :nth-child(1){
        font-size: 24px;
        font-weight: bold;
        color: #1A1A1A;
        margin:10px 0
    }
    .traincontent :nth-child(2){
        font-size: 14px;
        font-weight: 400;
        color: #333333;    
    }
    .signupda{
         width:48%;
        /* height: 240px; */
        background: #FFFFFF;
        box-shadow: 0px 2px 8px 0px rgba(54, 61, 67, 0.1);
        border-radius: 4px;
        text-align: center;
        padding-bottom:1px;
        margin-bottom:20px;
    }
    .signupda>>>.el-button{
        margin-top:20px;
        /* margin-left:57px; */
        width:190px;
        height:40px;
        font-size:20px;
        color:rgba(255,255,255,1);
        background: linear-gradient(45deg, #2978EE, #0066EB);
        border:none;
        border-radius:6px;
        /* line-height:40px;     */
    }
</style>