<template>
  <div class="main_content">
    <div class="content_banner">
      <img src="https://webapp-pub.ezijing.com/www/pc/practice/marketing/banner.png" class="banner" />
      <!-- <div class="banner_btn">点击登录>></div> -->
    </div>
    <div class="content_important">
      <div class="important_con">
        <div class="con_tit">数字营销能力的重要性</div>
        <div class="con_desc">“政、校、企、行”协同创新为引领， “1（政府）+1（清控紫荆）+N（周边高校）”的模式</div>
        <div class="con_tips">数字营销能力是数字经济10大核心能力之一</div>
        <div class="con_tips1">
          数字营销能力是数字经济时代下的十大核心能力之一<br />
          数字营销能力是数字经济时代下任何行业，任何企业，任何岗位都应当具备的底层核心能力
        </div>
        <div class="con_main">
          <div class="main_list" v-for="(item, index) in marketingList" :key="index">
            <img :src="item.img" class="list_img" />
            <div class="list_tit">{{ item.tit }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="content_ability">
      <div class="ability_tit">数字经济十大核心能力</div>
      <div class="ability_business">
        <div class="business_tit">业务能力</div>
        <div class="business_con">
          <div class="con_list" v-for="(item, index) in businessList" :key="index">
            <img :src="item.img" class="list_img" />
            <img :src="item.imgActive" class="list_imgActive" />
            <div class="list_tit">{{ item.tit }}</div>
          </div>
        </div>
      </div>
      <div class="ability_technology">
        <div class="technology_tit">技术能力</div>
        <div class="business_con">
          <div class="con_list" v-for="(item, index) in technologyList" :key="index">
            <img :src="item.img" class="list_img" />
            <img :src="item.imgActive" class="list_imgActive" />
            <div class="list_tit">{{ item.tit }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="content_thinking">
      <div class="thinking_con">
        <div class="con_tit">数字营销实验室“学-练-训”一体化能力培养思路</div>
        <div class="con_desc">
          清控紫荆教育推出的数字营销实验室通过“学-练-训”的一体化培养思路，结合紫荆教育数字经济产业学院相关专业配套课程资源体系，以数字营销实验室为训练载体，为本科院校和高职院校师生提供实训课程教学服务，培养一批行业素养高，应用能力强的数字化人才，实现人才培养与产业需求无缝对接，为各区域数字经济发展提供人才支持服务。
        </div>
        <img src="https://webapp-pub.ezijing.com/www/pc/practice/marketing/thinking.png" class="con_img" />
      </div>
    </div>
    <div class="content_example">
      <div class="example_tit">数字营销实验室支撑课程及专业（示例）</div>
      <div class="example_major">
        <div class="major_tit">专业（专科示例）</div>
        <div class="major_con">
          <div class="con_list" v-for="(item, index) in majorList" :key="index">
            <img :src="item.img" alt="" />
            <div class="mask"></div>
            <div class="list_tit">{{ item.tit }}</div>
          </div>
        </div>
      </div>
      <div class="example_course">
        <div class="course_tit">试用课程（专科示例）</div>
        <div class="course_con">
          <div class="prev_btn"></div>
          <swiper :options="swiperOption">
            <swiper-slide v-for="(item, index) in courseList" :key="index" class="con_list">
              <img :src="item.img" />
              <p>{{ item.tit }}</p>
            </swiper-slide>
          </swiper>
          <div class="next_btn"></div>
        </div>
      </div>
    </div>
    <div class="content_integrated">
      <div class="integrated_con">
        <div class="con_tit">数字营销实验室“学-练-训”一体化能力培养思路</div>
        <div class="con_list">
          <div class="list_left">
            <div
              class="left_tab"
              v-for="(item, index) in tabList"
              :key="index"
              @mouseover="navActive(item, index)"
              :class="{ active: index === tabActive }"
            >
              <div class="tab_con">
                <div class="con_index">{{ index + 1 }}</div>
                <div class="con_tit">{{ item.tit }}</div>
              </div>
            </div>
          </div>
          <div class="list_img" v-if="tabActive === 0">
            <img
              src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/integrated1.png"
              alt=""
            />
            <ul class="list_con">
              <li v-for="(item, index) in tabListItem1" :key="index">{{ item }}</li>
            </ul>
          </div>
          <div class="list_img" v-if="tabActive === 1">
            <img
              src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/integrated2.png"
              alt=""
            />
            <ul class="list_con">
              <li v-for="(item, index) in tabListItem2" :key="index">{{ item }}</li>
            </ul>
          </div>
          <div class="list_img" v-if="tabActive === 2">
            <img
              src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/integrated3.png"
              alt=""
            />
            <ul class="list_con">
              <li v-for="(item, index) in tabListItem3" :key="index">{{ item }}</li>
            </ul>
          </div>
          <div class="list_img" v-if="tabActive === 3">
            <img
              src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/integrated4.png"
              alt=""
            />
            <ul class="list_con">
              <li v-for="(item, index) in tabListItem4" :key="index">{{ item }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="content_laboratory">
      <div class="laboratory_tit">
        紫荆教育数字营销实验室
      </div>
      <div class="laboratory_img">
        <div class="img_txt">
          “学 - 练 - 训 - 赛”一体化人才培养，教学与行业场景无缝衔接
        </div>
      </div>
      <div class="laboratory_con">
        <div class="con_tab">
          <div
            class="tab_item"
            v-for="(item, index) in laboratoryList"
            :key="index"
            @mouseover="navTabActive(item, index)"
            :class="{ active: index === tabLabActive }"
          >
            <img :src="item.img" class="item_img" />
            <img :src="item.imgActive" class="item_imgActive" />
            <div class="item_tit">{{ item.tit }}</div>
            <div class="item_desc">{{ item.desc }}</div>
          </div>
        </div>
        <div class="con_main" v-if="tabLabActive === 0">
          <img
            src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/laTab1_bg.png"
            class="main_img1"
          />
          <div class="main_part">
            <div class="part_list" v-for="(item, index) in labList1">
              <div class="list_index">{{ '0' + (index + 1) }}</div>
              <div class="list_tit">{{ item }}</div>
            </div>
          </div>
        </div>
        <div class="con_main" v-if="tabLabActive === 1">
          <el-carousel :interval="4000" type="card" height="370px" arrow="never">
            <el-carousel-item v-for="(item, index) in labList2" :key="item">
              <img :src="item" class="main_img" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="con_main" v-if="tabLabActive === 2">
          <img src="https://webapp-pub.ezijing.com/www/pc/practice/marketing/laTab3_bg.png" alt="" />
        </div>
      </div>
    </div>
    <div class="content_laboratory1">
      <div class="laboratory1_con">
        <div class="con_tit">紫荆教育数字营销实验室</div>
        <img
          src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/la1_img.png"
          class="con_img"
        />
      </div>
    </div>
    <div class="content_resource">
      <div class="resource_tit">
        配套资源：内置数字化营销案例与配套数据
      </div>
      <div class="resource_desc">
        数字营销实验室内置经过教育适配化之后的行业真实教学案例库，目前案例数量已达近20个，教学学时数已达到80+。每一个行业教学案例包含4个课时的学习内容和资源，既有面向学生的学习资源（实验指导书、实验学习视频等），也有面向教师的资源（教学指导、教学方案、教学PPT、视频、题库等），案例配套数据集以及相关程序等。让学生在校即可熟练掌握真实商业环境下的营销场景、营销流程和自动化、精细化营销，实现教学与行业的无缝对接。
      </div>
      <img
        src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/resource_img.png"
        class="resource_img"
      />
    </div>
    <div class="content_service">
      <div class="service_tit">紫荆教育实验室产品配套服务</div>
      <div class="service_con">
        <div class="con_left">
          <img src="https://webapp-pub.ezijing.com/www/pc/practice/marketing/service_icon1.png" class="left_img" />
          <div class="left_tit">实习就业服务</div>
          <ul class="left_desc">
            <li v-for="(item, index) in servicesList1" :key="index">
              <p>{{ item }}</p>
            </li>
          </ul>
        </div>
        <div class="con_right">
          <div class="right_list">
            <div class="right_top">
              <img src="https://webapp-pub.ezijing.com/www/pc/practice/marketing/service_icon2.png" class="top_img" />
              <div class="top_tit">产品服务</div>
            </div>
            <ul class="right_desc">
              <li v-for="(item, index) in servicesList2" :key="index">
                <p>{{ item }}</p>
              </li>
            </ul>
          </div>
          <div class="right_list">
            <div class="right_top">
              <img src="https://webapp-pub.ezijing.com/www/pc/practice/marketing/service_icon3.png" class="top_img" />

              <div class="top_tit">资源服务</div>
            </div>
            <ul class="right_desc">
              <li v-for="(item, index) in servicesList3" :key="index">
                <p>{{ item }}</p>
              </li>
            </ul>
          </div>
          <div class="right_list">
            <div class="right_top">
              <img src="https://webapp-pub.ezijing.com/www/pc/practice/marketing/service_icon4.png" class="top_img" />

              <div class="top_tit">教学服务</div>
            </div>
            <ul class="right_desc">
              <li v-for="(item, index) in servicesList4" :key="index">
                <p>{{ item }}</p>
              </li>
            </ul>
          </div>
          <div class="right_list">
            <div class="right_tit"></div>
            <div class="right_top">
              <img src="https://webapp-pub.ezijing.com/www/pc/practice/marketing/service_icon5.png" class="top_img" />

              <div class="top_tit">科研服务</div>
            </div>
            <ul class="right_desc">
              <li v-for="(item, index) in servicesList5" :key="index">
                <p>{{ item }}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="content_bottom"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabActive: 0,
      tabLabActive: 0,
      swiperOption: {
        slidesPerView: 'auto',
        spaceBetween: 18,
        navigation: {
          nextEl: '.prev_btn',
          prevEl: '.next_btn'
        }
      },

      marketingList: [
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/market1.png',
          tit: '具备数字化战略思维'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/market2.png',
          tit: '根据业务场景使用数字化技术工具'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/market3.png',
          tit: '提供专业的数字化服务'
        }
      ],
      businessList: [
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/business1.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/business1_active.png',
          tit: '敏锐的商业嗅觉'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/business2.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/business2_active.png',
          tit: '商业模式设计能力'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/business3.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/business3_active.png',
          tit: '商业决策能力'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/business4.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/business4_active.png',
          tit: '数字化营销能力'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/business5.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/business5_active.png',
          tit: '数字媒体运营能力'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/business6.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/business6_active.png',
          tit: '品牌战略分析能力'
        }
      ],
      technologyList: [
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/technology1.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/technology1_active.png',
          tit: '数据挖掘能力'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/technology2.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/technology2_active.png',
          tit: '数据分析能力'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/technology3.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/technology3_active.png',
          tit: '人工智能 & 深度学习'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/technology4.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/technology4_active.png',
          tit: '先进技术工具使用能力'
        }
      ],
      majorList: [
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/major1.png',
          tit: '市场营销'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/major2.png',
          tit: '网络营销与直播电商'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/major3.png',
          tit: '电子商务'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/major4.png',
          tit: '移动商务'
        }
      ],
      courseList: [
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/course1.png',
          tit: '网络营销'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/course2.png',
          tit: '客户服务与管理'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/course3.png',
          tit: '门店/用户运营'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/course4.png',
          tit: '市场营销基础'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/course5.png',
          tit: '销售管理'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/course6.png',
          tit: '网络营销'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/course7.png',
          tit: '金融产品数字化营销'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/practice/marketing/course8.png',
          tit: '数字营销理论与实务'
        }
      ],
      tabList: [
        {
          tit: '工业级产品，无缝衔接真实场景'
        },
        {
          tit: '全面支撑师生实践教学场景'
        },
        {
          tit: '配套丰富的实训教学资源'
        },
        {
          tit: '提供多维度、多对象的专业服务'
        }
      ],
      tabListItem1: [
        '真实工业级营销平台',
        '用户精细化、分层管理',
        '自动营销旅程配置',
        '基于标签体系的精细化营销管理',
        '实时数据画像分析'
      ],
      tabListItem2: ['实训指导书', '操作视频', '论坛与答疑', '一键截图与一键提交', '实训评分'],
      tabListItem3: ['配套课程资源', '配套实训资源', '配套行业案例', 'PPT+Word+视频+题库+试卷+……'],
      tabListItem4: [
        '产品免费升级服务',
        '产品使用培训服务',
        '产品定期巡检与优化服务',
        '课程资源建设服务',
        '行业案例免费升级服务',
        '师资培训服务',
        '课程资源开发服务',
        '教学成果联合申请',
        '科研成果转化服务',
        '当地行业企业服务支持',
        '课题申报支撑服务',
        '实习就业支撑服务',
        '……'
      ],
      laboratoryList: [
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/laTab1.png',
          imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/laTab1_active.png',
          tit: '平台产品',
          desc: 'E-SaaS数字营销实验室'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/laTab2.png',
          imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/laTab2_active.png',
          tit: '配套资源',
          desc: '紫荆教育课程体系'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/laTab3.png',
          imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/laTab3_active.png',
          tit: '配套服务',
          desc: '产品服务+教学服务+科研服务+…'
        }
      ],
      labList1: [
        '工业级数字营销平台产品',
        '全面实现营销精细化管理',
        '完善的营销数据分析画像',
        '完善的营销数据分析画像'
      ],
      labList2: [
        'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/laTab2_bg1.png',
        'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/laTab2_bg2.png',
        'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/laTab2_bg3.png'
      ],
      servicesList1: ['就业实习辅导', '职业素养提升', '面试技巧提升', '实训实习辅助安排', '辅助推荐就业', '……'],
      servicesList2: ['产品免费升级服务', '免费产品使用培训服务', '产品定期巡检与优化服务', '产品使用分析与建议', '……'],
      servicesList3: ['配套课程资源', '课程资源免费更新服务', '行业案例免费升级服务', '课程资源开发服务', '……'],
      servicesList4: ['师资培训服务', '企业讲师教学服务', '大咖讲堂/紫荆讲堂', '教学成果联合申请', '……'],
      servicesList5: ['科研成果转化服务', '当地行业企业服务支持', '课题申报支撑服务', '行业真实营销服务支撑', '……']
    }
  },
  methods: {
    navActive(item, index) {
      this.tabActive = index
    },
    navTabActive(item, index) {
      this.tabLabActive = index
    }
  }
}
</script>

