<template>
  <div class="about-container">
    <div class="it-temp1">
      <img v-lazy="homeData.bannerList[4].image" />
      <!-- <div>
        <div class="title">关于我们</div>
        <div class="sub-title">为客户提供全方位、高品质的系统运营服务，帮助客户提高IT服务水平和运营效率</div>
      </div> -->
    </div>
    <div class="index-temp2">
      <div class="content">
        <div class="title">助力企业创新并深化数字转型</div>
        <div class="text">
          护航科技股份有限公司（简称：护航科技），成立于 2005 年 7
          月，是一家专注于 IT 服务的高科技企业。公司拥有丰富的全国 IT
          资源，与多家国内 IT
          厂商建立合作伙伴关系，设立了以北京、上海、武汉、广深、厦门 ,
          成都为中心，覆盖全国 700 余个主要城市的业务网络。<br />
          公司通过 ISO9001、ISO27001、ISO20000、ISO14001、ISO45001 以及 ITSS
          成熟度一级等资质认证，致力于为生物医药、金融电信、生产制造、电广传媒、交通能源、互联网、教育、政府
          / 军队等领域提供专业的 IT 服务。以“专业的 IT
          服务管理体系”为核心，并利用高效的人工智能技术和自动化运维工具不断的追求
          IT
          场景的稳定性、安全性、可靠性。帮助行业及企业用户把信息技术应用转化为业务的驱动力，充分挖掘信息技术的能量，获得竞争的优势。<br />
          2016
          年，护航科技在新三板上市并进入了创新层，由此，护航科技也进入了一个迅猛发展的时期。
        </div>
      </div>
      <img v-lazy="imgUrl.img1" alt="" />
    </div>
    <div class="index-temp3">
      <img class="bg-img" v-lazy="imgUrl.img2" />
      <!-- <div class="hu-it">
        发展历程<br />
        DEVELOPMENT PATH
      </div>
       -->
    </div>
    <div class="index-temp4">
      <img class="bg-img" v-lazy="imgUrl.img3" alt="" />
      <div class="title-sub">
        <span></span>
        护航科技企业文化
        <span></span>
      </div>
      <div class="content">
        <el-row :gutter="30">
          <el-col :span="8">
            <div class="item">
              <div class="icon">
                <img src="./images/icon1.png" />
                <span></span>
              </div>
              <div class="title">愿景</div>
              <div class="text">
                成为客户最信赖、<br />
                最具实力的 IT 运营伙伴
                <img v-lazy="imgUrl.img11" />
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item">
              <div class="icon">
                <img src="./images/icon3.png" />
                <span></span>
              </div>
              <div class="title">使命</div>
              <div class="text">
                为客户提供全方位、高品质的系统运营服务，<br />
                帮助客户提高 IT 服务水平和运营效率
                <img v-lazy="imgUrl.img11" />
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item">
              <div class="icon">
                <img src="./images/icon3.png" />
                <span></span>
              </div>
              <div class="title">服务宗旨</div>
              <div class="text">
                专注、安全、可信赖
                <img v-lazy="imgUrl.img11" />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="index-temp5">
      <div class="title-sub">
        <span></span>
        企业资质
        <span></span>
      </div>
      <div class="block" style="padding-bottom: 20px;">
        <el-carousel height="5rem" arrow="always">
          <el-carousel-item v-for="(item, index) in qualList" :key="index">
            <div class="swiper-one">
              <div
                class="swiper-item"
                v-for="(list, index2) in item.list"
                :key="index2"
              >
                <div @click="goLink('/index_2')">
                  <img :src="list.image" />
                  <div>{{ list.title }}</div>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="index-temp6">
      <div class="title-sub">
        <span></span>
        护航科技发展历程
        <span></span>
      </div>
      <div class="content" id="scroll-sb">
        <div class="step"></div>

        
        <swiper class="swiper" :options="swiperOption">
          <swiper-slide v-for="(item, index) in homeData.course" style="cursor: pointer;"
              :key="index">
              <div class="date-num">
                <span></span>
                {{ item.time }}
              </div>
              <div class="ul-li" style="padding-right: 20px">
                {{ item.content}}
              </div></swiper-slide>
          
          <!-- <div class="swiper-pagination" slot="pagination"></div> -->
          <!-- <div class="el-carousel__arrow el-carousel__arrow--left" slot="button-prev" style="line-height: 36px;"><i class="el-icon-arrow-right"></i></div>
          <div class="el-carousel__arrow el-carousel__arrow--right" slot="button-next" style="line-height: 36px;"><i class="el-icon-arrow-right"></i></div> -->
        </swiper>
        <!-- <el-scrollbar> -->
          <!-- <div class="flex-content" ref="myscroll">
            <div
              v-for="item in homeData.course"
              :key="item"
              class="scrollbar-demo-item"
            >
              <div class="date-num">
                <span></span>
                {{ item.time }}
              </div>
              <div class="ul-li">
                {{ item.content}}
              </div>
              
            </div>
          </div> -->
        <!-- </el-scrollbar> -->
      </div>
    </div>
    <div class="index-temp7">
      <div class="title-sub">
        <span></span>
        护航科技服务网络
        <span></span>
      </div>
      <div class="content">
        <!-- <el-row :gutter="200"> -->
          <el-col :span="12" v-for="(item, index) in homeData.address" :key="index">
            <div>{{item.ctiy}}</div>
            <img v-lazy="imgUrl.img11" />
            <ul>
              <li>
                地址：{{item.text}}
              </li>
              <li>电话：{{item.phone}}</li>
            </ul>
          </el-col>
          <!-- <el-col :span="12">
            <div>上海</div>
            <img v-lazy="imgUrl.img11" />
            <ul>
              <li>地址：上海市徐汇区钦州路 201 号 543号</li>
              <li>电话：021-34680659</li>
            </ul>
          </el-col> -->
        <!-- </el-row> -->
        <!-- <el-row :gutter="200">
          <el-col :span="12">
            <div>深圳</div>
            <img v-lazy="imgUrl.img11" />
            <ul>
              <li>
                地址：深圳市南山区粤海街道海珠社区海德三道 5 号海岸城东座
                1402AR20
              </li>
              <li>电话：0755-86560376</li>
            </ul>
          </el-col>
          <el-col :span="12">
            <div>成都</div>
            <img v-lazy="imgUrl.img11" />
            <ul>
              <li>
                地址：中国（四川）自由贸易试验区成都高新区交子大道 88 号 A 座 4
                层 407 室
              </li>
              <li>电话：010-99999999</li>
            </ul>
          </el-col>
        </el-row>
        <el-row :gutter="200">
          <el-col :span="12">
            <div>武汉</div>
            <img v-lazy="imgUrl.img11" />
            <ul>
              <li>
                地址：武汉东湖新技术开发区关山大道 332 号保利国际中心 7-8 层 726
              </li>
              <li>电话：027-87456007</li>
            </ul>
          </el-col>
          <el-col :span="12">
            <div>厦门</div>
            <img v-lazy="imgUrl.img11" />
            <ul>
              <li>地址：厦门市集美区杏林南路 33 号六楼 631 室</li>
              <li>电话：0592-5135893</li>
            </ul>
          </el-col>
        </el-row> -->
      </div>
    </div>
    <div class="index-temp8">
      <div class="title-sub">
        <span></span>
        企业动态
        <span></span>
      </div>
      <!-- <div class="content">
        <el-row :gutter="66">
          <el-col :span="6">
            <div class="block" @click="link(1)">
              <img v-lazy="imgUrl.img6" />
              <div class="title">企业动态</div>
              <div class="text">企业动态</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="block" @click="link(1)">
              <img v-lazy="imgUrl.img6" />
              <div class="title">企业动态</div>
              <div class="text">企业动态</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="block" @click="link(1)">
              <img v-lazy="imgUrl.img6" />
              <div class="title">企业动态</div>
              <div class="text">企业动态</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="block" @click="link(1)">
              <img v-lazy="imgUrl.img6" />
              <div class="title">企业动态</div>
              <div class="text">企业动态</div>
            </div>
          </el-col>
        </el-row>
        
      </div> -->
      <div class="content">
        <div class="step"></div>
        <div class="flex-content">
          <el-row :gutter="66">
            <el-col :span="8" v-for="(item, index) in news" :key="index">
              <div class="scrollbar-demo-item" @click="link(item.ID)">
                <div class="date-num">
                  <img :src="item.image" alt="" />
                  <span class="title">{{ item.title }}</span>
                  <span class="text">{{ item.subtitle }}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="index-temp9">
      <el-row :gutter="52" class="content-list">
        <el-col :span="8">
          <div class="block" @click="goLink('/index_2')">
            <img class="num-img" v-lazy="imgUrl.img4" />
            <div class="title">企业荣誉</div>

            <img class="step" v-lazy="imgUrl.img11" alt="" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="block" @click="goLink('/about_3')">
            <img class="num-img" v-lazy="imgUrl.img5" />
            <div class="title">社会招聘</div>

            <img class="step" v-lazy="imgUrl.img11" alt="" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="block" @click="goLink('/about_3')">
            <img class="num-img" v-lazy="imgUrl.img6" />
            <div class="title">校园招聘</div>

            <img class="step" v-lazy="imgUrl.img11" alt="" />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import api from "../../http/api";
