|
|
@@ -0,0 +1,150 @@
|
|
|
+* {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ list-style: none;
|
|
|
+ text-decoration: none;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+#box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+#header {
|
|
|
+ width: 100%;
|
|
|
+ background: #fff !important;
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+.header-top {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+#header .header-top .headerTop-left{
|
|
|
+ flex: 1;
|
|
|
+ height: 65px;
|
|
|
+ background: url("../images/icon_kugou1.png") no-repeat;
|
|
|
+ background-size: 90%;
|
|
|
+ background-position: 10px;
|
|
|
+}
|
|
|
+#header .header-top .headerTop-right{
|
|
|
+ flex: 2;
|
|
|
+ height: 65px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row-reverse;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+#header .header-top .headerTop-right .downLogo {
|
|
|
+ background: #00BAFF;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ width: 72px;
|
|
|
+ height: 25px;
|
|
|
+ line-height: 25px;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 4px 0;
|
|
|
+ margin-right: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+#header .header-top .headerTop-right .member{
|
|
|
+ width: 88px;
|
|
|
+ height: 25px;
|
|
|
+ border-radius: 20px;
|
|
|
+ display: flex;
|
|
|
+ margin-right: 15px;
|
|
|
+ background: linear-gradient(90deg, #F5CE79 20%, #E5BD61 80%);
|
|
|
+}
|
|
|
+#header .header-top .headerTop-right .member img{
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-top: 6px;
|
|
|
+ }
|
|
|
+ #header .header-top .headerTop-right .member span{
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ margin-top: 4px;
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+#main {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+#main .container {
|
|
|
+ width: 94%;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+#main .container .nav {
|
|
|
+ width: 100%;
|
|
|
+ height: 57px;
|
|
|
+ display: flex;
|
|
|
+ background: #fbf8f8 !important;
|
|
|
+ position: sticky;
|
|
|
+ top: 65px;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+#main .container .nav .nav-left {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+#main .container .nav .nav-left ul {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+#main .container .nav .nav-left ul li {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #818894;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+#main .container .nav .nav-right {
|
|
|
+ width: 30px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: row-reverse;
|
|
|
+}
|
|
|
+
|
|
|
+#main .container .nav .nav-right img {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+}
|
|
|
+#main .container .nav .nav-left ul .active {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 21px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000 !important;
|
|
|
+ margin-top: 22px;
|
|
|
+ margin-left: 0;
|
|
|
+}
|
|
|
+#main .container .nav .nav-left ul .active::after {
|
|
|
+ content: ' ';
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #00BAFF;
|
|
|
+ margin-left: 16px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+#main .container .scroll {
|
|
|
+ width: 100%;
|
|
|
+ height: 800px;
|
|
|
+ background: #ff0;
|
|
|
+}
|
|
|
+.scroll .vase {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.scroll .vase dl {
|
|
|
+ flex: 1;
|
|
|
+ background: #f00;
|
|
|
+}
|
|
|
+.scroll .vase dl dt img {
|
|
|
+ width: 103px;
|
|
|
+ height: 103px;
|
|
|
+}
|
e
