|
@@ -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>
|