noNetwork.nvue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <view class="u-page">
  3. <u-no-network
  4. @disconnected="disconnected"
  5. @connected="connected"
  6. @retry="retry"
  7. ></u-no-network>
  8. <view class="u-content">
  9. <view class="u-content__circle">
  10. <u-icon
  11. name="checkbox-mark"
  12. color="#fff"
  13. size="30"
  14. ></u-icon>
  15. </view>
  16. <text class="u-content__normal">网络正常</text>
  17. <text class="u-content__tips">请您断开设备的WiFi和数据连接(或开启飞行模式),即可看到效果</text>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. export default {
  23. methods: {
  24. disconnected() {
  25. console.log('disconnected');
  26. },
  27. connected() {
  28. console.log('connected');
  29. },
  30. retry() {
  31. console.log('retry');
  32. }
  33. },
  34. }
  35. </script>
  36. <style lang="scss">
  37. .u-content {
  38. padding: 150px 60px 0;
  39. @include flex(column);
  40. align-items: center;
  41. justify-content: center;
  42. &__circle {
  43. background-color: $u-success;
  44. @include flex;
  45. border-radius: 100px;
  46. width: 60px;
  47. height: 60px;
  48. align-items: center;
  49. justify-content: center;
  50. }
  51. &__normal {
  52. font-size: 15px;
  53. color: $u-success;
  54. margin-top: 15px;
  55. }
  56. &__tips {
  57. color: $u-tips-color;
  58. font-size: 13px;
  59. margin-top: 15px;
  60. text-align: center;
  61. }
  62. }
  63. </style>