css裂缝,css/order/orderdetail.scss · 蓝色的の裂缝/yl - Gitee.com

.order_detail {

.order_cont {

width: 100%;

overflow: hidden;

padding: 60rpx 30rpx 80rpx 30rpx;

box-sizing: border-box;

.detail_cont {

width: 100%;

background-color: #fff;

border-radius: 10rpx;

.status_cont {

width: 100%;

height: 138rpx;

background: linear-gradient(270deg, #2aa7f9, #328efb);

border-top-left-radius: 10rpx;

border-top-right-radius: 10rpx;

display: flex;

flex-flow: column;

padding: 20rpx 30rpx;

box-sizing: border-box;

.status {

width: 100%;

display: flex;

justify-content: flex-start;

align-items: center;

margin-bottom: 20rpx;

.icon_box {

width: 50rpx;

height: 50rpx;

display: flex;

align-items: center;

.icon {

height: 45rpx;

}

}

.title {

font-size: 32rpx;

color: #FFFFFF;

margin-left: 20rpx;

}

}

.status_desc {

font-size: 24rpx;

color: #f0f0f0;

}

}

.consignee_cont {

width: 100%;

padding: 30rpx 30rpx 0 30rpx;

box-sizing: border-box;

.line {

width: 100%;

height: 6rpx;

background: url(../../static/img/my/order_line.png) repeat-x center;

background-size: auto 100%;

}

}

.product_cont {

width: 100%;

padding: 40rpx 30rpx 0 30rpx;

box-sizing: border-box;

.label_txt {

font-size: 32rpx;

margin-bottom: 30rpx;

}

.goods_list {

border-bottom: 1px dashed #ededed;

}

.product_item {

display: flex;

align-items: flex-start;

margin-bottom: 49rpx;

.img {

width: 180rpx;

min-width: 180rpx;

height: 180rpx;

border-radius: 10rpx;

background-color: #cce8cc;

margin-right: 29rpx;

}

.product_infor {

flex: auto;

.product_name {

color: #333;

font-size: 28rpx;

line-height: 44rpx;

display: -webkit-box;

word-break: break-all;

text-overflow: ellipsis;

overflow: hidden;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

}

.product_category {

width: 88rpx;

height: 46rpx;

background: #F7F7F7;

border-radius: 4rpx;

font-size: 20rpx;

color: #666;

line-height: 46rpx;

text-align: center;

margin-top: 22rpx;

}

.price_num {

display: flex;

justify-content: space-between;

align-items: center;

margin-top: 30rpx;

text {

color: #F23030;

font-size: 36rpx

}

.count {

font-size: 24rpx;

color: #666666;

}

}

}

}

}

.btn_box {

width: 100%;

height: 110rpx;

display: flex;

justify-content: flex-end;

align-items: center;

.btn {

width: 156rpx;

height: 52rpx;

font-size: 22rpx;

color: #fff;

line-height: 52rpx;

text-align: center;

border-radius: 23px;

box-sizing: border-box;

margin-left: 20rpx;

&.blue {

background: linear-gradient(90deg, #3FB3FF, #328EFB);

}

&.pierced {

line-height: 50rpx;

color: #328EFB;

border: 1px solid #328EFB;

}

}

}

}

.order_info {

width: 100%;

padding: 40rpx 30rpx;

box-sizing: border-box;

margin-top: 36rpx;

background-color: #fff;

border-radius: 10rpx;

.label_txt {

font-size: 32rpx;

margin-bottom: 30rpx;

}

.label {

font-size: 28rpx;

min-width: 150rpx;

}

.info_item {

width: 100%;

display: flex;

justify-content: space-between;

align-items: center;

padding-bottom: 40rpx;

box-sizing: border-box;

border-bottom: 1px solid #ededed;

}

.freight {

margin-bottom: 30rpx;

.price {

font-size: 26rpx;

color: #f23030;

}

}

.remark {

margin-bottom: 30rpx;

.cont {

font-size: 26rpx;

color: #b3b3b3;

flex: auto;

}

}

.total_price {

width: 100%;

display: flex;

justify-content: flex-end;

align-items: center;

border-bottom: 1px dashed #ededed;

padding-bottom: 30rpx;

margin-bottom: 30rpx;

box-sizing: border-box;

.symbol{

font-size: 24rpx;

color: #f23030;

}

.price{

font-size: 32rpx;

color: #f23030;

}

}

}

.desc_bar {

width: 100%;

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 30rpx;

.desc {

font-size: 28rpx;

color: #666666;

}

.btn_copy {

width: 80rpx;

height: 40rpx;

line-height: 40rpx;

background-color: #f6f6f6;

text-align: center;

border-radius: 5rpx;

font-size: 24rpx;

}

}

}

}

一键复制

编辑

原始数据

按行查看

历史