slibra-module-web/src/views/count/index.vue

<script setup>
import { ref } from 'vue';
import { NButton, NSpace, NDrawer } from 'naive-ui';
import { BaseButton, RecodeCardItem, TheSubMenu, TheChatView, ChatWelcome } from '@/components';
import { ChatAsk, ChatAnswer, ChatInput } from '@/components/Chat';

const visible = ref(false);

const changeVisible = () => {
  visible.value = !visible.value;
}

</script>

<template>
  <section class="page-container">
    <header class="header">
      <NSpace>
        <n-button>下一页</n-button>
        <n-button @click="changeVisible">显示错误id</n-button>
      </NSpace>
    </header>
    <div class="main">
      <div class="answer-block" v-for="item in 100">
        <ChatAsk content="问题问题问题"></ChatAsk>
        <ChatAnswer content="回答回答回答回答回答" :toggleVisibleIcons="false"></ChatAnswer>
        <div class="answer-btns">
          <NSpace>
            <NButton type="success">对</NButton>
            <NButton type="error">错</NButton>
          </NSpace>
        </div>
      </div>
    </div>
  </section>

  <NDrawer placement="right" v-model:show="visible" width="600">123123</NDrawer>
</template>

<style lang="scss" scoped>
.page-container {
  width: 100vw;
  height: 100vh;
  background: #edf7fc;

  .header {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    background: #fff;
  }

  .main {
    width: 1000px;
    height: calc(100% - 74px);
    margin: 0 auto;
    overflow-y: scroll;

    .answer-block {
      border-bottom: 1px solid #000000;
      padding-bottom: 20px;
    }

    .answer-btns {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>