page-demo.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <view>
  3. <view class="demo-banner demo-bg gui-dark-bg-level-3 gui-border-radius"></view>
  4. <view class="demo-space"></view>
  5. <view class="gui-flex gui-row gui-nowrap gui-space-between">
  6. <view
  7. v-for="(item, index) in [1,2,3,4,5]"
  8. :key="index"
  9. class="demo-grid demo-bg gui-dark-bg-level-3 gui-border-radius"></view>
  10. </view>
  11. <view class="demo-space"></view>
  12. <view class="gui-flex gui-row gui-nowrap gui-space-between">
  13. <view
  14. class="demo-card demo-bg gui-dark-bg-level-3 gui-border-radius"
  15. style="height:406rpx;"></view>
  16. <view>
  17. <view
  18. class="demo-card demo-bg gui-dark-bg-level-3 gui-border-radius"></view>
  19. <view
  20. style="margin-top:30rpx;"
  21. class="demo-card demo-bg gui-dark-bg-level-3 gui-border-radius"></view>
  22. </view>
  23. </view>
  24. <view class="demo-space"></view>
  25. <view class="gui-flex gui-row gui-nowrap gui-space-between">
  26. <view>
  27. <view
  28. class="demo-card demo-bg gui-dark-bg-level-3 gui-border-radius"></view>
  29. <view
  30. style="margin-top:30rpx;"
  31. class="demo-card demo-bg gui-dark-bg-level-3 gui-border-radius"></view>
  32. </view>
  33. <view
  34. class="demo-card demo-bg gui-dark-bg-level-3 gui-border-radius"
  35. style="height:406rpx;"></view>
  36. </view>
  37. </view>
  38. </template>
  39. <script>
  40. export default {
  41. name:"page-demo",
  42. data() {
  43. return {
  44. };
  45. }
  46. }
  47. </script>
  48. <style scoped>
  49. .demo-bg{background-color:#EFF1F6;}
  50. .demo-banner{height:288rpx;}
  51. .demo-space{height:30rpx;}
  52. .demo-grid{width:106rpx; height:106rpx;}
  53. .demo-card{width:330rpx; height:188rpx;}
  54. </style>