Selaa lähdekoodia

上传文件至 'WebContent/css'

龙泳贤 5 vuotta sitten
vanhempi
commit
3ecc6cd11a
1 muutettua tiedostoa jossa 449 lisäystä ja 0 poistoa
  1. 449 0
      WebContent/css/BA_index.css

+ 449 - 0
WebContent/css/BA_index.css

@@ -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;
+}