monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 05becadfac9704924a5d8721901b64641787b271 1 parent 6056e14b

【无】门户网站-首页调整

Inline Side-by-side
Showing 38 changed files with 477 additions and 167 deletions
... ... @@ -26,6 +26,36 @@
Start Global CSS
====================================================================
***/
@font-face {
font-family: 'PingFang SC';
font-style: normal;
font-weight: normal;
src: url('../fonts/pingfang/PINGFANG BOLD.TTF');
}
@font-face {
font-family: 'PingFang-SC-medium';
font-style: normal;
font-weight: normal;
src: url('../fonts/pingfang/PINGFANG MEDIUM.TTF');
}
@font-face {
font-family: 'PingFang-SC-light';
font-style: normal;
font-weight: normal;
src: url('../fonts/pingfang/PINGFANG LIGHT.TTF');
}
@font-face {
font-family: 'PingFang-SC-heavy';
font-style: normal;
font-weight: normal;
src:url('../fonts/pingfang/PINGFANG HEAVY.TTF');
}
@font-face {
font-family: 'PingFang-SC-extralight';
font-style: normal;
font-weight: normal;
src:url('../fonts/pingfang/PINGFANG EXTRALIGHT.TTF');
}
* {
margin: 0px;
padding: 0px;
... ... @@ -37,7 +67,7 @@ body {
position: relative;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
font-family:'PingFang SC', 'Open Sans', sans-serif;
font-weight: 400;
font-size: 16px;
color: #848484;
... ... @@ -720,7 +750,12 @@ textarea:placeholder,
border-radius: 25px;
box-shadow: 0 1px 17px rgba(0, 0, 0, 0.07);
}
.services-section{
height: calc(100vh) ;
display: flex;
align-items: center;
flex-flow: column;
}
.service-image {
margin-bottom: 20px;
}
... ... @@ -750,7 +785,7 @@ textarea:placeholder,
.service-carousel .owl-dots .owl-dot.active {
background-color: #1C00AF;
width: 42px;
width: 36px;
}
... ... @@ -1739,34 +1774,53 @@ blockquote:before {
position: relative;
display: flex;
justify-content: center;
flex-flow: column;
}
.single-service-box{
padding:0;
}
.tooltip-self{
background-color: transparent;
/*background-color: transparent;*/
width:100%;
height:100%;
display: flex;
align-items: center;
justify-content: center;
line-height: 30px;
background:url("../img/technology/technology-tip.png");
color: #fff;
padding: 20px;
}
.principle-item{
background-color: #000;
padding:40px 20px;
color:#fff;
.principle-con{
display: flex;
flex-flow: column;
align-items: center;
border-radius: 4px;
border-right: 2px solid #ccc;
}
.principle-item{
padding:20px 40px;
}
.principle-item h4{
color:#aaaaaa;
margin-top:20px;
.principle .col-lg-4:last-child .principle-item{
border:none;
}
.principle-item-title{
font-size: 28px;
line-height: normal;
color:#333333;
display: flex;
align-items: center;
}
.principle-item-intro{
font-size: 18px;
color:#333333;
line-height: normal;
text-align: left;
padding-top:30px;
}
.num-icon{
border: 1px solid #fff;
border: 1px solid #333333;
border-radius: 50%;
width: 30px;
height: 30px;
... ... @@ -1807,6 +1861,14 @@ blockquote:before {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #ccc;
padding:0 20px;
}
.section-item{
padding:20px;
}
.section-item-active{
border-bottom: 3px solid #e43730;
}
.item-content{
flex:1;
... ... @@ -1817,15 +1879,27 @@ blockquote:before {
.section-item img,.owl-carousel .owl-item .title-icon img,.owl-carousel .owl-item .img-right img{
width:auto;
}
.compatible-item{
padding:40px 0;
}
.team-item-right{
padding:20px;
max-width: 300px;
display: flex;
align-items: center;
justify-content: center;
min-height: 400px;
}
.team-item{
width:100%;
padding:20px;
}
.title-icon{padding:20px 0;}
.title-icon{
padding:20px 0;
justify-content: flex-start;
display: flex;
}
.team-item-left{
padding:40px;
}
... ... @@ -1925,6 +1999,7 @@ blockquote:before {
.advantage-title-intro{
color:#848484;
font-size: 12px;
font-family: 'PingFang-SC-medium';
}
.info-value{
position: relative;
... ... @@ -2155,4 +2230,133 @@ blockquote:before {
display: flex;
}
}
/*lsq 首页调整优化 2022-09-20*/
.main-menu .navigation > li > a{
color:#333;
}
.main-menu .navigation > li:hover > a, .main-menu .navigation > li.current > a{
border-bottom: 3px solid #e43730;
}
.main-menu .navigation.navigation-white > li > a{
color:#ffffff;
}
.main-menu .navigation.navigation-white > li:hover > a, .main-menu .navigation.navigation-white > li.current > a{
border-bottom: 3px solid #e43730;
}
.owl-item{
position: relative;
}
.owl-item-content{
position: absolute;
top: 0;
height: 100%;
width: 70%;
display: flex;
flex-flow: column;
justify-content: center;
color:#fff;
text-align: left;
left: 10%;
}
.owl-item-intro{
}
.max-width-6{
max-width: 600px;
}
.font-size-42{
font-size: 42px;
}
.font-size-20{
font-size: 20px;
}
.font-size-12{
font-size: 12px;
}
.owl-item-button{
color: #ffffff;
}
.home-button{
border-radius: 20px;
padding: 8px 40px;
cursor: pointer;
margin-left: 10px;
font-size: 12px;
}
.btn-service{
background-color:rgba(69, 69, 69,.73);
}
.btn-service:hover{
background-color:rgba(69, 69, 69,1);
}
.btn-concat{
background-color: rgba(52, 161, 255,.73);
}
.btn-concat:hover{
background-color: rgba(52, 161, 255,1);
}
.owl-item-title{
line-height: normal;
}
@media (min-width: 1400px){
.container {
max-width: 1380px;
}
}
.title-style{
font-size: 36px;
color:#333333;
line-height: normal;
}
.title-intro{
font-size: 18px;
color:#838586;
font-family: 'PingFang-SC-medium';
}
.tech-title-num{
font-size: 36px;
color:#333;
}
.tech-title{
font-size: 18px;
color:#666;
}
.step-route{
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: -1;
background: url('../img/index/step-route.png');
background-size: cover;
}
.route-title{
color:#ffffff;
}
.step-route-item{
font-size: 18px;
text-align: center;
padding:30px;
}
.step-route-item:nth-child(2n){
background-color: rgba(56, 58, 65,.65);
}
.step-route-item:nth-child(2n+1){
background-color:rgba(50, 52, 58,.65) ;
}
.step-route-item.step-route-item-active{
background-color: #e43730;
}
.compatible-bg{
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: -1;
background: url('../img/index/compatible-bg.png');
background-size: cover;
}
\ No newline at end of file
... ...
No preview for this file type
export function homeDatas() {
let res=[
{
title:'"魔镜智能"全面完成国产化兼容适配认证',
introduction:'鸿果科技旗下“魔锁智能”自研”A-View智能综合监控管理平台系统“V3.0完成对主流国产服务器、数据库、操作系统、中间件等兼容适配，并取得一系列兼容性认证',
isService:false,
isConcat:false,
},
{
title:'不仅仅是智能化运维,',
title1:'提供一站式的IT运维管理平台',
introduction:'基于根因分析的自动巡检程序，降低海量主机运维复杂度同时对海量主机批量执行，基于根因分析和多种高级算法 提高运维工作效率再多主机也不怕',
isService:true,
isConcat:false,
},
{
title:'运维数字化道路，鸿果与你同行',
introduction:'鸿果自研的产品一-数字运维中台作为智能运维各应用场景的支撑平台，提供数据治理服务、流批一体服务和AI平台服务',
isService:true,
isConcat:true,
}
]
return res
}
export function compatibleDatas(){
let res=[
{
id:'1',
logoUrl:'logo-dong-default',
logoUrlTip:'logo-dong',
urlName:'dong',
content:'东方通应用服务器软件TongWeb V7.0 产品，是由东方通推出的遵循JavaEE7规范的企业级应用服务器，不仅为企业应用提供了可靠、可伸缩、可管理和高安全的基础平台，同时具有功能完善、支持开放标准和基于组件开发、多层架构、轻量等特点。'
},
{
id:'2',
logoUrl:'logo-da-default',
logoUrlTip:'logo-da',
urlName:'da',
content:'达梦数据库管理系统V8（简称DM8）融合了分布式、弹性计算与云计算的优势，多样化架构充分满足不同场景需求，支持超大规模并发事务处理和事务-分析混合型业务处理，动态分配计算资源，实现更精细化的资源利用、更低成本的投入。'
},
{
id:'3',
logoUrl:'logo-nan-default',
logoUrlTip:'logo-nan',
urlName:'nan',
content:'南大通用大规模分布式并行数据库集群系统[简称：GBase 8a MPP Cluster] 是基于 GBase 8a 列存储数据库的一款 Shared Nothing 架构的分布式并行分析型数据库集群，具备高性能、高可用、高扩展特性，可以为超大规模数据管理提供高性价比的通用计算平台。'
},
{
id:'4',
logoUrl:'logo-ren-default',
logoUrlTip:'logo-ren',
urlName:'ren',
content:'金仓数据库管理系统KingbaseES是面向事务处理类、兼顾分析类应用领域的通用数据库产品，致力于解决高安全、高并发、高可靠数据存储计算问题，是一款为企事业单位等管理信息系统、业务系统量身打造，具有高成熟度的数据库产品。'
},
{
id:'5',
logoUrl:'logo-tong-default',
logoUrlTip:'logo-tong',
urlName:'tong',
content:'统信服务器操作系统V20是一款用于构建信息化基础设施环境的平台级软件，是款体现当今主流 Linux 服务器操作系统发展水平的商业化软件产品。着重解决客户在信息化基础建设过程中，服务端基础设施的安装部署、运行维护、应用支撑等需求，具有极高的可靠性、持久的可用性、优良的可维护性。'
}
]
return res;
}
export function techDatas(){
let res=[
{
id:'01',
isHover:false,
title:'先进的技术架构',
tipIntro:'横向融合市场主流IT系统架构，从传统巨石IT架构到现今的分布式微服务架构;纵向融合从基础laaS层、PaaS层到应用层及业务层，实现从普通运维监控到系统洞察与业务洞察的提升。'
},
{
id:'02',
isHover:false,
title:'业务与技术融合',
tipIntro:'以业务服务为核心视角、以应用架构为桥梁，打通上层业务监控到底层技术设施监控链路，故障定位更简单。'
},
{
id:'03',
isHover:false,
title:'智能的关联分析',
tipIntro:'基于应用IT资源图谱多层关联，采用智能关联分析引擎实现精准告警，实时动态评估故障对业务的影响级别。'
},
{
id:'04',
isHover:false,
title:'构件化开发平台',
tipIntro:'围绕用户业务管理需求，其通过low-code的插件化、配置化的开发方式下，提供可视化的用户编排界面、控件元素和成熟稳定的模块，助力用户快速配置个性化IT管理工具。'
},
{
id:'05',
isHover:false,
title:'全链路业务监测',
tipIntro:'结合网络与应用的立体视角，在云原生微服务框架下，建立全链路分布式追踪能力，保障云原生全链路业务稳定与连续性。'
}
]
return res;
}
export function stepRoutes(){
let res=[
'step1 集中监控智能化改造',
'step2 指标监控智能化改造',
'step3 日志智能异常检测弥补监控不足',
'step4 智能故障排查-根因分析和定位',
'step5 智能知识管理-知识图谱',
'step6 故障自愈'
]
return res;
}
export function logoDatas(){
let res=[
{
id:'1',
logoUrl:'logo-dong-default',
logoUrlTip:'logo-dong',
active:true
},
{
id:'2',
logoUrl:'logo-da-default',
logoUrlTip:'logo-da',
active:false
},
{
id:'3',
logoUrl:'logo-nan-default',
logoUrlTip:'logo-nan',
active:false
},
{
id:'4',
logoUrl:'logo-ren-default',
logoUrlTip:'logo-ren',
active:false
},
{
id:'5',
logoUrl:'logo-tong-default',
logoUrlTip:'logo-tong',
active:false
}
]
return res;
}
\ No newline at end of file
... ...

601 KB | W: | H:

583 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1010 KB | W: | H:

918 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.11 MB | W: | H:

1.02 MB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

3.68 KB | W: | H:

3.85 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

5.35 KB | W: | H:

5.51 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

5.14 KB | W: | H:

5.27 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

5.11 KB | W: | H:

5.24 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

6.15 KB | W: | H:

6.04 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

18.3 KB | W: | H:

15.9 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

4.16 KB | W: | H:

4.32 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

4.72 KB | W: | H:

4.87 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

2.71 KB | W: | H:

2.88 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

3.54 KB | W: | H:

3.54 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

33.9 KB | W: | H:

49 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

32.4 KB | W: | H:

41.8 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

32.9 KB | W: | H:

39.5 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

33.9 KB | W: | H:

39.9 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

34.6 KB | W: | H:

39.9 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -21,9 +21,15 @@
if (windowpos >= 250) {
siteHeader.addClass('fixed-header');
scrollLink.fadeIn(300);
//lsq 设置滚动之后的logo图片 2022-09-20
$('.logo-outer .hg-logo').attr('src','assets/img/logo.png');
$('.navigation').removeClass('navigation-white');
} else {
siteHeader.removeClass('fixed-header');
scrollLink.fadeOut(300);
//lsq 设置置顶之后的logo图片 2022-09-20
$('.logo-outer .hg-logo').attr('src','assets/img/logo-footer.png');
$('.navigation').addClass('navigation-white');
}
}
}
... ...
... ... @@ -53,7 +53,7 @@
<div class="header-inner clearfix">
<div class="logo-outer">
<div class="logo">
<router-link to="/"><img class="hg-logo" src="assets/img/logo.png" alt="" title=""></router-link>
<router-link to="/"><img class="hg-logo" src="assets/img/logo-footer.png" alt="" title=""></router-link>
</div>
</div>
... ... @@ -73,7 +73,7 @@
</div>
<div class="navbar-collapse navbar-collapse-one collapse clearfix">
<ul class="navigation clearfix">
<ul class="navigation clearfix navigation-white">
<li class="current" top-nav="home">
<router-link to="/">首页</router-link>
</li>
... ...
<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>
... ... @@ -10,12 +10,21 @@
</div>
</section>
<section class=" rel rpt-150 pb-130 rpb-0 text-center" id="homeBanner">
<section class=" rel rpt-150 rpb-0 text-center" id="homeBanner">
<div class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer owl-height">
<div class="owl-stage">
<div class="owl-item" v-for="item in 3">
<img :src="'assets/img/index/' + item + '.png'" class="d-block w-100 h-75">
<div class="owl-item" v-for="(item,index) in homeData">
<img :src="'assets/img/index/' + (index+1) + '.png'" class="d-block w-100 h-75">
<div :class="['owl-item-content']">
<div :class="['owl-item-title', 'font-size-42',{'text-align-center':index==2}]">{{item.title}}</div>
<div class="owl-item-title font-size-42" v-if="item.title1">{{item.title1}}</div>
<div :class="['owl-item-intro', 'font-size-14', 'pt-30',{'text-align-center':index==2,'max-width-6':index!=2}]">{{item.introduction}}</div>
<div :class="['owl-item-button', 'pt-30',{'text-align-center':index==2}]" >
<span class="home-button btn-service" v-if="item.isService" @click="jumpSecond('services')">查看产品</span>
<span class="home-button btn-concat" v-if="item.isConcat" @click="jumpSecond('concat')">联系我们</span>
</div>
</div>
</div>
</div>
</div>
... ... @@ -23,21 +32,22 @@
</section>
<section class="services-section rel text-center mt-100 mb-70">
<section class="services-section rel text-center">
<div class="container">
<h3>技术优势</h3>
<h4>以AI激活运维数据智慧，助力客户数字化运维</h4>
<div class="row">
<!-- single-service -->
<div v-for="item in techData" :key="item" class="col-lg-3 col-md-6 col-lg-3-self">
<div class="title-style">技术优势</div>
<div class="title-intro pt-20">以AI激活运维数据智慧，助力客户数字化运维</div>
<div class="row pt-30">
<div v-for="(item,index) in techData" :key="item" class="col-lg-3 col-md-6 col-lg-3-self">
<div class="single-service-box style-three">
<div class="service-icon" data-toggle="tooltip" @mouseenter="tooltipHover(item)"
<div class="service-icon" data-toggle="tooltip" @mouseenter="tooltipHover(item.id)"
@mouseleave="tooltipLeave">
<img :src="'assets/img/technology/technology-0'+item.id+'.png'" alt="Service Icon">
<div :class="['tooltip-inner', 'tooltip', 'tooltip-self',{'opacity1':item.isHover,'opacity0':!item.isHover}]">
<img :src="'assets/img/technology/technology-0'+item.id+'-tip.png'" alt="Service Icon">
<!-- 横向融合市场主流IT系统架构，从传统巨石IT架构到现今的分布式微服务架构；纵向融合从基础IaaS层、PaaS层到应用层及业务层，实现从普通运维监控到系统洞察与业务洞察的提升。-->
<div>
<img :src="'assets/img/technology/technology-'+item.id+'.png'" alt="Service Icon">
</div>
<div class="tech-title-num">{{item.id}}</div>
<div class="tech-title pt-30 pb-30">{{item.title}}</div>
<div :class="[ 'tooltip', 'tooltip-self',{'opacity1':item.isHover,'opacity0':!item.isHover}]">
{{item.tipIntro}}
</div>
</div>
</div>
... ... @@ -45,89 +55,74 @@
</div>
</div>
<div class="shape shapeAnimationOne l-10 t-0">
<img src="assets/img/shapes/shape3.png" alt="Shape">
</div>
<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-70 color-white">
<div class="container">
<div class="row align-items-center">
<div class="row align-items-center pt-30">
<div class="col-lg-12">
<div class="about-content mr-20 rmr-0 rmb-50 wow customFadeInRight delay-0-1s slow text-center">
<div class="section-title mb-35">
<h2 class="color-white">魔镜智能运维建设三大原则</h2>
<div class="title-style">魔镜智能运维建设三大原则</div>
</div>
<p>魔镜智能能够通过海量数据处理分析能力和强大的算法支撑能力 | 协助企业灵活构建多样化智能运维场景</p>
<!-- <div class="title-intro">魔镜智能能够通过海量数据处理分析能力和强大的算法支撑能力 | 协助企业灵活构建多样化智能运维场景</div>-->
</div>
</div>
<!-- <div class="col-lg-7">
<div class="about-image wow customFadeInLeft delay-0-1s slow">
<img src="assets/img/about/about.png" alt="about image">
</div>
</div>-->
</div>
<div class="row principle">
<div class="col-lg-4">
<div class="row principle pt-30">
<div class="col-lg-4 principle-con">
<div class="principle-item">
<div class="principle-item-title">
<span class="num-icon">1</span>
<span>数据</span>
</div>
<h4>从自身运维出发</h4>
<div class="principle-item-intro">从自身运维出发</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-4 principle-con">
<div class="principle-item">
<div class="principle-item-title">
<span class="num-icon">2</span>
<span>中台</span>
</div>
<h4>夯实数据处理能力</h4>
<div class="principle-item-intro">夯实数据处理能力</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-4 principle-con">
<div class="principle-item">
<div class="principle-item-title">
<span class="num-icon">3</span>
<span>场景化</span>
</div>
<h4>循序渐进进行建设</h4>
<div class="principle-item-intro">循序渐进进行建设</div>
</div>
</div>
</div>
</div>
<div class="success-bg success-bg-self"></div>
<div class="shape shapeAnimationFour r-5 t-100">
<div class="shape shapeAnimationOne l-10 t-0">
<img src="assets/img/shapes/shape3.png" alt="Shape">
</div>
<div class="shape shapeAnimationTwo t-100 r-5">
<img src="assets/img/shapes/shape1.png" alt="Shape">
</div>
</section>
<section class="about-section rel mb-100 pt-105 pb-70">
<section class="about-section rel pt-60 pb-70">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12">
<div class="about-content mr-20 rmr-0 rmb-50 wow customFadeInRight delay-0-1s slow text-center">
<div class="section-title mb-35">
<h2>魔镜智能运维建设六步走路线</h2>
<div class="title-style route-title">魔镜智能运维建设六步走路线</div>
</div>
<p>智能运维的本质是提升运维数据的洞察和处理能力</p>
</div>
</div>
</div>
<div class="row">
<img src="assets/img/web-route.png" alt="">
<div class="color-white">
<div :class="['step-route-item',{'step-route-item-active':stepActive==index}]" v-for="(item,index) in stepRoute" @mouseenter="showHover(index)" @mouseleave="hideHover">
{{item}}
</div>
</div>
</div>
<div class="step-route"></div>
<div class="shape shapeAnimationFour l-10 t-5">
<img src="assets/img/shapes/shape4.png" alt="Shape">
</div>
... ... @@ -136,39 +131,42 @@
</div>
</section>
<section class="team-section rel mb-65">
<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">
<h2>”魔镜智能“全面完成国产化兼容适配认证</h2>
<h4>完成对主流国产服务器、数据库、操作系统、中间件、等兼容适配，并取得一系列兼容性认证</h4>
<div class="title-style">”魔镜智能“全面完成国产化兼容适配认证</div>
<div class="title-intro pt-20">完成对主流国产服务器、数据库、操作系统、中间件、等兼容适配，并取得一系列兼容性认证</div>
</div>
<div class="section-item-content owl-dots">
<div class="section-item owl-dot" v-for="item in logoData">
<img :src="'assets/img/index/'+item.logoUrl+'.png'" alt="">
<div :class="['section-item', 'owl-dot',{'section-item-active':compatibleActive==index}]" @mouseenter="showHoverCompatible(index)" @mouseleave="hideHoverCompatible()" v-for="(item,index) in logoData">
<img v-if="compatibleActive+1!=item.id" :src="'assets/img/index/'+item.logoUrl+'.png'" alt="">
<img v-if="compatibleActive+1==item.id" :src="'assets/img/index/'+item.logoUrlTip+'.png'" alt="">
</div>
</div>
<div class="team-carousel owl-carousel text-center" ref="teamCarousel">
<div class="team-item row" v-for="item in compatibleData">
<div class="col-lg-8 team-item-left flex-column-start">
<div class="title-icon">
<img :src="'assets/img/index/'+item.logoUrl+'.png'" alt="">
</div>
<div class="item-content flex-column-start flex-text-left">
<h4>国产中间件兼容认证</h4>
<div class="item-text">
{{item.content}}
<!-- <div class="team-carousel owl-carousel text-center" ref="teamCarousel">-->
<div class="compatible-carousel text-center" >
<div v-for="item in compatibleData">
<div v-if="compatibleActive+1==item.id" class="compatible-item row" >
<div class="col-lg-8 team-item-left flex-column-start">
<div class="title-icon">
<img :src="'assets/img/index/'+item.logoUrlTip+'.png'" alt="">
</div>
<div class="item-content flex-column-start flex-text-left">
<div class="title-style pt-30">国产中间件兼容认证</div>
<div class="item-text title-intro pt-30">
{{item.content}}
</div>
</div>
</div>
</div>
<div class="col-lg-4 img-right team-item-right">
<img :src="'assets/img/index/'+item.urlName+'.png'" alt="">
<div class="col-lg-4 img-right team-item-right">
<img :src="'assets/img/index/'+item.urlName+'.png'" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="compatible-bg"></div>
<div class="shape shapeAnimationThree b-30 r-10">
<img src="assets/img/shapes/shape1.png" alt="Shape">
</div>
... ...
import pageInit from "../../minixs/pageInit.js";
import {homeDatas,compatibleDatas,techDatas,stepRoutes,logoDatas} from "../../../../assets/img/data/homeData.js";
export default {
name: 'home',
template: '',
... ... @@ -7,19 +8,23 @@ export default {
props: [],
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let homeData=homeDatas();
let isHover=Vue.ref(false);
let techData=Vue.ref([]);
for(let i=1;i<6;i++){
techData.value.push({
id:i,
isHover:false
})
let techData=Vue.ref(techDatas());
let stepRoute=stepRoutes();
//六步路线的hover
let stepActive=Vue.ref(0);
//六步路线hover事件
let showHover=(index)=>{
stepActive.value=index;
}
let hideHover=()=>{
stepActive.value=0;
}
//技术优势悬浮提示
let tooltipHover=(row)=>{
let tooltipHover=(id)=>{
techData.value.map(item=>{
if(item.id==row.id){
if(item.id==id){
item.isHover=true;
}
})
... ... @@ -31,66 +36,19 @@ export default {
})
}
//兼容认证logo数据
let logoData=Vue.ref([
{
id:'1',
logoUrl:'logo-dong',
active:true
},
{
id:'2',
logoUrl:'logo-da',
active:false
},
{
id:'3',
logoUrl:'logo-nan',
active:false
},
{
id:'4',
logoUrl:'logo-ren',
active:false
},
{
id:'5',
logoUrl:'logo-tong',
active:false
}
])
let compatibleData=Vue.ref([
{
id:'1',
logoUrl:'logo-dong',
urlName:'dong',
content:'东方通应用服务器软件TongWeb V7.0 产品，是由东方通推出的遵循JavaEE7规范的企业级应用服务器，不仅为企业应用提供了可靠、可伸缩、可管理和高安全的基础平台，同时具有功能完善、支持开放标准和基于组件开发、多层架构、轻量等特点。'
},
{
id:'2',
logoUrl:'logo-da',
urlName:'da',
content:'达梦数据库管理系统V8（简称DM8）融合了分布式、弹性计算与云计算的优势，多样化架构充分满足不同场景需求，支持超大规模并发事务处理和事务-分析混合型业务处理，动态分配计算资源，实现更精细化的资源利用、更低成本的投入。'
},
{
id:'3',
logoUrl:'logo-nan',
urlName:'nan',
content:'南大通用大规模分布式并行数据库集群系统[简称：GBase 8a MPP Cluster] 是基于 GBase 8a 列存储数据库的一款 Shared Nothing 架构的分布式并行分析型数据库集群，具备高性能、高可用、高扩展特性，可以为超大规模数据管理提供高性价比的通用计算平台。'
},
{
id:'4',
logoUrl:'logo-ren',
urlName:'ren',
content:'金仓数据库管理系统KingbaseES是面向事务处理类、兼顾分析类应用领域的通用数据库产品，致力于解决高安全、高并发、高可靠数据存储计算问题，是一款为企事业单位等管理信息系统、业务系统量身打造，具有高成熟度的数据库产品。'
},
{
id:'5',
logoUrl:'logo-tong',
urlName:'tong',
content:'统信服务器操作系统V20是一款用于构建信息化基础设施环境的平台级软件，是款体现当今主流 Linux 服务器操作系统发展水平的商业化软件产品。着重解决客户在信息化基础建设过程中，服务端基础设施的安装部署、运行维护、应用支撑等需求，具有极高的可靠性、持久的可用性、优良的可维护性。'
}
])
let compatibleActive=Vue.ref(0)
let logoData=Vue.ref(logoDatas());
let compatibleData=compatibleDatas();
let jumpSecond=(type)=>{
proxy.$router.push({path:'/'+type})
}
//认证hover事件
let showHoverCompatible=(index)=>{
compatibleActive.value=index;
}
let hideHoverCompatible=()=>{
// compatibleActive.value=0;
}
// 挂载完
Vue.onMounted(() => {
$('.owl-carousel').owlCarousel({
... ... @@ -114,7 +72,16 @@ export default {
tooltipLeave,
techData,
logoData,
compatibleData
compatibleData,
homeData,
jumpSecond,
stepRoute,
stepActive,
showHover,
hideHover,
compatibleActive,
hideHoverCompatible,
showHoverCompatible
}
}
... ...
... ... @@ -8,17 +8,7 @@ export default {
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let jumpSecond=(type)=>{
/* if(type=='info'){
proxy.$router.push({path:'/services/information'})
}else if(type == 'log'){
proxy.$router.push({path:'/services/securityLog'})
}else if(type == 'business'){
proxy.$router.push({path:'/services/businessApp'})
}else if(type == 'maintenance'){
proxy.$router.push({path:'/services/maintenance'})
}*/
proxy.$router.push({path:'/services/'+type})
}
return {
jumpSecond
... ...