.app { width:99.5%; margin: 0 auto; background-color: #F7F5F5; padding: 15rpx 0; .top { width: 95%; height: 163rpx; // background: red; margin: 0 auto; justify-content: space-between; display: flex; .device { font-family: Source Han Sans CN; width: 48%; height: 163rpx; background: #FFFFFF; box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03); border-radius: 5rpx; position: relative; image { position: absolute; width: 33rpx; height: 32rpx; left: 5%; top: 10%; } .deviceitem { display: inline-block; position: absolute; left: 18%; top: 8%; font-size: 28rpx; font-weight: 500; color: #000000; // line-height: 38rpx; } .itemdata { position: absolute; font-size: 24rpx; font-weight: 400; color: #595959; top: 49%; left: 16%; } } } .body { position: relative; width: 95%; font-family: Source Han Sans CN; margin: 20rpx auto; justify-content: space-between; display: flex; flex-wrap: wrap; .item { width: 48%; height: 362rpx; background: #FFFFFF; box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03); border-radius: 5rpx; margin-bottom: 20rpx; position: relative; image { width: 140rpx; height: 155rpx; position: absolute; left: 49%; top: 50%; } .titletexts{ .bloodpressure{ width: 100%; position: absolute; left:6%; top:50%; .bloodpressureitem{ .colorone,.colortwo,.colorthree{ font-size: 21rpx; font-weight: 400; color: #595959; .dot{ width: 17rpx; height: 17rpx; background: #26A888; border-radius: 50%; margin-right: 10rpx; } } .colortwo{ .dot{ background: #FFA115; } } .colorthree{ .dot{ background: #FF756D; } } view{ display: inline-block; } .mmHg{ font-size: 21rpx; color: #595959; padding:0 20rpx 0 10rpx; } .bloodpressuretitle{ font-size: 41rpx; font-weight: 500; color: #000000; } } } .time{ position: absolute; top:22%; left:6%; font-size: 24rpx; color: #595959; } image{ width: 250rpx; height: 70rpx; position: absolute; left:50%; transform: translateX(-50%); } .bmi{ image{ width: 260rpx !important; } } .title{ position: absolute; bottom:20rpx; padding-left: 30rpx; text:nth-child(1) { font-size: 56rpx; font-weight: 500; color: #000000; vertical-align: baseline; } text:nth-child(2) { padding-left: 10rpx; font-size: 24rpx; font-weight: 400; color: #595959; vertical-align: baseline; } } } .itemtitle { position: absolute; font-size: 28rpx; font-weight: 500; color: #000000; top: 8%; left: 6%; } .itemtext { position: absolute; font-size: 24rpx; font-weight: 400; color: #595959; top: 32%; left: 6%; } .two { top: 22%; left: 6%; } } } }