Browse Source

业主工会前端

张文飞 3 years ago
parent
commit
abac6f6aea
1 changed files with 130 additions and 30 deletions
  1. 130 30
      pages/homePage/homePage.vue

+ 130 - 30
pages/homePage/homePage.vue

@@ -125,41 +125,13 @@
 				<view class="content_tuiguang_city">
 					<view class="city_num" :style="{color:titleColor}"><countTo :startVal='0' :endVal='Number(userInfo.taskCount)' :duration='3000'></countTo>个</view>
 					<text class="city_num_desc" :style="{color:contentColor}">推广任务</text>
-					<view class="city_list" @click="showOptions(1)">
-						<text class="city_name" :style="{color:titleColor}">{{city}}</text>
-						<image class="city_more" src="https://dm.static.elab-plus.com/yezhu/icon_ios_back%402x.png"
-							mode=""></image>
-					</view>
-			
 				</view>
 				<view class="content_tuiguang_money"> 
 					<view class="money_num" :style="{color:color2}"> ¥<countTo :startVal='0' :decimals='2' :endVal='Number(userInfo.surplusTaskAmount)' :duration='1000'></countTo></view>
 					<text class="money_num_des" :style="{color:contentColor}">剩余任务金额</text>
-					<view class="money_list" @click="showOptions(2)">
-						<text class="money_name" :style="{color:titleColor}">{{typeName}}</text>
-						<image class="money_more" src="https://dm.static.elab-plus.com/yezhu/icon_ios_back%402x.png"
-							mode=""></image>
-					</view>
-					<image class="money_bg" src="https://dm.static.elab-plus.com/yezhu/icon_money_bg.png" mode="">
-					</image>
-				</view>
-			</view>
-			<view class="content_tuiguang" style="height: auto;" v-else>
-				<view class="content_tuiguang_city">
-					<view class="city_list" style="margin-top: 30rpx;margin-bottom: 30rpx;" @click="showOptions(1)">
-						<text class="city_name">{{city}}</text>
-						<image class="city_more" src="https://dm.static.elab-plus.com/yezhu/icon_ios_back%402x.png"
-							mode=""></image>
-					</view>
-				</view>
-				<view class="content_tuiguang_money" >
-					<view class="money_list" style="margin-top: 30rpx;margin-bottom: 30rpx;" @click="showOptions(2)">
-						<text class="money_name" >{{typeName}}</text>
-						<image class="money_more" src="https://dm.static.elab-plus.com/yezhu/icon_ios_back%402x.png"
-							mode=""></image>
-					</view>
 				</view>
 			</view>
+			
 			<view class="content_list">
 				<view class="content_title" :style="{color:titleColor}">
 					<view class="content_title_poi">
@@ -179,6 +151,23 @@
 						邀请好友
 					</view>
 				</view>
+				
+				<view class="content_tuiguang_new" style="height: auto;">
+					<view class="content_tuiguang_city">
+						<view class="city_list" style="margin-top: 30rpx;margin-bottom: 30rpx;" @click="showOptions(1)">
+							<text class="city_name">{{city}}</text>
+							<image class="city_more" src="https://dm.static.elab-plus.com/yezhu/icon_ios_back%402x.png"
+								mode=""></image>
+						</view>
+					</view>
+					<view class="content_tuiguang_money" >
+						<view class="money_list" style="margin-top: 30rpx;margin-bottom: 30rpx;" @click="showOptions(2)">
+							<text class="money_name" >{{typeName}}</text>
+							<image class="money_more" src="https://dm.static.elab-plus.com/yezhu/icon_ios_back%402x.png"
+								mode=""></image>
+						</view>
+					</view>
+				</view>
 
 				<view class="list_item" v-for="(item,index) in  houseList" :key='index'>
 					<view class="list_item" @click="goDetailAction(item,1)">
@@ -865,7 +854,7 @@
 			}
 
 			.content_tuiguang {
-				height: 220rpx;
+				height: 140rpx;
 				display: flex;
 				box-sizing: border-box;
 				background: #ffffff;
@@ -984,6 +973,117 @@
 				margin-left: 30rpx;
 				margin-right: 30rpx;
 				padding-bottom: 50rpx;
+				
+				.content_tuiguang_new{
+					display: flex;
+					box-sizing: border-box;
+					background: #ffffff;
+					border-radius: 16rpx;
+					margin-top: 20rpx;
+					padding-left: 40rpx;
+					padding-right: 40rpx;
+					justify-content: space-between;
+					position: relative;
+					.content_tuiguang_city {
+						display: flex;
+						flex-direction: column;
+						justify-content: center;
+						align-items: center;
+						width: 50%;
+					
+						.city_num {
+							font-size: 40rpx;
+							font-family: DIN Alternate, DIN Alternate-Bold;
+							font-weight: 700;
+							text-align: center;
+							color: #262626;
+					
+						}
+					
+						.city_num_desc {
+							font-size: 24rpx;
+							font-family: Verdana, Verdana-Regular;
+							font-weight: 400;
+							text-align: center;
+							color: #b1b1b1;
+						}
+					
+						.city_list {
+							display: flex;
+							justify-content: center;
+							margin-top: 52rpx;
+							align-items: center;
+					
+							.city_name {
+								font-size: 26rpx;
+								font-family: Verdana, Verdana-Regular;
+								font-weight: 400;
+								text-align: left;
+								color: #262626;
+							}
+					
+							.city_more {
+								width: 26rpx;
+								height: 26rpx;
+								margin-left: 8rpx;
+							}
+						}
+					}
+					
+					.content_tuiguang_money {
+						display: flex;
+						flex-direction: column;
+						justify-content: center;
+						align-items: center;
+						width: 50%;
+					
+						.money_num {
+							font-size: 40rpx;
+							font-family: DIN Alternate, DIN Alternate-Bold;
+							font-weight: 700;
+							text-align: center;
+							color: #fd8f3c;
+						}
+					
+						.money_num_des {
+							font-size: 24rpx;
+							font-family: Verdana, Verdana-Regular;
+							font-weight: 400;
+							text-align: center;
+							color: #b1b1b1;
+						}
+					
+						.money_list {
+							display: flex;
+							justify-content: center;
+							margin-top: 52rpx;
+							align-items: center;
+							z-index: 11;
+					
+							.money_name {
+								font-size: 26rpx;
+								font-family: Verdana, Verdana-Regular;
+								font-weight: 400;
+								text-align: left;
+								color: #262626;
+							}
+					
+							.money_more {
+								width: 26rpx;
+								height: 26rpx;
+								margin-left: 8rpx;
+							}
+						}
+					
+						.money_bg {
+							position: absolute;
+							right: 0rpx;
+							top: 0;
+							width: 220rpx;
+							height: 220rpx;
+						}
+					}
+				}
 
 				.content_title {
 					display: flex;