fe / yohoblk-wap · Commits

Go to a project

Authored by 沈志敏
Commit ca6b0db0d7b1c6041f0d9604d7b58e0fd0cc93ec 2 parents 7e4ece44 265a888b

Merge branch 'feature/home' of git.yoho.cn:fe/yohoblk-wap into feature/home

Inline Side-by-side
Showing 3 changed files with 165 additions and 140 deletions
.yoho-coin{
.yoho-coin {
background: #f6f6f6;
padding-top: 20px;
.coin-total{
.coin-total {
padding: 35px 0;
background: $white;
text-align: center;
p:first-child{
p:first-child {
font-size: 34px;
}
p:nth-child(2){
p:nth-child(2) {
font-size: 78px;
color: #4a90e2;
line-height: 80px;
}
p:last-child{
p:last-child {
color: #b0b0b0;
font-size: 28px;
}
}
.coin-detail{
.coin-detail {
margin-top: 40px;
>p:first-child{
padding: 0 30px;
font-size: 28px;
color: #b0b0b0;
> p:first-child {
padding: 0 30px;
font-size: 28px;
color: #b0b0b0;
}
.coin-detail-list{
.coin-detail-list {
padding: 0 30px;
background: $white;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
li{
li {
display: flex;
padding: 20px 0;
border-bottom: 1px solid #eee;
&:last-child{
border-bottom: 0 none;
&:last-child {
border-bottom: 0 none;
}
}
.coin-source{
.coin-source {
flex: 1;
p{
p {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
... ... @@ -55,17 +57,18 @@
font-size: 34px;
margin-right: 60px;
}
time{
time {
display: block;
margin-top: 5px;
font-size: 28px;
color: #b0b0b0;
}
}
.coin-num{
.coin-num {
font-size: 34px;
line-height: 92px;
}
}
}
}
\ No newline at end of file
}
... ...
$black: #000;
$white: #fff;
.main-wrap{
.main-wrap {
background: #f6f6f6;
}
.order-detail{
>div{
background: $white;
padding: 0 30px;
.order-detail {
> div {
background: $white;
padding: 0 30px;
}
.order-status{
.order-status {
display: flex;
height: 80px;
line-height: 80px;
color: $white;
background: $black;
p:first-of-type{
p:first-of-type {
flex: 1;
font-size: 34px;
}
}
.order-code{
.order-code {
padding: 20px 30px;
margin-bottom: 20px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
p:first-of-type{
p:first-of-type {
font-size: 34px;
font-weight: 700;
}
p:last-of-type{
p:last-of-type {
font-size: 28px;
color: #b0b0b0;
}
}
.order-address{
.order-address {
position: relative;
padding: 20px 30px 27px;
margin-bottom: 20px;
border-top: 1px solid #eee;
word-wrap: break-word;
p:first-of-type{
p:first-of-type {
font-size: 32px;
font-weight: 700;
span{
span {
margin-right: 40px;
}
}
p:last-of-type{
p:last-of-type {
font-size: 28px;
color: #b0b0b0;
}
&:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 12px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAMBAMAAAAHcycSAAAAElBMVEXu7u7lnJrbSUbkm5qqqqpmZmaVABiUAAAAKUlEQVR4AWNAACElIDBgQAGuoUDggCrGCFKnjCrGAlIXAmINWgNHDQQAWjsd42E4szoAAAAASUVORK5CYII=") repeat-x;
border-bottom: 1px solid #eee;
&:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 12px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAMBAMAAAAHcycSAAAAElBMVEXu7u7lnJrbSUbkm5qqqqpmZmaVABiUAAAAKUlEQVR4AWNAACElIDBgQAGuoUDggCrGCFKnjCrGAlIXAmINWgNHDQQAWjsd42E4szoAAAAASUVORK5CYII=") repeat-x;
border-bottom: 1px solid #eee;
}
}
.order-goods{
.order-goods {
padding-top: 20px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
.goods-info{
.goods-info {
display: flex;
padding: 20px 0;
border-bottom: 1px solid #eee;
&:last-child{
border-bottom: 0 none;
&:last-child {
border-bottom: 0 none;
}
}
.img-box{
.img-box {
position: relative;
width: 98px;
height: 130px;
overflow: hidden;
label{
label {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 30px;
line-height: 30px;
background: rgba(0, 0, 0, .2);
background: rgba(0, 0, 0, 0.2);
color: $white;
text-align: center;
}
img{
img {
width: 100%;
height: 100%;
}
}
.goods-detail{
.goods-detail {
flex: 1;
margin: 0 20px;
font-size: 24px;
span{
span {
margin-right: 40px;
}
.name{
.name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
... ... @@ -118,50 +125,53 @@ $white: #fff;
overflow: hidden;
font-size: 28px;
}
.size{
.size {
color: #b0b0b0;
}
}
.goods-price{
.goods-price {
text-align: right;
p:first-of-type{
p:first-of-type {
font-size: 28px;
}
p:last-of-type{
p:last-of-type {
font-size: 30px;
color: #b0b0b0;
}
}
}
.order-amount{
.order-amount {
padding: 30px 20px;
margin-bottom: 20px;
border-bottom: 1px solid #eee;
text-align: right;
li{
li {
font-size: 28px;
label{
label {
display: inline-block;
width: 150px;
text-align: left;
color: #b0b0b0;
}
span{
span {
display: inline-block;
width:200px;
width: 200px;
text-align: left;
}
&:last-of-type{
&:last-of-type {
font-size: 34px;
label{
label {
color: $black;
}
}
}
}
.order-button{
.order-button {
position: fixed;
left: 0;
right: 0;
... ... @@ -171,7 +181,7 @@ $white: #fff;
border-top: 1px solid #eee;
text-align: right;
button{
button {
padding: 0 20px;
height: 68px;
line-height: 68px;
... ... @@ -182,24 +192,24 @@ $white: #fff;
background: $white;
font-size: 28px;
&.black{
width: 192px;
color: $white;
background: $black;
&.black {
width: 192px;
color: $white;
background: $black;
}
&.countdown{
color: $white;
background: $black;
&.countdown {
color: $white;
background: $black;
}
&.normal{
width: 188px;
padding: 0;
border: 1px solid $black;
color: $black;
&.normal {
width: 188px;
padding: 0;
border: 1px solid $black;
color: $black;
}
&:focus{
outline: none;
&:focus {
outline: none;
}
}
}
}
\ No newline at end of file
}
... ...
$black: #000;
$white: #fff;
.order-wrapper{
.order-wrapper {
background: #f6f6f6;
padding-top: 20px;
.order-item{
.order-item {
background: $white;
margin-top: 20px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
&:first-child{
margin-top: 0;
&:first-child {
margin-top: 0;
}
}
.order-detail{
.order-detail {
padding: 0 30px;
.order-code,.order-option,.goods-info{
display: flex;
>div{
box-sizing: border-box;
.order-code,
.order-option,
.goods-info {
display: flex;
> div {
box-sizing: border-box;
}
}
}
.order-code{
.order-code {
height: 88px;
font-size: 34px;
border-bottom: 1px solid #eee;
line-height: 88px;
>p:first-child{
flex: 1;
> p:first-child {
flex: 1;
}
}
.order-goods{
.goods-info{
.order-goods {
.goods-info {
position: relative;
padding: 20px 0;
border-bottom: 1px solid #eee;
&:last-child{
border-bottom: 0 none;
&:last-child {
border-bottom: 0 none;
}
>a{
> a {
position: absolute;
left:0;
right:0;
bottom:0;
top:0;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
opacity:0;
opacity: 0;
}
}
.img-box{
.img-box {
width: 98px;
height: 130px;
overflow: hidden;
img{
img {
width: 100%;
height: 100%;
}
}
.goods-detail{
.goods-detail {
flex: 1;
margin: 0 20px;
font-size: 24px;
span{
span {
margin-right: 40px;
}
.name{
.name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
/*height: 2.4em;*/
/* height: 2.4em; */
line-height: 1.25;
overflow: hidden;
font-size: 28px;
}
.size{
.size {
color: #b0b0b0;
}
}
.goods-price{
.goods-price {
text-align: right;
p:first-of-type{
p:first-of-type {
font-size: 28px;
}
p:last-of-type{
p:last-of-type {
font-size: 30px;
color: #b0b0b0;
}
}
}
.order-option{
.order-option {
padding: 30px 0;
border-top: 1px solid #eee;
.goods-total{
.goods-total {
flex: 1;
font-size: 28px;
line-height: 68px;
}
.options{
button{
.options {
button {
padding: 0 20px;
height: 68px;
line-height: 68px;
... ... @@ -118,47 +127,50 @@ $white: #fff;
background: $white;
font-size: 28px;
&.black{
width: 192px;
color: $white;
background: $black;
&.black {
width: 192px;
color: $white;
background: $black;
}
&.countdown{
color: $white;
background: $black;
&.countdown {
color: $white;
background: $black;
}
&.normal{
width: 188px;
padding: 0;
border: 1px solid $black;
color: $black;
&.normal {
width: 188px;
padding: 0;
border: 1px solid $black;
color: $black;
}
&:focus{
outline: none;
&:focus {
outline: none;
}
}
}
}
}
.return-goods{
.order-code{
.return-goods {
.order-code {
height: 128px;
.code-time{
.code-time {
flex: 1;
p:first-child{
p:first-child {
margin-top: 8px;
line-height: 60px;
}
p:nth-child(2){
p:nth-child(2) {
font-size: 28px;
line-height: 30px;
color: #b0b0b0;
}
}
>p:last-child{
line-height: 128px;
color: #4a90e2;
> p:last-child {
line-height: 128px;
color: #4a90e2;
}
}
}
\ No newline at end of file
}
... ...