apps.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <template name="apps">
  2. <view>
  3. <cu-custom bgColor="bg-blue">
  4. <block slot="content"> 应用</block>
  5. </cu-custom>
  6. <scroll-view scroll-y class="page my-app">
  7. <view class="grid col-2 padding-sm">
  8. <view class="padding-sm">
  9. <navigator hover-class="none" url="/pages/apps/notification/notification" >
  10. <view class="padding radius text-center shadow-blur bg-blue">
  11. <view class="cuIcon-notice text-white circle-button font-size-35"></view>
  12. <view class="margin-top-sm text-Abc">通告</view>
  13. </view>
  14. </navigator>
  15. </view>
  16. <view class="padding-sm">
  17. <navigator hover-class="none" url="/pages/apps/mail/mail" >
  18. <view class="padding radius text-center shadow-blur bg-blue">
  19. <view class="cuIcon-mail text-white circle-button font-size-35"></view>
  20. <view class="margin-top-sm text-Abc">站内信</view>
  21. </view>
  22. </navigator>
  23. </view>
  24. </view>
  25. <view class="grid col-3 padding-sm" style="margin-top: -7px;">
  26. <view class="padding-sm">
  27. <navigator hover-class="none" url="/pages/example/components" >
  28. <view class="padding radius text-center shadow-blur bg-white">
  29. <text class="lg font-size-35 text-blue cuIcon-form"></text>
  30. <view class="margin-top-sm text-Abc">元素</view>
  31. </view>
  32. </navigator>
  33. </view>
  34. <view class="padding-sm">
  35. <navigator hover-class="none" url="/pages/example/components" >
  36. <view class="padding radius text-center shadow-blur bg-white">
  37. <text class="lg font-size-35 text-blue cuIcon-list"></text>
  38. <view class="margin-top-sm text-Abc">组件</view>
  39. </view>
  40. </navigator>
  41. </view>
  42. <view class="padding-sm">
  43. <navigator hover-class="none" url="/pages/example/basics/icon" >
  44. <view class="padding radius text-center shadow-blur bg-white">
  45. <text class="lg font-size-35 text-blue cuIcon-similar"></text>
  46. <view class="margin-top-sm text-Abc">图标</view>
  47. </view>
  48. </navigator>
  49. </view>
  50. <view class="padding-sm">
  51. <navigator hover-class="none" url="/pages/example/ucharts/ucharts" >
  52. <view class="padding radius text-center shadow-blur bg-white">
  53. <text class="lg font-size-35 text-blue cuIcon-rank"></text>
  54. <view class="margin-top-sm text-Abc">图表</view>
  55. </view>
  56. </navigator>
  57. </view>
  58. <view class="padding-sm">
  59. <view class="padding radius text-center shadow-blur bg-white">
  60. <text class="lg font-size-35 text-blue cuIcon-calendar"></text>
  61. <view class="margin-top-sm text-Abc">日历</view>
  62. </view>
  63. </view>
  64. <view class="padding-sm">
  65. <view class="padding radius text-center shadow-blur bg-white">
  66. <text class="lg font-size-35 text-blue cuIcon-phone"></text>
  67. <view class="margin-top-sm text-Abc">电话</view>
  68. </view>
  69. </view>
  70. <view class="padding-sm">
  71. <view class="padding radius text-center shadow-blur bg-white">
  72. <text class="lg font-size-35 text-blue cuIcon-activity"></text>
  73. <view class="margin-top-sm text-Abc">工作</view>
  74. </view>
  75. </view>
  76. <view class="padding-sm">
  77. <view class="padding radius text-center shadow-blur bg-white">
  78. <text class="lg font-size-35 text-blue cuIcon-hot"></text>
  79. <view class="margin-top-sm text-Abc">热点</view>
  80. </view>
  81. </view>
  82. <view class="padding-sm">
  83. <navigator hover-class="none" url="/pages/test/mobile/TestMobileList" >
  84. <view class="padding radius text-center shadow-blur bg-white">
  85. <text class="lg font-size-35 text-blue cuIcon-safe"></text>
  86. <view class="margin-top-sm text-Abc">测试</view>
  87. </view>
  88. </navigator>
  89. </view>
  90. </view>
  91. <u-gap height="80" bgColor="#fff"></u-gap>
  92. </scroll-view>
  93. </view>
  94. </template>
  95. <script>
  96. export default {
  97. name: "apps",
  98. data() {
  99. return {
  100. };
  101. },
  102. onShow() {
  103. console.log("success")
  104. }
  105. }
  106. </script>
  107. <style>
  108. .page {
  109. height: 100vh;
  110. }
  111. .font-size-35{
  112. font-size: 35px!important;
  113. }
  114. .my-app .padding-sm {
  115. padding: 6px;
  116. }
  117. .grid .padding-sm .bg-white{
  118. box-shadow: 0 1px 4px #f9f9f9, 1px 1px 40px rgba(0,0,0,.06);
  119. }
  120. </style>