|
@@ -5,7 +5,21 @@
|
|
|
<text>2021-03-15至2021-06-02</text>
|
|
|
<u-image @click="openScreen=true" class="filter-img" width="36rpx" height="36rpx" src="/static/filter.png"></u-image>
|
|
|
</view>
|
|
|
- <text>总计:其它垃圾2000,厨余垃圾1000,建筑垃圾0。</text>
|
|
|
+ <view class="header-cont">
|
|
|
+ <view class="cont-item">
|
|
|
+ <text>其它垃圾</text>
|
|
|
+ <text class="other">1000kg</text>
|
|
|
+ </view>
|
|
|
+ <view class="cont-item">
|
|
|
+ <text>建筑垃圾</text>
|
|
|
+ <text class="jianzhu">1000kg</text>
|
|
|
+ </view>
|
|
|
+ <view class="cont-item">
|
|
|
+ <text>厨余垃圾</text>
|
|
|
+ <text class="chuyu">1000kg</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <text>总计:其它垃圾2000,厨余垃圾1000,建筑垃圾0。</text> -->
|
|
|
</view>
|
|
|
<scroll-view class="scroll-con" :scroll-top="scrollTop" scroll-y @scrolltolower="onreachBottom">
|
|
|
<!-- 列表数据 -->
|
|
@@ -14,22 +28,22 @@
|
|
|
<view>
|
|
|
<text>2020-02-23 15:12:30</text>
|
|
|
</view>
|
|
|
- <view>
|
|
|
- <span>查看详情</span>
|
|
|
- <u-icon name="arrow-right" size="28"></u-icon>
|
|
|
+ <view @click="intoPage()">
|
|
|
+ <span class="view">查看详情</span>
|
|
|
+ <u-icon name="arrow-right" color="#999999" size="28"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="cell-item-cont">
|
|
|
<view class="cont-item">
|
|
|
- <text>其它垃圾</text>
|
|
|
+ <u-image src="/static/index/other.png"></u-image>
|
|
|
<text>1000kg</text>
|
|
|
</view>
|
|
|
<view class="cont-item">
|
|
|
- <text>厨余垃圾</text>
|
|
|
+ <u-image src="/static/index/jianzhu.png"></u-image>
|
|
|
<text>1000kg</text>
|
|
|
</view>
|
|
|
<view class="cont-item">
|
|
|
- <text>建筑垃圾</text>
|
|
|
+ <u-image src="/static/index/chuyu.png"></u-image>
|
|
|
<text>1000kg</text>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -42,7 +56,7 @@
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
<view @click="intoPage()" class="footer">
|
|
|
- <u-icon name="edit-pen" size="30"></u-icon>
|
|
|
+ <!-- <u-icon name="edit-pen" size="30"></u-icon> -->
|
|
|
<text>垃圾数据录入</text>
|
|
|
</view>
|
|
|
<!-- 筛选弹框 -->
|
|
@@ -148,21 +162,45 @@
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
.header{
|
|
|
+ width: 100%;
|
|
|
background-color: #FFFFFF;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
border-radius: 15upx;
|
|
|
- padding: 20upx;
|
|
|
+ padding: 30upx;
|
|
|
box-shadow: 0upx 3upx 6upx #eee;
|
|
|
margin-bottom: 20upx;
|
|
|
- > text {
|
|
|
- line-height: 50upx;
|
|
|
- }
|
|
|
:first-child {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
+ .header-cont{
|
|
|
+ margin-top: 20upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ .cont-item{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ text{
|
|
|
+ line-height: 50upx;
|
|
|
+ }
|
|
|
+ text:last-child{
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 28upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .other{
|
|
|
+ color: #FB1E1E;
|
|
|
+ }
|
|
|
+ .chuyu{
|
|
|
+ color: #FCAE53;
|
|
|
+ }
|
|
|
+ .jianzhu{
|
|
|
+ color: #4EACFA;
|
|
|
+ }
|
|
|
+ }
|
|
|
.filter-img{
|
|
|
padding: 10upx;
|
|
|
}
|
|
@@ -185,7 +223,11 @@
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- border-bottom: 1px solid #e6e6e6;
|
|
|
+ // border-bottom: 1px solid #e6e6e6;
|
|
|
+ .view{
|
|
|
+ color: #999999;
|
|
|
+ margin-right: 12upx;
|
|
|
+ }
|
|
|
}
|
|
|
.cell-item-cont{
|
|
|
width: 100%;
|
|
@@ -198,18 +240,11 @@
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
width: 33%;
|
|
|
- border-right: 1px solid #e6e6e6;
|
|
|
+ // border-right: 1px solid #e6e6e6;
|
|
|
:first-child {
|
|
|
- padding: 26upx;
|
|
|
- width: 100upx;
|
|
|
- height: 100upx;
|
|
|
- background-color: red;
|
|
|
- border-radius: 50%;
|
|
|
- font-size: 24upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: #fff;
|
|
|
+ width: 120upx;
|
|
|
+ height: 120upx;
|
|
|
+ margin-bottom: 20upx;
|
|
|
}
|
|
|
}
|
|
|
:last-child {
|
|
@@ -220,14 +255,16 @@
|
|
|
}
|
|
|
.footer{
|
|
|
z-index: 9999;
|
|
|
- position: fixed;
|
|
|
- bottom: 80upx;
|
|
|
- width: 80%;
|
|
|
+ // position: absolute;
|
|
|
+ // bottom: 30upx;
|
|
|
+ // margin: 20upx;
|
|
|
+ width: 95%;
|
|
|
height: 80upx;
|
|
|
- background-color: red;
|
|
|
- opacity: 0.8;
|
|
|
- border-radius: 40upx;
|
|
|
+ background-color: #0DC55F;
|
|
|
+ opacity: 1;
|
|
|
+ border-radius: 50upx;
|
|
|
color: #fff;
|
|
|
+ font-size: 30rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|