huhang

2025-06-16 18:58:25 +08:00 · 2025-06-16 18:58:25 +08:00 · 65261663f9
commit 65261663f9
parent 4a1dfeccda
427 changed files with 35355 additions and 0 deletions
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,7 @@
+NODE_ENV = development
+
+//VUE_APP_BASEURL = 'http://huhang-admin.mujiwork.cn'
+
+VUE_APP_BASEURL = '/api'
+
+VUE_APP_CDN = './'
--- a/.env.muji
+++ b/.env.muji
@ -0,0 +1,7 @@
+NODE_ENV = muji
+
+//VUE_APP_BASEURL = 'http://huhang-admin.mujiwork.cn'
+
+VUE_APP_BASEURL = 'https://hadmin.mujiwork.cn/'
+
+VUE_APP_CDN = 'http://cdn.mujiwork.com/huhang/pc/'
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,7 @@
+NODE_ENV = production
+
+//VUE_APP_BASEURL = 'http://huhang-admin.mujiwork.cn'
+
+VUE_APP_BASEURL = ''
+
+VUE_APP_CDN = 'https://img.novots.com/huhang/pc/'
--- a/.env.test
+++ b/.env.test
@ -0,0 +1,7 @@
+NODE_ENV = test
+
+//VUE_APP_BASEURL = 'http://huhang-admin.mujiwork.cn'
+
+VUE_APP_BASEURL = 'https://hadmin.mujiwork.cn/'
+
+VUE_APP_CDN = 'http://cdn.mujiwork.com/huhang/pc/'
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,14 @@
+// @see https://eslint.bootcss.com/docs/rules/
+
+module.exports = {
+  rules: {
+    "vue/multi-word-component-names": "off" 
+  },
+  parserOptions: {
+    parser: "babel-eslint",
+    ecmaVersion: 2017,  
+    sourceType: "module",
+    allowImportExportEverywhere: true,
+    codeFrame: false,  // 关闭解析错误提示
+  }
+};
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,60 @@
+{
+  "name": "website",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "devBuild": "vue-cli-service build --mode development",
+    "testBuild": "vue-cli-service build --mode test",
+    "prodBuild": "vue-cli-service build --mode production",
+    "mjBuild": "vue-cli-service build --mode muji"
+  },
+  "dependencies": {
+    "axios": "^1.6.2",
+    "babel-polyfill": "^6.26.0",
+    "classlist-polyfill": "^1.2.0",
+    "core-js": "^3.8.3",
+    "element-ui": "^2.15.14",
+    "moment": "^2.29.4",
+    "vue": "^2.6.14",
+    "vue-amap": "^0.5.10",
+    "vue-awesome-swiper": "^4.0.1",
+    "vue-lazyload": "^1.3.3",
+    "vue-meta-info": "^0.1.7",
+    "vue-router": "^3.0.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "vue-template-compiler": "^2.6.14",
+    "swiper": "^2.7.6"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>护航科技股份有限公司】—IT外包|IT服务|IT运维|helpdesk|IT基础架构服务|IT巡检|IT维护</title>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name=renderer  content=webkit>
+  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
+  <meta data-vue-meta-info="true" name="keywords" content="桌面运维、运维外包、桌面外包、网络安全、服务外包、网络运维、网络维护、设备维护">
+  <meta data-vue-meta-info="true" name="description" content="护航科技股份有限公司，专注于全方位的IT服务，包括IT外包，IT运维，helpdesk，基础架构，系统集成、自有产品研发和行业应用解决方案等，已成为客户最信赖、最具实力的IT合作伙伴。">
+
+
+  <!-- <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> -->
+  <script>
+    // 异步统计
+    !function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"JcsxVtY54HXCV46t",ck:"60480",hashMode: true});
+  </script>
+  <!-- <script>
+     // 异步监控
+    !(function(c,i,e,b){
+    var h=i.createElement("script");
+    var f=i.getElementsByTagName("script")[0];
+    h.type="text/javascript";
+    h.crossorigin=true;
+    h.onload=function(){new c[b]["Monitor"]().init({id:"JbE5xTdZzGZkNCMX"});};
+    f.parentNode.insertBefore(h,f);h.src=e;})(window,document,"https://sdk.51.la/perf/js-sdk-perf.min.js","LingQue");
+  </script> -->
+
+  <!-- 同步监控 -->
+  <script src="https://sdk.51.la/perf/js-sdk-perf.min.js" crossorigin="anonymous"></script>
+  <script>
+    new LingQue.Monitor().init({id:"JcsxVtY54HXCV46t",sendSuspicious:true,sendSpaPv:true});
+  </script>
+</head>
+
+<body>
+  <div id="app"></div>
+</body>
+
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,27 @@
+<template>
+<div>
+  <router-view></router-view>
+
+  
+</div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: true
+    }
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  height: 100%;
+  overflow-x: hidden;
+}
+</style>
--- a/src/assets/css/iconfont.css
+++ b/src/assets/css/iconfont.css
@ -0,0 +1,60 @@
+@font-face {
+    font-family: "iconfont"; /* Project id 2914224 */
+    src: url('//at.alicdn.com/t/font_2914224_y82ol8e100h.woff2?t=1637303909890') format('woff2'),
+         url('//at.alicdn.com/t/font_2914224_y82ol8e100h.woff?t=1637303909890') format('woff'),
+         url('//at.alicdn.com/t/font_2914224_y82ol8e100h.ttf?t=1637303909890') format('truetype'),
+         url('//at.alicdn.com/t/font_2914224_y82ol8e100h.svg?t=1637303909890#iconfont') format('svg');
+  }
+  
+  .iconfont {
+    font-family: "iconfont" !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  
+  .icon-hezuoshengtai:before {
+    content: "\e6c3";
+  }
+  
+  .icon-jichujiagoupingtai:before {
+    content: "\e6c4";
+  }
+  
+  .icon-fuwuguanlitixijianshe:before {
+    content: "\e6c5";
+  }
+  
+  .icon-xiangxia:before {
+    content: "\e6c6";
+  }
+  
+  .icon-kehuwendangzhongxin:before {
+    content: "\e6c7";
+  }
+  
+  .icon-kehuanli:before {
+    content: "\e6c8";
+  }
+  
+  .icon-jichengyushishifuwu:before {
+    content: "\e6c9";
+  }
+  
+  .icon-ITSS:before {
+    content: "\e6ca";
+  }
+  
+  .icon-xinxianquantixijianshe:before {
+    content: "\e6cb";
+  }
+  
+  .icon-yunfuwu:before {
+    content: "\e6cc";
+  }
+  
+  .icon-ITSSpeixunfuwu:before {
+    content: "\e6cd";
+  }
+  
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@ -0,0 +1,200 @@
+* {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+   /* font-size: 14px; */
+   font-family: Avenir, Helvetica, Arial, sans-serif;
+}
+
+html {
+   height: 100%;
+}
+
+body {
+   height: 100%;
+   min-width: 1080px;
+}
+
+div,
+ul,
+li {
+   box-sizing: border-box;
+}
+
+li {
+   list-style: none;
+}
+
+.main-container {
+   font-size: 0.18rem;
+}
+
+/* .el-menu-item:hover{
+  background-color: #fff!important;
+}
+.el-menu-item:focus{
+  background-color: #fff!important;
+}
+.el-carousel__indicators .is-active .el-carousel__button{
+  background-color: #409eff;
+}
+.el-carousel__indicators .el-carousel__button{
+  background-color: rgba(0, 0, 0, 0.6);
+} */
+
+.el-button {
+   /* position: relative; */
+}
+
+.el-breadcrumb {
+   line-height: 16px !important;
+}
+
+.el-breadcrumb__separator.el-icon {
+   top: -1px;
+}
+
+.admin-container {
+   padding: 20px;
+   background-color: #fff;
+   font-size: 16px;
+}
+
+.el-table th.el-table__cell.is-leaf {
+   background-color: #fafafa;
+}
+
+.table-container .operation .edit {
+   color: #409eff;
+   margin-right: 10px;
+   cursor: pointer;
+}
+
+.table-container .operation .delete {
+   color: #f56c6c;
+   cursor: pointer;
+}
+
+.table-container .pagination {
+   margin-top: 20px;
+   text-align: right;
+   /* overflow: hidden; */
+}
+
+.table-container .pagination .size-box {
+   /* float: right; */
+}
+
+.table-container .pagination .span {
+   font-size: 13px;
+   color: #606266;
+   line-height: 32px;
+}
+
+/* .el-icon svg{
+  font-size: 14px;
+}
+.el-image__error{
+  font-size: 12px!important;
+} */
+
+.amap-icon img {
+   width: 20px;
+}
+
+/* .el-input__inner{
+  height: 28px!important;
+} */
+
+/* .input .el-input__inner {
+   height: 0.6rem;
+}
+
+.select .el-input__inner {
+   height: 0.6rem;
+}
+
+.select .el-input__icon {
+   line-height: 0.6rem !important;
+}
+
+.el-select-dropdown__list .myOption {
+   line-height: 0.6rem !important;
+   height: 0.6rem !important;
+} */
+
+/*
+.select .el-select-dropdown__item{
+  line-height: .6rem!important;
+} */
+.el-overlay {
+   z-index: 999 !important;
+}
+
+.up-img .image-slot-my {
+   width: 100%;
+   height: 100%;
+   line-height: 83px;
+   text-align: center;
+   color: #c0c4cc;
+   background-color: #f5f7fa;
+}
+
+.up-img .el-image {
+   vertical-align: bottom;
+}
+
+.up-img2 .image-slot-my {
+   line-height: 54px;
+}
+
+.slot-my {
+   width: 100%;
+   height: 100%;
+   line-height: 80px;
+   text-align: center;
+   color: #c0c4cc;
+   background-color: #f5f7fa;
+   margin-bottom: 20px;
+}
+
+.tox .tox-dialog-wrap__backdrop {
+   z-index: 99999999999999999;
+}
+
+.tox-tinymce-aux {
+   z-index: 99999999999999 !important;
+}
+
+.htmlEdit img {
+   margin-top: 10px;
+   margin-bottom: 10px;
+}
+.num{
+   font-family: Impact;
+   
+}
+.date-num{
+   font-family: Impact;
+   font-weight: normal;
+}
+.number{
+   font-family: Impact;
+   font-weight: normal;
+}
+.swiper-slide{
+   height: auto!important;
+}
+.swiper-wrapper{
+   height: auto!important;
+   transition: all 0.3s!important;
+}
+.more-gg{
+   text-align: right;
+   color: #606266;
+   /* padding:0 1.2rem; */
+}
+.more-gg span{
+   cursor: pointer;
+   font-size: .36rem;
+}
--- a/src/assets/image/header/nav1.png
+++ b/src/assets/image/header/nav1.png
--- a/src/assets/image/header/nav2.png
+++ b/src/assets/image/header/nav2.png
--- a/src/assets/image/header/nav3.png
+++ b/src/assets/image/header/nav3.png
--- a/src/assets/image/header/nav4.png
+++ b/src/assets/image/header/nav4.png
--- a/src/assets/image/header/nav5.png
+++ b/src/assets/image/header/nav5.png
--- a/src/assets/image/hu_rq.png
+++ b/src/assets/image/hu_rq.png
--- a/src/assets/image/icon_r.png
+++ b/src/assets/image/icon_r.png
--- a/src/assets/image/index/bg_01.png
+++ b/src/assets/image/index/bg_01.png
--- a/src/assets/image/index/bg_02.png
+++ b/src/assets/image/index/bg_02.png
--- a/src/assets/image/index/bg_03.png
+++ b/src/assets/image/index/bg_03.png
--- a/src/assets/image/index/bg_04.png
+++ b/src/assets/image/index/bg_04.png
--- a/src/assets/image/index/bg_05.png
+++ b/src/assets/image/index/bg_05.png
--- a/src/assets/image/index/bg_06.png
+++ b/src/assets/image/index/bg_06.png
--- a/src/assets/image/index/bg_07.png
+++ b/src/assets/image/index/bg_07.png
--- a/src/assets/image/index/bg_08.png
+++ b/src/assets/image/index/bg_08.png
--- a/src/assets/image/index/bg_09.png
+++ b/src/assets/image/index/bg_09.png
--- a/src/assets/image/index/bg_10.png
+++ b/src/assets/image/index/bg_10.png
--- a/src/assets/image/index/icon_01.png
+++ b/src/assets/image/index/icon_01.png
--- a/src/assets/image/index/icon_02.png
+++ b/src/assets/image/index/icon_02.png
--- a/src/assets/image/index/icon_03.png
+++ b/src/assets/image/index/icon_03.png
--- a/src/assets/image/index/icon_04.png
+++ b/src/assets/image/index/icon_04.png
--- a/src/assets/image/index/icon_05.png
+++ b/src/assets/image/index/icon_05.png
--- a/src/assets/image/index/icon_06.png
+++ b/src/assets/image/index/icon_06.png
--- a/src/assets/image/index/icon_07.png
+++ b/src/assets/image/index/icon_07.png
--- a/src/assets/image/index/icon_08.png
+++ b/src/assets/image/index/icon_08.png
--- a/src/assets/image/index/icon_09.png
+++ b/src/assets/image/index/icon_09.png
--- a/src/assets/image/index/icon_10.png
+++ b/src/assets/image/index/icon_10.png
--- a/src/assets/image/index/icon_11.png
+++ b/src/assets/image/index/icon_11.png
--- a/src/assets/image/index/icon_12.png
+++ b/src/assets/image/index/icon_12.png
--- a/src/assets/image/index/icon_dron.png
+++ b/src/assets/image/index/icon_dron.png
--- a/src/assets/image/logo.png
+++ b/src/assets/image/logo.png
--- a/src/assets/image/more.png
+++ b/src/assets/image/more.png
--- a/src/assets/image/more_tr.png
+++ b/src/assets/image/more_tr.png
--- a/src/assets/image/phone.png
+++ b/src/assets/image/phone.png
--- a/src/assets/image/rq.png
+++ b/src/assets/image/rq.png
--- a/src/assets/js/eventBus.js
+++ b/src/assets/js/eventBus.js
@ -0,0 +1,3 @@
+import mitt from 'mitt'
+const emitter = mitt()
+export default emitter
--- a/src/assets/js/fitter.js
+++ b/src/assets/js/fitter.js
@ -0,0 +1,22 @@
+// 获取屏幕宽度
+var winWidth = document.documentElement.offsetWidth || document.body.offsetWidth
+// 获取html跟元素
+var oHtml = document.getElementsByTagName('html')[0]
+// 根据屏幕宽度判断PC或移动端，大于640为PC，反之为移动端
+if(winWidth > 640) {
+	// 计算公式当前屏幕宽度winWidth除以设计稿宽度1920得到屏幕与设计稿的比例，根据比例设置根元素的fontSize，设计稿的100px等于1rem
+	oHtml.style.fontSize = 100 * winWidth / 1680 + 'px'
+} else {
+	oHtml.style.fontSize = 100 * winWidth / 375 + 'px'
+}
+
+// 页面大小发生变化事重新设置
+window.addEventListener('resize', function() {
+	var winWidth = document.documentElement.offsetWidth || document.body.offsetWidth
+	var oHtml = document.getElementsByTagName('html')[0]
+	if(winWidth > 640) {
+		oHtml.style.fontSize = 100 * winWidth / 1680 + 'px'
+	} else {
+		oHtml.style.fontSize = 100 * winWidth / 375 + 'px'
+	}
+})
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@ -0,0 +1,167 @@
+<template>
+  <div class="footer-container">
+    <div class="footer-box">
+      <div class="hu-rq">
+        <img src="../assets/image/hu_rq.png" />
+        <div>搜索“护航科技”或扫码<br />关注护航科技，了解更多信息</div>
+      </div>
+      <div class="footer-nav">
+        <span>公司介绍</span>
+        <ul>
+          <li @click="goLink('/about')">公司概况</li>
+          <li @click="goLink('/about')">发展历程</li>
+          <!-- <li @click="goLink('/about')">定制化服务</li> -->
+          <li @click="goLink('/index_2')">荣誉资质</li>
+        </ul>
+      </div>
+      <div class="footer-nav">
+        <span>公司动态</span>
+        <ul>
+          <li @click="goLink('/about_2')">新闻</li>
+          <li @click="goLink('/apply')">案例</li>
+          <!-- <li>活动</li> -->
+          <!-- <li>专题</li> -->
+        </ul>
+      </div>
+      <div class="footer-nav">
+        <span>加入我们</span>
+        <ul>
+          <li @click="goLink('/about_3')">社会招聘</li>
+          <li @click="goLink('/about_3')">校园招聘</li>
+          <li @click="goLink('/it3')">ITSS培训</li>
+          <!-- <li >IT社区</li> -->
+        </ul>
+      </div>
+      <div class="footer-call">
+        <ul>
+          <li>售前咨询热线 &nbsp;&nbsp;&nbsp; 400-612-6010</li>
+          <li>售后投诉热线 &nbsp;&nbsp;&nbsp; 400-612-6010</li>
+          <li>ITSS课程咨询 &nbsp;&nbsp;&nbsp; 400-612-6010</li>
+          <li>邮箱 &nbsp;&nbsp;&nbsp; marketing@novots.com</li>
+        </ul>
+      </div>
+    </div>
+    <div class="footer_mian">
+      <span class="fl"
+        ><a href="https://beian.miit.gov.cn/" target="blank"
+          >京 ICP备13007157号 </a
+        >京 公网安备110108400789号</span
+      >
+      <br />
+      <span class="fl">
+        版权所有 护航科技
+        <font>Copyright © Novots Technologies Limited All Right Reserved</font>
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+// import emitter from "../assets/js/eventBus";
+export default {
+  components: {
+    // Fold,
+    // Expand,
+  },
+  data() {
+    return {
+      actIndex: "",
+    };
+  },
+  created() {
+    this.actIndex = this.$router.path;
+  },
+  methods: {
+    goLink(path) {
+      this.$router.push(path);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.footer-container {
+  overflow: hidden;
+  padding: 0.67rem 0;
+  background-color: #25283b;
+  text-align: center;
+  .footer_mian {
+    border-top: 1px solid rgba($color: #fff, $alpha: 0.6);
+    padding-top: 40px;
+    color: #fff;
+    margin-top: 40px;
+    line-height: 24px;
+    font-size: 14px;
+    span {
+      color: #fff;
+      a {
+        color: #fff;
+      }
+    }
+  }
+}
+.footer-box {
+  display: inline-block;
+  width: auto;
+  overflow: hidden;
+  & > div {
+    float: left;
+    margin-right: 0.97rem;
+  }
+  .hu-rq {
+    img {
+      width: 1.4rem;
+    }
+    div {
+      font-size: 0.14rem;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 0.22rem;
+      margin-top: 0.18rem;
+    }
+  }
+  .footer-nav {
+    text-align: left;
+    span {
+      font-size: 0.18rem;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 0.32rem;
+    }
+    ul {
+      padding-top: 0.08rem;
+    }
+    li {
+      font-size: 0.18rem;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 0.34rem;
+      opacity: 0.7;
+      cursor: pointer;
+      // margin-bottom: .18rem;
+    }
+  }
+  .footer-call {
+    margin-right: 0;
+    //   position: relative;
+    display: flex;
+    align-items: center;
+    //   height: 1.6rem;
+    ul {
+      //   position: absolute;
+      //   top: 50%;
+      //   transform: translateY(-50%);
+    }
+    li {
+      font-size: 0.18rem;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 0.32rem;
+      opacity: 0.7;
+      margin-bottom: 0.18rem;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+</style>
--- a/src/components/Form.vue
+++ b/src/components/Form.vue
@ -0,0 +1,207 @@
+<template>
+  <div class="index-temp8">
+    <div class="hu-it">
+      项目咨询<br />
+      PROJECT CONSULTING
+    </div>
+    <div class="block">
+      <el-row :gutter="85">
+        <el-col :span="24">
+          <div class="form-item">
+            <span><i>*</i>描述您的需求</span>
+            <input v-model="form.need" />
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="85">
+        <el-col :span="12">
+          <div class="form-item">
+            <span><i>*</i>姓名</span>
+            <input v-model="form.name" />
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="form-item">
+            <span><i>*</i>邮箱</span>
+            <input v-model="form.email" />
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="85">
+        <el-col :span="12">
+          <div class="form-item">
+            <span><i>*</i>联系电话</span>
+            <input v-model="form.phone" />
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="form-item">
+            <span><i>*</i>省份</span>
+            <input v-model="form.city" />
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="85">
+        <el-col :span="12">
+          <div class="form-item">
+            <span><i>*</i>公司名称</span>
+            <input v-model="form.company" />
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="form-item">
+            <span><i>*</i>职务</span>
+            <input v-model="form.postion" />
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="85" style="margin-top:.3rem">
+        <el-col :span="12">
+          <el-checkbox
+            v-model="checked1"
+            label="我已阅读护航科技公司《用户协议》和《隐私政策》"
+          ></el-checkbox>
+        </el-col>
+        <el-col :span="12">
+          <el-checkbox
+            v-model="checked2"
+            label="愿意通过电子邮件接收来自护航科技的咨询和信息"
+          ></el-checkbox>
+        </el-col>
+      </el-row>
+      <div style="text-align: center; margin-top: 0.4rem">
+        <el-button type="primary" size="small" @click="save"
+          >联系我们</el-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import api from "../http/api";
+export default {
+  data() {
+    return {
+      checked1: true,
+      checked2: true,
+      form: {
+        need: "",
+        name: "",
+        email: "",
+        phone: "",
+        city: "",
+        company: "",
+        postion: "",
+        form: 1
+      },
+    };
+  },
+  mounted(){
+  },
+  methods: {
+    save() {
+      if (this.form.need == "") {
+        this.$message({
+          type: "warning",
+          message: `请输入描述`,
+        });
+        return;
+      }
+      if (this.form.name == "") {
+        this.$message({
+          type: "warning",
+          message: `请输入姓名`,
+        });
+        return;
+      }
+      if (this.form.email == "") {
+        this.$message({
+          type: "warning",
+          message: `请输入邮箱`,
+        });
+        return;
+      }
+      if (this.form.phone == "") {
+        this.$message({
+          type: "warning",
+          message: `请输入电话`,
+        });
+        return;
+      }
+      if (this.form.city == "") {
+        this.$message({
+          type: "warning",
+          message: `请输入省份`,
+        });
+        return;
+      }
+      if (this.form.company == "") {
+        this.$message({
+          type: "warning",
+          message: `请输入公司名称`,
+        });
+        return;
+      }
+      if (this.form.postion == "") {
+        this.$message({
+          type: "warning",
+          message: `请输入职位`,
+        });
+        return;
+      }
+      api.postDate(this.form).then(() => {
+        this.$message({
+          type: "success",
+          message: `提交成功`,
+        });
+        this.$emit('saveform', '')
+      });
+    },
+    
+  },
+};
+</script>
+<style lang="scss" scoped>
+.index-temp8 {
+  padding: 0.5rem 1.2rem 0.65rem 1.2rem;
+  .hu-it {
+    font-size: 0.42rem;
+    font-weight: 500;
+    color: #001d2d;
+    line-height: 0.62rem;
+    position: relative;
+  }
+  .block {
+    .form-item {
+      border-bottom: 1px solid #dadada;
+      height: 0.88rem;
+      position: relative;
+      span {
+        // font-size: .18rem;
+        font-weight: bold;
+        color: #042030;
+        position: absolute;
+        line-height: 0.88rem;
+        left: 0;
+        top: 0;
+        display: inline-block;
+
+        i {
+          position: relative;
+          color: #e02020;
+          margin-right: 0.04rem;
+        }
+      }
+      input {
+        width: 100%;
+        height: 100%;
+        border: 0;
+        background-color: rgba(0, 0, 0, 0);
+        text-indent: 1.25rem;
+        outline: none;
+        // font-size: .18rem;
+      }
+    }
+  }
+}
+</style>
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@ -0,0 +1,424 @@
+<template>
+  <div class="header-container">
+    <div class="header-logo">
+      <img src="../assets/image/logo.png" @click="uploadData" />
+    </div>
+    <div class="header-nav">
+      <ul>
+        <li
+          class="nav-item"
+          v-for="(item, index) in nav"
+          :class="{ active: item.path == actPath }"
+          :key="index"
+          @click="changeNav(item.path, index)"
+        >
+          <span>{{ item.text }}</span>
+          <div class="sub-nav vip-nav" @click.stop="" v-if="item.img">
+            <img :src="item.img" />
+            <div class="sub-box" :class="'width' + index">
+              <ul>
+                <li
+                  v-for="(item2, index2) in item.list"
+                  :key="index2"
+                  @click="changeNav(item2.path)"
+                >
+                  {{ item2.text }}
+                </li>
+              </ul>
+            </div>
+            <div class="more" @click="changeNav(item.path, index)">查看更多</div>
+          </div>
+        </li>
+        <!-- <li class="nav-item">
+          <span>应用案例</span>
+        </li> -->
+      </ul>
+    </div>
+    <!-- <div class="login-entrance" @click="login">登录</div> -->
+  </div>
+</template>
+<script>
+import img1 from "../assets/image/header/nav1.png";
+import img2 from "../assets/image/header/nav2.png";
+import img3 from "../assets/image/header/nav3.png";
+import img4 from "../assets/image/header/nav4.png";
+import img5 from "../assets/image/header/nav5.png";
+import api from "../http/api";
+export default {
+  components: {},
+
+  data() {
+    return {
+      nav: [
+        { path: "/index", text: "首页", img: "", list: [], show:null },
+        {
+          path: "/itService",
+          text: "IT服务",
+          img: img1,
+          show:false,
+          list: [
+            {
+              path: "/it1",
+              text: "IT 基础架构服务",
+            },
+            {
+              path: "/it2",
+              text: "云服务",
+            },
+            {
+              path: "/it3",
+              text: "ITSS 培训服务",
+            },
+            {
+              path: "/it4",
+              text: "IT 系统集成与实施服务",
+            },
+            {
+              path: "/it5",
+              text: "信息安全体系建设服务",
+            },
+            {
+              path: "/it6",
+              text: "ITSM 体系建设服务",
+            },
+          ],
+        },
+        {
+          path: "/product",
+          text: "护航产品",
+          img: img4,
+          show:false,
+          list: [
+            {
+              path: "/pro1",
+              text: "ITSM 管理工具",
+            },
+            {
+              path: "/pro2",
+              text: "OA 协同办公工具",
+            },
+            // {
+            //   path: "/pro3",
+            //   text: "数字化应用底座",
+            // },
+            {
+              path: "/pro4",
+              text: "睿安网络安全策略管理平台",
+            },
+            {
+              path: "/anonymousLetter",
+              text: "飞书平台定制化开发",
+            },
+            // {
+            //   path: "/pro5",
+            //   text: "软件成分分析及同源漏洞检测工具",
+            // },
+            // {
+            //   path: "/guard",
+            //   text: "护航科技代码安全卫士",
+            // },
+          ],
+        },
+        {
+          path: "/solution",
+          text: "解决方案",
+          img: img3,
+          show:false,
+          list: [
+            {
+              path: "/solu1",
+              text: "终端运维管理解决方案",
+            },
+            {
+              path: "/solu2",
+              text: "IT 服务管理解决方案",
+            },
+            {
+              path: "/solu3",
+              text: "护航呼叫中心解决方案",
+            },
+            {
+              path: "/solu4",
+              text: "数据中心运维咨询及服务解决方案",
+            },
+          ],
+        },
+        {
+          path: "/apply",
+          text: "应用案例",
+          img: img5,
+          show:false,
+          list: [{
+              path: "/app4",
+              text: "某大型综合类央企",
+            },
+            {
+              path: "/app1",
+              text: "某知名运动品牌",
+            },
+            {
+              path: "/app2",
+              text: "某大型互联网教育集团",
+            },
+            {
+              path: "/app3",
+              text: "全球500强大型制造型企业",
+            },],
+        },
+        {
+          path: "/about",
+          text: "关于护航",
+          img: img2,
+          show:false,
+          list: [
+            {
+              path: "/about",
+              text: "公司介绍",
+            },
+            {
+              path: "/about_2",
+              text: "公司动态",
+            },
+            {
+              path: "/about_3",
+              text: "加入我们",
+            },
+            {
+              path: "/about_4",
+              text: "联系我们",
+            },
+          ],
+        },
+      ],
+      actPath: "",
+      homeData: JSON.parse(JSON.parse(window.localStorage.homeData)),
+      clickNum: 0,
+      timer:null,
+    };
+  },
+  watch: {
+    getPath(a, b) {
+      this.actPath = a;
+    },
+  },
+  computed: {
+    getPath() {
+      return this.$route.meta.proPath;
+    },
+  },
+  methods: {
+    changeNav(path, index) {
+      this.$router.push(path);
+      
+      let list = document.getElementsByClassName('vip-nav')
+      console.log(list[index-1],index)
+      list[index-1].classList.add("hiddenss");
+      setTimeout(()=>{
+        list[index-1].classList.remove("hiddenss");
+      },1000)
+      
+    
+    },
+
+    login() {
+      this.$router.push("/admin");
+    },
+    getHomeData() {
+      // api.getHome().then((res) => {
+      //   if (res.data.navList) {
+        console.log(this.homeData)
+      this.homeData.navList.forEach((val, index) => {
+        this.nav[index].path = val.url;
+        this.nav[index].text = val.text;
+      });
+      //   }
+      // })
+    },
+    uploadData() {
+      // return
+      if (this.clickNum < 9) {
+        this.clickNum++;
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+          this.clickNum = 0;
+          clearTimeout(this.timer);
+        }, 1000);
+      } else {
+        this.clickNum = 0;
+        clearTimeout(this.timer);
+        // console.log("fuck");
+        api.homeUp({ body: JSON.stringify({navList: []})}).then(() => {
+           
+        })
+      }
+    },
+  },
+  created() {
+    this.actPath = this.$route.meta.proPath;
+    // this.getHomeData()
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.header-container {
+  // overflow: hidden;
+  padding: 0.26rem 1.2rem;
+  // position: relative;
+  // z-index: 1;
+  // display: flex;
+  overflow: hidden;
+}
+.header-logo {
+  height: 0.42rem;
+  font-size: 0.18rem;
+  line-height: 0.42rem;
+  text-align: center;
+  position: relative;
+  z-index: 100;
+  float: left;
+  img {
+    height: 0.42rem;
+  }
+}
+.header-nav {
+  float: right;
+  margin-left: 0.5rem;
+  // margin-right: 1rem;
+  margin-right: -.2rem;
+}
+
+.header-nav .nav-item {
+  height: 0.42rem;
+
+  float: left;
+  color: #737373;
+  font-weight: 400;
+  font-size: 0.18rem;
+  padding-right: 0.2rem;
+  padding-left: 0.2rem;
+  cursor: pointer;
+  // position: random($limit: 1);
+}
+.nav-item span {
+  position: relative;
+  z-index: 100;
+  font-size: 0.2rem;
+  line-height: 0.44rem;
+}
+.header-nav .active {
+  font-weight: bold;
+  color: #001d2d;
+}
+.nav-item:hover .sub-nav {
+  display: flex;
+}
+.hiddenss{
+  display: none !important;
+}
+// .el-menu--horizontal{
+//   border: 0;
+// }
+// .el-menu--horizontal>.el-menu-item.is-active{
+//   border: 0;
+// }
+// .el-menu--horizontal>.el-menu-item{
+//   height: 0.42rem;
+// }
+.login-entrance {
+  position: absolute;
+  top: 50%;
+  right: 1.2rem;
+  transform: translateY(-50%);
+  width: 0.8rem;
+  height: 0.4rem;
+  border-radius: 0.21rem;
+  border: 1px solid #008cd5;
+  line-height: 0.4rem;
+  text-align: center;
+  color: #008cd5;
+  cursor: pointer;
+  z-index: 100;
+}
+.sub-nav {
+  position: absolute;
+  width: 100vw;
+  left: 0;
+  top: 0;
+  z-index: 10;
+  padding-top: 1.2rem;
+  padding-right: 1.2rem;
+  padding-left: 1.2rem;
+  padding-bottom: 0.28rem;
+  display: flex;
+  background: #fff;
+  display: none;
+}
+.sub-nav img {
+  width: 2.54rem;
+  height: 1.2rem;
+  display: block;
+  flex: none;
+}
+.sub-box {
+  flex: auto;
+  padding: 0.2rem;
+  padding-left: 0.3rem;
+  // padding-right: 1.2rem;
+}
+.sub-box ul li {
+  // overflow: hidden;
+  float: left;
+  list-style: disc;
+  margin-left: 0.4rem;
+  font-size: 0.18rem;
+  font-weight: 400;
+  color: #727070;
+  line-height: 0.24rem;
+  cursor: pointer;
+  margin-bottom: 0.3rem;
+}
+.sub-box ul li:hover {
+  color: #001d2d;
+}
+.width1 {
+  padding-right: 2rem;
+}
+.width1 li {
+  width: 2rem;
+}
+.width2 {
+  padding-right: 5rem;
+}
+
+.width2 li {
+  width: 2.2rem;
+}
+.width3 {
+  padding-right: 2rem;
+}
+.width3 li {
+  width: 2.8rem;
+}
+.width4 {
+  padding-right: 2rem;
+}
+.width4 li {
+  width: 2.8rem;
+}
+.width5 {
+  padding-right: 7rem;
+}
+.width5 li {
+  width: 1.2rem;
+}
+.more {
+  position: absolute;
+  right: 1.25rem;
+  top: 1.2rem;
+  font-size: 0.18rem;
+  font-weight: 400;
+  color: #737373;
+  cursor: pointer;
+}
+</style>
--- a/src/components/MainFrom.vue
+++ b/src/components/MainFrom.vue
@ -0,0 +1,175 @@
+<template>
+  <div class="main-container" id="main-box">
+    <div class="header">
+      <Header />
+    </div>
+    <div class="content">
+      <router-view></router-view>
+    </div>
+    <div>
+      <Footer />
+    </div>
+    <div class="rq">
+      <img class="phone" src="../assets/image/phone.png" alt="" />
+      <div class="customer-flow">
+        <div class="flow-box">
+          <img src="../assets/image/rq.png" alt="" data-v-5d6a4e01="" />
+          <h3 data-v-5d6a4e01="">微信扫码查看手机端</h3>
+          <!-- <p data-v-5d6a4e01="">
+            咨询电话
+            <span data-v-5d6a4e01="">400-665-7772</span>
+          </p> -->
+        </div>
+      </div>
+    </div>
+    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" :show-close="true" width="500" center :lock-scroll="false">
+    <div class="dialog-content">
+      <h2 style="text-align: center;margin-bottom: 0.2rem;">护航科技股份有限公司严正声明</h2>
+      <p>近期，发现不法分子冒用我司名义，通过伪造公章、营业执照，搭建虚假网站、APP，在微信群、QQ群等社交平台实施诈骗，诱骗公众转账。此类行为已涉嫌违反《中华人民共和国刑法》第二百六十六条诈骗罪、第二百八十条伪造、变造、买卖国家机关公文、证件、印章罪之规定，不仅严重侵害我司企业名称权、商标权等合法权益，更对社会公众财产安全造成重大威胁。</p>
+      <p>我司严正声明如下：</p>
+      <p>1、护航科技从没有开发或上线过任何APP软件，任何以“护航科技APP”名义进行谋利的软件，均是骗子，提醒公众切勿上当受骗。</p>
+      <p>2、从未开展任何线上线下资金募集、转账交易活动。</p>
+      <p>3、官方业务仅通过官网（https://www.novots.com/index）及授权机构办理。</p>
+      <p>4、正规业务资金往来均通过企业对公账户，绝不要求私人转账。</p>
+      <p>请公众通过官方渠道核实业务真实性，谨防受骗。如遇可疑情况，请立即报警或联系我司（电话：400-612-6010）。我司将依法追究侵权者法律责任。</p>
+
+      <p style="text-align: right;">护航科技股份有限公司</p>
+      <p style="text-align: right;">2025 年4 月 25 日</p>
+    </div>
+  </el-dialog>
+  </div>
+</template>
+
+<script>
+import Header from "./Header.vue";
+import Footer from "./Footer.vue";
+import api from "../http/api";
+export default {
+  components: { Header, Footer },
+  data() {
+    return {
+      PagekeyWords:
+        "桌面运维、运维外包、桌面外包、网络安全、服务外包、网络运维、网络维护、设备维护",
+      PageDescription:
+        "护航科技股份有限公司，专注于全方位的IT服务，包括IT外包，IT运维，helpdesk，基础架构，系统集成、自有产品研发和行业应用解决方案等，已成为客户最信赖、最具实力的IT合作伙伴。",
+      PageTitle:
+        "护航科技股份有限公司】—IT外包|IT服务|IT运维|helpdesk|IT基础架构服务|IT巡检|IT维护",
+      dialogVisible: true,
+    };
+  },
+  metaInfo() {
+    return {
+      title: this.PageTitle,
+      meta: [
+        {
+          name: "keyWords",
+          content: this.PagekeyWords,
+        },
+        {
+          name: "description",
+          content: this.PageDescription,
+        },
+      ],
+    };
+  },
+  created() {
+    api.seo().then((res) => {
+      console.log(res);
+      this.PageTitle = res.data.reseoHome.metaTitle;
+      this.PagekeyWords = res.data.reseoHome.metaKey;
+      this.PageDescription = res.data.reseoHome.metaDesc;
+    });
+    api.getHome().then((res) => {
+      window.localStorage.homeData = JSON.stringify(
+        res.data.resettingDict.settings
+      );
+    });
+    api.seo().then((res) => {
+      console.log(res);
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.main-container {
+  height: 100%;
+}
+.header {
+  position: relative;
+  z-index: 1;
+}
+.content {
+  position: relative;
+  // z-index: 0;
+}
+.rq {
+  position: fixed;
+  z-index: 999;
+  right: 30px;
+  bottom: 80px;
+  
+  //       // &:hover .customer-flow .flow-box{
+  //       //   opacity: 1;
+  //       // }
+}
+.rq:hover .customer-flow{
+    opacity: 1;
+    pointer-events: auto;
+  }
+.customer-flow {
+  position: absolute;
+  right: 60px;
+  bottom: 20px;
+  padding-bottom: 60px;
+  transition: 0.5s;
+  opacity: 0;
+  // display: none;
+  pointer-events: none;
+}
+.flow-box {
+  // opacity: 0;
+  width: 200px;
+  height: 255px;
+  padding-top: 30px;
+  box-sizing: border-box;
+  background: #fff;
+  border: 0.5px solid #e1e8f5;
+  box-shadow: 0 16px 48px 0 rgba(0,0,0,0.4);
+  border-radius: 8px;
+  text-align: center;
+}
+.flow-box img {
+  width: 140px;
+  height: 140px;
+}
+.flow-box h3 {
+  padding: 14px 0 8px;
+  font-size: 16px;
+  line-height: 22px;
+  color: #292c33;
+}
+
+.flow-box p {
+  line-height: 20px;
+  font-size: 14px;
+  color: #8590a6;
+}
+.flow-box p span {
+  color: #24b3ae;
+  padding-left: 5px;
+}
+.phone{
+  width: 70px;
+  box-shadow: 0 16px 48px 0 rgba(0,0,0,0.2);
+  border-radius: 50%;
+  background-color: #fff;
+  display: block;
+}
+.dialog-content {
+  p{
+    line-height: 0.4rem;
+    text-indent: 2em;
+  }
+}
+</style>
--- a/src/filters/Filters.js
+++ b/src/filters/Filters.js
@ -0,0 +1,217 @@
+// import state from '@/store/state'
+import moment from 'moment'
+
+//图片加前缀
+// export const ImageCdn = (text) => {
+//   return process.env.VUE_APP_CDN_BASEURL + text
+// }
+// 没有数据返回--
+const formatText = (val) => {
+  if (val == '' || val == undefined || val == null) {
+    return '--'
+  }
+  return val
+}
+
+// 没有数据返回0
+const formatZero = (val) => {
+  if (val == '' || val == undefined || val == null) {
+    return 0
+  }
+  return val
+}
+
+const payDate = (val) => {
+  if (val == 7) {
+    return val + '天'
+  }
+  if (val > 7 && val < 40) {
+    return '月'
+  }
+  if (val > 40) {
+    return '年'
+  }
+  return val
+}
+
+const toFixed2 = (val) => {
+  let str = val.toFixed(2)
+  return str
+}
+
+const percent2 = (val) => {
+  if (val == '' || val == undefined || val == null) {
+    return '--'
+  }
+  let str = Math.round(val * 10000) / 100 + '%'
+
+  return str
+}
+
+// 日期格式化年月日
+const formatYYYYMMDD = (value) => {
+  if (!value) {
+    return '--'
+  } else {
+    let str = moment(value).format('YYYY-MM-DD')
+    return str
+  }
+}
+
+// 字符串转数组
+const strArr = (value) => {
+  if (!value) {
+    return '--'
+  } else {
+    let arr = JSON.parse(value)
+    let str = ''
+    arr.map((item, index) => {
+      str += item + '/'
+    })
+    str = str.substring(0, str.length - 1)
+    return str
+  }
+}
+
+const phoneFormat = (value) => {
+  if (!value) {
+    return '--'
+  } else {
+    let str = value
+    return str.substring(0, 3) + '****' + str.substring(7, str.length)
+  }
+}
+
+// 分转元 保留2位小数
+export const toDecimal2 = (num) => {
+  let x = +num / 100
+  var f = parseFloat(x + '')
+  if (isNaN(f)) {
+    return '0'
+  }
+  var f = Math.round(x * 100) / 100
+  var s = f.toString()
+  var rs = s.indexOf('.')
+  if (rs < 0) {
+    rs = s.length
+    s += '.'
+  }
+  while (s.length <= rs + 2) {
+    s += '0'
+  }
+  return s
+}
+
+export const priceUppercase = (money) => {
+  var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖') //汉字的数字
+  var cnIntRadice = new Array('', '拾', '佰', '仟') //基本单位
+  var cnIntUnits = new Array('', '万', '亿', '兆') //对应整数部分扩展单位
+  var cnDecUnits = new Array('角', '分', '毫', '厘') //对应小数部分单位
+  //var cnInteger = "整"; //整数金额时后面跟的字符
+  var cnIntLast = '元' //整型完以后的单位
+  var maxNum = 999999999999999.9999 //最大处理的数字
+
+  var IntegerNum //金额整数部分
+  var DecimalNum //金额小数部分
+  var ChineseStr = '' //输出的中文金额字符串
+  var parts //分离金额后用的数组，预定义
+  if (money == '') {
+    return ''
+  }
+  money = parseFloat(money)
+  if (money >= maxNum) {
+    // $.alert('超出最大处理数字');
+    return ''
+  }
+  if (money == 0) {
+    //ChineseStr = cnNums[0]+cnIntLast+cnInteger;
+    ChineseStr = cnNums[0] + cnIntLast
+    //document.getElementById("show").value=ChineseStr;
+    return ChineseStr
+  }
+  money = money.toString() //转换为字符串
+  if (money.indexOf('.') == -1) {
+    IntegerNum = money
+    DecimalNum = ''
+    cnIntLast = '元整'
+  } else {
+    parts = money.split('.')
+    IntegerNum = parts[0]
+    DecimalNum = parts[1].substr(0, 4)
+  }
+  let zeroCount = 0
+  let IntLen = 0
+  let n
+  let p
+  let m
+  let q
+  let decLen = 0
+  if (parseInt(IntegerNum, 10) > 0) {
+    //获取整型部分转换
+    zeroCount = 0
+    IntLen = IntegerNum.length
+    for (var i = 0; i < IntLen; i++) {
+      n = IntegerNum.substr(i, 1)
+      p = IntLen - i - 1
+      q = p / 4
+      m = p % 4
+      if (n == '0') {
+        zeroCount++
+      } else {
+        if (zeroCount > 0) {
+          ChineseStr += cnNums[0]
+        }
+        zeroCount = 0 //归零
+        ChineseStr += cnNums[parseInt(n)] + cnIntRadice[m]
+      }
+      if (m == 0 && zeroCount < 4) {
+        ChineseStr += cnIntUnits[q]
+      }
+    }
+    ChineseStr += cnIntLast
+    //整型部分处理完毕
+  }
+  if (DecimalNum != '') {
+    //小数部分
+    decLen = DecimalNum.length
+    for (i = 0; i < decLen; i++) {
+      n = DecimalNum.substr(i, 1)
+      if (n != '0') {
+        ChineseStr += cnNums[Number(n)] + cnDecUnits[i]
+      }
+    }
+  }
+  if (ChineseStr == '') {
+    //ChineseStr += cnNums[0]+cnIntLast+cnInteger;
+    ChineseStr += cnNums[0] + cnIntLast
+  } /* else if( DecimalNum == '' ){
+            ChineseStr += cnInteger;
+            ChineseStr += cnInteger;
+        } */
+  return ChineseStr
+}
+//删除版本的V字符
+export const deleteV = function(text) {
+  let str = text
+    ? text
+        .replace(' ', '')
+        .replace('V', '')
+        .replace('v', '')
+    : text
+  return text
+}
+
+// 手机号中间加****
+export const telChange = function(tel) {
+  tel = '' + tel
+  let newTel = tel.substr(0, 3) + '****' + tel.substr(7)
+  return newTel
+}
+
+//流程管理图片处理
+const processIcon = function(data, type) {
+  let int = parseInt(data)
+ 
+}
+
+export { formatText, toFixed2, percent2, formatYYYYMMDD, strArr, phoneFormat, payDate, processIcon, formatZero }
--- a/src/http/api.js
+++ b/src/http/api.js
@ -0,0 +1,281 @@
+// import {Get, Post} from "./request";
+import request from "./axios";
+/** Get请求Url参数拼接 */
+function judgeParam(param) {
+    var str = "?";
+    for (var i in param) {
+        if (param[i] !== -1) {
+            str += i + "=" + param[i] + "&";
+        }
+    }
+    var str2 = str.substring(0, str.length - 1);
+    return str2;
+}
+//blob转化file
+function blobToFile(blob, num, filename) {
+    blob.lastModifiedDate = Date.now();
+    if (!filename) {//若无文件名则取当前时间戳
+      filename = Date.parse(new Date()) + '+' + num + '.jpg';
+    }
+    let file = new File([blob], filename, { type: "image/jpeg", lastModified: Date.now() });
+    // blob.name = fileName;
+    console.log(file)
+    return file;
+};
+const api = {
+    login(body) {
+        return request
+            .post('/api/v1/login', body)
+            .then((res) => {
+                return res
+            })
+            .catch(function (error) {
+                throw error
+            })
+    },
+    qiniuToken() {
+        return request
+            .get('/api/v1/token')
+            .then((res) => {
+                return res
+            })
+            .catch(function (error) {
+                throw error
+            })
+    },
+    upImage64(body, num) {
+        let file = blobToFile(body, num)
+        let formData = new FormData();
+        formData.append('file', file);
+        return request
+            .post('/api/v1/image', formData)
+            .then((res) => {
+                return res
+            })
+            .catch(function (error) {
+                throw error
+            })
+    },
+    getTable(url, body) {
+        return request
+            .get(`/api/${url}` + judgeParam(body))
+            .then((res) => {
+                return res
+            })
+            .catch(function (error) {
+                throw error
+            })
+    },
+    addData(url, body) {
+        return request
+            .post(`/api/v1/${url}`, body)
+            .then((res) => {
+                return res
+            })
+            .catch(function (error) {
+                throw error
+            })
+    },
+    dataInfo(url, body) {
+        return request
+            .get(`/api/v1/${url}/${body}`)
+            .then((res) => {
+                return res
+            })
+            .catch(function (error) {
+                throw error
+            })
+    },
+    dataEdit(url, body) {
+        return request
+            .patch(`/api/v1/${url}/${body.id}`, body.data)
+            .then((res) => {
+                return res
+            })
+            .catch(function (error) {
+                throw error
+            })
+    },
+    dataDelete(url, body) {
+        return request
+            .delete(`/api/v1/${url}/${body}`)
+            .then((res) => {
+                return res
+            })
+            .catch(function (error) {
+                throw error
+            })
+    },
+    deleteSelect(body) {
+        return request
+            .post(`/api/v1/delete`, body)
+            .then((res) => {
+                return res
+            })
+            .catch(function (error) {
+                throw error
+            })
+    },
+    postDate(body) {
+        return request
+            .post(`/api/consult/createConsult`, body)
+            .then((res) => {
+                return res
+            })
+            .catch(function (error) {
+                throw error
+            })
+    },
+    services() {
+        return request
+            .get(`/api/pubadvantage/getAdvantageList`)
+            .then((res) => {
+                return res
+            })
+            .catch(function (error) {
+                throw error
+            })
+    },
+    servicesUp(body) {
+        return request
+            .patch(`/api/v1/services/${body.id}`, body.data)
+            .then((res) => {
+                return res
+            })
+            .catch(function (error) {
+                throw error
+            })
+    },
+    getHome() {
+        return request
+            .get(`/api/pubsettingDict/findSettingDcit?ID=1`)
+            .then((res) => {
+                return res
+            })
+            .catch(function (error) {
+                throw error
+            })
+    },
+    homeUp(body) {
+        return request
+            .patch(`/api/v1/home/195454129470967808`, body)
+            .then((res) => {
+                return res
+            })
+            .catch(function (error) {
+                throw error
+            })
+    },
+    boss(body) {
+        return request
+            .patch(`/api/v1/home/195454129470967808`, body)
+            .then((res) => {
+                return res
+            })
+            .catch(function (error) {
+                throw error
+            })
+    },
+    // 文档下载
+    download(str, name) {
+        // let name = "123.jpg";
+        let url = str;
+        let suffix = url.substring(url.lastIndexOf("."), url.length);
+        let ajax = new XMLHttpRequest();
+        ajax.open("GET", url, true);
+        ajax.responseType = 'blob';
+        ajax.onload = function (e) {
+            let url = window.URL.createObjectURL(ajax.response);
+            let a = document.createElement('a');
+            a.href = url;
+            a.download = name;
+            a.click()
+        };
+        ajax.send();
+    },
+    // 文档预览
+    wordPreview(url) {
+        let suffix = url.substring(url.lastIndexOf("."), url.length);
+        console.log(suffix)
+        // return
+        if(suffix == '.docx' || suffix == '.ppt' || suffix == '.xls'|| suffix == 'xlsx' || suffix == '.doc' || suffix == '.txt'){
+            var xurl = "https://view.officeapps.live.com/op/view.aspx?src=";
+            xurl += encodeURIComponent(url);
+            var ops = {
+                "_pdf": true, //word/excel文档尝试以pdf方式显示，默认false
+                // "_watermark": "XDOC文档预览", //水印文本，显示水印
+                // "_saveable": false, //是否允许保存PDF，默认true
+                // "_printable": false, //是否允许打印PDF，默认true
+                // "_copyable": false, //是否允许选择复制内容，默认true
+                // "_toolbar": false, //是否显示底部工具条，默认true
+                // "_title": "文档预览", //自定义标题
+                // "_expire": 30, //预览链接有效期，单位分钟，默认永久有效
+                // "_limit": "1,3", //限制页数，如：“5”表示只显示前5页，“2,5”表示从第2页开始的5页，对pdf/doc/docx/ppt/pptx有效
+            };//传入预览参数
+            for (var a in ops) {
+                xurl += "&" + encodeURIComponent(a) + "=" + encodeURIComponent(ops[a]);
+            }
+            window.open(xurl);
+        }else{
+            window.open(url);
+        }
+        
+    },
+    numbers(){
+        return request
+            .get(`/api/v1/numbers`)
+            .then((res) => {
+                return res
+            })
+            .catch(function (error) {
+                throw error
+            })
+    },
+    getBtags(){
+        return request
+            .get(`/api/pubjoin/tag`)
+            .then((res) => {
+                return res
+            })
+            .catch(function (error) {
+                throw error
+            })
+    },
+    //字符串转base64
+    encode(str) {
+        // 对字符串进行编码
+        var encode = encodeURI(str);
+        // 对编码的字符串转化base64
+        var base64 = btoa(encode);
+        return base64;
+     },
+     // base64转字符串
+     decode(base64) {
+        // 对base64转编码
+        var decode = atob(base64);
+        // 编码转字符串
+        var str = decodeURI(decode);
+        return str;
+     },
+     news(body){
+        return request
+        .get(`/api/pubinfo/findInfo?ID=${body}`)
+        .then((res) => {
+            return res
+        })
+        .catch(function (error) {
+            throw error
+        })
+     },
+     seo(){
+        return request
+        .get(`/api/seoHome/findSeoHome?ID=1`)
+        .then((res) => {
+            return res
+        })
+        .catch(function (error) {
+            throw error
+        })
+     }
+}
+export default api
--- a/src/http/axios.js
+++ b/src/http/axios.js
@ -0,0 +1,63 @@
+import axios from 'axios';
+import { Message } from 'element-ui';
+// import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据
+const path = process.env.NODE_ENV === 'development' ? '/api' : process.env.VUE_APP_BASEURL;
+// const path = 
+const service = axios.create({
+   baseURL: path,
+   timeout: 30000 // 请求超时时间
+});
+
+// service.defaults.headers.common['Authorization'] = 'Bearer ' + window.localStorage.token || ''
+
+service.interceptors.request.use(
+   (config) => {
+
+      config.headers.Authorization = 'Bearer ' + window.localStorage.token || ''
+      // let url = config.url.replace(config.baseURL, '');
+      
+      // config.headers = getHeader(url, code)
+      return config
+   },
+   error => {
+      console.log(error)
+      Promise.reject(console.error);
+   }
+)
+service.interceptors.response.use(
+   response => {
+      const res = response.data
+      // console.log(response.data)
+      if(res.code == 1015){
+         // route.push('/login')
+         console.log(window.location.origin)
+         window.location.href = window.location.origin + '/login'
+         // return
+      }
+      if(res.code == 0){
+         return res
+      } else {
+         Message.error(res.msg);
+         return Promise.reject('error')
+      }
+      
+      
+      // if (res.code === 200) {
+      //     return response.data
+      // } else {
+      //     if(res.code === 401){
+      //         window.localStorage.removeItem('token')
+      //         window.localStorage.removeItem('userInfo')
+      //         window.location.href = window.location.origin + '/login'
+      //         return
+      //     }
+      //     return Promise.reject('error')
+      // }
+   },
+   error => {
+      return Promise.reject(error)
+   }
+
+)
+
+export default service
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,97 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import 'babel-polyfill';
+import 'classlist-polyfill';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
+// import "animate.css";
+
+import './assets/css/iconfont.css'
+import './assets/css/index.css'
+import './assets/js/fitter.js'
+import api from './http/api'
+import * as Filters from './filters/Filters'
+Vue.use(ElementUI);
+//图片懒加载插件
+import vueLazy from 'vue-lazyload'
+Vue.use(vueLazy)
+
+// import AmapVue from '@amap/amap-vue'
+// AmapVue.config.key = 'dda7ab288f7fafb799771df908aa1550'
+// AmapVue.config.plugins = [
+//     'AMap.ToolBar',
+//     'AMap.MoveAnimation',
+//     // 在此配置你需要预加载的插件，如果不配置，在使用到的时候会自动异步加载
+//   ];
+// Vue.use(AmapVue)
+
+import VueAMap from 'vue-amap';
+// import { lazyAMapApiLoaderInstance } from 'vue-amap';
+Vue.use(VueAMap);
+VueAMap.initAMapApiLoader({
+    key: 'dda7ab288f7fafb799771df908aa1550',
+    plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
+    // 默认高德 sdk 版本为 1.4.4
+    v: '1.4.4'
+  });
+//   lazyAMapApiLoaderInstance.load().then(() => {
+//     // your code ...
+//     this.map = new AMap.Map('amapContainer', {
+//       center: new AMap.LngLat(121.59996, 31.197646)
+//     });
+//   });
+
+import MetaInfo from 'vue-meta-info';
+Vue.use(MetaInfo);
+
+Vue.config.productionTip = false;
+
+router.beforeEach((to, from, next) => {
+    // console.log(to)
+    // next();
+    const homeData = window.localStorage.homeData
+    
+    if(!homeData){
+        api.getHome().then((res) => {
+            window.localStorage.homeData = JSON.stringify(res.data.resettingDict.settings);
+            next();
+        });
+    } else {
+        // const token = window.localStorage.token
+        // console.log('token', token)
+        // if (!token && to.path != '/login' && to.meta.power) {
+        //     next('/login');
+        // } else {
+        //     next();
+        // }
+
+        next();
+    }
+    
+})
+router.afterEach((to) => {
+    // console.log(to)
+    
+    if(to.meta.power){
+        document.title = to.meta.title;
+    }else{
+        document.title = '护航科技'
+        
+    }
+    let element = document.getElementById('main-box');
+    if (element) element.scrollIntoView()
+        // console.log(element)
+        // element.scrollIntoView()
+
+})
+
+Object.keys(Filters).forEach((key) => {
+    Vue.filter(key, Filters[key])
+  })
+  
+new Vue({
+    router,
+    render: h => h(App)
+}).$mount('#app');
+
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,268 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+
+Vue.use(Router);
+
+export default new Router({
+    mode: 'hash',
+    routes: [
+        {
+        path: '/',
+        redirect: '/index',
+        component: () => import('../components/MainFrom.vue'),
+        meta: { title: '护航科技', proPath: '/index', power: false },
+        children: [
+            {
+                path: '/index',
+                component: () => import('../views/index/index.vue'),
+                meta: { title: '护航科技', proPath: '/index', power: false },
+            },
+            {
+                path: '/index_1',
+                component: () => import('../views/index/childs/index_1/index.vue'),
+                meta: { title: '文档中心', proPath: '/index' },
+            },
+            {
+                path: '/index_2',
+                component: () => import('../views/index/childs/index_2/index.vue'),
+                meta: { title: '企业资质', proPath: '/index' },
+            },
+            {
+                path: '/itService',
+                component: () => import('../views/itService/itService.vue'),
+                meta: { title: '护航-IT服务', proPath: '/itService', power: false },
+            },
+            {
+                path: '/it1',
+                component: () => import('../views/itService/childs/index_1/index.vue'),
+                meta: { title: '护航-IT技术架构服务方案', proPath: '/itService', power: false },
+            },
+            {
+                path: '/it2',
+                component: () => import('../views/itService/childs/index_2/index.vue'),
+                meta: { title: '云服务', proPath: '/itService', power: false },
+            },
+            {
+                path: '/it3',
+                component: () => import('../views/itService/childs/index_3/index.vue'),
+                meta: { title: '护航-ITSS 培训服务', proPath: '/itService', power: false },
+            },
+            {
+                path: '/it4',
+                component: () => import('../views/itService/childs/index_4/index.vue'),
+                meta: { title: '护航-IT 系统集成与实施服务', proPath: '/itService', power: false },
+            },
+            {
+                path: '/it5',
+                component: () => import('../views/itService/childs/index_5/index.vue'),
+                meta: { title: '护航-信息安全体系建设', proPath: '/itService', power: false },
+            },
+            {
+                path: '/it6',
+                component: () => import('../views/itService/childs/index_6/index.vue'),
+                meta: { title: '护航-IT服务', proPath: '/itService', power: false },
+            },
+            {
+                path: '/product',
+                component: () => import('../views/product/product.vue'),
+                meta: { title: '护航-IT 服务管理体系建设', proPath: '/product', power: false },
+            },
+            {
+                path: '/pro1',
+                component: () => import('../views/product/childs/index_1/index.vue'),
+                meta: { title: 'ITSM 管理工具', proPath: '/product', power: false },
+            },
+            {
+                path: '/pro2',
+                component: () => import('../views/product/childs/index_2/index.vue'),
+                meta: { title: 'OA 协同办公工具', proPath: '/product', power: false },
+            },
+            {
+                path: '/pro3',
+                component: () => import('../views/product/childs/index_3/index.vue'),
+                meta: { title: '数字化应用底座', proPath: '/product', power: false },
+            },
+            {
+                path: '/pro4',
+                component: () => import('../views/product/childs/index_4/index.vue'),
+                meta: { title: '配置自动化核查', proPath: '/product', power: false },
+            },
+            {
+                path: '/pro5',
+                component: () => import('../views/product/childs/index_5/index.vue'),
+                meta: { title: '软件成分分析及同源漏洞检测工具', proPath: '/product', power: false },
+            },
+            {
+                path: '/pro6',
+                component: () => import('../views/product/childs/index_6/index.vue'),
+                meta: { title: '软件源代码缺陷检测工具', proPath: '/product', power: false },
+            },
+            {
+                path: '/anonymousLetter',
+                component: () => import('../views/product/childs/anonymousLetter/index.vue'),
+                meta: { title: '飞书平台定制化开发', proPath: '/product', power: false },
+            },
+            {
+                path: '/solution',
+                component: () => import('../views/solution/solution.vue'),
+                meta: { title: '护航-解决方案', proPath: '/solution', power: false },
+            },
+            {
+                path: '/solu1',
+                component: () => import('../views/solution/childs/index_1/index.vue'),
+                meta: { title: '护航-终端运维管理解决方案', proPath: '/solution', power: false },
+            },
+            {
+                path: '/solu2',
+                component: () => import('../views/solution/childs/index_2/index.vue'),
+                meta: { title: '护航-IT 服务管理解决方案', proPath: '/solution', power: false },
+            },
+            {
+                path: '/solu3',
+                component: () => import('../views/solution/childs/index_3/index.vue'),
+                meta: { title: '护航呼叫中心解决方案', proPath: '/solution', power: false },
+            },
+            {
+                path: '/solu4',
+                component: () => import('../views/solution/childs/index_4/index.vue'),
+                meta: { title: '数据中心运维咨询及服务解决方案', proPath: '/solution', power: false },
+            },
+            {
+                path: '/apply',
+                component: () => import('../views/apply/apply.vue'),
+                meta: { title: '护航-应用案例', proPath: '/apply', power: false },
+            },
+            {
+                path: '/app1',
+                component: () => import('../views/apply/childs/index_1/index.vue'),
+                meta: { title: '护航-应用案例', proPath: '/apply', power: false },
+            },
+            {
+                path: '/app2',
+                component: () => import('../views/apply/childs/index_2/index.vue'),
+                meta: { title: '护航-应用案例', proPath: '/apply', power: false },
+            },
+            {
+                path: '/app3',
+                component: () => import('../views/apply/childs/index_3/index.vue'),
+                meta: { title: '护航-应用案例', proPath: '/apply', power: false },
+            },
+            {
+                path: '/app4',
+                component: () => import('../views/apply/childs/index_4/index.vue'),
+                meta: { title: '护航-应用案例', proPath: '/apply', power: false },
+            },
+
+            {
+                path: '/about',
+                component: () => import('../views/about/about.vue'),
+                meta: { title: '关于护航', proPath: '/about', power: false },
+            },
+            {
+                path: '/about_3',
+                component: () => import('../views/about/childs/index_3/index.vue'),
+                meta: { title: '加入我们', proPath: '/about', power: false },
+            },
+            {
+                path: '/about_2',
+                component: () => import('../views/about/childs/index_2/index.vue'),
+                meta: { title: '企业动态', proPath: '/about', power: false },
+            },
+            {
+                path: '/info_detial',
+                component: () => import('../views/about/childs/index_2/childs/index.vue'),
+                meta: { title: '企业动态', proPath: '/about', power: false },
+            },
+            {
+                path: '/about_4',
+                component: () => import('../views/about/childs/index_4/index.vue'),
+                meta: { title: '联系我们', proPath: '/about', power: false },
+            },
+            {
+                path: '/join_info',
+                component: () => import('../views/about/childs/index_3/childs/join_info.vue'),
+                meta: { title: '职位详情', proPath: '/about', power: false },
+            },
+            {
+                path: '/guard',
+                component: () => import('../views/guard/index.vue'),
+                meta: { title: '护航科技代码安全卫士', proPath: '/guard', power: false },
+            },
+        ]
+    },
+    // {
+    //     path: '/login',
+    //     component: () => import('../views/login/login.vue'),
+    //     meta: { title: '登录', power: false },
+    // }, 
+    // {
+    //     path: '/admin',
+    //     redirect: '/setIndex',
+    //     component: () => import('../admin/components/Main.vue'),
+    //     meta: { title: '首页配置', power: true },
+    //     children: [{
+    //         path: '/cases',
+    //         component: () => import('../admin/page/cases/index.vue'),
+    //         meta: { title: '优质客户', power: true },
+    //     }, 
+    //     {
+    //         path: '/offices',
+    //         component: () => import('../admin/page/offices/index.vue'),
+    //         meta: { title: '文档中心', power: true },
+    //     },
+    //     {
+    //         path: '/companies',
+    //         component: () => import('../admin/page/companies/index.vue'),
+    //         meta: { title: '企业资质', power: true },
+    //     },
+    //     {
+    //         path: '/infos',
+    //         component: () => import('../admin/page/infos/index.vue'),
+    //         meta: { title: '公司动态', power: true },
+    //     },
+    //     {
+    //         path: '/partner',
+    //         component: () => import('../admin/page/partner/index.vue'),
+    //         meta: { title: '合作伙伴', power: true },
+    //     },
+    //     {
+    //         path: '/productes',
+    //         component: () => import('../admin/page/productes/index.vue'),
+    //         meta: { title: '自有产品', power: true },
+    //     },
+    //     {
+    //         path: '/links',
+    //         component: () => import('../admin/page/links/index.vue'),
+    //         meta: { title: '友情链接', power: true },
+    //     },
+    //     {
+    //         path: '/solutions',
+    //         component: () => import('../admin/page/solutions/index.vue'),
+    //         meta: { title: '解决方案', power: true },
+    //     },
+    //     {
+    //         path: '/example',
+    //         component: () => import('../admin/page/example/index.vue'),
+    //         meta: { title: '例子管理', power: true },
+    //     },
+        
+    //     {
+    //         path: '/advantage',
+    //         component: () => import('../admin/page/advantage/index.vue'),
+    //         meta: { title: '护航科技服务优势', power: true },
+    //     },
+    //     {
+    //         path: '/setIndex',
+    //         component: () => import('../admin/page/setIndex/index.vue'),
+    //         meta: { title: '首页配置', power: true },
+    //     },
+    //     {
+    //         path: '/joinUs',
+    //         component: () => import('../admin/page/Join/index.vue'),
+    //         meta: { title: '加入我们', power: true },
+    //     },
+        
+        // ]
+    // }
+]
+})
--- a/src/views/about/about.scss
+++ b/src/views/about/about.scss
@ -0,0 +1,514 @@
+.about-container {
+  overflow-x: hidden;
+  .title-sub {
+    position: relative;
+    z-index: 1;
+    text-align: center;
+    font-size: 0.42rem;
+    font-weight: 500;
+    color: #001d2d;
+    line-height: 0.62rem;
+    margin-bottom: 0.6rem;
+    span {
+      display: inline-block;
+      width: 0.24rem;
+      height: 0.24rem;
+      position: relative;
+      top: -0.02rem;
+      &:first-child {
+        background: #e1eafd;
+      }
+      &:last-child {
+        background: #ecf4e3;
+      }
+    }
+  }
+  .it-temp1 {
+    // height: 6.48rem;
+    // padding-left: 1.2rem;
+    // display: flex;
+    // align-items: center;
+    position: relative;
+
+    img {
+      // position: absolute;
+      width: 100%;
+      display: block;
+      // height: 100%;
+      // top:0;
+      // left: 0;
+      // z-index: 0;
+    }
+    .title {
+      font-size: 0.6rem;
+      font-weight: 500;
+      color: #001d2d;
+      line-height: 0.89rem;
+    }
+    .sub-title {
+      font-size: 0.24rem;
+      font-weight: 400;
+      color: #001d2d;
+      line-height: 0.36rem;
+    }
+  }
+  .index-temp2 {
+    padding: 1rem 1.2rem 0.65rem 1.2rem;
+    // background-color: #f2f2f2;
+    position: relative;
+    img {
+      position: absolute;
+      width: 7.62rem;
+      right: 0;
+      top: 0;
+      z-index: 1;
+    }
+    .content {
+      .title {
+        font-size: 0.24rem;
+        font-weight: 400;
+        color: #001d2d;
+        line-height: 0.36rem;
+        margin-bottom: 0.2rem;
+      }
+      .text {
+        font-size: 0.18rem;
+        font-weight: 400;
+        color: #8490aa;
+        line-height: 0.36rem;
+        width: 7.49rem;
+      }
+    }
+  }
+  .index-temp3 {
+    padding: 0rem 1.2rem 0rem 1.2rem;
+    position: relative;
+    background-color: #fff;
+    z-index: 0;
+    .bg-img {
+      width: 100%;
+    }
+  }
+  .index-temp4 {
+    padding: 0.8rem 1.2rem 0.65rem 1.2rem;
+    position: relative;
+    .bg-img {
+      position: absolute;
+      z-index: 0;
+      width: 6.51rem;
+      top: 0.6rem;
+      right: 0;
+    }
+    // z-index: 0;
+    .item {
+      background-color: #fff;
+      border-radius: 40px;
+      padding: 0.5rem 0.32rem;
+      box-sizing: border-box;
+      position: relative;
+      z-index: 1;
+      .icon {
+        position: relative;
+        img {
+          width: 0.72rem;
+          position: relative;
+          z-index: 0;
+        }
+        span {
+          display: block;
+          position: absolute;
+          width: 0.72rem;
+          height: 0.72rem;
+          background-color: #78bd3a;
+          border-radius: 0.72rem;
+          top: 0;
+          left: 0.36rem;
+          opacity: 0.09;
+          z-index: 0;
+        }
+      }
+      .title {
+        font-size: 0.28rem;
+        font-weight: 400;
+        color: #001d2d;
+        line-height: 0.4rem;
+        padding-top: 0.26rem;
+        margin-bottom: 0.48rem;
+      }
+      .text {
+        font-size: 0.18rem;
+        font-weight: 400;
+        color: #737373;
+        line-height: 0.32rem;
+        height: 1.2rem;
+        position: relative;
+        img {
+          position: absolute;
+          width: 0.72rem;
+          bottom: 0;
+          left: 0rem;
+        }
+      }
+    }
+    // .imgList {
+
+    // }
+  }
+
+  .index-temp5 {
+    padding: 0rem 1.2rem 0rem 1.2rem;
+    position: relative;
+    // background-color: #fff;
+    .title-sub {
+      margin-bottom: 0rem;
+    }
+    .hu-it {
+      font-size: 0.42rem;
+      font-weight: 500;
+      color: #001d2d;
+      line-height: 0.62rem;
+    }
+    .block {
+      margin-top: 0.4rem;
+      .small {
+        text-align: center;
+      }
+      .swiper-one {
+        display: flex;
+        position: relative;
+        top: 50%;
+        transform: translateY(-50%);
+        margin: 0 0.6rem;
+        .swiper-item {
+          position: relative;
+          cursor: pointer;
+          flex: 1;
+          div {
+            margin: 0 auto;
+            width: 2.25rem;
+            text-align: center;
+            font-size: 0.18rem;
+            color: #4c4948;
+            line-height: 0.24rem;
+            img {
+              // width: 2.25rem;
+              height: 1.8rem;
+              margin-bottom: 10px;
+            }
+          }
+        }
+      }
+      .swiper-one3 {
+        .swiper-item {
+          cursor: pointer;
+          div {
+            img {
+              width: auto;
+              height: 2.14rem;
+            }
+          }
+        }
+      }
+      .swiper-one4 {
+        .swiper-item {
+          cursor: pointer;
+          div {
+            img {
+              width: auto;
+              height: 2.14rem;
+            }
+          }
+        }
+      }
+      .swiper-one5 {
+        .swiper-item {
+          cursor: pointer;
+          div {
+            img {
+              width: auto;
+              height: 2.14rem;
+            }
+          }
+        }
+      }
+    }
+  }
+  .index-temp6 {
+    padding: 0rem 1.2rem 0rem 1.2rem;
+    position: relative;
+    .content {
+      position: relative;
+      // width: 100%;
+      // overflow: auto;
+      // padding-right: 1.2rem;
+      // overflow: hidden;
+      .flex-content {
+        // display: flex;
+        padding-right: 1.2rem;
+        position: relative;
+        // left: 50px;
+      }
+      .scrollbar-demo-item {
+        flex-shrink: 0;
+        width: 4.2rem;
+        height: 3.6rem;
+        padding-right: 0.8rem;
+        padding-left: 0.02rem;
+      }
+      .step {
+        height: 20px;
+        background: #000000;
+        position: absolute;
+        left: 0;
+        width: 100%;
+        top: 1.1rem;
+      }
+      .date-num {
+        position: relative;
+        font-size: 0.48rem;
+        color: #001d2d;
+        line-height: 0.4rem;
+        letter-spacing: 0.01rem;
+        span {
+          // position: absolute;
+          // top: -.4rem;
+          // left: 0;
+          position: relative;
+          left: 2px;
+          display: block;
+          width: 0.24rem;
+          height: 0.24rem;
+          background-color: #6eb92c;
+          margin-bottom: 0.2rem;
+        }
+      }
+      .ul-li {
+        padding-right: 50px!important;
+        margin-top: 0.8rem;
+        font-size: 0.18rem;
+        font-weight: 400;
+        color: #737373;
+        line-height: 0.3rem;
+        text-align: justify;
+      }
+      // ul {
+      //   padding-left: 16px;
+      //   margin-top: 0.8rem;
+      //   li {
+      //     list-style: disc;
+      //     font-size: 0.18rem;
+      //     font-weight: 400;
+      //     color: #737373;
+      //     line-height: 0.3rem;
+      //   }
+      // }
+    }
+  }
+  .index-temp7 {
+    padding: 0.6rem 1.2rem 0rem 1.2rem;
+    position: relative;
+    .title-sub {
+      position: relative;
+      z-index: 1;
+      text-align: center;
+      font-size: 0.42rem;
+      font-weight: 500;
+      color: #001d2d;
+      line-height: 0.62rem;
+      margin-bottom: 0rem;
+      span {
+        display: inline-block;
+        width: 0.24rem;
+        height: 0.24rem;
+        position: relative;
+        top: -0.02rem;
+        &:first-child {
+          background: #e1eafd;
+        }
+        &:last-child {
+          background: #ecf4e3;
+        }
+      }
+    }
+    .content {
+      padding-top: 0.8rem;
+      overflow: hidden;
+    }
+    div {
+      font-size: 0.36rem;
+      font-weight: 400;
+      color: #001d2d;
+      line-height: 0.44rem;
+      letter-spacing: 0.01rem;
+      margin-bottom: 0.12rem;
+    }
+    img {
+      width: 0.72rem;
+      margin-bottom: 0.12rem;
+    }
+    li {
+      font-size: 0.18rem;
+      font-weight: 400;
+      color: #737373;
+      line-height: 0.3rem;
+      margin-bottom: 0.3rem;
+    }
+  }
+  .index-temp8 {
+    padding: 0rem 1.2rem 0rem 1.2rem;
+    .block {
+      border-radius: 0.4rem;
+      overflow: hidden;
+      cursor: pointer;
+      padding-bottom: 0.2rem;
+      &:hover {
+        box-shadow: 0px 10px 40px 0px rgba(0, 49, 75, 0.1);
+      }
+    }
+
+    img {
+      width: 100%;
+      margin-bottom: 0.2rem;
+    }
+    .title {
+      font-size: 0.28rem;
+      font-weight: 400;
+      color: #001d2d;
+      padding-left: 0.2rem;
+      margin-bottom: 0.14rem;
+    }
+    .text {
+      font-size: 0.18rem;
+      font-weight: 400;
+      color: #737373;
+      padding-left: 0.2rem;
+    }
+    .content {
+      margin-top: 0.6rem;
+      position: relative;
+      // width: 100%;
+      // overflow: auto;
+      // padding-right: 1.2rem;
+      .flex-content {
+        display: flex;
+        // padding-right: 1.2rem;
+      }
+      .scrollbar-demo-item {
+        flex-shrink: 0;
+        width: 100%;
+        // height: 3.6rem;
+        // padding-right: .8rem;
+        // padding-left: .02rem;
+        padding-bottom: 0.2rem;
+      }
+
+      .date-num {
+        position: relative;
+        font-size: 0.18rem;
+        color: #001d2d;
+        // line-height: .40rem;
+        letter-spacing: 0.01rem;
+        text-align: center;
+        cursor: pointer;
+        img {
+          width: 100%;
+          // height: 2.84rem;
+          height: 300px;
+    object-fit: contain;
+          margin-bottom: 0.2rem;
+        }
+        span{
+          padding-left: .16rem;
+          padding-right: .1rem;
+        }
+        .title{
+          display: block;
+          text-align: left;
+          font-size: .28rem;
+          height: 1.2rem;
+          font-weight: 500;
+          font-weight: 400;
+        }
+        .text{
+          font-size: .18rem;
+          color: #737373;
+          font-weight: 400;
+          margin-top: .1rem;
+          text-overflow: -o-ellipsis-lastline;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+  }
+  .index-temp9 {
+    padding: 1rem 1.2rem;
+    padding-bottom: 1.4rem;
+    .block {
+      position: relative;
+    }
+    .num-img {
+      width: 100%;
+      height: auto;
+      position: relative;
+      z-index: 1;
+      margin-bottom: 0.2rem;
+      cursor: pointer;
+    }
+    .title {
+      position: absolute;
+      bottom: 0.8rem;
+      left: 0.3rem;
+      font-size: 0.28rem;
+      font-weight: 500;
+      color: #fff;
+      z-index: 1;
+    }
+
+    .step {
+      width: 0.74rem;
+    }
+    .el-row {
+      margin-bottom: 0.42rem;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+::v-deep .el-scrollbar__bar.is-horizontal{
+  height: 30px;
+}
+::v-deep .el-scrollbar__bar{
+  border-radius: 8px;
+  opacity: 1;
+}
+// ::v-deep .is-horizontal .el-scrollbar__thumb{
+//   // width: 15%!important;
+//   &::after{
+//     position: absolute;
+//     content: '';
+//     // background: url(./images/left.png)  no-repeat;
+//     left: 15%;
+//     width: 30px;
+//     height: 30px;
+//     top: 0;
+//     background-size: 30px 30px;
+//     // margin: 14px 0 0 15px;
+//   }
+//   &::before{
+//     position: absolute;
+//     content: '';
+//     // background: url(./images/right.png)  no-repeat;
+//     right: 15%;
+//     width: 30px;
+//     height: 30px;
+//     top: 0;
+//     background-size: 30px 30px;
+//     // margin: 14px 0 0 15px;
+//   }
+// }
--- a/src/views/about/about.vue
+++ b/src/views/about/about.vue
@ -0,0 +1,595 @@
+<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>
--- a/src/views/about/childs/index_2/childs/index.scss
+++ b/src/views/about/childs/index_2/childs/index.scss
@ -0,0 +1,67 @@
+.it-container{
+    .it-temp1{
+        height: 6.48rem;
+        padding-left: 2.3rem;
+        display: flex;
+        align-items: center;
+        position: relative;
+        img{
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top:0;
+            left: 0;
+            z-index: 0;
+        }
+        
+    }
+    .breadcrumb{
+        padding: .6rem 1.2rem .4rem 1.2rem;
+    }
+    
+    .it-temp2{
+        padding: .8rem 1.2rem 0rem 1.2rem;
+        // padding-top: .3rem;
+        position: relative;
+        z-index: 1;
+        .title-sub{
+            position: relative;
+            z-index: 1;
+            text-align: center;
+            font-size: .42rem;
+            
+            font-weight: 500;
+            color: #001D2D;
+            line-height: .62rem;
+            margin-bottom: .3rem;
+            span{
+                display: inline-block;
+                width: .24rem;
+                height: .24rem;
+                position: relative;
+                top: -0.02rem;
+                &:first-child{
+                    background: #E1EAFD;
+                }
+                &:last-child{
+                    background: #ECF4E3;
+                }
+            }
+        }
+        .content{
+            min-height: 6rem;
+            width: 1000px;
+            margin: auto;
+            margin-top: .6rem;
+            p{
+                
+            }
+        }
+        .time{
+            text-align: center;
+            font-size: 18px;
+            color: #737373;
+        }
+    }
+    
+}
--- a/src/views/about/childs/index_2/childs/index.vue
+++ b/src/views/about/childs/index_2/childs/index.vue
@ -0,0 +1,63 @@
+<template>
+  <div class="it-container">
+    <div class="it-temp1">
+      <img v-lazy="imgUrl.bg" />
+    </div>
+    <div class="breadcrumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/about' }"
+          >关于护航</el-breadcrumb-item
+        >
+        <el-breadcrumb-item :to="{ path: '/about_2' }"
+          >企业动态</el-breadcrumb-item
+        >
+        <el-breadcrumb-item>{{ infos.title || "动态详情" }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <div class="it-temp2">
+      <div class="title-sub">
+        <span></span>
+        {{ infos.title || "动态详情" }}
+        <span></span>
+      </div>
+      <div class="time">{{infos.CreatedAt | formatYYYYMMDD}}</div>
+      <div class="content">
+        <div v-html="infos.content"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import bg from "../../../images/bg.png";
+import api from "../../../../../http/api";
+export default {
+  components: {},
+  data() {
+    return {
+      imgUrl: {
+        bg: bg,
+      },
+      infos: {},
+      currentPage: 1,
+      pageSize: 15,
+      total: 0,
+    };
+  },
+  methods: {
+    getData() {
+      api.news(this.$route.query.info_id).then((res) => {
+        this.infos = res.data.reinfo;
+        // this.infos.content = api.decode(res.data.content)
+      });
+    },
+  },
+  mounted(){
+    this.getData()
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>
--- a/src/views/about/childs/index_2/index.scss
+++ b/src/views/about/childs/index_2/index.scss
@ -0,0 +1,120 @@
+.it-container{
+    .it-temp1{
+        height: 6.48rem;
+        padding-left: 2.3rem;
+        display: flex;
+        align-items: center;
+        position: relative;
+        img{
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top:0;
+            left: 0;
+            z-index: 0;
+        }
+        
+    }
+    .breadcrumb{
+        padding: .6rem 1.2rem .4rem 1.2rem;
+    }
+    
+    .it-temp2{
+        padding: 0rem 1.2rem 0rem 1.2rem;
+        // padding-top: .3rem;
+        position: relative;
+        z-index: 1;
+        .title-sub{
+            position: relative;
+            z-index: 1;
+            text-align: center;
+            font-size: .42rem;
+            font-weight: 500;
+            color: #001D2D;
+            line-height: .62rem;
+            margin-bottom: .6rem;
+            span{
+                display: inline-block;
+                width: .24rem;
+                height: .24rem;
+                position: relative;
+                top: -0.02rem;
+                &:first-child{
+                    background: #E1EAFD;
+                }
+                &:last-child{
+                    background: #ECF4E3;
+                }
+            }
+        }
+        .item{
+            display: flex;
+            padding: .3rem 0;
+            position: relative;
+            border-bottom: 1px solid #DFDFDF;
+            // margin-bottom: .3rem;
+            cursor: pointer;
+            .img{
+                flex: none;
+                width: 2.4rem;
+                height: 1.6rem;
+                img{
+                    width: 100%;
+                    height: 100%;
+                    object-fit:cover
+                }
+            }
+            .decs{
+                flex: auto;
+                padding-left: .2rem;
+                padding-right: 2.4rem;
+                .title{
+                    font-size: .28rem;
+                    font-weight: 400;
+                    color: #001D2D;
+                    line-height: .4rem;
+                    padding: .06rem .36rem;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    margin-top: .2rem;
+                    margin-bottom: .16rem;
+                }
+                .text{
+                    font-size: .18rem;
+                    font-weight: 400;
+                    color: #737373;
+                    line-height: .32rem;
+                    padding: 0 .36rem;
+                    overflow:hidden;
+                    text-overflow:ellipsis;
+                    display:-webkit-box;
+                    -webkit-box-orient:vertical;
+                    -webkit-line-clamp:2; // 2行
+                }
+            }
+            .time{
+                position: absolute;
+                right: 0;
+                bottom: .3rem;
+                font-size: .18rem;
+                
+                font-weight: 400;
+                color: #737373;
+            }
+            // padding-bottom: .2rem;
+            // margin-bottom: .42rem;
+            // &:hover{
+            //     box-shadow: 0px 10px 40px 0px rgba(0, 49, 75, 0.1);
+            // }
+            
+            
+        }
+        .page{
+            text-align: center;
+            padding: .48rem 0;
+            padding-bottom: .8rem;
+        }
+    }
+    
+}
--- a/src/views/about/childs/index_2/index.vue
+++ b/src/views/about/childs/index_2/index.vue
@ -0,0 +1,112 @@
+<template>
+    <div class="it-container">
+        <div class="it-temp1">
+            <img v-lazy="imgUrl.bg" />
+        </div>
+        <div class="breadcrumb">
+            <el-breadcrumb separator-class="el-icon-arrow-right">
+                <el-breadcrumb-item :to="{ path: '/about' }">关于护航</el-breadcrumb-item>
+                <el-breadcrumb-item>企业动态</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        
+        <div class="it-temp2">
+            <div class="title-sub">
+                <span></span>
+                企业动态
+                <span></span>
+            </div>
+            <div class="content">
+                <ul>
+                    <li class="item" v-for="item in infos" :key="item.ID" @click="link(item.ID)">
+                        <div class="img">
+                            <img class="bg" v-lazy="item.image" alt="">
+                            <!-- <el-image
+                                style="width: 2.4rem"
+                                :src="item.image"
+                                fit="scale-down"
+                            ></el-image> -->
+                        </div>
+                        <div class="decs">
+                            <div class="title">{{item.title}}</div>
+                            <div class="text">{{item.subtitle}}</div>
+                        </div>
+                        <div class="time">{{item.CreatedAt}}</div>
+                    </li>
+                </ul>
+                <!-- <el-row :gutter="42">
+                    <el-col :span="8" v-for="item in infos" :key="item.id">
+                        <div class="item" @click="link(item.id)">
+                            <img class="bg" v-lazy="item.image" alt="">
+                            <div class="title">{{item.title}}</div>
+                            <div class="text">{{item.content}}</div>
+                        </div>
+                    </el-col>
+                </el-row> -->
+            </div>
+            <div class="page">
+                <el-pagination 
+                background 
+                :current-page="currentPage"
+                :page-size="pageSize"
+                @current-change="handleCurrentChange"
+                layout="prev, pager, next" 
+                :total="total">
+                </el-pagination>
+            </div>
+            
+        </div>
+        
+    </div>
+</template>
+<script>
+import bg from '../../images/bg.png'
+import api from "../../../../http/api";
+import moment from "moment"
+export default {
+    components: { },
+    data(){
+        return {
+            imgUrl:{
+                bg: bg,
+            },
+            infos:[],
+            currentPage: 1,
+            pageSize: 15,
+            total: 0,
+        }
+    },
+    methods: {
+        getData(){
+            api.getTable('pubinfo/getInfoList', {
+                page: this.currentPage,
+                pageSize: this.pageSize
+            }).then((res) => {
+                // console.log(res)
+                this.infos = res.data.list
+                this.infos.forEach((val) => {
+                   val.CreatedAt =  moment(val.CreatedAt).format('YYYY-MM-DD')
+                })
+                this.total = res.data.total
+            })
+        },
+        handleCurrentChange(val){
+            this.currentPage = val
+            this.getData()
+        },
+        link(id){
+            this.$router.push({path:'/info_detial',query:{info_id: id}})
+            
+        },
+    },
+    created(){
+        this.getData()
+    }
+  
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss'
+
+</style>
--- a/src/views/about/childs/index_3/childs/join_info.vue
+++ b/src/views/about/childs/index_3/childs/join_info.vue
@ -0,0 +1,62 @@
+<template>
+  <div class="it-container">
+    <div class="it-temp1">
+      <img v-lazy="imgUrl.bg" />
+    </div>
+    <div class="breadcrumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/about' }"
+          >关于护航</el-breadcrumb-item
+        >
+        <el-breadcrumb-item :to="{ path: '/about_3' }">加入我们</el-breadcrumb-item>
+        <el-breadcrumb-item>职位详情</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <div class="it-temp2">
+      <div class="content-join" style="padding-bottom: 50px;">
+          <div class="title">{{info.postionTitle}}</div>
+          <div class="base">工作点：{{info.address}}</div>
+          <div v-html="info.content"></div>
+        
+          <div class="title" style="margin-top:10px;">投递简历</div>
+          <div>
+            {{homeData.describe}}
+          </div>
+      </div>
+      
+    </div>
+  </div>
+</template>
+<script>
+import bg from "../../../images/bg.png";
+import api from "../../../../../http/api";
+export default {
+  components: {},
+  data() {
+    return {
+      imgUrl: {
+        bg: bg,
+      },
+      info:{},
+      homeData: JSON.parse(JSON.parse(window.localStorage.homeData))
+    };
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    
+    getData(type) {
+      // api.dataInfo('boss', this.$route.query.join_id).then((res) => {
+            this.info = JSON.parse(window.localStorage.join) //res.data
+        //  })
+    },
+    
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../index.scss";
+</style>
--- a/src/views/about/childs/index_3/index.scss
+++ b/src/views/about/childs/index_3/index.scss
@ -0,0 +1,120 @@
+.it-container{
+    .it-temp1{
+        height: 6.48rem;
+        padding-left: 2.3rem;
+        display: flex;
+        align-items: center;
+        position: relative;
+        img{
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top:0;
+            left: 0;
+            z-index: 0;
+        }
+        
+    }
+    .breadcrumb{
+        padding: .6rem 1.2rem .2rem 1.2rem;
+    }
+    
+    .it-temp2{
+        padding: .3rem 1.2rem 0rem 1.2rem;
+        // padding-top: .3rem;
+        position: relative;
+        z-index: 1;
+        .content{
+            // padding: 0 3.8rem;
+            .title{
+                display: inline-block;
+                font-size: .28rem;
+                
+                font-weight: 400;
+                color: #001D2D;
+                line-height: .32rem;
+                letter-spacing: .01rem;
+                text-align: center;
+                cursor: pointer;
+                img{
+                    width: .68rem;
+                }
+            }
+            
+        }
+        .from{
+            margin-top: .4rem;
+            margin-bottom: .4rem;
+            display: flex;
+            .input{
+                flex: auto;
+                padding-right: .16rem;
+            }
+            .button{
+                flex: none;
+                width: 1.98rem;
+                height: 40px;
+                background: #001D2D;
+                border-radius: 4px;
+                text-align: center;
+                line-height: 40px;
+                font-size: 14px;
+                
+                font-weight: 400;
+                color: #FFFFFF;
+                cursor: pointer;
+            }
+        }
+        .select{
+            margin-bottom: .6rem;
+            
+        }
+        .table-container {
+            padding-bottom: .8rem;
+            .operation {
+                .edit {
+                    color: #409eff;
+                }
+                .delete {
+                    color: #f56c6c;
+                }
+            }
+            .pagination {
+                margin-top: .4rem;
+                text-align: center;
+                .size-box {
+                    // float: right;
+                }
+                .span {
+                    font-size: .13rem;
+                    color: #606266;
+                    line-height: .32rem;
+                }
+            }
+        }
+        .content-join{
+            min-height: 6rem;
+            // width: 1000px;
+            // margin: auto;
+            .title{
+                font-size: .24rem;
+                font-weight: bold;
+                line-height: .6rem;
+            }
+            .base{
+                font-size: .18rem;
+                margin-bottom: .4rem;
+            }
+        }
+    }
+    
+}
+
+// .amap-marker-content img{
+//     width: 25px;
+//     height: 34px;
+// }
+.ready{
+    cursor: pointer;
+    color: #409EFF;
+}
--- a/src/views/about/childs/index_3/index.vue
+++ b/src/views/about/childs/index_3/index.vue
@ -0,0 +1,275 @@
+<template>
+  <div class="it-container">
+    <div class="it-temp1">
+      <img v-lazy="imgUrl.bg" />
+    </div>
+    <div class="breadcrumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/about' }"
+          >关于护航</el-breadcrumb-item
+        >
+        <el-breadcrumb-item>加入我们</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <div class="it-temp2">
+      <div class="content">
+        <el-row :gutter="88">
+          <el-col :span="12" style="text-align: right">
+            <div class="title" @click="change(0)">
+              社会招聘<br />
+              <img
+                v-show="index == 0"
+                src="../../../../assets/image/icon_r.png"
+              />
+            </div>
+          </el-col>
+          <el-col :span="12" style="text-align: left">
+            <div class="title" @click="change(1)">
+              校园招聘<br />
+              <img
+                v-show="index == 1"
+                src="../../../../assets/image/icon_r.png"
+              />
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="from">
+        <div class="input">
+          <el-input
+            v-model="base_title"
+            style="height: 0.6rem"
+            placeholder="输入职位关键词"
+          />
+        </div>
+        <div class="button" @click="sousuo">搜索职位</div>
+      </div>
+      <div class="select">
+        <el-select
+          v-model="value"
+          placeholder="工作地点"
+          style="margin-right: 0.2rem"
+          @change="sousuo"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.address"
+            :label="item.address"
+            :value="item.address"
+            class="myOption"
+          >
+          </el-option>
+        </el-select>
+        <el-select v-model="value2" placeholder="职位类别" @change="sousuo">
+          <el-option
+            v-for="(item, index) in options2"
+            :key="index"
+            :label="item.postion"
+            :value="item.postion"
+            class="myOption"
+          >
+          </el-option>
+        </el-select>
+        <el-button style="margin-left: 15px;" @click="resft">重置</el-button>
+      </div>
+      <div class="table-container" v-show="index == 0">
+        <el-table :data="tableData" style="width: 100%">
+          <el-table-column prop="postionTitle" label="职位名称" />
+          <el-table-column prop="postion" label="职位类别" align="center" />
+          <el-table-column prop="address" label="工作地点" align="center" />
+          <el-table-column align="right" >
+            <template slot-scope="scope">
+              <span class="ready" @click="readyInfo(scope.row)"> 查看</span>
+            </template>
+            
+          </el-table-column>
+        </el-table>
+        <div class="pagination">
+          <el-pagination
+            background
+            :current-page="currentPage"
+            @current-change="handleCurrentChange"
+            layout="prev, pager, next"
+            :total="total"
+          >
+          </el-pagination>
+        </div>
+      </div>
+      <div class="table-container" v-show="index == 1">
+        <el-table :data="tableData2" style="width: 100%">
+          <el-table-column prop="postionTitle" label="职位名称" />
+          <el-table-column prop="postion" label="职位类别" align="center" />
+          <el-table-column prop="address" label="工作地点" align="center" />
+          <el-table-column align="right" >
+            <template slot-scope="scope">
+              <span class="ready" @click="readyInfo(scope.row)"> 查看</span>
+            </template>
+            
+          </el-table-column>
+        </el-table>
+        <div class="pagination">
+          <el-pagination
+            background
+            :current-page="currentPage2"
+            @current-change="handleCurrentChange2"
+            layout="prev, pager, next"
+            :total="total2"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import bg from "../../images/bg.png";
+import api from "../../../../http/api";
+export default {
+  components: {},
+  data() {
+    return {
+      imgUrl: {
+        bg: bg,
+      },
+      infos: [],
+      currentPage: 1,
+      pageSize: 15,
+      total: 0,
+      currentPage2: 1,
+      pageSize2: 15,
+      total2: 0,
+      index: 0,
+      options: [
+        {
+          value: 1,
+          label: "北京",
+        },
+        {
+          value: 2,
+          label: "上海",
+        },
+        {
+          value: 3,
+          label: "深圳",
+        },
+        {
+          value: 4,
+          label: "成都",
+        },
+        {
+          value: 5,
+          label: "武汉",
+        },
+        {
+          value: 6,
+          label: "厦门",
+        },
+      ],
+      value: "",
+      options2: [
+        {
+          value: 1,
+          label: "市场类",
+        },
+      ],
+      value2: "",
+      tableData: [
+        
+      ],
+      tableData2: [],
+      input: "",
+      base_title:''
+    };
+  },
+  mounted() {
+    this.getData(0);
+    this.getData2(1);
+    this.getBtags()
+  },
+  methods: {
+    resft(){
+      this.value = ''
+      this.value2 = ''
+      this.base_title = ''
+      this.getData(0);
+      this.getData2(1);
+    },
+    getBtags(){
+      api.getBtags().then((res)=>{
+        this.options = res.data.rejoin.boss;
+        this.options2 = res.data.rejoin.boss_type;
+      })
+    },
+    sousuo() {
+      if (this.index == 0) {
+        this.getData(0);
+      } else {
+        this.getData2(1);
+      }
+    },
+    getData(type) {
+      api
+        .getTable("pubjoin/getJoinList", {
+          page: this.currentPage,
+          pageSize: this.pageSize,
+          joinType: type,
+          address: this.value,
+          postion: this.value2,
+          postion_title: this.base_title
+        })
+        .then((res) => {
+          console.log(res);
+          this.tableData = res.data.list;
+          this.total = res.data.total;
+        });
+    },
+    getData2(type) {
+      api
+        .getTable("pubjoin/getJoinList", {
+          page: this.currentPage,
+          pageSize: this.pageSize,
+          joinType: type,
+          address: this.value,
+          postion: this.value2,
+          postion_title: this.base_title
+        })
+        .then((res) => {
+          console.log(res);
+
+          this.tableData2 = res.data.list;
+          this.total2 = res.data.total;
+        });
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.getData();
+    },
+    handleCurrentChange2(val) {
+      this.currentPage2 = val;
+      this.getData2();
+    },
+    link(id) {
+      console.log(id);
+      this.$router.push({ path: "/info_detial", query: { info_id: id } });
+    },
+    change(index) {
+      this.index = index;
+    },
+    readyInfo(row){
+      window.localStorage.join = JSON.stringify(row)
+      this.$router.push({
+        path:'./join_info',
+        query: {
+          join_id: row.id
+        }
+      })
+      
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>
--- a/src/views/about/childs/index_4/index.scss
+++ b/src/views/about/childs/index_4/index.scss
@ -0,0 +1,75 @@
+.it-container{
+    .it-temp1{
+        height: 6.48rem;
+        padding-left: 2.3rem;
+        display: flex;
+        align-items: center;
+        position: relative;
+        img{
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top:0;
+            left: 0;
+            z-index: 0;
+        }
+        
+    }
+    .breadcrumb{
+        padding: .6rem 1.2rem .2rem 1.2rem;
+    }
+    
+    .it-temp2{
+        padding: .3rem 1.2rem 0rem 1.2rem;
+        // padding-top: .3rem;
+        position: relative;
+        z-index: 1;
+        .content{
+            padding: 0 1.8rem;
+            text-align: center;
+            .title{
+                display: inline-block;
+                font-size: .28rem;
+                
+                font-weight: 400;
+                color: #001D2D;
+                height: .32rem;
+                line-height: .32rem;
+                letter-spacing: .01rem;
+                text-align: center;
+                cursor: pointer;
+                margin: 0 .3rem;
+                margin-bottom: .4rem;
+                position: relative;
+                img{
+                    position: absolute;
+                    bottom: -.2rem;
+                    width: .68rem;
+                    left: 50%;
+                    margin-left: -.34rem;
+                }
+            }
+            
+        }
+        .contact-us{
+            margin-top: .3rem;
+            .title{
+                font-size: .30rem;
+                
+                font-weight: 400;
+                color: #737373;
+                line-height: .52rem;
+                
+            }
+            .map{
+                padding: .3rem 0 1rem 0; 
+            }
+        }
+    }
+    
+}
+
+// .amap-marker-content img{
+//     width: 25px;
+//     height: 34px;
+// }
--- a/src/views/about/childs/index_4/index.vue
+++ b/src/views/about/childs/index_4/index.vue
@ -0,0 +1,234 @@
+<template>
+  <div class="it-container">
+    <div class="it-temp1">
+      <img v-lazy="imgUrl.bg" />
+    </div>
+    <div class="breadcrumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/about' }"
+          >关于护航</el-breadcrumb-item
+        >
+        <el-breadcrumb-item>联系我们</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <div class="it-temp2">
+      <div class="content">
+        <!-- <el-row>
+          <el-col :span="4" v-for="(item, index) in address" :key="index"> -->
+        <div
+          class="title"
+          v-for="(item, index) in address"
+          :key="index"
+          @click="change(index)"
+        >
+          {{ item.ctiy }}<br />
+          <img
+            v-show="addIndex == index"
+            src="../../../../assets/image/icon_r.png"
+          />
+        </div>
+        <!-- </el-col> -->
+        <!-- <el-col :span="4">
+            <div class="title" @click="change(1)">
+              上海<br />
+              <img
+                v-show="index == 1"
+                src="../../../../assets/image/icon_r.png"
+              />
+            </div>
+          </el-col>
+          <el-col :span="4">
+            <div class="title" @click="change(2)">
+              深圳<br />
+              <img
+                v-show="index == 2"
+                src="../../../../assets/image/icon_r.png"
+              />
+            </div>
+          </el-col>
+          <el-col :span="4">
+            <div class="title" @click="change(3)">
+              成都<br />
+              <img
+                v-show="index == 3"
+                src="../../../../assets/image/icon_r.png"
+              />
+            </div>
+          </el-col>
+          <el-col :span="4">
+            <div class="title" @click="change(4)">
+              武汉<br />
+              <img
+                v-show="index == 4"
+                src="../../../../assets/image/icon_r.png"
+              />
+            </div>
+          </el-col>
+          <el-col :span="4">
+            <div class="title" @click="change(5)">
+              厦门<br />
+              <img
+                v-show="index == 5"
+                src="../../../../assets/image/icon_r.png"
+              />
+            </div>
+          </el-col> -->
+        <!-- </el-row> -->
+      </div>
+      <div class="contact-us">
+        <div
+          class="title"
+          v-show="addIndex == index"
+          v-for="(item, index) in address"
+          :key="index"
+          
+        >
+          地址： {{ item.text }}
+          <!-- 地址： 北京市海淀区知春路甲 48 号 1-4 号楼 3 号楼 15 层 3 单元
+          18D-05 -->
+          <br />
+          电话： {{ item.phone }}
+          <!-- 电话： 010-53276166 -->
+        </div>
+        <!-- <div class="title" v-show="index == 1">
+          地址： 上海市徐汇区钦州路 201 号 543号<br />
+          电话： 021-34680659
+        </div>
+        <div class="title" v-show="index == 2">
+          地址： 深圳市南山区粤海街道海珠社区海德三道 5 号海岸城东座 1402AR20<br />
+          电话： 0755-86560376
+        </div>
+        <div class="title" v-show="index == 3">
+          地址： 中国（四川）自由贸易试验区成都高新区交子大道 88 号 A 座 4 层
+          407 室<br />
+          电话： /
+        </div>
+        <div class="title" v-show="index == 4">
+          地址： 武汉东湖新技术开发区关山大道 332 号保利国际中心 7-8 层 726<br />
+          电话： 027-87456007
+        </div>
+        <div class="title" v-show="index == 5">
+          地址： 厦门市集美区杏林南路 33 号六楼 631 室<br />
+          电话： 0592-5135893
+        </div> -->
+        <div class="map">
+          
+          <div
+            v-for="(item, index) in address"
+            :key="index"
+             v-show="addIndex == index"
+           style="width: 100%;height: 500px;"
+          >
+            <!-- <amap
+              
+              :cache-key="'home-map' + index"
+              map-style="amap://styles/whitesmoke"
+              :zoom="15"
+              :center="item.coordinate"
+              style="height: 400px; width: 100%"
+            >
+              <amap-marker :position="item.coordinate" />
+            </amap> -->
+            <!-- <el-amap class="amap-box" :vid="item.coordinate"></el-amap> -->
+                <el-amap :vid="'amap' + index" class="amap" :zoom="12" :center="item.coordinate" :plugin="plugin">
+                  <el-amap-marker :vid="'component-marker'+ index" :position="item.coordinate" />
+                </el-amap>
+
+          </div>
+
+          <!-- <amap
+           v-show="index == 1"
+            cache-key="home-map1"
+            map-style="amap://styles/whitesmoke"
+            :zoom="15"
+            :center="[121.429328,31.163949]"
+            style="height: 400px; width: 100%"
+          >
+            <amap-marker :position="[121.429328,31.163949]" />
+          </amap>
+          <amap
+           v-show="index == 2"
+            cache-key="home-map2"
+            map-style="amap://styles/whitesmoke"
+            :zoom="15"
+            :center="[113.936545,22.51833]"
+            style="height: 400px; width: 100%"
+          >
+            <amap-marker :position="[113.936545,22.51833]" />
+          </amap>
+          <amap
+           v-show="index == 3"
+            cache-key="home-map3"
+            map-style="amap://styles/whitesmoke"
+            :zoom="15"
+            :center="[104.05208,30.583467]"
+            style="height: 400px; width: 100%"
+          >
+            <amap-marker :position="[104.05208,30.583467]" />
+          </amap>
+          <amap
+           v-show="index == 4"
+            cache-key="home-map4"
+            map-style="amap://styles/whitesmoke"
+            :zoom="15"
+            :center="[114.409082,30.490973]"
+            style="height: 400px; width: 100%"
+          >
+            <amap-marker :position="[114.409082,30.490973]" />
+          </amap>
+          <amap
+           v-show="index == 5"
+            cache-key="home-map5"
+            map-style="amap://styles/whitesmoke"
+            :zoom="15"
+            :center="[118.040108,24.561328]"
+            style="height: 400px; width: 100%"
+          >
+            <amap-marker :position="[118.040108,24.561328]" />
+            <amap-traffic-layer />
+          </amap> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import bg from "../../images/bg.png";
+import api from "../../../../http/api";
+export default {
+  components: {},
+  data() {
+    return {
+      imgUrl: {
+        bg: bg,
+      },
+      addIndex: 0,
+      address: JSON.parse(JSON.parse(window.localStorage.homeData)).address,
+      plugin: [                          // 这里放扩展的插件
+        {        
+          pName: 'Scale',                // 比例尺
+          events: {
+            init(instance) {
+               console.log(instance);
+            }
+          }
+        },
+      ]
+
+    };
+  },
+  methods: {
+    change(index) {
+      this.addIndex = index;
+    },
+  },
+  mounted() {
+    // getData()
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>
--- a/src/views/about/images/bg.png
+++ b/src/views/about/images/bg.png
--- a/src/views/about/images/icon1.png
+++ b/src/views/about/images/icon1.png
--- a/src/views/about/images/icon2.png
+++ b/src/views/about/images/icon2.png
--- a/src/views/about/images/icon3.png
+++ b/src/views/about/images/icon3.png
--- a/src/views/about/images/img1.png
+++ b/src/views/about/images/img1.png
--- a/src/views/about/images/img11.png
+++ b/src/views/about/images/img11.png
--- a/src/views/about/images/img2.png
+++ b/src/views/about/images/img2.png
--- a/src/views/about/images/img3.png
+++ b/src/views/about/images/img3.png
--- a/src/views/about/images/img4.png
+++ b/src/views/about/images/img4.png
--- a/src/views/about/images/img5.png
+++ b/src/views/about/images/img5.png
--- a/src/views/about/images/img6.png
+++ b/src/views/about/images/img6.png
--- a/src/views/apply/apply.scss
+++ b/src/views/apply/apply.scss
@ -0,0 +1,250 @@
+.it-container{
+    .title-sub{
+        text-align: center;
+        font-size: .42rem;
+        
+        font-weight: 500;
+        color: #001D2D;
+        line-height: .62rem;
+        margin-bottom: .68rem;
+        span{
+            display: inline-block;
+            width: .24rem;
+            height: .24rem;
+            position: relative;
+            top: -0.02rem;
+            &:first-child{
+                background: #E1EAFD;
+            }
+            &:last-child{
+                background: #ECF4E3;
+            }
+        }
+    }
+    .it-temp1{
+        // height: 7.88rem;
+        // display: flex;
+        // align-items: center;
+        // justify-content: center;
+        // text-align: center;
+        position: relative;
+        // z-index: 1;
+        img{
+            // position: absolute;
+            width: 100%;
+            height: 100%;
+            // top:0;
+            // left: 0;
+            // z-index: 0;
+            position: relative;
+            z-index: 0;
+        }
+        .title{
+            font-size: .6rem;
+            font-weight: 500;
+            color: #EFEFEF;
+            line-height: .89rem;
+            position: absolute;
+            z-index: 1;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+        // .sub-title{
+        //     font-size: .18rem;
+        //     font-weight: 500;
+        //     color: #EFEFEF;
+        //     line-height: .62rem;
+        // }
+    }
+    .it-temp2{
+        padding: .5rem 1.2rem 0rem 1.2rem;
+        position: relative;
+        z-index: 1;
+        .text-sub{
+            font-size: .18rem;
+            
+            font-weight: 400;
+            color: #737373;
+            line-height: .24rem;
+            text-align: center;
+            margin-bottom: 1.5rem;
+        }
+        .bg-img{
+            position: absolute;
+            width: 8.48rem;
+            height: auto;
+            top: 0;
+            right: 0;
+        }
+        .bg-img2{
+            position: absolute;
+            width: 7.14rem;
+            left: 0;
+            top: 11rem;
+        }
+        .title-sub{
+            text-align: center;
+            font-size: .42rem;
+            
+            font-weight: 500;
+            color: #001D2D;
+            line-height: .62rem;
+            margin-bottom: .6rem;
+            span{
+                display: inline-block;
+                width: .24rem;
+                height: .24rem;
+                position: relative;
+                top: -0.02rem;
+                &:first-child{
+                    background: #E1EAFD;
+                }
+                &:last-child{
+                    background: #ECF4E3;
+                }
+            }
+        }
+        
+        .content-list{
+            margin-bottom: 1rem;
+            img{
+                width: 100%;
+                // height: 2.4rem;
+                cursor: pointer;
+            }
+        }
+        .content-item{
+            position: relative;
+            padding-left:.66rem;
+            display: flex;
+            align-items: center;
+            height: 100%;
+            cursor: pointer;
+            .box{
+                position: relative;
+                .logo{
+                    position: absolute;
+                    right: .8rem;
+                    top: -.15rem;
+                    width: 1.6rem;
+                }
+            }
+            .setp{
+                position: absolute;
+                right: .2rem;
+                width: .24rem;
+                height: 100%;
+                span{
+                    display: block;
+                    width: .24rem;
+                    height: .24rem;
+                    margin-bottom: .12rem;
+                    &:first-child{
+                        background-color: #008CD5;
+                    }
+                    &:last-child{
+                        background-color: #ECF4E3;
+                    }
+                }
+            }
+            .num{
+                position: absolute;
+                top: -.66rem;
+                left: -.64rem;
+                font-size: .72rem;
+                
+                font-weight: 500;
+                color: #001D2D;
+                opacity: .06;
+            }
+            .title{
+                font-size: .36rem;
+                
+                font-weight: 400;
+                color: #001D2D;
+                line-height: .24rem;
+                letter-spacing: .01rem;
+                margin-bottom: .5rem;
+            }
+            .sub-title{
+                font-size: .2rem;
+                
+                font-weight: 400;
+                color: #737373;
+                line-height: .32rem;
+                width: 80%;
+                text-align: justify;
+            }
+        }
+        .content-item2{
+            padding-left: 1.8rem;
+            .box{
+                .logo{
+                    right: .7rem;
+                }
+            }
+            .setp{
+                position: absolute;
+                left: .2rem;
+                right: auto;
+                span{
+                    display: block;
+                    width: .24rem;
+                    height: .24rem;
+                    margin-bottom: .12rem;
+                    &:first-child{
+                        background-color: #6EB92C;
+                    }
+                    &:last-child{
+                        background-color: #E1EAFD;
+                    }
+                }
+            }
+            .num{
+                left: -.6rem;
+            }
+        }
+        .apply-list{
+            display: flex;
+            border: 1px solid #DFDFDF;
+            position: relative;
+            margin-bottom: .8rem;
+            .icon{
+                position: absolute;
+                right: 0;
+                top: 0;
+                width: 1.66rem;
+            }
+            .logo{
+                flex:none;
+                width: 3.8rem;
+                height: 1.5rem;
+                img{
+                    width: 100%;
+                    height: 100%;
+                    display: block;
+                    object-fit: cover;
+                }
+            }
+            .apply-resc{
+                flex: auto;
+                padding: .26rem .3rem 0 .3rem;
+                .title{
+                    font-size: .24rem;
+                    
+                    font-weight: bold;
+                    color: #001D2D;
+                    margin-bottom: .06rem;
+                }
+                .text{
+                    font-size: .18rem;
+                    
+                    font-weight: 400;
+                    color: #737373;
+                    line-height: .24rem;
+                }
+            }
+        }
+    }
+}
--- a/src/views/apply/apply.vue
+++ b/src/views/apply/apply.vue
@ -0,0 +1,235 @@
+<template>
+  <div class="it-container">
+    <div class="it-temp1">
+      <img v-lazy="homeData.bannerList[3].image" />
+      <!-- <div class="title">应用案例</div> -->
+      <!-- <div class="sub-title">以“专业的 IT 服务管理体系”为核心，并利用高效的人工智能技术和自动化运维工具不断的追求 IT 场景的稳定性、安全性、可靠性。帮助行业及企业用户把信息技术应用转化为业务的驱动力，充分挖掘信息技术的能量，获得竞争的优势。</div> -->
+    </div>
+    <div class="it-temp2">
+      <div class="title-sub">
+        <span></span>
+        优质客户
+        <span></span>
+      </div>
+      <el-row class="content-list">
+        <el-col :span="12">
+          <img v-lazy="homeData.customer[0].image" @click="goLink('/app1')" />
+        </el-col>
+        <el-col :span="12">
+          <div class="content-item content-item2" @click="goLink('/app1')">
+            <div class="setp"><span></span><span></span></div>
+            <div class="box">
+              <span class="num">01</span>
+              <div class="title">{{homeData.customer[0].title}}</div>
+              <!-- <img class="logo" :src="homeData.customer[0].logo"> -->
+              <div class="sub-title">
+                {{homeData.customer[0].content}}
+                <!-- 根据我们企业的IT现状及业务模式，护航科技在IT基础架构的运营维护中建立起标准化终端的IT服务管理、项目实施、流程制定、服务管理外包实施。 -->
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row class="content-list">
+        <el-col :span="12">
+          <div class="content-item" @click="goLink('/app2')">
+            <div class="setp"><span></span><span></span></div>
+            <div class="box">
+              <span class="num">02</span>
+              <div class="title">{{homeData.customer[1].title}}</div>
+              <!-- <img class="logo" :src="homeData.customer[1].logo"> -->
+              <div class="sub-title">
+                {{homeData.customer[1].content}}
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <img v-lazy="homeData.customer[1].image" @click="goLink('/app2')" />
+        </el-col>
+      </el-row>
+      <el-row class="content-list">
+        <el-col :span="12">
+          <img v-lazy="homeData.customer[2].image" @click="goLink('/app3')" />
+        </el-col>
+        <el-col :span="12">
+          <div class="content-item content-item2" @click="goLink('/app3')">
+            <div class="setp"><span></span><span></span></div>
+            <div class="box">
+              <span class="num">03</span>
+              <div class="title">{{homeData.customer[2].title}}</div>
+              <!-- <img class="logo" :src="homeData.customer[2].logo"> -->
+              <div class="sub-title">
+                {{homeData.customer[2].content}}
+                <!-- 经过多年的快速发展，ABB迄今在中国已拥有27家本地企业、在60个主要城市设有销售与服务分公司和1.5万名员工，并且业务涵盖研发、生产、销售、服务等多个维度。
+                护航科技帮助我们实现IT服务从过去的分布式管理完全转变到更为先进高效的集中式管理模式。 -->
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row class="content-list">
+        <el-col :span="12">
+          <div class="content-item" @click="goLink('/app4')">
+            <div class="setp"><span></span><span></span></div>
+            <div class="box">
+              <span class="num">04</span>
+              <div class="title">{{homeData.customer[3].title}}</div>
+              <!-- <img class="logo" :src="homeData.customer[3].logo"> -->
+              <div class="sub-title">
+                {{homeData.customer[3].content}}
+                <!-- 护航科技有效保障了我们集团桌面环境的稳定，并且克服了信息部门一线人员的瓶颈问题，整合了信息资源，优化了IT系统架构。我们能够及时解决信息系统的运行故障，保障了信息系统安全、可靠、搞笑的运行，降低了财政信息化建设、运营的成本和风险 -->
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <img v-lazy="homeData.customer[3].image" @click="goLink('/app4')" />
+        </el-col>
+      </el-row>
+
+      <div class="apply-list" v-for="item in tableData" :key="item.id">
+        <!-- <img v-lazy="item.logo" class="icon" alt="" /> -->
+        <div class="logo">
+          <img v-lazy="item.image" alt="" />
+        </div>
+        <div class="apply-resc">
+          <div class="title">{{item.title}}</div>
+          <div class="text">
+            {{item.content}}
+            <!-- 护航为今日头条提供了桌面运维服务，主要以全国驻场支持的方式为今日头条提供IT支持服务。头条的发展之快是对护航最大的挑战，护航利用完善的人员管控体系保障了头条全国分支机构IT的稳定运行，现驻场团队已达到220余人，支持全国25个城市。 -->
+          </div>
+        </div>
+      </div>
+      <!-- <div class="apply-list">
+        <img v-lazy="imgUrl.icon2" class="icon" alt="" />
+        <div class="logo">
+          <img v-lazy="imgUrl.img6" alt="" />
+        </div>
+        <div class="apply-resc">
+          <div class="title">诺华制药</div>
+          <div class="text">
+            诺华（Novartis），即全球医药健康行业的跨国企业，是世界三大药企之一,总部设在瑞士，业务遍及全球150多个国家和地
+            区。诺华中国总部于1997年成立，全国建有三大生产基地和两大研发中心，近10000人规模。
+          </div>
+        </div>
+      </div>
+      <div class="apply-list">
+        <img v-lazy="imgUrl.icon3" class="icon" alt="" />
+        <div class="logo">
+          <img v-lazy="imgUrl.img7" alt="" />
+        </div>
+        <div class="apply-resc">
+          <div class="title">中车株洲研究所</div>
+          <div class="text">
+            该企业始创于 1959
+            年，经多年发展，已形成轨道交通装备、新材料、新能源三大产业板块、七大业务主体。现有员工10000
+            余人、资产总额超过 100 亿元，年销售收入超过 100 亿元。
+          </div>
+        </div>
+      </div>
+      <div class="apply-list">
+        <img v-lazy="imgUrl.icon4" class="icon" alt="" />
+        <div class="logo">
+          <img v-lazy="imgUrl.img8" alt="" />
+        </div>
+        <div class="apply-resc">
+          <div class="title">中粮集团</div>
+          <div class="text">
+            该企业成立于 1949
+            年，经过多年的努力，从最初的粮油食品贸易公司发展成为中国领先的农产品、食品领域多元化产品和服务供应商，致力打造从田间到餐桌的全产业链粮油食品企业，建设全服务链的城市综合体，利用不断再生的自然资源为人类提供营养健康的食品、高品质的生活空间及生活服务，贡献于民众生活的富足和社会的繁荣稳定。
+          </div>
+        </div>
+      </div>
+      <div class="apply-list">
+        <img v-lazy="imgUrl.icon5" class="icon" alt="" />
+        <div class="logo">
+          <img v-lazy="imgUrl.img9" alt="" />
+        </div>
+        <div class="apply-resc">
+          <div class="title">中信建投</div>
+          <div class="text">
+            护航科技为中信建投提供应用系统和服务器网络设备监控、证券电子商务平台服务支持、服务器运维、IDC站点运维等标准化常规支持服务。在充分了解客户现场系统运行情况和证券行业终端用户要求不断提升的情况下，为中信建投提供了运维质量管理体系建设服务，以全面提升系统运维的稳定性
+          </div>
+        </div>
+      </div> -->
+    </div>
+
+    <Form />
+  </div>
+</template>
+<script>
+import Form from "../../components/Form.vue";
+// 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 img7 from "./images/img7.png";
+// import img8 from "./images/img8.png";
+// import img9 from "./images/img9.png";
+// import icon1 from "./images/icon1.png";
+// import icon2 from "./images/icon2.png";
+// import icon3 from "./images/icon3.png";
+// import icon4 from "./images/icon4.png";
+// import icon5 from "./images/icon5.png";
+import api from '../../http/api'
+export default {
+  components: { Form },
+  data() {
+    return {
+      imgUrl: {
+        // bg: bg,
+        // img1: img1,
+        // img2: img2,
+        // img3: img3,
+        // img4: img4,
+        // img5: img5,
+        // img6: img6,
+        // img7: img7,
+        // img8: img8,
+        // img9: img9,
+        // icon1: icon1,
+        // icon2: icon2,
+        // icon3: icon3,
+        // icon4: icon4,
+        // icon5: icon5,
+      },
+      tableData:[],
+      homeData: JSON.parse(JSON.parse(window.localStorage.homeData))
+      // homeData:{bannerList:[]}
+    }
+  },
+  methods: {
+    goLink(path) {
+      this.$router.push(path);
+    },
+    getData() {
+         api.getTable('pubcases/getCasesList', {
+            page: 1,
+            pageSize: 20
+         }).then((res) => {
+            console.log(res)
+            this.tableData = res.data.list
+         })
+      },
+    //   getHomeData() {
+    //   api.getHome().then((res) => {
+    //     if (res.data.customer) {
+    //       this.homeData = res.data;
+         
+    //     }
+    //   });
+    // },
+  },
+  mounted(){
+    this.getData()
+    // this.getHomeData()
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "./apply.scss";
+</style>
--- a/src/views/apply/childs/index_1/images/bg.png
+++ b/src/views/apply/childs/index_1/images/bg.png
--- a/src/views/apply/childs/index_1/images/img1.png
+++ b/src/views/apply/childs/index_1/images/img1.png
--- a/src/views/apply/childs/index_1/images/img2.png
+++ b/src/views/apply/childs/index_1/images/img2.png
--- a/src/views/apply/childs/index_1/images/img3.png
+++ b/src/views/apply/childs/index_1/images/img3.png
--- a/src/views/apply/childs/index_1/images/img4.png
+++ b/src/views/apply/childs/index_1/images/img4.png
--- a/src/views/apply/childs/index_1/index.scss
+++ b/src/views/apply/childs/index_1/index.scss
@ -0,0 +1,467 @@
+.it-container {
+    .it-temp1 {
+        height: 6.48rem;
+        // padding-left: 2.3rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        img {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            z-index: 0;
+        }
+        .title {
+            font-size: 0.6rem;
+            
+            font-weight: 500;
+            color: #ffffff;
+            background-color: rgba(0, 39, 59, 0.2);
+            height: 0.88rem;
+            line-height: 0.88rem;
+            border-radius: 0.26rem;
+            // padding: 0 0.24rem;
+            position: relative;
+            z-index: 1;
+            width: 6.48rem;
+            text-align: center;
+        }
+    }
+    .breadcrumb {
+        padding: 0.6rem 1.2rem 0.4rem 1.2rem;
+    }
+
+    .it-temp2 {
+        padding: 0rem 1.2rem 0rem 1.2rem;
+        // padding-top: .3rem;
+        position: relative;
+        z-index: 1;
+        .temp2-text {
+            font-size: 0.18rem;
+            
+            font-weight: 400;
+            color: #737373;
+            line-height: 0.24rem;
+            margin-bottom: 0.3rem;
+        }
+        img {
+            display: block;
+            width: 9.65rem;
+            margin: auto;
+        }
+    }
+    .it-temp3 {
+        padding: 0.6rem 1.2rem 0rem 1.2rem;
+        position: relative;
+
+        .title-sub {
+            position: relative;
+            z-index: 1;
+            text-align: center;
+            font-size: 0.42rem;
+            
+            font-weight: 500;
+            color: #001d2d;
+            line-height: 0.62rem;
+            margin-bottom: 0.8rem;
+            span {
+                display: inline-block;
+                width: 0.24rem;
+                height: 0.24rem;
+                position: relative;
+                top: -0.02rem;
+                &:first-child {
+                    background: #e1eafd;
+                }
+                &:last-child {
+                    background: #ecf4e3;
+                }
+            }
+            .text {
+                font-size: 0.18rem;
+                
+                font-weight: 400;
+                color: #737373;
+            }
+        }
+        .pro-flex {
+            .item {
+                margin-bottom: 0.4rem;
+                .content {
+                    line-height: 0.32rem;
+                    // text-align: center;
+                    position: relative;
+                    // padding-top: .5rem;
+                    div {
+                        // position: absolute;
+                        width: 100%;
+                        left: 0;
+                        top: 0;
+                        // text-align: center;
+                        font-size: 1.4rem;
+                        
+                        font-weight: bold;
+                        color: #eef2fb;
+                        z-index: 0;
+                        span {
+                            position: relative;
+                            top: -0.2rem;
+                            width: 1rem;
+                            height: 1rem;
+                            border-radius: 0.5rem;
+                            display: inline-flex;
+                            // line-height: 1rem;
+                            text-align: center;
+                            justify-content: center;
+                            align-items: center;
+                            img {
+                                width: 0.6rem;
+                                height: 0.6rem;
+                                display: block;
+                            }
+                        }
+                    }
+                    & > span {
+                        position: relative;
+                        z-index: 1;
+                        font-size: 0.18rem;
+                        
+                        font-weight: 500;
+                        color: #001d2d;
+                        text-align: left;
+                        // padding-left: 1.3rem;
+                        // padding-right: .6rem;
+                        display: block;
+                        top: -0.3rem;
+                        line-height: 0.32rem;
+                    }
+                    .icon {
+                        color: #e1eafd;
+                        span {
+                            background-color: #e1eafd;
+                        }
+                    }
+                    .icon2 {
+                        color: #ecf4e3;
+                        span {
+                            background-color: #ecf4e3;
+                        }
+                    }
+                    .icon3 {
+                        color: #e1eafd;
+                        span {
+                            background-color: #e1eafd;
+                        }
+                    }
+                    .title {
+                        margin-top: -.2rem;
+                        font-size: 0.24rem;
+                        
+                        font-weight: 500;
+                        color: #001d2d;
+                        margin-bottom: .2rem;
+                        margin-left: .3rem;
+                    }
+                    .text {
+                        font-size: .18rem;
+                        
+                        font-weight: 400;
+                        color: #737373;
+                        line-height: .32rem;
+                        margin-left: .3rem;
+                    }
+                }
+            }
+            .pro-top {
+                ul {
+                    display: flex;
+                    position: relative;
+                    left: -0.66rem;
+                    padding-left: 0.2rem;
+                    li {
+                        flex: 1;
+                        color: #447ec0;
+                        font-size: 0.2rem;
+                        text-align: center;
+                    }
+                }
+            }
+            .pro-center {
+                img {
+                    width: 100%;
+                }
+            }
+            .pro-bottom {
+                ul {
+                    display: flex;
+                    position: relative;
+                    left: 0.5rem;
+                    padding-left: 0.2rem;
+                    li {
+                        flex: 1;
+                        color: #447ec0;
+                        font-size: 0.2rem;
+                        text-align: center;
+                    }
+                }
+            }
+        }
+        .img{
+            img{
+                display: block;
+                width: 8rem;
+                margin: auto;
+                margin-top: .2rem;
+            }
+        }
+    }
+
+    
+    .it-temp3 {
+        padding: 0.2rem 1.2rem 1rem 1.2rem;
+        position: relative;
+        z-index: 1;
+        
+        .text-sub {
+            font-size: 0.18rem;
+            
+            font-weight: 400;
+            color: #737373;
+            line-height: 0.24rem;
+            text-align: center;
+            margin-bottom: 0.8rem;
+        }
+        .bg-img {
+            position: absolute;
+            width: 8.48rem;
+            height: auto;
+            top: 0;
+            right: 0;
+        }
+        .bg-img2 {
+            position: absolute;
+            width: 7.14rem;
+            left: 0;
+            top: 11rem;
+        }
+        .title-sub {
+            text-align: center;
+            font-size: 0.42rem;
+            
+            font-weight: 500;
+            color: #001d2d;
+            line-height: 0.62rem;
+            margin-bottom: 1.2rem;
+            margin-top: 0.6rem;
+            span {
+                display: inline-block;
+                width: 0.24rem;
+                height: 0.24rem;
+                position: relative;
+                top: -0.02rem;
+                &:first-child {
+                    background: #e1eafd;
+                }
+                &:last-child {
+                    background: #ecf4e3;
+                }
+            }
+            .text {
+                font-size: 0.18rem;
+                
+                font-weight: 400;
+                color: #737373;
+            }
+        }
+
+        .content-list {
+            margin-bottom: 1rem;
+            img {
+                width: 100%;
+                // height: 2.4rem;
+            }
+        }
+        .content-item {
+            position: relative;
+            padding-left: 0.66rem;
+            display: flex;
+            align-items: center;
+            height: 100%;
+            .box {
+                position: relative;
+            }
+            .setp {
+                position: absolute;
+                right: 0.2rem;
+                width: 0.24rem;
+                height: 100%;
+                span {
+                    display: block;
+                    width: 0.24rem;
+                    height: 0.24rem;
+                    margin-bottom: 0.12rem;
+                    &:first-child {
+                        background-color: #008cd5;
+                    }
+                    &:last-child {
+                        background-color: #ecf4e3;
+                    }
+                }
+            }
+            .num {
+                position: absolute;
+                top: -0.66rem;
+                left: -0.64rem;
+                font-size: 0.72rem;
+                
+                font-weight: 500;
+                color: #001d2d;
+                opacity: 0.06;
+            }
+            .title {
+                font-size: 0.36rem;
+                
+                font-weight: 400;
+                color: #001d2d;
+                line-height: 0.24rem;
+                letter-spacing: 0.01rem;
+                margin-bottom: 0.2rem;
+            }
+            .sub-title {
+                font-size: 0.2rem;
+                
+                font-weight: 400;
+                color: #737373;
+                line-height: 0.32rem;
+                width: 80%;
+            }
+        }
+        .content-item2 {
+            padding-left: 1.8rem;
+            .setp {
+                position: absolute;
+                left: 0.2rem;
+                right: auto;
+                span {
+                    display: block;
+                    width: 0.24rem;
+                    height: 0.24rem;
+                    margin-bottom: 0.12rem;
+                    &:first-child {
+                        background-color: #6eb92c;
+                    }
+                    &:last-child {
+                        background-color: #e1eafd;
+                    }
+                }
+            }
+            .num {
+                left: -0.6rem;
+            }
+        }
+    }
+    .it-temp5{
+        padding: 0rem 1.2rem 1rem 1.2rem;
+        // padding-bottom: 0;
+        position: relative;
+        .title-sub{
+            position: relative;
+            z-index: 1;
+            text-align: center;
+            font-size: .42rem;
+            
+            font-weight: 500;
+            color: #001D2D;
+            line-height: .62rem;
+            margin-bottom: .8rem;
+            span{
+                display: inline-block;
+                width: .24rem;
+                height: .24rem;
+                position: relative;
+                top: -0.02rem;
+                &:first-child{
+                    background: #E1EAFD;
+                }
+                &:last-child{
+                    background: #ECF4E3;
+                }
+            }
+        }
+        
+        .item{
+            margin-bottom: .5rem;
+            .title{
+                line-height: .32rem;
+                // text-align: center;
+                position: relative;
+                padding-top: .5rem;
+                div{
+                    position: absolute;
+                    width: 100%;
+                    left: .38rem;
+                    top: 0;
+                    // text-align: center;
+                    font-size: 1.40rem;
+                    
+                    font-weight: bold;
+                    color: #EEF2FB;
+                    z-index: 0;
+                    span{
+                        width: 1rem;
+                        height: 1rem;
+                        border-radius: .5rem;
+                        display: inline-block;
+                    }
+                }
+                & > span{
+                    position: relative;
+                    z-index: 1;
+                    font-size: .18rem;
+                    
+                    font-weight: 500;
+                    color: #001D2D;
+                    left: .56rem;
+                }
+                .title1{
+                    color:#E1EAFD;
+                    span{
+                        background-color: #E1EAFD;
+                    }
+                }
+                .title2{
+                    color:#ECF4E3;
+                    span{
+                        background-color: #ECF4E3;
+                    }
+                }
+                .title3{
+                    color:#E1EAFD;
+                    span{
+                        background-color: #E1EAFD;
+                    }
+                }
+                .title4{
+                    color:#ECF4E3;
+                    span{
+                        background-color: #ECF4E3;
+                    }
+                }
+            }
+        }
+        .text{
+            font-size: .18rem;
+            
+            font-weight: 400;
+            color: #737373;
+            line-height: .32rem;
+            margin-top: .6rem;
+            padding: .4rem;
+        }
+        
+    }
+    // ------------------
+}
--- a/src/views/apply/childs/index_1/index.vue
+++ b/src/views/apply/childs/index_1/index.vue
@ -0,0 +1,238 @@
+<template>
+  <div class="it-container">
+    <div class="it-temp1">
+      <img v-lazy="imgUrl.bg" />
+      <div class="title">某知名运动品牌</div>
+    </div>
+    <div class="breadcrumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/apply' }"
+          >应用案例</el-breadcrumb-item
+        >
+        <el-breadcrumb-item>某知名运动品牌</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <div class="it-temp2">
+      <div class="temp2-text">
+        随着该公司在中国的经营不断扩大，品牌店铺在中国境内最多总数达到8255间，在中国，几乎每个县级以上的城市都有该品牌的销售网点。由于业务的迅速发展IT支持和管理模式已经无法满足当前用户需求，依靠该企业自身的IT团队已不足以支持全国。IT治理成为该公司战略治理中关键的一个方面。
+      </div>
+      <!-- <img v-lazy="imgUrl.img1" alt=""> -->
+    </div>
+    <div class="it-temp3">
+      <div class="title-sub">
+        <span></span>
+        服务方案
+        <span></span>
+        <div class="text">
+          根据该企业的IT现状及业务模式，护航科技将在IT基础架构的运营维护中建立起标准化终端的IT服务管理、项目实施、流程制定、服务管理外包实施。
+        </div>
+      </div>
+      <div class="pro-flex">
+        <el-row :gutter="0">
+          <el-col :span="8">
+            <div class="item">
+              <div class="content">
+                <div class="icon">
+                  <span> <img v-lazy="imgUrl.img1" alt="" /> </span>1
+                </div>
+                <div class="title">新店开店支持服务</div>
+                <div class="text">
+                  针对全国门店网络的不断扩大， <br />
+                  护航在集团总部建立了呼叫中心，<br />
+                  实现了需求和故障的统一受理和 <br />
+                  统一支持
+                </div>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="item">
+              <div class="content">
+                <div class="icon icon2">
+                  <span> <img v-lazy="imgUrl.img2" alt="" /> </span>2
+                </div>
+                <div class="title">EPOS 系统全国推广服务</div>
+                <div class="text">
+                  该企业门店系统共升级了三次， <br />
+                  从起初的POS系统到EPOS1、<br />
+                  EPOS2和EPOS3代系统。 <br />
+                  护航负责了全国门店从POS到<br />
+                  EPOS3代系统的升级切换工作
+                </div>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="item">
+              <div class="content">
+                <div class="icon">
+                  <span> <img v-lazy="imgUrl.img3" alt="" /> </span>3
+                </div>
+                <div class="title">EPOS全国门店运营支持服务</div>
+                <div class="text">
+                  为了确保全国门店IT系统的稳定运行，<br />
+                  避免由于销售系统故障影响店面销售，<br />
+                  并在销售高峰期能够保障全国门店得<br />
+                  到高质量的支持，护航利用MSP平台<br />
+                  增加了服务模式的弹性，有效确保了 <br />
+                  销售高峰期时段服务支持效率
+                </div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="img">
+        <img v-lazy="imgUrl.img4" alt="" />
+      </div>
+    </div>
+    <div class="it-temp5">
+      <div class="title-sub">
+        <span></span>
+        护航科技服务价值
+        <span></span>
+      </div>
+
+      <el-row :gutter="66">
+        <el-col :span="6">
+          <div class="item">
+            <div class="title">
+              <div class="title1">
+                <span></span>1
+              </div>
+              <span>保证了IT基础设施、桌面及<br />后台应用系统的稳定运行</span>
+            </div>
+          </div>
+          
+        </el-col>
+        <el-col :span="6">
+          <div class="item">
+            <div class="title">
+              <div class="title2">
+                <span></span>2
+              </div>
+              <span>建立并完善了服务流程，极<br />大的改善了IT服务的高安全<br />性和高可用性</span>
+            </div>
+          </div>
+          
+        </el-col>
+        <el-col :span="6">
+          <div class="item">
+            <div class="title">
+              <div class="title3">
+                <span></span>3
+              </div>
+              <span>建立了规范的IT监控管理平<br />台与服务管理平台，根据业<br />务部门提出的服务级别、质<br />量、灵活性和成本目标来优<br />化IT资源</span>
+            </div>
+          </div>
+         
+        </el-col>
+        <el-col :span="6">
+          <div class="item">
+            <div class="title">
+              <div class="title4">
+                <span></span>4
+              </div>
+              <span>为IT投资决策提供精确的成<br />本信息, 有利于提高IT资源的<br />利用效率, 并提高投入产出、<br />成本可预见</span>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="66">
+        <el-col :span="6">
+          <div class="item">
+            <div class="title">
+              <div class="title1">
+                <span></span>5
+              </div>
+              <span>保证了新门店IT基础设施<br />（桌面和EPOS）能够在<br />规定时间内完成部署、上<br />线和培训，从而保障了门<br />店的如期开业</span>
+            </div>
+          </div>
+          
+        </el-col>
+        <el-col :span="6">
+          <div class="item">
+            <div class="title">
+              <div class="title2">
+                <span></span>6
+              </div>
+              <span>将现有的各地业务部门的<br />IT支持人员进行整合，优<br />化人员编制，降低IT运营<br />成本 20%</span>
+            </div>
+          </div>
+          
+        </el-col>
+        <el-col :span="6">
+          <div class="item">
+            <div class="title">
+              <div class="title3">
+                <span></span>7
+              </div>
+              <span>使繁杂的IT管理变得标准<br />而有序，并从以往的被动<br />式服务转向主动式服务，<br />有效提升IT服务运作效率</span>
+            </div>
+          </div>
+         
+        </el-col>
+        <el-col :span="6">
+          <div class="item">
+            <div class="title">
+              <div class="title4">
+                <span></span>8
+              </div>
+              <span>帮助企业IT管理者掌握IT<br />服务管理，为企业提供卓<br />越、完善、超值的IT全方<br />位规模服务</span>
+            </div>
+          </div>
+          <div class="more-gg" style="margin-top: 40px;"> <span @click="$router.push('/apply')">查看更多</span> </div>
+        </el-col>
+      </el-row>
+      
+    </div>
+  </div>
+</template>
+<script>
+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";
+
+export default{
+  data() {
+    return {
+      
+      cateList: [
+        "虚拟化",
+        "双机热备",
+        "邮件系统",
+        "监控系统",
+        "数据库建设",
+        "ERP系统",
+      ],
+      cateList2: [
+        "方案咨询",
+        "设计和建档维护",
+        "现场应急救援",
+        "按需例行巡检",
+        "主机系统安装",
+        "备份与升级",
+        "性能及操作系统优化",
+        "数据库配置",
+        "系统日常运维管理规范",
+      ],
+      imgUrl: {
+        bg: bg,
+        img1: img1,
+        img2: img2,
+        img3: img3,
+        img4: img4,
+      },
+    }
+  },
+  
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>
--- a/src/views/apply/childs/index_2/images/bg.png
+++ b/src/views/apply/childs/index_2/images/bg.png
--- a/src/views/apply/childs/index_2/images/img1.png
+++ b/src/views/apply/childs/index_2/images/img1.png
--- a/src/views/apply/childs/index_2/images/img2.png
+++ b/src/views/apply/childs/index_2/images/img2.png
--- a/src/views/apply/childs/index_2/index.scss
+++ b/src/views/apply/childs/index_2/index.scss
@ -0,0 +1,251 @@
+.it-container {
+    .it-temp1 {
+        height: 6.48rem;
+        // padding-left: 2.3rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        img {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            z-index: 0;
+        }
+        .title {
+            font-size: 0.6rem;
+            
+            font-weight: 500;
+            color: #ffffff;
+            background-color: rgba(0, 39, 59, 0.2);
+            height: 0.88rem;
+            line-height: 0.88rem;
+            border-radius: 0.26rem;
+            // padding: 0 0.24rem;
+            padding: 0 1rem;
+            position: relative;
+            z-index: 1;
+            // width: 6.48rem;
+            text-align: center;
+        }
+    }
+    .breadcrumb {
+        padding: 0.6rem 1.2rem 0.4rem 1.2rem;
+    }
+
+    .it-temp2 {
+        padding: 0rem 1.2rem 0rem 1.2rem;
+        // padding-top: .3rem;
+        position: relative;
+        z-index: 1;
+        .temp2-text {
+            font-size: 0.18rem;
+            
+            font-weight: 400;
+            color: #737373;
+            line-height: 0.24rem;
+            margin-bottom: 0.3rem;
+        }
+        img {
+            display: block;
+            width: 9.65rem;
+            margin: auto;
+        }
+    }
+    .it-temp3 {
+        padding: 0.6rem 1.2rem 0rem 1.2rem;
+        position: relative;
+
+        .title-sub {
+            position: relative;
+            z-index: 1;
+            text-align: center;
+            font-size: 0.42rem;
+            
+            font-weight: 500;
+            color: #001d2d;
+            line-height: 0.62rem;
+            margin-bottom: 0.6rem;
+            span {
+                display: inline-block;
+                width: 0.24rem;
+                height: 0.24rem;
+                position: relative;
+                top: -0.02rem;
+                &:first-child {
+                    background: #e1eafd;
+                }
+                &:last-child {
+                    background: #ecf4e3;
+                }
+            }
+            .text {
+                font-size: 0.18rem;
+                
+                font-weight: 400;
+                color: #737373;
+            }
+        }
+        
+        .img{
+            img{
+                display: block;
+                width: 11rem;
+                margin: auto;
+                margin-top: .2rem;
+            }
+        }
+    }
+    .it-temp4{
+        padding: 0.6rem 1.2rem 0rem 1.2rem;
+        position: relative;
+
+        .title-sub {
+            position: relative;
+            z-index: 1;
+            text-align: center;
+            font-size: 0.42rem;
+            
+            font-weight: 500;
+            color: #001d2d;
+            line-height: 0.62rem;
+            margin-bottom: 0.6rem;
+            span {
+                display: inline-block;
+                width: 0.24rem;
+                height: 0.24rem;
+                position: relative;
+                top: -0.02rem;
+                &:first-child {
+                    background: #e1eafd;
+                }
+                &:last-child {
+                    background: #ecf4e3;
+                }
+            }
+            .text {
+                font-size: 0.18rem;
+                
+                font-weight: 400;
+                color: #737373;
+                line-height: .24rem;
+                text-align: left;
+                margin-top: .4rem;
+            }
+        }
+        
+        .img{
+            img{
+                display: block;
+                width: 8rem;
+                margin: auto;
+                margin-top: .2rem;
+            }
+        }
+    }
+    
+    
+    .it-temp5{
+        padding: .8rem 1.2rem 1rem 1.2rem;
+        // padding-bottom: 0;
+        position: relative;
+        .title-sub{
+            position: relative;
+            z-index: 1;
+            text-align: center;
+            font-size: .42rem;
+            
+            font-weight: 500;
+            color: #001D2D;
+            line-height: .62rem;
+            margin-bottom: .8rem;
+            span{
+                display: inline-block;
+                width: .24rem;
+                height: .24rem;
+                position: relative;
+                top: -0.02rem;
+                &:first-child{
+                    background: #E1EAFD;
+                }
+                &:last-child{
+                    background: #ECF4E3;
+                }
+            }
+        }
+        
+        .item{
+            margin-bottom: .5rem;
+            .title{
+                line-height: .32rem;
+                // text-align: center;
+                position: relative;
+                padding-top: .5rem;
+                div{
+                    position: absolute;
+                    width: 100%;
+                    left: .38rem;
+                    top: 0;
+                    // text-align: center;
+                    font-size: 1.40rem;
+                    
+                    font-weight: bold;
+                    color: #EEF2FB;
+                    z-index: 0;
+                    span{
+                        width: 1rem;
+                        height: 1rem;
+                        border-radius: .5rem;
+                        display: inline-block;
+                    }
+                }
+                & > span{
+                    position: relative;
+                    z-index: 1;
+                    font-size: .18rem;
+                    
+                    font-weight: 500;
+                    color: #001D2D;
+                    left: .56rem;
+                }
+                .title1{
+                    color:#E1EAFD;
+                    span{
+                        background-color: #E1EAFD;
+                    }
+                }
+                .title2{
+                    color:#ECF4E3;
+                    span{
+                        background-color: #ECF4E3;
+                    }
+                }
+                .title3{
+                    color:#E1EAFD;
+                    span{
+                        background-color: #E1EAFD;
+                    }
+                }
+                .title4{
+                    color:#ECF4E3;
+                    span{
+                        background-color: #ECF4E3;
+                    }
+                }
+            }
+        }
+        .text{
+            font-size: .18rem;
+            
+            font-weight: 400;
+            color: #737373;
+            line-height: .32rem;
+            margin-top: .6rem;
+            padding: .4rem;
+        }
+        
+    }
+    // ------------------
+}
--- a/src/views/apply/childs/index_2/index.vue
+++ b/src/views/apply/childs/index_2/index.vue
@ -0,0 +1,116 @@
+<template>
+  <div class="it-container">
+    <div class="it-temp1">
+      <img v-lazy="imgUrl.bg" />
+      <div class="title">某大型互联网教育集团</div>
+    </div>
+    <div class="breadcrumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/apply' }"
+          >应用案例</el-breadcrumb-item
+        >
+        <el-breadcrumb-item>某大型互联网教育集团</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <div class="it-temp2">
+      <div class="temp2-text">
+        该集团以语言培训为核心，拥有短期培训系统、基础教育系统、文化传播系统、科技产业系统、咨询服务系统等多个发展平台，是一家集教育培训、教育产品研发、教育服务等于一体的大型综合性教育科技集团。该集团于2006年9月7日在美国纽约证券交易所成功上市，成为中国大陆首家海外上市的教育培训机构。
+        <br />护航科技为该集团及全国分支提供应用系统及桌面支持服务、集中式服务台支持服务、桌面运维支持及数据录入服务。
+      </div>
+      <!-- <img v-lazy="imgUrl.img1" alt=""> -->
+    </div>
+    <div class="it-temp3">
+      <div class="title-sub">
+        <span></span>
+        管理机制
+        <span></span>
+      </div>
+      <div class="img">
+        <img v-lazy="imgUrl.img1" alt="" />
+      </div>
+    </div>
+    <div class="it-temp4">
+      <div class="title-sub">
+        <span></span>
+        整体服务方案设计
+        <span></span>
+        <div class="text">
+          为了确保服务质量，首先对服务交付模式进行调整，建立400热线为基础的统一服务支持模式，在服务交付稳定的基础上，将服务台由北京迁移至武汉。
+          优化现有的服务流程并将服务策略落地到ITSM系统中，将ITSM系统与呼叫系统对接，形成统一的服务支持平台，提升服务解决效率。
+          配备符合标准的服务团队提供驻场支持，配备一名专属的服务经理进行管控。
+        </div>
+      </div>
+      <div class="img">
+        <img v-lazy="imgUrl.img2" alt="" />
+      </div>
+    </div>
+    <div class="it-temp5">
+      <div class="title-sub">
+        <span></span>
+        服务价值
+        <span></span>
+      </div>
+
+      <el-row :gutter="66">
+        <el-col :span="6">
+          <div class="item">
+            <div class="title">
+              <div class="title1"><span></span>1</div>
+              <span>专属备份人员确保不空岗</span>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="item">
+            <div class="title">
+              <div class="title2"><span></span>2</div>
+              <span>专业技术平台保证系统的<br />实用性</span>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="item">
+            <div class="title">
+              <div class="title3"><span></span>3</div>
+              <span>为项目定期进行流程优化</span>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="item">
+            <div class="title">
+              <div class="title4"><span></span>4</div>
+              <span>公司级质量管理中心定期<br />进行质量检查</span>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+<div class="more-gg" style="margin-top: 40px;"> <span @click="$router.push('/apply')">查看更多</span> </div>
+      
+    </div>
+  </div>
+</template>
+<script>
+import bg from "./images/bg.png";
+import img1 from "./images/img1.png";
+import img2 from "./images/img2.png";
+
+export default{
+  data(){
+    return {
+      
+      imgUrl: {
+        bg: bg,
+        img1: img1,
+        img2: img2,
+      },
+    }
+  },
+  
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>
--- a/src/views/apply/childs/index_3/images/bg.png
+++ b/src/views/apply/childs/index_3/images/bg.png
--- a/src/views/apply/childs/index_3/images/img1.png
+++ b/src/views/apply/childs/index_3/images/img1.png
--- a/src/views/apply/childs/index_3/images/img2.png
+++ b/src/views/apply/childs/index_3/images/img2.png
--- a/src/views/apply/childs/index_3/images/img3.png
+++ b/src/views/apply/childs/index_3/images/img3.png
--- a/Show More
+++ b/Show More