tpl_flex_four.vue 697 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <template>
  2. <div class="layout">
  3. <u-image height="175rpx" width="175rpx" @click="modelnavigateTo(item)" 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. data () {
  14. return {
  15. modelnavigateTo,
  16. }
  17. },
  18. mounted() {
  19. }
  20. };
  21. </script>
  22. <style lang="scss" scoped>
  23. @import "./tpl.scss";
  24. .layout {
  25. height: 84px;
  26. display: flex;
  27. align-items: center;
  28. justify-content: center;
  29. background-size: cover;
  30. }
  31. img{
  32. width: 84px;
  33. }
  34. </style>