You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
828 lines
14 KiB
CSS
828 lines
14 KiB
CSS
/*---------手游联运升级V5.1项目联运APP/WAP站---交易模块-------*/
|
|
/*---------@author zwm -------*/
|
|
/*---------date 2018-07-14 -------*/
|
|
*{
|
|
padding:0;
|
|
margin:0;
|
|
box-sizing:border-box;
|
|
font-family:"Microsoft YaHei";
|
|
}
|
|
|
|
/* 媒体对象 begin*/
|
|
.media, .media-body {
|
|
overflow: hidden;
|
|
zoom: 1;
|
|
}
|
|
.media-body, .media-left, .media-right {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
.media-body{
|
|
width:10000px;
|
|
}
|
|
.media-left{
|
|
padding-right:10px;
|
|
}
|
|
.media-object {
|
|
display: block;
|
|
|
|
}
|
|
/*end 媒体对象*/
|
|
.z_clearfix:after{
|
|
display:block;
|
|
content:"";
|
|
height:0;
|
|
line-height:0;
|
|
visibility:hidden;
|
|
clear:both;
|
|
}
|
|
.z_clearfix{
|
|
zoom:1;
|
|
}
|
|
.marg_t5{
|
|
margin-top:5rem;
|
|
}
|
|
.shortcut .trade_topul li{
|
|
width:25%;
|
|
}
|
|
.trade-header{
|
|
background-color: #fff;
|
|
color: #585858;
|
|
border-bottom:1px solid #c2c2c2;
|
|
}
|
|
.trade_caption{
|
|
margin: 0 6rem;
|
|
display: block;
|
|
position: relative;
|
|
text-align: center;
|
|
font-weight: normal;
|
|
font-size: 2.2rem;
|
|
padding: 1.2rem 1rem;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
.z_instruction{
|
|
position: absolute;
|
|
right: 1.5rem;
|
|
top: 50%;
|
|
margin-top: -1.2rem;
|
|
padding: .25rem .8rem;
|
|
border: 1px solid #ebebeb;
|
|
border-radius: 30px;
|
|
color: rgb(153,153,153);
|
|
}
|
|
.trade_tit{
|
|
height:3.33rem;
|
|
padding:1rem 2rem;
|
|
position:relative;
|
|
width:100%;
|
|
}
|
|
.new_sell{
|
|
position: absolute;
|
|
height: 3.33rem;
|
|
line-height: 3.33rem;
|
|
top: 0;
|
|
left: 0;
|
|
padding-left: 1rem;
|
|
border-bottom:2px solid #666666;
|
|
font-size:14px;
|
|
}
|
|
.price_sorting{
|
|
padding: 0 2rem;
|
|
border-left: 1px solid #ddd;
|
|
float: left;
|
|
margin-left: 5.6rem;
|
|
font-size:14px;
|
|
}
|
|
.sorting_div{
|
|
float: right;
|
|
height: 1.4rem;
|
|
width: 0.9rem;
|
|
margin-left: 0.5rem;
|
|
margin-top: 0.3rem;
|
|
}
|
|
.sorting_icon{
|
|
float:left;
|
|
width:100%;
|
|
height:40%;
|
|
}
|
|
.sorting_div .sorting_icon:first-child{
|
|
margin-bottom:10%;
|
|
}
|
|
.icon_top{
|
|
background:url("../images/trade/icon_jiage_up_n@3x.png") no-repeat center center;
|
|
background-size:100% 100%;
|
|
}
|
|
.icon_top.active{
|
|
background:url("../images/trade/icon_jiage_up@3x.png") no-repeat center center;
|
|
background-size:100% 100%;
|
|
}
|
|
.icon_bottom{
|
|
background:url("../images/trade/icon_jiage_n@3x.png") no-repeat center center;
|
|
background-size:100% 100%;
|
|
}
|
|
.icon_bottom.active{
|
|
background:url("../images/trade/icon_jiage_down@3x(1).png") no-repeat center center;
|
|
background-size:100% 100%;
|
|
}
|
|
.serch_go{
|
|
position: absolute;
|
|
right: 1rem;
|
|
top: 0.5rem;
|
|
padding: 0.3rem 2.6rem 0.3rem 0.5rem;
|
|
border-radius: 1rem;
|
|
border: 1px solid #dbdbdb;
|
|
color: #bab9be;
|
|
font-size:12px;
|
|
}
|
|
.icon_search{
|
|
position: absolute;
|
|
height: 1.1rem;
|
|
width: 1.1rem;
|
|
right: 1rem;
|
|
bottom: 0.5rem;
|
|
background:url("../images/trade/icon_search_n@3x.png") no-repeat center center;
|
|
background-size:100% 100%;
|
|
}
|
|
.col_17{
|
|
color:#171717;
|
|
}
|
|
.shortcut .trade_topul{
|
|
margin-bottom:0;
|
|
background-color:#fff;
|
|
width:100%;
|
|
}
|
|
.ul_fixed{
|
|
position: fixed;
|
|
top: 4.2rem;
|
|
left: 0px;
|
|
right: 0;
|
|
z-index: 10;
|
|
padding-bottom: 15px;
|
|
max-width: 640px;
|
|
}
|
|
.scroll2{
|
|
width:100%;
|
|
}
|
|
.div_fixed{
|
|
position:fixed;
|
|
top:7.6rem;
|
|
left:0px;
|
|
z-index:10;
|
|
padding-bottom:15px;
|
|
background-color:#fff;
|
|
border-top:8px solid rgb(238,238,238);
|
|
}
|
|
.no_data{
|
|
position:relative;
|
|
}
|
|
.nodata_content{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -4rem;
|
|
margin-left: -11rem;
|
|
width: 22rem;
|
|
height: 8rem;
|
|
text-align: center;
|
|
}
|
|
.nodata_img{
|
|
width:5rem;
|
|
height:5rem;
|
|
display:block;
|
|
margin:0 auto;
|
|
}
|
|
.nodata_txt{
|
|
height:3rem;
|
|
line-height:3rem;
|
|
}
|
|
|
|
/*搜索相关样式 begin!*/
|
|
.s_header{
|
|
position:fixed;
|
|
top:0;
|
|
left:0;right:0;
|
|
z-index:99;
|
|
width:100%;
|
|
height:3.7rem;
|
|
background-color:#fafafa;
|
|
border-bottom:3px solid #dedede;
|
|
max-width: 640px;
|
|
margin: 0 auto;
|
|
}
|
|
.s_wrap{
|
|
position:relative;
|
|
height:100%;
|
|
}
|
|
.s_searchbox{
|
|
height:100%;
|
|
margin-left:1.24rem;
|
|
margin-right:4.9rem;
|
|
}
|
|
.search_input{
|
|
/* background-color:#e7e7e7; */
|
|
/* border-radius:0.3rem; */
|
|
}
|
|
.cancle_box{
|
|
height:100%;
|
|
width:4.9rem;
|
|
position:absolute;
|
|
top:0;
|
|
font-size:1rem;
|
|
color:#5dbbef;
|
|
text-align:center;
|
|
right:0;
|
|
}
|
|
.table{
|
|
display: table;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
}
|
|
.s_iconbox{
|
|
height:100%;
|
|
width:3rem;
|
|
position:absolute;
|
|
top:0;
|
|
right:0;
|
|
display:block;
|
|
}
|
|
.s_searchbox .s_iconbox:first-child{
|
|
left:0;
|
|
}
|
|
.table-cell{
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
text-align:center;
|
|
position:relative;
|
|
}
|
|
.s_icon{
|
|
display:block;
|
|
width:1.3rem;
|
|
height:1.3rem;
|
|
margin-left: 0.8rem;
|
|
background:url("../images/trade/icon_search_n@3x.png") no-repeat center center;
|
|
background-size:100% 100%;
|
|
}
|
|
.s_icondel{
|
|
background:url("../images/trade/nav_search_delete.png");
|
|
background-size:100% 100%;
|
|
opacity:0;
|
|
visibility:hidden;
|
|
}
|
|
.s_iconbox.on .s_icondel{
|
|
opacity:1;
|
|
visibility:visible;
|
|
}
|
|
.s_inputgroup{
|
|
height:3rem;
|
|
background-color:#e7e7e7;
|
|
border-radius:0.3rem;
|
|
padding:0 3rem;
|
|
}
|
|
.s_txt{
|
|
height:100%;
|
|
width:100%;
|
|
background-color:transparent;
|
|
color:#2d2d2d;
|
|
}
|
|
/* 修改input placeholder的颜色 begin*/
|
|
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
|
|
/* WebKit browsers */
|
|
color: #bab9be;
|
|
}
|
|
input:-moz-placeholder, textarea:-moz-placeholder {
|
|
/* Mozilla Firefox 4 to 18 */
|
|
color: #bab9be;
|
|
}
|
|
input::-moz-placeholder, textarea::-moz-placeholder {
|
|
/* Mozilla Firefox 19+ */
|
|
color: #bab9be;
|
|
}
|
|
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
|
|
/* Internet Explorer 10+ */
|
|
color: #bab9be;
|
|
}
|
|
/*end 修改input placeholder的颜色 */
|
|
|
|
.trunker{
|
|
margin-top:3.7rem;
|
|
}
|
|
.s_inner {
|
|
position: relative;
|
|
margin: 0 auto;
|
|
max-width: 1200px;
|
|
}
|
|
.default_list{
|
|
padding:0 1.34rem;
|
|
}
|
|
.new_recommend {
|
|
padding: 1.8rem 0;
|
|
border-bottom:2px solid #ededed;
|
|
}
|
|
.recommend_tit{
|
|
position:relative;
|
|
color:#a1a1a1;
|
|
font-size:1.5rem;
|
|
}
|
|
.search_change{
|
|
position:absolute;
|
|
top:0;
|
|
right:0;
|
|
}
|
|
.icon_change{
|
|
position:absolute;
|
|
height:1.3rem;
|
|
width:1.3rem;
|
|
background:url("../images/trade/search_batch.png") no-repeat center center;
|
|
background-size:100% 100%;
|
|
margin-left: -1.6rem;
|
|
margin-top: 0.2rem;
|
|
}
|
|
.recommend_content{
|
|
padding-top:2.3rem;
|
|
}
|
|
/*swiper 相关样式 begin!*/
|
|
.swiper-container {
|
|
margin:0 auto;
|
|
position:relative;
|
|
z-index:1;
|
|
overflow:hidden;
|
|
}
|
|
/*end! swiper 相关样式*/
|
|
.slider_item{
|
|
width:96%;
|
|
margin:0 auto;
|
|
}
|
|
.a_img{
|
|
display:block;
|
|
height:5.8rem;
|
|
width:5.8rem;
|
|
margin:0 auto;
|
|
}
|
|
.a_txt{
|
|
display:block;
|
|
width:100%;
|
|
text-align:center;
|
|
font-size:1.42rem;
|
|
color:#545454;
|
|
margin-top:0.8rem;
|
|
}
|
|
.search_history{
|
|
padding:1.8rem 0;
|
|
}
|
|
.history_content{
|
|
padding:1.7rem 0;
|
|
}
|
|
.history_btn{
|
|
float:left;
|
|
padding:0.8rem 0.7rem;
|
|
background-color:#f4f4f4;
|
|
color:#414141;
|
|
border-radius:5px;
|
|
margin-bottom:1rem;
|
|
margin-left:1rem;
|
|
}
|
|
.hasdata_ul{
|
|
|
|
}
|
|
.hasdata_li{
|
|
width:100%;
|
|
height:3.4rem;
|
|
border-bottom:2px solid #fbfbfb;
|
|
}
|
|
.hasdata_a{
|
|
display:block;
|
|
height:100%;
|
|
width:100%;
|
|
padding:1rem 1.1rem 1.1rem;
|
|
position:relative;
|
|
}
|
|
.search_litit{
|
|
color:#2d2d2d;
|
|
}
|
|
.discount{
|
|
color:#9e9e9e;
|
|
position:absolute;
|
|
right:1.1rem;
|
|
}
|
|
.icon_empty{
|
|
position:absolute;
|
|
height:1.3rem;
|
|
width:1rem;
|
|
background:url("../images/trade/icon_qingkong@3x.png") no-repeat center center;
|
|
background-size:100% 100%;
|
|
margin-left: -1.6rem;
|
|
margin-top: 0.2rem;
|
|
}
|
|
/*end! 搜索相关样式*/
|
|
|
|
/* 交易页商品详情 begin!*/
|
|
.gd-t-list .pad_b0{
|
|
padding-bottom:0;
|
|
}
|
|
.buyer_reader{
|
|
position: absolute;
|
|
right: 1.5rem;
|
|
top: 50%;
|
|
margin-top: -1.2rem;
|
|
padding: .4rem .58rem;
|
|
color:#23bbf3;
|
|
font-size:1.5rem;
|
|
}
|
|
.go_back{
|
|
position:absolute;
|
|
left:0;
|
|
height:100%;
|
|
width:6rem;
|
|
}
|
|
.img_goback{
|
|
height:1.5rem;
|
|
width:1rem;
|
|
}
|
|
.xg_main{
|
|
margin-top:4.3rem;
|
|
background-color:#fff;
|
|
}
|
|
.xg_version{
|
|
padding: 1.3rem 0;
|
|
height: 6.7rem;
|
|
}
|
|
.a_version{
|
|
height:4rem;
|
|
width:4rem;
|
|
border-radius:0.8rem;
|
|
overflow:hidden;
|
|
display:block;
|
|
}
|
|
.img_version{
|
|
|
|
}
|
|
.meader_txt{
|
|
|
|
}
|
|
.meader_txt span{
|
|
|
|
}
|
|
.meader_txt span:not(:first-child):before{
|
|
content:"";
|
|
display:inline-block;
|
|
width:1px;
|
|
height:100%;
|
|
background-color:#ddd;
|
|
}
|
|
.a_download{
|
|
display:block;
|
|
width:3.9rem;
|
|
height:3.9rem;
|
|
line-height:3.9rem;
|
|
border-radius:50%;
|
|
border:1px solid #ececec;
|
|
color:#23bbf3;
|
|
text-align:center;
|
|
}
|
|
.border_div{
|
|
margin-left:-1.5rem;
|
|
margin-right:-1.5rem;
|
|
height:0.5rem;
|
|
background-color:#eee;
|
|
}
|
|
.trumpt{
|
|
padding: 1.3rem 0;
|
|
}
|
|
.trumpt_top{
|
|
margin-bottom:1.3rem;
|
|
}
|
|
.trumpt_tl{
|
|
float:left;
|
|
width:75%;
|
|
}
|
|
.trumpt_tr{
|
|
float:right;
|
|
width:25%;
|
|
text-align: center;
|
|
}
|
|
.trumpt_botm{
|
|
position:relative;
|
|
padding: 1.35rem 0 0;
|
|
}
|
|
.trump_des{
|
|
color:#8d8d8d;
|
|
}
|
|
.trump_abtn{
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
margin-top: -0.5rem;
|
|
padding: 0.3rem 0.5rem;
|
|
border-radius: 1rem;
|
|
color: #2f8def;
|
|
border: 1px solid currentColor;
|
|
}
|
|
.tl_t_tit{
|
|
color:#949494;
|
|
font-size:1.5rem;
|
|
}
|
|
.span_des{
|
|
color:#333;
|
|
font-size:1.5rem;
|
|
}
|
|
.trump_line{
|
|
height:2rem;
|
|
line-height:2rem;
|
|
}
|
|
.border_div1{
|
|
margin-left:-1.5rem;
|
|
margin-right:-1.5rem;
|
|
height:0.1rem;
|
|
background-color:#eee;
|
|
}
|
|
.price{
|
|
color: #626262;
|
|
font-size: 1.5rem;
|
|
}
|
|
.price_num{
|
|
color:#d94132;
|
|
font-size:1.7rem;
|
|
}
|
|
.screenshot{
|
|
padding:1.6rem 0 0;
|
|
}
|
|
.screenshot_h{
|
|
color:#333;
|
|
font-size:1.7rem;
|
|
margin-bottom:1.6rem;
|
|
}
|
|
.font_h{
|
|
color:#333;
|
|
font-size:1.7rem;
|
|
margin-bottom:0.4rem;
|
|
}
|
|
.screenshot_p{
|
|
margin-bottom:0.8rem;
|
|
}
|
|
.confirm_btn{
|
|
display:block;
|
|
width:80%;
|
|
height:3rem;
|
|
line-height:3rem;
|
|
background-color:#24bbf4;
|
|
color:#fff;
|
|
margin:0 auto;
|
|
border-radius:20px;
|
|
}
|
|
.p_img{
|
|
margin-bottom:1.5rem;
|
|
}
|
|
.p_img:last-child{
|
|
margin-bottom: 6rem;
|
|
}
|
|
/* 买家必读遮罩层样式 begin! */
|
|
.xg_mask{
|
|
position: fixed;
|
|
top: 0;
|
|
/* left: 0; */
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0,0,0,.4);
|
|
z-index: 99;
|
|
max-width: 640px;
|
|
margin: 0 auto;
|
|
}
|
|
.mast_read{
|
|
width:88%;
|
|
/* min-height:84%; */
|
|
background:#fff;
|
|
margin:0 auto;
|
|
border-radius:10px;
|
|
}
|
|
.read_toptit{
|
|
font-size:2rem;
|
|
padding:1.4rem;
|
|
background:url("../images/trade/bg@3x.png") no-repeat top left;
|
|
background-size:100% 100%;
|
|
color:#fff;
|
|
border-top-left-radius:10px;
|
|
border-top-right-radius:10px;
|
|
height: 4.7rem;
|
|
}
|
|
.read_main{
|
|
padding:1.85rem 1.8rem 1.6rem;
|
|
/* min-height: 38.6rem; */
|
|
box-sizing: border-box;
|
|
}
|
|
.h_tit{
|
|
width:100%;
|
|
text-align:left;
|
|
font-size:2rem;
|
|
color:#343434;
|
|
}
|
|
.flow_img{
|
|
width:100%;
|
|
height:8rem;
|
|
margin-top:1rem;
|
|
margin-bottom:3.4rem;
|
|
}
|
|
@media screen and (min-width: 768px) {
|
|
.flow_img {
|
|
height:13rem;
|
|
}
|
|
}
|
|
.instruct{
|
|
width: 100%;
|
|
margin-top: 1.5rem;
|
|
text-align: left;
|
|
}
|
|
.intruct_tab{
|
|
width:100%;
|
|
}
|
|
.intruct_tab tr td:first-child{
|
|
width:2rem;
|
|
vertical-align:top;
|
|
}
|
|
.intruct_tab tr td:not:(first-child){
|
|
color:#717171;
|
|
}
|
|
.instruct_num{
|
|
display:inline-block;
|
|
width:1.33rem;
|
|
height:1.33rem;
|
|
line-height:1.33rem;
|
|
color:#fff;
|
|
background-color:#999;
|
|
border-radius:50%;
|
|
text-align:center; font-size: 1rem;
|
|
}
|
|
/*美化复选框 begin!*/
|
|
.label_control input[type="checkbox"]{
|
|
position:absolute;
|
|
clip:rect(0,0,0,0);
|
|
}
|
|
.label_control{
|
|
float:left;
|
|
margin-left:0.6rem;
|
|
font-size:0;
|
|
line-height:2rem;
|
|
cursor:pointer;
|
|
color:;
|
|
}
|
|
.label_icon{
|
|
float: left;
|
|
width: 1.2rem;
|
|
height: 1.2rem;
|
|
margin-top:0.4rem;
|
|
margin-right: 4px;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-size:100%;
|
|
}
|
|
.label_txt{
|
|
overflow: hidden;
|
|
display: block;
|
|
font-size: 1.2rem;
|
|
color:#343434;
|
|
}
|
|
.label_control input[type="checkbox"] + .label_icon{
|
|
background-image:url('../images/trade/icon_weixuan_n.png');
|
|
}
|
|
.label_control input[type="checkbox"]:checked + .label_icon{
|
|
background-image:url('../images/trade/icon_xuanzhong_s.png');
|
|
}
|
|
/*end! 美化复选框*/
|
|
.readed{
|
|
width:100%;
|
|
margin-top:0.6rem;
|
|
}
|
|
.remember_btn{
|
|
display:block;
|
|
width:10rem;
|
|
height:2.9rem;
|
|
line-height:2.9rem;
|
|
margin:0 auto;
|
|
color:#fff;
|
|
background-color:#00b4ef;
|
|
border-radius:20px;
|
|
}
|
|
/*end! 买家必读遮罩层样式 */
|
|
/*购买成功 页面 begin!*/
|
|
.content_success{
|
|
background-color:#f2f2f2;
|
|
padding:1rem 1.15rem 2rem;
|
|
}
|
|
.success_div{
|
|
background-color:#fff;
|
|
width: 27.8rem;
|
|
height: 36.8rem;
|
|
border-radius:16px;
|
|
position:relative;
|
|
padding:2.6rem;
|
|
margin:0 auto;
|
|
}
|
|
.tip_div{
|
|
height:13rem;
|
|
width:88%;
|
|
position:absolute;
|
|
top:50%;
|
|
left:50%;
|
|
margin-top:-6.5rem;
|
|
margin-left:-44%;
|
|
text-align:center;
|
|
}
|
|
.tip_tith{
|
|
font-size: 1.5rem;
|
|
color: #000;
|
|
margin-bottom: 0.8em;
|
|
}
|
|
.tip_txtp{
|
|
font-size:1rem;
|
|
}
|
|
.success_img{
|
|
height:3.6rem;
|
|
width:3.6rem;
|
|
margin-bottom:1rem;
|
|
}
|
|
.s_download{
|
|
margin-top:3rem;
|
|
margin-bottom:1.5rem;
|
|
font-size:2rem;
|
|
}
|
|
.to_back{
|
|
color:#4e9fde;
|
|
font-size:1.5rem;
|
|
}
|
|
/*end! 购买成功 页面*/
|
|
/* 成交动态 begin! */
|
|
.deal_data{
|
|
margin-bottom:.7rem;
|
|
color:#4498f1;
|
|
}
|
|
.deal_ml{
|
|
margin-left:1.16rem;
|
|
}
|
|
.deal_img{
|
|
width:9.4rem;
|
|
height:5.67rem;
|
|
}
|
|
/*end! 成交动态 */
|
|
.div_ftf{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
z-index: 99;
|
|
padding: 1.2rem;
|
|
background-color: #f2f2f2;
|
|
max-width: 640px;
|
|
margin: 0 auto;
|
|
}
|
|
/*end! 交易页商品详情*/
|
|
.buysucc_div .succ_goback{
|
|
display: block;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
display: inline-block;
|
|
width: 3rem;
|
|
padding: 1.2rem;
|
|
}
|
|
.trade_topul img{
|
|
width: 53%;
|
|
}
|
|
.custom_media .media-body.ver_bot{
|
|
vertical-align: bottom;
|
|
}
|
|
.col_red{
|
|
color:red;
|
|
}
|
|
.txt_blue{
|
|
color:#19b1ea;
|
|
}
|
|
|
|
.audit_failed{
|
|
color:rgb(217, 65, 50);
|
|
margin-top: 0.3rem;
|
|
display: inline-block;
|
|
}
|
|
.failed_tips{
|
|
color: #999;
|
|
display: block;
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
.custom_media .media-heading{
|
|
font-size:12px;
|
|
}
|
|
@media screen and (max-width: 450px) {
|
|
.trade_caption {
|
|
font-size: 1.9rem;
|
|
}
|
|
}
|
|
@media screen and (max-width: 350px) {
|
|
.trade_caption {
|
|
font-size: 1.8rem;
|
|
}
|
|
}
|