/* * 通用样式文件 */ /* 头部样式 */ .header{ display: flex; height: 120px; background: #7c3030; /*background-image: url('../img/bg/header_bg.jpg'); background-size: cover; background-position: center ; background-repeat: no-repeat;*/ } .header .logo{ padding-left: 50px; } .header .header-right-nav{ flex: 1; width: 100%; } .header .header-right-nav .icon-list { height: 31px; margin-top: 24px; line-height: 25px; } .header .header-right-nav .icon-list .icon-list-item{ position: relative; width: 24px; height: 30px; margin: 0 11px; } .header .header-right-nav .icon-list .code-box{ position: relative; } .header .header-right-nav .icon-list .code-box img{ position: absolute; top: 35px; right: -38px; width: 100px; height: 100px; transition: all .5s; z-index: -1; opacity: 0; } .header .header-right-nav .icon-list .code-box:hover img{ opacity: 1; z-index: 99; } .header .header-right-nav .icon-list li .search{ position: absolute; top: 1px; right: 0; z-index: 3; outline: none; border: none; background-color: #7c3030; border-radius: 15px; } .header .header-right-nav .icon-list .search-box{ overflow: hidden; } .header .header-right-nav .icon-list .search-box form{ box-sizing: border-box; width: 100%; height: 28px; border-radius: 15px; } .header .header-right-nav .icon-list li .text{ position: absolute; width: 120px; height: 24px; padding: 0; margin: 0; vertical-align: top; background-color: rgba(110, 30, 111,.5); outline: none; border: none; border-radius: 12px; text-indent: 12px; color: #fff; transition: all .5s; } .header .header-right-nav .navbar{ display: flex; justify-content: space-around; height: 66px; } .header .header-right-nav .navbar>li{ position: relative; min-width:65px; height: 66px; text-align: center; } .header .header-right-nav .navbar li .topNav{ display: inline-block; height: 66px; line-height: 56px; color: #fff; } .header .header-right-nav .navbar li .topNav:after{ display: block; content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 45px; width: 0; height: 2px; background-color: #fff; transition: 0.5s; } .header .header-right-nav .navbar li ol{ display: none; position: absolute; top: 65px; left: 50%; transform: translateX(-50%); font-size: 12px; z-index: 3; } .header .header-right-nav .navbar li ol li.secondNav{ background: #ccc; text-align: center; } .header .header-right-nav .navbar li ol li.secondNav a{ display: inline-block; width: 108px; padding: 10px; line-height: 22px; color: #000000; } @media screen and (max-width:1600px){ .header .header-right-nav .navbar li ol li.secondNav a{ padding: 10px 5px; } } .header .header-right-nav .navbar li ol li.secondNav a:hover{ color: #7c3030; background: #999999; } .header .icon-list{ padding-right: 20px; } .header .icon-list li .icon{ display: inline-block; width: 24px; height: 24px; background-size: cover; background-position: center; background-repeat: no-repeat; } .header .icon-list li .wechat{ background-image: url('../img/icon/wechat.png') ; } .header .icon-list li .search{ background-image: url("../img/icon/search.png"); } @media screen and (max-width:1600px){ .header .icon-list{ padding-right: 10px; } .header .icon-list li { margin: 0px 10px; } .header .header-right-nav .navbar li{ font-size: 14px; } } /* 页尾样式 */ footer{ width: 100%; height: 80px; background: #7c3030; color: #fff; line-height: 80px; text-align: center; } /* 背景图样式 */ .page-background{ width: 100%; min-width: 1200px; background-image: url('../img/bg/banner_bg.png') ; background-size: cover; background-position: bottom; }/* * 通用样式文件 */ /* 头部样式 */ .header{ display: flex; height: 120px; background: #7c3030; /*background-image: url('../img/bg/header_bg.jpg'); background-size: cover; background-position: center ; background-repeat: no-repeat;*/ } .header .logo{ padding-left: 50px; } .header .header-right-nav{ flex: 1; width: 100%; } .header .header-right-nav .icon-list { height: 31px; margin-top: 24px; line-height: 25px; } .header .header-right-nav .icon-list .icon-list-item{ position: relative; width: 24px; height: 30px; margin: 0 11px; } .header .header-right-nav .icon-list .code-box{ position: relative; } .header .header-right-nav .icon-list .code-box img{ position: absolute; top: 35px; right: -38px; width: 100px; height: 100px; transition: all .5s; z-index: -1; opacity: 0; } .header .header-right-nav .icon-list .code-box:hover img{ opacity: 1; z-index: 99; } .header .header-right-nav .icon-list li .search{ position: absolute; top: 1px; right: 0; z-index: 3; outline: none; border: none; background-color: #7c3030; border-radius: 15px; } .header .header-right-nav .icon-list .search-box{ overflow: hidden; } .header .header-right-nav .icon-list .search-box form{ box-sizing: border-box; width: 100%; height: 28px; border-radius: 15px; } .header .header-right-nav .icon-list li .text{ position: absolute; width: 120px; height: 24px; padding: 0; margin: 0; vertical-align: top; background-color: rgba(110, 30, 111,.5); outline: none; border: none; border-radius: 12px; text-indent: 12px; color: #fff; transition: all .5s; } .header .header-right-nav .navbar{ display: flex; justify-content: space-around; height: 66px; } .header .header-right-nav .navbar>li{ position: relative; min-width:65px; height: 66px; text-align: center; } .header .header-right-nav .navbar li .topNav{ display: inline-block; height: 66px; line-height: 56px; color: #fff; } .header .header-right-nav .navbar li .topNav:after{ display: block; content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 45px; width: 0; height: 2px; background-color: #fff; transition: 0.5s; } .header .header-right-nav .navbar li ol{ display: none; position: absolute; top: 65px; left: 50%; transform: translateX(-50%); font-size: 12px; z-index: 3; } .header .header-right-nav .navbar li ol li.secondNav{ background: #ccc; text-align: center; } .header .header-right-nav .navbar li ol li.secondNav a{ display: inline-block; width: 108px; padding: 10px; line-height: 22px; color: #000000; font-size: 13px; } @media screen and (max-width:1600px){ .header .header-right-nav .navbar li ol li.secondNav a{ padding: 10px 5px; } } .header .header-right-nav .navbar li ol li.secondNav a:hover{ color: #7c3030; background: #999999; } .header .icon-list{ padding-right: 20px; } .header .icon-list li .icon{ display: inline-block; width: 24px; height: 24px; background-size: cover; background-position: center; background-repeat: no-repeat; } .header .icon-list li .wechat{ background-image: url('../img/icon/wechat.png') ; } .header .icon-list li .search{ background-image: url("../img/icon/search.png"); } @media screen and (max-width:1600px){ .header .icon-list{ padding-right: 10px; } .header .icon-list li { margin: 0px 10px; } .header .header-right-nav .navbar li{ font-size: 14px; } } /* 页尾样式 */ footer{ width: 100%; height: 80px; background: #7c3030; color: #fff; line-height: 80px; text-align: center; } /* 背景图样式 */ .page-background{ width: 100%; min-width: 1200px; background-image: url('../img/bg/banner_bg.png') ; background-size: cover; background-position: bottom; }