<template> <view class="popup-con"> <text class="popup-header">{{title}}</text> <view class="popup-content"> <image-txt-popup :type="type" :changeImg="changeImg" @captchaImg="captchaImg"></image-txt-popup> </view> <view class="popup-footer"> <text class="popup-button" v-for="(item, index) in popBtn" :key="index" :style="{ color: item.color }">{{item.name}}</text> </view> </view> </template> <script> import imageTxtPopup from '@/components/uni-popup/image-txt-popup.vue' export default{ name: 'PopupCon', props: { // applyImageTxt申请试用 forgetImageTxt忘记密码 type: { type: String, default: '' }, title: { type: String, default: '标题' }, // 操作按钮 popBtn: { type: Array, default: function (){ return [] } }, changeImg: { type: Boolean, default: false } }, components: { imageTxtPopup }, data(){ return{} }, methods: { captchaImg(captcha, nowRandomCode){ this.$emit('captchaImg', captcha, nowRandomCode) } } } </script> <style lang="scss" scoped> .popup-con{ box-sizing: border-box; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 8upx 24upx rgba(0,0,0,.15); display: flex; flex-direction: column; padding: 30upx; width: 600upx; background-color: #fff; border-radius: 20upx; .popup-header{ margin-bottom: 20upx; text-align: center; font-weight: 700; font-size: 32upx; color: #333; line-height: 1.8; } .popup-content{ font-size: 28upx; color: #666; } .popup-footer{ display: flex; flex-direction: row; margin-top: 40upx; .popup-button{ flex: 1; text-align: center; font-size: 28upx; color: #3b4144; line-height: 1.8; } .popup-confirm{ color: #57a3f3; } } } </style>