popup-con.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <template>
  2. <view class="popup-con">
  3. <text class="popup-header">{{title}}</text>
  4. <view class="popup-content">
  5. <image-txt-popup :type="type" :changeImg="changeImg" @captchaImg="captchaImg"></image-txt-popup>
  6. </view>
  7. <view class="popup-footer">
  8. <text class="popup-button" v-for="(item, index) in popBtn" :key="index" :style="{ color: item.color }">{{item.name}}</text>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. import imageTxtPopup from '@/components/uni-popup/image-txt-popup.vue'
  14. export default{
  15. name: 'PopupCon',
  16. props: {
  17. // applyImageTxt申请试用 forgetImageTxt忘记密码
  18. type: {
  19. type: String,
  20. default: ''
  21. },
  22. title: {
  23. type: String,
  24. default: '标题'
  25. },
  26. // 操作按钮
  27. popBtn: {
  28. type: Array,
  29. default: function (){
  30. return []
  31. }
  32. },
  33. changeImg: {
  34. type: Boolean,
  35. default: false
  36. }
  37. },
  38. components: {
  39. imageTxtPopup
  40. },
  41. data(){
  42. return{}
  43. },
  44. methods: {
  45. captchaImg(captcha, nowRandomCode){
  46. this.$emit('captchaImg', captcha, nowRandomCode)
  47. }
  48. }
  49. }
  50. </script>
  51. <style lang="scss" scoped>
  52. .popup-con{
  53. box-sizing: border-box;
  54. position: absolute;
  55. top: 50%;
  56. left: 50%;
  57. transform: translate(-50%, -50%);
  58. box-shadow: 0 8upx 24upx rgba(0,0,0,.15);
  59. display: flex;
  60. flex-direction: column;
  61. padding: 30upx;
  62. width: 600upx;
  63. background-color: #fff;
  64. border-radius: 20upx;
  65. .popup-header{
  66. margin-bottom: 20upx;
  67. text-align: center;
  68. font-weight: 700;
  69. font-size: 32upx;
  70. color: #333;
  71. line-height: 1.8;
  72. }
  73. .popup-content{
  74. font-size: 28upx;
  75. color: #666;
  76. }
  77. .popup-footer{
  78. display: flex;
  79. flex-direction: row;
  80. margin-top: 40upx;
  81. .popup-button{
  82. flex: 1;
  83. text-align: center;
  84. font-size: 28upx;
  85. color: #3b4144;
  86. line-height: 1.8;
  87. }
  88. .popup-confirm{
  89. color: #57a3f3;
  90. }
  91. }
  92. }
  93. </style>