pc端官网修改
“用lww
5 years ago
parent
9ef65ced5c
commit
cf78ecd0cc
@ -1,172 +1,385 @@
|
||||
.service_swiper{
|
||||
width: 100%;
|
||||
height: 8rem;
|
||||
@charset UTF-8;.account-box .account-c,.game-box .game-c,.service-c {
|
||||
border-top: 1px dotted #e6e6e6
|
||||
}
|
||||
|
||||
.account-box .account-c li,.game-box .game-c li,.service-c li {
|
||||
text-indent: 10px
|
||||
}
|
||||
|
||||
.service-wrap {
|
||||
width: 1150px;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.service-banner {
|
||||
background: url(../images/banner-box.jpg) center 0 no-repeat
|
||||
}
|
||||
|
||||
.service-banner-wrap {
|
||||
height: 320px;
|
||||
margin: 0 auto;
|
||||
background: url(../images/kfbg.jpg) center 0 no-repeat;
|
||||
margin-top:80px;
|
||||
|
||||
}
|
||||
.kfrw{ position:absolute; top:-80px; right:-60px; background:url(../images/kfrw.png) no-repeat; width:300px; height:400px;}
|
||||
.ser_tit{ background:url(../images/ser_tit.png) no-repeat; margin-left:400px; width:320px; height:100px;}
|
||||
.ser_li{ width:800px; margin-left:150px;}
|
||||
.ser_li li{ float:left; width:200px; text-align:center;}
|
||||
.ser_li li a i{ display:block; width:130px; height:130px; margin:0 auto; margin-bottom:10px;}
|
||||
.ser_li li span{ font-size:22px; color:#fff; font-weight:bold;}
|
||||
.ser_ic01{ background:url(../images/ser_sort.png) no-repeat; background-position:-30px -15px; }
|
||||
|
||||
.ser_ic02{ background:url(../images/ser_sort.png) no-repeat; background-position:-225px -15px; }
|
||||
.ser_ic03{ background:url(../images/ser_sort.png) no-repeat; background-position:-415px -15px; }
|
||||
.ser_ic04{ background:url(../images/ser_sort.png) no-repeat; background-position:-610px -15px; }
|
||||
|
||||
.service-btn-wrap {
|
||||
width: 1260px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
padding-top:20px;
|
||||
}
|
||||
|
||||
.service-btn {
|
||||
width: 207px;
|
||||
height: 77px;
|
||||
float: right;
|
||||
background: url(../images/service-btn.jpg) left top no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 55px 20px 0 0
|
||||
}
|
||||
|
||||
.question-btn {
|
||||
width: 207px;
|
||||
height: 77px;
|
||||
background: url(../images/question-btn.jpg) left top no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 150px
|
||||
}
|
||||
.service_swiper>img:first-child{
|
||||
|
||||
.account-box,.game-box,.pay-box {
|
||||
box-shadow: 1px 10px 10px #e6e6e6;
|
||||
position: relative;
|
||||
float: left
|
||||
}
|
||||
|
||||
.service-content {
|
||||
min-width: 1200px;
|
||||
max-width: 1920px;
|
||||
height: 300px;
|
||||
margin: 0 auto;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.pay-box {
|
||||
width: 349px;
|
||||
height: 321px;
|
||||
margin-right: 50px;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.pay-box .pay-mask {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 98px;
|
||||
background: url(../images/pay-mask.png) left top no-repeat
|
||||
}
|
||||
|
||||
.pay-box .pay-mask .pay-t {
|
||||
font-size: 22px;
|
||||
line-height: 60px;
|
||||
padding: 25px 0 0 87px
|
||||
}
|
||||
|
||||
.pay-box .pay-mask .pay-t a {
|
||||
color: #37b0e9
|
||||
}
|
||||
|
||||
.pay-box .pay-mask .pay-t .pay-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
background: url(../images/pay-icon.png) left top no-repeat;
|
||||
background-size: 100%
|
||||
}
|
||||
|
||||
.service-c {
|
||||
width: 100%;
|
||||
height: 125px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 0
|
||||
}
|
||||
|
||||
.service-c li {
|
||||
line-height: 30px;
|
||||
width:33%;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.account-box .account-mask .account-t,.game-box .game-mask .game-t {
|
||||
font-size: 22px;
|
||||
line-height: 60px;
|
||||
padding: 25px 0 0 87px
|
||||
}
|
||||
|
||||
.service-c li a {
|
||||
color: #676767;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
.service-c li a:hover {
|
||||
color: #74B32E;
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
.account-box {
|
||||
width: 349px;
|
||||
height: 321px;
|
||||
margin-right: 50px;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.account-box .account-mask {
|
||||
width: 100%;
|
||||
height: 98px;
|
||||
background: url(../images/account-mask.png) right bottom no-repeat
|
||||
}
|
||||
|
||||
.account-box .account-mask .account-t a {
|
||||
color: #37b0e9
|
||||
}
|
||||
|
||||
.account-box .account-mask .account-t .account-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
background: url(../images/account-icon.png) left top no-repeat;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.account-box .account-c {
|
||||
width: 313px;
|
||||
height: 205px;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.account-box .account-c li a {
|
||||
color: #676767
|
||||
}
|
||||
|
||||
.account-box .account-c li a:hover {
|
||||
color: #37b0e9;
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
.game-box {
|
||||
width: 349px;
|
||||
height: 321px;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.game-box .game-mask {
|
||||
width: 100%;
|
||||
height: 98px;
|
||||
background: url(../images/game-mask.png) right top no-repeat
|
||||
}
|
||||
|
||||
.game-box .game-mask .game-t a {
|
||||
color: #37b0e9
|
||||
}
|
||||
|
||||
.game-box .game-mask .game-t .game-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
background: url(../images/game-icon.png) left top no-repeat;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.game-box .game-c {
|
||||
width: 313px;
|
||||
height: 205px;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.game-box .game-c li a {
|
||||
color: #676767
|
||||
}
|
||||
|
||||
.game-box .game-c li a:hover {
|
||||
color: #37b0e9;
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
.bottom-btn {
|
||||
width: 830px;
|
||||
height: 101px;
|
||||
border: 1px solid #e6e6e6;
|
||||
margin: 30px auto
|
||||
}
|
||||
|
||||
.bottom-btn ul li {
|
||||
width: 166px;
|
||||
height: 50px;
|
||||
margin-left: -1px;
|
||||
border-right: 1px solid #e6e6e6;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
text-align: center;
|
||||
line-height: 51px;
|
||||
float: left
|
||||
}
|
||||
.service_swiper>a{
|
||||
position: absolute;
|
||||
width: 1.20rem;
|
||||
height: 0.4rem;
|
||||
top: 0.82rem;
|
||||
right: 3.61rem;
|
||||
font-size: 0.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.service_swiper> a img{
|
||||
|
||||
.bottom-btn ul li a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block
|
||||
}
|
||||
.service_info{
|
||||
width: 12rem;
|
||||
margin: -2.12rem auto 1.12rem auto;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.service_left{
|
||||
width: 9rem;
|
||||
}
|
||||
.service_left .list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 0.12rem;
|
||||
}
|
||||
.service_left .list li{
|
||||
width: 1.2rem;
|
||||
height: 0.5rem;
|
||||
font-size: 0.16rem;
|
||||
color: #292929;
|
||||
box-shadow:0px 0px 0.1rem 0px rgba(0, 0, 0, 0.4);
|
||||
border-radius:0.1rem 0.1rem 0px 0px;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
line-height: 0.5rem;
|
||||
margin-right: 0.05rem;
|
||||
|
||||
.bottom-btn ul li:hover {
|
||||
background-color: #37b0e9
|
||||
}
|
||||
.service_left .list li.selected{
|
||||
background-color: #00A3E1;
|
||||
color: #fff;
|
||||
|
||||
.bottom-btn ul li:hover a {
|
||||
color: #fff
|
||||
}
|
||||
.service_left .content{
|
||||
|
||||
.crumbs-box {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
box-shadow:0px 0px 0.6rem 0px rgba(0, 0, 0, 0.2);
|
||||
border-radius:0.1rem;
|
||||
background-color: #fff;
|
||||
overflow: auto;
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.service_left .content {
|
||||
height: 4rem;
|
||||
}
|
||||
}
|
||||
.service_left .content::-webkit-scrollbar { /*滚动条整体样式*/
|
||||
width: 0.3rem;
|
||||
height: 2rem;
|
||||
}
|
||||
.service_left .content::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
|
||||
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||||
background: #00A3E1;
|
||||
border-radius: 0.1rem;
|
||||
}
|
||||
.service_left .content::-webkit-scrollbar-track {/*滚动条里面轨道*/
|
||||
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0.1rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
/* .service_left .content::-webkit-scrollbar-button {
|
||||
background-color:cyan;
|
||||
} */
|
||||
.service_left .content>div{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: 0.16rem;
|
||||
color: #292929;
|
||||
}
|
||||
.service_left .content .content_box{
|
||||
padding: 0.2rem 0.17rem 0.12rem 0.24rem;
|
||||
}
|
||||
.service_left .content .content_box .headline{
|
||||
font-size: 0.2rem;
|
||||
color: #00A3E1;
|
||||
margin-bottom: 0.19rem;
|
||||
}
|
||||
.service_left .content .content_box>p{
|
||||
color: #292929;
|
||||
font-size: 0.16rem;
|
||||
margin-bottom: 0.38rem;
|
||||
}
|
||||
.service_left .content .content_box>p:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.service_right{
|
||||
width: 2.8rem;
|
||||
height: 400px;
|
||||
background-color:#fff ;
|
||||
box-shadow:0px 0px 0.6rem 0px rgba(0, 0, 0, 0.2);
|
||||
border-radius:0.1rem;
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.service_right {
|
||||
height: 4rem;
|
||||
}
|
||||
}
|
||||
.service_right_box{
|
||||
padding: 0.18rem 0.2rem 0.18rem 0.21rem;
|
||||
}
|
||||
.service_right_top{
|
||||
padding-bottom: 0.2rem;
|
||||
border-bottom:1px solid #F5F5F5;
|
||||
}
|
||||
.service_right_top .title{
|
||||
padding:0.02rem 0 0.02rem 0.09rem;
|
||||
border-left: 0.02rem solid #00A3E1;
|
||||
font-size: 0.16rem;
|
||||
color: #00A3E1;
|
||||
}
|
||||
.service_people{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
.service_people>img{
|
||||
width: 0.2rem;
|
||||
height: 0.2rem;
|
||||
}
|
||||
.service_people>span{
|
||||
font-size: 0.14rem;
|
||||
color: #292929;
|
||||
margin-left: 0.07rem;
|
||||
}
|
||||
.service_right_bom{
|
||||
margin-top: 0.21rem;
|
||||
}
|
||||
.service_right_bom .title{
|
||||
padding:0.02rem 0 0.02rem 0.09rem;
|
||||
border-left: 0.02rem solid #00A3E1;
|
||||
font-size: 0.16rem;
|
||||
color: #00A3E1;
|
||||
}
|
||||
.service_download{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
.service_download>img{
|
||||
width: 0.22rem;
|
||||
height: 0.22rem;
|
||||
}
|
||||
.service_download>div{
|
||||
margin-left: 0.07rem;
|
||||
font-size: 0.14rem;
|
||||
color: #292929;
|
||||
}
|
||||
.service_download>div>span{
|
||||
color: #00A3E1;
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: #55c4f0
|
||||
}
|
||||
|
||||
.crumbs-box .crumbs {
|
||||
width: 1200px;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.crumbs-box .crumbs a {
|
||||
float: left;
|
||||
width: 108px;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.crumbs-box .crumbs a.active {
|
||||
background-color: #1595c7
|
||||
}
|
||||
|
||||
.service-list {
|
||||
width: 1200px;
|
||||
height: 120px;
|
||||
border: 1px solid #eee;
|
||||
padding: 10px 20px;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.service-list h2 {
|
||||
font-size: 18px;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px dotted #e6e6e6
|
||||
}
|
||||
|
||||
.service-list div {
|
||||
color: #939393;
|
||||
height: 75px;
|
||||
overflow: hidden
|
||||
}
|
||||
.cjwt .m-subtitle-bar h2 {
|
||||
line-height:1;
|
||||
text-indent:25px;
|
||||
color:#333;
|
||||
font-size:20px;
|
||||
font-weight:bold;
|
||||
border-left:5px solid #44A7E0;
|
||||
}
|
||||
.cjwt .m-subtitle-bar h2 a {
|
||||
color:#44A7E0
|
||||
}
|
||||
.cjwt .m-subtitle-bar h2 a:hover {
|
||||
color:#74B32E
|
||||
}
|
||||
.cjwt .m-subtitle-bar .more {
|
||||
float:right;
|
||||
margin-right:19px;
|
||||
line-height:24px;
|
||||
color:#676767
|
||||
}
|
||||
.cjwt .m-subtitle-bar .more:hover {
|
||||
color:#74B32E
|
||||
}
|
||||
.cjwt .m-subtitle-bar{ margin-bottom:20px;}
|
||||
.cjwt{ background: #fff;
|
||||
width: 95%;
|
||||
padding: 25px;
|
||||
margin: 0 auto;}
|
||||
|
||||
/*客服详情*/
|
||||
.server_detail{ background:#fff; margin-top:30px; height:700px;}
|
||||
.crumbs {padding: 15px 0;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
padding-left: 20px;
|
||||
border-bottom: 3px solid #F1F2F3;border:none;}
|
||||
.crumbs em{ font-weight:bold;}
|
||||
|
||||
#ser_sub{}
|
||||
#ser_sub #l{ float:left; width:240px; height:300px; background:#fff; padding:15px;-webkit-border-radius: 5px;
|
||||
border-radius: 5px;}
|
||||
#ser_sub #l ul{ padding:0px 0 0 0; background: #F4F4F4; min-height:500px;}
|
||||
#ser_sub #l li{ font-size:16px; line-height:50px; height:50px;margin-bottom: 1px;}
|
||||
#ser_sub #l li a{ display:block; line-height:50px; height:50px; text-align:center;}
|
||||
#ser_sub #l li a:hover, #ser_sub #l li a.now{color: #FFFFFF;
|
||||
background: #03B4F5;
|
||||
text-align: center;}
|
||||
|
||||
|
||||
.tabContent #r{ float:right; width:860px; background:#fff; padding:0 20px;}
|
||||
.tabContent h4{ font-size:24px; line-height:55px;border-bottom:1px solid #ebebeb;}
|
||||
.tabContent ul{ font-size:14px;}
|
||||
.tabContent ul li{ }
|
||||
.tabContent ul li .q{background: #f4f4f4;font:14px/40px "\5FAE\8F6F\96C5\9ED1";color: #262626;padding: 0 10px 0 5px;height: 40px; font-weight:bold;}
|
||||
.tabContent ul li .q em {color: #cbcbcb;padding-right: 5px;}
|
||||
.tabContent ul li .a{color:#666; line-height:1.7; padding:10px;}
|
||||
|
||||
|
||||
/*内容区域*/
|
||||
.tabmain{width:95%;height:600px;margin:15px auto;background: #F3F3F3;border:1px solid #F3F3F3;}
|
||||
.tabmain .tabGroup{float:left;width:20%;height:auto; z-index:3;}
|
||||
.tabmain .tabGroup li{height:48px;line-height:48px;padding-left:8px;text-align:center;cursor:pointer;-webkit-user-select:none; -moz-user-select:none;font-size:16px;font-family:'Microsoft yahei';color:#666;}
|
||||
.tabmain .tabGroup li.selectedTab{padding-left:10px;background: #03B4F5;color:#fff;font-weight:bold;}
|
||||
.tabmain .tabContent{padding:5px 20px;background-color:#fff;color:#777; min-height:600px;}
|
||||
.tabContent p a{margin-right:15px;text-decoration:none;text-align:center;color:orange; font-weight:bold;}
|
||||
.tabContent h3{margin-bottom:5px;background:orange;color:#fff;font-size:16px;font-weight:bold;line-height:35px;text-align:center;}
|
||||
.tabContent dl{line-height:22px;margin-bottom:10px;}
|
||||
.tabContent dt{color:#1d9fd3;font-weight:bold;}
|
||||
.tabContent dd img{display:block;}
|
||||
.tabmain .blueline{position:absolute;top:0px;left:0px;width:3px;height:48px;overflow:hidden;}
|
||||
|
||||
.tabContent .witness p{position:relative;padding-left:20px;}
|
||||
.tabContent .witness p em{color:orange; font-weight:bold;}
|
||||
.tabContent .witness p a{color:#666;font-weight:normal;display:block; line-height:24px; text-align:left;}
|
||||
.tabContent .witness p a:hover{background-color:#efefef;}
|
||||
.tabContent .witness p .ele{left:0px;}
|
||||
|
||||
#container{float:left;width:80%;height:600px;background:#fff;overflow:hidden;}
|
||||
#slider{position:absolute;top:0px;right:0;width:6px;border-radius:6px;background:#ccc;cursor:pointer;}
|
||||
#sliderParent{position:absolute;left:0;height:0;width:100%;z-index:999;}
|
||||
#outerWrap{position:relative;z-index:999}
|
||||
|
||||
/*滚动条*/
|
||||
.wrapacon{position:relative;float:left;width:468px;height:360px;margin-top:5px;overflow:hidden;}
|
||||
.wrapaconlis{position:absolute;left:0;top:0;width:450px;}
|
||||
.scrbar{position:relative; width:4px; height:355px;border:1px solid #f4f4f4;border-radius:20px;background-color:#f4f4f4; float:left;left:443px;margin-left:15px;}
|
||||
.scrbar .barbg{position:absolute;right:-1px;top:50px;width:2px;height:105px;border:2px solid #dadada;background-color:#dadada;border-radius:20px;}
|
||||
Loading…
Reference in New Issue