modal.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <template>
  2. <view class="modal-page" v-show="showModal">
  3. <view class="modal-box">
  4. <image class="pic" src="../../../static/hint.png"></image>
  5. <text class="text">您的分配工作量较大,建议使用批量分配功能</text>
  6. <view class="btn" @click="hide">
  7. <text class="btn-text">确定</text>
  8. </view>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. //提示弹框
  14. export default {
  15. data() {
  16. return {
  17. showModal:false,//是否显示弹框
  18. }
  19. },
  20. methods: {
  21. show(){
  22. this.showModal=true;
  23. },
  24. hide(){
  25. this.showModal=false;
  26. }
  27. },
  28. }
  29. </script>
  30. <style lang="less">
  31. .modal-page{
  32. height: 100%;
  33. width: 100%;
  34. position: fixed;
  35. top: 0rpx;
  36. left: 0rpx;
  37. background: rgba(0,0,0,0.5);
  38. .modal-box{
  39. height: 317.5rpx;
  40. width: 562.5rpx;
  41. background: #FFFFFF;
  42. border-radius: 24px;
  43. overflow: hidden;
  44. position: fixed;
  45. top: 441.25rpx;
  46. left: 93.75rpx;
  47. .pic{
  48. height: 80rpx;
  49. width: 80rpx;
  50. position: absolute;
  51. top: 50rpx;
  52. left: 241.25rpx;
  53. }
  54. .text{
  55. font-size: 22.5rpx;
  56. font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  57. font-weight: 400;
  58. color: #292C33;
  59. position: absolute;
  60. top: 170rpx;
  61. left: 56.25rpx;
  62. }
  63. .btn{
  64. height: 75rpx;
  65. width: 562.5rpx;
  66. background: #3377FF;
  67. position: absolute;
  68. bottom: 0rpx;
  69. text-align: center;
  70. .btn-text{
  71. font-size: 22.5rpx;
  72. font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  73. font-weight: 400;
  74. color: #FFFFFF;
  75. line-height: 75rpx;
  76. }
  77. }
  78. }
  79. }
  80. </style>