zxz

pagesB/pages/login/step4.vue

@@ -26,12 +26,21 @@
 				</view>-->
 				<view class="jpLogin-case">
 					<view class="jpLogin-case-item">
+						<view class="jpLogin-case-text">
+							全身/半身
+						</view>
 						<u-image class="newsList-img" src="http://rccs.oss-cn-hangzhou.aliyuncs.com/jp-xqjy/user1.jpg" height="170" width="170" border-radius="10"></u-image>
 					</view>
 					<view class="jpLogin-case-item">
+						<view class="jpLogin-case-text">
+							背景干净
+						</view>
 						<u-image class="newsList-img" src="http://rccs.oss-cn-hangzhou.aliyuncs.com/jp-xqjy/user4.jpg" height="170" width="170" border-radius="10"></u-image>
 					</view>
 					<view class="jpLogin-case-item">
+						<view class="jpLogin-case-text">
+							光线柔和
+						</view>
 						<u-image class="newsList-img" src="http://rccs.oss-cn-hangzhou.aliyuncs.com/jp-xqjy/user3.jpg" height="170" width="170" border-radius="10"></u-image>
 					</view>
 				</view>
@@ -287,7 +296,26 @@
 	}
 	.jpLogin-case{
 		display: flex;
-		justify-content: space-between;
+		justify-content: space-between;
+		.jpLogin-case-item{
+			position: relative;
+			.jpLogin-case-text{
+				position: absolute;
+				background:rgba(0,0,0,0.5);
+				height: 20px;
+				z-index: 9;
+				border-radius: 0 0 5px 5px;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				color:#fff;
+				text-align: center;
+				font-size: 12px;
+				line-height: 20px;
+				backdrop-filter: blur(8px);
+				/* Note: backdrop-filter has minimal browser support */
+			}
+		}
 	}
 	.jpLogin-upload{
 		border: 1px dashed #FFA199;