picModal.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <el-dialog :visible.sync='dialogVisible' width='90%' :close-on-click-modal='false' :show-close='false'>
  3. <rotation :rotationImg='rotationImg' style='height:600px;'></rotation>
  4. <span class='close' @click='close'>X</span>
  5. </el-dialog>
  6. </template>
  7. <script>
  8. export default {
  9. data() {
  10. return {
  11. dialogVisible: false,
  12. mode: 'top',
  13. rotationImg: [
  14. require('@/assets/imgs/survey_pop1.png'),
  15. require('@/assets/imgs/survey_pop2.png'),
  16. require('@/assets/imgs/survey_pop1.png')
  17. ]
  18. }
  19. },
  20. methods: {
  21. showModal() {
  22. this.dialogVisible = true
  23. },
  24. close() {
  25. this.dialogVisible = false
  26. }
  27. }
  28. }
  29. </script>
  30. <style lang="less" scoped>
  31. .close {
  32. display: block;
  33. position: absolute;
  34. right: -50px;
  35. font-size: 20px;
  36. color: #fff;
  37. top: -120px;
  38. z-index: 10;
  39. cursor: pointer;
  40. }
  41. </style>
  42. <style lang='less'>
  43. .el-dialog {
  44. height: 600px;
  45. position: relative;
  46. .el-dialog__header {
  47. padding: 0;
  48. }
  49. .el-dialog__body {
  50. padding: 0;
  51. }
  52. }
  53. </style>