Authored by 鲁尚清

【无】门户网站-首页相关跳转及悬浮提示内容修改,产品服务一级页面相关特点内容修改

... ... @@ -2325,6 +2325,7 @@ blockquote:before {
font-size: 36px;
color:#333333;
line-height: normal;
font-family: 'MicrosoftYaHei-Bold';
}
.title-intro{
font-size: 18px;
... ... @@ -2880,3 +2881,13 @@ blockquote:before {
-webkit-animation-duration: 2.5s;
animation-duration: 2.5s;
}
.info-system{
text-align: center;
}
.alarm-info-container .info-intro{
max-width: 1200px;
margin:auto;
}
.compatible-item .title-style{
font-size:28px;
}
\ No newline at end of file
... ...
... ... @@ -39,9 +39,27 @@ export function culturalDatas() {
]
return res;
}
export function partnerDatas() {
let res = [
{img:'assets/img/about/partner/partner-1.png'}
]
export function imgsDatas() {
let res = [{
name:'质量管理体系认证证书',
path:'assets/img/about/certificate/1.png'
},{
name:'技术服务管理体系认证证书',
path:'assets/img/about/certificate/2.png'
},{
name:'连续性管理体系认证证书',
path:'assets/img/about/certificate/3.png'
},{
name:'信息安全管理体系认证证书',
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'
}]
return res;
}
\ No newline at end of file
... ...
... ... @@ -29,6 +29,7 @@ export function compatibleDatas(){
logoUrl:'logo-dong-default',
logoUrlTip:'logo-dong',
urlName:'dong',
title:'国产中间件兼容认证',
content:'东方通应用服务器软件TongWeb V7.0 产品,是由东方通推出的遵循JavaEE7规范的企业级应用服务器,不仅为企业应用提供了可靠、可伸缩、可管理和高安全的基础平台,同时具有功能完善、支持开放标准和基于组件开发、多层架构、轻量等特点。'
},
{
... ... @@ -36,6 +37,7 @@ export function compatibleDatas(){
logoUrl:'logo-da-default',
logoUrlTip:'logo-da',
urlName:'da',
title:'国产数据库兼容认证',
content:'达梦数据库管理系统V8(简称DM8)融合了分布式、弹性计算与云计算的优势,多样化架构充分满足不同场景需求,支持超大规模并发事务处理和事务-分析混合型业务处理,动态分配计算资源,实现更精细化的资源利用、更低成本的投入。'
},
{
... ... @@ -43,6 +45,7 @@ export function compatibleDatas(){
logoUrl:'logo-nan-default',
logoUrlTip:'logo-nan',
urlName:'nan',
title:'国产数据库兼容认证',
content:'南大通用大规模分布式并行数据库集群系统[简称:GBase 8a MPP Cluster] 是基于 GBase 8a 列存储数据库的一款 Shared Nothing 架构的分布式并行分析型数据库集群,具备高性能、高可用、高扩展特性,可以为超大规模数据管理提供高性价比的通用计算平台。'
},
{
... ... @@ -50,6 +53,7 @@ export function compatibleDatas(){
logoUrl:'logo-ren-default',
logoUrlTip:'logo-ren',
urlName:'ren',
title:'国产数据库兼容认证',
content:'金仓数据库管理系统KingbaseES是面向事务处理类、兼顾分析类应用领域的通用数据库产品,致力于解决高安全、高并发、高可靠数据存储计算问题,是一款为企事业单位等管理信息系统、业务系统量身打造,具有高成熟度的数据库产品。'
},
{
... ... @@ -57,6 +61,7 @@ export function compatibleDatas(){
logoUrl:'logo-tong-default',
logoUrlTip:'logo-tong',
urlName:'tong',
title:'国产操作系统兼容认证',
content:'统信服务器操作系统V20是一款用于构建信息化基础设施环境的平台级软件,是款体现当今主流 Linux 服务器操作系统发展水平的商业化软件产品。着重解决客户在信息化基础建设过程中,服务端基础设施的安装部署、运行维护、应用支撑等需求,具有极高的可靠性、持久的可用性、优良的可维护性。'
}
]
... ...
... ... @@ -3,49 +3,49 @@ export function productDatas(){
{
title:'综合告警智能算法平台',
// introduction:'能快速接入各类告警信息,通过告警算法自动去重、规则压缩、算法降噪,实现告警降噪,避免告警风暴,更快响应告警,提升告警管理能力',
introData:['基于智能算法对告警消息压缩合并','支持固定阈值、同环比,预测性异常检测','自动化故障修复','自动化故障修复'],
introData:['基于业务的告警统一管理','基于算法的智能合并降噪','支持固定阈值、同环比,预测性异常检测','兼容并包,开放告警'],
type:'alarm'
},
{
title:'综合监控管理A-view',
// introduction:'全方位监控应用/平台资源/基础设施,基于IT资源图谱,洞察问题根因,随时掌握业务健康状况,快速定位故障,保持IT业务良性、稳定和长效发展',
introData:['告警消息统一在平台管理','基于智能算法对告警消息压缩合并','支持阈值、同环比、预测异常检测','自动故障修复'],
introData:['强化主动监控,实现集中管理','灵活定制的自动化巡检','快速定位故障,恢复系统运行','提高运行效率,合理利用IT资源','提供统计分析和决策支持'],
type:'Aview'
},
{
title:'CMDB资产管理',
introduction:'建立以应用为中心的资源 管理模型,促进资产到资源的转变',
introData:['告警消息统一在平台管理','基于智能算法对告警消息压缩合并','支持阈值、同环比、预测异常检测','自动故障修复'],
introData:['随需而动的资源管理模型','独有的双模自动发现能力','面向业务的关联分析','丰富多样的服务化API'],
type:'cmdb'
},
{
title:'业务及应用综合分析平台',
introduction:'全新的端到端,全链路的应用性能管理平台,对业务性能问题进行快速发现,帮助用户有效地降低 MTTR、 提升IT部门对业务和用户体验的把控',
// introData:['告警消息统一在平台管理','基于智能算法对告警消息压缩合并','支持阈值、同环比、预测异常检测','自动故障修复'],
introData:['全量的性能追踪和业务数据采集 ','分层级展示调用关系拓扑','业务关联性能数据分析'],
type:'businessApp'
},
{
title:'日志综合智能分析平台',
introduction:'通过对日志的采集、存储、备份、查询、告警分析和报表统计功能,实现海量日志管理。',
introData:['告警消息统一在平台管理','基于智能算法对告警消息压缩合并','支持阈值、同环比、预测异常检测','自动故障修复'],
introData:['高效数据处理能力','基于策略分析的安全事件响应','可视化日志展示','海量日志全生命周期管理'],
type:'securityLog'
},
{
title:'信息化协同管理支撑平台',
introduction:'基于“人工智能+大数据”底座对全新业务、系统、流程、管理、虚拟团队“全新”模式下的信息化协同。',
introData:['告警消息统一在平台管理','基于智能算法对告警消息压缩合并','支持阈值、同环比、预测异常检测','自动故障修复'],
introData:['信息、流程、时间全面统一,高效协同','理清流程、制度落地,业务按标准执行','流程申请、流程进度、流程审批全程可观'],
type:'information'
},
{
title:'魔镜智能运维管理一体机',
introduction:'数据中心已有的各类运维数据,包括业务指标数据、机器指标数据、各类监控工具的告警数据,建立涵盖数据管理、 故障发现、故障定位和故障预警的综合运维体系。',
introData:['告警消息统一在平台管理','基于智能算法对告警消息压缩合并','支持阈值、同环比、预测异常检测','自动故障修复'],
// introduction:'数据中心已有的各类运维数据,包括业务指标数据、机器指标数据、各类监控工具的告警数据,建立涵盖数据管理、 故障发现、故障定位和故障预警的综合运维体系。',
introData:['动态关联IT与业务','故障根因分析溯源','业务健康随时掌控','提供IT规划参考依据','智能告警运维服务'],
type:'maintenance'
},
{
title:'魔镜智能多云运维平台',
introduction:'基于“人工智能+大数据”底座对全新业务、系统、流程、管理、虚拟团队“全新”模式下的信息化协同。',
introData:['告警消息统一在平台管理','基于智能算法对告警消息压缩合并','支持阈值、同环比、预测异常检测','自动故障修复'],
introData:['多云资源统一管理','多云环境自动化编排','多云资源统一运维和监控','多维数据可视化'],
type:'cloud'
}
]
... ...
... ... @@ -443,9 +443,15 @@ export function alarm() {
introduction:'在告警降噪过程中,通过配置适当的合并规则,将具有相似特征的告警合并到同一个分组中,实现批量的通知。例如可以设置将相同应用的告警进行合并,从而避免同一个应用的多个告警频繁触发通知。',
img:'assets/img/serviceSecond/alarm/noiseReduce.png',
type:'noiseReduce',
subTitle:'兼容并包:开放告警',
subIntro:'对于已有的监控系统产生的告警,或者多云场景下的告警,也可以通过开放告警的方式统一接入到综合告警算法平台,进行统一的告警管理。目前开放告警累计支持了PROMETHEUS、ALERTMANAGERGRAFANA、ZABBIXDATADOGLOKIAWS CLOUDWATCH.NEW RELIC 华为云云监控等十多个监控源,对各个不同系统的告警进行管理。',
// subTitle:'兼容并包:开放告警',
// subIntro:'对于已有的监控系统产生的告警,或者多云场景下的告警,也可以通过开放告警的方式统一接入到综合告警算法平台,进行统一的告警管理。目前开放告警累计支持了PROMETHEUS、ALERTMANAGERGRAFANA、ZABBIXDATADOGLOKIAWS CLOUDWATCH.NEW RELIC 华为云云监控等十多个监控源,对各个不同系统的告警进行管理。',
},
{
title:'兼容并包:开放告警',
introduction:'对于已有的监控系统产生的告警,或者多云场景下的告警,也可以通过开放告警的方式统一接入到综合告警算法平台,进行统一的告警管理。目前开放告警累计支持了PROMETHEUS、ALERTMANAGER、GRAFANA、ZABBIX、DATADOG、LOKI、AWS CLOUDWATCH、NEW RELIC、华为云云监控等十多个监控源,对各个不同系统的告警进行管理。',
img:'assets/img/serviceSecond/alarm/inclusive.png',
type:'inclusive'
}
]
}
... ...
... ... @@ -30,7 +30,7 @@
//lsq 设置置顶之后的logo图片 2022-09-20
let path=window.location.hash;
let pathArr=path.split('/');
if(pathArr.length>2){
if(pathArr.length>2 && window.location.hash.indexOf('#/about')==-1){
$('.logo-outer .hg-logo').attr('src','assets/img/logo.png');
$('.navigation').removeClass('navigation-white');
}else{
... ...
... ... @@ -81,7 +81,7 @@
<router-link to="/services">产品及服务</router-link>
</li>
<li top-nav="about">
<router-link to="/about">了解鸿果</router-link>
<router-link to="/about/0">了解鸿果</router-link>
</li>
<li top-nav="concat">
<router-link to="/concat">加入我们</router-link>
... ... @@ -132,10 +132,10 @@
<h4 class="footer-title">产品内容</h4>
<div class="widget-content">
<ul>
<li><a href="#">综合告警智能算法平台</a></li>
<li><a href="#">综合监控管理A-view</a></li>
<li><a href="#">CMDB资产管理</a></li>
<li><a href="#">业务及应用综合分析平台</a></li>
<li><router-link to="/services/alarm">综合告警智能算法平台</router-link></li>
<li><router-link to="/services/Aview">综合监控管理A-view</router-link></li>
<li><router-link to="/services/cmdb">CMDB资产管理</router-link></li>
<li><router-link to="/services/businessApp">业务及应用综合分析平台</router-link></li>
</ul>
</div>
</div>
... ... @@ -146,10 +146,10 @@
<h4 style=" font-weight: 600;position: relative;margin-bottom: 40px;text-transform: capitalize;">&nbsp;</h4>
<div class="widget-content">
<ul>
<li><a href="#">日志综合智能分析平台</a></li>
<li><a href="#">信息化协同管理支撑平台</a></li>
<li><a href="#">魔镜智能运维管理一体机</a></li>
<li><a href="#">魔镜智能多云运维平台</a></li>
<li><router-link to="/services/securityLog">日志综合智能分析平台</router-link></li>
<li><router-link to="/services/information">信息化协同管理支撑平台</router-link></li>
<li><router-link to="/services/maintenance">魔镜智能运维管理一体机</router-link></li>
<li><router-link to="/services/cloud">魔镜智能多云运维平台</router-link></li>
</ul>
</div>
</div>
... ... @@ -164,12 +164,12 @@
<div class="col-sm-5">
<div class="footer-widget links-widget">
<h4 class="footer-title">关于我们</h4>
<div class="widget-content">
<div class="widget-content about-widget-content">
<ul>
<li>
<router-link to="/about">公司简介</router-link>
<router-link to="/about/1" data-id="1">公司简介</router-link>
</li>
<li><a href="#">合作流程</a></li>
<li><router-link to="/about/6" data-id="6">合作流程</router-link></li>
</ul>
</div>
</div>
... ...
export default {
mounted() {
this.pageInit()
if(window.location.hash.indexOf('#/about')!=-1){
$('.footer-section').hide();
let html=`<section>
<footer class="footer-section pt-100 footer-section-about">`+$('.footer-section').html()+`</footer>
</section>`
$('.wrap-container').append(html)
}else{
$('.footer-section').show();
}
},
create(){
this.pageInit()
... ... @@ -217,7 +226,7 @@ export default {
var target = $(this).attr('data-target');
//lsq 产品二级页面的二级导航锚点 2022-09-19
let top=$(target).offset().top
if($(this).hasClass('tab-item')){
if($(this).hasClass('tab-item') || $(this).hasClass('scroll-item')){
top-=100;
}
// animate
... ...
... ... @@ -10,7 +10,7 @@ const routes = [
component: () => myImport('views/services/index')
},
{
path: '/about',
path: '/about/:id',
name: 'about',
component: () => myImport('views/about/index')
},
... ...
import pageInit from "../../minixs/pageInit.js";
import {culturalValuesDatas,culturalDatas} from "../../../../assets/img/data/aboutData.js";
import {culturalValuesDatas,culturalDatas,imgsDatas} from "../../../../assets/img/data/aboutData.js";
export default {
name: 'home',
template: '',
... ... @@ -8,30 +7,11 @@ export default {
components: {},
props: [],
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let culturalValuesData=Vue.ref(culturalValuesDatas());
let culturalData=Vue.ref(culturalDatas());
var imgs = [{
name:'质量管理体系认证证书',
path:'assets/img/about/certificate/1.png'
},{
name:'技术服务管理体系认证证书',
path:'assets/img/about/certificate/2.png'
},{
name:'连续性管理体系认证证书',
path:'assets/img/about/certificate/3.png'
},{
name:'信息安全管理体系认证证书',
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'
}];
var imgs = Vue.ref(imgsDatas());
let flag =Vue.ref(true);
let i=Vue.ref(0);
let MousewheelFun=(e)=>{
... ... @@ -43,7 +23,6 @@ export default {
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(){
... ... @@ -62,6 +41,11 @@ export default {
}
}
}
setNavStyle();
}
// 设置导航的样式
let setNavStyle=()=>{
if(i.value==2 || i.value==4 || i.value==6){
$('.navigation').removeClass('navigation-white');
$('.logo-outer .hg-logo').attr('src','assets/img/logo.png');
... ... @@ -71,18 +55,35 @@ export default {
$('.logo-outer .hg-logo').attr('src','assets/img/logo-footer.png');
}
}
//联系方式是否出现
let isConcat=Vue.ref(false);
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)
//设置从footer进入页面的显示位置
let setFormFooter=(item)=>{
let id=proxy.$route.params.id;
if(item){
id=item;
}
if(id){
i.value=id;
let hei=$('.wrap-container>section').first().outerHeight();
flag.value = false;
$('.wrap-container').animate({top:-i.value*hei},1000,function(){
flag.value=true;
})
setTimeout(function (){
$('.wrap-container section:nth-child('+(Number(i.value)+1)+') .wow').removeAttr('style');
$('.about-widget-content li a').unbind('click.about').on('click.about',function (){
setFormFooter($(this).data('id'));
})
setNavStyle()
},300)
}
}
Vue.onMounted(() =>{
setFormFooter();
})
... ... @@ -93,7 +94,9 @@ export default {
MousewheelFun,
flag,
i,
isConcat
isConcat,
setNavStyle,
setFormFooter
}
}
... ...
... ... @@ -14,7 +14,7 @@
<div class="owl-carousel owl-theme owl-loaded all-height">
<div class="owl-stage-outer owl-height all-height">
<div class="owl-stage all-height">
<div class="owl-item all-height" v-for="(item,index) in homeData" :style="'background: url(assets/img/index/' + (index+1) + '.png);background-size:cover;'">
<div :class="['owl-item', 'all-height',{'scroll-to-target':index==0,'cursor-pointer':index==0,'scroll-item':index==0}] " data-target=".team-section" v-for="(item,index) in homeData" :style="'background: url(assets/img/index/' + (index+1) + '.png);background-size:cover;'">
<!-- <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>
... ... @@ -46,8 +46,9 @@
</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 :class="[ 'tooltip', 'tooltip-self','flex-column-center',{'opacity1':item.isHover,'opacity0':!item.isHover}]">
<div>{{item.title}}</div>
<div>{{item.tipIntro}}</div>
</div>
</div>
</div>
... ... @@ -133,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="mb-35 pr-65 align-items-center flex-column-center">
<div class="title-style">"魔镜智能"全面完成国产化兼容适配认证</div>
<div class="title-intro pt-20">完成对主流国产服务器、数据库、操作系统、中间件、等兼容适配,并取得一系列兼容性认证</div>
</div>
... ... @@ -152,7 +153,7 @@
<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="title-style pt-30">{{item.title}}</div>
<div class="item-text title-intro pt-30">
{{item.content}}
</div>
... ...
... ... @@ -27,7 +27,7 @@
</section>
<section :class="['info-container', 'rel', {'mb-70':item.type=='noiseReduce' || item.type=='lifeCycle'}, 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in alarmData.data" :key="item">
<section :class="['info-container','alarm-info-container', 'rel', {'mb-70': item.type=='lifeCycle' || item.type=='inclusive'}, 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in alarmData.data" :key="item">
<div class="div-type" :data-type="item.type" ></div>
<div class="container">
<h3 class="info-title">{{item.title}}</h3>
... ...