tpl_flex_three.vue 696 B

1234567891011121314151617181920212223242526272829303132333435363738
  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. height: 110px;
  26. display: flex;
  27. align-items: center;
  28. justify-content: center;
  29. background-size: cover;
  30. }
  31. img {
  32. width: 111px;
  33. }
  34. </style>