zjugis_OA/client/src/views/OaSystem/aiQA/components/ExampleChat.vue

<script setup lang="ts">
import fireIcon from '@/assets/imgs/ai/fire.png'
import refreshIcon from '@/assets/imgs/ai/refresh.png'

interface ExampleChatProps {
  changeQuestion: (q: string, init?: boolean) => void
}

const props = defineProps<ExampleChatProps>()
const { changeQuestion } = props
const entries = [
  '村庄规划的编制要点是什么?',
  '耕地占补平衡方案写作案例？',
  '低效用地再开发方案编制要点？',
  '批而未供核查举证方式有哪些？',
  '批而未供核查举证方式有哪些？',
  '批而未供核查举证方式有哪些？',
  '浙江省工业用地调查技术导则？',
  '土地储备计划编制案例？'
]
</script>

<template>
  <div class="example-chat">
    <h3 class="title"> 你好，我是智能助理-小智 </h3>
    <p> 今天又是充满能量的一天！我可以为你提供24小时智能机器人咨询服务，有什么可以帮助你的么？ </p>
    <p>
      想知道如何进行提问？
      <a class="a-btn">点击查看</a>
    </p>
    <div class="entry-header">
      <span>大家都在问：</span>
      <a class="a-btn"> <img class="icon" :src="refreshIcon" alt="" />换一批</a>
    </div>
    <div class="example-entries">
      <div
        class="example-entry"
        v-for="entry in entries"
        :key="entry"
        @click="changeQuestion(entry)"
      >
        <img class="icon" :src="fireIcon" alt="" />
        <span>{{ entry }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.example-chat {
  font-size: 16px;
  color: #2d333c;

  p {
    margin: 10px 0;
  }

  .title {
    font-weight: bold;
    font-size: 20px;
    color: #27375f;
    margin-bottom: 20px;
  }

  .a-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    color: #2e77e6;

    .icon {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      margin-right: 8px;
    }
  }

  .entry-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    font-size: 16px;
  }

  .example-entries {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 20px;
    grid-gap: 20px;

    .example-entry {
      width: calc(25% - 16px);
      padding: 12px 20px;
      border-radius: 8px;
      background-color: #e9f0fb;
      cursor: pointer;
      display: flex;
      align-items: center;

      span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .icon {
        width: 24px;
        height: 24px;
        border-radius: 50%;
      }

      &:hover {
        background-color: #f4f6f9;
      }
    }
  }
}
</style>