templateC.vue 988 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template>
  2. <scroll-view scroll-x="true" class="picture">
  3. <view class="section">
  4. <image :src="testImgUrl" mode="heightFix"></image>
  5. </view>
  6. <view class="section">
  7. <image :src="testImgUrl" mode="heightFix"></image>
  8. </view>
  9. <view class="section">
  10. <image :src="testImgUrl" mode="heightFix"></image>
  11. </view>
  12. <view class="section">
  13. <image :src="testImgUrl" mode="heightFix"></image>
  14. </view>
  15. </scroll-view>
  16. </template>
  17. <script>
  18. export default{
  19. data(){
  20. return{
  21. testImgUrl:
  22. 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-3ad36ff8-4f90-4748-8ad3-ca265841c862/fe0d2892-b934-4c98-842f-6682e07890a4.jpg'
  23. }
  24. }
  25. }
  26. </script>
  27. <style lang="scss">
  28. .picture{
  29. width: 750rpx;
  30. margin-left: -24rpx;
  31. white-space: nowrap;
  32. .section{
  33. display: inline-block;
  34. margin-right: 24rpx;
  35. width: 310rpx;
  36. height: 240rpx;
  37. overflow: hidden;
  38. border-radius: 16rpx;
  39. image{
  40. width: 310rpx;
  41. height: 240rpx;
  42. }
  43. &:first-child{
  44. margin-left: 24rpx;
  45. }
  46. }
  47. }
  48. </style>