金诚优选前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

601 lines
11 KiB

@import '../../../common/css/global';
#call{
padding: 10px 15px;
background: #FFFFFF;
.call-box{
position: relative;
border-radius: 6px;
overflow: hidden;
image{
display: block;
width: 100%;
}
.name{
position: absolute;
bottom: 0;
width: 100%;
padding: 5px 15px;
background: rgba(255,255,255,.7);
}
}
.time-box {
background: #393939;
padding: 5px 12px;
box-sizing: border-box;
color: #FFFFFF;
&.active{
background: #FE4545;
}
}
.call-user{
font-size: 12px;
display: flex;
align-items: center;
background: #FBF6DC;
height: 30px;
line-height: 30px;
margin: 20px 0;
border-radius: 30px 0 0 30px;
overflow: hidden;
span{
color: #FC6A00;
}
image{
width: 30px;
height: 30px;
border-radius: 100%;
overflow: hidden;
}
.call-status{
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
padding-right: 15px;
margin-left: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.receive{
color: @globalColor;
}
}
}
.no-active {
color: #FFFFFF;
padding:8px 0;
border-radius:30px;
background: #b4b4b4;
text-align: center;
margin-bottom: 10px;
&.get {
background: @mainColor;
}
}
.share-box{
display: flex;
align-items: center;
font-size: 16px;
color: @globalColor;
text-align:center;
margin-bottom: 20px;
button{
flex: 1;
padding: 0;
border: 1px solid @mainColor;
border-radius:30px;
background: #FFFFFF;
line-height: normal;
font-size: 16px;
height: 43px;
line-height: 43px;
color: @mainColor;
&:after {
border: none;
}
}
view{
flex: 1;
padding: 8px 0;
border: 1px solid @mainColor;
border-radius:30px;
&.friends{
margin-left: 18px;
background: @mainColor;
color: #FFFFFF;
border: none;
}
}
}
.call-num{
padding-bottom: 1px;
.text{
font-size: 12px;
color: #9B9B9B;
text-align: center;
padding-bottom: 10px;
}
.item-box{
margin: 8px -8px;
.call-num-item{
display: inline-block;
width: 12.5%;
height:21px;
padding: 0 8px;
margin: 5px 0;
.info{
width: 100%;
height: 100%;
display: inline-block;
background:#F3F3F3;
border-radius:100%;
overflow: hidden;
&.border{
border:1px dashed #C0C4CC;
}
image{
width: 100%;
height: 100%;
}
}
}
}
.text-info{
font-size: 12px;
color: #9B9B9B;
text-align: right;
padding-top: 7px;
}
}
.home{
position: fixed;
top: 10px;
right: 0;
width: 75px;
line-height: 25px;
text-align: center;
background: #F3F3F3;
color: #9B9B9B;
font-size: 12px;
border-radius: 2px;
i{
font-size: 12px;
margin-right: 5px;
}
}
}
.maks{
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
z-index: 40;
opacity: 1;
transition: opacity .3s ease;
display: none;
&.cur{
display: block;
}
}
/*选取规格部分*/
.select_goods_container {
background: #ffffff;
position: relative;
z-index:100;
.select_goods_cloese {
position: absolute;
top:12px;
right:10px;
width:20px;
height:20px;
background: transparent;
z-index:4;
overflow:visible;
}
.select_goods_cloese:before{
position: absolute;
top:9px;
left:-1px;
content: '';
width:28px;
height:2px;
background: #2e2e2e;
transform: rotate(45deg) ;
}
.select_goods_cloese:after{
top:9px;
left:-1px;
position: absolute;
content: '';
width:28px;
height:2px;
background: #2e2e2e;
transform: rotate(-45deg);
}
.select_goods_header{
display: flex;
align-items: center;
position: relative;
height: 60px;
.img_box {
position: absolute;
left: 10px;
bottom: 10px;
width: 78px;
height: 78px;
border: 1px solid #e5e5e5;
background: #f9f9f9;
overflow: hidden;
image {
width:78px;
height:78px;
object-fit: fill;
}
}
.price_item {
font-size:18px;
margin-left:20px;
height:100%;
margin-left: 100px;
display:-webkit-flex;
flex-direction: column;
justify-content: center;
text {
display: block;
text-align: left;
}
text:nth-child(1){
font-weight:bold;
color:#ee2b1d;
}
text:nth-child(2){
font-size:14px;
color:#6c6c6c;
text-indent:3px
}
}
}
.select_spec {
font-size: 12px;
padding: 12px 8px 50px 8px;
.spec_line {
display: flex;
margin-bottom: 15px;
.spec_title {
padding-right: 11px;
color: #c4c4c4;
width: 50px;
line-height: 35px;
}
.spec_list {
display: block;
line-height:35px;
color:#959595;
font-size:15px;
}
.spec_block {
display: inline-block;
margin-top: 10px;
margin-right: 10px;
.spec_text {
display: block;
padding: 0 7px;
height: 33px;
line-height: 33px;
min-width: 33px;
border: 1px solid #DDDDDD;
text-align: center;
font-size: 12px;
position: relative;
.border-color {
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border: 3px solid @mainColor;
}
}
image {
height: 100%;
width: 100%;
}
.spec_icon {
width: 35px;
height: 35px;
padding: 0;
}
/*&.active text {
&:before {
content: '';
position: absolute;
border: 3px solid @globalColor;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
}
}*/
&.disabled text {
border: none;
margin: 1px;
&:before {
content: '';
position: absolute;
background-color: #eee;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
opacity: 0.6;
}
&:after {
content: '';
position: absolute;
border: 3px dashed #cfcfcf;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
}
}
}
.num_title {
padding-right: 11px;
color: #c4c4c4;
width: 50px;
line-height: 30px;
}
.num_value {
display: flex;
font-size: 0;
text {
display: block;
border: 1px solid #e8e8e8;
text-align: center;
min-width: 28px;
width: 28px;
height: 28px;
line-height: 28px;
font-size: 12px;
&.store {
width: auto;
border-color: #ffffff;
margin-left: 10px;
}
}
input {
display: block;
border: none;
height: 100%;
width: 100%;
text-align: center;
outline: none;
font-size: 12px;
}
.none_border {
width: 30px;
border:1px solid #e8e8e8;
}
}
}
}
}
.detail-popup {
width:100%;
position: fixed;
left: 0;
bottom: -55px;
z-index: 51;
transform:translate3d(0,100,0);
/*选取规格部分*/
.select_spec {
font-size: 12px;
padding: 12px 8px 50px 8px;
.spec_line {
display: flex;
margin-bottom: 15px;
.spec_title {
padding-right: 11px;
color: #c4c4c4;
width: 50px;
line-height: 35px;
}
.spec_list {
display: block;
line-height:35px;
color:#959595;
font-size:15px;
}
.spec_value {
flex: 1;
font-size: 0;
margin-top: -10px;
view{
overflow: hidden;
}
}
.spec_block {
display: inline-block;
margin-top: 10px;
margin-right: 10px;
text {
display: block;
padding: 0 7px;
height: 33px;
line-height: 33px;
min-width: 20px;
border: 1px solid #DDDDDD;
text-align: center;
font-size: 12px;
position: relative;
}
image {
height: 100%;
width: 100%;
}
/*&.active view {
&:before {
content: '';
position: absolute;
border: 3px solid @globalColor;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
}
}*/
&.disabled view {
border: none;
margin: 1px;
&:before {
content: '';
position: absolute;
background-color: #eee;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
opacity: 0.6;
}
&:after {
content: '';
position: absolute;
border: 3px dashed #cfcfcf;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
}
}
}
.num_title {
padding-right: 11px;
color: #c4c4c4;
width: 50px;
line-height: 30px;
}
.purchase{
line-height: 30px;
color:#aaaaaa;
margin-left: 10px;
}
//.num_value {
// display: flex;
// flex: 1;
// font-size: 0;
//
// text {
// display: block;
// border: 1px solid #e8e8e8;
// text-align: center;
// min-width: 28px;
// width: 28px;
// height: 28px;
// line-height: 28px;
// font-size: 12px;
//
// &.store {
// width: auto;
// border-color: #ffffff;
// margin-left: 10px;
// }
// }
//
// input {
// display: block;
// border: none;
// height: 100%;
// width: 100%;
// text-align: center;
// outline: none;
// }
//
// .none_border {
// width:50px;
// border-left: none;
// border-right: none;
// }
//}
}
.button {
height: 50px;
line-height: 50px;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-radius: 0;
background: @mainColor;
&.disabled {
background: #C2C2C2;
}
}
}
}