tpl_flex_two.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <template>
  2. <div class="layout">
  3. <div class="flex-two">
  4. <div class="flex-item" @click="modelnavigateTo(res.list[0])">
  5. <u-image height="325rpx" width="100%" mode="scaleToFill" :src="res.list[0].img" alt>
  6. <u-loading slot="loading"></u-loading>
  7. </u-image>
  8. </div>
  9. <div class="flex-item" @click="modelnavigateTo(res.list[1])">
  10. <u-image height="325rpx" width="100%" mode="scaleToFill" :src="res.list[1].img" alt>
  11. <u-loading slot="loading"></u-loading>
  12. </u-image>
  13. </div>
  14. </div>
  15. </div>
  16. </template>
  17. <script>
  18. import uImage from "@/uview-ui/components/u-image/u-image.vue";
  19. import { modelnavigateTo } from "./tpl";
  20. export default {
  21. components: { uImage },
  22. title: "两张横图",
  23. props: ["res"],
  24. mounted() {
  25. },
  26. data() {
  27. return {
  28. modelnavigateTo,
  29. };
  30. },
  31. };
  32. </script>
  33. <style lang="scss" scoped>
  34. @import "./tpl.scss";
  35. .flex-two {
  36. width: 100%;
  37. display: flex;
  38. overflow: hidden;
  39. }
  40. .flex-item {
  41. width: 50%;
  42. > img {
  43. display: block;
  44. max-width: 100%;
  45. height: 100%;
  46. }
  47. }
  48. </style>