0

components/custom-popup/custom-popup.vue

@@ -16,13 +16,13 @@
 			</main>
 			<footer v-if="footer">
 				<slot name="footer">
-					<!-- #ifdef APP-PLUS -->
+					<!-- #ifdef H5 -->
 					<view class="tc-foot">
 						<view @click="confirm(true)">确定</view>
 						<view @click="confirm(false)">取消</view>
 					</view>
 					<!-- #endif -->
-					<!-- #ifdef H5 -->
+					<!-- #ifdef APP-PLUS -->
 					<view class="tc-foot-c">
 						<view @click="confirm(false)">取消</view>
 						<view @click="confirm(true)">确定</view>
@@ -88,42 +88,92 @@
 		max-width: 86vw;
 		min-width: 60vw;
 		min-height: 100px;
-		padding: 20px;
+		box-sizing: border-box;
 
 		.tc-title {
-			font-size: 34rpx;
-			font-weight: bold;
+			text-align: center;
+			padding: 1em 1.6em 0.3em;
+			font-weight: 400;
+			font-size: 18px;
+			box-sizing: border-box;
+
 		}
 
 		.tc-content {
-			font-size: 30rpx;
-			margin: 10px 0;
+			min-height: 40px;
+			font-size: 15px;
+			line-height: 1.4;
+			word-wrap: break-word;
+			word-break: break-all;
+			white-space: pre-wrap;
+			color: #999999;
+			max-height: 400px;
+			overflow-x: hidden;
+			overflow-y: auto;
 		}
 
 		.tc-foot {
+			box-sizing: border-box;
 			display: flex;
 			justify-content: end;
+			float: right;
+			padding: 0px 20px 10px 20px;
 
-			&>view {
+			&>view {padding: 10px;
 				margin: 0 10px;
 				color: #2f7b9f;
 			}
 		}
 
 		.tc-foot-c {
-			display: flex;
 			text-align: center;
+			position: relative;
+			line-height: 48px;
+			font-size: 18px;
+			display: flex;
+
 
 			&>view {
-				border: 1px solid #f3f3f3;
+				display: block;
 				flex: 1;
-				line-height: 40px;
+				color: rgb(0, 0, 0);
+				text-decoration: none;
+				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+				position: relative;
+				cursor: pointer;
 			}
 
 			&>view:last-child {
-				color: #2f7b9f;
-				border-left: none;
+				color: rgb(0, 122, 255);
 			}
+
+			&>view:last-child:after {
+				content: ' ';
+				position: absolute;
+				left: 0;
+				top: 0;
+				width: 1px;
+				bottom: 0;
+				border-left: 1px solid #d5d5d6;
+				color: #d5d5d6;
+				transform-origin: 0 0;
+				transform: scaleX(0.5);
+			}
+
+
+		}
+
+		.tc-foot-c:after {
+			content: ' ';
+			position: absolute;
+			left: 0;
+			top: 0;
+			right: 0;
+			height: 1px;
+			border-top: 1px solid #d5d5d6;
+			color: #d5d5d6;
+			transform-origin: 0 0;
+			transform: scaleY(0.5);
 		}
 	}
 </style>