123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- <template>
- <view class="modal-container" v-if="visible">
-
- <view class="modal-overlay" @click="close"></view>
-
- <scroll-view class="modal-content" @touchmove.stop>
- <view class="modal-title">{{ title }}</view>
- <view class="modal-body">
- <slot></slot>
-
-
- </view>
- </scroll-view>
- </view>
- </template>
- <script>
- export default {
- name:"oppositePhonenumberChoose",
- 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;
- overflow: hidden;
- }
- .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 {
- max-height: 60%;
- position: fixed;
- bottom: 0%;
- padding: 20px;
- border-radius: 8px;
- width: 100%;
- max-width: 90%;
- background: #f0efef;
- z-index: 9999;
- }
- .modal-title {
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 100rpx;
- font-weight: bold;
- margin-bottom: 5rpx;
- padding-bottom: 15rpx;
- }
- .modal-body {
- background-color: aqua;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: 70rpx;
- padding: 5rpx;
- margin: 5rpx;
- padding-bottom: 15rpx;
- }
- .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>
|