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 507 additions and 197 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;
@@ -2443,4 +2445,234 @@ blockquote:before { @@ -2443,4 +2445,234 @@ blockquote:before {
2443 .hot-recruit-box .hotList>a{ 2445 .hot-recruit-box .hotList>a{
2444 font-size: 14px; 2446 font-size: 14px;
2445 color: #8C8C8C; 2447 color: #8C8C8C;
  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;
2446 } 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,221 +9,184 @@ @@ -9,221 +9,184 @@
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">  
26 - <div class="container">  
27 - <div class="row align-items-center">  
28 - <div class="col-lg-7"> 17 + <section class="about-section rel all-height">
  18 + <div class="container">
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> 21 + <span class="title-style">公司简介</span>
33 </div> 22 </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"> 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>
40 </div> 24 </div>
41 </div> 25 </div>
42 - </div>  
43 - </div> 26 + <div class="know-intro"></div>
44 27
45 - <div class="shape shapeAnimationFour l-10 t-5">  
46 - <img src="assets/img/shapes/shape4.png" alt="Shape">  
47 - </div>  
48 - <div class="shape shapeAnimationFive r-10 t-100 zm-1">  
49 - <img src="assets/img/shapes/shape2.png" alt="Shape">  
50 - </div>  
51 -</section> 28 + <div class="shape shapeAnimationFour l-10 t-5">
  29 + <img src="assets/img/shapes/shape4.png" alt="Shape">
  30 + </div>
  31 + <div class="shape shapeAnimationFive r-10 t-100 zm-1">
  32 + <img src="assets/img/shapes/shape2.png" alt="Shape">
  33 + </div>
  34 + </section>
52 35
53 -<section class="services-section rel text-center mt-100 mb-80">  
54 - <div class="container">  
55 - <div class="row">  
56 - <div class="col-lg-12 col-md-12">  
57 - <h4><a href="#">企业文化</a></h4>  
58 - <p>诚心铸就品质，创新引导未来</p>  
59 - </div>  
60 - </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"> 36 + <section class="about-section rel text-center">
  37 + <div class="container">
  38 + <div class="row wow customFadeInRight delay-0-1s slow">
  39 + <div class="col-lg-12 col-md-12">
  40 + <div class="title-style">鸿果文化价值观及企业目标</div>
67 </div> 41 </div>
68 - <div class="service-content pb-2">  
69 - <h4>快乐高效</h4> 42 + </div>
  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>
70 </div> 47 </div>
71 </div> 48 </div>
72 - </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>
  57 + </div>
  58 + </div>
  59 +
  60 + </div>
73 61
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> 62 </div>
83 </div> 63 </div>
84 </div> 64 </div>
85 65
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"> 66 + <div class="shape shapeAnimationOne l-10 t-0">
  67 + <img src="assets/img/shapes/shape3.png" alt="Shape">
  68 + </div>
  69 + <div class="shape shapeAnimationTwo t-100 r-5">
  70 + <img src="assets/img/shapes/shape1.png" alt="Shape">
  71 + </div>
  72 + </section>
  73 + <section class="success-section pt-135 pb-20">
  74 + <div class="container">
  75 + <div class="row">
  76 + <div class="col-lg-3 col-md-6">
  77 + <div class="success-box">
  78 + <i class="flaticon-competition"></i>
  79 + <div class="count-wrap">
  80 + <span class="count-text plus" data-speed="5000" data-stop="78"></span>
  81 + <p>资质证书</p>
  82 + </div>
  83 + </div>
  84 + </div>
  85 + <div class="col-lg-3 col-md-6">
  86 + <div class="success-box">
  87 + <i class="flaticon-happy"></i>
  88 + <div class="count-wrap">
  89 + <span class="count-text plus" data-speed="5000" data-stop="280"></span>
  90 + <p>客户数</p>
  91 + </div>
  92 + </div>
90 </div> 93 </div>
91 - <div class="service-content pb-2">  
92 - <h4>互利共赢</h4> 94 + <div class="col-lg-3 col-md-6">
  95 + <div class="success-box">
  96 + <i class="flaticon-admin"></i>
  97 + <div class="count-wrap">
  98 + <span class="count-text plus" data-speed="5000" data-stop="100"></span>
  99 + <p>团队</p>
  100 + </div>
  101 + </div>
  102 + </div>
  103 + <div class="col-lg-3 col-md-6">
  104 + <div class="success-box">
  105 + <i class="flaticon-startup"></i>
  106 + <div class="count-wrap">
  107 + <span class="count-text plus" data-speed="5000" data-stop="320"></span>
  108 + <p>完成的项目</p>
  109 + </div>
  110 + </div>
93 </div> 111 </div>
94 </div> 112 </div>
95 </div> 113 </div>
96 - </div>  
97 - </div>  
98 -  
99 - <div class="shape shapeAnimationOne l-10 t-0">  
100 - <img src="assets/img/shapes/shape3.png" alt="Shape">  
101 - </div>  
102 - <div class="shape shapeAnimationTwo t-100 r-5">  
103 - <img src="assets/img/shapes/shape1.png" alt="Shape">  
104 - </div>  
105 -</section> 114 + <div class="about-video-bg small"></div>
106 115
107 -<section class="success-section pt-105 pb-50">  
108 - <div class="container">  
109 - <div class="row">  
110 - <div class="col-lg-3 col-md-6">  
111 - <div class="success-box">  
112 - <i class="flaticon-competition"></i>  
113 - <div class="count-wrap">  
114 - <span class="count-text plus" data-speed="5000" data-stop="78"></span>  
115 - <p>资质证书</p>  
116 - </div>  
117 - </div> 116 + <div class="shape shapeAnimationFour r-5 t-100">
  117 + <img src="assets/img/shapes/shape3.png" alt="Shape">
118 </div> 118 </div>
119 - <div class="col-lg-3 col-md-6">  
120 - <div class="success-box">  
121 - <i class="flaticon-happy"></i>  
122 - <div class="count-wrap">  
123 - <span class="count-text plus" data-speed="5000" data-stop="280"></span>  
124 - <p>客户数</p> 119 + <div class="video-section rel">
  120 + <div class="container">
  121 + <div class="video-wrap">
  122 + <img src="assets/img/video-bg.png" alt="Video BG">
  123 + <a href="assets/img/about/about.mp4" class="vedio-play mfp-iframe"><i class="flaticon-play"></i></a>
125 </div> 124 </div>
126 </div> 125 </div>
127 - </div>  
128 - <div class="col-lg-3 col-md-6">  
129 - <div class="success-box">  
130 - <i class="flaticon-admin"></i>  
131 - <div class="count-wrap">  
132 - <span class="count-text plus" data-speed="5000" data-stop="100"></span>  
133 - <p>团队</p>  
134 - </div> 126 +
  127 + <div class="shape shapeAnimationThree b-40 l-10">
  128 + <img src="assets/img/shapes/shape1.png" alt="Shape">
135 </div> 129 </div>
136 - </div>  
137 - <div class="col-lg-3 col-md-6">  
138 - <div class="success-box">  
139 - <i class="flaticon-startup"></i>  
140 - <div class="count-wrap">  
141 - <span class="count-text plus" data-speed="5000" data-stop="320"></span>  
142 - <p>完成的项目</p>  
143 - </div> 130 + <div class="shape shapeAnimationFive b-5 l-5">
  131 + <img src="assets/img/shapes/shape3.png" alt="Shape">
  132 + </div>
  133 + <div class="shape left-right r-10 b-30">
  134 + <img src="assets/img/shapes/shape5.png" alt="Shape">
  135 + </div>
  136 + <div class="shape shapeAnimationOne r-10 b-0">
  137 + <img src="assets/img/shapes/shape2.png" alt="Shape">
144 </div> 138 </div>
145 </div> 139 </div>
146 - </div>  
147 - </div>  
148 -  
149 - <div class="success-bg small"></div>  
150 -  
151 - <div class="shape shapeAnimationFour r-5 t-100">  
152 - <img src="assets/img/shapes/shape3.png" alt="Shape">  
153 - </div>  
154 -</section>  
155 -  
156 -<div class="video-section rel mb-115">  
157 - <div class="container">  
158 - <div class="video-wrap">  
159 - <img src="assets/img/video-bg.png" alt="Video BG">  
160 - <a href="assets/img/about/about.mp4" class="vedio-play mfp-iframe"><i class="flaticon-play"></i></a>  
161 - </div>  
162 - </div>  
163 -  
164 - <div class="shape shapeAnimationThree b-40 l-10">  
165 - <img src="assets/img/shapes/shape1.png" alt="Shape">  
166 - </div>  
167 - <div class="shape shapeAnimationFive b-5 l-5">  
168 - <img src="assets/img/shapes/shape3.png" alt="Shape">  
169 - </div>  
170 - <div class="shape left-right r-10 b-30">  
171 - <img src="assets/img/shapes/shape5.png" alt="Shape">  
172 - </div>  
173 - <div class="shape shapeAnimationOne r-10 b-0">  
174 - <img src="assets/img/shapes/shape2.png" alt="Shape">  
175 - </div>  
176 -</div>  
177 -  
178 -<section class="team-section rel mb-65">  
179 - <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>-->  
183 - </div> 140 + </section>
184 141
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> 142 + <section class="partner-section pt-105 pb-50">
  143 + <div class="container">
  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>
  147 + </div>
191 </div> 148 </div>
192 </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="资质&证书">
  164 + </div>
  165 + </div>
193 166
194 - </div>  
195 - </div>  
196 - <div class="shape shapeAnimationFour l-10 t-100">  
197 - <img src="assets/img/shapes/shape2.png" alt="Shape">  
198 - </div>  
199 - <div class="shape shapeAnimationThree b-30 r-10">  
200 - <img src="assets/img/shapes/shape1.png" alt="Shape">  
201 - </div>  
202 -</section>  
203 -  
204 -  
205 -  
206 -<section class="services-section rel text-center mt-100 mb-80">  
207 - <div class="container">  
208 - <div class="row">  
209 - <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">  
214 </div> 167 </div>
215 </div> 168 </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> 169 + <div class="qualification-bg"></div>
  170 + <div class="shape shapeAnimationFour l-10 t-100">
  171 + <img src="assets/img/shapes/shape2.png" alt="Shape">
  172 + </div>
  173 + <div class="shape shapeAnimationThree b-30 r-10">
  174 + <img src="assets/img/shapes/shape1.png" alt="Shape">
  175 + </div>
  176 + </section>
  177 + <section class="about-section rel text-center">
  178 + <div class="container">
  179 + <div class="row wow customFadeInRight delay-0-1s slow">
  180 + <div class="col-lg-12 col-md-12">
  181 + <div class="title-style">合作流程</div>
  182 + <div class="title-intro pt-30">专业技术顾问，提供一对一服务</div>
  183 + </div>
222 </div> 184 </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');
  68 +
  69 + }else{
  70 + $('.navigation').addClass('navigation-white');
  71 + $('.logo-outer .hg-logo').attr('src','assets/img/logo-footer.png');
27 72
28 - Vue.onMounted(() =>{}) 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>