UI

pages/work/index.vue

@@ -1,46 +1,77 @@
 <template>
 	<view class="work-container">
 		<view style="work-banner">
-			<image src="../../static/images/work-banner.png" style="width: 100%;height:44vh"></image>
+			<image src="../../static/images/work-banner.png" style="width: 100%;height:43vh"></image>
 		</view>
 		<view class="grid-body">
 			<view class="Grid">
 				<view class="Grid-Item" v-for="item in List" :key="item.id" @click="navClick(item.id)"
 					hover-class="click-hover" hover-start-time="50" hover-stay-time="50">
-					<image src="../../static/images/mygc.png" style="width: 300rpx; height: 300rpx;" v-if="item.title == '民用工程'"></image>
-					<image src="../../static/images/gygc.png" style="width: 300rpx; height: 300rpx;" v-if="item.title == '工业工程'"></image>
-					<image src="../../static/images/szgc.png" style="width: 300rpx; height: 300rpx;" v-if="item.title == '市政工程'"></image>
-					<image src="../../static/images/wxzy.png" style="width: 300rpx; height: 300rpx;" v-if="item.title == '危险作业工程'"></image>
-					<image src="../../static/images/dggc.png" style="width: 300rpx; height: 300rpx;" v-if="item.title == '顶管工程'"></image>
-					<image src="../../static/images/jjgc.png" style="width: 300rpx; height: 300rpx;" v-if="item.title == '基建工程'"></image>
+					<image class="icon-item" src="../../static/images/mygc.png" v-if="item.title == '民用工程'"></image>
+					<image class="icon-item" src="../../static/images/gygc.png" v-if="item.title == '工业工程'"></image>
+					<image class="icon-item" src="../../static/images/szgc.png" v-if="item.title == '市政工程'"></image>
+					<image class="icon-item" src="../../static/images/wxzy.png" v-if="item.title == '危险作业工程'"></image>
+					<image class="icon-item" src="../../static/images/dggc.png" v-if="item.title == '顶管工程'"></image>
+					<image class="icon-item" src="../../static/images/jjgc.png" v-if="item.title == '基建工程'"></image>
 					<view class="GStitle">{{ item.title }}
 					</view>
 				</view>
 			</view>
 			<view v-if="showPopup" class="popup">
 				<view class="content">
-					<view class="line1">
-						<image></image>
+					<view class="line1 top40">
+						<view style="width: 61rpx;
+						color: #CEB98D;
+height: 61rpx;
+display: flex;
+justify-content: center;
+align-items: center;
+border: 3px solid #CEB98D;
+border-radius: 50%; margin-right: 20rpx;">旧</view>
 						<view>旧改工程</view>
 					</view>
-					<view class="line2" v-for="(item, index) in OldProjectList" :key="index">
-						<view @click="OldProject(item.dictValue)">{{item.dictLabel}}</view>
-
+					<view class="line2 btn-grp">
+						<view class="btn-grp-item" v-for="(item, index) in OldProjectList" :key="index"
+							@click="OldProject(item.dictValue)">
+							<image src="../../static/images/sn.png" class="line2-btn-big"
+								v-if="item.dictLabel == '室内工程'"></image>
+							<image src="../../static/images/ty.png" class="line2-btn-big"
+								v-if="item.dictLabel == '庭院工程'"></image>
+							<image src="../../static/images/jk.png" class="line2-btn-big" v-if="item.dictLabel == '架空'">
+							</image>
+							{{item.dictLabel}}
+						</view>
 					</view>
 					<view class="line1">
+						<view style="width: 61rpx;
+						color: #85c9c2;
+						height: 61rpx;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						border: 3px solid #85c9c2;
+						border-radius: 50%; margin-right: 20rpx;">旧</view>
 						<view>新建工程</view>
 					</view>
-					<view class="line2" v-for="(item, index) in NewProjectList" :key="index">
-						<view @click="NewProject(item.dictValue)">{{item.dictLabel}}</view>
-
+					<view class="line2 btn-grp">
+						<view class="btn-grp-item" v-for="(item, index) in NewProjectList" :key="index"
+							@click="NewProject(item.dictValue)">
+							<image src="../../static/images/sn2.png" class="line2-btn-big"
+								v-if="item.dictLabel == '室内工程'"></image>
+							<image src="../../static/images/ty2.png" class="line2-btn-big"
+								v-if="item.dictLabel == '庭院工程'"></image>
+							<image src="../../static/images/jk2.png" class="line2-btn-big"
+								v-if="item.dictLabel == '架空'"></image>
+							{{item.dictLabel}}
+						</view>
 					</view>
 				</view>
 
-				<view class="btn-group">
+			<!-- 	<view class="btn-group">
 					<view class="btn_position">
 						<view class="cancel" @click="showMinYong">取消</view>
 					</view>
-				</view>
+				</view> -->
 			</view>
 			<view v-if="showPopup" class="mask" @click="showMinYong"></view>
 		</view>
@@ -371,8 +402,8 @@
 		font-size: 14px;
 		line-height: inherit;
 	}
-	
-	.work-container{
+
+	.work-container {
 		display: flex;
 		flex-direction: column;
 	}
@@ -447,6 +478,8 @@
 		// padding: 20rpx;
 		box-sizing: border-box;
 		z-index: 999;
+		border-top-left-radius: 40rpx;
+		border-top-right-radius: 40rpx;
 	}
 
 	// 遮罩层
@@ -462,12 +495,37 @@
 
 	// 弹窗内容
 	.content {
+		.top40 {
+			margin-top: 30rpx;
+		}
+
 		.line1 {
-			background-color: #6ea8e7;
+
 			text-align: center;
+			display: flex;
+			justify-content: start;
+			align-items: center;
 			padding: 20rpx;
 		}
 
+		.btn-grp {
+			display: flex;
+
+			.btn-grp-item {
+				width: 33%;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+
+				.line2-btn-big {
+					width: 128rpx;
+					height: 128rpx;
+					margin-bottom: 10rpx;
+				}
+
+			}
+		}
+
 		.line2 {
 			padding: 20rpx;
 			// border-bottom: 1px solid black;
@@ -544,6 +602,9 @@
 		transition: all 0.3s ease;
 		transform: translateY(100%);
 		z-index: 1999;
+	       border-top-left-radius: 40rpx;
+	       border-top-right-radius: 40rpx;
+	   
 
 		.share-to {
 			width: 100%;
@@ -613,16 +674,20 @@
 		flex-wrap: wrap;
 		justify-content: space-between;
 		align-content: space-between;
-		background: #f7f7f7;
+		// background: #f7f7f7;
 		padding: 10rpx 0;
 
 		.Grid-Item {
 			width: 50%;
 			// height: 100px;
 			text-align: center;
-			border: 1rpx solid #ff0000;
+			// border: 1rpx solid #ff0000;
 			box-sizing: border-box;
 
+			.icon-item {
+				width: 220rpx;
+				height: 220rpx;
+			}
 
 			.GSimg {
 				width: 96rpx;
@@ -641,6 +706,8 @@
 				color: #000;
 				font-size: 24rpx;
 				text-align: center;
+				margin-top: -30rpx;
+				margin-bottom: 30rpx;
 			}
 		}
 	}