|
|
<template>
|
|
|
<div class="q-pa-md q-gutter-sm">
|
|
|
<q-card flat bordered>
|
|
|
<p class="text-h5 q-pa-md">Название темы</p>
|
|
|
<p class="q-pa-md">Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32</p>
|
|
|
<q-separator spaced />
|
|
|
<div class="row" style="display: flex; width: 100%;">
|
|
|
<p style="display: flex; flex-basis: 50%;" class="text-subtitle2 q-pa-sm q-mt-md">Иван Иванов, Сегодня 17:03</p>
|
|
|
<div class="row" style="display: flex; flex-basis: 50%; justify-content: flex-end;">
|
|
|
<q-btn size="30px" flat style="color: #0000FF">+</q-btn>
|
|
|
<p class="text-h6 q-pa-sm q-mt-md">10</p>
|
|
|
<q-btn size="30px" flat style="color: #FF0080">-</q-btn>
|
|
|
</div>
|
|
|
</div>
|
|
|
</q-card>
|
|
|
<q-card class="q-ml-xl" flat bordered>
|
|
|
<p class="q-pa-md">Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32</p>
|
|
|
<q-separator spaced />
|
|
|
<div class="row" style="display: flex; width: 100%;">
|
|
|
<p style="display: flex; flex-basis: 50%;" class="text-subtitle2 q-pa-sm q-mt-md">Олег Олегов, Сегодня 17:04</p>
|
|
|
<div class="row" style="display: flex; flex-basis: 50%; justify-content: flex-end;">
|
|
|
<q-btn size="30px" flat style="color: #0000FF">+</q-btn>
|
|
|
<p class="text-h6 q-pa-sm q-mt-md">11</p>
|
|
|
<q-btn size="30px" flat style="color: #FF0080">-</q-btn>
|
|
|
</div>
|
|
|
</div>
|
|
|
</q-card>
|
|
|
<q-card class="q-ml-xl" flat bordered>
|
|
|
<p class="q-pa-md">Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа </p>
|
|
|
<q-separator spaced />
|
|
|
<div class="row" style="display: flex; width: 100%;">
|
|
|
<p style="display: flex; flex-basis: 50%;" class="text-subtitle2 q-pa-sm q-mt-md">Алиса Встранечудесова, Сегодня 17:09</p>
|
|
|
<div class="row" style="display: flex; flex-basis: 50%; justify-content: flex-end;">
|
|
|
<q-btn size="30px" flat style="color: #0000FF">+</q-btn>
|
|
|
<p class="text-h6 q-pa-sm q-mt-md">0</p>
|
|
|
<q-btn size="30px" flat style="color: #FF0080">-</q-btn>
|
|
|
</div>
|
|
|
</div>
|
|
|
</q-card>
|
|
|
<q-card class="q-ml-xl" flat bordered>
|
|
|
<p class="q-pa-md">Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа </p>
|
|
|
<q-separator spaced />
|
|
|
<div class="row" style="display: flex; width: 100%;">
|
|
|
<p style="display: flex; flex-basis: 50%;" class="text-subtitle2 q-pa-sm q-mt-md">Евгений Женин, Сегодня 17:10</p>
|
|
|
<div class="row" style="display: flex; flex-basis: 50%; justify-content: flex-end;">
|
|
|
<q-btn size="30px" flat style="color: #0000FF">+</q-btn>
|
|
|
<p class="text-h6 q-pa-sm q-mt-md">0</p>
|
|
|
<q-btn size="30px" flat style="color: #FF0080">-</q-btn>
|
|
|
</div>
|
|
|
</div>
|
|
|
</q-card>
|
|
|
<q-separator spaced />
|
|
|
<q-editor v-model="editor" min-height="5rem" />
|
|
|
|
|
|
<q-card flat bordered>
|
|
|
<q-badge label="Предпросмотр" />
|
|
|
<q-card-section v-html="editor" />
|
|
|
</q-card>
|
|
|
<q-btn @click="answer" label="Ответить"/>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
name: 'Topic',
|
|
|
data () {
|
|
|
return {
|
|
|
editor: '',
|
|
|
comments: []
|
|
|
}
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
answer () {
|
|
|
this.$router.push({ path: '/topics/1' })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|