/* pages/mine/mine.wxss */
page {
  background: #f8f9fd;
}
.header {
  width:100%;
  background-color: #181f27;
  position: fixed;
  top:0;
  /* box-shadow: 0 0 50px #000; */
}
.top {
  margin:0 auto; 
  display: flex;
  flex-direction:column;
  align-items: center;
  width:80%;
}
.top .background {
  height:150rpx;
  width:150rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 0 30rpx #888888;
}

.top .background .userAvatar{
  height: 150rpx;
  width: 150rpx;
  border-radius: 50%;
  overflow: hidden;
}

.top .userNickName {
  font-size: 130%;
  font-weight: lighter;
  color: #fff;
  margin-top:30rpx;
  margin-bottom:30rpx;
  /* letter-spacing:3px; */
}

.main {
  width:90%;
  margin: 0 auto;
  padding-top:330rpx;
}

.main .warn {
  text-align: center;
  width:100%;
  margin:0 auto;
}

.main .card {
  width:100%;
  background:#fff;
  margin-bottom: 50rpx;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 50rpx #edf1f4;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.main .card .left {
  width:20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin:15rpx 0 15rpx 0;
}

.main .card .left .num {
  font-size: 50rpx;
  font-weight: 100;
}

.main .card .right {
  margin:15rpx 0 15rpx 0;
  width:80%;
  display: flex;
  flex-direction: column;
  padding-left:30rpx;
  padding-right:-30rpx;
  border-left: 1px #eee solid;
}

.main .card .right .up {
  width:100%;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.main .card .right .down {
  width:100%;
  font-weight: lighter;
  font-size: 25rpx;
}