monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit b8613b4652d7a8ac37e85e45882387ac29296ea5 1 parent 1ceb6433

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

Inline Side-by-side
Showing 12 changed files with 167 additions and 30 deletions
... ... @@ -26,7 +26,7 @@
Start Global CSS
====================================================================
***/
@font-face {
/*@font-face {
font-family: 'PingFang SC';
font-style: normal;
font-weight: normal;
... ... @@ -67,7 +67,7 @@
font-style: normal;
font-weight: normal;
src:url('../fonts/MI_LANTING_REGULAR.TTF');
}
}*/
* {
margin: 0px;
padding: 0px;
... ... @@ -2115,6 +2115,7 @@ blockquote:before {
align-items: center;
padding-bottom: 30px;
width: 100%;
margin:0;
}
.dot-item{
... ... @@ -2127,18 +2128,22 @@ blockquote:before {
font-size: 18px;
font-weight: bold;
flex:1;
background-color: #f3f5f8;
background-color: #e9eaef;
border-radius: 5px;
padding:20px;
padding:10px 20px;
height: 100%;
display: flex;
align-items: center;
min-height: 80px;
}
.dot-item-active .dot-item-title,.dot-item:hover .dot-item-title{
background-color:#e43730;
color:#ffffff;
}
.dot-container{
margin:0;
}
@media (min-width: 992px){
.dot-container{
flex: 1;
... ... @@ -2155,6 +2160,7 @@ blockquote:before {
}
.row-top{
width:100%;
margin:0;
}
.value-char{
display: flex;
... ... @@ -3585,7 +3591,15 @@ blockquote:before {
display:none;
margin-bottom: 20px;
}
.home-bg-1{
background: url(../img/index/1.png);
}
.home-bg-2{
background: url(../img/index/2.png);
}
.home-bg-3{
background: url(../img/index/3.png);
}
/*992以下的一些样式*/
@media only screen and (max-width: 991px){
.recruit-Hot-lg{
... ... @@ -3674,8 +3688,8 @@ blockquote:before {
max-width:25%;
}
.row-top{
flex:1;
padding:15px;
/*flex:1;*/
/*padding:15px;*/
}
.value-char{
flex-flow: column;
... ... @@ -3702,14 +3716,18 @@ blockquote:before {
/*原24px*/
font-size: 20px;
}
.title-intro-top,.product-intro-li,.count-wrap p,.func-top-item,.info-container h4,.con-title-21{
.title-intro-top,.product-intro-li,.count-wrap p,.func-top-item,.info-container h4,.con-title-21,.info-child-title,.dataAbility-item-title{
/*原21px*/
font-size: 18px;
}
.title-intro,.product-intro,.concat-intro,.list-style-li,.func-bottom-intro,.info-app-intro,.advantage-intro-Aview{
.title-intro,.product-intro,.concat-intro,.list-style-li,.func-bottom-intro,.info-app-intro,
.advantage-intro-Aview,.info-child-intro,.dataAbility-item-intro,.dot-item-title{
/*原18px*/ /*原16px*/
font-size: 14px;
}
.dot-item-title{
min-height: auto;
}
.pd-40{
padding:10px;
}
... ... @@ -3717,7 +3735,7 @@ blockquote:before {
flex-flow: column;
}
.func-top-item{
max-width: 33.3%;
max-width: 50%;
padding:0 5px;
}
.func-top{
... ... @@ -3738,4 +3756,39 @@ blockquote:before {
.video-section{
padding-top:50px;
}
.col-lg-service-3{
max-width: 33.3%;
}
.dataAbility-col{
max-width: 50%;
}
.maintenance-title{
padding-top:20px;
}
.concat-about{
background-image: url("../img/about/about-bg-sm.png");
}
.know-intro-bg{
background-image: url("../img/about/know-intro-img-sm.png");
}
.about-content-intro .title-style{
padding-top:30px;
}
.home-bg-1{
background: url(../img/index/1-sm.png);
}
}
@media only screen and (max-width: 767px){
.info-character.info-characterP{
padding:15px;
}
.product .pt-60{
padding-top:30px;
}
.rel.text-left{
padding-top:0;
}
.intro-tab{
display: none;
}
}
\ No newline at end of file
... ...
... ... @@ -37,8 +37,35 @@
$('.logo-outer .hg-logo').attr('src','assets/img/logo-footer.png');
$('.navigation').addClass('navigation-white');
}
}
//产品二级页面滚动后二级导航
if(windowpos >= 250){
if($(window).width()>991){
$('.intro-tab').addClass('intro-tab-scroll');
//当前可视区域的高度
let winH=$(window).height();
let dataTypeEle=$("[data-type]");
if(dataTypeEle && dataTypeEle.length>0){
dataTypeEle.map((index,item)=>{
//每一个锚点距离顶部的高度
let itemH=$(item).offset().top;
if(windowpos<itemH){
if(windowpos+winH>=itemH){
$('.tab-item-li .tab-item').removeClass('tab-item-active');
let type=$(item).data('type');
$('.tab-item-li [data-target="[data-type='+type+']"]').addClass('tab-item-active');
}
}
})
}
}
}else{
$('.intro-tab').removeClass('intro-tab-scroll');
$('.tab-item-li .tab-item').removeClass('tab-item-active');
$('.tab-item-li:first-child .tab-item').addClass('tab-item-active');
}
}
}
... ...
... ... @@ -200,9 +200,9 @@
<a class="copyright-a" href="https://beian.miit.gov.cn/">
京ICP备16044493号-1
</a>
<a class="copyright-a" href="http://www.beian.gov.cn/portal/registerSystemInfo?domainname=honggroup.com.cn">
<a class="copyright-a" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802040581">
<img src="assets/img/beian.png" alt="" title="">
京公网安备honggroup.com.cn号
京公网安备11010802040581号
</a>
</div>
... ...
... ... @@ -227,7 +227,7 @@ export default {
//lsq 产品二级页面的二级导航锚点 2022-09-19
let top=$(target).offset().top
if($(this).hasClass('tab-item') || $(this).hasClass('scroll-item')){
top-=100;
top-=150;
}
// animate
$('html, body').animate({
... ...
... ... @@ -9,7 +9,7 @@
<img src="assets/img/shapes/shape3.png" alt="Shape">
</div>
</section>
<div class="wrap" @Mousewheel="MousewheelFun">
<div class="wrap" @Mousewheel="MousewheelFun" @touchmove="touchFun" @touchstart="touchFunStart">
<div class="wrap-container">
<section class="concat-about rel rpt-150 pb-130 rpb-0 text-left ">
</section>
... ...
... ... @@ -14,15 +14,16 @@ export default {
var imgs = Vue.ref(imgsDatas());
let flag =Vue.ref(true);
let i=Vue.ref(0);
let MousewheelFun=(e)=>{
let setWrap = (Y,type) =>{
let hei=$('.wrap-container>section').first().outerHeight();
let heiF=$('.footer-section-con').outerHeight();
let sectionLength=$('.wrap-container>section').length;
$('.wrap-container section:nth-child('+(i.value+1)+') .wow').removeAttr('style');
// 控制滑动一次
if(flag.value){
if(type == 'mouse'){
// 上滑
if(e.deltaY<0){
if(Y<0){
// 不能上滑了
if(i.value>0){
i.value--;
... ... @@ -46,7 +47,33 @@ export default {
})
}
}
}else if(type=='touchDown'){
// 这个if让它不能让下继续滑动
if(i.value<7){
i.value++;
flag.value = false;
let top=-i.value*hei;
if(i.value+1==sectionLength){
top=-i.value*hei+(hei-heiF);
}
$('.wrap-container').animate({top:top},1000,function(){
flag.value=true;
})
}
}else if(type=='touchUp'){
if(i.value>0){
i.value--;
flag.value = false;
$('.wrap-container').animate({top:-i.value*hei},1000,function(){
flag.value=true;
})
}
}
}
}
let MousewheelFun=(e)=>{
setWrap(e.deltaY,'mouse')
setTimeout(function (){
setNavStyle();
},700)
... ... @@ -63,6 +90,30 @@ export default {
}
}
//移动端滑动
let startX=Vue.ref(0);
let startY=Vue.ref(0);
let endX=Vue.ref(0);
let endY=Vue.ref(0)
let touchFunStart =(e)=>{
startX.value=e.touches[0].pageX;
startY.value=e.touches[0].pageY;
}
let touchFun =(e)=>{
endX.value=e.changedTouches[0].pageX;
endY.value=e.changedTouches[0].pageY;
let X=endX.value-startX.value;
let Y=endY.value-startY.value;
if(Math.abs(Y) > Math.abs(X) && Y>0){
//向下
setWrap(e.deltaY,'touchUp')
}else if(Math.abs(Y) > Math.abs(X) && Y<0){
//向上
setWrap(e.deltaY,'touchDown')
}
}
//联系方式是否出现
let isConcat=Vue.ref(false);
//设置从footer进入页面的显示位置
... ... @@ -103,7 +154,13 @@ export default {
i,
isConcat,
setNavStyle,
setFormFooter
setFormFooter,
touchFun,
touchFunStart,
startX,
startY,
endX,
endY
}
}
... ...
... ... @@ -14,8 +14,8 @@
<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',{'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);'">
<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"
>
<!-- <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>
... ...
... ... @@ -52,20 +52,20 @@
</div>
</div>
<div :class="[{'pro-advantage':item.type=='advantage'}]"></div>
<div class="row pt-30" v-if="item.dataFour && item.dataFour.length>0">
<div class="pt-30" v-if="item.dataFour && item.dataFour.length>0">
<div class="row-top row" v-for="(itemC,indexC) in item.dataFour" >
<div class="col-lg-6" v-if="indexC==characterActive">
<img class="" :src="itemC.img" alt="">
</div>
<div class="col-lg-6 flex-column-center " v-if="indexC==characterActive">
<h3>{{itemC.title}}</h3>
<h3 class="maintenance-title">{{itemC.title}}</h3>
<div class="pt-30">{{itemC.introduction}}</div>
</div>
</div>
<div class="row-bottom row pt-30">
<i class="iconCharacter icon-left" @click="prev(item.dataFour.length)"></i>
<div class="dot-container row">
<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">
<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">
<div class="dot-item-title" v-if="itemC.isDisplay">{{itemC.title}}</div>
<!-- <div class="dot-item-intro" v-if="itemC.isDisplay">{{itemC.introduction}}</div>-->
</div>
... ...
... ... @@ -32,7 +32,7 @@ export default {
characterActive.value--
if(characterActive.value == 0 || characterActive.value+1==dataLength-6){
setDisplay();
}else if(characterActive.value+1==dataLength-3 ){
}else if(characterActive.value+1==dataLength-4 ){
changeDot(dataLength,2);
}
}else if(characterActive.value == 0){
... ... @@ -54,11 +54,11 @@ export default {
//特点左右点击切换
let changeDot=(dataLength,flag)=>{
if(flag==1){
//当前为第一个时向前点击
//当前为第一个时，向前点击
maintenanceData.data.map((item,index)=>{
if(item.type == 'character'){
item.dataFour.map((v,i)=>{
if(i>characterActive.value-3){
if(i>characterActive.value-4){
v.isDisplay=true;
}else{
v.isDisplay=false;
... ... @@ -71,7 +71,7 @@ export default {
maintenanceData.data.map((item,index)=>{
if(item.type == 'character'){
item.dataFour.map((v,i)=>{
if(i>characterActive.value-3 && i<=characterActive.value){
if(i>characterActive.value-4 && i<=characterActive.value){
v.isDisplay=true;
}else{
v.isDisplay=false;
... ... @@ -80,13 +80,13 @@ export default {
}
})
}else{
if(characterActive.value>2 && characterActive.value<dataLength){
if(characterActive.value>3 && characterActive.value<dataLength){
if(maintenanceData.data && maintenanceData.data.length>0){
maintenanceData.data.map((item,index)=>{
if(item.type == 'character'){
if(characterActive.value>2 && characterActive.value<6){
if(characterActive.value>3 && characterActive.value<maintenanceData.data.length){
item.dataFour.map((v,i)=>{
if(i>2 && i<6){
if(i>3 && i<=7){
v.isDisplay=true;
}else{
v.isDisplay=false;
... ... @@ -94,7 +94,7 @@ export default {
})
}else{
item.dataFour.map((v,i)=>{
if(i>=dataLength-3){
if(i>=dataLength-4){
v.isDisplay=true;
}else{
v.isDisplay=false;
... ...