diff --git a/src/views/Life.vue b/src/views/Life.vue
index 080099b..cc2facd 100644
--- a/src/views/Life.vue
+++ b/src/views/Life.vue
@@ -5,9 +5,12 @@
{{p.reply.text}}
-
+
+
![image]()
+
+
+ :style="{'background-image': `url(${i.url})`, ...getImageStyle(p, i)}">
{{p.text}}
@@ -25,6 +28,19 @@ import {Options, Vue} from 'vue-class-component';
import {backendUrl} from "@/constants";
import moment from "moment";
+export interface Image {
+ href: string
+ url: string
+ style: {
+ left: number
+ top: number
+ width: number
+ height: number
+ 'margin-right': number
+ 'margin-bottom': number
+ }
+}
+
export interface Post {
id: string
date: string
@@ -43,10 +59,11 @@ export interface Post {
duration: string
src: string
}
- images?: {
- href: string
- url: string
- }[]
+ images?: Image[]
+ img_group_style?: {
+ width: number
+ height: number
+ }
}
@Options({components: {}})
@@ -64,6 +81,17 @@ export default class Blog extends Vue
console.log(it)
})
}
+
+ getImageStyle(post: Post, i: Image): unknown
+ {
+ if (post.img_group_style)
+ {
+ return {}
+ }
+ else return {
+
+ }
+ }
}
@@ -75,8 +103,8 @@ export default class Blog extends Vue
margin: 20px auto 0
border-radius: 50px 50px 0 0
padding: 20px
- font-size: 0.9em
- width: min(600px, 80vw)
+ font-size: 0.8em
+ width: min(450px, 80vw)
.post.service
.id
@@ -89,7 +117,9 @@ export default class Blog extends Vue
margin-bottom: 20px
padding: 12px 20px 8px
overflow: auto
+ overflow-x: hidden
box-sizing: border-box
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%)
text-align: left
@@ -129,7 +159,7 @@ export default class Blog extends Vue
margin: 0 -20px 10px
.images
- margin: -20px -20px 10px
+ margin: -12px -20px 10px
display: flex
.img
@@ -137,11 +167,20 @@ export default class Blog extends Vue
height: 200px
width: 200px
background-size: cover
+ background-repeat: no-repeat
+ background-position: center
margin-right: 10px
+
.img:last-child
margin-right: 0
+ img
+ max-width: 100%
+ min-width: 100%
+ width: auto
+ height: auto
+
.text
white-space: pre-line