<template> <view> <u-navbar title="抄表记录" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36' height='36'></u-navbar> <view class="cont"> <view class="card"> <view class="left"> <image src="https://api.ccttiot.com/smartmeter/img/static/uHVCBBThoBXvu4SBGzRU" mode=""></image> </view> <view class="card_cont"> <view class="text">2501号电表 抄表时剩余电量</view> <view class="txt"> 2023年04月01日 15:52 </view> </view> <view class="card_right"> 115.00度 </view> </view> </view> </view> </template> <script> export default { data() { return { bgc: { backgroundColor: "#F7FAFE", }, } }, methods: { } } </script> <style lang="scss" > page{ background: #F7FAFE; } .cont{ width: 672rpx; margin: 16rpx auto 0; display: flex; // justify-content: center; flex-wrap: wrap; .card{ padding-left: 44rpx ; padding-right: 38rpx; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; margin-top: 16rpx; width: 672rpx; height: 180rpx; background: #FFFFFF; box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1); border-radius: 30rpx; .left{ width: 37.33rpx; height: 50rpx; image{ width: 37.33rpx; height: 50rpx; } } .card_cont{ width: 310rpx; display: flex; flex-wrap: wrap; .text{ width: 310rpx; font-weight: 400; font-size: 24rpx; color: #262B37; } .txt{ width: 310rpx; font-weight: 400; font-size: 24rpx; color: #95989D; line-height: 64rpx; } } .card_right{ font-weight: 400; font-size: 32rpx; color: #262B37; } } } </style>