.acc-fil{ width:1200px; margin:0 auto; position:relative; } .acc-fil .filter{ background-color:#fff; border-radius:5px; padding:30px 30px 20px; box-sizing:border-box; font-size:14px; } .acc-fil .filter .game-name{ font-size:26px; font-weight:bold; padding-bottom:20px; border-bottom:1px solid #eaeaea; margin-bottom:15px; } .acc-fil .filter .item{ margin-bottom:5px; } .acc-fil .filter .type{ width:91px; padding-right:15px; box-sizing:border-box; text-align:right; flex:none; height:42px; line-height:42px; } .acc-fil .filter .all{ margin-left:20px; height:42px; line-height:42px; } .acc-fil .filter .cate .it{ cursor:pointer; border-radius:3px; width:100px; padding:0 8px; height:42px; box-sizing:border-box; border:1px solid #eaeaea; margin:0 10px 10px 0; text-align:center; line-height:42px; } /* 热门游戏 */ .acc-fil .filter .cate-game .it{ width:130px; padding:0 9px; text-align:left; } /* 价格区间 */ .acc-fil .filter .price-area .it, .acc-fil .filter .gear-area .it{ min-width:100px; width:auto; } .acc-fil .filter .cate .it:last-of-type{ margin-right:0; } .acc-fil .filter .cate .it.active{ border:1px solid #fd7c7f; background-color:#fff7f7; } .acc-fil .filter .game-icon{ width:24px; height:24px; border-radius:50%; overflow:hidden; margin-right:9px; } .acc-fil .filter .game-icon img{ object-fit:cover; } .acc-fil .filter .current-area{ display:none; } .acc-fil .filter .current{ height:42px; box-sizing:border-box; text-align:center; line-height:42px; border:1px solid #eaeaea; border-radius:3px; width:100px; padding:0 8px; margin:0 20px 10px 0; } .acc-fil .filter .current.active{ border:1px solid #fd7c7f; background-color:#fff7f7; } .acc-fil .filter .other-area{ margin-bottom:10px; } /* 全部区服 */ .area-wrap{ display:none; } .all-area{ font-size:14px; position:fixed; top:0; right:0; bottom:0; left:0; background-color:rgba(0, 0, 0, .7); z-index:1; } .all-area .content{ border-radius:5px; width:950px; height:632px; background-color:#fff; padding:20px 30px; box-sizing:border-box; position:relative; } .all-area .area-top{ height:38px; padding-bottom:20px; border-bottom:1px solid #ebebeb; } .all-area .area-inp{ margin:0 9px 0 10px; width:173px; overflow:hidden; border-radius:3px; } .all-area .area-inp input{ border:none; outline:none; height:100%; height:100%; padding:12px 18px; box-sizing:border-box; background-color:#eaeaea; } .all-area .search{ border-radius:5px; width:56px; background-color:#f44145; line-height:38px; color:#fff; text-align:center; } .all-area .close{ position:absolute; right:10px; top:10px; } .all-area .area-list{ padding-top:10px; } .all-area .area-list .item{ box-sizing:border-box; padding:0 5px; width:80px; height:38px; text-align:center; line-height:38px; border-radius:3px; border:1px solid #eaeaea; margin:0 10px 10px 0; } .all-area .area-list .item:nth-of-type(10n){ margin:0 0 10px 0; } .all-area .page{ margin-top:13px; position:absolute; left:30px; right:30px; bottom:20px; } .all-area .page .p{ width:60px; height:30px; border-radius:3px; border:1px solid #eaeaea; box-sizing:border-box; line-height:30px; text-align:center; margin:0 2.5px; cursor:pointer; } .all-area .page .num{ width:40px; } .all-area .page .num.active{ border-color:#fd7c7f; background-color:#fff7f7; } .all-area .page .total{ margin-left:5px; } /* --------------------------------------------------------------------------- */ /* 搜索、排序 */ .acc-fil .filter .search-sort{ margin-top:25px; } /* 搜索 */ .acc-fil .filter .search-box{ border-radius:3px; overflow:hidden; height:38px; } .acc-fil .filter .search-inp{ border:1px solid #fd7c7f; overflow:hidden; border-radius:3px 0 0 3px; border-right:none; } .acc-fil .search-box .inp{ height:100%; width:244px; outline:none; padding:11px 14px; border:none; box-sizing:border-box; } .acc-fil .search-box .btn{ width:60px; outline:none; border:none; background-color:#f44145; color:#fff; overflow:hidden; } /* 排序 */ .acc-fil .filter .all-sort{ margin-left:70px; } .acc-fil .filter .all-sort .it{ margin-right:60px; position:relative; line-height:14px; cursor:pointer; } .acc-fil .filter .all-sort .it:last-child{ margin-right:0px; } .acc-fil .filter .all-sort .sort::before, .acc-fil .filter .all-sort .sort::after{ content:''; position:absolute; border:6px solid transparent; right:-17px; } .acc-fil .filter .all-sort .sort::before{ border-bottom-color:#999; top:-5.5px; } .acc-fil .filter .all-sort .sort::after{ border-top-color:#999; bottom:-5.5px; } .acc-fil .filter .all-sort .up::before{ border-bottom-color:#f44145; } .acc-fil .filter .all-sort .down::after{ border-top-color:#f44145; } /* --------------------------------------------------------------------------- */ /* 高级赛选 */ #advanced{ position:relative; } #advanced .up-down{ float:right; margin-left:10px; width:12px; height:12px; height:100%; position:relative; } #advanced .up-down::after{ content:''; position:absolute; float:right; width:12px; height:12px; right:0px; top:calc(50% - 6px); background: no-repeat 0 0/12px 12px; } #advanced .it.active .up-down::after{ background-image:; } #advanced .wrap{ all:initial; position:absolute; width:1079px; left:0px; top:calc(100% - 4px); border-radius:3px; padding:20px 25px 10px; box-sizing:border-box; box-shadow:0 1px 4px 0 rgba(0, 0, 0, .2); background-color:#fff; display:none; font-size:14px; line-height:14px; z-index:1; } #advanced .active .wrap{ display:block; } #advanced .vip div{ margin:0 25px 10px 0; } #advanced .skin .item.active{ color:#f44145; } /* 皮肤列表 */ #advanced .skin-list>div{ margin:0 25px 10px 0; } #advanced .oper{ margin:10px 0 10px; } #advanced .oper button{ color:#fff; outline:none; border:none; background-color:#f44145; padding:3px 12px; border-radius:3px; } #advanced .oper .cancel{ color:#999; background-color:#fff; } /* 列表 */ .acc-fil .list{ margin-top:15px; } .acc-fil .list .item{ width:290px; border-radius:5px; background-color:#fff; margin:0 13.3px 15px 0; } .acc-fil .list .item:nth-of-type(4n){ margin-right:0; } .acc-fil .list .item .auto-img-wrap{ display:block; border-radius:5px 5px 0 0; overflow:hidden; height:140px; } .acc-fil .list .item .des{ padding:12px 12px 14px; } .acc-fil .list .title{ height:38px; font-size:14px; } .acc-fil .list .sub{ color:#999; margin:10px 0; } .acc-fil .list .price-sts{ font-size:14px; color:#f44145; margin-bottom:12px; } .acc-fil .list .price-sts span{ font-size:20px; } .acc-fil .list .sts{ color:#999; margin-left:10px; font-size:12px; } .acc-fil .list .oper{ margin-top:15px; padding-top:5px; color:#999; font-size:14px; line-height:14px; border-top:1px solid #d8d8d8; /* display:none; */ } .acc-fil .list .oper .it{ margin-top:10px; } .acc-fil .list .oper .score{ position:relative; } .acc-fil .list .oper .score .score-detail{ z-index:1; top:-16px; left:calc(100% 16px); position:absolute; color:#3d3d3d; border-radius:5px; background:#fff; box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.15); display:none; } .acc-fil .list .oper .score:hover .score-detail{ display:block; } .acc-fil .list .oper .score .header{ text-align:center; background-color:#d8d8d8; border-radius:5px 5px 0 0; padding:14px; font-size:18px; line-height:18px; font-weight:bold; position:relative; } .acc-fil .list .oper .score .header::before{ content:''; position:absolute; border:8px solid transparent; border-right-color:#d8d8d8; left:-16px; top:calc(50% - 8px); } .acc-fil .list .oper .score .score-list{ padding:9px 20px 17px; } .acc-fil .list .oper .score .score-item{ padding:9px 0; white-space:nowrap; } .acc-fil .list .oper .score .score-item span{ color:#999; display:inline-block; width:104px; text-align:right; margin-right:5px; } .acc-fil .list .oper .day{ margin:0 25px; } .acc-fil .list .oper .btn{ outline:none; border:none; height:26px; width:83px; border-radius:3px; line-height:26px; color:#fff; background-color:#ff964a; text-align:center; } .acc-fil .list .oper .already{ background-color:#f44145; text-align:center; } .acc-fil .list .oper .origin{ width:43px; text-align:center; margin-right:5px; } /* 首充续充过滤条件 */ .acc-fil .first-continue{ padding:10px 10px 10px 30px; } .acc-fil .first-continue #sort-wrap{ margin:0; } .acc-fil .first-continue .check-account a{ display:block; width:120px; height:36px; box-sizing:border-box; color:#fff; line-height:36px; text-align:center; border-radius:4px; font-size:14px; background:linear-gradient(270deg, #007dfe 0%, #3798fc 100%); } /* 无图列表 */ .acc-fil .first-list{ /* margin-top:15px; */ background-color:#fff; border-radius:5px; padding:5px 30px; } .acc-fil .first-continue-list{ margin-top:10px; } .acc-fil .first-list .item{ width:auto; padding:25px 0; margin:0; border-radius:0; border-bottom:1px dashed #e5e5e5; } .acc-fil .first-list .item:last-child{ margin-bottom:25px; } .acc-fil .first-list .prod-title:hover .tit{ color:#f44145; } .acc-fil .first-list .buy .btn:hover{ background-color:#f44145; border-color:#f44145; color:#fff; } .acc-fil .first-list .tit{ font-size:14px; line-height:14px; } .acc-fil .first-list .badge{ margin-left:5px; } .acc-fil .first-list .badge .it{ height:20px; line-height:20px; box-sizing:border-box; padding:0 10px; color:#fff; border-radius:10px; margin-right:5px; background-color:#f44145; } .acc-fil .first-list .badge .it:last-child{ margin-left:0; padding:0; background-color:transparent; } .acc-fil .first-list .type{ color:#999; margin-top:10px; } .acc-fil .first-list .type:nth-of-type(2){ margin-top:5px; } .acc-fil .first-list .type .it{ margin-right:18px; } .acc-fil .first-list .type .it:last-child{ margin:0; } .acc-fil .first-list .price-sts{ margin-top:12px; color:#f44145; font-size:20px; } .acc-fil .first-list .price-sts .sts{ color:#999; margin-left:10px; font-size:12px; } .acc-fil .first-list .money-store{ margin-top:10px; } .acc-fil .first-list .money{ width:96px; height:24px; border-radius:4px; background:linear-gradient(270deg, #007dfe 0%, #3798fc 100%); margin-right:20px; } .acc-fil .first-list .money .btn{ color:#fff; margin-left:5px; } .acc-fil .first-list .money-store .store{ color:#999; } .acc-fil .first-list .money-store .store .it{ margin-right:20px; } .acc-fil .first-list .money-store .store .it:last-child{ margin-right:0; } .acc-fil .first-list .money-store .store .it a{ color:#60afff; } /* 立即购买 */ .acc-fil .first-list .buy .btn{ height:36px; width:120px; font-size:14px; box-sizing:border-box; border:none; outline:none; background-color:#fff7f7; color:#f44145; border:1px solid #fd7c7f; border-radius:3px; } /* 暂无数据 */ .empty-wrap{ background-color:#fff; border-radius:5px; } .empty{ width:200px; height:200px; margin:110px auto 286px; display:none; } .empty.show{ display:block; } .empty .empty-txt{ margin-top:10px; color:#666; font-size:14px; text-align:center; } /* 加载中动画 */ .acc-fil .load-wrap{ width:90px; height:90px; margin:30px auto; font-size:12px; line-height:12px; display:none; } .acc-fil .loading{ position:relative; color:rgba(244, 65, 69, .5); } .acc-fil .loading .load-img{ position:absolute; transform:rotatez(0deg); width:90px; height:90px; animation:loading 1.8s linear infinite; } .acc-fil .loading .load-dot i{ margin:0 3px; display:inline-block; width:3px; height:3px; border-radius:50%; background-color:rgba(244, 65, 69, .5); } @keyframes loading { from { transform:rotatez(0) } to{ transform:rotatez(360deg) } } /* 返回顶部 */ .acc-fil .return-wrap{ position:fixed; width:48px; height:89px; box-sizing:border-box; overflow:hidden; left:1561.5px; bottom:274px; /* z-index:1; */ border-radius:30px; background-image:linear-gradient(180deg, rgba(255, 168, 170, 0.95) 0%, #fde0e1 100%); } .acc-fil .return-wrap .return-top{ width:46px; height:87px; background-color:#fff; padding:12px 10px; box-sizing:border-box; border-radius:30px; } .acc-fil .return-wrap .top-text{ font-size:12px; line-height:14px; text-align:center; }