sykl-hy/pages/record/reportSee/index.wxss

page {
    background: #f3f4f6;
    padding: 0 30rpx;
    box-sizing: border-box;
}

.top {
    background-color: #FFFFFF;
    border-radius: 30rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
}

.title {
    font-size: 38rpx;
    font-weight: 600;
    padding-top: 20rpx;
}

.other {
    display: flex;
    line-height: 90rpx;
}

.time {
    flex: 1;
    font-size: 34rpx;
}

.tips {
    display: flex;
    font-size: 26rpx;
}

.tips .item {
    padding-left: 20rpx;
    margin-left: 30rpx;
    position: relative;
}

.tips .item::after {
    position: absolute;
    content: '';
    left: 0;
    top: calc(50% - 5rpx);
    width: 10rpx;
    height: 10rpx;
    border-radius: 50%;
}

.tips .item:nth-child(1)::after {
    background-color: #cdc1ff;
}

.tips .item:nth-child(2)::after {
    background-color: #ffd689;
}

.tips .item:nth-child(3)::after {
    background-color: #ffb2c9;
}

.tips .item:nth-child(4)::after {
    background-color: #7c9bff;
}

.report {
    margin-top: 30rpx;
}

.title {
    display: flex;
    line-height: 38rpx;
    font-size: 36rpx;
    font-weight: 600;
}

.title image {
    width: 38rpx;
    height: 38rpx;
    margin-right: 10rpx;
}

.title text {
    font-weight: normal;
    font-size: 28rpx;
    padding-left: 10rpx;
    color: #9d9d9d;
}

.label {
    background-color: #FFFFFF;
    border-radius: 30rpx;
    padding: 30rpx;
    box-sizing: border-box;
    margin-bottom: 30rpx;
    position: relative;
}

.label:nth-child(1) {
    border: 2rpx solid #cdc1ff;
}

.label:nth-child(2) {
    border: 2rpx solid #ffd689;
}

.label:nth-child(3) {
    border: 2rpx solid #ffb2c9;
}

.label:nth-child(4) {
    border: 2rpx solid #7c9bff;
}

.enlarge {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    right: 30rpx;
    top: 28rpx;
}

.data {
    display: flex;

}

.number {
    flex: 3;
    padding-top: 30rpx;
    text-align: center;
    font-size: 28rpx;
    color: #9d9d9d;
}

.number-top {
    font-weight: 600;
    font-size: 36rpx;
    margin-bottom: 5rpx;
}

.number-top.active {
    color: #000000;
}

.number-top text {
    color: green;
}

.number-top text.red {
    color: red;
}

.number-top image {
    width: 32rpx;
    height: 32rpx;
    vertical-align: -3rpx;
    padding-left: 5rpx;
}

.photo {
    width: 120rpx;
    height: 120rpx;
    position: relative;
}

.photo image {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.photo text {
    height: 40rpx;
    line-height: 40rpx;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 9;
    background-color: rgba(0, 0, 0, .5);
    color: #FFFFFF;
    font-size: 16rpx;
    text-align: center;
}

.tool {
    background-color: #FFFFFF;
    border-radius: 30rpx;
    padding: 30rpx;
    box-sizing: border-box;
    display: flex;
}

.tool .item {
    flex: 2;
    display: flex;
    padding-left: 20rpx;
}

.tool .item:last-child {
    margin-left: 20rpx;
    padding-left: 50rpx;
    box-sizing: border-box;
    position: relative;
    border-left: 2rpx solid #e2e2e2;
}

.tool .item image {
    width: 48rpx;
    height: 48rpx;
    margin-right: 20rpx;
    margin-top: 20rpx;
}

.tool .item .name {
    font-weight: 600;
}

.tool .item .name text {
    font-weight: normal;
    font-size: 26rpx;
    color: #9d9d9d;
    display: block;
    margin-top: 10rpx;
}

.analyse-btn {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 9;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #FFFFFF;
}

.analyse-btn .btn {
    height: 90rpx;
    line-height: 90rpx;
    background-color: #1d37e2;
    text-align: center;
    color: #FFFFFF;
    border-radius: 10rpx;
}

.space {
    border-bottom: transparent 140rpx solid;
    margin-top: 30rpx;
}