|
@@ -2,8 +2,13 @@
|
|
|
page {
|
|
|
background-color: #161616;
|
|
|
}
|
|
|
-.page {
|
|
|
- background-color: #161616;
|
|
|
+.page {
|
|
|
+ background-color: #161616;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ background: url('../../static/w3/bg.png');
|
|
|
+ background-size: 750rpx 1624rpx;
|
|
|
+ background-repeat: repeat-y;
|
|
|
}
|
|
|
.topbg {
|
|
|
}
|
|
@@ -23,7 +28,7 @@ page {
|
|
|
}
|
|
|
.myinfo {
|
|
|
display:flex;flex-direction: column;justify-content: flex-start;
|
|
|
- margin:30rpx 30rpx 60rpx;
|
|
|
+ margin:30rpx 30rpx 50rpx 30rpx;
|
|
|
width: 690rpx;
|
|
|
height: 232rpx;
|
|
|
background: #333333;
|
|
@@ -93,46 +98,156 @@ page {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- }
|
|
|
- .numlist2 {
|
|
|
- .item {
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.itemlist{
|
|
|
+
|
|
|
+ display: flex;flex-direction: row;justify-content: space-between;align-items: center;
|
|
|
+ height: 48rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ // background: #28292D;
|
|
|
+ // border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
|
+ .item{
|
|
|
+ display: flex;flex-direction: row;justify-content: space-between;align-items: center;
|
|
|
+ padding: 30rpx;
|
|
|
+ width: 334rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ background: #28292D;
|
|
|
+ border-radius: 28rpx 28rpx 28rpx 28rpx;
|
|
|
+ .left {
|
|
|
+ display: flex;justify-content: flex-start;flex-direction: row;
|
|
|
+ }
|
|
|
+ .arrow {
|
|
|
+ width:36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.friendList{
|
|
|
+ display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;
|
|
|
+ // height :780rpx;
|
|
|
+ width: 690rpx;
|
|
|
+ // margin-top: 34rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ .title{
|
|
|
display: flex;flex-direction: row;justify-content: space-between;align-items: center;
|
|
|
- height: 148rpx;
|
|
|
- background: #28292D;
|
|
|
- border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
|
- margin-top: 24rpx;
|
|
|
-
|
|
|
+ position: relative;
|
|
|
+ width:690rpx;
|
|
|
+ height: 90rpx;
|
|
|
+
|
|
|
+ // background: #28292D;
|
|
|
+ // background-size: 690rpx 90rpx;
|
|
|
+ margin: 34;
|
|
|
+ margin-top: 34rpx;
|
|
|
.left {
|
|
|
- display: flex;justify-content: center;padding:50rpx;
|
|
|
- .num {
|
|
|
- text-align: left;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;
|
|
|
- font-size: 40rpx;
|
|
|
- color: #FFFFFF;
|
|
|
+ display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
|
|
|
+ padding-left:28rpx;
|
|
|
+ }
|
|
|
|
|
|
-
|
|
|
- .data {
|
|
|
- font-size: 28rpx;color: #999999;margin-top: 12rpx;font-weight: normal;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .numlist2 {
|
|
|
+ display: flex;flex-direction: column;justify-content: space;align-items: flex-start;
|
|
|
+ width:690rpx;
|
|
|
+ // height: 560rpx;
|
|
|
+ background: #28292D;
|
|
|
+ // background-size: 690rpx 560rpx;
|
|
|
+ border-radius: 28rpx 28rpx 28rpx 28rpx;
|
|
|
+ // background: #ffffff;
|
|
|
|
|
|
+ .empty{
|
|
|
+ display: flex;flex-direction: column;justify-content: normal;align-items: center;
|
|
|
+ width:690rpx;
|
|
|
+ height: 560rpx;
|
|
|
+ .bg {
|
|
|
+ margin-top: 100rpx;
|
|
|
+ width:276rpx;
|
|
|
+ height: 276rpx;
|
|
|
+ background: url('../../static/w3/empty.png');
|
|
|
+ // background: #ffffff;
|
|
|
+ background-size: 276rpx 276rpx;
|
|
|
}
|
|
|
}
|
|
|
- .right{
|
|
|
- height: 40%;
|
|
|
- display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;
|
|
|
- .num1{
|
|
|
- padding-right:50rpx;
|
|
|
- text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 36rpx;
|
|
|
- color: #FE2D56;
|
|
|
- }
|
|
|
- .num2{
|
|
|
- color: #FFFFFF;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;flex-direction: column;justify-content: space-between;align-items: center;
|
|
|
+ height: 138rpx;
|
|
|
+ width:690rpx;
|
|
|
+ background: rgba(22,22,22,0);
|
|
|
+ border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
|
+
|
|
|
+
|
|
|
+ .info{
|
|
|
+ display: flex;flex-direction: row;justify-content: space-between;align-items: center;
|
|
|
+ height: 135rpx;
|
|
|
+ width:690rpx;
|
|
|
+ .left {
|
|
|
+ display: flex;flex-direction: row;justify-content: space-between;align-items: center;
|
|
|
+ .icon{
|
|
|
+ display: flex;flex-direction: column;justify-content: center;align-items: center;
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 40rpx 40rpx 40rpx 40rpx;
|
|
|
+ border: 2rpx solid #707070;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ .img{
|
|
|
+
|
|
|
+ // margin-left: 40rpx;
|
|
|
+ // height: 80rpx;
|
|
|
+ width: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nameList{
|
|
|
+ display: flex;justify-content: center;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ .num {
|
|
|
+ text-align: left;
|
|
|
+ display: flex;flex-direction: column;justify-content: flex-start;
|
|
|
+ .name{
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ display: flex;flex-direction: row;justify-content: flex-start;
|
|
|
+ .icon{
|
|
|
+ margin-left: 5rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .data {
|
|
|
+ font-size: 24rpx;color: #999999;margin-top: 12rpx;font-weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ height: 40%;
|
|
|
+ // display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;
|
|
|
+ display: flex;flex-direction: column;justify-content: center;
|
|
|
+ // text-align: right;
|
|
|
+ width: 152rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
|
+ border: 2rpx solid #707070;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ .txt{
|
|
|
+ text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;
|
|
|
+ // text-align: right;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ // margin-right: 0rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.blankHeight {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.blankHeight {
|
|
|
+
|
|
|
height:100rpx;
|
|
|
}
|