From 2fa3959252b0646f20f74e85fa56cb245b6cca37 Mon Sep 17 00:00:00 2001
From: avene <gskanym@126.com>
Date: Mon, 14 May 2018 10:44:28 +0800
Subject: [PATCH] update style

---
 htdocs/static-sanji-v2/css/about.css | 473 +++++++++++++++------------
 htdocs/static-sanji-v2/css/top.css   |   2 +-
 2 files changed, 256 insertions(+), 219 deletions(-)

diff --git a/htdocs/static-sanji-v2/css/about.css b/htdocs/static-sanji-v2/css/about.css
index 08c9e13f..b9684e9c 100644
--- a/htdocs/static-sanji-v2/css/about.css
+++ b/htdocs/static-sanji-v2/css/about.css
@@ -1,160 +1,167 @@
+:root {
+    --main-color: #124075;
+    --second-color: #004490;
+}
+
 .timeline-ul {
-	width: 98%;
-	max-width: 1170px;
-	padding: 0;
-	margin: 0 auto;
-	position: relative
+    width: 98%;
+    max-width: 1170px;
+    padding: 0;
+    margin: 0 auto;
+    position: relative
 }
 
 .timeline-ul::before {
-	content: '';
-	position: absolute;
-	top: 0;
-	left: 50%;
-	height: 101%;
-	width: 3px;
-	background-color: #00a0de
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    height: 101%;
+    width: 3px;
+    background-color: #00a0de
 }
 
 .timeline-ul::after {
-	content: '';
-	display: table;
-	clear: both
+    content: '';
+    display: table;
+    clear: both
 }
 
 .timeline-ul li {
-	list-style: none;
-	vertical-align: bottom
+    list-style: none;
+    vertical-align: bottom
 }
 
 .timeline-ul li time {
-	color: #00a0de
+    color: #00a0de
 }
 
 .timeline-ul li p {
-	font-size: 14px;
-	color: #888;
-	margin-top: 6px;
-	line-height: 28px
+    font-size: 14px;
+    color: #888;
+    margin-top: 6px;
+    line-height: 28px
 }
 
 .timeline-ul li .li-content {
-	position: relative;
-	display: inline-block
+    position: relative;
+    display: inline-block
 }
 
 .timeline-ul li .li-content:hover .icon-event {
-	transition: all .3s;
-	transform: scale(1.5, 1.5)
+    transition: all .3s;
+    transform: scale(1.5, 1.5)
 }
 
 .timeline-ul li .icon-img {
-	height: 60px;
-	width: 60px;
-	background-size: 60px 60px;
-	background-position: center center;
-	background-repeat: no-repeat;
-	position: absolute;
-	bottom: -12px
+    height: 60px;
+    width: 60px;
+    background-size: 60px 60px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    position: absolute;
+    bottom: -12px
 }
 
 .timeline-ul li .icon-point {
-	position: absolute;
-	bottom: -7px;
-	width: 12px;
-	height: 12px;
-	background: #fff;
-	border: 1px solid #00a0de;
-	border-radius: 50%
+    position: absolute;
+    bottom: -7px;
+    width: 12px;
+    height: 12px;
+    background: #fff;
+    border: 1px solid #00a0de;
+    border-radius: 50%
 }
 
 .timeline-ul li.time-wrapper {
-	position: relative;
-	margin-left: 50%;
-	text-align: left;
-	padding-left: 20px;
-	margin-top: 50px
+    position: relative;
+    margin-left: 50%;
+    text-align: left;
+    padding-left: 20px;
+    margin-top: 50px
 }
 
 .timeline-ul li.time-wrapper .time-span {
-	position: relative;
-	top: -5px;
-	display: inline-block;
-	background: #00a0de;
-	text-align: center;
-	height: 30px;
-	line-height: 30px;
-	width: 80px;
-	color: #fff;
-	border-radius: 16px
+    position: relative;
+    top: -5px;
+    display: inline-block;
+    background: #00a0de;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    width: 80px;
+    color: #fff;
+    border-radius: 16px
 }
