|
|
@@ -1,58 +1,59 @@
|
|
|
<template>
|
|
|
- <v-card
|
|
|
- class-name="mx-auto"
|
|
|
- color="white"
|
|
|
- >
|
|
|
- <v-card-title>
|
|
|
- <v-avatar>
|
|
|
- <img
|
|
|
- :src="item.avatarUrl"
|
|
|
- alt="social"
|
|
|
- >
|
|
|
- </v-avatar>
|
|
|
- <span class="text-body-1 font-weight-light">{{ item.username }}</span>
|
|
|
- <span class="text-body-1 font-weight-light">{{ item.createAt }}</span>
|
|
|
- </v-card-title>
|
|
|
+ <div style="width: 640px">
|
|
|
+ <v-card
|
|
|
+ color="white"
|
|
|
+ >
|
|
|
+ <v-card-title>
|
|
|
+ <v-avatar>
|
|
|
+ <img
|
|
|
+ :src="item.avatarUrl"
|
|
|
+ alt="social"
|
|
|
+ >
|
|
|
+ </v-avatar>
|
|
|
+ <span class="text-body-1 font-weight-light">{{ item.username }}</span>
|
|
|
+ <span class="text-body-1 font-weight-light">{{ item.createAt }}</span>
|
|
|
+ </v-card-title>
|
|
|
|
|
|
- <v-card-text class-name="text-h5 font-weight-bold">
|
|
|
- <span v-html="formatContent(item.text)" />
|
|
|
- <v-row v-if="item.imageUrls.length !== 0">
|
|
|
- <v-col
|
|
|
- v-for="imageUrl in item.imageUrls"
|
|
|
- :key="imageUrl"
|
|
|
- class="d-flex child-flex"
|
|
|
- cols="4"
|
|
|
- >
|
|
|
- <v-img
|
|
|
- :src="imageUrl"
|
|
|
- :lazy-src="imageUrl"
|
|
|
- aspect-ratio="1"
|
|
|
- class="grey lighten-2"
|
|
|
- @click="showImage(item.imageUrls)"
|
|
|
+ <v-card-text class-name="text-h5 font-weight-bold">
|
|
|
+ <span v-html="formatContent(item.text)" />
|
|
|
+ <v-row v-if="item.imageUrls.length !== 0">
|
|
|
+ <v-col
|
|
|
+ v-for="imageUrl in item.imageUrls"
|
|
|
+ :key="imageUrl"
|
|
|
+ class="d-flex child-flex"
|
|
|
+ cols="4"
|
|
|
>
|
|
|
- <template v-slot:placeholder>
|
|
|
- <v-row
|
|
|
- class="fill-height ma-0"
|
|
|
- align="center"
|
|
|
- justify="center"
|
|
|
- >
|
|
|
- <v-progress-circular
|
|
|
- indeterminate
|
|
|
- color="grey lighten-5"
|
|
|
- />
|
|
|
- </v-row>
|
|
|
- </template>
|
|
|
- </v-img>
|
|
|
- </v-col>
|
|
|
- </v-row>
|
|
|
- </v-card-text>
|
|
|
- <v-icon
|
|
|
- small
|
|
|
- left
|
|
|
- >
|
|
|
- mdi-twitter
|
|
|
- </v-icon>
|
|
|
- </v-card>
|
|
|
+ <v-img
|
|
|
+ :src="imageUrl"
|
|
|
+ :lazy-src="imageUrl"
|
|
|
+ aspect-ratio="1"
|
|
|
+ class="grey lighten-2"
|
|
|
+ @click="showImage(item.imageUrls)"
|
|
|
+ >
|
|
|
+ <template v-slot:placeholder>
|
|
|
+ <v-row
|
|
|
+ class="fill-height ma-0"
|
|
|
+ align="center"
|
|
|
+ justify="center"
|
|
|
+ >
|
|
|
+ <v-progress-circular
|
|
|
+ indeterminate
|
|
|
+ color="grey lighten-5"
|
|
|
+ />
|
|
|
+ </v-row>
|
|
|
+ </template>
|
|
|
+ </v-img>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+ </v-card-text>
|
|
|
+ <v-icon
|
|
|
+ small
|
|
|
+ left
|
|
|
+ >
|
|
|
+ mdi-twitter
|
|
|
+ </v-icon>
|
|
|
+ </v-card>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
