yytxgw/css/base.css

564 lines
11 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

/* -moz-:代表firefox(火狐)浏览器私有属性
-ms-:代表ie浏览器私有前缀
-webkit-:代表safari、chrome私有属性
-o-:代表Opera私有属性
*/
/* 清空所有标签的内外边距 */
* {
padding: 0;
margin: 0;
/* css3盒子模型 */
box-sizing: border-box;
}
body {
/* 抗锯齿性-让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #FFFFFF;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #262626;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal;
}
/* 去掉li 的小圆点 */
ul,
ol,
li {
list-style: none;
}
button {
/* 当我们鼠标经过button按钮的时候鼠标变成小手 */
cursor: pointer;
}
img {
/* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 ① */
vertical-align: middle;
/* 取消图片底侧有空白缝隙的问题 ② */
display: block;
object-fit: cover;
}
/* 去掉a标签的下划线并修改字体颜色 */
a {
color: #262626;
text-decoration: none;
/* 手机端去除a标签点击时的背景样式 */
-webkit-tap-highlight-color: transparent;
/* 去除边距 */
display: block;
}
/* a:hover {
color: #c81623;
} */
/* 禁用长按时弹出的菜单 */
img , a {
-webkit-touch-callout: none;
}
button,
input,
textarea{
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
/* 取消轮廓 */
outline: none;
/* 去掉默认外观 */
/* -webkit-appearance: none; */
/* 去掉点击时的默认外观 */
outline-style: none;
}
textarea {
/* 禁止自定义拉伸 */
resize: none;
}
.hide,
.none {
display: none
}
/* 清楚浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
.logo h1 a {
display: flex;
align-items: center;
}
.w100{ width: 100%; margin: auto;}
.w1160{ width: 1160px; margin: auto;}
.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;}
.clips3{display: -webkit-box;-webkit-line-clamp: 3;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}
.clips4{display: -webkit-box;-webkit-line-clamp: 4;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}
.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;
z-index: 2;
}
.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{
display: none;
height: auto;
background-color: #FFFFFF;
position: absolute;
left: -112px;
top: 62px;
z-index: 99;
transition: all .4s;
overflow: hidden;
}
.head .nav li:hover .sub-nav{
display: flex;
padding: 25px 20px;
border-top: 2px solid #1a73e9;
transition: all .4s;
}
.nav-bg.wap-show{
display: none;
position: fixed;
left: 0;
top: 62px;
width: 100%;
height: calc(100vh - 62px);
background-color: rgba(0,0,0,0.5);
z-index: 1;
}
.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: 10px 0;
padding: 8px 8px 8px 3px;
border-radius: 4px;
}
.sub-nav .sub-nav-list dl>dt:hover{
background-color: #ededed;
}
.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{
width: calc(100% - 50px);
}
.sub-nav-txt p{
font-size: 14px;
line-height: 1.4;
}
.sub-nav-txt span{
display: block;
font-size: 12px;
line-height: 1.4;
opacity: .6;
text-align: justify;
display: -webkit-box;-webkit-line-clamp: 2;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;
}
.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;
}