popup.nvue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <template>
  2. <div class='wrap'>
  3. <div class='popup'>
  4. <text class='title'>提示</text>
  5. <div class="popup-content">
  6. <text class='content'>确认行程已结束?</text>
  7. </div>
  8. <div class="button-group">
  9. <text @click='close' class='button'>取消</text>
  10. <text @click='submit' class='button success'>确定</text>
  11. </div>
  12. </div>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. data() {
  18. return {
  19. }
  20. },
  21. methods: {
  22. close(){
  23. uni.$emit('page-popup-close', {
  24. content: false
  25. });
  26. },
  27. submit(){
  28. uni.$emit('page-popup-submit', {
  29. content: false
  30. });
  31. }
  32. }
  33. }
  34. </script>
  35. <style scoped>
  36. .wrap{
  37. padding:500rpx 50rpx;
  38. background:rgba(255,255,255,0.3);
  39. }
  40. .popup{
  41. background:#fff;
  42. border-radius: 20rpx;
  43. }
  44. .popup-content{
  45. padding: 20rpx;
  46. }
  47. .content{
  48. font-size:28rpx;
  49. padding:6rpx 0 36rpx;
  50. text-align:center;
  51. }
  52. .title{
  53. font-size:36rpx;
  54. padding:20rpx 20rpx;
  55. }
  56. .button-group{
  57. flex-direction: row; display:flex;
  58. justify-content: space-between;
  59. }
  60. .button{
  61. font-size:28rpx;
  62. text-align:center;
  63. flex:1;
  64. padding:20rpx;
  65. }
  66. .success{
  67. color:#409eff;
  68. border-bottom-right-radius:20rpx;
  69. }
  70. </style>