diff --git a/css/base.css b/css/base.css index 2d98cee..919e1e2 100644 --- a/css/base.css +++ b/css/base.css @@ -24,8 +24,8 @@ i { } /* 去掉li 的小圆点 */ -ul, -ol, +ul, +ol, li { list-style: none; } @@ -96,16 +96,16 @@ textarea { .logo h1 a { display: flex; align-items: center; -} - -.w100{ width: 100%; margin: auto;} +} + +.w100{ width: 100%; margin: auto;} .w1300{ width: 1320px; margin: auto;} .clips1{ - display: inline-block; - white-space: nowrap; - width: 100%; - overflow: hidden; + display: inline-block; + white-space: nowrap; + width: 100%; + overflow: hidden; text-overflow:ellipsis; } .clips2{display: -webkit-box;-webkit-line-clamp: 2;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;} @@ -114,354 +114,354 @@ textarea { .clips5{display: -webkit-box;-webkit-line-clamp: 5;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;} .clips6{display: -webkit-box;-webkit-line-clamp: 6;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;} .clips7{display: -webkit-box;-webkit-line-clamp: 7;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;} - - -/* 头部 */ -body.active{ - margin-right: 270px; -} -.header{ - height: 90px; - background-color: rgba(255,255,255,0.75); - position: fixed; - top: 0; - left: 0; - z-index: 99; -} -.index-header{ - background: none; -} -.head{ - width: 90%; - display: flex; - justify-content: space-between; - align-items: center; -} -.head .logo{ - width: 30%; -} -.head .logo img{ - height: 55px; -} -.head .nav{ - display: flex; - justify-content: flex-end; -} -.head .nav .nav-logo, -.head .nav-bg{ - display: none; -} -.head .nav li{ - margin-left: 55px; - height: 90px; - position: relative; -} -.head .nav li>a{ - display: block; - padding: 0 2px; - font-size: 18px; - line-height: 2; - margin-top: 27px; - color: #262626; - transition: all .8s; -} -.head .nav li.active>a{ - font-weight: bold; - color: #72C152; - border-bottom: 3px solid #72C152; -} -.head .nav li:hover>a{ - transform: rotateY(360deg); - transition: all .8s; -} -.head .nav li.active:hover>a{ - transform: none; -} - -.head .nav li .sub-nav{ - height: 0; - width: 173px; - border-radius: 3px; - background-color: rgba(255,255,255,0.75); - position: absolute; - left: -25px; - top: 86px; - z-index: 9; - transition: all .4s; - overflow: hidden; -} -.head .nav li .sub-nav>a{ - display: block; - padding: 0 22px; - line-height: 44px; - font-size: 15px; - color: #585858; -} -.head .nav li .sub-nav>a.active{ - background-color: #ebf2e9; - color: #72C152; -} -.head .nav li:hover .sub-nav{ - height: auto; - padding: 7px 9px; - box-shadow: 0 0 8px 3px rgba(224,224,224,0.32); - transition: all .4s; -} - -.head .head-btn{ display: none; width: 24px; float: right; position: relative; cursor: pointer; margin-top: 5px;} -.head .head-btn i{ display: block; width: 100%; height: 2px; float: left; background-color: #262626; border-radius: 50px; - transition: all .5s ease 0s; - -webkit-transition: all .5s ease 0s; - -moz-transition: all .5s ease 0s; -} -.head .head-btn i.bar-top{ margin-top: 0;} -.head .head-btn i.bar-cen{ margin-top: 5px;} -.head .head-btn i.bar-bom{ margin-top: 5px;} -.head .head-btn.cur i{background-color: #FFFFFF;} -.head .head-btn.cur i.bar-cen{ opacity: 0;} -.head .head-btn.cur i.bar-top{ -webkit-transform:rotate(45deg) translate(6px, 6px);transform:rotate(45deg) translate(6px, 6px);} -.head .head-btn.cur i.bar-bom{ -webkit-transform: rotate(-45deg) translate(5.5px, -5px);transform: rotate(-45deg) translate(5.5px, -5px);} - -/* 尾部 */ -/* 留言板 */ -.index-seek{ - padding-top: 114px; - background-image: url(../imgs/seek-bg.jpg); - background-repeat: no-repeat; - background-position: top; - background-size: cover; -} - -.seek{ - display: flex; - background: linear-gradient(rgba(123,188,43,0.8),rgba(33,165,60,0.8)); -} -.seek .left{ - width: 38.1%; - padding: 30px 4%; - border-right: 1px solid rgba(255,255,255,0.1); - color: #FFFFFF; - text-align: center; -} -.seek .left img{ - width: 130px; - margin: 0 auto; -} -.seek .left strong{ - display: block; - font-family: "douyu-font"; - font-size: 42px; - line-height: 1.5; - margin-top: 10px; - font-weight: normal; -} -.seek .left p{ - font-size: 26px; - line-height: 1.2; -} -.seek .left span{ - display: block; - font-size: 15px; - line-height: 1.8; - margin-top: 12px; -} - -.seek .right{ - width: 61.9%; - padding: 44px 50px; -} -.seek .right .form-top{ - display: flex; - justify-content: space-between; - flex-wrap: wrap; -} -.seek .right .form-top input{ - width: 49%; - line-height: 44px; - padding: 0 10px; - margin-bottom: 15px; - background: none; - border: 1px solid rgba(255,255,255,0.5); - font-size: 14px; - color: rgba(255,255,255,0.7); -} -.seek .right .form-top input::-webkit-input-placeholder, -.seek .right .form-top textarea::-webkit-input-placeholder -{ - color: rgba(255,255,255,0.7); -} -.seek .right .form-top input::-ms-input-placeholder, -.seek .right .form-top textarea::-ms-input-placeholder{ - color: rgba(255,255,255,0.7); -} -.seek .right .form-top input::-moz-input-placeholder, -.seek .right .form-top textarea::-ms-input-placeholder{ - color: rgba(255,255,255,0.7); -} -.seek .right .form-top input::-o-input-placeholder, -.seek .right .form-top textarea::-ms-input-placeholder{ - color: rgba(255,255,255,0.7); -} -.seek .right .form-top input::input-placeholder, -.seek .right .form-top textarea::-ms-input-placeholder{ - color: rgba(255,255,255,0.7); -} -.seek .right .form-top textarea{ - width: 100%; - height: 82px; - padding: 0 10px; - line-height: 44px; - background: none; - border: 1px solid rgba(255,255,255,0.5); - font-size: 14px; - color: rgba(255,255,255,0.7); -} -.seek .right button{ - display: block; - width: 140px; - height: 48px; - background-color: rgba(255,255,255,0.7); - border: 0; - font-size: 17px; - color: #212121; - margin: 30px auto 0; -} - -/* 联系方式 */ -.index-contact{ - padding: 28px 0; - background-color: #3a3e39; -} -.contact{ - display: flex; - justify-content: space-between; - align-items: center; -} - -.contact .left, -.contact .middle{ - width: 32%; - display: flex; - justify-content: flex-start; -} -.contact .left>img, -.contact .middle>img{ - height: 58px; - margin-right: 17px; -} -.contact .left p, -.contact .middle p{ - font-size: 14px; - line-height: 29px; - color: #FFFFFF; -} - -.contact .middle{ - width: 46%; -} - - -.contact .right{ - width: 22%; - display: flex; - justify-content: space-between; -} -.contact .right>.section{ - display: flex; - justify-content: flex-start; -} -.contact .right>.section p{ - width: 16px; - margin-right: 14px; - font-size: 14px; - line-height: 25.5px; - color: rgba(255,255,255,0.8); -} -.contact .right>.section>img{ - height: 102px; -} - -/* 友情链接 */ -.links{ - padding: 20px 0; -} -.links-item li{ - display: inline-block; - font-size: 15px; - line-height: 2; - color: #262626; - margin-right: 24px; - cursor: pointer; - transition: all .8s; -} -.links-item li.active{ - color: #72C152; - transition: all .8s; -} -.links-list{ - margin-top: 10px; -} -.links-list li{ - display: none; -} -.links-list li>a{ - font-size: 14px; - line-height: 2.2; - color: #585858; - margin-right: 20px; -} -.links-list li.active{ - display: block; -} - -/* 版权备案 */ -.footer .foot{ - border-top: 1px solid #eeefef; -} -.footer .foot p{ - font-size: 14px; - line-height: 54px; - color: #585858; -} -.footer .foot p>a{ - color: #585858; - margin: 0 9px; -} - -/* 侧边咨询 */ -.index-sider{ - width: 106px; - height: auto; - position: fixed; - right: 0; - bottom: 80px; - text-align: center; - z-index: 999; -} -.index-sider .top{ - height: 95px; - background-color: #72C152; - padding-top: 16px; - font-size: 15px; - line-height: 1.4; - color: #FFFFFF; - letter-spacing: 0.5px; -} -.index-sider .bottom{ - border: 1px solid #c7e1bc; - background-color: rgba(255,255,255,1); -} -.index-sider .bottom p{ - font-size: 13px; - color: #72C152; - line-height: 1.2; -} -.index-sider .bottom img{ - max-width: 90px; - margin: 10px auto; -} -.index-sider .bottom strong{ - font-size: 12px; - line-height: 1.2; - color: #72C152; + + +/* 头部 */ +body.active{ + margin-right: 270px; +} +.header{ + height: 90px; + background-color: rgba(255,255,255,0.75); + position: fixed; + top: 0; + left: 0; + z-index: 99; +} +.index-header{ + background: none; +} +.head{ + width: 90%; + display: flex; + justify-content: space-between; + align-items: center; +} +.head .logo{ + width: 30%; +} +.head .logo img{ + height: 55px; +} +.head .nav{ + display: flex; + justify-content: flex-end; +} +.head .nav .nav-logo, +.head .nav-bg{ + display: none; +} +.head .nav li{ + margin-left: 55px; + height: 90px; + position: relative; +} +.head .nav li>a{ + display: block; + padding: 0 2px; + font-size: 18px; + line-height: 2; + margin-top: 27px; + color: #262626; + transition: all .8s; +} +.head .nav li.active>a{ + font-weight: bold; + color: #72C152; + border-bottom: 3px solid #72C152; +} +.head .nav li:hover>a{ + transform: rotateY(360deg); + transition: all .8s; +} +.head .nav li.active:hover>a{ + transform: none; +} + +.head .nav li .sub-nav{ + height: 0; + width: 173px; + border-radius: 3px; + background-color: rgba(255,255,255,0.75); + position: absolute; + left: -25px; + top: 86px; + z-index: 9; + transition: all .4s; + overflow: hidden; +} +.head .nav li .sub-nav>a{ + display: block; + padding: 0 22px; + line-height: 44px; + font-size: 15px; + color: #585858; +} +.head .nav li .sub-nav>a.active{ + background-color: #ebf2e9; + color: #72C152; +} +.head .nav li:hover .sub-nav{ + height: auto; + padding: 7px 9px; + box-shadow: 0 0 8px 3px rgba(224,224,224,0.32); + transition: all .4s; +} + +.head .head-btn{ display: none; width: 24px; float: right; position: relative; cursor: pointer; margin-top: 5px;} +.head .head-btn i{ display: block; width: 100%; height: 2px; float: left; background-color: #262626; border-radius: 50px; + transition: all .5s ease 0s; + -webkit-transition: all .5s ease 0s; + -moz-transition: all .5s ease 0s; +} +.head .head-btn i.bar-top{ margin-top: 0;} +.head .head-btn i.bar-cen{ margin-top: 5px;} +.head .head-btn i.bar-bom{ margin-top: 5px;} +.head .head-btn.cur i{background-color: #FFFFFF;} +.head .head-btn.cur i.bar-cen{ opacity: 0;} +.head .head-btn.cur i.bar-top{ -webkit-transform:rotate(45deg) translate(6px, 6px);transform:rotate(45deg) translate(6px, 6px);} +.head .head-btn.cur i.bar-bom{ -webkit-transform: rotate(-45deg) translate(5.5px, -5px);transform: rotate(-45deg) translate(5.5px, -5px);} + +/* 尾部 */ +/* 留言板 */ +.index-seek{ + padding-top: 114px; + background-image: url(../imgs/seek-bg.jpg); + background-repeat: no-repeat; + background-position: top; + background-size: cover; +} + +.seek{ + display: flex; + background: linear-gradient(rgba(123,188,43,0.8),rgba(33,165,60,0.8)); +} +.seek .left{ + width: 38.1%; + padding: 30px 4%; + border-right: 1px solid rgba(255,255,255,0.1); + color: #FFFFFF; + text-align: center; +} +.seek .left img{ + width: 130px; + margin: 0 auto; +} +.seek .left strong{ + display: block; + font-family: "douyu-font"; + font-size: 42px; + line-height: 1.5; + margin-top: 10px; + font-weight: normal; +} +.seek .left p{ + font-size: 26px; + line-height: 1.2; +} +.seek .left span{ + display: block; + font-size: 15px; + line-height: 1.8; + margin-top: 12px; +} + +.seek .right{ + width: 61.9%; + padding: 44px 50px; +} +.seek .right .form-top{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} +.seek .right .form-top input{ + width: 49%; + line-height: 44px; + padding: 0 10px; + margin-bottom: 15px; + background: none; + border: 1px solid rgba(255,255,255,0.5); + font-size: 14px; + color: rgba(255,255,255,0.7); +} +.seek .right .form-top input::-webkit-input-placeholder, +.seek .right .form-top textarea::-webkit-input-placeholder +{ + color: rgba(255,255,255,0.7); +} +.seek .right .form-top input::-ms-input-placeholder, +.seek .right .form-top textarea::-ms-input-placeholder{ + color: rgba(255,255,255,0.7); +} +.seek .right .form-top input::-moz-input-placeholder, +.seek .right .form-top textarea::-ms-input-placeholder{ + color: rgba(255,255,255,0.7); +} +.seek .right .form-top input::-o-input-placeholder, +.seek .right .form-top textarea::-ms-input-placeholder{ + color: rgba(255,255,255,0.7); +} +.seek .right .form-top input::input-placeholder, +.seek .right .form-top textarea::-ms-input-placeholder{ + color: rgba(255,255,255,0.7); +} +.seek .right .form-top textarea{ + width: 100%; + height: 82px; + padding: 10px; + line-height: 24px; + background: none; + border: 1px solid rgba(255,255,255,0.5); + font-size: 14px; + color: rgba(255,255,255,0.7); +} +.seek .right button{ + display: block; + width: 140px; + height: 48px; + background-color: rgba(255,255,255,0.7); + border: 0; + font-size: 17px; + color: #212121; + margin: 30px auto 0; +} + +/* 联系方式 */ +.index-contact{ + padding: 28px 0; + background-color: #3a3e39; +} +.contact{ + display: flex; + justify-content: space-between; + align-items: center; +} + +.contact .left, +.contact .middle{ + width: 32%; + display: flex; + justify-content: flex-start; +} +.contact .left>img, +.contact .middle>img{ + height: 58px; + margin-right: 17px; +} +.contact .left p, +.contact .middle p{ + font-size: 14px; + line-height: 29px; + color: #FFFFFF; +} + +.contact .middle{ + width: 46%; +} + + +.contact .right{ + width: 22%; + display: flex; + justify-content: space-between; +} +.contact .right>.section{ + display: flex; + justify-content: flex-start; +} +.contact .right>.section p{ + width: 16px; + margin-right: 14px; + font-size: 14px; + line-height: 25.5px; + color: rgba(255,255,255,0.8); +} +.contact .right>.section>img{ + height: 102px; +} + +/* 友情链接 */ +.links{ + padding: 20px 0; +} +.links-item li{ + display: inline-block; + font-size: 15px; + line-height: 2; + color: #262626; + margin-right: 24px; + cursor: pointer; + transition: all .8s; +} +.links-item li.active{ + color: #72C152; + transition: all .8s; +} +.links-list{ + margin-top: 10px; +} +.links-list li{ + display: none; +} +.links-list li>a{ + font-size: 14px; + line-height: 2.2; + color: #585858; + margin-right: 20px; +} +.links-list li.active{ + display: block; +} + +/* 版权备案 */ +.footer .foot{ + border-top: 1px solid #eeefef; +} +.footer .foot p{ + font-size: 14px; + line-height: 54px; + color: #585858; +} +.footer .foot p>a{ + color: #585858; + margin: 0 9px; +} + +/* 侧边咨询 */ +.index-sider{ + width: 106px; + height: auto; + position: fixed; + right: 0; + bottom: 80px; + text-align: center; + z-index: 999; +} +.index-sider .top{ + height: 95px; + background-color: #72C152; + padding-top: 16px; + font-size: 15px; + line-height: 1.4; + color: #FFFFFF; + letter-spacing: 0.5px; +} +.index-sider .bottom{ + border: 1px solid #c7e1bc; + background-color: rgba(255,255,255,1); +} +.index-sider .bottom p{ + font-size: 13px; + color: #72C152; + line-height: 1.2; +} +.index-sider .bottom img{ + max-width: 90px; + margin: 10px auto; +} +.index-sider .bottom strong{ + font-size: 12px; + line-height: 1.2; + color: #72C152; } \ No newline at end of file diff --git a/css/style.css b/css/style.css index 51abd11..91408e6 100644 --- a/css/style.css +++ b/css/style.css @@ -723,8 +723,39 @@ .serve-survey .more{ height: 42px; margin-top: 22px; - overflow: hidden; + /* overflow: hidden; */ } + +/* 新增 */ +.serve-survey .more{ + position: relative; +} +.serve-survey .openEwm{ + background: #FFFFFF; + width: 334px; + position: absolute; + left: 0; + bottom: 60px; + z-index: -1; + overflow: hidden; + transition: all .6s; + opacity: 0; +} +.serve-survey .openEwm img{ + display: block; + width: 100%; + margin: 10px auto 0; +} + +.serve-survey .openEwm.cur{ + z-index: 10; + box-shadow: 0 0 8px 3px rgba(0,0,0,0.1); + opacity: 1; + transition: all .6s; +} +/* 新增 */ + + .serve-survey .more>a{ display: block; width: 162px; @@ -740,6 +771,7 @@ margin-right: 10px; } + .serve-nav-bg{ background-color: #72C152; } @@ -1599,6 +1631,8 @@ color: rgba(0,0,0,0.5); } + + @media screen and (max-width:1600px){ .banner-title .left>strong{ font-size: 34px; @@ -2870,6 +2904,19 @@ width: 100%; font-size: 13px; } + /* 新增 */ + .serve-survey .openEwm{ + background: #FFFFFF; + width: calc(80% + 10px); + position: absolute; + left: 50%; + bottom: 60px; + z-index: -1; + overflow: hidden; + transition: all .6s; + transform: translateX(-50%); + opacity: 0; + } } @media screen and (max-width:350px){ .banner-title .left>strong{