gfwleak/k18-ntcs-web-ntc
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化登录页数据光束效果；更改登录页字体；

Browse Source
This commit is contained in:
chenjinsong
2019-01-02 17:05:48 +08:00
parent d81673187d
commit c34f3bf3ee
1 changed files with 340 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

669
src/main/webapp/WEB-INF/views/login.jsp
View File

@@ -44,8 +44,6 @@
padding: 0px;
}
body{
max-height:864px;
max-width:1518px;
background-color:rgba(255,255,255,0);
background-image: url("${pageContext.request.contextPath}/static/login/assets/images/login/backimg.png");
@@ -69,15 +67,19 @@
}
.main_left{
background-image: url("${pageContext.request.contextPath}/static/login/assets/images/login/two/login_03.png");
background-repeat:no-repeat;
background-size:contain;
max-height: 695px;
max-width: 905px;
}
#left_img{
position: absolute;
z-index: -1;
display: inline-block;
height: auto;
max-width: 100%;
}
.main_right{
background-image: url("${pageContext.request.contextPath}/static/login/assets/images/login/login_06-K.png");
background-image: url("${pageContext.request.contextPath}/static/login/assets/images/login/login_06.png");
background-repeat:no-repeat;
background-size: 100% 100%;
max-height: 501px;
@@ -93,6 +95,7 @@
width: 300px;
height: 260px;
}
.foot{
position: absolute;
bottom: 0px;
@@ -107,6 +110,7 @@
<div class="col-sm-12" style="height: 100%">
<div class="col-sm-7" style="height: 100%;padding-top: 6%;">
<div class="main_left" style="height: 100%">
<img id="left_img" alt="" src="${pageContext.request.contextPath}/static/login/assets/images/login/two/login_03.png">
<div class="box_chart">
<div id="ntc_chart">
</div>
@@ -123,19 +127,19 @@
<label class="block clearfix">
<span class="block input-icon input-icon-left" style="border-bottom:1px solid #565656;">
<i class="icon-user" style="padding-top: 4px;"></i>
<input id="username" type="text" name="username" class="form-control" value="${username}" placeholder="<spring:message code='fill_loginName'/>" style="padding-left: 30px;"/>
<input id="username" type="text" name="username" class="form-control" value="${username}" placeholder="<spring:message code='fill_loginName'/>" style="padding-left: 30px;font-family:微软雅黑;"/>
</span>
</label>
<label class="block clearfix" style="margin-top: 35px;">
<span class="block input-icon input-icon-left" style="border-bottom:1px solid #565656;">
<i class="icon-lock" style="padding-top: 4px;"></i>
<input id="password" type="password" name="password" class="form-control" placeholder="<spring:message code='fill_loginPassWord'/>" style="padding-left: 30px;"/>
<input id="password" type="password" name="password" class="form-control" placeholder="<spring:message code='fill_loginPassWord'/>" style="padding-left: 30px;font-family:微软雅黑;"/>
</span>
</label>
<div class="space"></div>
<div class="clearfix" style="text-align: center;margin-top: 24%;">
<div class="clearfix" style="text-align: center;margin-top: 24%;font-family:微软雅黑;">
<button type="submit" style="background-color: #4697d7!important;border-radius: 5px;" class="width-40 btn btn-sm btn-primary">
<spring:message code='login'/>
</button>
@@ -211,336 +215,343 @@
if("ontouchend" in document) document.write("<script src='${pageContext.request.contextPath}/static/login/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script type="text/javascript">
var bodyHeight = window.screen.height;
var bodyWidth = window.screen.width;
var b_width = $("body").width();
console.log(bodyWidth);
console.log($("body").width());
$("body").height(bodyHeight+"px");
$("#ntc_chart").height($(".main_left").height()+"px");
$("#ntc_chart").width($(".main_left").width()+"px");
var bodyHeight = window.screen.height;
var bodyWidth = window.screen.width;
var b_width = $("body").width();
var b_height = $("body").height();
console.log(bodyWidth);
console.log(b_width);
console.log(bodyHeight);
console.log(b_height);
console.log("----------");
var img_height = $("#left_img").height();
var img_width = $("#left_img").width();
console.log(img_height);
console.log(img_width);
$("body").height(bodyHeight+"px");
$("#ntc_chart").height($(".main_left").height()+"px");
$("#ntc_chart").width($(".main_left").width()+"px");
lineheight_y = 364;
lineheight_x = 362;
lineheight_y2 = 739;
lineheight_x2 = 767;
lineheight_y = 1050 - img_height;
lineheight_y2 = 1050 - img_height/2.2
var lines_Chart_chu = echarts.init(document.getElementById('ntc_chart'));
/* 数据流出 */
var lines_chu = [
/* 出端 */
{
coords: [
[lineheight_x2+60, lineheight_y2-70],
[978, 809]
],
effect: {
period: 0.5,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2+60, lineheight_y2-120],
[970, 777]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},{
coords: [
[lineheight_x2+60, lineheight_y2-140],
[985, 746]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2-25, lineheight_y2+65],
[878, 986]
],
effect: {
period: 0.8,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2-10, lineheight_y2+40],
[904, 968]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2, lineheight_y2+20],
[935, 952]
],
effect: {
period: 0.5,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2, lineheight_y2],
[967, 868]
],
effect: {
period: 0.8,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2+40, lineheight_y2-45],
[984, 824]
],
effect: {
period: 0.8,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
/* 左下 */
{
coords: [
[68, 83],
[388, lineheight_y]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[68, 143],
[368, lineheight_y]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#d29781'
}
}
},
{
coords: [
[68, 73],
[368, lineheight_y]
],
effect: {
period: 0.5,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[68, 273],
[lineheight_x, lineheight_y]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[28, 373],
[lineheight_x, lineheight_y]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#d29781'
}
}
},
{
coords: [
[248, 73],
[lineheight_x, lineheight_y]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#ebf546'
}
}
},
{
coords: [
[192, 105],
[lineheight_x, lineheight_y]
],
effect: {
period: 0.5,
},
lineStyle: {
normal: {
color: '#d29781'
}
}
},
{
coords: [
[11, 216],
[lineheight_x, lineheight_y]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#ebf546'
}
}
},
{
coords: [
[321, 87],
[lineheight_x+20, lineheight_y -30]
],
effect: {
period: 0.5,
},
lineStyle: {
normal: {
color: '#ebf546'
}
}
},
]
lineheight_y = 364;
lineheight_x = 362;
lineheight_y2 = 739;
lineheight_x2 = 767;
lineheight_y += (bodyWidth - b_width)/2 +30;
lineheight_y2 += (bodyWidth - b_width)/4;
var lines_Chart_chu = echarts.init(document.getElementById('ntc_chart'));
/* 数据流出 */
var lines_chu = [
/* 出端 */
{
coords: [
[lineheight_x2+60, lineheight_y2-70],
[978, 809]
],
effect: {
period: 0.5,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2+60, lineheight_y2-120],
[970, 777]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},{
coords: [
[lineheight_x2+60, lineheight_y2-140],
[985, 746]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2-25, lineheight_y2+65],
[878, 986]
],
effect: {
period: 0.8,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2-10, lineheight_y2+40],
[904, 968]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2, lineheight_y2+20],
[935, 952]
],
effect: {
period: 0.5,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2, lineheight_y2],
[967, 868]
],
effect: {
period: 0.8,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2+40, lineheight_y2-45],
[984, 824]
],
effect: {
period: 0.8,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
/* 左下 */
{
coords: [
[68, 83],
[388, lineheight_y]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[68, 143],
[368, lineheight_y]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#d29781'
}
}
},
{
coords: [
[68, 73],
[368, lineheight_y]
],
effect: {
period: 0.5,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[68, 273],
[lineheight_x, lineheight_y]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[28, 373],
[lineheight_x, lineheight_y]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#d29781'
}
}
},
{
coords: [
[248, 73],
[lineheight_x, lineheight_y]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#ebf546'
}
}
},
{
coords: [
[192, 105],
[lineheight_x, lineheight_y]
],
effect: {
period: 0.5,
},
lineStyle: {
normal: {
color: '#d29781'
}
}
},
{
coords: [
[11, 216],
[lineheight_x, lineheight_y]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#ebf546'
}
}
},
{
coords: [
[321, 87],
[lineheight_x+20, lineheight_y -30]
],
effect: {
period: 0.5,
},
lineStyle: {
normal: {
color: '#ebf546'
}
}
},
]
var line_chu_option = {
backgroundColor: 'rgba(255,255,255,0)',
grid:{
top: 10,
bottom: 10,
left: 10,
right: 10,
},
xAxis: {
show: false,
min: 0,
max: 1000,
position: 'top',
axisPointer: {
show: false
}
},
yAxis: {
show: false,
min: 0,
max: 1000,
axisPointer: {
show: false
}
},
// 线条动画
series: [
{
type: 'lines',
coordinateSystem: 'cartesian2d',
zlevel: 1,
// 动画效果
effect: {
show: true,
period: 4, //特效动画的时间，单位为 s
trailLength: 0.5, //特效尾迹的长度。0~1数值越大尾迹越长
//color: '#d29781',
symbolSize: 6
},
lineStyle: {
normal: {
color: '#BF3EFF',
width: 0,
curveness: 0
}
},
data: lines_chu
}
],
};
lines_Chart_chu.setOption(line_chu_option);
var line_chu_option = {
backgroundColor: 'rgba(255,255,255,0)',
grid:{
top: 10,
bottom: 10,
left: 10,
right: 10,
},
xAxis: {
show: false,
min: 0,
max: 1000,
position: 'top',
axisPointer: {
show: false
}
},
yAxis: {
show: false,
min: 0,
max: 1000,
axisPointer: {
show: false
}
},
// 线条动画
series: [
{
type: 'lines',
coordinateSystem: 'cartesian2d',
zlevel: 1,
// 动画效果
effect: {
show: true,
period: 4, //特效动画的时间，单位为 s
trailLength: 0.5, //特效尾迹的长度。0~1数值越大尾迹越长
//color: '#d29781',
symbolSize: 6
},
lineStyle: {
normal: {
color: '#BF3EFF',
width: 0,
curveness: 0
}
},
data: lines_chu
}
],
};
lines_Chart_chu.setOption(line_chu_option);
var url = window.location.href;
var parm = parseInt(Math.random() * 10);
if (url.lastIndexOf('?') > -1) {
　　url = url + parm;
url = url + parm;
} else {
　　url = url + "?" + parm;
url = url + "?" + parm;
}
$(window).resize(function(){
window.location.href = url;
});
/* $(window).resize(function(){
window.location.reload();
}); */
</script>
</body>
</html>