monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 4f708c65639d050fca64c74a9fba9a1ac17c9c77 2 parents 2e192251 383a01c5

Merge branch 'master-500-dev-lushangqing' into 'master-500-dev' 

【无】vue页面给ajax请求增加headers的参数（当前页面的title的值，window.top.location.hash）



See merge request !986
Inline Side-by-side
Showing 39 changed files with 502 additions and 169 deletions
@@ -71,8 +71,31 @@ Promise.all([ @@ -71,8 +71,31 @@ Promise.all([
71 // } 71 // }
72 // } 72 // }
73 // }) 73 // })
74 - 74 + //start lsq 设置ajax请求增加headers参数 2022-09-20
  75 + let setAjaxData=(val)=>{
  76 + let p = window.top.location.hash;
  77 + if (p) {
  78 + let arr = p.split('#/');
  79 + if(arr && arr.length>1){
  80 + let menuPath=arr[1];
  81 + //title的值
  82 + let nameText=$(window.top.document).find("[lay-id='/"+menuPath+"'] span").text();
  83 + if(val){
  84 + nameText=val;
  85 + }
  86 + let name=encodeURIComponent(nameText)
  87 + $.ajaxSetup({
  88 + headers:{
  89 + menuPath:menuPath,
  90 + elementName:name
  91 + }
  92 + });
  93 + }
  94 + }
  95 + }
  96 + setAjaxData();
  97 + //end lsq 2022-09-20
75 app.config.globalProperties.$global = res[3].default 98 app.config.globalProperties.$global = res[3].default
76 app.config.globalProperties.$http = res[4].default 99 app.config.globalProperties.$http = res[4].default
77 app.mount('#app'); // 挂载Vue的app实例 100 app.mount('#app'); // 挂载Vue的app实例
78 -}) 101 +})
@@ -26,6 +26,36 @@ @@ -26,6 +26,36 @@
26 Start Global CSS 26 Start Global CSS
27 ==================================================================== 27 ====================================================================
28 ***/ 28 ***/
  29 +@font-face {
  30 + font-family: 'PingFang SC';
  31 + font-style: normal;
  32 + font-weight: normal;
  33 + src: url('../fonts/pingfang/PINGFANG BOLD.TTF');
  34 +}
  35 +@font-face {
  36 + font-family: 'PingFang-SC-medium';
  37 + font-style: normal;
  38 + font-weight: normal;
  39 + src: url('../fonts/pingfang/PINGFANG MEDIUM.TTF');
  40 +}
  41 +@font-face {
  42 + font-family: 'PingFang-SC-light';
  43 + font-style: normal;
  44 + font-weight: normal;
  45 + src: url('../fonts/pingfang/PINGFANG LIGHT.TTF');
  46 +}
  47 +@font-face {
  48 + font-family: 'PingFang-SC-heavy';
  49 + font-style: normal;
  50 + font-weight: normal;
  51 + src:url('../fonts/pingfang/PINGFANG HEAVY.TTF');
  52 +}
  53 +@font-face {
  54 + font-family: 'PingFang-SC-extralight';
  55 + font-style: normal;
  56 + font-weight: normal;
  57 + src:url('../fonts/pingfang/PINGFANG EXTRALIGHT.TTF');
  58 +}
