siimee/frontend/src/views/Archive/Chat.vue

<template>
    <div class="chat">
        <div class="chat--nav">
            <span>&lt; Back</span>
            <h3>Company Name</h3>
            <span>...</span>
        </div>

        <div class="chat--history">
            <span>Hey there... </span>
        </div>

        <div class="message">
            <!-- <h2>Messages</h2> -->
            <span>Type messages here...</span>
        </div>
    </div>
</template>

<script>
import icon from '@/components/icon'
import card from '@/components/card'
import { defineComponent } from 'vue'
import { NButton } from 'naive-ui'

export default defineComponent({
    components: {
        NButton,
        card,
        icon,
    },
})
</script>

<style lang="postcss">
h3
  margin: 0

.chat
  width: 100%
  display: flex
  flex-flow: column
  /* padding: 20px */
  text-align: left
  height: 90%


.chat--nav
  display: flex
  flex-direction: row
  justify-content: space-between
  border-bottom: 1px solid rgba(0,0,0,0.5)
  width: 100%
  & > *
    padding: 10px



.chat--history
  padding: 20px
  flex: 1
  overflow: auto


.row
  display: flex
  flex-direction: row
  /* width: 100vw */
  overflow:scroll


.message
  position: relative
  bottom: 0
  min-height: 60px
  width: 100%
  display: block
  text-align: left
  /* margin-bottom: 10px */
  background-color: transparent
  border: 1px solid #ccc
  padding: 12px


.n-card__content
  padding-top: 0


.matched
  display: flex
  flex-direction: row
  background-color: rgba(0,0,0,0.0)
  margin-bottom: 12px
  border-bottom: 1px solid rgba(150,150,150,0.25)


.icon
  /* display: inline-block */
  padding: 8px 12px
  margin: -1px
  /* flex-grow: 0 */
  border-bottom: 1px solid rgba(250,250,250,0.95)

.active
  /* background-color: rgba(250,50,50,0.3) */
</style>