Compare commits
5 Commits
| Author | SHA1 | Date |
|---|---|---|
liudan
|
885e9b3548 | 2 years ago |
|
liudan
|
884db7978c | 2 years ago |
|
liudan
|
79194ede82 | 2 years ago |
|
liudan
|
032e09c3e0 | 2 years ago |
|
liudan
|
dd1ba5d482 | 2 years ago |
@ -0,0 +1,235 @@ |
||||
|
||||
.news_Container{ |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
/*首页新闻动态*/ |
||||
.news_left_container{ |
||||
} |
||||
.newsLeftContent h2{ |
||||
font-size: 30px; |
||||
font-family: Microsoft YaHei; |
||||
font-weight: bold; |
||||
color: #124AA0; |
||||
line-height: 30px; |
||||
padding-bottom:15px; |
||||
border-bottom:1px solid rgba(0,0,0,0.5); |
||||
} |
||||
.newsLeftContent p{ |
||||
margin:0; |
||||
padding: 0; |
||||
font-size: 30px; |
||||
font-family: Arial; |
||||
font-weight: 400; |
||||
color: #999999; |
||||
line-height: 36px; |
||||
margin-top:24px; |
||||
margin-bottom: 125px; |
||||
} |
||||
.newsLeftContent button{ |
||||
padding:10px 45px; |
||||
border: 1px solid #134BA1; |
||||
border-radius: 30px; |
||||
|
||||
font-size: 14px; |
||||
font-family: Microsoft YaHei; |
||||
font-weight: 400; |
||||
color: #134BA1; |
||||
} |
||||
.news_middle_container .titleContent{ |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
} |
||||
.news_middle_container .titleContent .titleItem{ |
||||
|
||||
font-size: 16px; |
||||
font-family: Microsoft YaHei; |
||||
font-weight: 400; |
||||
color: #333333; |
||||
line-height: 36px; |
||||
margin-right:27px; |
||||
} |
||||
.titleItemActive{ |
||||
font-size: 18px; |
||||
font-family: Microsoft YaHei; |
||||
font-weight: bold; |
||||
color: #134BA1 !important; |
||||
line-height: 36px; |
||||
border-bottom:4px solid #08429C; |
||||
} |
||||
.middleContent{ |
||||
display: flex; |
||||
width:100%; |
||||
margin-top: 30px; |
||||
|
||||
} |
||||
|
||||
.middleContent .imgcontainer img{ |
||||
width:100%; |
||||
height:100%; |
||||
} |
||||
.middleContent .contenttitle{ |
||||
color:#000000; |
||||
font-size:14px; |
||||
width:100%; |
||||
text-overflow: -o-ellipsis-lastline; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
display: -webkit-box; |
||||
-webkit-line-clamp: 2; |
||||
line-clamp: 2; |
||||
-webkit-box-orient: vertical; |
||||
margin: 30px 0; |
||||
} |
||||
.contentText p{ |
||||
margin:0; |
||||
padding:0; |
||||
color:#747474; |
||||
margin-bottom:30px; |
||||
} |
||||
.contentText .time{ |
||||
color:#747474; |
||||
font-size:12px; |
||||
} |
||||
.companyLeftContent h2{ |
||||
font-size: 30px; |
||||
font-family: Microsoft YaHei; |
||||
font-weight: bold; |
||||
color: #FFFFFF; |
||||
line-height: 30px; |
||||
padding-bottom:15px; |
||||
border-bottom:1px solid #FFFFFF; |
||||
} |
||||
.companyLeftContent p{ |
||||
margin:0; |
||||
padding: 0; |
||||
font-size: 30px; |
||||
font-family: Arial; |
||||
font-weight: 400; |
||||
color: #FFFFFF; |
||||
line-height: 36px; |
||||
margin-top:24px; |
||||
margin-bottom: 125px; |
||||
} |
||||
.companyLeftContent button{ |
||||
padding:10px 45px; |
||||
border-radius: 30px; |
||||
background:rgba(255,255,255,0.8); |
||||
font-size: 14px; |
||||
font-family: Microsoft YaHei; |
||||
font-weight: 400; |
||||
color: #134BA1; |
||||
border:none; |
||||
} |
||||
.logocontent img{ |
||||
width:100%; |
||||
} |
||||
|
||||
.footer .title { |
||||
font-size: 18px; |
||||
font-family: Microsoft YaHei; |
||||
font-weight: 400; |
||||
color: #333333; |
||||
line-height: 72px; |
||||
text-align: center; |
||||
} |
||||
.footer a{ |
||||
font-size: 15px; |
||||
font-family: Microsoft YaHei; |
||||
font-weight: 400; |
||||
color: #777777 !important; |
||||
line-height: 30px; |
||||
} |
||||
.footer ul{ |
||||
text-align: center; |
||||
} |
||||
/* 第三屏 */ |
||||
.section3{ |
||||
position:relative; |
||||
} |
||||
.contentContainer{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
position:absolute; |
||||
width:100%; |
||||
bottom: 0; |
||||
} |
||||
.contentContainer>.row{ |
||||
margin:0 !important; |
||||
} |
||||
.contentContainer>.row>div{ |
||||
margin:0 !important; |
||||
padding: 0 !important; |
||||
} |
||||
|
||||
.electricItem{ |
||||
text-align: center; |
||||
border-left:1px solid rgba(255,255,255,0.3); |
||||
padding:34px 0 20px 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
.electricItem .imgContainer{ |
||||
width: 70px; |
||||
/* height: 52px; */ |
||||
} |
||||
.imgContainer img{ |
||||
width:100%; |
||||
height:100%; |
||||
} |
||||
.electricItem p{ |
||||
|
||||
font-size: 16px; |
||||
font-family: Microsoft YaHei; |
||||
font-weight: 400; |
||||
color: #FFFFFF; |
||||
margin:20px 0; |
||||
} |
||||
.electricItem button{ |
||||
border: 1px solid #FFFFFF; |
||||
border-radius: 20px; |
||||
font-size: 14px; |
||||
font-family: Microsoft YaHei; |
||||
font-weight: 400; |
||||
color: #FFFFFF; |
||||
background-color: transparent; |
||||
padding:6px 24px; |
||||
display: none; |
||||
} |
||||
.addIon{ |
||||
font-size: 28px; |
||||
} |
||||
.electricItem:hover{ |
||||
background: rgba(19,75,161,0.8); |
||||
} |
||||
.electricItem:hover .addIon{ |
||||
display: none; |
||||
} |
||||
.electricItem:hover button{ |
||||
display: block; |
||||
} |
||||
.second3Title{ |
||||
|
||||
} |
||||
.second3Title .title{ |
||||
font-size: 32px; |
||||
font-family: Microsoft YaHei; |
||||
font-weight: bold; |
||||
color: #FFFFFF; |
||||
} |
||||
.second3Title p{ |
||||
padding:0; |
||||
margin:0; |
||||
margin-top:32px; |
||||
|
||||
} |
||||
.second3Title .textsecond3{ |
||||
font-size: 16px; |
||||
font-family: Microsoft YaHei; |
||||
font-weight: 400; |
||||
color: #FFFFFF; |
||||
margin-top:55px; |
||||
} |
||||
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
@ -0,0 +1,209 @@ |
||||
;(function($, window, document, undefined) { |
||||
var leoTextAnimate = function(eles, opts) { |
||||
this.element = $(eles); |
||||
this.string = $(eles).html(); |
||||
this.defaults = { |
||||
speed: 2500, |
||||
autorun: true, |
||||
delay: 0, |
||||
fixed: '', |
||||
start: '' |
||||
}; |
||||
this.options = $.extend({}, this.defaults, opts); |
||||
this.height = $(eles).height(); |
||||
} |
||||
leoTextAnimate.prototype = { |
||||
init: function() { |
||||
if (this.element.find('.TextAnimate').length <= 0) { |
||||
var html = method.getHtml(this.options, this.string); |
||||
|
||||
console.log(html) |
||||
this.element.html(html); |
||||
} |
||||
this.reset(); |
||||
if (this.options.autorun) { |
||||
if (this.options.delay == 0) { |
||||
this.run(); |
||||
} else { |
||||
var $this = this; |
||||
setTimeout(function() { |
||||
$this.run(); |
||||
}, |
||||
this.options.delay); |
||||
} |
||||
} |
||||
}, |
||||
reload: function() { |
||||
if(this.options.text){ |
||||
this.string = this.options.text; |
||||
this.element.html(this.options.text); |
||||
} |
||||
this.init(); |
||||
}, |
||||
reset: function() { |
||||
var $this = this.element.find('.TextAnimate'); |
||||
$this.css({ |
||||
'overflow': 'hidden', |
||||
'display':'inline-block', |
||||
'vertical-align':'top', |
||||
'height': this.height |
||||
}).find("span").css({ |
||||
'display': 'inline-block', |
||||
'vertical-align': 'top', |
||||
'position': 'relative', |
||||
'top': '0px', |
||||
'transform': 'translateY(0px)', |
||||
'-ms-transform': 'translateY(0px)', |
||||
'-moz-transform': 'translateY(0px)', |
||||
'-webkit-transform': 'translateY(0px)', |
||||
'-o-transform': 'translateY(0px)', |
||||
'-ms-transition': '0s', |
||||
'-moz-transition': '0s', |
||||
'-webkit-transition': '0s', |
||||
'-o-transition': '0s', |
||||
'transition': '0s' |
||||
}).find("i").css({ |
||||
'display': 'block', |
||||
'font-style': 'normal', |
||||
'height': this.height |
||||
}); |
||||
}, |
||||
run: function() { |
||||
var speed = this.options.speed; |
||||
var height = this.height; |
||||
this.reset(); |
||||
this.element.find("span").each(function() { |
||||
var $this = $(this); |
||||
var length = $this.find('i').index($this.find('.on')); |
||||
var to = -length * height + 'px'; |
||||
if (to != $this.css("top")) { |
||||
if (!window.applicationCache) { |
||||
$this.animate({ |
||||
top: to |
||||
}, |
||||
speed); |
||||
} else { |
||||
$this.css({ |
||||
'transform': 'translateY(' + to + ')', |
||||
'-ms-transform': 'translateY(' + to + ')', |
||||
'-moz-transform': 'translateY(' + to + ')', |
||||
'-webkit-transform': 'translateY(' + to + ')', |
||||
'-o-transform': 'translateY(' + to + ')', |
||||
'-ms-transition': speed / 1000 + 's', |
||||
'-moz-transition': speed / 1000 + 's', |
||||
'-webkit-transition': speed / 1000 + 's', |
||||
'-o-transition': speed / 1000 + 's', |
||||
'transition': speed / 1000 + 's' |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
var method = { |
||||
getNumber: function(options, string) { |
||||
if(!this.inArr(options.fixed, string)) { |
||||
var text = '<span>'; |
||||
if (options.start !== '') { |
||||
text += '<i>' + options.start + '</i>'; |
||||
} |
||||
for (var i = 0; i < 10; i++) { |
||||
text += '<i' + (i == string ? ' class="on"': '') + '>' + i + '</i>'; |
||||
} |
||||
return text + '</span>'; |
||||
} else { |
||||
return '<span><i class="on">' + string + '</i></span>'; |
||||
} |
||||
}, |
||||
getLowerCase: function(options, string, code) { |
||||
if (!this.inArr(options.fixed, string)) { |
||||
var text = '<span>'; |
||||
if (options.start !== '') { |
||||
text += '<i>' + options.start + '</i>'; |
||||
} |
||||
for (var i = 0; i < 26; i++) { |
||||
text += '<i' + (97 + i == code ? ' class="on"': '') + '>' + String.fromCharCode(97 + i) + '</i>'; |
||||
} |
||||
return text + '</span>'; |
||||
} else { |
||||
return '<span><i class="on">' + string + '</i></span>'; |
||||
} |
||||
}, |
||||
getUpperCase: function(options, string, code) { |
||||
if (!this.inArr(options.fixed, string)) { |
||||
var text = '<span>'; |
||||
if (options.start !== '') { |
||||
text += '<i>' + options.start + '</i>'; |
||||
} |
||||
for (var i = 0; i < 26; i++) { |
||||
text += '<i' + (65 + i == code ? ' class="on"': '') + '>' + String.fromCharCode(65 + i) + '</i>'; |
||||
} |
||||
return text + '</span>'; |
||||
} else { |
||||
return '<span><i class="on">' + string + '</i></span>'; |
||||
} |
||||
}, |
||||
getUnicode: function(options, string, code) { |
||||
if (!this.inArr(options.fixed, string)) { |
||||
var text = '<span>'; |
||||
if (options.start !== '') { |
||||
text += '<i>' + options.start + '</i>'; |
||||
} |
||||
for (var i = (code - this.getRand(2, 7)); i < (code + this.getRand(3, 10)); i++) { |
||||
text += '<i' + (i == code ? ' class="on"': '') + '>' + String.fromCharCode(i) + '</i>'; |
||||
} |
||||
return text + '</span>'; |
||||
} else { |
||||
return '<span><i class="on">' + string + '</i></span>'; |
||||
} |
||||
}, |
||||
getHtml: function(options, string) { |
||||
var html = '<div class="TextAnimate">' |
||||
for (var i = 0; i < string.length; i++) { |
||||
var text = string.substr(i, 1); |
||||
var code = text.charCodeAt(); |
||||
if (code > 47 && code < 58) { |
||||
html += this.getNumber(options, text); |
||||
} else if (code > 64 && code < 91) { |
||||
html += this.getUpperCase(options, text, code); |
||||
} else if (code > 96 && code < 123) { |
||||
html += this.getLowerCase(options, text, code); |
||||
} else { |
||||
html += this.getUnicode(options, text, code); |
||||
} |
||||
} |
||||
return html + '</div>'; |
||||
}, |
||||
getRand: function(minnum, maxnum) { |
||||
return Math.floor(minnum + Math.random() * (maxnum - minnum)); |
||||
}, |
||||
inArr: function(arr,str){ |
||||
for(var i=0;i<arr.length;i++){ |
||||
if(arr[i].indexOf(str)!==-1){ |
||||
return true; |
||||
} |
||||
} |
||||
return false; |
||||
} |
||||
} |
||||
$.fn.leoTextAnimate = function(options,options2) { |
||||
$(this).each(function(){ |
||||
var plugin = $._data(this, "leoTextAnimate"); |
||||
if(options2){ |
||||
var opts = $.extend(true, {}, $.fn.leoTextAnimate.defaults, typeof options2 === "object" ? options2 : {}); |
||||
} else { |
||||
var opts = $.extend(true, {}, $.fn.leoTextAnimate.defaults, typeof options === "object" ? options : {}); |
||||
} |
||||
plugin = new leoTextAnimate(this, opts); |
||||
$._data(this, "leoTextAnimate", plugin); |
||||
if (plugin[options]) { |
||||
return plugin[options].apply(plugin, Array.prototype.slice.call(arguments, 1)); |
||||
} else if (typeof options === 'object' || !options) { |
||||
return plugin.init(); |
||||
} else { |
||||
$.error('Method ' + options + ' does not exist on jQuery.leoTextAnimate'); |
||||
} |
||||
return this; |
||||
}); |
||||
}; |
||||
})(jQuery, window, document); |
||||
Loading…
Reference in new issue