29 * { 59 * {
30 margin: 0px; 60 margin: 0px;
31 padding: 0px; 61 padding: 0px;
@@ -37,7 +67,7 @@ body { @@ -37,7 +67,7 @@ body {
37 position: relative; 67 position: relative;
38 margin: 0; 68 margin: 0;
39 padding: 0; 69 padding: 0;
40 - font-family: 'Open Sans', sans-serif; 70 + font-family:'PingFang SC', 'Open Sans', sans-serif;
41 font-weight: 400; 71 font-weight: 400;
42 font-size: 16px; 72 font-size: 16px;
43 color: #848484; 73 color: #848484;
@@ -720,7 +750,12 @@ textarea:placeholder, @@ -720,7 +750,12 @@ textarea:placeholder,
720 border-radius: 25px; 750 border-radius: 25px;
721 box-shadow: 0 1px 17px rgba(0, 0, 0, 0.07); 751 box-shadow: 0 1px 17px rgba(0, 0, 0, 0.07);
722 } 752 }
723 - 753 +.services-section{
  754 + height: calc(100vh) ;
  755 + display: flex;
  756 + align-items: center;
  757 + flex-flow: column;
  758 +}
724 .service-image { 759 .service-image {
725 margin-bottom: 20px; 760 margin-bottom: 20px;
726 } 761 }
@@ -750,7 +785,7 @@ textarea:placeholder, @@ -750,7 +785,7 @@ textarea:placeholder,
750 785
751 .service-carousel .owl-dots .owl-dot.active { 786 .service-carousel .owl-dots .owl-dot.active {
752 background-color: #1C00AF; 787 background-color: #1C00AF;
753 - width: 42px; 788 + width: 36px;
754 } 789 }
755 790
756 791
@@ -1739,34 +1774,53 @@ blockquote:before { @@ -1739,34 +1774,53 @@ blockquote:before {
1739 position: relative; 1774 position: relative;
1740 display: flex; 1775 display: flex;
1741 justify-content: center; 1776 justify-content: center;
  1777 + flex-flow: column;
1742 } 1778 }
1743 .single-service-box{ 1779 .single-service-box{
1744 padding:0; 1780 padding:0;
1745 } 1781 }
1746 .tooltip-self{ 1782 .tooltip-self{
1747 - background-color: transparent; 1783 + /*background-color: transparent;*/
1748 width:100%; 1784 width:100%;
1749 height:100%; 1785 height:100%;
1750 display: flex; 1786 display: flex;
1751 align-items: center; 1787 align-items: center;
1752 justify-content: center; 1788 justify-content: center;
1753 line-height: 30px; 1789 line-height: 30px;
  1790 + background:url("../img/technology/technology-tip.png");
  1791 + color: #fff;
  1792 + padding: 20px;
1754 } 1793 }
1755 -.principle-item{  
1756 - background-color: #000;  
1757 - padding:40px 20px;  
1758 - color:#fff; 1794 +.principle-con{
  1795 + display: flex;
  1796 + flex-flow: column;
  1797 + align-items: center;
1759 border-radius: 4px; 1798 border-radius: 4px;
  1799 + border-right: 2px solid #ccc;
  1800 +}
  1801 +.principle-item{
  1802 + padding:20px 40px;
  1803 +
1760 } 1804 }
1761 -.principle-item h4{  
1762 - color:#aaaaaa;  
1763 - margin-top:20px; 1805 +.principle .col-lg-4:last-child .principle-item{
  1806 + border:none;
1764 } 1807 }
1765 .principle-item-title{ 1808 .principle-item-title{
  1809 + font-size: 28px;
  1810 + line-height: normal;
  1811 + color:#333333;
1766 display: flex; 1812 display: flex;
  1813 + align-items: center;
  1814 +}
  1815 +.principle-item-intro{
  1816 + font-size: 18px;
  1817 + color:#333333;
  1818 + line-height: normal;
  1819 + text-align: left;
  1820 + padding-top:30px;
1767 } 1821 }
1768 .num-icon{ 1822 .num-icon{
1769 - border: 1px solid #fff; 1823 + border: 1px solid #333333;
1770 border-radius: 50%; 1824 border-radius: 50%;
1771 width: 30px; 1825 width: 30px;
1772 height: 30px; 1826 height: 30px;
@@ -1807,6 +1861,14 @@ blockquote:before { @@ -1807,6 +1861,14 @@ blockquote:before {
1807 display: flex; 1861 display: flex;
1808 align-items: center; 1862 align-items: center;
1809 justify-content: space-between; 1863 justify-content: space-between;
  1864 + border-bottom: 2px solid #ccc;
  1865 + padding:0 20px;
  1866 +}
  1867 +.section-item{
  1868 + padding:20px;
  1869 +}
  1870 +.section-item-active{
  1871 + border-bottom: 3px solid #e43730;
1810 } 1872 }
1811 .item-content{ 1873 .item-content{
1812 flex:1; 1874 flex:1;
@@ -1817,15 +1879,27 @@ blockquote:before { @@ -1817,15 +1879,27 @@ blockquote:before {
1817 .section-item img,.owl-carousel .owl-item .title-icon img,.owl-carousel .owl-item .img-right img{ 1879 .section-item img,.owl-carousel .owl-item .title-icon img,.owl-carousel .owl-item .img-right img{
1818 width:auto; 1880 width:auto;
1819 } 1881 }
  1882 +.compatible-item{
  1883 + padding:40px 0;
  1884 +}
1820 .team-item-right{ 1885 .team-item-right{
1821 padding:20px; 1886 padding:20px;
  1887 + max-width: 300px;
  1888 + display: flex;
  1889 + align-items: center;
  1890 + justify-content: center;
  1891 + min-height: 400px;
1822 } 1892 }
1823 1893
1824 .team-item{ 1894 .team-item{
1825 width:100%; 1895 width:100%;
1826 padding:20px; 1896 padding:20px;
1827 } 1897 }
1828 -.title-icon{padding:20px 0;} 1898 +.title-icon{
  1899 + padding:20px 0;
  1900 + justify-content: flex-start;
  1901 + display: flex;
  1902 +}
1829 .team-item-left{ 1903 .team-item-left{
1830 padding:40px; 1904 padding:40px;
1831 } 1905 }
@@ -1925,6 +1999,7 @@ blockquote:before { @@ -1925,6 +1999,7 @@ blockquote:before {
1925 .advantage-title-intro{ 1999 .advantage-title-intro{
1926 color:#848484; 2000 color:#848484;
1927 font-size: 12px; 2001 font-size: 12px;
  2002 + font-family: 'PingFang-SC-medium';
1928 } 2003 }
1929 .info-value{ 2004 .info-value{
1930 position: relative; 2005 position: relative;
@@ -2155,4 +2230,133 @@ blockquote:before { @@ -2155,4 +2230,133 @@ blockquote:before {
2155 display: flex; 2230 display: flex;
2156 } 2231 }
2157 } 2232 }
  2233 +/*lsq 首页调整优化 2022-09-20*/
  2234 +.main-menu .navigation > li > a{
  2235 + color:#333;
  2236 +}
  2237 +.main-menu .navigation > li:hover > a, .main-menu .navigation > li.current > a{
  2238 + border-bottom: 3px solid #e43730;
  2239 +}
  2240 +.main-menu .navigation.navigation-white > li > a{
  2241 + color:#ffffff;
  2242 +}
  2243 +.main-menu .navigation.navigation-white > li:hover > a, .main-menu .navigation.navigation-white > li.current > a{
  2244 + border-bottom: 3px solid #e43730;
  2245 +}
  2246 +.owl-item{
  2247 + position: relative;
  2248 +}
  2249 +.owl-item-content{
  2250 + position: absolute;
  2251 + top: 0;
  2252 + height: 100%;
  2253 + width: 70%;
  2254 + display: flex;
  2255 + flex-flow: column;
  2256 + justify-content: center;
  2257 + color:#fff;
  2258 + text-align: left;
  2259 + left: 10%;
  2260 +}
  2261 +.owl-item-intro{
2158 2262
  2263 +}
  2264 +.max-width-6{
  2265 + max-width: 600px;
  2266 +}
  2267 +.font-size-42{
  2268 + font-size: 42px;
  2269 +}
  2270 +.font-size-20{
  2271 + font-size: 20px;
  2272 +}
  2273 +.font-size-12{
  2274 + font-size: 12px;
  2275 +}
  2276 +.owl-item-button{
  2277 + color: #ffffff;
  2278 +}
  2279 +
  2280 +.home-button{
  2281 + border-radius: 20px;
  2282 + padding: 8px 40px;
  2283 + cursor: pointer;
  2284 + margin-left: 10px;
  2285 + font-size: 12px;
  2286 +}
  2287 +.btn-service{
  2288 + background-color:rgba(69, 69, 69,.73);
  2289 +}
  2290 +.btn-service:hover{
  2291 + background-color:rgba(69, 69, 69,1);
  2292 +}
  2293 +.btn-concat{
  2294 + background-color: rgba(52, 161, 255,.73);
  2295 +}
  2296 +.btn-concat:hover{
  2297 + background-color: rgba(52, 161, 255,1);
  2298 +}
  2299 +.owl-item-title{
  2300 + line-height: normal;
  2301 +}
  2302 +@media (min-width: 1400px){
  2303 + .container {
  2304 + max-width: 1380px;
  2305 + }
  2306 +}
  2307 +.title-style{
  2308 + font-size: 36px;
  2309 + color:#333333;
  2310 + line-height: normal;
  2311 +}
  2312 +.title-intro{
  2313 + font-size: 18px;
  2314 + color:#838586;
  2315 + font-family: 'PingFang-SC-medium';
  2316 +}
  2317 +.tech-title-num{
  2318 + font-size: 36px;
  2319 + color:#333;
  2320 +}
  2321 +.tech-title{
  2322 + font-size: 18px;
  2323 + color:#666;
  2324 +}
  2325 +.step-route{
  2326 + position: absolute;
  2327 + height: 100%;
  2328 + width: 100%;
  2329 + left: 0;
  2330 + top: 0;
  2331 + z-index: -1;
  2332 + background: url('../img/index/step-route.png');
  2333 + background-size: cover;
  2334 +}
  2335 +.route-title{
  2336 + color:#ffffff;
  2337 +}
  2338 +.step-route-item{
  2339 + font-size: 18px;
  2340 + text-align: center;
  2341 + padding:30px;
  2342 +}
  2343 +
  2344 +.step-route-item:nth-child(2n){
  2345 + background-color: rgba(56, 58, 65,.65);
  2346 +}
  2347 +.step-route-item:nth-child(2n+1){
  2348 + background-color:rgba(50, 52, 58,.65) ;
  2349 +}
  2350 +.step-route-item.step-route-item-active{
  2351 + background-color: #e43730;
  2352 +}
  2353 +.compatible-bg{
  2354 + position: absolute;
  2355 + height: 100%;
  2356 + width: 100%;
  2357 + left: 0;
  2358 + top: 0;
  2359 + z-index: -1;
  2360 + background: url('../img/index/compatible-bg.png');
  2361 + background-size: cover;
  2362 +}
No preview for this file type
  1 +export function homeDatas() {
  2 + let res=[
  3 + {
  4 + title:'"魔镜智能"全面完成国产化兼容适配认证',
  5 + introduction:'鸿果科技旗下“魔锁智能”自研”A-View智能综合监控管理平台系统“V3.0完成对主流国产服务器、数据库、操作系统、中间件等兼容适配，并取得一系列兼容性认证',
  6 + isService:false,
  7 + isConcat:false,
  8 + },
  9 + {
  10 + title:'不仅仅是智能化运维,',
  11 + title1:'提供一站式的IT运维管理平台',
  12 + introduction:'基于根因分析的自动巡检程序，降低海量主机运维复杂度同时对海量主机批量执行，基于根因分析和多种高级算法 提高运维工作效率再多主机也不怕',
  13 + isService:true,
  14 + isConcat:false,
  15 + },
  16 + {
  17 + title:'运维数字化道路，鸿果与你同行',
  18 + introduction:'鸿果自研的产品一-数字运维中台作为智能运维各应用场景的支撑平台，提供数据治理服务、流批一体服务和AI平台服务',
  19 + isService:true,
  20 + isConcat:true,
  21 + }
  22 + ]
  23 + return res
  24 +}
  25 +export function compatibleDatas(){
  26 + let res=[
  27 + {
  28 + id:'1',
  29 + logoUrl:'logo-dong-default',
  30 + logoUrlTip:'logo-dong',
  31 + urlName:'dong',
  32 + content:'东方通应用服务器软件TongWeb V7.0 产品，是由东方通推出的遵循JavaEE7规范的企业级应用服务器，不仅为企业应用提供了可靠、可伸缩、可管理和高安全的基础平台，同时具有功能完善、支持开放标准和基于组件开发、多层架构、轻量等特点。'
  33 + },
  34 + {
  35 + id:'2',
  36 + logoUrl:'logo-da-default',
  37 + logoUrlTip:'logo-da',
  38 + urlName:'da',
  39 + content:'达梦数据库管理系统V8（简称DM8）融合了分布式、弹性计算与云计算的优势，多样化架构充分满足不同场景需求，支持超大规模并发事务处理和事务-分析混合型业务处理，动态分配计算资源，实现更精细化的资源利用、更低成本的投入。'
  40 + },
  41 + {
  42 + id:'3',
  43 + logoUrl:'logo-nan-default',
  44 + logoUrlTip:'logo-nan',
  45 + urlName:'nan',
  46 + content:'南大通用大规模分布式并行数据库集群系统[简称：GBase 8a MPP Cluster] 是基于 GBase 8a 列存储数据库的一款 Shared Nothing 架构的分布式并行分析型数据库集群，具备高性能、高可用、高扩展特性，可以为超大规模数据管理提供高性价比的通用计算平台。'
  47 + },
  48 + {
  49 + id:'4',
  50 + logoUrl:'logo-ren-default',
  51 + logoUrlTip:'logo-ren',
  52 + urlName:'ren',
  53 + content:'金仓数据库管理系统KingbaseES是面向事务处理类、兼顾分析类应用领域的通用数据库产品，致力于解决高安全、高并发、高可靠数据存储计算问题，是一款为企事业单位等管理信息系统、业务系统量身打造，具有高成熟度的数据库产品。'
  54 + },
  55 + {
  56 + id:'5',
  57 + logoUrl:'logo-tong-default',
  58 + logoUrlTip:'logo-tong',
  59 + urlName:'tong',
  60 + content:'统信服务器操作系统V20是一款用于构建信息化基础设施环境的平台级软件，是款体现当今主流 Linux 服务器操作系统发展水平的商业化软件产品。着重解决客户在信息化基础建设过程中，服务端基础设施的安装部署、运行维护、应用支撑等需求，具有极高的可靠性、持久的可用性、优良的可维护性。'
  61 + }
  62 + ]
  63 + return res;
  64 +}
  65 +export function techDatas(){
  66 + let res=[
  67 + {
  68 + id:'01',
  69 + isHover:false,
  70 + title:'先进的技术架构',
  71 + tipIntro:'横向融合市场主流IT系统架构，从传统巨石IT架构到现今的分布式微服务架构;纵向融合从基础laaS层、PaaS层到应用层及业务层，实现从普通运维监控到系统洞察与业务洞察的提升。'
  72 + },
  73 + {
  74 + id:'02',
  75 + isHover:false,
  76 + title:'业务与技术融合',
  77 + tipIntro:'以业务服务为核心视角、以应用架构为桥梁，打通上层业务监控到底层技术设施监控链路，故障定位更简单。'
  78 + },
  79 + {
  80 + id:'03',
  81 + isHover:false,
  82 + title:'智能的关联分析',
  83 + tipIntro:'基于应用IT资源图谱多层关联，采用智能关联分析引擎实现精准告警，实时动态评估故障对业务的影响级别。'
  84 + },
  85 + {
  86 + id:'04',
  87 + isHover:false,
  88 + title:'构件化开发平台',
  89 + tipIntro:'围绕用户业务管理需求，其通过low-code的插件化、配置化的开发方式下，提供可视化的用户编排界面、控件元素和成熟稳定的模块，助力用户快速配置个性化IT管理工具。'
  90 + },
  91 + {
  92 + id:'05',
  93 + isHover:false,
  94 + title:'全链路业务监测',
  95 + tipIntro:'结合网络与应用的立体视角，在云原生微服务框架下，建立全链路分布式追踪能力，保障云原生全链路业务稳定与连续性。'
  96 + }
  97 + ]
  98 + return res;
  99 +}
  100 +export function stepRoutes(){
  101 + let res=[
  102 + 'step1 集中监控智能化改造',
  103 + 'step2 指标监控智能化改造',
  104 + 'step3 日志智能异常检测弥补监控不足',
  105 + 'step4 智能故障排查-根因分析和定位',
  106 + 'step5 智能知识管理-知识图谱',
  107 + 'step6 故障自愈'
  108 + ]
  109 + return res;
  110 +}
  111 +export function logoDatas(){
  112 + let res=[
  113 + {
  114 + id:'1',
  115 + logoUrl:'logo-dong-default',
  116 + logoUrlTip:'logo-dong',
  117 + active:true
  118 + },
  119 + {
  120 + id:'2',
  121 + logoUrl:'logo-da-default',
  122 + logoUrlTip:'logo-da',
  123 + active:false
  124 + },
  125 + {
  126 + id:'3',
  127 + logoUrl:'logo-nan-default',
  128 + logoUrlTip:'logo-nan',
  129 + active:false
  130 + },
  131 + {
  132 + id:'4',
  133 + logoUrl:'logo-ren-default',
  134 + logoUrlTip:'logo-ren',
  135 + active:false
  136 + },
  137 + {
  138 + id:'5',
  139 + logoUrl:'logo-tong-default',
  140 + logoUrlTip:'logo-tong',
  141 + active:false
  142 + }
  143 + ]
  144 + return res;
  145 +}

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