diff --git a/css/base.css b/css/base.css index 21cfe07..3f17c61 100644 --- a/css/base.css +++ b/css/base.css @@ -24,8 +24,8 @@ i { } /* 去掉li 的小圆点 */ -ul, -ol, +ul, +ol, li { list-style: none; } @@ -96,15 +96,15 @@ textarea { .logo h1 a { display: flex; align-items: center; -} - -.w100{ width: 100%; margin: auto;} +} + +.w100{ width: 100%; margin: auto;} .w1160{ width: 1160px; margin: auto;} -.clips1{ - display: block; - overflow: hidden; - white-space: nowrap; +.clips1{ + display: block; + overflow: hidden; + white-space: nowrap; text-overflow:ellipsis; } .clips2{display: -webkit-box;-webkit-line-clamp: 2;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;} @@ -113,424 +113,432 @@ 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;} - - -/* 头部 */ -.header{ - height: 62px; - background-color: #FFFFFF; - position: fixed; - top: 0; - left: 0; - z-index: 99; -} -.head{ - width: 75%; - margin: 0 auto; - display: flex; - justify-content: space-between; - align-items: center; -} -.head .logo{ - width: 190px; -} -.head .logo img{ - height: 37px; -} -.head .nav{ - width: calc(100% - 350px); - display: flex; - justify-content: flex-start; -} -.head .nav li{ - margin-left: 48px; - font-size: 15px; - height: 62px; - position: relative; -} -.head .nav li>a{ - display: block; - font-size: 16px; - line-height: 2; - line-height: 62px; - color: #101010; - transition: all .6s; -} -.head .nav li.active>a, -.head .nav li:hover>a{ - color: #1a73e9; - transition: all .6s; - z-index: 99; -} - -.head .nav li .sub-nav{ - height: 0; - background-color: #FFFFFF; - position: absolute; - left: -112px; - top: 62px; - z-index: 9; - transition: all .4s; - overflow: hidden; -} -.head .nav li:hover .sub-nav{ - display: flex; - height: auto; - padding: 25px 20px; - border-top: 2px solid #1a73e9; - transition: all .4s; -} - -.sub-nav .sub-nav-list{ - width: 300px; - border-left: 1px solid #d9d9d9; - padding: 0 15px; -} -.sub-nav .sub-nav-list .sub-nav-tiile{ - font-size: 16px; - font-weight: bold; - line-height: 2; -} -.sub-nav .sub-nav-list dl>dt{ - margin: 14px 0; -} -.sub-nav .sub-nav-list dl>dt a{ - display: flex; - align-items: center; -} -.sub-nav-img{ - display: flex; - justify-content: center; - width: 50px; -} -.sub-nav-img img{ - max-width: 90%; - max-height: 40px; -} - -.sub-nav-txt{ - -} - -.sub-nav-txt p{ - font-size: 14px; - line-height: 1.4; -} -.sub-nav-txt span{ - font-size: 12px; - line-height: 1.1; - opacity: .6; -} - -.head .phone{ - width: 160px; - display: flex; - justify-content: flex-end; - align-items: center; -} - -.head .phone img{ - height: 25px; - margin-right: 8px; -} -.head .phone strong{ - font-size: 16px; - -} - -.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);} - -/* 底部部分 */ -footer{ - width: 100%; - padding: 50px 0 20px; - background-image: url(../imgs/footer-bg.jpg); - background-repeat: no-repeat; - background-position: center; - background-size: cover; -} -/* 尾部导航 */ -.foot-nav{ - display: flex; - justify-content: space-between; - padding-bottom: 30px; -} -.foot-nav li{ - width: 13%; -} -.foot-nav li:first-child{ - width: 15%; -} -.foot-nav li dl>dd{ - font-size: 16px; - color: #FFFFFF; - font-weight: bold; - line-height: 1.2; - margin-bottom: 10px; -} -.foot-nav li dl>dt{ - font-size: 14px; - color: #FFFFFF; - line-height: 2.2; -} -.foot-nav li dl>dt a{ - color: #FFFFFF; - font-size: 14px; - color: #FFFFFF; - line-height: 2.2; -} -.foot-nav li dl>dt strong{ - color: #1a73e8; - font-size: 18px; -} -.foot-ewm{ - display: flex; - margin-top: 8px; -} -.foot-ewm>div{ - width: 114px; - margin-right: 12px; - text-align: center; -} -.foot-ewm>div span{ - display: block; - height: 114px; - padding: 10px; - background: #FFFFFF; -} -.foot-ewm>div img{ - width: 94px; - height: 94px; -} - -.foot-ewm p{ - font-size: 14px; - line-height: 1.5; - color: #FFFFFF; - opacity: .4; - margin-top: 6px; -} - - -/* 联系方式 */ -.foot-nav li:last-child{ - width: 24%; -} - -/* 友情链接 */ -.links{ - padding-top: 20px; - border-top: 1px solid #29323f; -} -.links>span{ - display: block; - font-size: 16px; - line-height: 2; - color: #FFFFFF; - margin-bottom: 5px; -} -.links>p a{ - display: inline-block; - font-size: 14px; - line-height: 1; - padding: 0 8px; - border-left: 2px solid #FFFFFF; - color: #FFFFFF; - opacity: .4; - -} -.links>p a:first-child{ - border: 0; - padding-left: 0; -} - -/* 版权备案 */ -.foot{ - font-size: 14px; - line-height: 1.5; - color: #FFFFFF; - opacity: .2; - margin-top: 20px; -} -.foot a{ - display: inline-block; - color: #FFFFFF; - margin: 0 10px; -} - -/* 侧边咨询 */ -.side-nav{ - position: fixed; - top: 50%; - right: 14px; - transform: translateY(-50%); - z-index: 999; -} -.side-nav-item li{ - width: 74px; - height: 74px; - box-shadow: 0 0 21px 5px rgba(198,198,198,0.1); - padding-top: 13px; - background-color: #FFFFFF; - margin-top: 4px; - text-align: center; - position: relative; -} -.side-nav-item li img{ - display: block; - height: 24px; - margin: 0 auto; -} -.side-nav-item li p{ - font-size: 14px; - line-height: 1.5; - margin-top: 6px; -} - - -.side-window{ - display: none; - width: 146px; - padding-bottom: 10px; - background-color: #FFFFFF; - border-radius: 2px; - position: absolute; - top: 0; - right: 84px; - transition: all .6s; -} - -.window-title{ - font-size: 16px; - line-height: 40px; - border-bottom: 1px solid #ededed; - padding: 0 15px; - text-align: left; -} - -.side-window span{ - display: block; - width: 110px; - height: 110px; - margin: 14px auto 10px; -} -.side-window span img{ - width: 100%; - height: 100%; -} -.side-window p{ - display: flex; - justify-content: flex-start; - align-items: center; - font-size: 15px; - line-height: 26px; - padding: 8px 15px; -} -.side-window p>img{ - height: 26px; - margin: 0 9px 0 0; -} -.side-window p>.email{ - height: 17px; -} -.side-window .tel{ - font-size: 16px; - font-weight: bold; - line-height: 26px; - padding: 16px 0 8px; -} - -.side-nav-item li:hover .side-window{ - display: block; - transition: all .6s; -} -.side-nav-item li:hover{ - background-color: #1A73E8; - transition: all .6s; -} -.side-nav-item li:hover>a p{ - color: #FFFFFF; - transition: all .6s; -} -.side-nav-item li:hover>a img{ - -webkit-filter: grayscale(100%) brightness(1000%); - -moz-filter: grayscale(100%) brightness(1000%); - -ms-filter: grayscale(100%) brightness(1000%); - -o-filter: grayscale(100%) brightness(1000%); - filter: grayscale(100%) brightness(1000%); - transition: all .6s; -} - - -/* 公共列表样式 */ -.pull-img{ - width: 96px; - height: 96px; - padding: 11px; - background-color: #e8f1f9; - border-radius: 100%; - margin: 0 12px 12px 0; -} -.pull-img>span{ - display: flex; - align-items: center; - width: 74px; - height: 74px; - background-color: #FFFFFF; - border-radius: 100%; - overflow: hidden; -} -.pull-img>span img{ - margin: 0 auto; -} -.pull-txt h3{ - font-size: 20px; - line-height: 2; - transition: all .6s; -} -.pull-txt ins{ - display: block; - width: 34px; - height: 2px; - background-color: #1a73e8; - margin: 5px 0 13px; - transition: all .6s; -} -.pull-txt p{ - font-size: 14px; - color: #636363; - line-height: 1.8; -} -/* 公共hover效果 */ -li:hover .pull-img>span{ - background-color: #1A73E9; - transition: all .6s; -} -li:hover .pull-img img{ - -webkit-filter: grayscale(100%) brightness(1000%); - -moz-filter: grayscale(100%) brightness(1000%); - -ms-filter: grayscale(100%) brightness(1000%); - -o-filter: grayscale(100%) brightness(1000%); - filter: grayscale(100%) brightness(1000%); - transition: all .6s; -} -li:hover .pull-txt h3{ - color: #1A73E9; - transition: all .6s; -} -li:hover .pull-txt ins{ - background-color: #f6ab00; - transition: all .6s; + + +/* 头部 */ +.header{ + height: 62px; + background-color: #FFFFFF; + position: fixed; + top: 0; + left: 0; + z-index: 99; +} +.head{ + width: 75%; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} +.head .logo{ + width: 190px; +} +.head .logo img{ + height: 37px; +} +.head .nav{ + width: calc(100% - 350px); + display: flex; + justify-content: flex-start; +} +.head .nav li{ + margin-left: 48px; + font-size: 15px; + height: 62px; + position: relative; +} +.head .nav li>a{ + display: block; + font-size: 16px; + line-height: 2; + line-height: 62px; + color: #101010; + transition: all .6s; +} +.head .nav li.active>a, +.head .nav li:hover>a{ + color: #1a73e9; + transition: all .6s; + z-index: 99; +} + +.head .nav li .sub-nav{ + height: 0; + background-color: #FFFFFF; + position: absolute; + left: -112px; + top: 62px; + z-index: 9; + transition: all .4s; + overflow: hidden; +} +.head .nav li:hover .sub-nav{ + display: flex; + height: auto; + padding: 25px 20px; + border-top: 2px solid #1a73e9; + transition: all .4s; +} + +.sub-nav .sub-nav-list{ + width: 300px; + border-left: 1px solid #d9d9d9; + padding: 0 15px; +} +.sub-nav .sub-nav-list .sub-nav-tiile{ + font-size: 16px; + font-weight: bold; + line-height: 2; +} +.sub-nav .sub-nav-list dl>dt{ + margin: 14px 0; +} +.sub-nav .sub-nav-list dl>dt a{ + display: flex; + align-items: center; +} +.sub-nav-img{ + display: flex; + justify-content: center; + width: 50px; +} +.sub-nav-img img{ + max-width: 90%; + max-height: 40px; +} + +.sub-nav-txt{ + +} + +.sub-nav-txt p{ + font-size: 14px; + line-height: 1.4; +} +.sub-nav-txt span{ + font-size: 12px; + line-height: 1.1; + opacity: .6; +} + +.head .phone{ + width: 160px; + display: flex; + justify-content: flex-end; + align-items: center; +} + +.head .phone img{ + height: 25px; + margin-right: 8px; +} +.head .phone strong{ + font-size: 16px; + +} + +.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);} + +/* 底部部分 */ +footer{ + width: 100%; + padding: 50px 0 20px; + background-image: url(../imgs/footer-bg.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} +/* 尾部导航 */ +.foot-nav{ + display: flex; + justify-content: space-between; + padding-bottom: 30px; +} +.foot-nav li{ + width: 13%; +} +.foot-nav li:first-child{ + width: 15%; +} +.foot-nav li dl>dd{ + font-size: 16px; + color: #FFFFFF; + font-weight: bold; + line-height: 1.2; + margin-bottom: 10px; +} +.foot-nav li dl>dt{ + font-size: 14px; + color: #FFFFFF; + line-height: 2.2; +} +.foot-nav li dl>dt a{ + color: #FFFFFF; + font-size: 14px; + color: #FFFFFF; + line-height: 2.2; +} +.foot-nav li dl>dt strong{ + color: #1a73e8; + font-size: 18px; +} +.foot-ewm{ + display: flex; + margin-top: 8px; +} +.foot-ewm>div{ + width: 114px; + margin-right: 12px; + text-align: center; +} +.foot-ewm>div span{ + display: block; + height: 114px; + padding: 10px; + background: #FFFFFF; +} +.foot-ewm>div img{ + width: 94px; + height: 94px; +} + +.foot-ewm p{ + font-size: 14px; + line-height: 1.5; + color: #FFFFFF; + opacity: .4; + margin-top: 6px; +} + + +/* 联系方式 */ +.foot-nav li:last-child{ + width: 24%; +} + +/* 友情链接 */ +.links{ + padding-top: 20px; + border-top: 1px solid #29323f; +} +.links>span{ + display: block; + font-size: 16px; + line-height: 2; + color: #FFFFFF; + margin-bottom: 5px; +} +.links>p a{ + display: inline-block; + font-size: 14px; + line-height: 1; + padding: 0 8px; + border-left: 2px solid #FFFFFF; + color: #FFFFFF; + opacity: .4; + +} +.links>p a:first-child{ + border: 0; + padding-left: 0; +} + +/* 版权备案 */ +.foot{ + font-size: 14px; + line-height: 1.5; + color: #FFFFFF; + opacity: .2; + margin-top: 20px; +} +.foot a{ + display: inline-block; + color: #FFFFFF; + margin: 0 10px; +} + +/* 侧边咨询 */ +.side-nav{ + position: fixed; + top: 50%; + right: 14px; + transform: translateY(-50%); + z-index: 999; +} +.side-nav-item li{ + width: 74px; + height: 74px; + box-shadow: 0 0 21px 5px rgba(198,198,198,0.1); + padding-top: 13px; + background-color: #FFFFFF; + margin-top: 4px; + text-align: center; + position: relative; +} +.side-nav-item li img{ + display: block; + height: 24px; + margin: 0 auto; +} +.side-nav-item li p{ + font-size: 14px; + line-height: 1.5; + padding-top: 6px; +} + + +.side-window{ + display: none; + width: 156px; + padding-bottom: 10px; + position: absolute; + top: 0; + right: 74px; + transition: all .6s; + border-right: 10px solid transparent; +} + +.window-title{ + font-size: 16px; + line-height: 40px; + border-bottom: 1px solid #ededed; + padding: 0 15px; + background-color: #FFFFFF; + border-radius: 2px 2px 0 0; + text-align: left; +} + +.side-window span{ + display: block; + width: 100%; + height: 100%; + padding: 14px 23px; + background-color: #FFFFFF; +} +.side-window span img{ + width: 100%; + height: 100%; +} +.side-window p{ + display: flex; + justify-content: flex-start; + align-items: center; + font-size: 15px; + line-height: 26px; + padding: 8px 15px; + background-color: #FFFFFF; +} +.side-window p>img{ + height: 26px; + margin: 0 9px 0 0; +} +.side-nav-item li p:nth-of-type(2){ + border-radius: 0 0 2px 2px; +} +.side-window p>.email{ + height: 17px; +} +.side-window .tel{ + font-size: 16px; + font-weight: bold; + line-height: 26px; + padding: 12px 0; + background-color: #FFFFFF; + border-radius: 0 0 2px 2px; +} + +.side-nav-item li:hover .side-window{ + display: block; + transition: all .6s; +} +.side-nav-item li:hover{ + background-color: #1A73E8; + transition: all .6s; +} +.side-nav-item li:hover>a p{ + color: #FFFFFF; + transition: all .6s; +} +.side-nav-item li:hover>a img{ + -webkit-filter: grayscale(100%) brightness(1000%); + -moz-filter: grayscale(100%) brightness(1000%); + -ms-filter: grayscale(100%) brightness(1000%); + -o-filter: grayscale(100%) brightness(1000%); + filter: grayscale(100%) brightness(1000%); + transition: all .6s; +} + + +/* 公共列表样式 */ +.pull-img{ + width: 96px; + height: 96px; + padding: 11px; + background-color: #e8f1f9; + border-radius: 100%; + margin: 0 12px 12px 0; +} +.pull-img>span{ + display: flex; + align-items: center; + width: 74px; + height: 74px; + background-color: #FFFFFF; + border-radius: 100%; + overflow: hidden; +} +.pull-img>span img{ + margin: 0 auto; +} +.pull-txt h3{ + font-size: 20px; + line-height: 2; + transition: all .6s; +} +.pull-txt ins{ + display: block; + width: 34px; + height: 2px; + background-color: #1a73e8; + margin: 5px 0 13px; + transition: all .6s; +} +.pull-txt p{ + font-size: 14px; + color: #636363; + line-height: 1.8; +} +/* 公共hover效果 */ +li:hover .pull-img>span{ + background-color: #1A73E9; + transition: all .6s; +} +li:hover .pull-img img{ + -webkit-filter: grayscale(100%) brightness(1000%); + -moz-filter: grayscale(100%) brightness(1000%); + -ms-filter: grayscale(100%) brightness(1000%); + -o-filter: grayscale(100%) brightness(1000%); + filter: grayscale(100%) brightness(1000%); + transition: all .6s; +} +li:hover .pull-txt h3{ + color: #1A73E9; + transition: all .6s; +} +li:hover .pull-txt ins{ + background-color: #f6ab00; + transition: all .6s; } \ No newline at end of file