sykl-hy/pages/stock/index/index.wxss

/* 用户 */
.user {
    text-align: right;
    box-sizing: border-box;
    position: relative;
    height: 150rpx;
}

.user-order {
    position: absolute;
    left: 55rpx;
    top: 30rpx;
    background-color: #e9eaef;
    width: 80rpx;
    height: 80rpx;
    text-align: center;
    border-radius: 50%;
    padding: 16rpx;
    box-sizing: border-box;
}

.user-order image {
    width: 100%;
    height: 100%;
}

.user-head {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    position: absolute;
    right: 30rpx;
    top: 30rpx;
    border: 2rpx solid #efefef;
}

.user-member {
    position: absolute;
    right: 80rpx;
    top: 84rpx;
    width: 30rpx;
    height: 30rpx;
    line-height: 26rpx;
    text-align: center;
    background-color: #1835c1;
    border-radius: 50%;
}

.user-member image {
    width: 16rpx;
    height: 16rpx;
}

.stock-top {
    padding: 0 30rpx 30rpx 60rpx;
    box-sizing: border-box;
}

.top-title {
    color: #82828e;
    margin-bottom: 20rpx;
    display: flex;
    line-height: 34rpx;
    font-size: 32rpx;
}

.top-title text {
    flex: 1;
}

.top-number {
    font-size: 72rpx;
    color: #333657;
}

.top-number image {
    width: 32rpx;
    height: 32rpx;
    margin-right: 10rpx;
}

.stock-label {
    padding-left: 60rpx;
    box-sizing: border-box;
    background: #ecf4f6;
    padding-top: 40rpx;
    height: 430rpx;
}

.stock-cont {
    background-color: #1d37e2;
    border-radius: 60rpx 0 0 60rpx;
    padding: 60rpx 30rpx 90rpx 90rpx;
    box-sizing: border-box;
    display: flex;
    position: relative;
}

.stock-item {
    color: #FFFFFF;
    flex: 2;
}

.stock-icon {
    width: 34rpx;
    height: 34rpx;
}

.stock-number {
    font-size: 50rpx;
    margin-bottom: 10rpx;

}

.stock-numbe text {
    font-size: 28rpx;
    padding-left: 10rpx;
}

.stock-tips {
    font-size: 28rpx;
    color: #8999ff;
}

.stock-btn {
    position: absolute;
    bottom: -40rpx;
    right: 0;
    display: flex;
}

.btn {
    background-color: #FFFFFF;
    height: 80rpx;
    line-height: 80rpx;
    margin-right: 30rpx;
    padding: 0 40rpx;
    border-radius: 30rpx;
}

.btn:first-child {
    color: #FFFFFF;
    background-color: #4d70fe;
    box-shadow: 0 3rpx 6rpx 2rpx rgba(79, 99, 226, .6);
}

.btn:last-child {
    color: #8a5400;
    background-color: #f9d093;
    box-shadow: 0 3rpx 6rpx 2rpx rgba(255, 192, 92, .6);
}

.btn text {
    padding-right: 10rpx;
}

.btn image {
    width: 24rpx;
    height: 24rpx;
}

.record {
    padding: 30rpx;
    box-sizing: border-box;
}

.title {
    display: flex;
}

.name {
    flex: 1;
    font-weight: 600;
    display: flex;
}

.name image {
    width: 42rpx;
    height: 42rpx;
    margin-right: 10rpx;
}

.more {
    font-size: 30rpx;
    color: #9d9d9d;
    line-height: 42rpx;
}

.more image {
    width: 24rpx;
    height: 24rpx;
}

.list {
    margin-top: 30rpx;
}

.item {
    border: 2rpx solid #f3f3f3;
    padding: 30rpx 30rpx 20rpx;
    box-sizing: border-box;
    border-radius: 30rpx;
    margin-bottom: 30rpx;
}

.item-top {
    display: flex;
    margin-bottom: 20rpx;
}

.item-name {
    flex: 1;
    font-weight: 600;
}

.item-number {
    color: #2487ff;
    font-weight: 600;
}

.item-number text {
    font-size: 26rpx;
    padding-left: 10rpx;
    font-weight: normal;
}

.item-label {
    line-height: 60rpx;
    display: flex;
    font-size: 28rpx;
    color: #9d9d9d;
}

.item-left {
    flex: 1;
}

.item-state {
    color: #eb504c;
}

.item-state.green {
    color: #03af03;
}

.item-state.yellow {
    color: #8a5400;
}

/* 暂无内容 */
.recommend-hint {
    text-align: center;
    color: #999;
    padding: 100rpx 0;
    font-size: 28rpx;
}

.recommend-hint image {
    width: 160rpx;
    height: 160rpx;
}