Browse Source

上传文件至 'components'

zhangzhihong 2 months ago
parent
commit
03dcad62b8
1 changed files with 105 additions and 105 deletions
  1. 105 105
      components/oppositePhonenumberChoose.vue

+ 105 - 105
components/oppositePhonenumberChoose.vue

@@ -1,116 +1,116 @@
-<!-- 
-这里是自定义展示框组件,选择联系人姓名、电话号码
- 张志宏 
-24.9.28
-
- -->
+<!-- 
+这里是自定义展示框组件,选择联系人姓名、电话号码
+ 张志宏 
+24.9.28
+
+ -->
 <template>
- <view class="modal-container" v-if="visible">
-    <!-- 遮盖罩 -->
-    <view class="modal-overlay" @click="close"></view>
-    <!-- 提示栏内容 -->
-    <view class="modal-content">
-      <view class="modal-title">{{ title }}</view>
-      <view class="modal-body">
-		<slot></slot>
-		<!-- 插槽 -->
-	  </view>
-    </view>
+ <view class="modal-container" v-if="visible">
+    <!-- 遮盖罩 -->
+    <view class="modal-overlay" @click="close"></view>
+    <!-- 提示栏内容 -->
+    <view class="modal-content">
+      <view class="modal-title">{{ title }}</view>
+      <view class="modal-body">
+		<slot></slot>
+		<!-- 插槽 -->
+	  </view>
+    </view>
   </view>
 </template>
 
 <script>
 	export default {
 		name:"oppositePhonenumberChoose",
-		props: {
-		  visible: Boolean,
-		  title: String,
-		},
-		methods: {
-		  close() {
-		    this.$emit('update:visible', false);
-		  },
-		}
+		props: {
+		  visible: Boolean,
+		  title: String,
+		},
+		methods: {
+		  close() {
+		    this.$emit('update:visible', false);
+		  },
+		}
 
 	}
 </script>
 
-<style scoped>
-.modal-container {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	z-index: 10000;
-}
-/* 遮盖罩样式 */
-.modal-overlay {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background-color: rgba(0, 0, 0, 0.5);
-	z-index: 9990; /* 确保遮罩在内容下层 */
-}
-
-.modal-content {
-	position: fixed;
-	bottom: 0%;
-    padding: 20px;
-    border-radius: 8px;
-    width: 100%;
-    max-width: 90%;
-    background: #ffffff;
-    z-index: 9999; /* 确保遮罩在内容上层 */
-}
-
-.modal-title {
-	display: flex;
-	align-items: center;
-    justify-content: center;
-    font-size: 70rpx;
-    font-weight: bold;
-    margin-bottom: 5rpx;
-}
-
-.modal-body {
-	display: flex;
-	flex-direction: column;/*按列排布*/
-	align-items: center;
-	justify-content: center;
-	font-size: 70rpx;
-	padding: 5rpx;
-	margin: 5rpx;
-}
-
-.modal-buttons {
-	display: flex;
-	justify-content: space-between;
-}
-
-.confirm-btn, .cancel-btn {
-	flex: 1;
-	padding: 2px;
-	margin: 8px;
-	background: transparent; /* 背景透明 */
-	border-radius: 4px;
-	font-size: 36px;
-}
-
-.confirm-btn {
-	outline: none;
-	border: none;
-	color: red;
-}
-
-.cancel-btn {
-	border: none;
-	outline: none;
-	color: blue;
-}
-</style>
+<style scoped>
+.modal-container {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 10000;
+}
+/* 遮盖罩样式 */
+.modal-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	z-index: 9990; /* 确保遮罩在内容下层 */
+}
+
+.modal-content {
+	position: fixed;
+	bottom: 0%;
+    padding: 20px;
+    border-radius: 8px;
+    width: 100%;
+    max-width: 90%;
+    background: #ffffff;
+    z-index: 9999; /* 确保遮罩在内容上层 */
+}
+
+.modal-title {
+	display: flex;
+	align-items: center;
+    justify-content: center;
+    font-size: 70rpx;
+    font-weight: bold;
+    margin-bottom: 5rpx;
+}
+
+.modal-body {
+	display: flex;
+	flex-direction: column;/*按列排布*/
+	align-items: center;
+	justify-content: center;
+	font-size: 70rpx;
+	padding: 5rpx;
+	margin: 5rpx;
+}
+
+.modal-buttons {
+	display: flex;
+	justify-content: space-between;
+}
+
+.confirm-btn, .cancel-btn {
+	flex: 1;
+	padding: 2px;
+	margin: 8px;
+	background: transparent; /* 背景透明 */
+	border-radius: 4px;
+	font-size: 36px;
+}
+
+.confirm-btn {
+	outline: none;
+	border: none;
+	color: red;
+}
+
+.cancel-btn {
+	border: none;
+	outline: none;
+	color: blue;
+}
+</style>