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.
324 lines
5.6 KiB
324 lines
5.6 KiB
5 months ago
|
.page{
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
// height: 100%;
|
||
|
|
padding-bottom: 140rpx;
|
||
|
|
background-color: #f6f6f6;
|
||
|
|
}
|
||
|
|
.my-top{
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
// height: 420rpx;
|
||
|
|
/* #ifdef APP-PLUS */
|
||
|
|
// height: 460rpx;
|
||
|
|
/* #endif */
|
||
|
|
/* #ifdef MP */
|
||
|
|
// height: 520rpx;
|
||
|
|
/* #endif */
|
||
|
|
// background: linear-gradient(to left,$base,$assist-clor);
|
||
|
|
// background-color: #eaeaea;
|
||
|
|
// border-radius: 0 0 50% 50% / 0% 0% 15% 15%;
|
||
|
|
overflow: hidden;
|
||
|
|
.head{
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
z-index: 100;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
width: 100%;
|
||
|
|
height: 100rpx;
|
||
|
|
/* #ifdef APP-PLUS */
|
||
|
|
height: calc(100rpx + var(--status-bar-height));
|
||
|
|
padding-top: var(--status-bar-height);
|
||
|
|
/* #endif */
|
||
|
|
/* #ifdef MP */
|
||
|
|
height: calc(200rpx + var(--status-bar-height));
|
||
|
|
padding-top: calc(100rpx + var(--status-bar-height));
|
||
|
|
/* #endif */
|
||
|
|
background-color: rgba(255,255,255,0);
|
||
|
|
// transition: all 1s;
|
||
|
|
.portrait{
|
||
|
|
display: flex;
|
||
|
|
width: 60rpx;
|
||
|
|
height: 60rpx;
|
||
|
|
margin-left: 20rpx;
|
||
|
|
image{
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
border-radius: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.title{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
text{
|
||
|
|
color: #212121;
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.setting-mess{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
height: 100%;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
.setting{
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
width: 80rpx;
|
||
|
|
height: 100%;
|
||
|
|
text{
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 38rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.mess{
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
width: 80rpx;
|
||
|
|
height: 100%;
|
||
|
|
text{
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 38rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* 用户信息 */
|
||
|
|
.user-info{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 5%;
|
||
|
|
height: 120rpx;
|
||
|
|
margin-top: 160rpx;
|
||
|
|
/* #ifdef APP-PLUS */
|
||
|
|
margin-top: 130rpx;
|
||
|
|
/* #endif */
|
||
|
|
/* #ifdef MP */
|
||
|
|
margin-top: 200rpx;
|
||
|
|
/* #endif */
|
||
|
|
.portrait{
|
||
|
|
width: 120rpx;
|
||
|
|
height: 120rpx;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
position: relative;
|
||
|
|
border-radius: 50%;
|
||
|
|
overflow: hidden;
|
||
|
|
border: 4rpx solid #236030;
|
||
|
|
padding:4rpx;
|
||
|
|
image{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.right{
|
||
|
|
position: absolute;
|
||
|
|
z-index:999;
|
||
|
|
top:50%;
|
||
|
|
right:0px;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.info{
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
width: 70%;
|
||
|
|
height: 100%;
|
||
|
|
.nickname{
|
||
|
|
width: 100%;
|
||
|
|
padding: 10rpx 0;
|
||
|
|
text{
|
||
|
|
color: #236030;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* 订单信息 */
|
||
|
|
.order-info{
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-around;
|
||
|
|
height: 258rpx;
|
||
|
|
border-radius: 16rpx;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
margin:0 10px;
|
||
|
|
position:relative;
|
||
|
|
background-image: url('../../static/image/order-bg.png');
|
||
|
|
background-size: cover;
|
||
|
|
margin-top:30rpx;
|
||
|
|
.shopTop{
|
||
|
|
margin:0 26rpx;
|
||
|
|
padding:0 14rpx 14rpx 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
border-bottom:1px solid #eaeaea;
|
||
|
|
.star{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
text{
|
||
|
|
font-size:28rpx;
|
||
|
|
color:#ffffff;
|
||
|
|
margin-left:10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.shopItem{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-around;
|
||
|
|
}
|
||
|
|
.list{
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 20%;
|
||
|
|
height: 100%;
|
||
|
|
.icon{
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
image{
|
||
|
|
height:66rpx;
|
||
|
|
width:auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.num{
|
||
|
|
position: absolute;
|
||
|
|
right: -20rpx;
|
||
|
|
top: -20rpx;
|
||
|
|
padding: 4rpx;
|
||
|
|
font-size: 18rpx;
|
||
|
|
color: $base;
|
||
|
|
border: 2rpx solid $base;
|
||
|
|
border-radius: 100%;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.title{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-top: 10rpx;
|
||
|
|
text{
|
||
|
|
color: #ffffff;
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* 关注区 */
|
||
|
|
.focus-area{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
width: 100%;
|
||
|
|
height: 120rpx;
|
||
|
|
.list{
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
width: 33%;
|
||
|
|
height: 100%;
|
||
|
|
.num{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
text{
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.title{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-top: 5rpx;
|
||
|
|
text{
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 钱包 */
|
||
|
|
.wallet-info{
|
||
|
|
margin:0 10px;
|
||
|
|
margin-top:20rpx;
|
||
|
|
border-radius: 16rpx;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
|
||
|
|
height: 258rpx;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-around;
|
||
|
|
.fangmian{
|
||
|
|
margin:0 26rpx;
|
||
|
|
padding:0 14rpx 14rpx 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
border-bottom:1px solid #eaeaea;
|
||
|
|
color:#236030;
|
||
|
|
font-size:28rpx;
|
||
|
|
}
|
||
|
|
.infoContainer{
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-around;
|
||
|
|
}
|
||
|
|
.list{
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex: 1;
|
||
|
|
height: 100%;
|
||
|
|
.icon{
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
image{
|
||
|
|
height:66rpx;
|
||
|
|
width:auto;
|
||
|
|
}
|
||
|
|
.number{
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #212121;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.title{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-top: 10rpx;
|
||
|
|
text{
|
||
|
|
color: #333333;
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.card{
|
||
|
|
margin:0 10px;
|
||
|
|
margin-top:20rpx;
|
||
|
|
border-radius: 16rpx;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|