|
@@ -0,0 +1,449 @@
|
|
|
+* {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+input::-webkit-outer-spin-button,
|
|
|
+input::-webkit-inner-spin-button {
|
|
|
+ -webkit-appearance: none;
|
|
|
+}
|
|
|
+
|
|
|
+input[type="number"] {
|
|
|
+ -moz-appearance: textfield;
|
|
|
+}
|
|
|
+
|
|
|
+body {
|
|
|
+ /* background: blueviolet url(king.png) no-repeat; */
|
|
|
+ background-color: rgb(80, 32, 125);
|
|
|
+}
|
|
|
+
|
|
|
+.bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 300px;
|
|
|
+ background: url(../img/king.png) no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ background-position: 0 100%;
|
|
|
+ /* border: solid greenyellow; */
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ opacity: .5;
|
|
|
+}
|
|
|
+
|
|
|
+header {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ /* border: solid purple; */
|
|
|
+ background-color: #4a0d7f;
|
|
|
+}
|
|
|
+
|
|
|
+header .content {
|
|
|
+ width: 950px;
|
|
|
+ height: 100%;
|
|
|
+ /* border: solid red; */
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+header img {
|
|
|
+ width: 160px;
|
|
|
+ height: 120px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ cursor: pointer;
|
|
|
+ /* border: solid red; */
|
|
|
+}
|
|
|
+
|
|
|
+/* 文字特效 */
|
|
|
+@keyframes tex {
|
|
|
+ from {
|
|
|
+ background-image: -webkit-linear-gradient(right bottom, plum, gold);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ background-image: -webkit-linear-gradient(right bottom, gold, plum);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+header .content .box {
|
|
|
+ width: 200px;
|
|
|
+ height: 130px;
|
|
|
+ /* border: solid red; */
|
|
|
+ position: absolute;
|
|
|
+ left: 160px;
|
|
|
+ bottom: 0;
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: white;
|
|
|
+ margin-left: 10px;
|
|
|
+ animation-name: tex;
|
|
|
+ animation-duration: 2s;
|
|
|
+ animation-iteration-count: 5;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* ljk */
|
|
|
+.info {
|
|
|
+ width: 100%;
|
|
|
+ height: 0;
|
|
|
+ /* border: solid pink; */
|
|
|
+ position: absolute;
|
|
|
+ top: 205px;
|
|
|
+ z-index: 3;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.info .James {
|
|
|
+ background: white;
|
|
|
+ width: 1000px;
|
|
|
+ height: 0;
|
|
|
+ /* margin-left: 150px; */
|
|
|
+ margin: 0 auto;
|
|
|
+ /* border: solid rgb(111, 8, 179) 1px; */
|
|
|
+ box-shadow: 0 0 10px 0 rgb(143, 6, 216);
|
|
|
+ /* display: none; */
|
|
|
+}
|
|
|
+
|
|
|
+.info .font1,
|
|
|
+.info .font2,
|
|
|
+.info .shuzi {
|
|
|
+ float: right;
|
|
|
+ margin: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.info .shuzi {
|
|
|
+ font-size: 44px;
|
|
|
+ color: sandybrown;
|
|
|
+ padding-right: 30px;
|
|
|
+ border-right: 1px grey solid;
|
|
|
+ position: absolute;
|
|
|
+ left: 560px;
|
|
|
+}
|
|
|
+
|
|
|
+.info h1 {
|
|
|
+ color: white;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.info .datatable {
|
|
|
+ width: 1000px;
|
|
|
+ height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 150px;
|
|
|
+ /* margin-top: 30px; */
|
|
|
+}
|
|
|
+
|
|
|
+.info .datatable td {
|
|
|
+ width: 240px;
|
|
|
+}
|
|
|
+
|
|
|
+.more_list {
|
|
|
+ width: 700px;
|
|
|
+ height: 0;
|
|
|
+ /* border: solid rgb(29, 189, 34); */
|
|
|
+ position: absolute;
|
|
|
+ top: 50px;
|
|
|
+ right: -300px;
|
|
|
+ z-index: 4;
|
|
|
+ font-size: 16px;
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.more_list h1 {
|
|
|
+ color: white;
|
|
|
+ text-align: center;
|
|
|
+ /* margin-top: 50px; */
|
|
|
+}
|
|
|
+
|
|
|
+.more_list .datatable {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ /* margin-left: 150px; */
|
|
|
+ /* margin-top: 30px; */
|
|
|
+}
|
|
|
+
|
|
|
+.more_list .datatable td {
|
|
|
+ width: 240px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 导航栏 */
|
|
|
+#banner {
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ background-color: #7239ae;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+#banner .content {
|
|
|
+ width: 950px;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ /* border: solid blue; */
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+#banner li {
|
|
|
+ list-style-type: none;
|
|
|
+ float: left;
|
|
|
+ width: 100px;
|
|
|
+ height: 100%;
|
|
|
+ /* border: solid pink; */
|
|
|
+ text-align: center;
|
|
|
+ line-height: 70px;
|
|
|
+ font-size: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+#banner li:hover {
|
|
|
+ background-color: #6a19c1 !important;
|
|
|
+ border-radius: 7px;
|
|
|
+ box-shadow: 0 0 10px 0 #6a19c1 !important;
|
|
|
+}
|
|
|
+
|
|
|
+#banner a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+#banner li:hover a,
|
|
|
+#banner .more:hover .iconfont {
|
|
|
+ color: #008c8c !important;
|
|
|
+}
|
|
|
+
|
|
|
+#banner .more {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ /* background-color: red; */
|
|
|
+ position: absolute;
|
|
|
+ right: 50px;
|
|
|
+ top: 15%;
|
|
|
+ /* border-radius: 50%; */
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 40px;
|
|
|
+ /* border: solid gold; */
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* temp */
|
|
|
+#banner .more:hover .more_list {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* 工具箱*/
|
|
|
+.tools {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ /* border: solid skyblue; */
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ right: 100px;
|
|
|
+ top: 300px;
|
|
|
+ z-index: 3;
|
|
|
+}
|
|
|
+
|
|
|
+.iconfont {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ font-size: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.tools:hover {
|
|
|
+ /* background-color: pink; */
|
|
|
+ color: gold;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.tools>.lis {
|
|
|
+ width: 250px;
|
|
|
+ /* height: 300px; */
|
|
|
+ /* border: solid pink; */
|
|
|
+ position: absolute;
|
|
|
+ right: -95px;
|
|
|
+ top: 50px;
|
|
|
+ visibility: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.tools .lineList {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.tools .pieList {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.tools input {
|
|
|
+ width: 150px;
|
|
|
+ height: 35px;
|
|
|
+ /* border: #562581 solid 1.5px; */
|
|
|
+ outline: none;
|
|
|
+ padding-left: 5px;
|
|
|
+ color: purple;
|
|
|
+ font-size: 17px;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+input::-webkit-input-placeholder {
|
|
|
+ font-style: italic;
|
|
|
+ color: rgba(179, 141, 179, 0.53);
|
|
|
+}
|
|
|
+
|
|
|
+.tools button:nth-of-type(1),
|
|
|
+.tools button:nth-of-type(3) {
|
|
|
+ outline: none;
|
|
|
+ position: absolute;
|
|
|
+ top: 23px;
|
|
|
+ width: 76px;
|
|
|
+ height: 74.5px;
|
|
|
+ right: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: 1s;
|
|
|
+ background-color: skyblue;
|
|
|
+ border: none;
|
|
|
+ font-size: 24px;
|
|
|
+ color: purple;
|
|
|
+}
|
|
|
+
|
|
|
+.tools button:nth-of-type(1):hover,
|
|
|
+.tools button:nth-of-type(3):hover {
|
|
|
+ background-color: rgb(251, 107, 155);
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.tools button:nth-of-type(2) {
|
|
|
+ outline: none;
|
|
|
+ width: 50px;
|
|
|
+ height: 36.5px;
|
|
|
+ position: absolute;
|
|
|
+ top: 150px;
|
|
|
+ right: 25px;
|
|
|
+ background-color: skyblue;
|
|
|
+ color: purple;
|
|
|
+ border: none;
|
|
|
+ transition: .5s;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.tools button:nth-of-type(2):hover {
|
|
|
+ border-radius: 7px;
|
|
|
+ background-color: rgb(251, 107, 155);
|
|
|
+}
|
|
|
+
|
|
|
+.tools button:nth-of-type(3) {
|
|
|
+ top: 246px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 主内容 */
|
|
|
+#content {
|
|
|
+ width: 950px;
|
|
|
+ height: 1400px;
|
|
|
+ /* border: red solid; */
|
|
|
+ margin: 10px auto 0;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+/* 尾部 */
|
|
|
+footer {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ background-color: rgb(50, 50, 50);
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+footer img {
|
|
|
+ width: 130px;
|
|
|
+ height: 90px;
|
|
|
+ margin-left: -20%;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+footer span {
|
|
|
+ position: absolute;
|
|
|
+ top: 35px;
|
|
|
+ left: 45%;
|
|
|
+ color: white;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+footer span:nth-child(3) {
|
|
|
+ top: 80px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: normal;
|
|
|
+}
|
|
|
+
|
|
|
+/*统计图*/
|
|
|
+
|
|
|
+#bar {
|
|
|
+ /* display: none; */
|
|
|
+ width: 100%;
|
|
|
+ height: 600px;
|
|
|
+ /* border: solid gold; */
|
|
|
+ visibility: hidden;
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
+
|
|
|
+#pie {
|
|
|
+ width: 100%;
|
|
|
+ height: 600px;
|
|
|
+ /* margin-top: -15px; */
|
|
|
+ /* border: solid purple; */
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ margin: 0 auto;
|
|
|
+ /* display: none; */
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
+
|
|
|
+#line {
|
|
|
+ width: 100%;
|
|
|
+ height: 600px;
|
|
|
+ display: block;
|
|
|
+ /* border: solid purple; */
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ /* visibility: hidden; */
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
+
|
|
|
+#rect {
|
|
|
+ width: 100%;
|
|
|
+ height: 600px;
|
|
|
+ /* border: solid green; */
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: white !important;
|
|
|
+}
|
|
|
+
|
|
|
+.digital {
|
|
|
+ width: 100%;
|
|
|
+ height: 140px;
|
|
|
+ /* border: solid black; */
|
|
|
+ margin-top: 13px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.digital h3 {
|
|
|
+ color: white;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.digital .datatable {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.digital .datatable td {
|
|
|
+ width: 240px;
|
|
|
+}
|