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