595 lines
19 KiB
Vue
595 lines
19 KiB
Vue
<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> |