|
|
@@ -0,0 +1,250 @@
|
|
|
+* {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ list-style: none;
|
|
|
+ text-decoration: none;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+/* 主体 给宽不给高 */
|
|
|
+#box {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+/* 头部 */
|
|
|
+#header {
|
|
|
+ width: 100%;
|
|
|
+ height: 75px;
|
|
|
+}
|
|
|
+#header .container {
|
|
|
+ width: 1260px;
|
|
|
+ height: 100%;
|
|
|
+ /* 已知宽高盒子居中 */
|
|
|
+ margin: 0 auto;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+#header .container .partOne {
|
|
|
+ width: 149px;
|
|
|
+ height: 43px;
|
|
|
+ float: left;
|
|
|
+ margin-top: 14px;
|
|
|
+ background: url(./images/logo.png);
|
|
|
+ background-position: 219px -4px;
|
|
|
+}
|
|
|
+#header .container .partTwo {
|
|
|
+ width: 351px;
|
|
|
+ height: 75px;
|
|
|
+ float: left;
|
|
|
+ margin-left: 65px;
|
|
|
+ line-height: 75px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+#header .container .partTwo ul {
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+#header .container .partTwo ul li {
|
|
|
+ float: left;
|
|
|
+ margin-left: 30px;
|
|
|
+}
|
|
|
+#header .container .partTwo ul li:first-child {
|
|
|
+ margin-left: 0;
|
|
|
+}
|
|
|
+#header .container .partTwo ul li a {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+#header .container .partTwo ul li:first-child a {
|
|
|
+ color: #31ccff;
|
|
|
+}
|
|
|
+#header .container .partTwo ul li a:hover {
|
|
|
+ color: #31ccff;
|
|
|
+}
|
|
|
+/* 定位图标 */
|
|
|
+#header .container .partTwo .btn {
|
|
|
+ width: 37px;
|
|
|
+ height: 14px;
|
|
|
+ background-color: #f5f7f9;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: solid 1px #dddddd;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 13px;
|
|
|
+ position: absolute;
|
|
|
+ top: 12px;
|
|
|
+ right: 7px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
+#header .container .partThree {
|
|
|
+ width: 102px;
|
|
|
+ height: 38px;
|
|
|
+ color: #fff;
|
|
|
+ background: #1ebcf0;
|
|
|
+ float: right;
|
|
|
+ margin-top: 17px;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 38px;
|
|
|
+ border-radius: 4px;
|
|
|
+ /* opacity: 0; */
|
|
|
+ /* 元素消失 彻底将元素从页面中删除 display:none */
|
|
|
+ /* display: none; */
|
|
|
+ /* 显示元素 */
|
|
|
+ /* display: block; */
|
|
|
+}
|
|
|
+#header .container .partThree:hover {
|
|
|
+ background: #31ccff;
|
|
|
+ /* opacity: 1; */
|
|
|
+}
|
|
|
+/* 主体 */
|
|
|
+#main {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+#main .partOne {
|
|
|
+ width: 100%;
|
|
|
+ height: 482px;
|
|
|
+ background: url("./images/banner.jpg");
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+#main .partOne .search {
|
|
|
+ width: 692px;
|
|
|
+ height: 58px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: absolute;
|
|
|
+ top: 218px;
|
|
|
+ left: 616px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: rgba(0, 0, 0, 0.2);
|
|
|
+}
|
|
|
+#main .partOne .search input {
|
|
|
+ width: 583px;
|
|
|
+ height: 50px;
|
|
|
+ outline: none;
|
|
|
+ float: left;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ padding-left: 20px;
|
|
|
+ border-bottom-left-radius: 4px;
|
|
|
+ border-top-left-radius: 4px;
|
|
|
+ margin-left: 6px;
|
|
|
+ margin-top: 4px;
|
|
|
+}
|
|
|
+#main .partOne .search img {
|
|
|
+ width: 98px;
|
|
|
+ height: 50px;
|
|
|
+ float: left;
|
|
|
+ margin-top: 4px;
|
|
|
+}
|
|
|
+#main .partTwo {
|
|
|
+ width: 1300px;
|
|
|
+ height: 300px;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 110px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 40px;
|
|
|
+}
|
|
|
+#main .partTwo dl {
|
|
|
+ width: 290px;
|
|
|
+ height: 200px;
|
|
|
+ float: left;
|
|
|
+ margin-left: 30px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+#main .partTwo dl .partTwo-one {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ color: #fff;
|
|
|
+ line-height: 50px;
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+#main .partTwo dl .partTwo-one:hover {
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+#main .partTwo dl dd {
|
|
|
+ margin: 40px 0 0 0;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+#main .partTwo dl dd p {
|
|
|
+ width: 122px;
|
|
|
+ height: 36px;
|
|
|
+ border: 1px solid #dfdfdf;
|
|
|
+ float: left;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 36px;
|
|
|
+}
|
|
|
+#main .partTwo dl dd p:hover {
|
|
|
+ color: #31ccff;
|
|
|
+}
|
|
|
+#main .partTwo dl dd .news {
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+#main .partTwo dl dd .vase {
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+#main .partThree {
|
|
|
+ width: 100%;
|
|
|
+ height: 608px;
|
|
|
+ background: #eee;
|
|
|
+}
|
|
|
+#main .partThree .list {
|
|
|
+ width: 1260px;
|
|
|
+ height: auto;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-top: 60px;
|
|
|
+}
|
|
|
+#main .partThree .pTone {
|
|
|
+ width: 1260px;
|
|
|
+ height: 420px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+#main .partThree .pTone .report {
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+#main .partThree .pTtwo {
|
|
|
+ width: 936px;
|
|
|
+ height: 420px;
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+#main .partThree .pTtwo img {
|
|
|
+ margin-left: 27px;
|
|
|
+}
|
|
|
+#main .partThree .pTtwo img:nth-child(1) {
|
|
|
+ margin-left: 0;
|
|
|
+}
|
|
|
+#main .partThree .pTtwo img:nth-child(4) {
|
|
|
+ margin-left: 0;
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+#main .partThree .rest {
|
|
|
+ width: 1260px;
|
|
|
+ margin: 40px 0;
|
|
|
+ height: 48px;
|
|
|
+}
|
|
|
+#main .partThree .rest ul {
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+#main .partThree .rest ul li{
|
|
|
+ float: left;
|
|
|
+ width: 140px;
|
|
|
+ height: 48px;
|
|
|
+ border: 1px solid #dfdfdf;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 48px;
|
|
|
+ font-size: 14px;
|
|
|
+ background: #fff;
|
|
|
+ margin-left: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+#main .partThree .rest ul li:first-child {
|
|
|
+ margin-left: 0;
|
|
|
+}
|
|
|
+#main .partThree .rest ul li a {
|
|
|
+ color: #000;
|
|
|
+}
|
|
|
+#main .partThree .rest ul li a:hover {
|
|
|
+ color: #31ccff;
|
|
|
+}
|
e
