monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit a07e804695c9fc4dffd9f2ebb234b679d7dbaeb9 1 parent d841decf

【无】门户网站-了解鸿果调整

Inline Side-by-side
Showing 50 changed files with 424 additions and 114 deletions
@@ -388,6 +388,7 @@ textarea:placeholder, @@ -388,6 +388,7 @@ textarea:placeholder,
388 background-position: center bottom; 388 background-position: center bottom;
389 background-size: cover; 389 background-size: cover;
390 padding: 200px; 390 padding: 200px;
  391 + height: calc(100vh);
391 } 392 }
392 .hero-content h1 { 393 .hero-content h1 {
393 font-weight: 300; 394 font-weight: 300;
@@ -679,7 +680,7 @@ textarea:placeholder, @@ -679,7 +680,7 @@ textarea:placeholder,
679 Start Video Section 680 Start Video Section
680 ====================================================================***/ 681 ====================================================================***/
681 .video-wrap { 682 .video-wrap {
682 - max-width: 960px; 683 + max-width: 760px;
683 margin: auto; 684 margin: auto;
684 position: relative; 685 position: relative;
685 border-radius: 20px; 686 border-radius: 20px;
@@ -2310,6 +2311,7 @@ blockquote:before { @@ -2310,6 +2311,7 @@ blockquote:before {
2310 font-size: 36px; 2311 font-size: 36px;
2311 color:#333333; 2312 color:#333333;
2312 line-height: normal; 2313 line-height: normal;
  2314 + font-family: 'MicrosoftYaHei-Bold';
2313 } 2315 }
2314 .title-intro{ 2316 .title-intro{
2315 font-size: 18px; 2317 font-size: 18px;
@@ -2444,3 +2446,233 @@ blockquote:before { @@ -2444,3 +2446,233 @@ blockquote:before {
2444 font-size: 14px; 2446 font-size: 14px;
2445 color: #8C8C8C; 2447 color: #8C8C8C;
2446 } 2448 }
  2449 +/*lsq 了解鸿果样式调整*/
  2450 +.know-intro{
  2451 + position: absolute;
  2452 + height: 100%;
  2453 + width: 100%;
  2454 + left: 0;
  2455 + top: 0;
  2456 + z-index: -1;
  2457 + background: url('../img/about/know-intro.png');
  2458 + background-size: cover;
  2459 +}
  2460 +.all-height{
  2461 + height:calc(100vh);
  2462 +}
  2463 +.about-section{
  2464 + display: flex;
  2465 + align-items: center;
  2466 + justify-content: center;
  2467 +}
  2468 +.section-title .title-style{
  2469 + color:#ffffff;
  2470 + display: flex;
  2471 + justify-content: center;
  2472 +}
  2473 +.cultural-item-0{
  2474 + background: url('../img/about/cultural-1.png');
  2475 +}
  2476 +.cultural-item-1,.cultural-item-2{
  2477 + background: url('../img/about/cultural-2.png');
  2478 +}
  2479 +.culturalValues-item{
  2480 + display: flex;
  2481 + align-items: center;
  2482 +}
  2483 +.culturalValues-item img{
  2484 + max-width: 90px;
  2485 +}
  2486 +.culturalValues-title{
  2487 + font-size: 18px;
  2488 + color:#333;
  2489 +}
  2490 +.cultural-title{
  2491 + color:#fff;
  2492 + font-size: 24px;
  2493 + height: 20%;
  2494 + width: 100%;
  2495 + align-items: center;
  2496 + display: flex;
  2497 + justify-content: center;
  2498 +}
  2499 +.cultural-contain{
  2500 + position: absolute;
  2501 + top: 0;
  2502 + left: 0;
  2503 + right: 0;
  2504 + height: 100%;
  2505 + display: flex;
  2506 + align-items: center;
  2507 + justify-content: center;
  2508 + flex-flow: column;
  2509 +}
  2510 +.cultural-con-item{
  2511 + color:#333;
  2512 + font-size: 18px;
  2513 + padding:20px;
  2514 +}
  2515 +.cultural-con{
  2516 + flex:1;
  2517 + width: 100%;
  2518 + display: flex;
  2519 + align-items: center;
  2520 + justify-content: center;
  2521 + flex-flow: column;
  2522 +}
  2523 +.cultural-item-l img{
  2524 + max-width: 400px;
  2525 +}
  2526 +.about-video-bg{
  2527 + position: absolute;
  2528 + height: 100%;
  2529 + width: 100%;
  2530 + left: 0;
  2531 + top: 0;
  2532 + z-index: -1;
  2533 + background: url('../img/about/about-video.png');
  2534 + background-size: cover;
  2535 +}
  2536 +.partner-section{
  2537 + position: relative;
  2538 +}
  2539 +.partner-bg-xs{
  2540 + position: absolute;
  2541 + height: 100%;
  2542 + width: 100%;
  2543 + left: 0;
  2544 + top: 0;
  2545 + z-index: -1;
  2546 + background: url('../img/about/partner.png');
  2547 + background-size: cover;
  2548 +}
  2549 +@media (min-width: 996px){
  2550 + .partner-bg{
  2551 + position: absolute;
  2552 + height: 100%;
  2553 + width: 100%;
  2554 + left: 0;
  2555 + top: 0;
  2556 + z-index: -1;
  2557 + background: url('../img/about/partner-bg.png');
  2558 + background-size: cover;
  2559 + }
  2560 +}
  2561 +.partner-con{
  2562 + display: flex;
  2563 + flex-wrap: wrap;
  2564 + justify-content: space-between;
  2565 +}
  2566 +.partner-con-center{
  2567 + justify-content: center;
  2568 +}
  2569 +.partner-item{
  2570 + margin:20px 0;
  2571 + position: relative;
  2572 + justify-content: center;
  2573 + display: flex;
  2574 + align-items: center;
  2575 + cursor: pointer;
  2576 +}
  2577 +.partner-item:hover img{
  2578 + transform: scale(1.1,1.1);
  2579 + box-shadow: 0 1px 10px 8px rgba(0, 0, 0, 0.3);
  2580 + border-radius: 10px;
  2581 +}
  2582 +.partner-con:first-child .partner-item:nth-child(4),.partner-con:nth-child(4) .partner-item:nth-child(4){
  2583 + display: none;
  2584 +}
  2585 +.partner-con:first-child .partner-item:nth-child(1),.partner-con:first-child .partner-item:nth-child(3) {
  2586 + left:30px;
  2587 +}
  2588 +.partner-con:nth-child(2) .partner-item:nth-child(2){
  2589 + left:-30px;
  2590 +}
  2591 +.partner-con:nth-child(2) .partner-item:nth-child(3){
  2592 + left:-60px;
  2593 +}
  2594 +.partner-con:nth-child(3) .partner-item:nth-child(1),.partner-con:nth-child(3) .partner-item:nth-child(4){
  2595 + left:60px;
  2596 +}
  2597 +.partner-con:nth-child(3) .partner-item:nth-child(2),.partner-con:nth-child(3) .partner-item:nth-child(3){
  2598 + left:100px;
  2599 +}
  2600 +.partner-con:nth-child(4) .partner-item:nth-child(2){
  2601 + left:30px;
  2602 +}
  2603 +.partner-con-center .partner-item:nth-child(2){
  2604 + margin:0;
  2605 +}
  2606 +.qualification-section{
  2607 + height:calc(100vh);
  2608 + display: flex;
  2609 + align-items: center;
  2610 +}
  2611 +.qualification-bg{
  2612 + position: absolute;
  2613 + height: 100%;
  2614 + width: 100%;
  2615 + left: 0;
  2616 + top: 0;
  2617 + z-index: -1;
  2618 + background: url('../img/about/qualification-bg.png');
  2619 + background-size: cover;
  2620 +}
  2621 +.qualification-con{
  2622 + left: 20%;
  2623 +}
  2624 +.qualification-con .qualification-item{
  2625 + height: calc(100vh/2);
  2626 + max-height: calc(100vh/2);
  2627 + display: flex;
  2628 + align-items: center;
  2629 +}
  2630 +.qualification-con .qualification-item .item-con{
  2631 + border:10px solid #333;
  2632 + border-radius: 10px;
  2633 +}
  2634 +.qualification-section .owl-carousel .owl-item img{
  2635 + width: auto;
  2636 + max-height: 400px;
  2637 +}
  2638 +.qualification-section .team-carousel .owl-nav{
  2639 + bottom: 0;
  2640 + top: 115%;
  2641 + left: -40%;
  2642 +}
  2643 +.qualification-section .flaticon-left-arrow:before,.qualification-section .flaticon-right-arrow:before{
  2644 + content:''
  2645 +}
  2646 +.qualification-section .team-carousel .owl-nav button.owl-prev{
  2647 + background:url("../img/about/arrow-left.png");
  2648 + width: 50px;
  2649 + height:50px;
  2650 + border:none!important;
  2651 +}
  2652 +.qualification-section .team-carousel .owl-nav button.owl-next{
  2653 + background:url("../img/about/arrow-right.png");
  2654 + width: 50px;
  2655 + height:50px;
  2656 +}
  2657 +.qualification-section .team-carousel .owl-nav button.owl-prev:hover,.qualification-section .team-carousel .owl-nav button.owl-next:hover{
  2658 + box-shadow:0 1px 10px 8px rgba(0, 0, 0, 0.3) ;
  2659 +}
  2660 +.wrap{
  2661 + overflow: hidden;
  2662 + height: calc(100vh);
  2663 +}
  2664 +.wrap-container{
  2665 + position: relative;
  2666 + top: 0;
  2667 + left: 0;
  2668 +}
  2669 +.wrap section{
  2670 + height: calc(100vh);
  2671 +}
  2672 +.footer-section-about{
  2673 + height: 100%;
  2674 + display: flex;
  2675 + flex-flow: column;
  2676 + align-items: center;
  2677 + justify-content: center;
  2678 +}

1.31 MB | W: | H:

2.48 MB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

392 KB | W: | H:

36.6 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.7 MB | W: | H:

760 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
  1 +export function culturalValuesDatas() {
  2 + let res = [
  3 + {
  4 + icon:'assets/img/about/culturalValues-1.png',
  5 + title:'"高"客户满意度'
  6 + },
  7 + {
  8 + icon:'assets/img/about/culturalValues-2.png',
  9 + title:'"高"效率运转'
  10 + },
  11 + {
  12 + icon:'assets/img/about/culturalValues-3.png',
  13 + title:'"高"核心员工满意度'
  14 + },
  15 + {
  16 + icon:'assets/img/about/culturalValues-4.png',
  17 + title:'"高"成本合理支出'
  18 + }
  19 + ]
  20 + return res;
  21 +}
  22 +export function culturalDatas() {
  23 + let res = [
  24 + {
  25 + bg:'assets/img/about/cultural-1.png',
  26 + title:'文化',
  27 + introData:['快乐高效','成长进步','互利共赢']
  28 + },
  29 + {
  30 + bg:'assets/img/about/cultural-2.png',
  31 + title:'核心价值观',
  32 + introData:['担当','拼搏','共赢']
  33 + },
  34 + {
  35 + bg:'assets/img/about/cultural-2.png',
  36 + title:'使命与愿景',
  37 + introData:['追求高客户满意度','成为主流行业信息化解决方案','的最佳合作伙伴']
  38 + }
  39 + ]
  40 + return res;
  41 +}
  42 +export function partnerDatas() {
  43 + let res = [
  44 + {img:'assets/img/about/partner/partner-1.png'}
  45 + ]
  46 + return res;
  47 +}

39.5 KB | W: | H:

31.6 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
@@ -88,6 +88,12 @@ router.beforeEach(async (to, from, next) => { @@ -88,6 +88,12 @@ router.beforeEach(async (to, from, next) => {
88 let pathArr=path.split('/'); 88 let pathArr=path.split('/');
89 if(pathArr.length>2){ 89 if(pathArr.length>2){
90 toPath=pathArr[1]; 90 toPath=pathArr[1];
  91 + //lsq 设置二级页面时的导航样式
  92 + $('.logo-outer .hg-logo').attr('src','assets/img/logo.png');
  93 + $('.navigation').removeClass('navigation-white');
  94 + }else{
  95 + $('.logo-outer .hg-logo').attr('src','assets/img/logo-footer.png');
  96 + $('.navigation').addClass('navigation-white');
91 } 97 }
92 } 98 }
93 $('[top-nav]').removeClass('current'); 99 $('[top-nav]').removeClass('current');
@@ -96,6 +102,7 @@ router.beforeEach(async (to, from, next) => { @@ -96,6 +102,7 @@ router.beforeEach(async (to, from, next) => {
96 $('html, body').animate({ 102 $('html, body').animate({
97 scrollTop: 0 103 scrollTop: 0
98 }, 500); 104 }, 500);
  105 +
99 next(); 106 next();
100 }) 107 })
101 108
1 -<section class="hero-section rel rpt-150 pb-130 rpb-0"> 1 +<section class="hero-section rel rpt-150 rpb-0">
2 <div class="shape shapeAnimationOne l-10 t-60"> 2 <div class="shape shapeAnimationOne l-10 t-60">
3 <img src="assets/img/shapes/shape1.png" alt="Shape"> 3 <img src="assets/img/shapes/shape1.png" alt="Shape">
4 </div> 4 </div>
@@ -9,38 +9,21 @@ @@ -9,38 +9,21 @@
9 <img src="assets/img/shapes/shape3.png" alt="Shape"> 9 <img src="assets/img/shapes/shape3.png" alt="Shape">
10 </div> 10 </div>
11 </section> 11 </section>
  12 +<div class="wrap" @Mousewheel="MousewheelFun">
  13 + <div class="wrap-container">
  14 + <section class="concat-about rel rpt-150 pb-130 rpb-0 text-left ">
  15 + </section>
12 16
13 -  
14 -<section class="concat-about rel rpt-150 pb-130 rpb-0 text-left ">  
15 -  
16 -</section>  
17 -  
18 -  
19 -<section class="banner-section rel" style="height: 100px">  
20 - <div class="container">  
21 - <h2 class="page-title">关于鸿果科技</h2>  
22 - </div>  
23 -</section>  
24 -  
25 -<section class="about-section rel mt-85 mb-100"> 17 + <section class="about-section rel all-height">
26 <div class="container"> 18 <div class="container">
27 - <div class="row align-items-center">  
28 - <div class="col-lg-7">  
29 <div class="about-content mr-20 rmr-0 rmb-50 wow customFadeInRight delay-0-1s slow"> 19 <div class="about-content mr-20 rmr-0 rmb-50 wow customFadeInRight delay-0-1s slow">
30 <div class="section-title mb-35"> 20 <div class="section-title mb-35">
31 - <span class="sub-title">公司简介</span>  
32 - <h2>鸿果科技</h2>  
33 - </div>  
34 - <p>北京鸿果秋实科技有限公司2012年成立，定位于提供4S信息化解决方案的高科技公司：（Software-软件，Service-服务，Solution-解决方案，Sale-销售），公司专注于软件解决方案和整体服务交付领域，已陆续成为税务、社保、财政、通信运营商等行业业IT运维领域的领先者。北京鸿果科技依托“金税三期” 、“互联网+智能化AI+行业应用”的变革时机，充分运用智能化、运维大数据思维，引入AI、算法和业务深度理解，共同打造AIOps生态圈。公司基于多年政府行业的市场、销售、技术、产品经验积累，先后在多省市政府、央企承建了“综合监控管理平台（A-view V1.0）、自动化巡检平台、智能告警算法平台、数据安全运维管理平台、一体化运维大数据管理应用平台（D-viewV1.0）”等，陆续承建了浙江省、新疆、陕西、贵州、天津、吉林、辽宁、内蒙古、宁夏等税务局“金三”重大信息化项目。 目前公司拥有《国家高新企业》《中国信息安全服务集成资质》、《中国信息安全运维资质》、 《软件企业》资质、多项自主的软件著作权，评选为“优秀信息化软件企业合作伙伴”、"专精特新"企业。</p>  
35 - </div>  
36 - </div>  
37 - <div class="col-lg-5">  
38 - <div class="about-image wow customFadeInLeft delay-0-1s slow">  
39 - <img src="assets/img/about/about1.jpg" style="border-radius: 10px">  
40 - </div> 21 + <span class="title-style">公司简介</span>
41 </div> 22 </div>
  23 + <div class="title-intro color-white">北京鸿果秋实科技有限公司2012年成立，定位于提供4S信息化解决方案的高科技公司：（Software-软件，Service-服务，Solution-解决方案，Sale-销售），公司专注于软件解决方案和整体服务交付领域，已陆续成为税务、社保、财政、通信运营商等行业业IT运维领域的领先者。北京鸿果科技依托“金税三期” 、“互联网+智能化AI+行业应用”的变革时机，充分运用智能化、运维大数据思维，引入AI、算法和业务深度理解，共同打造AIOps生态圈。公司基于多年政府行业的市场、销售、技术、产品经验积累，先后在多省市政府、央企承建了“综合监控管理平台（A-view V1.0）、自动化巡检平台、智能告警算法平台、数据安全运维管理平台、一体化运维大数据管理应用平台（D-viewV1.0）”等，陆续承建了浙江省、新疆、陕西、贵州、天津、吉林、辽宁、内蒙古、宁夏等税务局“金三”重大信息化项目。 目前公司拥有《国家高新企业》《中国信息安全服务集成资质》、《中国信息安全运维资质》、 《软件企业》资质、多项自主的软件著作权，评选为“优秀信息化软件企业合作伙伴”、"专精特新"企业。</div>
42 </div> 24 </div>
43 </div> 25 </div>
  26 + <div class="know-intro"></div>
44 27
45 <div class="shape shapeAnimationFour l-10 t-5"> 28 <div class="shape shapeAnimationFour l-10 t-5">
46 <img src="assets/img/shapes/shape4.png" alt="Shape"> 29 <img src="assets/img/shapes/shape4.png" alt="Shape">
@@ -48,50 +31,34 @@ @@ -48,50 +31,34 @@
48 <div class="shape shapeAnimationFive r-10 t-100 zm-1"> 31 <div class="shape shapeAnimationFive r-10 t-100 zm-1">
49 <img src="assets/img/shapes/shape2.png" alt="Shape"> 32 <img src="assets/img/shapes/shape2.png" alt="Shape">
50 </div> 33 </div>
51 -</section> 34 + </section>
52 35
53 -<section class="services-section rel text-center mt-100 mb-80"> 36 + <section class="about-section rel text-center">
54 <div class="container"> 37 <div class="container">
55 - <div class="row"> 38 + <div class="row wow customFadeInRight delay-0-1s slow">
56 <div class="col-lg-12 col-md-12"> 39 <div class="col-lg-12 col-md-12">
57 - <h4><a href="#">企业文化</a></h4>  
58 - <p>诚心铸就品质，创新引导未来</p> 40 + <div class="title-style">鸿果文化价值观及企业目标</div>
59 </div> 41 </div>
60 </div> 42 </div>
61 - <div class="row">  
62 - <!-- single-service -->  
63 - <div class="col-lg-4 col-md-6">  
64 - <div class="single-service-box">  
65 - <div class="service-icon mb-25">  
66 - <img src="assets/img/services/service4.png" alt="Service Icon"> 43 + <div class="row pt-30 wow">
  44 + <div class="col-lg-3 culturalValues-item" v-for="item in culturalValuesData">
  45 + <img :src="item.icon" alt="">
  46 + <div class="culturalValues-title customFadeInRight delay-0-1s slow">{{item.title}}</div>
67 </div> 47 </div>
68 - <div class="service-content pb-2">  
69 - <h4>快乐高效</h4>  
70 </div> 48 </div>
  49 + <div class="row pt-30 mb-50">
  50 + <div :class="['col-lg-4', 'cultural-item'] " v-for="(item,index) in culturalData">
  51 + <div class="cultural-item-l">
  52 + <img :src="item.bg" alt="">
  53 + <div class="cultural-contain wow customFadeInRight delay-0-1s slow">
  54 + <div class="cultural-title">{{item.title}}</div>
  55 + <div class="cultural-con">
  56 + <div class="cultural-con-item" v-for="itemI in item.introData">{{itemI}}</div>
71 </div> 57 </div>
72 </div> 58 </div>
73 59
74 - <!-- single-service -->  
75 - <div class="col-lg-4 col-md-6">  
76 - <div class="single-service-box">  
77 - <div class="service-icon mb-25">  
78 - <img src="assets/img/services/service5.png" alt="Service Icon">  
79 - </div>  
80 - <div class="service-content pb-2">  
81 - <h4><a href="#">成长进步</a></h4>  
82 - </div>  
83 - </div>  
84 </div> 60 </div>
85 61
86 - <div class="col-lg-4 col-md-6">  
87 - <div class="single-service-box">  
88 - <div class="service-icon mb-25">  
89 - <img src="assets/img/services/service6.png" alt="Service Icon">  
90 - </div>  
91 - <div class="service-content pb-2">  
92 - <h4>互利共赢</h4>  
93 - </div>  
94 - </div>  
95 </div> 62 </div>
96 </div> 63 </div>
97 </div> 64 </div>
@@ -102,9 +69,8 @@ @@ -102,9 +69,8 @@
102 <div class="shape shapeAnimationTwo t-100 r-5"> 69 <div class="shape shapeAnimationTwo t-100 r-5">
103 <img src="assets/img/shapes/shape1.png" alt="Shape"> 70 <img src="assets/img/shapes/shape1.png" alt="Shape">
104 </div> 71 </div>
105 -</section>  
106 -  
107 -<section class="success-section pt-105 pb-50"> 72 + </section>
  73 + <section class="success-section pt-135 pb-20">
108 <div class="container"> 74 <div class="container">
109 <div class="row"> 75 <div class="row">
110 <div class="col-lg-3 col-md-6"> 76 <div class="col-lg-3 col-md-6">
@@ -145,15 +111,12 @@ @@ -145,15 +111,12 @@
145 </div> 111 </div>
146 </div> 112 </div>
147 </div> 113 </div>
148 -  
149 - <div class="success-bg small"></div> 114 + <div class="about-video-bg small"></div>
150 115
151 <div class="shape shapeAnimationFour r-5 t-100"> 116 <div class="shape shapeAnimationFour r-5 t-100">
152 <img src="assets/img/shapes/shape3.png" alt="Shape"> 117 <img src="assets/img/shapes/shape3.png" alt="Shape">
153 </div> 118 </div>
154 -</section>  
155 -  
156 -<div class="video-section rel mb-115"> 119 + <div class="video-section rel">
157 <div class="container"> 120 <div class="container">
158 <div class="video-wrap"> 121 <div class="video-wrap">
159 <img src="assets/img/video-bg.png" alt="Video BG"> 122 <img src="assets/img/video-bg.png" alt="Video BG">
@@ -173,57 +136,57 @@ @@ -173,57 +136,57 @@
173 <div class="shape shapeAnimationOne r-10 b-0"> 136 <div class="shape shapeAnimationOne r-10 b-0">
174 <img src="assets/img/shapes/shape2.png" alt="Shape"> 137 <img src="assets/img/shapes/shape2.png" alt="Shape">
175 </div> 138 </div>
176 -</div> 139 + </div>
  140 + </section>
177 141
178 -<section class="team-section rel mb-65"> 142 + <section class="partner-section pt-105 pb-50">
179 <div class="container"> 143 <div class="container">
180 - <div class="section-title mb-35 pr-65">  
181 - <span class="sub-title">资质&证书</span>  
182 - <!--<h2>Our Skilled Member Whose Efforts <br>资质&证书</h2>--> 144 + <div class="row">
  145 + <div :class="['partner-con', 'col-lg-3',{'partner-con-center':index==0 || index==3}]" v-for="(item,index) in 4">
  146 + <div class="partner-item" v-for="(itemC,indexC) in 4"><img :src="'assets/img/about/partner/partner-'+item+'-'+itemC+'.png'" alt=""></div>
183 </div> 147 </div>
184 -  
185 - <div class="team-carousel owl-carousel text-center">  
186 -  
187 - <div class="team-item" v-for="item in imgs">  
188 - <img :src="item.path" alt="资质&证书" style="height: 100%">  
189 - <div class="service-two-content">  
190 - <h5>{{item.name}}</h5> 148 + </div>
  149 + </div>
  150 + <div class="partner-bg partner-bg-xs"></div>
  151 + <div class="shape shapeAnimationThree b-40 l-10">
  152 + <img src="assets/img/shapes/shape1.png" alt="Shape">
  153 + </div>
  154 + <div class="shape shapeAnimationFive b-5 l-5">
  155 + <img src="assets/img/shapes/shape3.png" alt="Shape">
  156 + </div>
  157 + </section>
  158 + <section class="team-section rel qualification-section ">
  159 + <div class="container">
  160 + <div class="team-carousel owl-carousel text-center qualification-con">
  161 + <div class="qualification-item" v-for="item in imgs">
  162 + <div class="item-con">
  163 + <img :src="item.path" alt="资质&证书">
191 </div> 164 </div>
192 </div> 165 </div>
193 166
194 </div> 167 </div>
195 </div> 168 </div>
  169 + <div class="qualification-bg"></div>
196 <div class="shape shapeAnimationFour l-10 t-100"> 170 <div class="shape shapeAnimationFour l-10 t-100">
197 <img src="assets/img/shapes/shape2.png" alt="Shape"> 171 <img src="assets/img/shapes/shape2.png" alt="Shape">
198 </div> 172 </div>
199 <div class="shape shapeAnimationThree b-30 r-10"> 173 <div class="shape shapeAnimationThree b-30 r-10">
200 <img src="assets/img/shapes/shape1.png" alt="Shape"> 174 <img src="assets/img/shapes/shape1.png" alt="Shape">
201 </div> 175 </div>
202 -</section>  
203 -  
204 -  
205 -  
206 -<section class="services-section rel text-center mt-100 mb-80"> 176 + </section>
  177 + <section class="about-section rel text-center">
207 <div class="container"> 178 <div class="container">
208 - <div class="row"> 179 + <div class="row wow customFadeInRight delay-0-1s slow">
209 <div class="col-lg-12 col-md-12"> 180 <div class="col-lg-12 col-md-12">
210 - <!-- <h4><a href="#">合作流程</a></h4>  
211 - <p>专业技术顾问，提供一对一服务</p>-->  
212 - <div class="service-icon mb-25">  
213 - <img src="assets/img/about/hzlc.png"> 181 + <div class="title-style">合作流程</div>
  182 + <div class="title-intro pt-30">专业技术顾问，提供一对一服务</div>
214 </div> 183 </div>
215 </div> 184 </div>
216 - </div>  
217 - <!--<div class="col-lg-12 col-md-12">  
218 - <div class="single-service-box">  
219 - <div class="service-content">  
220 - <h4><a href="#">合作流程</a></h4>  
221 - <p>专业技术顾问，提供一对一服务</p>  
222 - </div>  
223 - <div class="service-icon mb-25">  
224 - <img src="assets/img/services/service5.png" alt="Service Icon"> 185 + <div class="about-process pt-80">
  186 + <img src="assets/img/about/hzlc.png">
225 </div> 187 </div>
226 </div> 188 </div>
227 - </div>--> 189 + </section>
228 </div> 190 </div>
229 -</section> 191 +
  192 +</div>
1 import pageInit from "../../minixs/pageInit.js"; 1 import pageInit from "../../minixs/pageInit.js";
  2 +import {culturalValuesDatas,culturalDatas} from "../../../../assets/img/data/aboutData.js";
  3 +
2 export default { 4 export default {
3 name: 'home', 5 name: 'home',
4 template: '', 6 template: '',
@@ -6,30 +8,89 @@ export default { @@ -6,30 +8,89 @@ export default {
6 components: {}, 8 components: {},
7 props: [], 9 props: [],
8 setup(props, {attrs, slots, emit}) { 10 setup(props, {attrs, slots, emit}) {
9 - 11 + let culturalValuesData=Vue.ref(culturalValuesDatas());
  12 + let culturalData=Vue.ref(culturalDatas());
10 13
11 var imgs = [{ 14 var imgs = [{
12 name:'质量管理体系认证证书', 15 name:'质量管理体系认证证书',
13 - path:'assets/img/zzzs/1.jpg' 16 + path:'assets/img/about/certificate/1.png'
14 },{ 17 },{
15 name:'技术服务管理体系认证证书', 18 name:'技术服务管理体系认证证书',
16 - path:'assets/img/zzzs/2.jpg' 19 + path:'assets/img/about/certificate/2.png'
17 },{ 20 },{
18 name:'连续性管理体系认证证书', 21 name:'连续性管理体系认证证书',
19 - path:'assets/img/zzzs/3.png' 22 + path:'assets/img/about/certificate/3.png'
20 },{ 23 },{
21 name:'信息安全管理体系认证证书', 24 name:'信息安全管理体系认证证书',
22 - path:'assets/img/zzzs/4.png'  
23 - }/*,{  
24 - name:'北京市“专精特新”中小企业',  
25 - path:'assets/img/zzzs/5.jpg'  
26 - }*/]; 25 + path:'assets/img/about/certificate/4.png'
  26 + },{
  27 + path:'assets/img/about/certificate/5.png'
  28 + },{
  29 + path:'assets/img/about/certificate/6.png'
  30 + },{
  31 + path:'assets/img/about/certificate/7.png'
  32 + },{
  33 + path:'assets/img/about/certificate/8.png'
  34 + }];
  35 + let flag =Vue.ref(true);
  36 + let i=Vue.ref(0);
  37 + let MousewheelFun=(e)=>{
  38 + let hei=$('.wrap-container>section').first().outerHeight();
  39 + // 控制滑动一次
  40 + if(flag.value){
  41 + // 上滑
  42 + if(e.deltaY<0){
  43 + // 不能上滑了
  44 + if(i.value>0){
  45 + console.log(i)
  46 + i.value--;
  47 + flag.value = false;
  48 + $('.wrap-container').animate({top:-i.value*hei},1000,function(){
  49 + flag.value=true;
  50 + })
  51 + }
  52 + }//下滑
  53 + else{
  54 + // 这个if让它不能让下继续滑动
  55 + if(i.value<7){
  56 + i.value++;
  57 + flag.value = false;
  58 + $('.wrap-container').animate({top:-i.value*hei},1000,function(){
  59 + flag.value=true;
  60 + })
  61 + }
  62 + }
  63 + }
  64 + $('.wrap-container section:nth-child('+(i.value+1)+') .wow').removeAttr('style');
  65 + if(i.value==2 || i.value==4 || i.value==6){
  66 + $('.navigation').removeClass('navigation-white');
  67 + $('.logo-outer .hg-logo').attr('src','assets/img/logo.png');
27 68
28 - Vue.onMounted(() =>{}) 69 + }else{
  70 + $('.navigation').addClass('navigation-white');
  71 + $('.logo-outer .hg-logo').attr('src','assets/img/logo-footer.png');
  72 +
  73 + }
  74 +
  75 + }
  76 + Vue.onMounted(() =>{
  77 + if(window.location.hash=='#/about'){
  78 + $('.footer-section').hide();
  79 + let html=`<section>
  80 + <footer class="footer-section pt-100 footer-section-about">`+$('.footer-section').html()+`</footer>
  81 + </section>`
  82 + $('.wrap-container').append(html)
  83 + }
  84 + })
29 85
30 86
31 return { 87 return {
32 - imgs 88 + imgs,
  89 + culturalValuesData,
  90 + culturalData,
  91 + MousewheelFun,
  92 + flag,
  93 + i
33 } 94 }
34 95
35 } 96 }
1 -<section class="hero-section rel rpt-150 pb-130 rpb-0"> 1 +<section class="hero-section rel rpt-150 rpb-0">
2 <div class="shape shapeAnimationOne l-10 t-60"> 2 <div class="shape shapeAnimationOne l-10 t-60">
3 <img src="assets/img/shapes/shape1.png" alt="Shape"> 3 <img src="assets/img/shapes/shape1.png" alt="Shape">
4 </div> 4 </div>
@@ -134,7 +134,7 @@ @@ -134,7 +134,7 @@
134 <section class="team-section rel pt-80 pb-80"> 134 <section class="team-section rel pt-80 pb-80">
135 <div class="container"> 135 <div class="container">
136 <div class="section-title mb-35 pr-65 align-items-center flex-column-center"> 136 <div class="section-title mb-35 pr-65 align-items-center flex-column-center">
137 - <div class="title-style">”魔镜智能“全面完成国产化兼容适配认证</div> 137 + <div class="title-style">"魔镜智能"全面完成国产化兼容适配认证</div>
138 <div class="title-intro pt-20">完成对主流国产服务器、数据库、操作系统、中间件、等兼容适配，并取得一系列兼容性认证</div> 138 <div class="title-intro pt-20">完成对主流国产服务器、数据库、操作系统、中间件、等兼容适配，并取得一系列兼容性认证</div>
139 </div> 139 </div>
140 <div class="section-item-content owl-dots"> 140 <div class="section-item-content owl-dots">
1 -<section class="hero-section rel rpt-150 pb-130 rpb-0"> 1 +<section class="hero-section rel rpt-150 rpb-0">
2 <div class="shape shapeAnimationOne l-10 t-60"> 2 <div class="shape shapeAnimationOne l-10 t-60">
3 <img src="assets/img/shapes/shape1.png" alt="Shape"> 3 <img src="assets/img/shapes/shape1.png" alt="Shape">
4 </div> 4 </div>