smartai_desk_pc/src/modules/conversation-chat/dialog-input/template-config/TemplateMenu.vue

<template>
  <div class="template-menu">
    <div class="title bg_title">{{ title }}</div>
    <!-- <div class="menus"> -->
    <div class="menus-list">
      <div class="menus-list-item" v-for="item in menu_data" :key="item.id">
        <div class="date">{{ item.date }}</div>
        <div class="menus-list-item-menu" v-for="it in item.menus" :key="it.id">
          {{ it.title }}
        </div>
        <!-- </div> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="js">
import {ref} from 'vue'
const title = ref('国网四川省电力公司供电可靠性周报')

const menu_data = [
  {
    id:1,
    date:'2025年4月22日',
    menus:[
      {
        id:'1-1',
        title:'一.停电时户数目标管控'
      },
      {
        id:'1-2',
        title:'二.停电时户数目标管控'
      },
      {
        id:'1-3',
        title:'三.停电时户数目标管控'
      },
    ]
  },
  {
    id:2,
    date:'2025年4月22日',
    menus:[
      {
        id:'2-1',
        title:'一.停电时户数目标管控'
      },
      {
        id:'2-2',
        title:'二.停电时户数目标管控'
      },
      {
        id:'2-3',
        title:'三.停电时户数目标管控'
      },
    ]
  },
]
</script>
<style scoped lang="css">
.template-menu {
  padding: 10px;
  width: 16%;
  height: 100%;
  box-sizing: border-box;
  /* overflow-y: auto; */
}
.title {
  padding: 5px 10px;
  border-radius: 6px;
  font-family: 思源黑体;

  font-weight: 500;
  line-height: normal;
  letter-spacing: 0px;

  color: #181d1d;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; /* 内容过长时显示省略号 */
}
.menus-list {
  height: calc(100% - 40px);
  margin-top: 10px;
  overflow-y: auto;
}
.menus-list-item {
  /* padding: 10px 0; */
}
.menus-list-item .date {
  padding: 5px 0;
}
.menus-list-item .menus-list-item-menu {
  padding: 5px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; /* 内容过长时显示省略号 */
  cursor: pointer;
  padding: 0px 5px;
}
.menus-list-item-menu:hover {
  background: var(--bg-title);
  border-radius: 6px;
}
</style>