<template>
    <div class="trainpage">
        <div class="zxzx" @click="zixunClick">报名咨询</div>
        <!-- 背景图 -->
        <img src="/assets/newtrain/peixun1.png" class="bannertop" alt="" />
        <!-- 模块1-软件可靠性 -->
        <div class="model1 container">
            <div class="model_title">
                <div class="model_title_top">
                    <img src="/assets/homepage/rihhj.png" alt="" />
                    <p>四大培训方向+就业 一站式服务</p>
                    <img src="/assets/homepage/lesftt.png" alt="" />
                </div>
                <div class="model_title_text">培养专业测试专项人才</div>
            </div>
            <div class="moedel1_content">
                <div class="moedel1_contentitem" @click="openModel3" v-for="it in model1Data" :key="it.img">
                    <img class="moedel1_contentitem_arrow" src="/assets/train/downarrow.png" alt="" />
                    <div class="moedel1_contentitem_imgbox">
                        <img class="moedel1_contentitem_img" :src="it.img" alt="" />
                    </div>
                    <div class="moedel1_contentitem_text">
                        <div class="moedel1_contentitem_text1">{{ it.title }}</div>
                        <div class="moedel1_contentitem_text2">
                            {{ it.con }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 模块2-软件测试协同创业班 -->
        <!-- <div class="model2">
            <div class="model2_middle container">
                <div class="model_title">
                    <img class="model_title_img" src="/assets/newtrain/model2_title.png" alt="" />
                    <div class="model_title_text">培养专业测试专项人才</div>
                </div>
                <div class="model2_content">
                    <div class="model2_content_title">
                        北京关键科技股份有限公司联合各大高校共同成立“智能软件测试协同创新实验室”，设立智能软件测试协同创新班，
                        依据工信部“软件可靠性测试”相关标准要求，开展人才培养，增加就业机会
                    </div>
                    <div class="model2_content_itemcontent">
                        <div class="model2_content_item" v-for="it in model2Data" :key="it.id">
                            <img class="model2_content_item_img" :src="it.img" alt="" />
                            <div class="model2_content_item_text">{{ it.title }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
        <!-- 模块3-课程计划 -->
        <div class="model3 container" v-show="isShowModel3">
            <div class="model_title">
                <div class="model_title_top">
                    <img src="/assets/homepage/rihhj.png" alt="" />
                    <p>课程计划</p>
                    <img src="/assets/homepage/lesftt.png" alt="" />
                </div>
                <div class="model_title_text">针对企业用人需求进行课程培训</div>
            </div>
            <div class="moedel3_content">
                <!-- <div class="moedel3_content_l">
                    <div
                        class="moedel3_content_l_item"
                        v-for="it in model3Data"
                        :class="{ moedel3_content_l_itemactive: it == model3Active }"
                        :key="it"
                        @click="model3Click(it)"
                    >
                        {{ it }}
                    </div>
                </div> -->
                <div class="moedel3_content_r">
                    <!-- 表头 -->
                    <div class="moedel3_content_r_griditem moedel3_content_r_griditemtop">序号</div>
                    <div class="moedel3_content_r_griditem moedel3_content_r_griditemtop moedel3_content_r_griditemmi">
                        课程名称
                    </div>
                    <div class="moedel3_content_r_griditem moedel3_content_r_griditemtop">课时</div>
                    <!-- 表格内容 -->
                    <template v-for="(it, index) in model34Data">
                        <div class="moedel3_content_r_griditem">{{ index + 1 }}</div>
                        <div class="moedel3_content_r_griditem moedel3_content_r_griditemmi">
                            {{ it.con }}
                        </div>
                        <div class="moedel3_content_r_griditem">{{ it.num }}</div>
                    </template>
                </div>
            </div>
            <!-- 掌握的测试技能 -->
            <div class="model3_skill_title">
                <div class="model_title_top2">
                    <img src="/assets/train/linexie.png" alt="" />
                    <p>掌握的测试技能</p>
                    <img src="/assets/train/linexie.png" alt="" />
                </div>
            </div>
            <div class="model3_skill_itembox">
                <div class="model3_skill_item" v-for="it in model32Data" :key="it.img">
                    <img class="model3_skill_item_img" :src="it.img" alt="" />
                    <div class="model3_skill_item_text">{{ it.title }}</div>
                </div>
            </div>
            <!-- 企业机会 -->
            <div class="model3_skill_title">
                <div class="model_title_top2">
                    <img src="/assets/train/linexie.png" alt="" />
                    <p>企业机会</p>
                    <img src="/assets/train/linexie.png" alt="" />
                </div>
            </div>
            <div class="model32_skill_itembox">
                <div class="model32_skill_item" v-for="it in model33Data" :key="it">
                    <img class="model32_skill_item_img" :src="it" alt="" />
                </div>
            </div>

            <!-- 收起标志 -->
            <div class="flagUp">
                <img class="flagUp_img" @click="closeModel3" src="/assets/train/downarrow.png" alt="" />
            </div>
        </div>
        <!-- 模块4-培训课程资料 -->
        <!-- <div class="model4 container">
      <div class="model_title">
        <img
          class="model_title_img"
          src="/assets/newtrain/model5_title.png"
          alt=""
        />
        <div class="model_title_text">专业测试培训课程学习资料</div>
      </div>
      <div class="moedel4_content">
        <div class="moedel4_content_tag">
          <div
            class="moedel4_content_tag_item"
            :class="{'moedel4_content_tag_itemactive': it == '单元测试'}"
            v-for="it in model4Data"
            :key="it"
          >
            {{ it }}
          </div>
        </div>
        <div class="moedel4_content_video">
          <div class="moedel4_content_video_item" v-for="it in 4" :key="it">
            <div class="moedel4_content_video_item_top">
              <img
                class="moedel4_content_video_item_topimg"
                src="/assets/newtrain/model5_1.png"
                alt=""
              />
              <div class="moedel4_content_video_item_top_l">
                <img
                  class="moedel4_content_video_item_top_limg"
                  src="/assets/newtrain/model5_3.png"
                  alt=""
                />
                观看
              </div>
              <div class="moedel4_content_video_item_top_r">
                <img
                  class="moedel4_content_video_item_top_rimg"
                  src="/assets/newtrain/model5_4.png"
                  alt=""
                />
                123
              </div>
            </div>
            <div class="moedel4_content_video_item_middel">
              什么是单元测试，单元测试内容
            </div>
            <div class="moedel4_content_video_item_bottom">
              <div class="moedel4_content_video_item_bl">
                <img
                  class="moedel4_content_video_item_blimg"
                  src="/assets/newtrain/model5_2.png"
                  alt=""
                />
                关键科技录制
              </div>
              <div class="moedel4_content_video_item_br">
                <img
                  class="moedel4_content_video_item_blimg"
                  src="/assets/newtrain/model5_5.jpg"
                  alt=""
                />
                3528
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
        <!-- 模块5-校企合作创新 -->
        <div class="model5">
            <div class="contanerbox container">
                <div class="model_title">
                    <div class="model_title_top">
                        <img src="/assets/homepage/rihhj.png" alt="" />
                        <p>校企合作培训</p>
                        <img src="/assets/homepage/lesftt.png" alt="" />
                    </div>
                    <div class="model_title_text">促进学生在校理论学习，增加就业机会</div>
                </div>
                <div class="moedel5_content">
                    <div class="moedel5_content_tag">
                        <div
                            class="moedel5_content_tag_item"
                            :class="{ moedel5_content_tag_itemactive: it.id == activeModel2.id }"
                            v-for="it in model2Data.slice(0, 6)"
                            :key="it.img"
                            @click="modelSchool(it)"
                        >
                            {{ it.title }}
                        </div>
                    </div>
                    <div class="moedel5_content_con">
                        <div class="moedel5_content_con_l">
                            <img :src="activeModel2.img" class="moedel5_content_con_limg" />
                            <div class="moedel5_content_con_lcon">
                                {{ activeModel2.con }}
                            </div>
                        </div>
                        <div class="moedel5_content_con_r">
                            <div class="moedel5_content_con_r_title">
                                <div class="moedel5_content_con_r_titleline"></div>
                                报名条件
                            </div>
                            <div class="moedel5_content_con_r_con">
                                {{ activeModel2.bmtj }}
                            </div>
                            <div class="moedel5_content_con_r_title">
                                <div class="moedel5_content_con_r_titleline"></div>
                                培训内容
                            </div>
                            <div class="moedel5_content_con_r_con">
                                {{ activeModel2.pxnr }}
                            </div>
                            <div class="moedel5_content_con_r_title">
                                <div class="moedel5_content_con_r_titleline"></div>
                                经考核合格后收获
                            </div>
                            <div class="moedel5_content_con_r_con">  {{ activeModel2.sh }} </div>
                            <div class="moedel5_content_con_r_con">  {{ activeModel2.sh1 }} </div>
                            <div class="moedel5_content_con_r_con">  {{ activeModel2.sh2 }} </div>
                            <div class="moedel5_content_con_r_con">  {{ activeModel2.sh3 }} </div>
                            <div class="moedel5_content_con_r_btn" @click="openSubmit">报名入口</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 模块6软件可靠性测试 -->
        <!-- <div class="model6 container">
            <div class="model_title">
                <img class="model_title_img" src="/assets/newtrain/model7_title.png" alt="" />
                <div class="model_title_text">软件可靠性测试产业人才岗位能力要素</div>
            </div>
            <div class="moedel6_content">
                <div class="moedel6_content_griditem moedel6_content_griditemtop">维度</div>
                <div class="moedel6_content_griditem moedel6_content_griditemtop">要素</div>
                <div class="moedel6_content_griditem moedel6_content_griditemtop">说明</div>
                <div class="moedel6_content_griditem moedel6_content_griditemspan2">专业知识</div>
                <div class="moedel6_content_griditem">基础知识</div>
                <div class="moedel6_content_griditem moedel6_content_griditemleft">
                    指相应岗位人才应掌握的通用知识，主要包括基本理论、相关标准与规范知识以及有关法律法规、安全、隐私等
                </div>
                <div class="moedel6_content_griditem">专业知识</div>
                <div class="moedel6_content_griditem moedel6_content_griditemleft">
                    指相应岗位人才完成工作任务所必备的知识，主要指与具体岗位要求相适应的理论知识、技术要求和操作规程等
                </div>
                <div class="moedel6_content_griditem moedel6_content_griditemspan2">技术技能</div>
                <div class="moedel6_content_griditem">基本技能</div>
                <div class="moedel6_content_griditem moedel6_content_griditemleft">
                    指相应岗位人才为完成工作任务所应具备的对基础知识应用的水平以及熟练程度
                </div>
                <div class="moedel6_content_griditem">专业技能</div>
                <div class="moedel6_content_griditem moedel6_content_griditemleft">
                    指相应岗位人才为完成工作任务所应具备的对专业知识应用的水平以及对特殊工具使用的掌握
                </div>
                <div class="moedel6_content_griditem">工程实践</div>
                <div class="moedel6_content_griditem">经验</div>
                <div class="moedel6_content_griditem moedel6_content_griditemleft">
                    指相应岗位人才在实际工程与项目推进中应当具备的经验
                </div>
                <div class="moedel6_content_griditem">综合能力</div>
                <div class="moedel6_content_griditem">软能力</div>
                <div class="moedel6_content_griditem moedel6_content_griditemleft">
                    指相应岗位人才为完成工作任务所应具备的行为特征和综合素质，包括学习追踪、沟通协调、需求与趋势分析、业务场景把握等技能
                </div>
            </div>
        </div> -->
        <!-- 模块7 五大培训优势 -->
        <!-- <div class="model7 container">
            <div class="model_title">
                <img
                    class="model_title_img"
                    src="/assets/newtrain/model8_title.png"
                    alt=""
                    style="width: 843px; height: 35px"
                />
                <div class="model_title_text">五大优势助力你成为专业测试人才</div>
            </div>
            <div class="moedel7_content">
                <div class="moedel7_content_item" v-for="it in model7Data" :key="it.id">
                    <img class="moedel7_content_item_img" :src="it.img" alt="" />
                    <div class="moedel7_content_item_title">{{ it.title }}</div>
                    <div class="moedel7_content_item_con">
                        {{ it.con }}
                    </div>
                </div>
            </div>
        </div> -->
        <!-- 模块8 工信部证书 -->
        <!-- <div class="model8 container">
            <div class="model_title">
                <img class="model_title_img" src="/assets/newtrain/model9_title.png" alt="" />
                <div class="model_title_text">所学技术实际应用率高，证书含金量高</div>
            </div>
            <div class="moedel8_content">
                <div class="moedel8_content_l">
                    <img class="moedel8_content_limg" src="/assets/newtrain/model9_1.png" alt="" />
                </div>
                <div class="moedel8_content_r">
                    <div class="moedel8_content_rtop">《软件可靠性测试工程师》等级证书</div>
                    <div class="moedel8_content_rline"></div>
                    <div class="moedel8_content_rcon">
                        1.进入北京关键科技股份有限公司测试人才库且获得创新实验室颁发的培训证书。
                        2.在校期间获得带薪实习机会，丰富真实项目开发履历
                    </div>
                    <div class="moedel8_content_sanjiao"></div>
                </div>
            </div>
        </div> -->
        <!-- 模块9 易入门 -->
        <!-- <div class="model9 container">
            <div class="model_title">
                <img class="model_title_img" src="/assets/newtrain/model10_title.png" alt="" />
                <div class="model_title_text">零基础入学+不限专业/性别+应/往届生均可</div>
            </div>
            <div class="moedel9_content">
                <div class="moedel9_content_item" v-for="it in model9Data" :key="it.id">
                    <img class="moedel9_content_item_top" :src="it.img" alt="" />
                    <div class="moedel9_content_item_middle">{{ it.title }}</div>
                    <div class="moedel9_content_item_bottom">
                        {{ it.con }}
                    </div>
                </div>
            </div>
        </div> -->
        <!-- 模块10工信部颁发证书 -->
        <div class="model10">
            <div class="container">
                <div class="model_title">
                    <div class="model_title_top">
                        <img src="/assets/homepage/rihhj.png" alt="" />
                        <p>工信部颁发证书</p>
                        <img src="/assets/homepage/lesftt.png" alt="" />
                    </div>
                    <div class="model_title_text">所学技术实际应用率高，证书含金量高</div>
                </div>
                <div class="model10Con">
                    <div class="model10Con_item" v-for="it in model10Data" :key="it.id">
                        <img class="model10Con_item_img" :src="it.img" alt="" />
                        <div class="model10Con_item_mask">
                            <div class="context">
                                {{ it.con }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 弹层 -->
        <div class="maskdialogS" v-if="isshowSubmitDialog">
            <div class="maskdialogSClose" @click="coloeDialog">×</div>
            <div class="maskdialogSTitle">校企合作创新班</div>
            <div class="maskdialogSContent">
                <el-form ref="form" :model="form" :rules="rules" label-width="35px">
                    <el-form-item label="" prop="trainClassCode">
                        <div class="rowboxi">
                            <span class="rowboxis">*</span>
                            <el-input v-model="form.trainClassCode" placeholder="请输入培训班代号"></el-input>
                        </div>
                    </el-form-item>
                    <div class="infoadad">培训班代号由校企合作老师统一发送，请联系培训老师</div>
                    <el-form-item label="" prop="homeCollege">
                        <div class="rowboxi">
                            <span class="rowboxis">*</span>
                            <el-input v-model="form.homeCollege" placeholder="请输入您的学院名称"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="" prop="majorName">
                        <div class="rowboxi">
                            <span class="rowboxis">*</span>
                            <el-input v-model="form.majorName" placeholder="请输入您的专业名称"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="" prop="studentName">
                        <div class="rowboxi">
                            <span class="rowboxis">*</span>
                            <el-input v-model="form.studentName" placeholder="请输入您的姓名"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="">
                        <div class="rowboxi">
                            <span class="rowboxis"></span>
                            <el-input v-model="form.studentCode" placeholder="请输入您的学号"></el-input>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <div class="rowitembtn" @click="subobtain">提交报名</div>
        </div>
    </div>
</template>
<script>
import { postBaoming, getSignUpList } from '@/api/train/index.js'
import { mapGetters } from 'vuex'
export default {
    data() {
        // 自定义校验规则
        var validateId = (rule, value, callback) => {
            getSignUpList({ trainClassCode: value }).then((res) => {
                if (res.total == 1) {
                    callback()
                } else {
                    callback(new Error('代号不存在，请线下联系培训老师'))
                }
            })
        }
        return {
            isshowSubmitDialog: false,
            model1Data: [
                {
                    id: 1,
                    img: '/assets/newtrain/model1_1.png',
                    title: '单元测试工程师',
                    con: '负责对软件单元以及单元之间的功能、接口、数据结构和逻辑等进行动态测试',
                },
                {
                    id: 2,
                    img: '/assets/newtrain/model1_2.png',
                    title: '配置项测试工程师',
                    con: '负责对独立软件配置项的功能、性能和接口等各项需求进行动态测试',
                },
                {
                    id: 3,
                    img: '/assets/newtrain/model1_3.png',
                    title: '安全性测试工程师',
                    con: '负责对软件（系统）功能和信息安全性进行测试，包括故障处理模式、异常事件容错、信息保密与防护等',
                },
                {
                    id: 4,
                    img: '/assets/newtrain/model1_4.png',
                    title: 'FPGA测试工程师',
                    con: '负责对完整集成的软硬件系统的任务能力、功能、性能和接口等各项需求进行动态测试',
                },
            ],
            model2Data: [
                {
                    id: 1,
                    img: '/assets/newtrain/model2_1.png',
                    title: '西安科技大学',
                    con: '2023年11月15日上午，智能软件测试协同创新实验室成立仪式在西安科技大学计算机学院隆重举行，该实验室由北京关键科技股份有限公司与西安科技大学共同成立。关键科技董事长焦华春女士、总经理张怀珠、总经理助理牛中东、工业和信息化部人才交流中心人才发展处程宇处长、西安科技大学副校长黄英维等领导和嘉宾出席会议。',
                    bmtj: '计算机科学、软件工程、信息技术等相关专业的学生，或者对软件测试感兴趣并希望在这个领域发展的学生。',
                    pxnr: '单元测试、配置项测试、安全性测试、可编程逻辑器件测试课程学习。',
                    sh: "1.进入北京关键科技股份有限公司人才库且获得工业和信息化人才岗位能力评价证书。",
                    sh1:'2.考核成绩优秀者可推荐进入北京关键科技股份有限公司或者合作单位实习。',
                    sh2:'3.可以在北京关键科技股份有限公司的关键测试宝平台承接测试任务。',
                    sh3:'4.可以去学校配合讲师当助教，进一步加强自身学习。',
                },
                {
                    id: 2,
                    img: '/assets/newtrain/model2_2.png',
                    title: '重庆工程学院',
                    con: '      2023年12月21日上午，软件测试创新中心成立仪式暨软件可靠性测试创新班开班仪式在重庆工程学院行政楼隆重举行，该创新中心在工业和信息化部人才交流中心指导下，由北京关键科技股份有限公司与重庆工程学院共同成立。工业和信息化部人才交流中心人才发展处副处长唐林、人才发展处干部慕雅竹，重庆工程学院党委副书记常务副校长张业平,关键科技董事长焦华春、总经理张怀珠、副总经理郭克成、总经理助理校企合作负责人牛中东等领导和嘉宾出席会议。',
                    bmtj: '计算机科学、软件工程、信息技术等相关专业的学生，或者对软件测试感兴趣并希望在这个领域发展的学生。',
                    pxnr: '单元测试、配置项测试、安全性测试、可编程逻辑器件测试课程学习。',
                    sh: "1.进入北京关键科技股份有限公司人才库且获得工业和信息化人才岗位能力评价证书。",
                    sh1:'2.考核成绩优秀者可推荐进入北京关键科技股份有限公司或者合作单位实习。',
                    sh2:'3.可以在北京关键科技股份有限公司的关键测试宝平台承接测试任务。',
                    sh3:'4.可以去学校配合讲师当助教，进一步加强自身学习。',                },
                {
                    id: 3,
                    img: '/assets/newtrain/model2_3.png',
                    title: '阜阳师范大学',
                    con: ' 2024年1月17日上午，阜阳师范大学计算机与信息工程学院与北京关键科技股份有限公司共建“信创测试实验室”揭牌仪式在阜师大西湖校区举行，标志着北京关键科技与阜师大校企合作模式的开启。',
                    bmtj: '计算机科学、软件工程、信息技术等相关专业的学生，或者对软件测试感兴趣并希望在这个领域发展的学生。',
                    pxnr: '单元测试、配置项测试、安全性测试、可编程逻辑器件测试课程学习。',
                    sh: "1.进入北京关键科技股份有限公司人才库且获得工业和信息化人才岗位能力评价证书。",
                    sh1:'2.考核成绩优秀者可推荐进入北京关键科技股份有限公司或者合作单位实习。',
                    sh2:'3.可以在北京关键科技股份有限公司的关键测试宝平台承接测试任务。',
                    sh3:'4.可以去学校配合讲师当助教，进一步加强自身学习。',                },
                {
                    id: 4,
                    img: '/assets/newtrain/model2_4.png',
                    title: '淮南师范学院',
                    con: '2024年1月18日，关键科技公司董事长焦华春、副总经理郭克成等一行人前往淮南师范学院电子工程学院举行“新能源汽车软件测试实验室” 签约授牌仪式。淮南师范学院教务处处长鲁先文、计算机学院院长陈磊、机械与电气工程学院院长伍龙与电子工程学院党委书记岳德良、院长余海军、党委副书记、纪委书记匡熠、工科系主任参加了校企合作洽谈。  ',
                    bmtj: '计算机科学、软件工程、信息技术等相关专业的学生，或者对软件测试感兴趣并希望在这个领域发展的学生。',
                    pxnr: '单元测试、配置项测试、安全性测试、可编程逻辑器件测试课程学习。',
                    sh: "1.进入北京关键科技股份有限公司人才库且获得工业和信息化人才岗位能力评价证书。",
                    sh1:'2.考核成绩优秀者可推荐进入北京关键科技股份有限公司或者合作单位实习。',
                    sh2:'3.可以在北京关键科技股份有限公司的关键测试宝平台承接测试任务。',
                    sh3:'4.可以去学校配合讲师当助教，进一步加强自身学习。',                },
                {
                    id: 5,
                    img: '/assets/newtrain/model2_5.png',
                    title: '安徽理工大学',
                    con: ' 2024年1月19日，关键科技公司副总经理郭克成一行人率队前往安徽理工大学计算机科学与工程学院举行“可信软件测试与安全实验室”签约授牌仪式。安理工计算机科学与工程学院院长方贤进、副院长徐辉、软件工程系主任夏晨星、计算机科学与技术系副主任杨高明以及部分在校本科生、研究生参加会议。 ',
                    bmtj: '计算机科学、软件工程、信息技术等相关专业的学生，或者对软件测试感兴趣并希望在这个领域发展的学生。',
                    pxnr: '单元测试、配置项测试、安全性测试、可编程逻辑器件测试课程学习。',
                    sh: "1.进入北京关键科技股份有限公司人才库且获得工业和信息化人才岗位能力评价证书。",
                    sh1:'2.考核成绩优秀者可推荐进入北京关键科技股份有限公司或者合作单位实习。',
                    sh2:'3.可以在北京关键科技股份有限公司的关键测试宝平台承接测试任务。',
                    sh3:'4.可以去学校配合讲师当助教，进一步加强自身学习。',                },
                {
                    id: 6,
                    img: '/assets/newtrain/model2_6.png',
                    title: '河南科技大学',
                    con: '2014年1月25日，北京关键科技股份有限公司与河南科技大学软件学院举行了“教学实习基地”授牌仪式。河南科技大学软件学院院长孙士保、产教融合办公室主任裴亚辉、就业科长徐慧、实验室主任张虎，关键科技董事长焦华春、总经理张怀珠、校企合作负责人牛中东出席了签约与授牌仪式。仪式由河南科技大学软件学院就业科科长许慧主持。',
                    bmtj: '计算机科学、软件工程、信息技术等相关专业的学生，或者对软件测试感兴趣并希望在这个领域发展的学生。',
                    pxnr: '单元测试、配置项测试、安全性测试、可编程逻辑器件测试课程学习。',
                    sh: "1.进入北京关键科技股份有限公司人才库且获得工业和信息化人才岗位能力评价证书。",
                    sh1:'2.考核成绩优秀者可推荐进入北京关键科技股份有限公司或者合作单位实习。',
                    sh2:'3.可以在北京关键科技股份有限公司的关键测试宝平台承接测试任务。',
                    sh3:'4.可以去学校配合讲师当助教，进一步加强自身学习。',                },
                {
                    id: 7,
                    img: '/assets/newtrain/model2_6.png',
                    title: '安徽师范大学',
                    con: '2024年3月20日，安徽师范大学计算机与信息学院和北京关键科技股份有限公司举行战略合作洽谈会，共同研究推进校企合作高质量发展、助力软件测试行业生态建设。北京关键科技副总经理郭克成、总经理助理牛中东等同志，计算机与信息学院党委书记袁兴龙、院长罗永龙、副院长接标、副书记张园园等领导参加洽谈会。会议由学院软件工程系主任郭良敏主持。',
                    bmtj: '计算机科学、软件工程、信息技术等相关专业的学生，或者对软件测试感兴趣并希望在这个领域发展的学生。',
                    pxnr: '单元测试、配置项测试、安全性测试、可编程逻辑器件测试课程学习。',
                    sh: "1.进入北京关键科技股份有限公司人才库且获得工业和信息化人才岗位能力评价证书。",
                    sh1:'2.考核成绩优秀者可推荐进入北京关键科技股份有限公司或者合作单位实习。',
                    sh2:'3.可以在北京关键科技股份有限公司的关键测试宝平台承接测试任务。',
                    sh3:'4.可以去学校配合讲师当助教，进一步加强自身学习。',                },
                {
                    id: 8,
                    img: '/assets/newtrain/model2_6.png',
                    title: '安徽工程大学',
                    con: ' 2024年3月19日，安徽工程大学和北京关键科技股份有限公司举行战略合作洽谈会，共同研究推进校企合作高质量发展、助力软件测试行业生态建设。',
                    bmtj: '计算机科学、软件工程、信息技术等相关专业的学生，或者对软件测试感兴趣并希望在这个领域发展的学生。',
                    pxnr: '单元测试、配置项测试、安全性测试、可编程逻辑器件测试课程学习。',
                    sh: "1.进入北京关键科技股份有限公司人才库且获得工业和信息化人才岗位能力评价证书。",
                    sh1:'2.考核成绩优秀者可推荐进入北京关键科技股份有限公司或者合作单位实习。',
                    sh2:'3.可以在北京关键科技股份有限公司的关键测试宝平台承接测试任务。',
                    sh3:'4.可以去学校配合讲师当助教，进一步加强自身学习。',                },
                {
                    id: 9,
                    img: '/assets/newtrain/model2_6.png',
                    title: '重庆邮电大学',
                    con: '  2024年3月28日，北京关键科技股份有限公司郭克成、牛中东拜访重庆邮电大学，与重庆邮电大学张力生副院长、吴朝峰实验中心副主任，洽谈关于4月份软件开发综合实训内容，最终达成合作意向。',
                    bmtj: '计算机科学、软件工程、信息技术等相关专业的学生，或者对软件测试感兴趣并希望在这个领域发展的学生。',
                    pxnr: '单元测试、配置项测试、安全性测试、可编程逻辑器件测试课程学习。',
                    sh: "1.进入北京关键科技股份有限公司人才库且获得工业和信息化人才岗位能力评价证书。",
                    sh1:'2.考核成绩优秀者可推荐进入北京关键科技股份有限公司或者合作单位实习。',
                    sh2:'3.可以在北京关键科技股份有限公司的关键测试宝平台承接测试任务。',
                    sh3:'4.可以去学校配合讲师当助教，进一步加强自身学习。',                },
                {
                    id: 10,
                    img: '/assets/newtrain/model2_6.png',
                    title: '辽宁工业大学',
                    con: ' 2024年3月14日，辽宁工业大学和北京关键科技股份有限公司举行战略合作洽谈会，共同研究推进校企合作高质量发展、助力软件测试行业生态建设。北京关键科技总经理张元军、副总经理郭克成，辽工大电子与信息工程学院张兴副院长、褚治广领导参加洽谈会。',
                    bmtj: '计算机科学、软件工程、信息技术等相关专业的学生，或者对软件测试感兴趣并希望在这个领域发展的学生。',
                    pxnr: '单元测试、配置项测试、安全性测试、可编程逻辑器件测试课程学习。',
                    sh: "1.进入北京关键科技股份有限公司人才库且获得工业和信息化人才岗位能力评价证书。",
                    sh1:'2.考核成绩优秀者可推荐进入北京关键科技股份有限公司或者合作单位实习。',
                    sh2:'3.可以在北京关键科技股份有限公司的关键测试宝平台承接测试任务。',
                    sh3:'4.可以去学校配合讲师当助教，进一步加强自身学习。',
                },
                {
                    id: 7,
                    img: '/assets/newtrain/model2_7.png',
                    title: '创新班开课',
                },
                {
                    id: 8,
                    img: '/assets/newtrain/model2_8.png',
                    title: '项目实操',
                },
            ],
            activeModel2: {
                // id: 1,
                // img: '/assets/newtrain/model2_1.png',
                // title: '西安科技大学',
                // con: '      11月15日上午，智能软件测试协同创新实验室成立仪式在西安科技大学计算机学院隆重举行，该实验室由北京关键科技股份有',
                // bmtj: '西安科技大学计算机学院在读学生，热爱计算机、向往软件测试技术的同学均可报名（软件工程专业优先）。',
                // pxnr: '学员将参加静态测试、单元测试、配置项测试、测试管理等课程学习。（注：详见课程计划，不占用正常上课时间，学员不需要承担任何费用.',
                // sh: '1.进入北京关键科技股份有限公司测试人才库且获得创新实验室颁发的培训证书。 2.在校期间获得带薪实习机会，丰富真实项目开发履历',
            },
            isShowModel3: false,
            model3Data: ['单元测试', '配置项测试', '测试管理', '更多课程'],
            model3Active: '单元测试',
            model32Data: [
                {
                    id: 1,
                    img: '/assets/newtrain/model4_1.png',
                    title: '静态测试',
                },
                {
                    id: 2,
                    img: '/assets/newtrain/model4_2.png',
                    title: '单元测试',
                },
                {
                    id: 3,
                    img: '/assets/newtrain/model4_3.png',
                    title: '配置项测试',
                },
                {
                    id: 4,
                    img: '/assets/newtrain/model4_4.png',
                    title: '系统测试',
                },
                {
                    id: 5,
                    img: '/assets/newtrain/model4_5.png',
                    title: '功能测试',
                },
                {
                    id: 6,
                    img: '/assets/newtrain/model4_6.png',
                    title: '性能测试',
                },
                {
                    id: 7,
                    img: '/assets/newtrain/model4_7.png',
                    title: '接口测试',
                },
                {
                    id: 8,
                    img: '/assets/newtrain/model4_8.png',
                    title: '安全测试',
                },
                {
                    id: 9,
                    img: '/assets/newtrain/model4_9.png',
                    title: '器件测试',
                },
            ],
            model33Data: [
                '/assets/ability/pater1.png',
                '/assets/ability/pater2.png',
                '/assets/ability/pater3.png',
                '/assets/ability/pater4.png',
                '/assets/ability/pater5.png',
                '/assets/ability/pater6.png',
                '/assets/ability/pater7.png',
                '/assets/ability/pater8.png',
            ],
            model34Data: [
                {
                    con: '什么是单元测试，单元测试内容',
                    num: '1课时',
                },
                {
                    con: '典型单元测试流程典型单元测试流程典型单元测试流程典型单元测试流程',
                    num: '1课时',
                },
                {
                    con: '单元测试依据的标准介绍',
                    num: '1课时',
                },
                {
                    con: '单元测试的测试类型单元测试的测试类型单元测试的测试类型单元测试的测试类型',
                    num: '1课时',
                },
                {
                    con: '单元测试工具介绍',
                    num: '1课时',
                },

                {
                    con: '单元测试用例如何编写，单元测试总结及评审',
                    num: '1课时',
                },
            ],
            model4Data: ['单元测试', '配置项测试', '接口测试', '安全性测试', '性能测试', '其他课程'],
            model7Data: [
                {
                    id: 1,
                    img: '/assets/newtrain/model8_1.png',
                    title: '精品课程',
                    con: '理论＋实际， 持续更新最前沿实用技术',
                },
                {
                    id: 2,
                    img: '/assets/newtrain/model8_2.png',
                    title: '专家讲师',
                    con: '一线工程师＋项目负责人 ＋领域专家 ',
                },
                {
                    id: 3,
                    img: '/assets/newtrain/model8_3.png',
                    title: '线下课程',
                    con: '专家线下授课 一线工程师手把手项目实操',
                },
                {
                    id: 4,
                    img: '/assets/newtrain/model8_4.png',
                    title: '技术认证',
                    con: '国家工信部人才交流中心 可靠性测试领域唯一合作伙伴',
                },
                {
                    id: 5,
                    img: '/assets/newtrain/model8_5.png',
                    title: '多元就业',
                    con: '关键科技内聘，客户企业推荐 云测平台灵活就业，自主择业 ',
                },
            ],
            model9Data: [
                {
                    id: 1,
                    img: '/assets/newtrain/model10_1.png',
                    title: '发展方向广',
                    con: '各行各业都需要，尤其是 互联网、军工、能源、汽车 ',
                },
                {
                    id: 2,
                    img: '/assets/newtrain/model10_2.png',
                    title: '人才缺口大',
                    con: '国内测试人才缺口超过 30万，且逐年递增',
                },
                {
                    id: 3,
                    img: '/assets/newtrain/model10_3.png',
                    title: '入学门槛低',
                    con: '0专业基础入门 经验不限',
                },
                {
                    id: 4,
                    img: '/assets/newtrain/model10_4.png',
                    title: '技术上手快',
                    con: '2个月起，快速学 习、系统掌握 ',
                },
                {
                    id: 5,
                    img: '/assets/newtrain/model10_5.png',
                    title: '薪资待遇好',
                    con: '起步月薪6-10K，优秀 学员年薪可达20万',
                },
            ],
            model10Data: [
                {
                    id: 1,
                    img: '/assets/train/zs1.png',
                    con: '工业和信息化重点领域人才能力评价体系建设支撑机构',
                },
                {
                    id: 2,
                    img: '/assets/train/zs2.png',
                    title: '配置项测试工程师',
                    con: '工业和信息化重点领域人才能力评价专业服务支撑机构',
                },
                {
                    id: 3,
                    img: '/assets/train/zs3.png',
                    title: '安全性测试工程师',
                    con: '工业和信息化人才岗位能力评价证书',
                },
            ],
            // 表单
            form: {},
            rules: {
                trainClassCode: [
                    { required: true, message: '请输入培训班代号', trigger: 'blur' },
                    { validator: validateId, trigger: 'blur' },
                ],
                homeCollege: [{ required: true, message: '请输入您的学院名称', trigger: 'blur' }],
                majorNamec: [{ required: true, message: '请输入您的专业名称', trigger: 'blur' }],
                studentName: [{ required: true, message: '请输入您的姓名', trigger: 'blur' }],
            },
        }
    },
    computed: {
        ...mapGetters(['token','userinform']),
    },
    mounted() {
        this.form.mobile=this.userinform.phonenumber;
        this.activeModel2=this.model2Data[0] 
        getSignUpList().then(res=>{
            console.log('全部的学院',res)
            this.allschool=res.rows
        })
    },
    methods: {
        // 模块3点击
        // model3Click(val) {
        //     this.model3Active = val
        // },
        // 学校点击
        modelSchool(item) {
            this.activeModel2 = item
        },
        // 咨询点击
        zixunClick() {
            const bigbox = document.querySelector('#minidialog')
            const x = document.querySelector('.closeX')
            x.style.display = 'block'
            bigbox.style.width = '300px'
            bigbox.style.height = 'auto'
            bigbox.style.display = 'block'
        },
        // 打开模块3
        openModel3() {
            this.isShowModel3 = true
        },
        // 关闭模块3
        closeModel3() {
            this.isShowModel3 = false
        },
        // 打开弹层
        openSubmit() {
            if (!this.token) {
                this.$confirm('您未登录,请您先去登录', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        this.$router.push('/login?type=log')
                    })
                    .catch(() => {
                        // console.log('取消')
                    })
            } else {
                this.isshowSubmitDialog = true
            }
        },
        // 弹层提交
        subobtain() {
            this.$refs['form'].validate(async (valid) => {
                if (valid) {
                    await postBaoming(this.form)
                    this.$message.success('报名成功')
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        // 弹层x
        coloeDialog() {
            this.$refs['form'].resetFields()
            this.isshowSubmitDialog = false
        },
    },
}
</script>
<style scoped>
/* 咨询 */
.zxzx {
    width: 180px;
    height: 68px;
    position: fixed;
    right: 16px;
    top: 600px;
    font-weight: 500;
    font-size: 17px;
    color: #ffffff;
    background: url('/assets/ability/zixun.gif');
    background-size: 100% 100%;
    line-height: 68px;
    text-indent: 2em;
    cursor: pointer;
}
/* 弹层 */
.maskdialogS {
    width: 592px;
    height: 503px;
    background: #ffffff;
    box-shadow: 0px 4px 21px 4px rgba(19, 106, 189, 0.15);
    z-index: 2000;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.maskdialogSClose {
    position: absolute;
    top: 15px;
    right: 30px;
    font-weight: 400;
    font-size: 25px;
    color: #858994;
    cursor: pointer;
}
.maskdialogSTitle {
    height: 59px;
    font-weight: bold;
    font-size: 22px;
    color: #1a1a1a;
    line-height: 59px;
    text-align: center;
    background: #f3f5fb;
}
.maskdialogSContent {
    box-sizing: border-box;
    padding: 20px 40px 0 0;
    box-sizing: border-box;
}
.rowitembtn {
    width: 520px;
    height: 48px;
    background: #2084f9;
    box-shadow: 0px 1px 20px 1px rgba(13, 92, 187, 0.3);
    border-radius: 6px;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    line-height: 44px;
    cursor: pointer;
    margin: auto;
}
.infoadad {
    font-weight: 500;
    font-size: 14px;
    color: #0066eb;
    margin: -5px 0 15px 35px;
}
.rowboxi {
    display: flex;
    align-items: center;
}
.rowboxis {
    font-size: 20px;
    color: red;
    width: 20px;
}
.maskdialogSContent >>> .el-form-item__error {
    left: 20px;
}
.maskdialogSContent >>> .el-form-item__content {
    margin-left: 18px !important;
}
/* 页面整体样式 */
.container {
    width: 1200px;
    margin: auto;
}
.model_title {
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.model_title_top {
    display: flex;
    justify-content: center;
    align-items: center;
}
.model_title_top p {
    font-weight: bold !important;
    font-size: 32px !important;
    color: #1a1a1a;
    margin: 0 15px;
}
.model_title_top2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
}
.model_title_top2 p {
    font-weight: bold !important;
    font-size: 25px !important;
    color: #1a1a1a;
    margin: 0 13px 0 15px;
}
.model_title_img {
    width: 526px;
    height: 28px;
}
.model_title_text {
    font-weight: 500;
    font-size: 16px;
    color: #595959;
    margin-top: 20px;
}
.trainpage {
    width: 100%;
    box-sizing: border-box;
}
.bannertop {
    width: 100%;
    height: 450px;
    object-fit: cover;
}
/* 页面整体样式 */
/* 模块1 */
.moedel1_content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    height: 310px;
    box-sizing: border-box;
}
.moedel1_contentitem {
    width: 280px;
    height: 280px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: all 0.1s linear;
    overflow: hidden;
    box-shadow: 0px 4px 34px 6px rgba(14, 97, 205, 0.1);
    cursor: pointer;
}
.moedel1_contentitem:hover {
    height: 308px;
}
.moedel1_contentitem:hover .moedel1_contentitem_arrow {
    bottom: 10px;
}
.moedel1_contentitem_arrow {
    width: 18px;
    height: 18px;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%, 0);
}
.moedel1_contentitem_imgbox {
    width: 100%;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.moedel1_contentitem_img {
    width: 75px;
    height: 75px;
}
.moedel1_contentitem_text {
    width: 100%;
    flex: 1;

    border-top: 1px solid #ebebeb;
    padding: 20px;
    box-sizing: border-box;
}
.moedel1_contentitem_text1 {
    line-height: 34px;
    text-align: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 18px;
    color: #1a1a1a;
}
.moedel1_contentitem_text2 {
    font-weight: 500;
    font-size: 15px;
    color: #808080;
    line-height: 25px;
}
/* 模块1 */
/* 模块2 */
.model2 {
    width: 100%;
    height: 797px;
    background-image: url('/assets/newtrain/model2_banner.png');
    background-size: 100% 100%;
}
.model2_middle {
    overflow: hidden;
    height: 100%;
}
.model2_content {
    width: 100%;
    height: 598px;
    background: #ffffff;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 20px;
}
.model2_content_title {
    font-weight: 500;
    font-size: 16px;
    color: #808080;
    width: 806px;
    text-align: center;
    margin: 25px auto;
}
.model2_content_itemcontent {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
}
.model2_content_item {
    width: 275px;
}
.model2_content_item_img {
    width: 100%;
    height: 190px;
}
.model2_content_item_text {
    font-weight: 500;
    font-size: 18px;
    color: #333333;
    margin: 10px 0;
    text-align: center;
}
/* 模块2 */

/* 模块3 */
.flagUp {
    display: flex;
    justify-content: center;
}
.flagUp_img {
    width: 27px;
    height: 27px;
    transform: rotate(180deg);
    margin: 20px 0;
    cursor: pointer;
}
.moedel3_content {
    width: 100%;
    /* height: 326px; */
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(58, 59, 72, 0.15);
    border-radius: 6px 0px 0px 6px;
    display: flex;
    padding: 25px;
    box-sizing: border-box;
}
.moedel3_content_l {
    width: 257px;
    height: 100%;
    border-right: 1px solid rgba(180, 180, 180, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
.moedel3_content_l_item {
    width: 190px;
    height: 50px;
    border: 1px solid #0066eb;
    font-weight: 500;
    font-size: 18px;
    color: #0066eb;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
}
.moedel3_content_l_itemactive {
    background: #0066eb;
    color: #ffffff;
}

.moedel3_content_r {
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 65px auto 95px;
    border-top: 1px solid #e8eaed;
    border-left: 1px solid #e8eaed;
}
.moedel3_content_r_griditem {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e8eaed;
    border-right: 1px solid #e8eaed;
    box-sizing: border-box;
    color: #666666;
}
.moedel3_content_r_griditemmi {
    justify-content: flex-start;
    padding-left: 20px;
}
.moedel3_content_r_griditemtop {
    background: #e9f0fa;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
}

.model3_skill_title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
}
.model3_skill_img {
    width: 284px;
    height: 32px;
}
.model3_skill_itembox {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.model3_skill_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    background: #ffffff;
    box-shadow: 0px 1px 19px 1px rgba(53, 53, 57, 0.08);
    border-radius: 6px;
    transition: all 0.1s linear;
}
.model3_skill_item:hover {
    transform: scale(1.05);
}
.model3_skill_item_img {
    width: 35px;
    height: 34px;
}
.model3_skill_item_text {
    margin-top: 15px;
    font-weight: 500;
    font-size: 15px;
    color: #4d4d4d;
}

.model32_skill_itembox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.model32_skill_item {
    width: 280px;
    height: 80px;
    box-shadow: 0px 4px 34px 6px rgba(14, 97, 205, 0.1);
    margin-bottom: 20px;
    transition: all 0.1s linear;
}
.model32_skill_item:hover {
    transform: scale(1.05);
}
.model32_skill_item_img {
    width: 100%;
    height: 100%;
}

/* 模块3 */

/* 模块4 */

.moedel4_content_tag {
    display: flex;
    margin-bottom: 40px;
}
.moedel4_content_tag_item {
    width: 112px;
    height: 36px;
    background: #eef2f7;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 12px;
    font-size: 14px;
}
.moedel4_content_tag_itemactive {
    background: #0066eb;
    color: #ffffff;
}
.moedel4_content_video {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.moedel4_content_video_item {
    width: 280px;
    height: 250px;
    background: #ffffff;
    box-shadow: 1px 1px 8px 0px rgba(43, 34, 34, 0.1);
    border-radius: 4px;
    box-sizing: border-box;
    padding: 13px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.moedel4_content_video_item_top {
    position: relative;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
}
.moedel4_content_video_item_top_l {
    position: absolute;
    bottom: 10px;
    left: 10px;
}
.moedel4_content_video_item_top_r {
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.moedel4_content_video_item_top_limg {
    width: 11px;
    height: 12px;
}
.moedel4_content_video_item_top_rimg {
    width: 17px;
    height: 12px;
}
.moedel4_content_video_item_topimg {
    width: 100%;
    height: 132px;
}
.moedel4_content_video_item_middel {
    font-weight: 500;
    font-size: 16px;
    color: #1a1a1a;
    margin-top: -20px;
}
.moedel4_content_video_item_bottom {
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    font-size: 14px;
    color: #808080;
}
/* .moedel4_content_video_item_bl {
} */
.moedel4_content_video_item_blimg {
    width: 14px;
    height: 15px;
}
.moedel4_content_video_item_br {
    font-weight: 400;
}

/* 模块4 */

/* 模块5 */
.model5 {
    width: 100%;
    background: #f7f7fa;
    overflow: hidden;
    margin-top: 20px;
}
.moedel5_content_tag {
    display: flex;
    margin-bottom: 40px;
}
.moedel5_content_tag_item {
    width: 112px;
    height: 36px;
    background: #ffffff;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 12px;
    font-size: 14px;
    color: #333333;
    font-weight: 500;
    cursor: pointer;
}
.moedel5_content_tag_itemactive {
    background: #0066eb;
    color: #ffffff;
}
.moedel5_content_con {
    width: 100%;
    height: 570px;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    margin-bottom: 50px;
}
.moedel5_content_con_l {
    height: 100%;
    width: 544px;
    border-right: 1px solid rgba(180, 180, 180, 0.1);
    padding: 30px 40px 30px 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.moedel5_content_con_limg {
    width: 100%;
    height: 276px;
    margin-bottom: 20px;
}
.moedel5_content_con_lcon {
    flex: 1;
    line-height: 30px;
    text-indent: 2em;
    overflow: hidden;
    font-weight: 500;
    font-size: 15px;
    color: #333333;
}
.moedel5_content_con_r {
    flex: 1;
    padding: 30px 40px;
    box-sizing: border-box;
    overflow: auto;
}
.moedel5_content_con_r_title {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    color: #333333;
    margin: 10px 0;
}
.moedel5_content_con_r_titleline {
    width: 4px;
    height: 16px;
    background: #1a7aed;
    margin-right: 10px;
}
.moedel5_content_con_r_con {
    line-height: 28px;
    font-weight: 500;
    font-size: 15px;
    color: #737373;
}
.moedel5_content_con_r_btn {
    width: 200px;
    height: 42px;
    background: linear-gradient(90deg, #5ea6fd, #1a81f9);
    border-radius: 21px;
    font-weight: 500;
    font-size: 18px;
    color: #ffffff;
    line-height: 42px;
    text-align: center;
    margin-top:50px;
    cursor: pointer;
}
.moedel5_content_con_r_btn:hover {
    background: linear-gradient(90deg, #1a81f9, #5ea6fd);
}

/* 模块5 */

/* 模块6 */
.moedel6_content {
    background: #f7f7fa;
    border-top: 1px solid #e8eaed;
    border-left: 1px solid #e8eaed;
    display: grid;
    grid-template-columns: 106px 125px auto;
}
.moedel6_content_griditem {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e8eaed;
    border-right: 1px solid #e8eaed;
    box-sizing: border-box;
    /* padding-left: 20px; */
}
.moedel6_content_griditemtop {
    font-weight: bold;
    font-size: 18px;
    color: #1a1a1a;
    background: #cadaf1;
}
.moedel6_content_griditemleft {
    justify-content: flex-start;
    padding-left: 20px;
}
.moedel6_content_griditemspan2 {
    grid-row: span 2;
    height: 100px;
}

/* 模块6 */
/* 模块7 */
.moedel7_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.moedel7_content_item {
    width: 220px;
    height: 260px;
    background: #ffffff;
    box-shadow: 0px 1px 10px 0px rgba(41, 46, 52, 0.1);
    border-radius: 6px;
    border: 1px solid #dcd8ef;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
.moedel7_content_item_img {
    width: 100px;
    height: 100px;
}
.moedel7_content_item_title {
    font-weight: bold;
    font-size: 20px;
    color: #1a1a1a;
}
.moedel7_content_item_con {
    padding: 0 10px;
    box-sizing: border-box;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    color: #808080;
    line-height: 24px;
}

/* 模块7 */
/* 模块8 */
.moedel8_content {
    height: 390px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    display: flex;
}
.moedel8_content_l {
    flex: 1;
    box-sizing: border-box;
    padding: 50px 16px 45px 37px;
}
.moedel8_content_limg {
    width: 100%;
    height: 100%;
}
.moedel8_content_r {
    width: 731px;
    height: 100%;
    background: #f5f5f7;
    box-sizing: border-box;
    padding: 0 47px 0 103px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.moedel8_content_sanjiao {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-width: 195px 50px 195px 50px;
    border-style: solid;
    border-color: #ffffff transparent transparent #ffffff;
}
.moedel8_content_rtop {
    font-weight: bold;
    font-size: 28px;
    color: #1a1a1a;
}
.moedel8_content_rline {
    width: 40px;
    height: 4px;
    background: #0066eb;
    border-radius: 2px;
    margin: 20px 0;
}
.moedel8_content_rcon {
    font-weight: 500;
    font-size: 16px;
    color: #666666;
    line-height: 34px;
}
/* 模块8 */

/* 模块9 */
.model9 {
    margin-bottom: 60px;
}
.moedel9_content {
    display: flex;
    justify-content: space-between;
}
.moedel9_content_item {
    width: 212px;
    height: 260px;
    background: #ffffff;
    box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.moedel9_content_item_top {
    width: 100%;
    height: 104px;
}
.moedel9_content_item_middle {
    font-weight: bold;
    font-size: 20px;
    color: #1a1a1a;
}
.moedel9_content_item_bottom {
    height: 50px;
    font-weight: 500;
    font-size: 16px;
    color: #808080;
    text-align: center;
}
/* 模块9 */
/* 模块10 */
.model10Con {
    display: flex;
    justify-content: space-between;
    padding-bottom: 60px;
}
.model10Con_item {
    width: 383px;
    height: 279px;
    box-shadow: 0px 4px 34px 6px rgba(14, 97, 205, 0.1);
    position: relative;
}
.model10Con_item:hover .model10Con_item_mask {
    opacity: 1;
}
.model10Con_item_img {
    width: 100%;
    height: 100%;
}
.model10Con_item_mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 383px;
    height: 279px;
    background: rgba(23, 24, 27, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}
.model10Con_item_mask .context {
    width: 260px;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    line-height: 29px;
}

/* 模块10 */
</style>