monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit 5c4da0ed17192e544de011238caf7e24964143f0 2 parents e64fbc46 deccb700

Merge branch 'master-500-dev' of http://113.200.75.45:82/monitor_v3/hg-monitor-w… 

…eb into master-500-dev-xwx
Inline Side-by-side
Showing 9 changed files with 230 additions and 62 deletions
@@ -206,7 +206,7 @@ layui.define(['element', 'admin'], function (exports) { @@ -206,7 +206,7 @@ layui.define(['element', 'admin'], function (exports) {
206 */ 206 */
207 bindElemClickEvent() { 207 bindElemClickEvent() {
208 let that=this; 208 let that=this;
209 - var eventKeys = ['button','[data-bizid]','.layui-table-link']; 209 + var eventKeys = ['button','[data-bizid]','.layui-table-link','[data-zymc]','[data-busid]'];
210 eventKeys.map(item=>{ 210 eventKeys.map(item=>{
211 if(!$(item).hasClass("on_fn")){ 211 if(!$(item).hasClass("on_fn")){
212 $(item).unbind('click.handle').on('click.handle',(function (e){ 212 $(item).unbind('click.handle').on('click.handle',(function (e){
@@ -1844,9 +1844,13 @@ blockquote:before { @@ -1844,9 +1844,13 @@ blockquote:before {
1844 .banner-container{ 1844 .banner-container{
1845 position: absolute; 1845 position: absolute;
1846 top: 0; 1846 top: 0;
  1847 + right:0;
1847 left: 0; 1848 left: 0;
1848 height: 100%; 1849 height: 100%;
1849 } 1850 }
  1851 +.banner-height{
  1852 + height:100%;
  1853 +}
1850 .banner-introduction{ 1854 .banner-introduction{
1851 display: flex; 1855 display: flex;
1852 flex-flow: column; 1856 flex-flow: column;
@@ -1859,6 +1863,15 @@ blockquote:before { @@ -1859,6 +1863,15 @@ blockquote:before {
1859 .intro-tab{ 1863 .intro-tab{
1860 box-shadow: 0 1px 8px #ccc; /*阴影*/ 1864 box-shadow: 0 1px 8px #ccc; /*阴影*/
1861 } 1865 }
  1866 +.intro-tab-container li{
  1867 + display: flex;
  1868 +}
  1869 +.intro-tab-container li:first-child{
  1870 + padding-left:0;
  1871 +}
  1872 +.intro-tab-container li:last-child{
  1873 + padding-right:0;
  1874 +}
1862 .tab-item{ 1875 .tab-item{
1863 padding:10px 0; 1876 padding:10px 0;
1864 cursor: pointer; 1877 cursor: pointer;
@@ -1927,15 +1940,83 @@ blockquote:before { @@ -1927,15 +1940,83 @@ blockquote:before {
1927 .service-right-image,.service-left-image{ 1940 .service-right-image,.service-left-image{
1928 cursor: pointer; 1941 cursor: pointer;
1929 } 1942 }
1930 -.dot-container{  
1931 -}  
1932 .dot-item-intro{ 1943 .dot-item-intro{
1933 overflow: hidden; 1944 overflow: hidden;
1934 text-overflow: ellipsis; 1945 text-overflow: ellipsis;
1935 - /*white-space:nowrap;*/  
1936 -display: -webkit-box;  
1937 --webkit-line-clamp: 1;  
1938 --webkit-box-orient: vertical; 1946 + display: -webkit-box;
  1947 + -webkit-line-clamp: 1;
  1948 + -webkit-box-orient: vertical;
  1949 +}
  1950 +.height-50{
  1951 + height: 50px;
  1952 +}
  1953 +.height-40{
  1954 + height:40px;
  1955 +}
  1956 +
  1957 +.border-div{
  1958 + width: 0;
  1959 + height: 0;
  1960 + border: 20px solid #000;
  1961 + border-top-color:transparent;
  1962 + border-bottom-color:#fff;
  1963 + border-left-color: transparent;
  1964 + border-right-color: transparent;
  1965 + position: relative;
  1966 + bottom: -5px;
  1967 + margin: auto;
  1968 +}
  1969 +.value-row-bottom{
  1970 + width:100%;
  1971 + padding:30px;
  1972 + border:1px solid rgba(204,204,204,.1);
  1973 + box-shadow: 0 0 20px rgba(204,204,204,.8);
  1974 + min-height: 116px;
  1975 +}
  1976 +.iconCharacter{
  1977 + cursor: pointer;
  1978 + height:21px;
  1979 + width:21px;
  1980 + display: none;
  1981 +}
  1982 +.icon-left{
  1983 + background-image: url("../img/serviceSecond/securityLog/arrow-left-gray.png");
  1984 +}
  1985 +.icon-right{
  1986 + background-image: url("../img/serviceSecond/securityLog/arrow-right-gray.png");
  1987 +}
  1988 +.icon-left:hover{
  1989 + background-image: url("../img/serviceSecond/securityLog/arrow-left.png");
  1990 +}
  1991 +.icon-right:hover{
  1992 + background-image: url("../img/serviceSecond/securityLog/arrow-right.png");
1939 } 1993 }
1940 .row-bottom{ 1994 .row-bottom{
1941 -}  
  1995 + display: flex;
  1996 + align-items: center;
  1997 + padding-bottom: 30px;
  1998 +}
  1999 +
  2000 +.dot-item{
  2001 + padding:20px;
  2002 + cursor: pointer;
  2003 +}
  2004 +.dot-item-active,.dot-item:hover{
  2005 + background-color:#e43730;
  2006 + border-radius: 5px;
  2007 + color:#ffffff;
  2008 +}
  2009 +@media (min-width: 992px){
  2010 + .dot-container{
  2011 + flex: 1;
  2012 + margin: 0 30px;
  2013 + flex-wrap: nowrap;
  2014 + overflow: hidden;
  2015 + }
  2016 + .iconCharacter{
  2017 + display:block;
  2018 + }
  2019 +}
  2020 +.div-hide{
  2021 + display:none;
  2022 +}
@@ -96,7 +96,7 @@ export function Information() { @@ -96,7 +96,7 @@ export function Information() {
96 } 96 }
97 export function securityLog() { 97 export function securityLog() {
98 let res={ 98 let res={
99 - title:'安全日志分析管理系统', 99 + title:'日志综合智能分析平台',
100 introduction:'基于自主知识产权的非关系型数据存储系统的新一代海量日志管理系统。系统采用主被动结合技术手段，7×24小时实时采集网络中安全设备、网络设备、服务器资源和应用系统的日志。通过对日志的采集、存储、备份、查询、告警分析和报表统计功能，实现海量日志管理。系统满足《中华人民共和国网络安全法》、等级保护、分级保护、金融行业监管条例、82号令以及国家安全要求等法律法规相关要求，为客户开展合规性建设工作提供技术支撑。', 100 introduction:'基于自主知识产权的非关系型数据存储系统的新一代海量日志管理系统。系统采用主被动结合技术手段，7×24小时实时采集网络中安全设备、网络设备、服务器资源和应用系统的日志。通过对日志的采集、存储、备份、查询、告警分析和报表统计功能，实现海量日志管理。系统满足《中华人民共和国网络安全法》、等级保护、分级保护、金融行业监管条例、82号令以及国家安全要求等法律法规相关要求，为客户开展合规性建设工作提供技术支撑。',
101 data:[ 101 data:[
102 { 102 {
@@ -117,22 +117,26 @@ export function securityLog() { @@ -117,22 +117,26 @@ export function securityLog() {
117 { 117 {
118 img:'assets/img/serviceSecond/securityLog/advantageImg.png', 118 img:'assets/img/serviceSecond/securityLog/advantageImg.png',
119 title:'高效数据处理能力', 119 title:'高效数据处理能力',
120 - introduction:'日志综合智能分析平台采用大数据架构进行数据的采集、存储、分析和检索。日志采集综合处理均值20000条/秒。数据采用高压缩存储算法，压缩比达到10：1。数据检索采用专业化日志查询引擎，百亿级日志量查询速率只需秒级。直观展示安全事件发生时间、访问源、危险等级及影响范围的分布情况。' 120 + introduction:'日志综合智能分析平台采用大数据架构进行数据的采集、存储、分析和检索。日志采集综合处理均值20000条/秒。数据采用高压缩存储算法，压缩比达到10：1。数据检索采用专业化日志查询引擎，百亿级日志量查询速率只需秒级。直观展示安全事件发生时间、访问源、危险等级及影响范围的分布情况。',
  121 + isDisplay:true
121 }, 122 },
122 { 123 {
123 img:'assets/img/serviceSecond/securityLog/advantageImg.png', 124 img:'assets/img/serviceSecond/securityLog/advantageImg.png',
124 title:'基于策略分析的安全事件响应', 125 title:'基于策略分析的安全事件响应',
125 - introduction:'日志综合智能分析平台基于状态分析的安全事件规则能够帮助用户对全网安全事件进行全方位定位，快速发现可疑行为、违规事件和攻击行为。基于时间线性的回溯分析能够帮助用户轻松了解到违规事件的时间、发生源、违规操作设备、操作行为，通过图形化还原违规行为现场，作为事后追溯的有力证据。' 126 + introduction:'日志综合智能分析平台基于状态分析的安全事件规则能够帮助用户对全网安全事件进行全方位定位，快速发现可疑行为、违规事件和攻击行为。基于时间线性的回溯分析能够帮助用户轻松了解到违规事件的时间、发生源、违规操作设备、操作行为，通过图形化还原违规行为现场，作为事后追溯的有力证据。',
  127 + isDisplay:true
126 }, 128 },
127 { 129 {
128 img:'assets/img/serviceSecond/securityLog/advantageImg.png', 130 img:'assets/img/serviceSecond/securityLog/advantageImg.png',
129 title:'可视化日志展示', 131 title:'可视化日志展示',
130 - introduction:'日志综合智能分析支持对日志查询结果进行在线快速自动分析，提供事件计数统计、时间分段环比统计、数值分段统计、字段值分类统计、字段数值统计、累计百分比统计、地理统计等统计功能，并以直观形象的统计图表（饼型图、直方图、堆积图、折线图等）来展现日志数据统计结果，并可将统计图表保存到自定义仪表盘上，方便用户随时查看。' 132 + introduction:'日志综合智能分析支持对日志查询结果进行在线快速自动分析，提供事件计数统计、时间分段环比统计、数值分段统计、字段值分类统计、字段数值统计、累计百分比统计、地理统计等统计功能，并以直观形象的统计图表（饼型图、直方图、堆积图、折线图等）来展现日志数据统计结果，并可将统计图表保存到自定义仪表盘上，方便用户随时查看。',
  133 + isDisplay:true
131 }, 134 },
132 { 135 {
133 img:'assets/img/serviceSecond/securityLog/advantageImg.png', 136 img:'assets/img/serviceSecond/securityLog/advantageImg.png',
134 title:'日志存储和归档', 137 title:'日志存储和归档',
135 - introduction:'日志存储按照《中华人民共和国网络安全法》规定留存相关的网络日志不少于六个月，超时的日志系统自动提醒相关负责人，对其做备份或销毁处理。系统将采集来的日志统一存储和归档，持海量数据存储，也支持磁盘柜、NAS和SAN等多种存储方式，便于扩充和统一查询检索。' 138 + introduction:'日志存储按照《中华人民共和国网络安全法》规定留存相关的网络日志不少于六个月，超时的日志系统自动提醒相关负责人，对其做备份或销毁处理。系统将采集来的日志统一存储和归档，持海量数据存储，也支持磁盘柜、NAS和SAN等多种存储方式，便于扩充和统一查询检索。',
  139 + isDisplay:true
136 } 140 }
137 ], 141 ],
138 type:'character' 142 type:'character'
@@ -144,22 +148,26 @@ export function securityLog() { @@ -144,22 +148,26 @@ export function securityLog() {
144 { 148 {
145 title:'日常运维有力支撑', 149 title:'日常运维有力支撑',
146 introduction:'通过系统自动化对海量日志采集、存储、分析、统计，可以及时发现IT系统中的安全隐患以及安全防御的薄弱环节，同时解决人工效率低下以及面对海量数据人工无法进行管理的难题。', 150 introduction:'通过系统自动化对海量日志采集、存储、分析、统计，可以及时发现IT系统中的安全隐患以及安全防御的薄弱环节，同时解决人工效率低下以及面对海量数据人工无法进行管理的难题。',
147 - icon:'assets/img/serviceSecond/securityLog/value-bg.png' 151 + icon:'assets/img/serviceSecond/securityLog/value-1-none.png',
  152 + iconA:'assets/img/serviceSecond/securityLog/value-1.png'
148 }, 153 },
149 { 154 {
150 title:'轻松实现海量日志全生命周期管理', 155 title:'轻松实现海量日志全生命周期管理',
151 introduction:'通过部署日志综合智能分析平台对全网设备、应用日志实现7*24小时不间断快速采集、分析和存储，无需人工干预即可实现日志自动化管理，为后续日志取证、分析和合规提供事件仓库', 156 introduction:'通过部署日志综合智能分析平台对全网设备、应用日志实现7*24小时不间断快速采集、分析和存储，无需人工干预即可实现日志自动化管理，为后续日志取证、分析和合规提供事件仓库',
152 - icon:'assets/img/serviceSecond/securityLog/value-bg.png' 157 + icon:'assets/img/serviceSecond/securityLog/value-2-none.png',
  158 + iconA:'assets/img/serviceSecond/securityLog/value-2.png'
153 }, 159 },
154 { 160 {
155 title:'合规检查必备利器', 161 title:'合规检查必备利器',
156 introduction:'系统满足等级保护、分级保护、国税总局监管条例、82号令以及国能安全36号文件等合规性要求，为用户开展合规性建设工作提供技术支撑。', 162 introduction:'系统满足等级保护、分级保护、国税总局监管条例、82号令以及国能安全36号文件等合规性要求，为用户开展合规性建设工作提供技术支撑。',
157 - icon:'assets/img/serviceSecond/securityLog/value-bg.png' 163 + icon:'assets/img/serviceSecond/securityLog/value-3-none.png',
  164 + iconA:'assets/img/serviceSecond/securityLog/value-3.png',
158 }, 165 },
159 { 166 {
160 title:'安全事件快速定位追踪', 167 title:'安全事件快速定位追踪',
161 introduction:'基于自主知识产权的日志检索引擎可以根据用户需求进行快速检索目标日志，100亿级别日志追踪检索只需要10秒即可返回结果；通过网络拓扑、IP地址定位可以实现可疑目标快速追踪。', 168 introduction:'基于自主知识产权的日志检索引擎可以根据用户需求进行快速检索目标日志，100亿级别日志追踪检索只需要10秒即可返回结果；通过网络拓扑、IP地址定位可以实现可疑目标快速追踪。',
162 - icon:'assets/img/serviceSecond/securityLog/value-bg.png' 169 + icon:'assets/img/serviceSecond/securityLog/value-4-none.png',
  170 + iconA:'assets/img/serviceSecond/securityLog/value-4.png'
163 } 171 }
164 ], 172 ],
165 type:'value' 173 type:'value'
@@ -7,19 +7,24 @@ @@ -7,19 +7,24 @@
7 7
8 <section class="intro-Con rel rpt-150 rpb-0 text-left" > 8 <section class="intro-Con rel rpt-150 rpb-0 text-left" >
9 <img src="assets/img/serviceSecond/serviceSecond.jpg" alt="Shape"> 9 <img src="assets/img/serviceSecond/serviceSecond.jpg" alt="Shape">
10 - <div class="row header-inner banner-container">  
11 - <div class="banner-introduction color-white col-lg-6">  
12 - <h2 class="intro-title color-white">{{InformationData.title}}</h2>  
13 - <span class="intro-intro">{{InformationData.introduction}}</span> 10 + <div class="container banner-container">
  11 + <div class="row banner-height ">
  12 + <div class="banner-introduction color-white col-lg-6">
  13 + <h2 class="intro-title color-white">{{InformationData.title}}</h2>
  14 + <span class="intro-intro">{{InformationData.introduction}}</span>
  15 + </div>
14 </div> 16 </div>
15 </div> 17 </div>
  18 +
16 </section> 19 </section>
17 <section class="intro-tab"> 20 <section class="intro-tab">
18 - <ul class="intro-tab-container header-inner nav nav-pills">  
19 - <li class="col-lg-2" v-for="(item,index) in InformationData.data" :key="item">  
20 - <span :class="['tab-item',{'tab-item-active':tabActive==index}]" @click="goItemType(item.type)" >{{item.title}}</span>  
21 - </li>  
22 - </ul> 21 + <div class="container">
  22 + <ul class="intro-tab-container nav nav-pills">
  23 + <li class="col-lg-2" v-for="(item,index) in InformationData.data" :key="item">
  24 + <span :class="['tab-item',{'tab-item-active':tabActive==index}]" @click="goItemType(item.type)" >{{item.title}}</span>
  25 + </li>
  26 + </ul>
  27 + </div>
23 </section> 28 </section>
24 29
25 30
@@ -48,7 +48,6 @@ export default { @@ -48,7 +48,6 @@ export default {
48 let goItemType=(type)=>{ 48 let goItemType=(type)=>{
49 let top=$("[data-type='"+type+"']").offset().top; 49 let top=$("[data-type='"+type+"']").offset().top;
50 let total=top-100; 50 let total=top-100;
51 - console.log("top",top,document.body.scrollTop,document.documentElement.scrollTop)  
52 let distance = document.documentElement.scrollTop || document.body.scrollTop 51 let distance = document.documentElement.scrollTop || document.body.scrollTop
53 //计算每一小段的距离 52 //计算每一小段的距离
54 let step=total/6; 53 let step=total/6;
@@ -7,19 +7,24 @@ @@ -7,19 +7,24 @@
7 7
8 <section class="intro-Con rel rpt-150 rpb-0 text-left" > 8 <section class="intro-Con rel rpt-150 rpb-0 text-left" >
9 <img src="assets/img/serviceSecond/serviceSecond.jpg" alt="Shape"> 9 <img src="assets/img/serviceSecond/serviceSecond.jpg" alt="Shape">
10 - <div class="row header-inner banner-container">  
11 - <div class="banner-introduction color-white col-lg-6">  
12 - <h2 class="intro-title color-white">{{securityLogData.title}}</h2>  
13 - <span class="intro-intro">{{securityLogData.introduction}}</span> 10 + <div class="container banner-container">
  11 + <div class="row banner-height">
  12 + <div class="banner-introduction color-white col-lg-6">
  13 + <h2 class="intro-title color-white">{{securityLogData.title}}</h2>
  14 + <span class="intro-intro">{{securityLogData.introduction}}</span>
  15 + </div>
14 </div> 16 </div>
15 </div> 17 </div>
  18 +
16 </section> 19 </section>
17 <section class="intro-tab"> 20 <section class="intro-tab">
18 - <ul class="intro-tab-container header-inner nav nav-pills">  
19 - <li class="col-lg-2" v-for="(item,index) in securityLogData.data" :key="item">  
20 - <span :class="['tab-item',{'tab-item-active':tabActive==index}]" @click="goItemType(item.type)" >{{item.title}}</span>  
21 - </li>  
22 - </ul> 21 + <div class="container">
  22 + <ul class="intro-tab-container nav nav-pills">
  23 + <li class="col-lg-2" v-for="(item,index) in securityLogData.data" :key="item">
  24 + <span :class="['tab-item',{'tab-item-active':tabActive==index}]" @click="goItemType(item.type)" >{{item.title}}</span>
  25 + </li>
  26 + </ul>
  27 + </div>
23 </section> 28 </section>
24 29
25 30
@@ -65,38 +70,42 @@ @@ -65,38 +70,42 @@
65 </div> 70 </div>
66 </div>--> 71 </div>-->
67 <div class="row pt-30" v-if="item.dataFour && item.dataFour.length>0"> 72 <div class="row pt-30" v-if="item.dataFour && item.dataFour.length>0">
68 - {{characterActive}}--  
69 <div class="row-top row" v-for="(itemC,indexC) in item.dataFour" > 73 <div class="row-top row" v-for="(itemC,indexC) in item.dataFour" >
70 <div class="col-lg-6" v-if="indexC==characterActive"> 74 <div class="col-lg-6" v-if="indexC==characterActive">
71 - <img class="" :src="characterImg" alt=""> 75 + <img class="" :src="itemC.img" alt="">
72 </div> 76 </div>
73 <div class="col-lg-6 flex-column-center " v-if="indexC==characterActive"> 77 <div class="col-lg-6 flex-column-center " v-if="indexC==characterActive">
74 <h3>{{itemC.title}}</h3> 78 <h3>{{itemC.title}}</h3>
75 <div class="pt-30">{{itemC.introduction}}</div> 79 <div class="pt-30">{{itemC.introduction}}</div>
76 </div> 80 </div>
77 </div> 81 </div>
78 - <div class="row-bottom row">  
79 - <i class="iconCharacter icon-left">&lt;</i> 82 + <div class="row-bottom row pt-30">
  83 + <i class="iconCharacter icon-left" @click="prev(item.dataFour.length)"></i>
80 <div class="dot-container row"> 84 <div class="dot-container row">
81 - <div class="dot-item col-lg-4" v-for="(itemC,indexC) in item.dataFour">  
82 - <div class="dot-item-title">{{itemC.title}}</div>  
83 - <div class="dot-item-intro">{{itemC.introduction}}</div> 85 + <div @click="changeCharacter(indexC)" :class="['dot-item', 'col-lg-4', {'dot-item-active':indexC==characterActive,'div-hide':!itemC.isDisplay}]" v-for="(itemC,indexC) in item.dataFour">
  86 + <div class="dot-item-title" v-if="itemC.isDisplay">{{itemC.title}}</div>
  87 + <div class="dot-item-intro" v-if="itemC.isDisplay">{{itemC.introduction}}</div>
84 </div> 88 </div>
85 </div> 89 </div>
86 - <i class="iconCharacter icon-right">&gt;</i> 90 + <i class="iconCharacter icon-right" @click="next(item.dataFour.length)"></i>
87 </div> 91 </div>
88 </div> 92 </div>
89 <div class="row pt-30" v-if="item.dataFive && item.dataFive.length>0"> 93 <div class="row pt-30" v-if="item.dataFive && item.dataFive.length>0">
90 - <div class="row-top row">  
91 - <div class="col-lg-3" v-for="(itemV,indexV) in item.dataFive">  
92 - <img class="" :src="itemV.icon" alt="">  
93 - <div class="">  
94 - <h3>{{itemV.title}}</h3>  
95 - <div>{{itemV.introduction}}</div> 94 + <div class="row-top row pt-50">
  95 + <div class="col-lg-3 info-character" @mouseover="showHover(indexV)" @mouseleave="hideHover()" v-for="(itemV,indexV) in item.dataFive">
  96 + <img v-if="valueIndex!=indexV" class="" :src="itemV.icon" alt="">
  97 + <img v-if="valueIndex==indexV" class="" :src="itemV.iconA" alt="">
  98 + <div class="pt-30">
  99 + <h4 class="text-center height-50">{{itemV.title}}</h4>
  100 + <div class="height-40">
  101 + <div class="border-div" v-if="valueIndex==indexV"></div>
  102 + </div>
96 </div> 103 </div>
97 </div> 104 </div>
98 </div> 105 </div>
99 - <div class="row-bottom"></div> 106 + <div class="value-row-bottom pt-20">
  107 + {{valueContent}}
  108 + </div>
100 </div> 109 </div>
101 </div> 110 </div>
102 </section> 111 </section>
@@ -10,13 +10,23 @@ export default { @@ -10,13 +10,23 @@ export default {
10 let securityLogData=securityLog(); 10 let securityLogData=securityLog();
11 //页签高亮显示 11 //页签高亮显示
12 let tabActive=Vue.ref(0); 12 let tabActive=Vue.ref(0);
  13 + //价值的简介
  14 + let valueContent=Vue.ref();
  15 + //价值的hover显示的图标
  16 + let valueIcon=Vue.ref();
  17 + //价值的hover显示
  18 + let valueIndex=Vue.ref(0);
13 //特点hover显示的图片 19 //特点hover显示的图片
14 let characterImg=Vue.ref(); 20 let characterImg=Vue.ref();
15 let setcharacter=()=>{ 21 let setcharacter=()=>{
16 if(securityLogData.data && securityLogData.data.length>0){ 22 if(securityLogData.data && securityLogData.data.length>0){
17 securityLogData.data.map(item=>{ 23 securityLogData.data.map(item=>{
18 if(item.type=='character'){ 24 if(item.type=='character'){
19 - characterImg.value=item.dataFour[0].img 25 + characterImg.value=item.dataFour[0].img;
  26 + }
  27 + if(item.type == 'value'){
  28 + valueContent.value=item.dataFive[0].introduction;
  29 + valueIcon.value=item.dataFive[0].iconA;
20 } 30 }
21 }) 31 })
22 } 32 }
@@ -24,31 +34,28 @@ export default { @@ -24,31 +34,28 @@ export default {
24 setcharacter(); 34 setcharacter();
25 //优势hover高亮显示 35 //优势hover高亮显示
26 let characterActive=Vue.ref(0); 36 let characterActive=Vue.ref(0);
27 - //优势是否hover 37 + //特点是否显示
28 let isMouseover=Vue.ref(false); 38 let isMouseover=Vue.ref(false);
29 //优势鼠标移入事件 39 //优势鼠标移入事件
30 let showHover=(indexA)=>{ 40 let showHover=(indexA)=>{
31 - characterActive.value=indexA;  
32 - isMouseover.value=true; 41 + valueIndex.value=indexA;
33 if(securityLogData.data && securityLogData.data.length>0){ 42 if(securityLogData.data && securityLogData.data.length>0){
34 securityLogData.data.map(item=>{ 43 securityLogData.data.map(item=>{
35 - if(item.type=='character'){  
36 - characterImg.value=item.dataFour[indexA].img 44 + if(item.type == 'value'){
  45 + valueContent.value=item.dataFive[indexA].introduction;
  46 + valueIcon.value=item.dataFive[indexA].iconA;
37 } 47 }
38 }) 48 })
39 } 49 }
40 } 50 }
41 //优势鼠标移出事件 51 //优势鼠标移出事件
42 let hideHover=()=>{ 52 let hideHover=()=>{
43 - characterActive.value=0;  
44 - isMouseover.value=false;  
45 setcharacter(); 53 setcharacter();
46 } 54 }
47 //页签点击跳转到对应的目标 55 //页签点击跳转到对应的目标
48 let goItemType=(type)=>{ 56 let goItemType=(type)=>{
49 let top=$("[data-type='"+type+"']").offset().top; 57 let top=$("[data-type='"+type+"']").offset().top;
50 let total=top-100; 58 let total=top-100;
51 - console.log("top",top,document.body.scrollTop,document.documentElement.scrollTop)  
52 let distance = document.documentElement.scrollTop || document.body.scrollTop 59 let distance = document.documentElement.scrollTop || document.body.scrollTop
53 //计算每一小段的距离 60 //计算每一小段的距离
54 let step=total/6; 61 let step=total/6;
@@ -67,6 +74,55 @@ export default { @@ -67,6 +74,55 @@ export default {
67 } 74 }
68 })() 75 })()
69 } 76 }
  77 + //特点的事件
  78 + let prev=(dataLength)=>{
  79 + if(characterActive.value>0){
  80 + characterActive.value--
  81 + if(characterActive.value == 0){
  82 + setDisplay();
  83 + }
  84 + }else if(characterActive.value == 0){
  85 + characterActive.value=dataLength-1
  86 + changeDot(dataLength);
  87 + }
  88 + }
  89 + let next=(dataLength)=>{
  90 + if((characterActive.value+1)!=dataLength) {
  91 + characterActive.value++
  92 + }else{
  93 + characterActive.value=0;
  94 + }
  95 + changeDot(dataLength);
  96 + }
  97 + let changeCharacter=(indexC)=>{
  98 + characterActive.value=indexC;
  99 + }
  100 + //特点左右点击切换
  101 + let changeDot=(dataLength)=>{
  102 + if(characterActive.value>2 && characterActive.value<dataLength){
  103 + if(securityLogData.data && securityLogData.data.length>0){
  104 + securityLogData.data.map((item,index)=>{
  105 + if(item.type == 'character'){
  106 + item.dataFour[characterActive.value-3].isDisplay=false;
  107 + }
  108 + })
  109 + }
  110 + }else{
  111 + setDisplay();
  112 + }
  113 + }
  114 + //设置特点dot全部显示
  115 + let setDisplay=()=>{
  116 + if(securityLogData.data && securityLogData.data.length>0){
  117 + securityLogData.data.map((item,index)=>{
  118 + if(item.type == 'character'){
  119 + item.dataFour.map(v=>{
  120 + v.isDisplay=true;
  121 + })
  122 + }
  123 + })
  124 + }
  125 + }
70 // 挂载完 126 // 挂载完
71 Vue.onMounted(() => { 127 Vue.onMounted(() => {
72 128
@@ -81,7 +137,15 @@ export default { @@ -81,7 +137,15 @@ export default {
81 showHover, 137 showHover,
82 hideHover, 138 hideHover,
83 setcharacter, 139 setcharacter,
84 - goItemType 140 + goItemType,
  141 + valueContent,
  142 + valueIcon,
  143 + valueIndex,
  144 + prev,
  145 + next,
  146 + changeCharacter,
  147 + changeDot,
  148 + setDisplay
85 } 149 }
86 } 150 }
87 151
@@ -150,7 +150,7 @@ @@ -150,7 +150,7 @@
150 </ol> 150 </ol>
151 </div> 151 </div>
152 </div> 152 </div>
153 - <div class="col-lg-6"> 153 + <div class="col-lg-6" @click="jumpSecond('log')">
154 <div class="service-left-image wow customFadeInLeft delay-0-1s slow"> 154 <div class="service-left-image wow customFadeInLeft delay-0-1s slow">
155 <img src="assets/img/services/p5.png" style="border-radius: 10px;"> 155 <img src="assets/img/services/p5.png" style="border-radius: 10px;">
156 </div> 156 </div>
@@ -10,6 +10,8 @@ export default { @@ -10,6 +10,8 @@ export default {
10 let jumpSecond=(type)=>{ 10 let jumpSecond=(type)=>{
11 if(type=='info'){ 11 if(type=='info'){
12 proxy.$router.push({path:'/services/information'}) 12 proxy.$router.push({path:'/services/information'})
  13 + }else if(type == 'log'){
  14 + proxy.$router.push({path:'/services/securityLog'})
13 } 15 }
14 } 16 }
15 return { 17 return {