monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 0b2237ce5003d321bceebc4f0b198cf8febe05ea 2 parents 1ceb6433 b8613b46

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

【无】公司网站-样式修改 #6



See merge request !1044
Inline Side-by-side
Showing 12 changed files with 177 additions and 40 deletions
@@ -26,7 +26,7 @@ @@ -26,7 +26,7 @@
26 Start Global CSS 26 Start Global CSS
27 ==================================================================== 27 ====================================================================
28 ***/ 28 ***/
29 -@font-face { 29 +/*@font-face {
30 font-family: 'PingFang SC'; 30 font-family: 'PingFang SC';
31 font-style: normal; 31 font-style: normal;
32 font-weight: normal; 32 font-weight: normal;
@@ -67,7 +67,7 @@ @@ -67,7 +67,7 @@
67 font-style: normal; 67 font-style: normal;
68 font-weight: normal; 68 font-weight: normal;
69 src:url('../fonts/MI_LANTING_REGULAR.TTF'); 69 src:url('../fonts/MI_LANTING_REGULAR.TTF');
70 -} 70 +}*/
71 * { 71 * {
72 margin: 0px; 72 margin: 0px;
73 padding: 0px; 73 padding: 0px;
@@ -2115,6 +2115,7 @@ blockquote:before { @@ -2115,6 +2115,7 @@ blockquote:before {
2115 align-items: center; 2115 align-items: center;
2116 padding-bottom: 30px; 2116 padding-bottom: 30px;
2117 width: 100%; 2117 width: 100%;
  2118 + margin:0;
2118 } 2119 }
2119 2120
2120 .dot-item{ 2121 .dot-item{
@@ -2127,18 +2128,22 @@ blockquote:before { @@ -2127,18 +2128,22 @@ blockquote:before {
2127 font-size: 18px; 2128 font-size: 18px;
2128 font-weight: bold; 2129 font-weight: bold;
2129 flex:1; 2130 flex:1;
2130 - background-color: #f3f5f8; 2131 + background-color: #e9eaef;
2131 border-radius: 5px; 2132 border-radius: 5px;
2132 - padding:20px; 2133 + padding:10px 20px;
2133 height: 100%; 2134 height: 100%;
2134 display: flex; 2135 display: flex;
2135 align-items: center; 2136 align-items: center;
  2137 + min-height: 80px;
2136 } 2138 }
2137 2139
2138 .dot-item-active .dot-item-title,.dot-item:hover .dot-item-title{ 2140 .dot-item-active .dot-item-title,.dot-item:hover .dot-item-title{
2139 background-color:#e43730; 2141 background-color:#e43730;
2140 color:#ffffff; 2142 color:#ffffff;
2141 } 2143 }
  2144 +.dot-container{
  2145 + margin:0;
  2146 +}
2142 @media (min-width: 992px){ 2147 @media (min-width: 992px){
2143 .dot-container{ 2148 .dot-container{
2144 flex: 1; 2149 flex: 1;
@@ -2155,6 +2160,7 @@ blockquote:before { @@ -2155,6 +2160,7 @@ blockquote:before {
2155 } 2160 }
2156 .row-top{ 2161 .row-top{
2157 width:100%; 2162 width:100%;
  2163 + margin:0;
2158 } 2164 }
2159 .value-char{ 2165 .value-char{
2160 display: flex; 2166 display: flex;
@@ -3585,7 +3591,15 @@ blockquote:before { @@ -3585,7 +3591,15 @@ blockquote:before {
3585 display:none; 3591 display:none;
3586 margin-bottom: 20px; 3592 margin-bottom: 20px;
3587 } 3593 }
3588 - 3594 +.home-bg-1{
  3595 + background: url(../img/index/1.png);
  3596 +}
  3597 +.home-bg-2{
  3598 + background: url(../img/index/2.png);
  3599 +}
  3600 +.home-bg-3{
  3601 + background: url(../img/index/3.png);
  3602 +}
3589 /*992以下的一些样式*/ 3603 /*992以下的一些样式*/
3590 @media only screen and (max-width: 991px){ 3604 @media only screen and (max-width: 991px){
3591 .recruit-Hot-lg{ 3605 .recruit-Hot-lg{
@@ -3674,8 +3688,8 @@ blockquote:before { @@ -3674,8 +3688,8 @@ blockquote:before {
3674 max-width:25%; 3688 max-width:25%;
3675 } 3689 }
3676 .row-top{ 3690 .row-top{
3677 - flex:1;  
3678 - padding:15px; 3691 + /*flex:1;*/
  3692 + /*padding:15px;*/
3679 } 3693 }
3680 .value-char{ 3694 .value-char{
3681 flex-flow: column; 3695 flex-flow: column;
@@ -3702,14 +3716,18 @@ blockquote:before { @@ -3702,14 +3716,18 @@ blockquote:before {
3702 /*原24px*/ 3716 /*原24px*/
3703 font-size: 20px; 3717 font-size: 20px;
3704 } 3718 }
3705 - .title-intro-top,.product-intro-li,.count-wrap p,.func-top-item,.info-container h4,.con-title-21{ 3719 + .title-intro-top,.product-intro-li,.count-wrap p,.func-top-item,.info-container h4,.con-title-21,.info-child-title,.dataAbility-item-title{
3706 /*原21px*/ 3720 /*原21px*/
3707 font-size: 18px; 3721 font-size: 18px;
3708 } 3722 }
3709 - .title-intro,.product-intro,.concat-intro,.list-style-li,.func-bottom-intro,.info-app-intro,.advantage-intro-Aview{ 3723 + .title-intro,.product-intro,.concat-intro,.list-style-li,.func-bottom-intro,.info-app-intro,
  3724 + .advantage-intro-Aview,.info-child-intro,.dataAbility-item-intro,.dot-item-title{
3710 /*原18px*/ /*原16px*/ 3725 /*原18px*/ /*原16px*/
3711 font-size: 14px; 3726 font-size: 14px;
3712 } 3727 }
  3728 + .dot-item-title{
  3729 + min-height: auto;
  3730 + }
3713 .pd-40{ 3731 .pd-40{
3714 padding:10px; 3732 padding:10px;
3715 } 3733 }
@@ -3717,7 +3735,7 @@ blockquote:before { @@ -3717,7 +3735,7 @@ blockquote:before {
3717 flex-flow: column; 3735 flex-flow: column;
3718 } 3736 }
3719 .func-top-item{ 3737 .func-top-item{
3720 - max-width: 33.3%; 3738 + max-width: 50%;
3721 padding:0 5px; 3739 padding:0 5px;
3722 } 3740 }
3723 .func-top{ 3741 .func-top{
@@ -3738,4 +3756,39 @@ blockquote:before { @@ -3738,4 +3756,39 @@ blockquote:before {
3738 .video-section{ 3756 .video-section{
3739 padding-top:50px; 3757 padding-top:50px;
3740 } 3758 }
  3759 + .col-lg-service-3{
  3760 + max-width: 33.3%;
  3761 + }
  3762 + .dataAbility-col{
  3763 + max-width: 50%;
  3764 + }
  3765 + .maintenance-title{
  3766 + padding-top:20px;
  3767 + }
  3768 + .concat-about{
  3769 + background-image: url("../img/about/about-bg-sm.png");
  3770 + }
  3771 + .know-intro-bg{
  3772 + background-image: url("../img/about/know-intro-img-sm.png");
  3773 + }
  3774 + .about-content-intro .title-style{
  3775 + padding-top:30px;
  3776 + }
  3777 + .home-bg-1{
  3778 + background: url(../img/index/1-sm.png);
  3779 + }
3741 } 3780 }
  3781 +@media only screen and (max-width: 767px){
  3782 + .info-character.info-characterP{
  3783 + padding:15px;
  3784 + }
  3785 + .product .pt-60{
  3786 + padding-top:30px;
  3787 + }
  3788 + .rel.text-left{
  3789 + padding-top:0;
  3790 + }
  3791 + .intro-tab{
  3792 + display: none;
  3793 + }
  3794 +}
@@ -37,8 +37,35 @@ @@ -37,8 +37,35 @@
37 $('.logo-outer .hg-logo').attr('src','assets/img/logo-footer.png'); 37 $('.logo-outer .hg-logo').attr('src','assets/img/logo-footer.png');
38 $('.navigation').addClass('navigation-white'); 38 $('.navigation').addClass('navigation-white');
39 } 39 }
  40 + }
40 41
  42 + //产品二级页面滚动后二级导航
  43 + if(windowpos >= 250){
  44 + if($(window).width()>991){
  45 + $('.intro-tab').addClass('intro-tab-scroll');
  46 + //当前可视区域的高度
  47 + let winH=$(window).height();
  48 + let dataTypeEle=$("[data-type]");
  49 + if(dataTypeEle && dataTypeEle.length>0){
  50 + dataTypeEle.map((index,item)=>{
  51 + //每一个锚点距离顶部的高度
  52 + let itemH=$(item).offset().top;
  53 + if(windowpos<itemH){
  54 + if(windowpos+winH>=itemH){
  55 + $('.tab-item-li .tab-item').removeClass('tab-item-active');
  56 + let type=$(item).data('type');
  57 + $('.tab-item-li [data-target="[data-type='+type+']"]').addClass('tab-item-active');
  58 + }
  59 + }
  60 + })
  61 + }
  62 + }
  63 + }else{
  64 + $('.intro-tab').removeClass('intro-tab-scroll');
  65 + $('.tab-item-li .tab-item').removeClass('tab-item-active');
  66 + $('.tab-item-li:first-child .tab-item').addClass('tab-item-active');
41 } 67 }
  68 +
42 } 69 }
43 } 70 }
44 71
@@ -200,9 +200,9 @@ @@ -200,9 +200,9 @@
200 <a class="copyright-a" href="https://beian.miit.gov.cn/"> 200 <a class="copyright-a" href="https://beian.miit.gov.cn/">
201 京ICP备16044493号-1 201 京ICP备16044493号-1
202 </a> 202 </a>
203 - <a class="copyright-a" href="http://www.beian.gov.cn/portal/registerSystemInfo?domainname=honggroup.com.cn"> 203 + <a class="copyright-a" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802040581">
204 <img src="assets/img/beian.png" alt="" title=""> 204 <img src="assets/img/beian.png" alt="" title="">
205 - 京公网安备honggroup.com.cn号 205 + 京公网安备11010802040581号
206 </a> 206 </a>
207 207
208 </div> 208 </div>
@@ -227,7 +227,7 @@ export default { @@ -227,7 +227,7 @@ export default {
227 //lsq 产品二级页面的二级导航锚点 2022-09-19 227 //lsq 产品二级页面的二级导航锚点 2022-09-19
228 let top=$(target).offset().top 228 let top=$(target).offset().top
229 if($(this).hasClass('tab-item') || $(this).hasClass('scroll-item')){ 229 if($(this).hasClass('tab-item') || $(this).hasClass('scroll-item')){
230 - top-=100; 230 + top-=150;
231 } 231 }
232 // animate 232 // animate
233 $('html, body').animate({ 233 $('html, body').animate({
@@ -9,7 +9,7 @@ @@ -9,7 +9,7 @@
9 <img src="assets/img/shapes/shape3.png" alt="Shape"> 9 <img src="assets/img/shapes/shape3.png" alt="Shape">
10 </div> 10 </div>
11 </section> 11 </section>
12 -<div class="wrap" @Mousewheel="MousewheelFun"> 12 +<div class="wrap" @Mousewheel="MousewheelFun" @touchmove="touchFun" @touchstart="touchFunStart">
13 <div class="wrap-container"> 13 <div class="wrap-container">
14 <section class="concat-about rel rpt-150 pb-130 rpb-0 text-left "> 14 <section class="concat-about rel rpt-150 pb-130 rpb-0 text-left ">
15 </section> 15 </section>
@@ -14,25 +14,40 @@ export default { @@ -14,25 +14,40 @@ export default {
14 var imgs = Vue.ref(imgsDatas()); 14 var imgs = Vue.ref(imgsDatas());
15 let flag =Vue.ref(true); 15 let flag =Vue.ref(true);
16 let i=Vue.ref(0); 16 let i=Vue.ref(0);
17 - let MousewheelFun=(e)=>{ 17 + let setWrap = (Y,type) =>{
18 let hei=$('.wrap-container>section').first().outerHeight(); 18 let hei=$('.wrap-container>section').first().outerHeight();
19 let heiF=$('.footer-section-con').outerHeight(); 19 let heiF=$('.footer-section-con').outerHeight();
20 let sectionLength=$('.wrap-container>section').length; 20 let sectionLength=$('.wrap-container>section').length;
21 $('.wrap-container section:nth-child('+(i.value+1)+') .wow').removeAttr('style'); 21 $('.wrap-container section:nth-child('+(i.value+1)+') .wow').removeAttr('style');
22 // 控制滑动一次 22 // 控制滑动一次
23 if(flag.value){ 23 if(flag.value){
24 - // 上滑  
25 - if(e.deltaY<0){  
26 - // 不能上滑了  
27 - if(i.value>0){  
28 - i.value--;  
29 - flag.value = false;  
30 - $('.wrap-container').animate({top:-i.value*hei},1000,function(){  
31 - flag.value=true;  
32 - }) 24 + if(type == 'mouse'){
  25 + // 上滑
  26 + if(Y<0){
  27 + // 不能上滑了
  28 + if(i.value>0){
  29 + i.value--;
  30 + flag.value = false;
  31 + $('.wrap-container').animate({top:-i.value*hei},1000,function(){
  32 + flag.value=true;
  33 + })
  34 + }
  35 + }//下滑
  36 + else{
  37 + // 这个if让它不能让下继续滑动
  38 + if(i.value<7){
  39 + i.value++;
  40 + flag.value = false;
  41 + let top=-i.value*hei;
  42 + if(i.value+1==sectionLength){
  43 + top=-i.value*hei+(hei-heiF);
  44 + }
  45 + $('.wrap-container').animate({top:top},1000,function(){
  46 + flag.value=true;
  47 + })
  48 + }
33 } 49 }
34 - }//下滑  
35 - else{ 50 + }else if(type=='touchDown'){
36 // 这个if让它不能让下继续滑动 51 // 这个if让它不能让下继续滑动
37 if(i.value<7){ 52 if(i.value<7){
38 i.value++; 53 i.value++;
@@ -45,8 +60,20 @@ export default { @@ -45,8 +60,20 @@ export default {
45 flag.value=true; 60 flag.value=true;
46 }) 61 })
47 } 62 }
  63 + }else if(type=='touchUp'){
  64 + if(i.value>0){
  65 + i.value--;
  66 + flag.value = false;
  67 + $('.wrap-container').animate({top:-i.value*hei},1000,function(){
  68 + flag.value=true;
  69 + })
  70 + }
48 } 71 }
  72 +
49 } 73 }
  74 + }
  75 + let MousewheelFun=(e)=>{
  76 + setWrap(e.deltaY,'mouse')
50 setTimeout(function (){ 77 setTimeout(function (){
51 setNavStyle(); 78 setNavStyle();
52 },700) 79 },700)
@@ -63,6 +90,30 @@ export default { @@ -63,6 +90,30 @@ export default {
63 90
64 } 91 }
65 } 92 }
  93 + //移动端滑动
  94 + let startX=Vue.ref(0);
  95 + let startY=Vue.ref(0);
  96 + let endX=Vue.ref(0);
  97 + let endY=Vue.ref(0)
  98 + let touchFunStart =(e)=>{
  99 + startX.value=e.touches[0].pageX;
  100 + startY.value=e.touches[0].pageY;
  101 + }
  102 + let touchFun =(e)=>{
  103 + endX.value=e.changedTouches[0].pageX;
  104 + endY.value=e.changedTouches[0].pageY;
  105 + let X=endX.value-startX.value;
  106 + let Y=endY.value-startY.value;
  107 + if(Math.abs(Y) > Math.abs(X) && Y>0){
  108 + //向下
  109 + setWrap(e.deltaY,'touchUp')
  110 +
  111 + }else if(Math.abs(Y) > Math.abs(X) && Y<0){
  112 + //向上
  113 + setWrap(e.deltaY,'touchDown')
  114 +
  115 + }
  116 + }
66 //联系方式是否出现 117 //联系方式是否出现
67 let isConcat=Vue.ref(false); 118 let isConcat=Vue.ref(false);
68 //设置从footer进入页面的显示位置 119 //设置从footer进入页面的显示位置
@@ -103,7 +154,13 @@ export default { @@ -103,7 +154,13 @@ export default {
103 i, 154 i,
104 isConcat, 155 isConcat,
105 setNavStyle, 156 setNavStyle,
106 - setFormFooter 157 + setFormFooter,
  158 + touchFun,
  159 + touchFunStart,
  160 + startX,
  161 + startY,
  162 + endX,
  163 + endY
107 } 164 }
108 165
109 } 166 }
@@ -14,8 +14,8 @@ @@ -14,8 +14,8 @@
14 <div class="owl-carousel owl-theme owl-loaded all-height"> 14 <div class="owl-carousel owl-theme owl-loaded all-height">
15 <div class="owl-stage-outer owl-height all-height"> 15 <div class="owl-stage-outer owl-height all-height">
16 <div class="owl-stage all-height"> 16 <div class="owl-stage all-height">
17 - <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"  
18 - :style="'background: url(assets/img/index/' + (index+1) + '.png);'"> 17 + <div :class="['owl-item','home-bg-'+(index+1), '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"
  18 + >
19 <!-- <img :src="'assets/img/index/' + (index+1) + '.png'" class="d-block w-100 h-75">--> 19 <!-- <img :src="'assets/img/index/' + (index+1) + '.png'" class="d-block w-100 h-75">-->
20 <div :class="['owl-item-content']"> 20 <div :class="['owl-item-content']">
21 <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',{'text-align-center':index==2}]">{{item.title}}</div>
@@ -52,20 +52,20 @@ @@ -52,20 +52,20 @@
52 </div> 52 </div>
53 </div> 53 </div>
54 <div :class="[{'pro-advantage':item.type=='advantage'}]"></div> 54 <div :class="[{'pro-advantage':item.type=='advantage'}]"></div>
55 - <div class="row pt-30" v-if="item.dataFour && item.dataFour.length>0"> 55 + <div class="pt-30" v-if="item.dataFour && item.dataFour.length>0">
56 <div class="row-top row" v-for="(itemC,indexC) in item.dataFour" > 56 <div class="row-top row" v-for="(itemC,indexC) in item.dataFour" >
57 <div class="col-lg-6" v-if="indexC==characterActive"> 57 <div class="col-lg-6" v-if="indexC==characterActive">
58 <img class="" :src="itemC.img" alt=""> 58 <img class="" :src="itemC.img" alt="">
59 </div> 59 </div>
60 <div class="col-lg-6 flex-column-center " v-if="indexC==characterActive"> 60 <div class="col-lg-6 flex-column-center " v-if="indexC==characterActive">
61 - <h3>{{itemC.title}}</h3> 61 + <h3 class="maintenance-title">{{itemC.title}}</h3>
62 <div class="pt-30">{{itemC.introduction}}</div> 62 <div class="pt-30">{{itemC.introduction}}</div>
63 </div> 63 </div>
64 </div> 64 </div>
65 <div class="row-bottom row pt-30"> 65 <div class="row-bottom row pt-30">
66 <i class="iconCharacter icon-left" @click="prev(item.dataFour.length)"></i> 66 <i class="iconCharacter icon-left" @click="prev(item.dataFour.length)"></i>
67 <div class="dot-container row"> 67 <div class="dot-container row">
68 - <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"> 68 + <div @click="changeCharacter(indexC)" :class="['dot-item', 'col-lg-3', {'dot-item-active':indexC==characterActive,'div-hide':!itemC.isDisplay}]" v-for="(itemC,indexC) in item.dataFour">
69 <div class="dot-item-title" v-if="itemC.isDisplay">{{itemC.title}}</div> 69 <div class="dot-item-title" v-if="itemC.isDisplay">{{itemC.title}}</div>
70 <!-- <div class="dot-item-intro" v-if="itemC.isDisplay">{{itemC.introduction}}</div>--> 70 <!-- <div class="dot-item-intro" v-if="itemC.isDisplay">{{itemC.introduction}}</div>-->
71 </div> 71 </div>
@@ -32,7 +32,7 @@ export default { @@ -32,7 +32,7 @@ export default {
32 characterActive.value-- 32 characterActive.value--
33 if(characterActive.value == 0 || characterActive.value+1==dataLength-6){ 33 if(characterActive.value == 0 || characterActive.value+1==dataLength-6){
34 setDisplay(); 34 setDisplay();
35 - }else if(characterActive.value+1==dataLength-3 ){ 35 + }else if(characterActive.value+1==dataLength-4 ){
36 changeDot(dataLength,2); 36 changeDot(dataLength,2);
37 } 37 }
38 }else if(characterActive.value == 0){ 38 }else if(characterActive.value == 0){
@@ -54,11 +54,11 @@ export default { @@ -54,11 +54,11 @@ export default {
54 //特点左右点击切换 54 //特点左右点击切换
55 let changeDot=(dataLength,flag)=>{ 55 let changeDot=(dataLength,flag)=>{
56 if(flag==1){ 56 if(flag==1){
57 - //当前为第一个时向前点击 57 + //当前为第一个时，向前点击
58 maintenanceData.data.map((item,index)=>{ 58 maintenanceData.data.map((item,index)=>{
59 if(item.type == 'character'){ 59 if(item.type == 'character'){
60 item.dataFour.map((v,i)=>{ 60 item.dataFour.map((v,i)=>{
61 - if(i>characterActive.value-3){ 61 + if(i>characterActive.value-4){
62 v.isDisplay=true; 62 v.isDisplay=true;
63 }else{ 63 }else{
64 v.isDisplay=false; 64 v.isDisplay=false;
@@ -71,7 +71,7 @@ export default { @@ -71,7 +71,7 @@ export default {
71 maintenanceData.data.map((item,index)=>{ 71 maintenanceData.data.map((item,index)=>{
72 if(item.type == 'character'){ 72 if(item.type == 'character'){
73 item.dataFour.map((v,i)=>{ 73 item.dataFour.map((v,i)=>{
74 - if(i>characterActive.value-3 && i<=characterActive.value){ 74 + if(i>characterActive.value-4 && i<=characterActive.value){
75 v.isDisplay=true; 75 v.isDisplay=true;
76 }else{ 76 }else{
77 v.isDisplay=false; 77 v.isDisplay=false;
@@ -80,13 +80,13 @@ export default { @@ -80,13 +80,13 @@ export default {
80 } 80 }
81 }) 81 })
82 }else{ 82 }else{
83 - if(characterActive.value>2 && characterActive.value<dataLength){ 83 + if(characterActive.value>3 && characterActive.value<dataLength){
84 if(maintenanceData.data && maintenanceData.data.length>0){ 84 if(maintenanceData.data && maintenanceData.data.length>0){
85 maintenanceData.data.map((item,index)=>{ 85 maintenanceData.data.map((item,index)=>{
86 if(item.type == 'character'){ 86 if(item.type == 'character'){
87 - if(characterActive.value>2 && characterActive.value<6){ 87 + if(characterActive.value>3 && characterActive.value<maintenanceData.data.length){
88 item.dataFour.map((v,i)=>{ 88 item.dataFour.map((v,i)=>{
89 - if(i>2 && i<6){ 89 + if(i>3 && i<=7){
90 v.isDisplay=true; 90 v.isDisplay=true;
91 }else{ 91 }else{
92 v.isDisplay=false; 92 v.isDisplay=false;
@@ -94,7 +94,7 @@ export default { @@ -94,7 +94,7 @@ export default {
94 }) 94 })
95 }else{ 95 }else{
96 item.dataFour.map((v,i)=>{ 96 item.dataFour.map((v,i)=>{
97 - if(i>=dataLength-3){ 97 + if(i>=dataLength-4){
98 v.isDisplay=true; 98 v.isDisplay=true;
99 }else{ 99 }else{
100 v.isDisplay=false; 100 v.isDisplay=false;