37 lines
1.3 KiB
Vue
37 lines
1.3 KiB
Vue
<template>
|
|
<div class="vh-100 d-flex flex-column">
|
|
<div class="flex-fill overflow-auto pt-3 px-3">
|
|
<div class="d-flex my-2">
|
|
<b-avatar variant="primary" text="ZZ" class="my-2 mr-2"> </b-avatar>
|
|
<div class="d-flex flex-column">
|
|
<p class="my-1">Zhao Zuohong</p>
|
|
<b-button variant="primary" class="mb-2 mr-5 text-left"
|
|
>Earth is the third planet from the Sun and the only astronomical
|
|
object known to harbor life.</b-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-row-reverse my-2">
|
|
<b-avatar variant="success" text="ZZ" class="my-2 ml-2"> </b-avatar>
|
|
<div class="d-flex flex-column">
|
|
<p class="my-1 text-right">Zhao Zuohong</p>
|
|
<b-button variant="success" class="mb-2 ml-5 text-left"
|
|
>It is the densest planet in the Solar System and the largest and
|
|
most massive of the four rocky planets.</b-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<b-form class="d-flex m-3">
|
|
<b-form-input class="flex-fill mr-2"> </b-form-input>
|
|
<b-button pill variant="success">Button</b-button>
|
|
</b-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue } from "vue-property-decorator";
|
|
|
|
@Component
|
|
export default class App extends Vue {}
|
|
</script>
|