#info{
width:1200px;
margin:0 auto;
}
#info .picture-entry{
border-radius:5px;
background-color:#fff;
padding:5px;
}
/* è½®æ’图 */
#info .swiper{
border-radius:3px;
overflow:hidden;
width:710px;
height:320px;
margin:15px 10px 15px;
position:relative;
}
#info .swiper .item{
position:absolute;
}
#info .swiper .item img{
object-fit:cover;
cursor:pointer;
}
#info .swiper .left,
#info .swiper .right{
user-select:none;
background-color:rgba(0, 0, 0, .15);
color:rgba(255, 255, 255, .8);
padding:4px;
font-size:20px;
height:25px;
width:15px;
text-align:center;
line-height:25px;
border-radius:3px;
position:absolute;
top:50%;
transform:translatey(-50%);
}
#info .swiper .left{
left:10px;
}
#info .swiper .right{
right:10px;
}
#info .swiper .left:hover,
#info .swiper .right:hover{
background-color:rgba(0, 0, 0, .4);
}
#info .swiper .dot{
position:absolute;
bottom:20px;
left:50%;
transform:translatex(-50%);
}
#info .swiper .dot i{
display:block;
width:10px;
height:10px;
border-radius:50%;
background-color:#fff;
margin:0 3px;
}
#info .swiper .dot i.active{
background-color:#f44145;
}
/* 图片放大预览 */
#info .preview{
display:none;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background-color:rgba(0, 0, 0, .7);
z-index:1;
}
#info .preview .close{
position:absolute;
top:50px;
right:30px;
width:50px;
height:50px;
border-radius:50%;
background-color:#272727;
cursor:pointer;
}
#info .preview .img-container{
width:80%;
height:80%;
position:absolute;
left:calc(50% - 40%);
top:calc(50% - 40%);
}
#info .preview .img-it{
object-fit:cover;
display:none;
max-width:100%;
max-height:100%;
}
#info .preview .prev,
#info .preview .next{
width:60px;
height:60px;
position:absolute;
left:30px;
top:calc(50% - 30px);
cursor:pointer;
}
#info .preview .next{
left:auto;
right:30px;
}
/* tool */
#info .prod-img{
width:345px;
margin:15px 0;
}
#info .prod-img .it-img{
width:345px;
height:155px;
border-radius:3px;
overflow:hidden;
}
#info .prod-img .it-img img{
object-fit:cover;
}
#info .entry{
margin-left:20px;
border-radius:5px;
background-color:#f7f7f7;
padding:15px;
text-align:center;
}
#info .entry .it-img{
width:65px;
height:65px;
border-radius:10px;
overflow:hidden;
margin-bottom:7px;
}
/* è´¦å·è¯¦æƒ… */
#info .detail{
background-color:#fff;
border-radius:5px;
box-sizing:border-box;
}
#detail .account{
width:895px;
box-sizing:border-box;
padding:25px 50px 0 20px;
min-height:600px;
}
#detail .mark-title .mark-it{
height:24px;
padding:0 5px;
margin-top:5.5px;
float:left;
border-radius:4px;
color:#fff;
background:linear-gradient(270deg, #f44145 0%, #ff8e91 98%);
margin-right:5px;
}
#detail .mark-title .mark-it.reserve{
background:linear-gradient(270deg, #ff8e00 0%, #ffb37c 100%);
}
#detail .mark-title .mark-it.voucher{
background:linear-gradient(270deg, #41c28d 0%, #68dbac 100%);
}
#detail .mark-title .mark-it.review{
background:linear-gradient(270deg, #74a6fa 0%, #84b2fd 100%);
}
#detail .mark-title .mark-it.top-up{
background:linear-gradient(270deg, #9b82f4 0%, #baa7fd 100%);
}
#detail .mark-title .mark-it img{
margin-right:3px;
}
#detail .mark-title .title{
font-size:20px;
font-weight:bold;
line-height:35px;
}
#detail .price-buy{
margin-top:20px;
}
#detail .price{
color:#f44145;
font-size:14px;
}
#detail .price span{
font-size:26px;
font-weight:bold;
}
/* è´ä¹° */
#detail .buy button{
border:none;
outline:none;
width:200px;
height:48px;
background-color:#f44145;
color:#fff;
border-radius:5px;
cursor:pointer;
font-size:18px;
line-height:18px;
}
#detail .buy .disabled{
background-color:#999;
cursor:not-allowed;
}
/* è”ç³»å–家撩价 */
#detail .connect-sell{
width:298px;
height:48px;
background-color:#ff8e00;
line-height:48px;
text-align:center;
font-size:18px;
color:#fff;
border-radius:5px;
margin-left:15px;
}
/* 下载appè”ç³»å–家弹窗 */
#detail .down-app{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background-color:rgba(0, 0, 0, .7);
z-index:1;
display:none;
}
#detail .down-app .down-content{
width:600px;
box-sizing:border-box;
background-color:#fff;
border-radius:5px;
padding:54px 50px 52px 30px;
position:relative;
}
#detail .down-app .close{
position:absolute;
width:32px;
height:32px;
top:10px;
right:10px;
}
#detail .down-app .down-content .title{
font-size:16px;
text-align:center;
}
#detail .down-app .down-content .title span{
color:#f44145;
}
#detail .down-app .down-content .example{
margin-top:60px;
}
#detail .down-app .app-text{
font-size:16px;
margin-top:20px;
}
/* 温馨æ示 */
#detail .tips{
font-size:14px;
margin-top:30px;
line-height:14px;
}
#detail .tips .label{
color:#999;
}
#detail .tips .icon{
width:14px;
height:14px;
margin:0 6px 0 20px;
}
#detail .tips .more{
margin-left:10px;
width:12px;
height:12px;
}
/* æœåŠ¡ä¿éšœ */
#detail .serve{
margin-top:20px;
font-size:14px;
}
#detail .serve .label{
color:#999;
margin-right:20px;
}
/* 充值æ示 */
#detail .topup-tips{
margin-top:20px;
border-radius:5px;
padding:15px;
border:1px solid #ffd9da;
background-color:#fff6f6;
}
#detail .topup-tips .topup-img{
width:16px;
height:16px;
margin-right:5px;
margin-top:4px;
/* padding-top:10px; */
}
#detail .topup-tips .topup-con{
color:#ff5858;
line-height:20px;
}
/* 代充æ示 */
#detail .recharge-tips{
margin-top:10px;
padding:15px;
border-radius:5px;
border:1px solid #f1f1f1;
}
#detail .recharge-tips .recharge-tit{
font-size:14px;
line-height:14px;
font-weight:bold;
padding-left:13px;
position:relative;
}
#detail .recharge-tips .recharge-tit::before{
content:'';
position:absolute;
width:5px;
border-radius:2.5px;
background-color:#ff5858;
top:0;
bottom:0;
left:0;
}
#detail .recharge-tips .recharge-con{
margin-top:10px;
color:#666;
line-height:20px;
}
/* 交易æµç¨‹ */
#detail .deal-flow{
height:116px;
margin-top:20px;
border-radius:5px;
overflow:hidden;
}
/* 商å“详情ã€éªŒå·æŠ¥å‘Šã€äº¤æ˜“æµç¨‹ */
#detail .tab-content{
margin-top:20px;
}
#detail .tab{
height:48px;
background-color:#f7f7f7;
line-height:48px;
font-size:14px;
box-sizing:border-box;
border-bottom:1px solid #eaeaea;
border-radius:5px 5px 0 0;
}
#detail .tab .item{
width:120px;
text-align:center;
height:48px;
box-sizing:border-box;
}
#detail .tab .item.active{
background-color:#fff;
font-weight:bold;
border:1px solid #eaeaea;
border-bottom-color:#fff;
border-radius:5px 5px 0 0;
}
#detail .content{
display:none;
}
#detail .con-detail{
display:block;
}
/* 商å“详情 */
#detail .con-detail{
font-size:14px;
}
#detail .con-detail .item{
padding:17px 0 17px 32px;
border-bottom:1px dashed #eaeaea;
}
#detail .con-detail .label{
color:#999;
min-width:70px;
}
/* 开局å·å›¾ç‰‡ */
#detail .con-detail .img-preview{
padding:30px 0 30px 32px;
}
#detail .con-detail .img-preview .block{
margin-top:10px;
border-radius:5px;
overflow:hidden;
}
#detail .con-detail .img-preview .block:first-child{
margin-top:0px;
}
#detail .con-detail .img-preview img{
max-width:100%;
}
/* 商å“详情-皮肤 */
#detail .con-detail .skin{
padding-bottom:7px;
position:relative;
}
#detail .con-detail .skin .list{
/* max-height:312px; */
overflow:hidden;
}
#detail .skin .it{
height:42px;
width:136px;
box-sizing:border-box;
border:1px solid #eaeaea;
border-radius:5px;
background-color:#f7f7f7;
font-size:12px;
line-height:42px;
text-align:center;
margin:0 10px 10px 0;
padding:0 15px;
}
#detail .skin .it:nth-of-type(5n){
margin:0 0 10px 0;
}
#detail .skin .label{
width:70px;
height:42px;
text-align-last:right;
margin-right:3px;
}
#detail .skin .block.arrow{
margin-bottom:72px;
}
#detail .con-detail .skin .down-up{
color:#999;
display:none;
position:absolute;
left:calc(50% 51px);
bottom:23px;
transform:translatex(-50%);
}
/* 商å“详情-声明 */
#detail .con-detail .statement{
padding-bottom:13px;
}
#detail .statement .it{
margin-bottom:4px;
}
/* 交易æµç¨‹ */
#detail .con-deal{
padding:32px 30px;
}
#detail .con-deal .num{
width:21px;
height:21px;
background-color:#ff964a;
border-radius:50%;
font-size:14px;
color:#fff;
text-align:center;
line-height:21px;
margin-right:15px;
}
#detail .con-deal .step{
position:relative;
margin-top:30px;
}
/* 交易æµç¨‹-扫ç 下载app */
#detail .con-deal .scan-down{
margin-top:10px;
padding:3px 8px 3px 3px;
background-color:#fff;
border:1px solid #d4d4d4;
width:113px;
box-sizing:border-box;
border-radius:5px;
position:relative;
}
#detail .con-deal .code-img{
width:80px;
height:80px;
margin-right:8px;
}
#detail .con-deal .code-tips{
color:#999;
writing-mode:vertical-lr;
}
#detail .con-deal .scan-down::before,
#detail .con-deal .scan-down::after{
content:'';
position:absolute;
top:-15px;
border:7px solid transparent;
border-bottom-color:#d4d4d4;
left:14px;
}
#detail .con-deal .scan-down::after{
border-bottom-color:#fff;
top:-13.5px;
}
#detail .con-deal .step::before{
content:'';
position:absolute;
height:calc(100% 9px);
top:21px;
width:1px;
left:10px;
background-color:#ff964a;
}
#detail .con-deal .step:first-child{
margin-top:0;
}
#detail .con-deal .step:last-child::before{
all:unset;
}
#detail .con-deal .e-tit{
font-size:14px;
}
#detail .con-deal .e-det{
margin-top:7px;
color:#999;
}
/* å–家 */
#detail .other{
width:300px;
margin:5px 5px 5px 0;
border-radius:5px;
background-color:#f7f7f7;
box-sizing:border-box;
padding:20px;
}
#detail .other .title{
font-size:20px;
font-weight:bold;
padding:0 5px;
}
#detail .other .store-person{
margin-top:15px;
/* border-radius:5px; */
/* background-color:#fff; */
}
#detail .other .header{
background-color:#fff;
border-radius:5px;
padding:10px 15px;
}
#detail .other .avatar{
width:60px;
height:60px;
border-radius:50%;
overflow:hidden;
margin-right:15px;
}
#detail .other .name{
font-size:14px;
font-weight:bold;
}
#detail .other .sts span{
color:#f44145;
}
#detail .other .store-data{
margin-top:15px;
position:relative;
background-color:#fff;
border-radius:5px;
padding:15px;
}
#detail .store-data .data-detail{
color:#666;
}
#detail .store-data .data-detail span{
color:#f44145;
font-weight:700;
}
#detail .store-data .auther{
width:80px;
height:80px;
}
#detail .other .store-data::before,
#detail .other .store-data::after{
content:'';
position:absolute;
width:30px;
height:15px;
background: no-repeat 0 0/30px 15px;
top:-15px;
right:40px;
}
#detail .other .store-data::before{
left:40px;
}
/* 推èä½ */
#detail .other .ad{
margin-top:15px;
width:260px;
height:180px;
}
/* å¿«é€Ÿé€šé“ */
#detail .channel{
margin-top:20px;
}
#detail .channel .title{
font-size:20px;
font-weight:bold;
}
#detail .channel .list{
margin-top:15px;
border-radius:5px;
background-color:#fff;
padding:15px;
font-size:14px;
line-height:24px;
}
#detail .channel a{
color:#999;
}
#detail .channel a:hover,
#detail .channel .it:hover{
color:#f44145;
}
/* ä¿éšœæœåŠ¡ */
#detail .serve-safe .title-sub{
margin-top:20px;
}
#detail .serve-safe .list{
margin-top:15px;
border-radius:5px;
background-color:#fff;
overflow:hidden;
padding-bottom:15px;
height:304px;
overflow:hidden;
}
#detail .serve-safe .list .it{
font-size:14px;
display:block;
padding:15px 15px 0;
}
#detail .serve-safe .list .compensate-time{
margin-top:7px;
color:#999;
padding-bottom:15px;
border-bottom:1px dashed #eaeaea;
line-height:14px;
}
#detail .serve-safe .list .compensate span{
color:#f44145;
margin-right:8px;
}
/* 相关推è */
#info .recommend,
#info .first{
margin-top:30px;
}
#info .recommend .title,
#info .first .title{
font-size:26px;
line-height:26px;
font-weight:bold;
padding-left:10px;
border-left:3px solid #333;
}
#info .recommend .list,
#info .first .list{
margin-top:25px;
}
#info .recommend .item{
width:290px;
border-radius:5px;
overflow:hidden;
background-color:#fff;
box-sizing:border-box;
margin:0 13.3px 15px 0;
}
#info .recommend .item:nth-of-type(4n){
margin:0 0 15px;
}
#info .recommend .auto-img-wrap{
display:block;
width:100%;
height:140px;
overflow:hidden;
border:5px 5px 0 0;
}
#info .recommend .goods-info{
padding:12px 12px 14px;
}
#info .recommend .goods-info .tit{
font-size:14px;
height:38px;
}
#info .recommend .goods-info .sub{
color:#999;
margin:10px 0;
}
#info .recommend .goods-info .price-sts{
font-size:14px;
color:#f44145;
margin-bottom:12px;
}
#info .recommend .goods-info .price-sts span{
font-size:20px;
}
#info .recommend .goods-info .sts{
font-size:12px;
color:#999;
margin-left:10px;
}
/* 首充å·æŽ¨è */
#info .first .item{
display:block;
width:590px;
height:140px;
background-color:#fff;
box-sizing:border-box;
padding:30px 32px;
margin-bottom:15px;
border-radius:5px;
font-size:14px;
line-height:14px;
}
#info .first .item:hover .name{
color:#f44145;
}
#info .first .badge{
margin-top:15px;
font-size:12px;
}
#info .first .badge .it-badge{
height:20px;
color:#fff;
line-height:20px;
padding:0 10px;
border-radius:10px;
background-color:#f44145;
margin-right:5px;
}
#info .first .badge .it-badge:last-child{
margin:0;
}
#info .first .price-sts{
margin-top:10px;
font-size:20px;
line-height:20px;
color:#f44145;
}
#info .first .price-sts .sts{
color:#999;
margin-left:10px;
font-size:12px;
}
/* æ示模æ€æ¡† */
#info .tips-modal,
#info .auth-modal{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background-color:rgba(0, 0, 0, .7);
display:none;
z-index:1;
}
#info .tips-modal .tips-content,
#info .auth-modal .auth-content{
width:950px;
height:340px;
background-color:#fff;
border-radius:5px;
padding:30px;
box-sizing:border-box;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);
}
#info .tips-modal .title,
#info .auth-modal .title{
font-size:20px;
line-height:20px;
font-weight:bold;
}
#info .tips-modal .close,
#info .auth-modal .close{
width:32px;
height:32px;
position:absolute;
top:10px;
right:10px;
}
#info .tips-modal .tips-text{
font-size:16px;
line-height:16px;
padding:103px 0 90px;
border-bottom:1px solid #ebebeb;
text-align:center;
}
#info .tips-modal .btn{
border:none;
width:100px;
height:38px;
background-color:#f44145;
border-radius:3px;
color:#fff;
margin-top:12px;
float:right;
font-size:14px;
}
/* 实åè®¤è¯ */
#info .auth-modal{
display:none;
}
#info .auth-modal .auth-content{
height:auto;
}
#info .auth-modal .auth-tips{
font-size:14px;
line-height:20px;
}
#info .auth-modal .form-box{
margin-top:20px;
padding-top:15px;
border-top:1px solid #ebebeb;
border-bottom:1px solid #ebebeb;
}
#info .auth-modal .auth-form{
margin:60px 0 80px;
}
#info .auth-modal .name,
#info .auth-modal .card{
font-size:14px;
line-height:20px;
margin-right:8px;
}
#info .auth-modal .card-box{
margin-top:20px;
}
#info .auth-modal .inp-box{
width:382px;
height:48px;
overflow:hidden;
box-sizing:border-box;
border-radius:5px;
}
#info .auth-modal input{
box-sizing:border-box;
width:100%;
height:100%;
border:none;
outline:none;
background-color:#f1f1f1;
padding:14px 20px;
border-radius:5px;
}
#info .auth-modal .auth-btn{
margin-top:12px;
}
#info .auth-modal .btn{
width:130px;
height:38px;
box-sizing:border-box;
background-color:#f44145;
border-radius:3px;
color:#fff;
border:none;
font-size:14px;
}