index.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <view>
  3. <fs-swiper :list="list1"></fs-swiper>
  4. <fs-grid :columnNum="4">
  5. <fs-grid-item>
  6. <view class="text-center">
  7. <fs-avatar size="90rpx" src="/static/images/menu/menu1.png"></fs-avatar>
  8. <view class="menu-item">菜单1</view>
  9. </view>
  10. </fs-grid-item>
  11. <fs-grid-item>
  12. <view class="text-center">
  13. <fs-avatar size="90rpx" src="/static/images/menu/menu2.png"></fs-avatar>
  14. <view class="menu-item">菜单2</view>
  15. </view>
  16. </fs-grid-item>
  17. <fs-grid-item>
  18. <view class="text-center">
  19. <fs-avatar size="90rpx" src="/static/images/menu/menu3.png"></fs-avatar>
  20. <view class="menu-item">菜单3</view>
  21. </view>
  22. </fs-grid-item>
  23. <fs-grid-item>
  24. <view class="text-center">
  25. <fs-avatar size="90rpx" src="/static/images/menu/menu4.png"></fs-avatar>
  26. <view class="menu-item">菜单4</view>
  27. </view>
  28. </fs-grid-item>
  29. </fs-grid>
  30. </view>
  31. </template>
  32. <script setup>
  33. const list1 = [
  34. {
  35. src: '/static/images/banner.png'
  36. },
  37. {
  38. src: '/static/images/banner.png'
  39. },
  40. {
  41. src: '/static/images/banner.png'
  42. }
  43. ]
  44. </script>
  45. <style lang="scss" scoped>
  46. .menu-item{
  47. margin-top: 6rpx;
  48. font-size: 14px;
  49. }
  50. </style>