<style lang="scss" scoped>
.main_content {
  width: 100%;
  .content_banner {
    position: relative;
    .banner {
      width: 100%;
    }
    .banner_btn {
      width: 148px;
      height: 44px;
      background: #aa1941;
      border-radius: 22px;
      font-size: 22px;
      font-weight: 400;
      color: #ffffff;
      line-height: 44px;
      text-align: center;
      position: absolute;
      bottom: 37px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .content_important {
    text-align: center;
    background: #ffffff;
    padding: 120px 0;
    .important_con {
      width: 1200px;
      margin: auto;

      .con_tit {
        font-size: 30px;
        font-weight: bold;
        color: #333333;
      }
      .con_desc {
        font-size: 20px;
        font-weight: 500;
        color: #333333;
        margin-top: 28px;
        line-height: 34px;
      }
      .con_tips {
        font-size: 18px;
        font-weight: 400;
        line-height: 26px;
        color: #333333;
        margin-top: 41px;
      }
      .con_tips1 {
        margin-top: 25px;
        font-size: 16px;
        font-weight: 400;
        line-height: 32px;
        color: #666666;
      }
      .con_main {
        display: flex;
        justify-content: space-between;
        width: 892px;
        margin: 48px auto;

        .main_list {
          .list_img {
            width: 88px;
            height: 88px;
          }
          .list_tit {
            font-size: 16px;
            font-weight: 400;
            color: #333333;
            margin-top: 31px;
          }
        }
      }
    }
  }
  .content_ability {
    width: 1200px;
    margin: 90px auto;
    .ability_tit {
      font-size: 30px;
      font-weight: bold;
      color: #333333;
      text-align: center;
    }
    .ability_business {
      margin-top: 65px;
      .business_tit {
        width: 80px;
        font-size: 20px;
        font-weight: 400;
        line-height: 34px;
        color: #424242;
        border-bottom: 1px solid #aa1941;
      }
      .business_con {
        display: flex;
        justify-content: space-between;
        width: 1200px;
        flex-wrap: wrap;

        .con_list {
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          width: 373px;
          height: 140px;
          background: #ffffff;
          border-radius: 5px;
          margin-top: 30px;
          cursor: pointer;
          .list_imgActive {
            display: none;
          }
          .list_tit {
            margin-top: 24px;
            font-size: 16px;
            font-weight: 500;
            color: #424242;
          }
          &:hover {
            background: #aa1941;
            .list_imgActive {
              display: block;
            }
            .list_img {
              display: none;
            }
            .list_tit {
              color: #ffffff;
            }
          }
        }
      }
    }
    .ability_technology {
      margin-top: 76px;
      .technology_tit {
        width: 80px;
        font-size: 20px;
        font-weight: 400;
        line-height: 34px;
        color: #424242;
        border-bottom: 1px solid #aa1941;
      }
      .business_con {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        .con_list {
          width: 285px;
          height: 130px;
          background: #ffffff;
          opacity: 1;
          border-radius: 5px;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          .list_imgActive {
            display: none;
          }
          .list_tit {
            margin-top: 24px;
            font-size: 16px;
            font-weight: 500;
            color: #424242;
          }
          &:hover {
            background: #aa1941;
            .list_imgActive {
              display: block;
            }
            .list_img {
              display: none;
            }
            .list_tit {
              color: #ffffff;
            }
          }
        }
      }
    }
  }
  .content_thinking {
    background: #ffffff;
    padding: 120px 0;
    .thinking_con {
      width: 1200px;
      margin: auto;
      text-align: center;
    }
    .con_tit {
      font-size: 30px;
      font-weight: bold;
      color: #333333;
    }
    .con_desc {
      font-size: 18px;
      font-weight: 400;
      color: #666666;
      margin-top: 28px;
    }
    .con_img {
      margin-top: 60px;
    }
  }
  .content_example {
    width: 1200px;
    margin: 90px auto;
    text-align: center;

    .example_tit {
      font-size: 30px;
      font-weight: bold;
      color: #333333;
    }
    .example_major {
      .major_tit {
        width: 160px;
        font-size: 20px;
        font-weight: 400;
        line-height: 34px;
        color: #424242;
        border-bottom: 1px solid #aa1941;
      }
      .major_con {
        display: flex;
        justify-content: space-between;
        margin-top: 52px;
        padding-left: 60px;
        .con_list {
          width: 271px;
          height: 345px;
          position: relative;
          .mask {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(51, 51, 51, 0.16);
            z-index: 10;
          }
          .list_tit {
            font-size: 24px;
            font-weight: 500;
            color: #ffffff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 30;
            white-space: nowrap;
          }
        }
      }
    }
    .example_course {
      margin-top: 79px;
      .course_tit {
        width: 200px;
        font-size: 20px;
        font-weight: 400;
        line-height: 34px;
        color: #424242;
        border-bottom: 1px solid #aa1941;
      }
      .course_con {
        margin: 52px 31px 0 88px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        .con_list {
          position: relative;
          width: 257px;
          height: 327px;
          overflow: hidden;

          img {
            width: 257px;
            height: 327px;
            object-fit: cover;
            transition: all 0.3s;
          }
          p {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1;
            font-size: 22px;
            font-weight: 500;
            color: #ffffff;
            line-height: 327px;
            text-align: center;
            background: rgba(51, 51, 51, 0.16);
          }
        }
        .prev_btn {
          width: 20px;
          height: 35px;
          background: url(https://webapp-pub.ezijing.com/www/pc/practice/marketing/prev.png) no-repeat center;
          margin-right: 10px;
          cursor: pointer;
          z-index: 1000;
          position: absolute;
          left: -30px;
        }
        .next_btn {
          width: 20px;
          height: 35px;
          background: url(https://webapp-pub.ezijing.com/www/pc/practice/marketing/next.png);
          margin-left: 10px;
          z-index: 1000;
          cursor: pointer;
          position: absolute;
          right: -30px;
        }
      }
    }
  }
  .content_integrated {
    background: #ffffff;
    padding: 120px 0;
    .integrated_con {
      width: 1200px;
      margin: auto;
      text-align: center;
    }
    .con_tit {
      font-size: 30px;
      font-weight: bold;
      color: #333333;
    }
    .con_list {
      display: flex;
      padding: 0 69px 59px 45px;
      margin-top: 155px;
      .list_left {
        display: flex;
        flex-direction: column;
        padding-top: 86px;
        margin-right: 188px;
      }
      .left_tab {
        margin-top: 39px;
        width: 352px;
        height: 87px;
        cursor: pointer;

        .tab_con {
          display: flex;
          padding: 23px 0 24px 22px;
          .con_index {
            width: 40px;
            height: 40px;
            background: #e6e6e6;
            text-align: center;
            font-size: 28px;
            font-weight: 500;
            line-height: 40px;
            color: #666666;
          }
          .con_tit {
            font-size: 16px;
            font-weight: 400;
            color: #666666;
            line-height: 40px;
            margin-left: 11px;
          }
        }
      }
      .active {
        background: #ffffff;
        box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
        .tab_con {
          .con_index {
            background: #aa1941;
            color: #ffffff;
          }
          .con_tit {
            color: #333333;
          }
        }
      }
      .list_img {
        width: 426px;
        height: 606px;
        background: rgba(0, 0, 0, 0.24);
        opacity: 1;
        position: relative;

        .list_con {
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.24);
          position: absolute;
          top: 0;
          font-size: 16px;
          font-weight: 400;
          line-height: 34px;
          color: #ffffff;
          padding: 77px 0 0 48px;
          li {
            list-style-type: disc;
            text-align: left;
          }
        }
      }
    }
  }
  .content_laboratory {
    margin: 90px auto;
    text-align: center;
    .laboratory_tit {
      font-size: 30px;
      font-weight: bold;
      color: #333333;
    }
    .laboratory_img {
      margin-top: 94px;
      width: 100%;
      height: 814px;
      background: url(https://webapp-pub.ezijing.com/www/pc/practice/marketing/laboratory.png) no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .img_txt {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 28px;
        font-weight: 400;
        color: #ffffff;
      }
    }
    .laboratory_con {
      width: 1200px;
      margin: 80px auto;
      .con_tab {
        display: flex;
        justify-content: space-around;
        .tab_item {
          display: flex;
          flex-direction: column;
          align-items: center;
          .item_imgActive {
            display: none;
          }
          .item_tit {
            width: 72px;
            font-size: 18px;
            font-weight: 400;
            line-height: 34px;
            color: #333333;
            border-bottom: 1px solid #707070;
            margin-top: 15px;
          }
          .item_desc {
            font-size: 14px;
            font-weight: 400;
            line-height: 34px;
            color: #777777;
            margin-top: 14px;
          }
        }
        .active {
          .item_tit {
            border-bottom: 1px solid #aa1941;
          }
          .item_img {
            display: none;
          }
          .item_imgActive {
            display: block;
          }
        }
      }

      .con_main {
        width: 100%;
        margin-top: 82px;
        position: relative;
        .main_part {
          position: absolute;
          top: 124px;
          left: 50%;
          transform: translateX(-50%);
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          width: 630px;
          .part_list {
            width: 300px;
            height: 100px;
            background: #ffffff;
            margin-top: 30px;
            padding: 24px 0 25px 23px;
            text-align: left;
            .list_index {
              font-size: 30px;
              font-weight: normal;
              line-height: 34px;
              color: #d5d5d5;
            }
            .list_tit {
              font-size: 16px;
              font-weight: 400;
              line-height: 34px;
              color: #333333;
              margin-top: 5px;
            }
          }
        }

        .main_img1 {
          height: 500px;
        }
        .el-carousel {
          background: rgba(249, 248, 248, 0.59);
        }
      }
    }
  }
  .content_laboratory1 {
    background: #ffffff;
    padding: 120px 0;

    .laboratory1_con {
      width: 1200px;
      margin: auto;
      text-align: center;
      .con_tit {
        font-size: 30px;
        font-weight: bold;
        line-height: 34px;
        color: #333333;
      }
      .con_img {
        margin-top: 80px;
      }
    }
  }
  .content_resource {
    width: 1200px;
    margin: 90px auto;
    text-align: center;
    .resource_tit {
      font-size: 30px;
      font-weight: bold;
      line-height: 32px;
      color: #333333;
    }
    .resource_desc {
      margin-top: 36px;
      font-size: 18px;
      font-weight: 400;
      line-height: 34px;
      color: #666666;
    }
    .resource_img {
      margin-top: 62px;
    }
  }
  .content_service {
    width: 100%;
    height: 917px;
    background: url('https://webapp-pub.ezijing.com/www/pc/practice/marketing/service_bg.png') no-repeat center;
    // background-size: 100% 100%;
    margin-top: 114px;
    text-align: center;
    .service_tit {
      font-size: 30px;
      font-weight: 500;
      line-height: 34px;
      color: #ffffff;
      padding-top: 120px;
    }
    .service_con {
      width: 1200px;
      margin: 95px auto;
      display: flex;
      .con_left {
        width: 380px;
        height: 538px;
        background: #ffffff;
        padding: 121px 0 0 52px;
        text-align: left;
        .left_img {
          width: 27px;
          height: 26px;
        }
        .left_tit {
          font-size: 16px;
          font-weight: 400;
          line-height: 34px;
          color: #333333;
        }
        ul {
          padding-left: 10px;
          margin-top: 34px;
          li {
            font-size: 16px;
            font-weight: 400;
            list-style-type: disc;
            color: #aa1941;
            margin-left: 10px;

            p {
              color: #666666 !important;
              margin-top: 26px;
            }
          }
        }
      }
      .con_right {
        width: 790px;
        height: 538px;
        margin-left: 30px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        .right_list {
          width: 380px;
          height: 254px;
          background: #ffffff;
          padding: 30px 0 0 30px;
          text-align: left;
          .right_top {
            display: flex;
            align-items: center;
            .top_img {
              width: 24px;
              height: 24px;
            }
            .top_tit {
              margin-left: 10px;
              font-size: 16px;
              font-weight: 400;
              line-height: 34px;
              color: #333333;
            }
          }

          .right_desc {
            padding-left: 10px;
            li {
              font-size: 16px;
              font-weight: 400;
              list-style-type: disc;
              color: #aa1941;
              margin-left: 10px;

              p {
                color: #666666 !important;

                line-height: 34px;
              }
            }
          }
        }
        .right_list:nth-child(3),
        .right_list:nth-child(4) {
          margin-top: 30px;
        }
      }
    }
  }
  .content_bottom {
    width: 100%;
    height: 483px;
    background: url('https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/bottom_img.png') no-repeat
      center;
    margin: 70px 0;
  }
}
</style>
