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,
background-position: center bottom;
background-size: cover;
padding: 200px;
height: calc(100vh);
}
.hero-content h1 {
font-weight: 300;
... ... @@ -679,7 +680,7 @@ textarea:placeholder,
Start Video Section
====================================================================***/
.video-wrap {
max-width: 960px;
max-width: 760px;
margin: auto;
position: relative;
border-radius: 20px;
... ... @@ -2310,6 +2311,7 @@ blockquote:before {
font-size: 36px;
color:#333333;
line-height: normal;
font-family: 'MicrosoftYaHei-Bold';
}
.title-intro{
font-size: 18px;
... ... @@ -2444,3 +2446,233 @@ blockquote:before {
font-size: 14px;
color: #8C8C8C;
}
/*lsq 了解鸿果样式调整*/
.know-intro{
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: -1;
background: url('../img/about/know-intro.png');
background-size: cover;
}
.all-height{
height:calc(100vh);
}
.about-section{
display: flex;
align-items: center;
justify-content: center;
}
.section-title .title-style{
color:#ffffff;
display: flex;
justify-content: center;
}
.cultural-item-0{
background: url('../img/about/cultural-1.png');
}
.cultural-item-1,.cultural-item-2{
background: url('../img/about/cultural-2.png');
}
.culturalValues-item{
display: flex;
align-items: center;
}
.culturalValues-item img{
max-width: 90px;
}
.culturalValues-title{
font-size: 18px;
color:#333;
}
.cultural-title{
color:#fff;
font-size: 24px;
height: 20%;
width: 100%;
align-items: center;
display: flex;
justify-content: center;
}
.cultural-contain{
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.cultural-con-item{
color:#333;
font-size: 18px;
padding:20px;
}
.cultural-con{
flex:1;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.cultural-item-l img{
max-width: 400px;
}
.about-video-bg{
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: -1;
background: url('../img/about/about-video.png');
background-size: cover;
}
.partner-section{
position: relative;
}
.partner-bg-xs{
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: -1;
background: url('../img/about/partner.png');
background-size: cover;
}
@media (min-width: 996px){
.partner-bg{
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: -1;
background: url('../img/about/partner-bg.png');
background-size: cover;
}
}
.partner-con{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.partner-con-center{
justify-content: center;
}
.partner-item{
margin:20px 0;
position: relative;
justify-content: center;
display: flex;
align-items: center;
cursor: pointer;
}
.partner-item:hover img{
transform: scale(1.1,1.1);
box-shadow: 0 1px 10px 8px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
.partner-con:first-child .partner-item:nth-child(4),.partner-con:nth-child(4) .partner-item:nth-child(4){
display: none;
}
.partner-con:first-child .partner-item:nth-child(1),.partner-con:first-child .partner-item:nth-child(3) {
left:30px;
}
.partner-con:nth-child(2) .partner-item:nth-child(2){
left:-30px;
}
.partner-con:nth-child(2) .partner-item:nth-child(3){
left:-60px;
}
.partner-con:nth-child(3) .partner-item:nth-child(1),.partner-con:nth-child(3) .partner-item:nth-child(4){
left:60px;
}
.partner-con:nth-child(3) .partner-item:nth-child(2),.partner-con:nth-child(3) .partner-item:nth-child(3){
left:100px;
}
.partner-con:nth-child(4) .partner-item:nth-child(2){
left:30px;
}
.partner-con-center .partner-item:nth-child(2){
margin:0;
}
.qualification-section{
height:calc(100vh);
display: flex;
align-items: center;
}
.qualification-bg{
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: -1;
background: url('../img/about/qualification-bg.png');
background-size: cover;
}
.qualification-con{
left: 20%;
}
.qualification-con .qualification-item{
height: calc(100vh/2);
max-height: calc(100vh/2);
display: flex;
align-items: center;
}
.qualification-con .qualification-item .item-con{
border:10px solid #333;
border-radius: 10px;
}
.qualification-section .owl-carousel .owl-item img{
width: auto;
max-height: 400px;
}
.qualification-section .team-carousel .owl-nav{
bottom: 0;
top: 115%;
left: -40%;
}
.qualification-section .flaticon-left-arrow:before,.qualification-section .flaticon-right-arrow:before{
content:''
}
.qualification-section .team-carousel .owl-nav button.owl-prev{
background:url("../img/about/arrow-left.png");
width: 50px;
height:50px;
border:none!important;
}
.qualification-section .team-carousel .owl-nav button.owl-next{
background:url("../img/about/arrow-right.png");
width: 50px;
height:50px;
}
.qualification-section .team-carousel .owl-nav button.owl-prev:hover,.qualification-section .team-carousel .owl-nav button.owl-next:hover{
box-shadow:0 1px 10px 8px rgba(0, 0, 0, 0.3) ;
}
.wrap{
overflow: hidden;
height: calc(100vh);
}
.wrap-container{
position: relative;
top: 0;
left: 0;
}
.wrap section{
height: calc(100vh);
}
.footer-section-about{
height: 100%;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
\ No newline at end of file
... ...

1.31 MB | W: 0px | H: 0px

2.48 MB | W: 0px | H: 0px

  • 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
export function culturalValuesDatas() {
let res = [
{
icon:'assets/img/about/culturalValues-1.png',
title:'"高"客户满意度'
},
{
icon:'assets/img/about/culturalValues-2.png',
title:'"高"效率运转'
},
{
icon:'assets/img/about/culturalValues-3.png',
title:'"高"核心员工满意度'
},
{
icon:'assets/img/about/culturalValues-4.png',
title:'"高"成本合理支出'
}
]
return res;
}
export function culturalDatas() {
let res = [
{
bg:'assets/img/about/cultural-1.png',
title:'文化',
introData:['快乐高效','成长进步','互利共赢']
},
{
bg:'assets/img/about/cultural-2.png',
title:'核心价值观',
introData:['担当','拼搏','共赢']
},
{
bg:'assets/img/about/cultural-2.png',
title:'使命与愿景',
introData:['追求高客户满意度','成为主流行业信息化解决方案','的最佳合作伙伴']
}
]
return res;
}
export function partnerDatas() {
let res = [
{img:'assets/img/about/partner/partner-1.png'}
]
return res;
}
\ No newline at end of file
... ...

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) => {
let pathArr=path.split('/');
if(pathArr.length>2){
toPath=pathArr[1];
//lsq 设置二级页面时的导航样式
$('.logo-outer .hg-logo').attr('src','assets/img/logo.png');
$('.navigation').removeClass('navigation-white');
}else{
$('.logo-outer .hg-logo').attr('src','assets/img/logo-footer.png');
$('.navigation').addClass('navigation-white');
}
}
$('[top-nav]').removeClass('current');
... ... @@ -96,6 +102,7 @@ router.beforeEach(async (to, from, next) => {
$('html, body').animate({
scrollTop: 0
}, 500);
next();
})
... ...
<section class="hero-section rel rpt-150 pb-130 rpb-0">
<section class="hero-section rel rpt-150 rpb-0">
<div class="shape shapeAnimationOne l-10 t-60">
<img src="assets/img/shapes/shape1.png" alt="Shape">
</div>
... ... @@ -9,38 +9,21 @@
<img src="assets/img/shapes/shape3.png" alt="Shape">
</div>
</section>
<div class="wrap" @Mousewheel="MousewheelFun">
<div class="wrap-container">
<section class="concat-about rel rpt-150 pb-130 rpb-0 text-left ">
</section>
<section class="concat-about rel rpt-150 pb-130 rpb-0 text-left ">
</section>
<section class="banner-section rel" style="height: 100px">
<div class="container">
<h2 class="page-title">关于鸿果科技</h2>
</div>
</section>
<section class="about-section rel mt-85 mb-100">
<section class="about-section rel all-height">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-7">
<div class="about-content mr-20 rmr-0 rmb-50 wow customFadeInRight delay-0-1s slow">
<div class="section-title mb-35">
<span class="sub-title">公司简介</span>
<h2>鸿果科技</h2>
</div>
<p>北京鸿果秋实科技有限公司2012年成立，定位于提供4S信息化解决方案的高科技公司：（Software-软件，Service-服务，Solution-解决方案，Sale-销售），公司专注于软件解决方案和整体服务交付领域，已陆续成为税务、社保、财政、通信运营商等行业业IT运维领域的领先者。北京鸿果科技依托“金税三期” 、“互联网+智能化AI+行业应用”的变革时机，充分运用智能化、运维大数据思维，引入AI、算法和业务深度理解，共同打造AIOps生态圈。公司基于多年政府行业的市场、销售、技术、产品经验积累，先后在多省市政府、央企承建了“综合监控管理平台（A-view V1.0）、自动化巡检平台、智能告警算法平台、数据安全运维管理平台、一体化运维大数据管理应用平台（D-viewV1.0）”等，陆续承建了浙江省、新疆、陕西、贵州、天津、吉林、辽宁、内蒙古、宁夏等税务局“金三”重大信息化项目。 目前公司拥有《国家高新企业》《中国信息安全服务集成资质》、《中国信息安全运维资质》、 《软件企业》资质、多项自主的软件著作权，评选为“优秀信息化软件企业合作伙伴”、"专精特新"企业。</p>
</div>
</div>
<div class="col-lg-5">
<div class="about-image wow customFadeInLeft delay-0-1s slow">
<img src="assets/img/about/about1.jpg" style="border-radius: 10px">
</div>
<span class="title-style">公司简介</span>
</div>
<div class="title-intro color-white">北京鸿果秋实科技有限公司2012年成立，定位于提供4S信息化解决方案的高科技公司：（Software-软件，Service-服务，Solution-解决方案，Sale-销售），公司专注于软件解决方案和整体服务交付领域，已陆续成为税务、社保、财政、通信运营商等行业业IT运维领域的领先者。北京鸿果科技依托“金税三期” 、“互联网+智能化AI+行业应用”的变革时机，充分运用智能化、运维大数据思维，引入AI、算法和业务深度理解，共同打造AIOps生态圈。公司基于多年政府行业的市场、销售、技术、产品经验积累，先后在多省市政府、央企承建了“综合监控管理平台（A-view V1.0）、自动化巡检平台、智能告警算法平台、数据安全运维管理平台、一体化运维大数据管理应用平台（D-viewV1.0）”等，陆续承建了浙江省、新疆、陕西、贵州、天津、吉林、辽宁、内蒙古、宁夏等税务局“金三”重大信息化项目。 目前公司拥有《国家高新企业》《中国信息安全服务集成资质》、《中国信息安全运维资质》、 《软件企业》资质、多项自主的软件著作权，评选为“优秀信息化软件企业合作伙伴”、"专精特新"企业。</div>
</div>
</div>
<div class="know-intro"></div>
<div class="shape shapeAnimationFour l-10 t-5">
<img src="assets/img/shapes/shape4.png" alt="Shape">
... ... @@ -48,50 +31,34 @@
<div class="shape shapeAnimationFive r-10 t-100 zm-1">
<img src="assets/img/shapes/shape2.png" alt="Shape">
</div>
</section>
</section>
<section class="services-section rel text-center mt-100 mb-80">
<section class="about-section rel text-center">
<div class="container">
<div class="row">
<div class="row wow customFadeInRight delay-0-1s slow">
<div class="col-lg-12 col-md-12">
<h4><a href="#">企业文化</a></h4>
<p>诚心铸就品质，创新引导未来</p>
<div class="title-style">鸿果文化价值观及企业目标</div>
</div>
</div>
<div class="row">
<!-- single-service -->
<div class="col-lg-4 col-md-6">
<div class="single-service-box">
<div class="service-icon mb-25">
<img src="assets/img/services/service4.png" alt="Service Icon">
<div class="row pt-30 wow">
<div class="col-lg-3 culturalValues-item" v-for="item in culturalValuesData">
<img :src="item.icon" alt="">
<div class="culturalValues-title customFadeInRight delay-0-1s slow">{{item.title}}</div>
</div>
<div class="service-content pb-2">
<h4>快乐高效</h4>
</div>
<div class="row pt-30 mb-50">
<div :class="['col-lg-4', 'cultural-item'] " v-for="(item,index) in culturalData">
<div class="cultural-item-l">
<img :src="item.bg" alt="">
<div class="cultural-contain wow customFadeInRight delay-0-1s slow">
<div class="cultural-title">{{item.title}}</div>
<div class="cultural-con">
<div class="cultural-con-item" v-for="itemI in item.introData">{{itemI}}</div>
</div>
</div>
<!-- single-service -->
<div class="col-lg-4 col-md-6">
<div class="single-service-box">
<div class="service-icon mb-25">
<img src="assets/img/services/service5.png" alt="Service Icon">
</div>
<div class="service-content pb-2">
<h4><a href="#">成长进步</a></h4>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-service-box">
<div class="service-icon mb-25">
<img src="assets/img/services/service6.png" alt="Service Icon">
</div>
<div class="service-content pb-2">
<h4>互利共赢</h4>
</div>
</div>
</div>
</div>
</div>
... ... @@ -102,9 +69,8 @@
<div class="shape shapeAnimationTwo t-100 r-5">
<img src="assets/img/shapes/shape1.png" alt="Shape">
</div>
</section>
<section class="success-section pt-105 pb-50">
</section>
<section class="success-section pt-135 pb-20">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6">
... ... @@ -145,15 +111,12 @@
</div>
</div>
</div>
<div class="success-bg small"></div>
<div class="about-video-bg small"></div>
<div class="shape shapeAnimationFour r-5 t-100">
<img src="assets/img/shapes/shape3.png" alt="Shape">
</div>
</section>
<div class="video-section rel mb-115">
<div class="video-section rel">
<div class="container">
<div class="video-wrap">
<img src="assets/img/video-bg.png" alt="Video BG">
... ... @@ -173,57 +136,57 @@
<div class="shape shapeAnimationOne r-10 b-0">
<img src="assets/img/shapes/shape2.png" alt="Shape">
</div>
</div>
</div>
</section>
<section class="team-section rel mb-65">
<section class="partner-section pt-105 pb-50">
<div class="container">
<div class="section-title mb-35 pr-65">
<span class="sub-title">资质&证书</span>
<!--<h2>Our Skilled Member Whose Efforts <br>资质&证书</h2>-->
<div class="row">
<div :class="['partner-con', 'col-lg-3',{'partner-con-center':index==0 || index==3}]" v-for="(item,index) in 4">
<div class="partner-item" v-for="(itemC,indexC) in 4"><img :src="'assets/img/about/partner/partner-'+item+'-'+itemC+'.png'" alt=""></div>
</div>
<div class="team-carousel owl-carousel text-center">
<div class="team-item" v-for="item in imgs">
<img :src="item.path" alt="资质&证书" style="height: 100%">
<div class="service-two-content">
<h5>{{item.name}}</h5>
</div>
</div>
<div class="partner-bg partner-bg-xs"></div>
<div class="shape shapeAnimationThree b-40 l-10">
<img src="assets/img/shapes/shape1.png" alt="Shape">
</div>
<div class="shape shapeAnimationFive b-5 l-5">
<img src="assets/img/shapes/shape3.png" alt="Shape">
</div>
</section>
<section class="team-section rel qualification-section ">
<div class="container">
<div class="team-carousel owl-carousel text-center qualification-con">
<div class="qualification-item" v-for="item in imgs">
<div class="item-con">
<img :src="item.path" alt="资质&证书">
</div>
</div>
</div>
</div>
<div class="qualification-bg"></div>
<div class="shape shapeAnimationFour l-10 t-100">
<img src="assets/img/shapes/shape2.png" alt="Shape">
</div>
<div class="shape shapeAnimationThree b-30 r-10">
<img src="assets/img/shapes/shape1.png" alt="Shape">
</div>
</section>
<section class="services-section rel text-center mt-100 mb-80">
</section>
<section class="about-section rel text-center">
<div class="container">
<div class="row">
<div class="row wow customFadeInRight delay-0-1s slow">
<div class="col-lg-12 col-md-12">
<!-- <h4><a href="#">合作流程</a></h4>
<p>专业技术顾问，提供一对一服务</p>-->
<div class="service-icon mb-25">
<img src="assets/img/about/hzlc.png">
<div class="title-style">合作流程</div>
<div class="title-intro pt-30">专业技术顾问，提供一对一服务</div>
</div>
</div>
</div>
<!--<div class="col-lg-12 col-md-12">
<div class="single-service-box">
<div class="service-content">
<h4><a href="#">合作流程</a></h4>
<p>专业技术顾问，提供一对一服务</p>
</div>
<div class="service-icon mb-25">
<img src="assets/img/services/service5.png" alt="Service Icon">
<div class="about-process pt-80">
<img src="assets/img/about/hzlc.png">
</div>
</div>
</div>-->
</section>
</div>
</section>
</div>
... ...
import pageInit from "../../minixs/pageInit.js";
import {culturalValuesDatas,culturalDatas} from "../../../../assets/img/data/aboutData.js";
export default {
name: 'home',
template: '',
... ... @@ -6,30 +8,89 @@ export default {
components: {},
props: [],
setup(props, {attrs, slots, emit}) {
let culturalValuesData=Vue.ref(culturalValuesDatas());
let culturalData=Vue.ref(culturalDatas());
var imgs = [{
name:'质量管理体系认证证书',
path:'assets/img/zzzs/1.jpg'
path:'assets/img/about/certificate/1.png'
},{
name:'技术服务管理体系认证证书',
path:'assets/img/zzzs/2.jpg'
path:'assets/img/about/certificate/2.png'
},{
name:'连续性管理体系认证证书',
path:'assets/img/zzzs/3.png'
path:'assets/img/about/certificate/3.png'
},{
name:'信息安全管理体系认证证书',
path:'assets/img/zzzs/4.png'
}/*,{
name:'北京市“专精特新”中小企业',
path:'assets/img/zzzs/5.jpg'
}*/];
path:'assets/img/about/certificate/4.png'
},{
path:'assets/img/about/certificate/5.png'
},{
path:'assets/img/about/certificate/6.png'
},{
path:'assets/img/about/certificate/7.png'
},{
path:'assets/img/about/certificate/8.png'
}];
let flag =Vue.ref(true);
let i=Vue.ref(0);
let MousewheelFun=(e)=>{
let hei=$('.wrap-container>section').first().outerHeight();
// 控制滑动一次
if(flag.value){
// 上滑
if(e.deltaY<0){
// 不能上滑了
if(i.value>0){
console.log(i)
i.value--;
flag.value = false;
$('.wrap-container').animate({top:-i.value*hei},1000,function(){
flag.value=true;
})
}
}//下滑
else{
// 这个if让它不能让下继续滑动
if(i.value<7){
i.value++;
flag.value = false;
$('.wrap-container').animate({top:-i.value*hei},1000,function(){
flag.value=true;
})
}
}
}
$('.wrap-container section:nth-child('+(i.value+1)+') .wow').removeAttr('style');
if(i.value==2 || i.value==4 || i.value==6){
$('.navigation').removeClass('navigation-white');
$('.logo-outer .hg-logo').attr('src','assets/img/logo.png');
Vue.onMounted(() =>{})
}else{
$('.navigation').addClass('navigation-white');
$('.logo-outer .hg-logo').attr('src','assets/img/logo-footer.png');
}
}
Vue.onMounted(() =>{
if(window.location.hash=='#/about'){
$('.footer-section').hide();
let html=`<section>
<footer class="footer-section pt-100 footer-section-about">`+$('.footer-section').html()+`</footer>
</section>`
$('.wrap-container').append(html)
}
})
return {
imgs
imgs,
culturalValuesData,
culturalData,
MousewheelFun,
flag,
i
}
}
... ...
<section class="hero-section rel rpt-150 pb-130 rpb-0">
<section class="hero-section rel rpt-150 rpb-0">
<div class="shape shapeAnimationOne l-10 t-60">
<img src="assets/img/shapes/shape1.png" alt="Shape">
</div>
... ...
... ... @@ -134,7 +134,7 @@
<section class="team-section rel pt-80 pb-80">
<div class="container">
<div class="section-title mb-35 pr-65 align-items-center flex-column-center">
<div class="title-style">”魔镜智能“全面完成国产化兼容适配认证</div>
<div class="title-style">"魔镜智能"全面完成国产化兼容适配认证</div>
<div class="title-intro pt-20">完成对主流国产服务器、数据库、操作系统、中间件、等兼容适配，并取得一系列兼容性认证</div>
</div>
<div class="section-item-content owl-dots">
... ...
<section class="hero-section rel rpt-150 pb-130 rpb-0">
<section class="hero-section rel rpt-150 rpb-0">
<div class="shape shapeAnimationOne l-10 t-60">
<img src="assets/img/shapes/shape1.png" alt="Shape">
</div>
... ...