Kaynağa Gözat

样式修改

1004749546@qq.com 4 yıl önce
ebeveyn
işleme
1da0bf1c47

+ 4 - 4
pages.json

@@ -32,7 +32,7 @@
 			"path": "pages/userCenter/index",
 			"style": {
 				"navigationBarTitleText": "个人中心",
-				"navigationBarBackgroundColor": "#2ab4e5",
+				"navigationBarBackgroundColor": "#0DC55F",
 				"navigationBarTextStyle": "white"
 			}
 		},
@@ -68,14 +68,14 @@
 	},
 	"tabBar": {
 		"color": "#7A7E83",
-		"selectedColor": "#01c9b2",
+		"selectedColor": "##0DC55F",
 		"backgroundColor": "#ffffff",
 		"fontSize": "14px",
 		"list": [
 		{
 			"pagePath": "pages/index/index",
-			"iconPath": "static/tabbar/home.png",
-			"selectedIconPath": "static/tabbar/home-active.png",
+			"iconPath": "static/index/logo.png",
+			"selectedIconPath": "static/index/logo-active.png",
 			"text": "采集"
 		}, 
 		{

+ 67 - 30
pages/index/index.vue

@@ -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;

+ 14 - 7
pages/userCenter/index.vue

@@ -7,20 +7,21 @@
 				<u-image v-show="!hasLogin" src="/static/logo.png" width="100" height="100"></u-image>
 			</view>
 			<view class="user-info">
-				<view v-if="hasLogin" class="user-info-item">{{user.mobile||'--'}}</view>
-				<view v-if="hasLogin" class="user-info-item">注册时间:{{user.registerTime||'--'}}</view>
+				<view v-if="hasLogin" class="user-info-item">长庆石化小区</view>
+				<view v-if="hasLogin" class="user-info-item">李文 {{user.mobile}}</view>
 				<u-button v-else="!hasLogin" plain size="mini" shape="circle" @click="toLoginPage">立即登录</u-button>
 			</view>
-			<view v-if="hasLogin">
-				<u-icon name="arrow-right" color="#fff"></u-icon>
-			</view>
 		</view>
 		<!-- 列表 -->
 		<view class="user-list">
 			<u-cell-group>
 				<u-cell-item icon="file-text" icon-size="40" :icon-style="{color:'#ffaa00'}" index="0" @click="toPage" title="服务协议及隐私政策"></u-cell-item>
 				<u-cell-item  v-if="hasLogin" icon="lock" icon-size="38" :icon-style="{color:'#00aaff'}" index="1" @click="toPage" title="修改密码"></u-cell-item>
-				<u-cell-item  v-if="hasLogin" icon="file-text" icon-size="40" :icon-style="{color:'#ffaa00'}" index="3" @click="quitSys" title="退出登录"></u-cell-item>
+			</u-cell-group>
+		</view>
+		<view class="user-list quit">
+			<u-cell-group>
+				<u-cell-item  v-if="hasLogin" icon="minus-circle" icon-size="40" index="3" @click="quitSys" title="退出登录"></u-cell-item>
 			</u-cell-group>
 		</view>
 	</view>
@@ -136,7 +137,7 @@
 	.user-content{
 		width: 100%;
 		.user-head{
-			background: #2ab4e5;
+			background: #0DC55F;
 			display: flex;
 			align-items: center;
 			padding: 35rpx 55rpx;
@@ -147,6 +148,9 @@
 				.user-info-item{
 					margin: 10rpx 0;
 				}
+				:first-child{
+					font-size: 34upx;
+				}
 			}
 			.user-photo{
 				width: 100rpx;
@@ -186,6 +190,9 @@
 			margin: 20upx;
 			overflow: hidden;
 			box-shadow: 0upx 3upx 6upx #eee;
+			.quit{
+				margin-top: 20upx;
+			}
 		}
 		.user-btn{
 			padding: 85rpx 200rpx;

BIN
static/index/chuyu.png


BIN
static/index/jianzhu.png


BIN
static/index/logo-active.png


BIN
static/index/logo.png


BIN
static/index/other.png


BIN
static/tabbar/user-active.png


BIN
static/tabbar/user.png