-.timeline-ul li.time-wrapper .time-span.leftOne{
-	left: -120px;
+
+.timeline-ul li.time-wrapper .time-span.leftOne {
+    left: -120px;
 }
+
 .timeline-ul li.time-wrapper .time-point {
-	position: absolute;
-	top: -1.5%;
-	left: -1.5%;
-	height: 18px;
-	width: 18px;
-	background-color: #fff;
-	border: 1px solid #00a0de;
-	border-radius: 50%
+    position: absolute;
+    top: -1.5%;
+    left: -1.5%;
+    height: 18px;
+    width: 18px;
+    background-color: #fff;
+    border: 1px solid #00a0de;
+    border-radius: 50%
 }
 
 .timeline-ul li.time-wrapper .time-point:hover {
-	transition: all .3s;
-	transform: scale(1.5, 1.5)
+    transition: all .3s;
+    transform: scale(1.5, 1.5)
 }
 
 .timeline-ul li.time-wrapper .time-point .time-point-blue {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	height: 10px;
-	width: 10px;
-	background-color: #00a0de;
-	border-radius: 50%
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 10px;
+    width: 10px;
+    background-color: #00a0de;
+    border-radius: 50%
 }
 
 .timeline-ul li.left {
-	position: relative;
-	text-align: right;
-	width: 50%
+    position: relative;
+    text-align: right;
+    width: 50%
 }
 
 .timeline-ul li.left .info-div {
-	position: relative;
-	display: inline-block;
-	max-width: 420px;
-	padding-right: 10px;
-	padding-left: 20px;
-	margin-left: 0;
-	text-align: left;
-	border-bottom: 2px solid #00a0de
+    position: relative;
+    display: inline-block;
+    max-width: 420px;
+    padding-right: 10px;
+    padding-left: 20px;
+    margin-left: 0;
+    text-align: left;
+    border-bottom: 2px solid #00a0de
 }
 
 .timeline-ul li.left .icon-point-left {
-	right: 100%
+    right: 100%
 }
 
 .timeline-ul li.left .icon-point-right {
-	right: -7px
+    right: -7px
 }
 
 .timeline-ul li.left .icon-img {
-	left: 5px
+    left: 5px
 }
 
 .timeline-ul li.right {
-	position: relative;
-	margin-left: 50%;
-	text-align: left
+    position: relative;
+    margin-left: 50%;
+    text-align: left
 }
 
 .timeline-ul li.right .info-div {
-	position: relative;
+    position: relative;
     display: inline-block;
     max-width: 460px;
     padding-left: 20px;
@@ -165,178 +172,208 @@
 }
 
 .timeline-ul li.right .icon-point-left {
-	left: -4px
+    left: -4px
 }
 
 .timeline-ul li.right .icon-point-right {
-	left: 100%
+    left: 100%
 }
 
 .timeline-ul li.right .icon-img {
-	right: -45px
+    right: -45px
 }
 
-
 @media (max-width: 768px) {
-	.timeline-ul li {
-		padding-top: 20px
-	}
-	.timeline-ul li.right {
-		margin-left: 0
-	}
-	.timeline-ul::before {
-		left: 0
-	}
-	.timeline-ul li.time-wrapper .time-span {
-		top: -27px
-	}
-	.timeline-ul li.time-wrapper .time-point {
-		left: -7px
-	}
+    .timeline-ul li {
+        padding-top: 20px
+    }
+
+    .timeline-ul li.right {
+        margin-left: 0
+    }
+
+    .timeline-ul::before {
+        left: 0
+    }
+
+    .timeline-ul li.time-wrapper .time-span {
+        top: -27px
+    }
+
+    .timeline-ul li.time-wrapper .time-point {
+        left: -7px
+    }
 }
 
 @media (max-width: 767px) {
-	.timeline-ul li.right .info-div {
-		padding-left: 20px
-	}
-	.timeline-ul li.right .icon-img {
-		right: -30px
-	}
-	.welcome-page-company .timeline {
-		margin-bottom: 10px
-	}
-	.welcome-page-company .intro h2.title {
-		font-size: 23px;
-		text-align: center
-	}
-	.timeline-ul li.time-wrapper {
-		margin-top: 60px
-	}
+    .timeline-ul li.right .info-div {
+        padding-left: 20px
+    }
+
+    .timeline-ul li.right .icon-img {
+        right: -30px
+    }
+
+    .welcome-page-company .timeline {
+        margin-bottom: 10px
+    }
+
+    .welcome-page-company .intro h2.title {
+        font-size: 23px;
+        text-align: center
+    }
+
+    .timeline-ul li.time-wrapper {
+        margin-top: 60px
+    }
 }
-ul,li{
-	list-style: none;
+
+ul, li {
+    list-style: none;
 }
-.leftTab{
-	border: 1px solid #CCCCCC;
-	padding: 0;
-	border-radius: 10px;
-	overflow: hidden;
-	margin-top: 20px;
-	margin-bottom: 30px;
+
+.leftTab {
+    border: 1px solid #CCCCCC;
+    padding: 0;
+    border-radius: 10px;
+    overflow: hidden;
+    margin-top: 20px;
+    margin-bottom: 30px;
 }
-.leftTab p{
-	height: 50px;
-	line-height: 50px;
-	background: #3d97e3;
-	color: #FFFFFF;
-	font-size: 22px;
-	text-align: center;
-	font-family: 'Pacifico', cursive;
+
+.leftTab p {
+    height: 50px;
+    line-height: 50px;
+    background: var(--second-color);
+    color: #FFFFFF;
+    font-size: 22px;
+    text-align: center;
+    font-family: 'Pacifico', cursive;
     font-weight: 400;
     margin: 0;
 }
-.leftTab li{
-	height: 35px;
-	line-height: 35px;
-	border-bottom: 1px solid #CCCCCC;
-	padding-left: 20px;
-	background: url(../img/rightArrow.png) no-repeat 90% center;
-	cursor: pointer;
+
+.leftTab li {
+    height: 35px;
+    line-height: 35px;
+    border-bottom: 1px solid #CCCCCC;
+    padding-left: 20px;
+    background: url(../img/rightArrow.png) no-repeat 90% center;
+    cursor: pointer;
 }
-.leftTab li.active{
-	color:#3d97e3;
+
+.leftTab li.active {
+    color: #3d97e3;
 }
-.leftTab li:last-of-type{
-	border: none;
+
+.leftTab li:last-of-type {
+    border: none;
 }
-.leftTab li:hover{
-	color:#3d97e3;
+
+.leftTab li:hover {
+    color: #3d97e3;
 }
-.leftTab span{
-	display: block;
-	padding-left: 20px;
-	margin-top: 5px;
+
+.leftTab span {
+    display: block;
+    padding-left: 20px;
+    margin-top: 5px;
 }
-.leftTab span:last-of-type{
-	margin-bottom: 5px;
+
+.leftTab span:last-of-type {
+    margin-bottom: 5px;
 }
-.box1{
-	margin-top: 20px;
-	display: none;
-	margin-bottom: 30px;
-} 
-.box1{
-	border: 1px solid #CCCCCC;
-	border-top: 3px solid #3d97e3;
-	padding: 20px;
-	border-radius: 4px;
+
+.box1 {
+    margin-top: 20px;
+    display: none;
+    margin-bottom: 30px;
 }
-.box1 p{
-	line-height: 25px;
+
+.box1 {
+    border: 1px solid #CCCCCC;
+    border-top: 3px solid #3d97e3;
+    padding: 20px;
+    border-radius: 4px;
 }
-.box1 h4 i{
-	display: block;
-	width: 13px;
-	height: 13px;
-	background:#3d97e3 ;
-	float: left;
-	margin-top: 8px;
-	margin-right: 10px;
-	border-radius:50% ;
+
+.box1 p {
+    line-height: 25px;
 }
-.box1 h4{
-	line-height: 30px;
+
+.box1 h4 i {
+    display: block;
+    width: 13px;
+    height: 13px;
+    background: #3d97e3;
+    float: left;
+    margin-top: 8px;
+    margin-right: 10px;
+    border-radius: 50%;
 }
-.timeline{
-	margin-top: -50px;
-	padding-bottom: 30px;
+
+.box1 h4 {
+    line-height: 30px;
 }
-.box2 p{
-	text-indent: 28px;
+
+.timeline {
+    margin-top: -50px;
+    padding-bottom: 30px;
 }
-.tabOne{
-	border: 1px solid #DDDDDD;
-	border-top:none ;
-	padding: 10px 10px 10px 20px;
+
+.box2 p {
+    text-indent: 28px;
 }
-.tabOne p i{
-	display: block;
-	width: 8px;
-	height: 8px;
-	background:#3d97e3 ;
-	float: left;
-	margin-top: 8px;
-	margin-right: 10px;
-	border-radius:50% ;
+
+.tabOne {
+    border: 1px solid #DDDDDD;
+    border-top: none;
+    padding: 10px 10px 10px 20px;
 }
-.pagination{
-	float: right;
+
+.tabOne p i {
+    display: block;
+    width: 8px;
+    height: 8px;
+    background: #3d97e3;
+    float: left;
+    margin-top: 8px;
+    margin-right: 10px;
+    border-radius: 50%;
 }
-.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
+
+.pagination {
+    float: right;
+}
+
+.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
     z-index: 3;
     color: #fff;
     cursor: default;
-    background-color:#3d97e3;
-    border-color:#3d97e3;
+    background-color: #3d97e3;
+    border-color: #3d97e3;
 }
 
-.pagination>li>a, .pagination>li>span {
+.pagination > li > a, .pagination > li > span {
     position: relative;
     float: left;
     padding: 6px 12px;
     margin-left: -1px;
     line-height: 1.42857143;
-    color:#3d97e3;
+    color: #3d97e3;
     text-decoration: none;
     background-color: #fff;
     border: 1px solid #ddd;
 }
-.box3 ul{
-	padding: 0;
+
+.box3 ul {
+    padding: 0;
 }
-.box3 ul a{
-	color: #333333;
+
+.box3 ul a {
+    color: #333333;
 }
-.box3 ul a:hover{
-	color:#3d97e3;
+
+.box3 ul a:hover {
+    color: #3d97e3;
 }
diff --git a/htdocs/static-sanji-v2/css/top.css b/htdocs/static-sanji-v2/css/top.css
index e1e6cc1a..7c4deabd 100644
--- a/htdocs/static-sanji-v2/css/top.css
+++ b/htdocs/static-sanji-v2/css/top.css
@@ -11,7 +11,7 @@
     z-index: 99999;
     border-radius: 0;
     top: 0px;
-    margin-bottom: 160px;
+    /*margin-bottom: 160px;*/
     /*border-bottom: 1px solid #303848;*/
 }