image.vue 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <view class="content">
  3. <view class="main">
  4. <view class="main-item" v-for="(item,index) in list">
  5. <image :src="item" mode=""></image>
  6. </view>
  7. </view>
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. data() {
  13. return {
  14. list: ['../../static/img/avatar.png', '../../static/img/avatar.png', '../../static/img/avatar.png',
  15. '../../static/img/avatar.png', '../../static/img/avatar.png', '../../static/img/avatar.png',
  16. '../../static/img/avatar.png', '../../static/img/avatar.png', '../../static/img/avatar.png'
  17. ]
  18. };
  19. },
  20. onLoad() {},
  21. onShow() {},
  22. onReachBottom() {},
  23. onReady() {},
  24. methods: {}
  25. };
  26. </script>
  27. <style lang="scss">
  28. page,
  29. .content {
  30. min-height: 100%;
  31. height: auto;
  32. }
  33. .main {
  34. margin-top: 20rpx;
  35. background: #ffffff;
  36. display: flex;
  37. align-items: center;
  38. flex-wrap: wrap;
  39. padding: 20rpx 10rpx;
  40. .main-item {
  41. margin: 20rpx 10rpx;
  42. width: 334rpx;
  43. height: 334rpx;
  44. border-radius: 14rpx;
  45. image {
  46. width: 100%;
  47. height: 100%;
  48. border-radius: 14rpx;
  49. }
  50. }
  51. }
  52. </style>