瑶都万能墙
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

80 lines
1.3 KiB

4 months ago
  1. <template>
  2. <view>
  3. <view class="dynamics" v-html="$utils.stringFormatHtml(item.title)">
  4. </view>
  5. <view class="address"
  6. @click.stop="openLocation(item.latitude, item.longitude)"
  7. v-if="item.address">
  8. <uv-icon size="30rpx" name="map"></uv-icon>
  9. <view class="text-ellipsis">
  10. {{ item.address }}
  11. </view>
  12. </view>
  13. <view class="Artworkimages">
  14. <view class="wrokimg" @click.stop="previewImage(images, i)" :key="i" v-for="(img, i) in images">
  15. <image :src="img" mode="aspectFill"></image>
  16. </view>
  17. </view>
  18. </view>
  19. </template>
  20. <script>
  21. export default {
  22. props: {
  23. item: {},
  24. },
  25. computed : {
  26. images(){
  27. if(!this.item.image){
  28. return []
  29. }
  30. return this.item.image.split(',')
  31. }
  32. },
  33. data() {
  34. return {
  35. }
  36. },
  37. methods: {
  38. }
  39. }
  40. </script>
  41. <style scoped lang="scss">
  42. .dynamics {
  43. margin-top: 20rpx;
  44. font-size: 28rpx;
  45. letter-spacing: 3rpx;
  46. }
  47. .address {
  48. font-size: 24rpx;
  49. margin: 20rpx 0;
  50. display: flex;
  51. align-items: center;
  52. background-color: #eee;
  53. padding: 10rpx 20rpx;
  54. width: fit-content;
  55. border-radius: 40rpx;
  56. max-width: calc(100% - 40rpx);
  57. }
  58. .Artworkimages {
  59. display: flex;
  60. flex-wrap: wrap;
  61. .wrokimg {
  62. margin: 10rpx;
  63. image {
  64. height: 190rpx;
  65. width: 190rpx;
  66. border-radius: 20rpx;
  67. }
  68. }
  69. }
  70. </style>