templateD.vue 879 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <view class="picture">
  3. <view class="section">
  4. <image :src="testImgUrl" mode="widthFix"></image>
  5. </view>
  6. <view class="section">
  7. <image :src="testImgUrl" mode="widthFix"></image>
  8. </view>
  9. <view class="section">
  10. <image :src="testImgUrl" mode="widthFix"></image>
  11. </view>
  12. <view class="section">
  13. <image :src="testImgUrl" mode="widthFix"></image>
  14. </view>
  15. </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: 100%;
  30. .section{
  31. margin-bottom: 24rpx;
  32. width: 702rpx;
  33. height: 360rpx;
  34. overflow: hidden;
  35. border-radius: 16rpx;
  36. image{
  37. width: 702rpx;
  38. height: 360rpx;
  39. }
  40. &:first-child{
  41. margin-top: 0;
  42. }
  43. }
  44. }
  45. </style>