kmall-pt/wx-mall/pages/ucenter/index/index.wxss

page {
  height: 100%;
  width: 100%;
  background: #f4f4f4;
}

.container {
  background: #f4f4f4;
  height: auto;
  overflow: hidden;
  width: 100%;
}

.userinfo {
  /* background: url(https://meiping123.oss-cn-shenzhen.aliyuncs.com/upload/20171005/151134891a6a54.jpeg); */
  
  background: white;
  background-size: 750rpx auto;
  margin-bottom: 10rpx;
  /* position: relative; */
  display: flex;
  width: 750rpx;
  height: 350rpx;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  /* position: absolute; */
  /* margin-left: 20rpx; */
  display: block;
  width: 160rpx;
  height: 160rpx;
  margin: 40rpx;
  /* margin-top: 80rpx; */
  border-radius: 50%;
  /* box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); */
}

.user-box {
  position: absolute;
  /* left: 120px; */
  top: 130px;
  display: flex;
  width: 750rpx;
  height: 77px;
  flex-direction: column;
  align-items: center;
}

.userinfo-nickname {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  font-size: 14px;
}

.userlevel {
  font-size: 16px;
  color: red;
}

.order-menu {
  width: 100%;
  height: 145.5rpx;
  overflow: hidden;
  background: #fff;
  display: flex;
  margin-bottom: 5rpx;
}

.order-menu .item {
  width: 25%;
  height: 125.5rpx;
  text-align: center;
}

.order-menu .icon {
  margin: 20rpx auto 10rpx auto;
  display: block;
  height: 52.803rpx;
  width: 52.803rpx;
}

.order-menu .icon.unpay {
  background: url(https://meiping123.oss-cn-shenzhen.aliyuncs.com/upload/20171125/164007545da112.PNG) 0 0 no-repeat;
  background-size: 52.803rpx;
}

.order-menu .item .unpay-num {
  position: absolute;
  width: 30rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  top: 366rpx;
  left: 120rpx;
  background-color: #ff8902;
  color: #fff;
  border-radius: 50%;
  font-size: 20rpx;
}

.order-menu .item .untake-num {
  position: absolute;
  width: 30rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  top: 345rpx;
  left: 310rpx;
  background-color: #ff8902;
  color: #fff;
  border-radius: 50%;
  font-size: 20rpx;
}
.order-menu .item .uneval-num {
  position: absolute;
  width: 30rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  top: 345rpx;
  left: 495rpx;
  background-color: #ff8902;
  color: #fff;
  border-radius: 50%;
  font-size: 20rpx;
}

.order-menu .item .txt{
  font-size: 24rpx;
}

.order-menu .icon.delivery {
  background: url(https://meiping123.oss-cn-shenzhen.aliyuncs.com/upload/20171125/1641202989b821.PNG) 0 0 no-repeat;
  background-size: 52.803rpx;
}

.order-menu .icon.evaluate {
  background: url(https://meiping123.oss-cn-shenzhen.aliyuncs.com/upload/20171125/1641501919fe36.PNG) 0 0 no-repeat;
  background-size: 52.803rpx;
}

.order-menu .icon.order {
  background: url(https://meiping123.oss-cn-shenzhen.aliyuncs.com/upload/20171125/164215231bd4f5.PNG) 0 0 no-repeat;
  background-size: 52.803rpx;
}

.user-menu {
  width: 100%;
  height: auto;
  overflow: hidden;
  background: #fff;
}

.user-menu .item {
  float: left;
  width: 50%;
  height: 187.5rpx;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  text-align: center;
}

.user-menu .item .a {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.user-menu .item.no-border {
  border-right: 0;
}

.user-menu .item.item-bottom {
  border-bottom: none;
}

.user-menu .icon {
  margin: 0 auto;
  display: block;
  height: 53.803rpx;
  width: 53.803rpx;
  margin-bottom: 16rpx;
}

.user-menu .icon.order {
  background: url(https://meiping123.oss-cn-shenzhen.aliyuncs.com/upload/20171003/221417557156d6.png) 0 -437.5rpx no-repeat;
  background-size: 52.803rpx;
}

.user-menu .icon.coupon {
  background: url(https://meiping123.oss-cn-shenzhen.aliyuncs.com/upload/20171003/221417557156d6.png) 0 -62.4997rpx no-repeat;
  background-size: 52.803rpx;
}

.user-menu .icon.gift {
  background: url(https://meiping123.oss-cn-shenzhen.aliyuncs.com/upload/20171003/221417557156d6.png) 0 -187.5rpx no-repeat;
  background-size: 52.803rpx;
}

.user-menu .icon.address {
  background: url(https://meiping123.oss-cn-shenzhen.aliyuncs.com/upload/20171003/221417557156d6.png) 0 0 no-repeat;
  background-size: 52.803rpx;
}

.user-menu .icon.security {
  background: url(https://meiping123.oss-cn-shenzhen.aliyuncs.com/upload/20171125/161825787c3a8f.png) 0 0 no-repeat;
  background-size: 52.803rpx;
}

.user-menu .icon.kefu {
  background: url(https://meiping123.oss-cn-shenzhen.aliyuncs.com/upload/20171003/221417557156d6.png) 0 -500rpx no-repeat;
  background-size: 52.803rpx;
}

.user-menu .icon.help {
  background: url(https://meiping123.oss-cn-shenzhen.aliyuncs.com/upload/20171003/221417557156d6.png) 0 -250rpx no-repeat;
  background-size: 52.803rpx;
}

.user-menu .icon.feedback {
  background: url(https://meiping123.oss-cn-shenzhen.aliyuncs.com/upload/20171003/221417557156d6.png) 0 -125rpx no-repeat;
  background-size: 52.803rpx;
}

.user-menu .icon.share {
  background: url(https://meiping123.oss-cn-shenzhen.aliyuncs.com/upload/20171003/2216169438235f.png);
  background-size: 52.803rpx;
}

.user-menu .icon.collect {
  background: url(https://meiping123.oss-cn-shenzhen.aliyuncs.com/upload/20171003/2216577344ef34.png);
  background-size: 52.803rpx;
}

.user-menu .icon.group {
  background: url(https://meiping123.oss-cn-shenzhen.aliyuncs.com/upload/20171125/16201959108a77.png);
  background-size: 52.803rpx;
}

.user-menu .icon.help {
  background: url(https://meiping123.oss-cn-shenzhen.aliyuncs.com/upload/20171125/175808114fae3f.png);
  background-size: 52.803rpx;
}

.user-menu .icon.dispatch {
  background: url(https://meiping123.oss-cn-shenzhen.aliyuncs.com/upload/20171125/1751183415e246.png) no-repeat;
  background-size: 52.803rpx;
}

.user-menu .txt {
  display: block;
  height: 24rpx;
  width: 100%;
  font-size: 24rpx;
  color: rgb(136, 135, 135);
}

.logout {
  margin: 20rpx auto;
  height: 101rpx;
  width: 90%;
  line-height: 101rpx;
  text-align: center;
  color: #333;
  font-size: 30rpx;
}
.txt-info{
  display: block;
  font-size: 15px;
  color: red;
  height: 40rpx;
  border-radius: 50%;
}