// import bg from "./images/bg.png";
import img1 from "./images/img1.png";
import img2 from "./images/img2.png";
import img3 from "./images/img3.png";
import img4 from "./images/img4.png";
import img5 from "./images/img5.png";
import img6 from "./images/img6.png";
import img11 from "./images/img11.png";

// Import Swiper Vue.js components
  // import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  // import 'swiper/css';

 import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/idangerous.swiper.css'
export default {
  components: {
      Swiper,
      SwiperSlide
    },
  data() {
    return {
      swiperOption: {
          slidesPerView: 4,
          spaceBetween: 30,
          autoplay:3000,
          speed:300,
          // pagination: {
          //   el: '.swiper-pagination',
          //   clickable: true
          // },
          // navigation: {
          //   nextEl: '.el-carousel__arrow--left',
          //   prevEl: '.el-carousel__arrow--right'
          // }
        },
      history: [
        {
          time: "2005",
          list: [
            "护航科技在北京正式成立",
            "杰出 IT 外包服务贡献奖",
            "监理全国范围的服务网络和服务交付体系",
          ],
        },
        {
          time: "2006",
          list: ["通过双软认证", "通过远程技术支持服务，开展离岸外包业务"],
        },
        {
          time: "2007",
          list: [
            "首次通过 ISO20000/ISO27001 认证",
            "全体服务管理人员通过 ITIL 认证",
            "客户 50 余家，其中 70% 世界 500 强",
            "连续三年独家蝉联由国家商务部颁发的“杰出IT服务贡献奖”",
          ],
        },
        {
          time: "2008",
          list: [
            "建立以 ISO20000 为核心的服务管理体系",
            "奥运会 IT 运维服务商",
            "护航入围“中国服务外包企业最佳实践500强”",
            "护航再次获得“高新技术企业”资质",
          ],
        },
        {
          time: "2009",
          list: [
            "深耕 IT 运维服务管理拓展信息技术专项服务",
            "通过 ISO20000 服务管理体系附身",
            "通过 ISO27001 安全管理体系附身",
            "参与中国 IT 信息服务管理标准（ITSS）制定",
          ],
        },
        {
          time: "2010",
          list: [
            "成为微软、Oracle 金牌合作伙伴",
            "世博会 IT 运维服务商",
            "2010 最具社会责任企业",
            "ITSS 认证服务经理与认证服务工程师教材主编单位",
          ],
        },
        {
          time: "2011",
          list: [
            "首批通过国家信息部 ITSS 研制应用单位",
            "中国服务外包产业最佳创新实践奖",
          ],
        },
        {
          time: "2012",
          list: [
            "推出“网络安全离线体检工具”",
            "中国金融行业 IT 运维服务创新应用奖",
          ],
        },
        {
          time: "2013",
          list: [
            "推出“智能 IT 服务机器人”",
            "中关村最具发展潜力企业十佳",
            "中国信息产业最具社会责任奖",
          ],
        },
        {
          time: "2014",
          list: [
            "建立覆盖全国 700 余个城市的",
            "服务交付网络",
            "微软金牌能力合作伙伴",
          ],
        },
        {
          time: "2015",
          list: [
            "中国科技服务业最佳创新实践奖",
            "中国制造业 IT 系统运维优秀服务商",
            "绿色 IT 外包贡献奖",
          ],
        },
        {
          time: "2016",
          list: [
            "新三板挂牌",
            "中国 IT 系统运维优秀服务商",
            "全球最佳服务外包供应商 50 强",
            "中国最佳企业级服务供应商 100 强",
          ],
        },
        {
          time: "2017",
          list: [
            "荣获 2017 中国智慧服务金奖",
            "ITSS 符合性证书二级",
            "护航入围“中国 100 强外包成长型企业”",
          ],
        },
        {
          time: "2018",
          list: [
            "ITSS 符合性证书等级一级",
            "ITSS 全权成员单位",
            "ITSS 研制和应用单位",
            "中国互联网 + 行业最佳解决方案奖",
          ],
        },
        {
          time: "2019",
          list: [
            "ITSS 符合性证书等级一级",
            "ITSS 全权成员单位",
            "ITSS 研制和应用单位",
            "中国互联网 + 行业最佳解决方案奖",
          ],
        },
        {
          time: "2020",
          list: [
            "中国智能运维 100 强",
            "2020 运维领域极具影响力服务商",
            "中国最具影响力服务外包企业 20 强",
          ],
        },
      ],
      imgUrl: {
        // bg: bg,
        img1: img1,
        img2: img2,
        img3: img3,
        img4: img4,
        img5: img5,
        img6: img6,
        img11: img11,
      },
      news: [],
      currentPage: 1,
      qualList: [],
      homeData: JSON.parse(JSON.parse(window.localStorage.homeData))// {bannerList:[]}
    };
  },
  methods: {
    link(id) {
      console.log(id);
      this.$router.push({ path: "/info_detial", query: { info_id: id } });
    },
    getData() {
      api
        .getTable("pubinfo/getInfoList", {
          page: 1,
          pageSize: 3,
        })
        .then((res) => {
          console.log(res);
          this.news = res.data.list;
          // this.total = res.total;
        });
    },
    goLink(path) {
      this.$router.push(path);
    },
    getQual() {
      api
        .getTable("pubcompany/getCompanyList", {
          page: this.currentPage,
          pageSize: 4,
          is_use: 1,
          is_type: ''
        })
        .then((res) => {
          console.log(res);
          // this.tableData = res.data

          if (res.data.list.length > 0) {
            this.qualList.push({
              list: res.data.list,
            });
            if (res.data.list.length == 4) {
              this.currentPage++;
              this.getQual();
            }
          }

          // this.total = res.total
        });
    },
    // getHomeData() {
    //   api.getHome().then((res) => {
    //     console.log(res.data);
    //     // console.log( JSON.parse(res.data))
    //     // let data = JSON.parse(res.data)
    //     if (res.data.customer) {
    //       this.homeData = res.data;
    //     }else{
    //       this.homeData.course = []
    //     }
    //   });
    // },
  },
  created() {
    this.getData();
    this.getQual();
    // this.getHomeData()
  },
  mounted(){
    return
    setTimeout(()=>{
    let sb2 = document.getElementById("scroll-sb")
    let sb = this.$refs.myscroll
    let list = document.getElementsByClassName("scrollbar-demo-item")

    // let sbw = sb.style.width()
    console.log(sb2.offsetWidth, list.length * list[0].offsetWidth)
    let i = -50
    setInterval(()=>{
      i++
      sb.style.left = -i + 'px'
      if(i == (list.length * list[0].offsetWidth) - (sb2.offsetWidth * 2 - 130)){
        i = -50
      }
    }, 15)
    }, 1000)
    
  }
};
</script>
<style lang="scss" scoped>
@import "./about.scss";
</style>