monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 708c16aa2ba33cfb1158b5f84ebceadb59710923 1 parent be7c1df9

【无】 web网站home首页及图片

Inline Side-by-side
Showing 24 changed files with 400 additions and 3 deletions
... ... @@ -345,7 +345,6 @@ textarea:placeholder,
.hero-content p {
font-size: 18px;
max-width: 535px;
font-weight: 600;
margin-bottom: 40px;
}
... ... @@ -569,6 +568,7 @@ textarea:placeholder,
/*** ====================================================================
Start Success Section
====================================================================***/
.success-section {
position: relative;
}
... ... @@ -1705,8 +1705,109 @@ blockquote:before {
/*** ====================================================================
End Footer Section
====================================================================***/
.hg-logo{
width: 162px;
height: 40px;
}
@media (min-width: 992px){
.col-lg-3-self {
max-width: 20%;
}
}
.service-icon{
position: relative;
display: flex;
justify-content: center;
}
.single-service-box{
padding:0;
}
.tooltip-self{
background-color: transparent;
width:100%;
height:100%;
display: flex;
align-items: center;
justify-content: center;
line-height: 30px;
}
.principle-item{
background-color: #000;
padding:40px 20px;
color:#fff;
border-radius: 4px;
}
.principle-item h4{
color:#aaaaaa;
margin-top:20px;
}
.principle-item-title{
display: flex;
}
.num-icon{
border: 1px solid #fff;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
margin-right:6px;
}
.tooltip{
top:0;
}
.opacity1{
opacity:1;
}
.opacity0{
opacity:0;
}
.color-white{
color:#fff;
}
.flex-column-center{
display: flex;
flex-direction: column;
justify-content: center;
}
.flex-column-start{
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.flex-text-left{
text-align: left;
}
.success-bg-self{
height:100%;
}
.section-item-content{
display: flex;
align-items: center;
justify-content: space-between;
}
.item-content{
flex:1;
}
.item-text{
flex: 1;
}
.section-item img,.owl-carousel .owl-item .title-icon img,.owl-carousel .owl-item .img-right img{
width:auto;
}
.team-item-right{
padding:20px;
}
.team-item{
width:100%;
padding:20px;
}
.title-icon{padding:20px 0;}
.team-item-left{
padding:40px;
}
.item-content h4{
margin:20px 0;
}
... ...
<div>
<section class="hero-section rel pt-220 rpt-150 pb-130 rpb-0">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-7">
<div class="hero-content my-50">
<h1 class="wow customFadeInUp delay-0-1s slow">"魔镜智能"全面完成国产化兼容适配认证</h1>
<p class="wow customFadeInUp delay-0-3s slow">鸿果科技旗下“魔镜智能”自研“A-View智能综合监控管理平台系统”V3.0</p>
<a href="#" class="theme-btn btn-big wow customFadeInUp delay-0-5s slow">完成对主流国产服务器、数据库、操作系统、中间件等兼容适配，并取得一系列兼容性互认证</a>
</div>
</div>
<div class="col-lg-5">
<div class="hero-img">
<img src="assets/img/hero/hero.png" alt="Hero Image">
</div>
</div>
</div>
</div>
<div class="shape shapeAnimationOne l-10 t-60">
<img src="assets/img/shapes/shape1.png" alt="Shape">
</div>
<div class="shape shapeAnimationTwo l-70 t-60">
<img src="assets/img/shapes/shape2.png" alt="Shape">
</div>
<div class="shape shapeAnimationThree l-50 t-100">
<img src="assets/img/shapes/shape3.png" alt="Shape">
</div>
</section>
<section class="services-section rel text-center mt-100 mb-70">
<div class="container">
<h3>技术优势</h3>
<h4>以AI激活运维数据智慧，助力客户数字化运维</h4>
<div class="row">
首页11
<!-- single-service -->
<div v-for="item 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)" @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>
</div>
</div>
</div>
</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="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>
<p>魔镜智能能够通过海量数据处理分析能力和强大的算法支撑能力 | 协助企业灵活构建多样化智能运维场景</p>
</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="principle-item">
<div class="principle-item-title">
<span class="num-icon">1</span>
<span>数据</span>
</div>
<h4>从自身运维出发</h4>
</div>
</div>
<div class="col-lg-4">
<div class="principle-item">
<div class="principle-item-title">
<span class="num-icon">2</span>
<span>中台</span>
</div>
<h4>夯实数据处理能力</h4>
</div>
</div>
<div class="col-lg-4">
<div class="principle-item">
<div class="principle-item-title">
<span class="num-icon">3</span>
<span>场景化</span>
</div>
<h4>循序渐进进行建设</h4>
</div>
</div>
</div>
</div>
<div class="success-bg success-bg-self"></div>
<div class="shape shapeAnimationFour r-5 t-100">
<img src="assets/img/shapes/shape3.png" alt="Shape">
</div>
</section>
<section class="about-section rel mb-100 pt-105 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>
<p>智能运维的本质是提升运维数据的洞察和处理能力</p>
</div>
</div>
</div>
<div class="row">
<img src="assets/img/web-route.png" alt="">
</div>
</div>
<div class="shape shapeAnimationFour l-10 t-5">
<img src="assets/img/shapes/shape4.png" alt="Shape">
</div>
<div class="shape shapeAnimationFive r-10 t-100 zm-1">
<img src="assets/img/shapes/shape2.png" alt="Shape">
</div>
</section>
<section class="team-section rel mb-65">
<div class="container">
<div class="section-title mb-35 pr-65 align-items-center flex-column-center">
<h2>”魔镜智能“全面完成国产化兼容适配认证</h2>
<h4>完成对主流国产服务器、数据库、操作系统、中间件、等兼容适配，并取得一系列兼容性认证</h4>
</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>
</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>
</div>
</div>
<div class="col-lg-4 img-right team-item-right">
<img :src="'assets/img/index/'+item.urlName+'.png'" alt="">
</div>
</div>
</div>
</div>
<div class="shape shapeAnimationThree b-30 r-10">
<img src="assets/img/shapes/shape1.png" alt="Shape">
</div>
<div class="shape shapeAnimationTwo t-90 l-10">
<img src="assets/img/shapes/shape4.png" alt="Shape">
</div>
</section>
</div>
... ...
... ... @@ -4,7 +4,127 @@ export default {
components: {},
props: [],
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let isHover=Vue.ref(false);
let techData=Vue.ref([]);
for(let i=1;i<6;i++){
techData.value.push({
id:i,
isHover:false
})
}
//技术优势悬浮提示
let tooltipHover=(row)=>{
techData.value.map(item=>{
if(item.id==row.id){
item.isHover=true;
}
})
}
//技术优势鼠标离开事件
let tooltipLeave=()=>{
techData.value.map(item=>{
item.isHover=false;
})
}
//兼容认证logo数据
let logoData=Vue.ref([
{
id:'1',
logoUrl:'logo-dong'
},
{
id:'2',
logoUrl:'logo-da'
},
{
id:'3',
logoUrl:'logo-nan'
},
{
id:'4',
logoUrl:'logo-ren'
},
{
id:'5',
logoUrl:'logo-tong'
}
])
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 服务器操作系统发展水平的商业化软件产品。着重解决客户在信息化基础建设过程中，服务端基础设施的安装部署、运行维护、应用支撑等需求，具有极高的可靠性、持久的可用性、优良的可维护性。'
}
])
// 挂载完
Vue.onMounted(() => {
$('.team-carousel').owlCarousel({
loop:true,
items: 1,
margin: 20,
nav: false,
dots: true,
active: true,
dotsEach: 2,
smartSpeed: 1000,
autoplay: 5000,
// navText: ['<span class="flaticon-left-arrow"></span>', '<span class="flaticon-right-arrow"></span>'],
dotsText: ['<span class="flaticon-left-arrow"></span>', '<span class="flaticon-right-arrow"></span>'],
responsive: {
/* 0: {
items: 1,
},
575: {
items: 1,
},
768: {
items: 2,
},
992: {
items: 3,
},
1200: {
items: 3,
}*/
}
});
})
return{
isHover,
tooltipHover,
tooltipLeave,
techData,
logoData,
compatibleData
}
}
}
... ...