tpl_flex_three.vue 694 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <template>
  2. <div class="layout">
  3. <u-image @click="modelNavigateTo(item)" height="240rpx" width="240rpx" class="image-mode" :src="item.img" v-for="(item, index) in res.list" :key="index">
  4. <u-loading slot="loading"></u-loading>
  5. </u-image>
  6. </div>
  7. </template>
  8. <script>
  9. import { modelNavigateTo } from "./tpl";
  10. export default {
  11. title: "三列单行图片模块",
  12. props: ["res"],
  13. mounted() {
  14. },
  15. data() {
  16. return {
  17. modelNavigateTo,
  18. };
  19. },
  20. };
  21. </script>
  22. <style lang="scss" scoped>
  23. @import "./tpl.scss";
  24. .layout {
  25. padding: 0;
  26. display: flex;
  27. align-items: center;
  28. justify-content: center;
  29. background-size: cover;
  30. }
  31. img {
  32. width: 111px;
  33. }
  34. </style>