index.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  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. <fs-cell border align="stretch" v-for="(item,index) in 3" :key="index">
  31. <template #title>
  32. <fs-avatar shape="square" radius width="240rpx" height="180rpx" src="/static/images/banner.png"></fs-avatar>
  33. </template>
  34. <template #value>
  35. <view class="fs-cell-right">
  36. <view class="title">图文标题</view>
  37. <view class="content line2">图文内容图文内容图文内容图文内容图文内容图文内容图文内容图文内容图文内容图文内容图文内容</view>
  38. <view class="sub">2021-09-15</view>
  39. </view>
  40. </template>
  41. </fs-cell>
  42. </view>
  43. </template>
  44. <script setup>
  45. const list1 = [
  46. {
  47. src: '/static/images/banner.png'
  48. },
  49. {
  50. src: '/static/images/banner.png'
  51. },
  52. {
  53. src: '/static/images/banner.png'
  54. }
  55. ]
  56. </script>
  57. <style lang="scss" scoped>
  58. .menu-item{
  59. margin-top: 6rpx;
  60. font-size: 14px;
  61. }
  62. </style>