修改table样式

src/views/property-marketing/assignment-management/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex-column justify-between bg-#fff rounded-8px p-24px">
+  <div class="flex flex-col justify-between bg-white rounded-8px p-24px">
     <!-- 日期选择器和筛选区域 -->
-    <div class="flex justify-between items-start w-full">
+    <div class="flex justify-between items-start w-full mb-24px">
       <DateSelector v-model="dateSelectorModel" @date-change="handleDateSelectorChange" />
-      <div class="flex items-start">
+      <div class="flex items-start gap-12px">
-        <colorTip />
+        <ColorTip />
         <FilterPopup
           :operators="operators"
           :platformOptions="platformOptions"
@@ -12,41 +12,30 @@
           :query="query"
           @filter-change="handleFilterChange"
         />
-        <Button type="primary" class="w-112px" size="middle" @click="handleAddTask">
+        <a-button type="primary" class="w-112px" size="middle" @click="handleAddTask"> 创建任务 </a-button>
-          <template #default>创建任务</template>
-        </Button>
       </div>
     </div>
 
     <!-- 表格内容区域 -->
-    <div class="flex justify-between items-start w-full">
+    <div class="flex-1 w-full">
-      <div class="table-wrap py-24px flex flex-col" style="width: 100%; overflow-x: auto">
+      <div class="flex flex-col" style="width: 100%; overflow-x: auto">
         <a-table
           :columns="columns"
           :data-source="data"
-          :bordered="{ cell: true }"
+          :bordered="true"
           :scroll="{ x: 'max-content' }"
-          style="width: 100%"
           :pagination="false"
+          :locale="{ emptyText: emptyText }"
           @change="handleTableChange"
-          @cell-click="handleCellClick"
         >
-          <!-- 空数据显示 -->
-          <template #emptyText>
-            <div class="flex flex-col items-center justify-center" style="min-height: 600px">
-              <img :src="emptyIcon" class="img mt-20px" alt="暂无数据" width="106" height="72" />
-              <div class="text mt-36px">暂无数据</div>
-              <div class="mt-12px mb-12px">可通过账号管理添加账号，进行任务排期管理</div>
-              <a-button type="primary" @click="handleAddAccount">去添加</a-button>
-            </div>
-          </template>
           <!-- 账号与平台列 -->
-          <template #bodyCell="{ column, record }">
+          <template #bodyCell="{ column, record, index }">
+            <!-- 账号名称列 -->
             <template v-if="column.dataIndex === 'name'">
-              <div class="flex items-center justify-start">
+              <div class="flex items-center justify-start color-#211F24">
                 <img
                   :src="getPlatformIcon(record.platform)"
-                  style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; margin-left: 20px"
+                  class="w-16px h-16px mr-8px rounded-4px"
                   :alt="getPlatformName(record.platform)"
                 />
                 {{ record.name || '-' }}
@@ -54,19 +43,20 @@
             </template>
 
             <!-- 动态日期单元格 -->
-            <template v-else-if="column.slots?.customRender === 'dateCell'">
+            <template v-else-if="column.dataIndex === 'dateCell'">
-              <div v-if="record[column.dataIndex]?.length" class="task-container">
+              <div
+                v-if="record[column.dataIndex]?.length"
+                class="task-container"
+                @click="handleCellClick(record, column)"
+              >
                 <!-- 任务数量≥3时显示更多 -->
                 <div v-if="record[column.dataIndex].length >= 3" class="task-more">
                   <TaskItem :task="record[column.dataIndex][0]" :record="record" @handle-task="handleTaskAction" />
                   <a-popover trigger="click" placement="bottomRight">
-                    <div class="size-12px color-#8f959f h-19px ml-4px rounded-2px cursor-pointer" @click.stop>
-                      还有{{ record[column.dataIndex].length - 1 }}项
-                    </div>
                     <template #content>
-                      <div class="bg-#fff w-160px p-12px rounded-4px flex flex-col more-content">
+                      <div class="bg-white w-160px p-12px rounded-4px flex flex-col more-content">
                         <TaskItem
-                          v-for="task in record[column.dataIndex]"
+                          v-for="task in record[column.dataIndex].slice(1)"
                           :key="task.id"
                           :task="task"
                           :record="record"
@@ -74,6 +64,9 @@
                         />
                       </div>
                     </template>
+                    <div class="size-12px color-#8f959f h-19px ml-4px rounded-2px cursor-pointer" @click.stop>
+                      还有{{ record[column.dataIndex].length - 1 }}项
+                    </div>
                   </a-popover>
                 </div>
                 <!-- 任务数量<3时直接显示 -->
@@ -87,7 +80,7 @@
                   />
                 </div>
               </div>
-              <div v-else class="no-task"></div>
+              <div v-else class="no-task" @click="handleCellClick(record, column)"></div>
             </template>
           </template>
         </a-table>
@@ -103,31 +96,41 @@
             :current="pageInfo.page"
             :page-size="pageInfo.page_size"
             @change="handlePageChange"
-            @show-size-change="handlePageSizeChange"
+            @showSizeChange="handlePageSizeChange"
           />
         </div>
       </div>
     </div>
   </div>
+
   <!-- 删除确认弹窗 -->
-  <a-modal v-model:visible="showModal" @ok="handleDeleteConfirm" @cancel="showModal = false" ok-text="确认删除">
+  <a-modal
-    <template #title>{{ deleteTitle }}</template>
+    v-model:open="showModal"
+    @ok="handleDeleteConfirm"
+    @cancel="showModal = false"
+    ok-text="确认删除"
+    :title="deleteTitle"
+  >
     <div>{{ deleteContent }}</div>
   </a-modal>
-  <DrowPopup ref="drawerPopupRef" @create-task="handleCreateTask" />
+
+  <DrawPopup ref="drawerPopupRef" @create-task="handleCreateTask" />
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, computed, inject, nextTick } from 'vue';
+import { ref, reactive, onMounted, computed, nextTick, h } from 'vue';
+import { Table, Button, Popover, Pagination, Modal, notification, message } from 'ant-design-vue';
 import type { TableProps } from 'ant-design-vue';
 import router from '@/router';
 import DateUtils from '@/utils/DateUtils';
+
 // 组件引入
 import DateSelector from './components/date-selector.vue';
-import colorTip from './components/colorTip.vue';
+import ColorTip from './components/colorTip.vue';
 import FilterPopup from './components/filter-popup.vue';
-import DrowPopup from './components/draw-popup.vue';
+import DrawPopup from './components/draw-popup.vue';
 import TaskItem from './components/task-item.vue';
+
 // API引入
 import {
   getTaskSchedules,
@@ -137,8 +140,10 @@ import {
   generateContent,
 } from '@/api/all/assignment-management';
 import { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing';
+
 // 工具引入
 import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+
 // 静态资源
 import emptyIcon from '@/assets/img/media-account/icon-empty.png';
 // 平台图标
@@ -150,8 +155,7 @@ import iconSph from '@/assets/img/platform/icon-sph.png';
 import iconWb from '@/assets/img/platform/icon-wb.png';
 import iconGzh from '@/assets/img/platform/icon-gzh.png';
 import iconWarn from '@/assets/img/media-account/icon-warn.png';
-import { Checkbox, Button, Space, Pagination, notification } from 'ant-design-vue';
+
-import { message } from 'ant-design-vue';
 // 表格分页逻辑
 const { pageInfo, onPageChange, onPageSizeChange } = useTableSelectionWithPagination({
   onPageChange: () => handleSearch(),
@@ -165,6 +169,7 @@ const dateSelectorModel = ref({
   weekModel: new Date(),
   monthModel: new Date(),
 });
+
 const columns = ref<TableProps['columns']>([]);
 const data = ref<any[]>([]);
 const operators = ref([]);
@@ -173,6 +178,17 @@ const showModal = ref(false);
 const currentTask = ref<any>(null);
 const deleteTitle = ref('');
 const deleteContent = ref('');
+const drawerPopupRef = ref();
+
+// 空状态显示
+const emptyText = () => {
+  return h('div', { class: 'flex flex-col items-center justify-center', style: { minHeight: '600px' } }, [
+    h('img', { src: emptyIcon, class: 'img mt-20px', alt: '暂无数据', width: 106, height: 72 }),
+    h('div', { class: 'text mt-36px' }, '暂无数据'),
+    h('div', { class: 'mt-12px mb-12px' }, '可通过账号管理添加账号，进行任务排期管理'),
+    h(Button, { type: 'primary', onClick: handleAddAccount }, '去添加'),
+  ]);
+};
 
 // 获取当前周的日期范围
 const getCurrentWeekRange = () => {
@@ -187,7 +203,7 @@ const query = reactive({
   platforms: undefined,
   operator_ids: undefined,
   ids: [],
-  execution_time: getCurrentWeekRange(), // 设置默认值为当前周
+  execution_time: getCurrentWeekRange(),
   top_execution_time: undefined,
 });
 
@@ -205,6 +221,7 @@ const platformConfig = {
     { id: 6, name: '公众号', icon: iconGzh },
   ],
 };
+
 const platformOptions = ref(platformConfig.options);
 
 // 工具函数
@@ -219,6 +236,7 @@ const timestampToDayNumber = (timestamp: number) => {
 const processTableData = (apiData: any[]) => {
   const processedData: any[] = [];
   const dateHeaders = currentDateHeaders.value;
+
   apiData.forEach((account) => {
     const rowData: any = {
       id: account.id,
@@ -230,6 +248,7 @@ const processTableData = (apiData: any[]) => {
     dateHeaders.forEach((day) => {
       rowData[day] = [];
     });
+
     // 分配任务到对应日期列
     if (account.task_schedules?.length) {
       account.task_schedules.forEach((task: any) => {
@@ -242,40 +261,26 @@ const processTableData = (apiData: any[]) => {
 
     processedData.push(rowData);
   });
-  console.log('处理后的数据:', processedData);
+
   return processedData;
 };
 
-// 创建任务
-const handleAddTask = () => {
-  drawerPopupRef.value?.showDrawer();
-};
-
-const handleCreateTask = async (value) => {
-  const res = await createTask(value);
-  if (res && res.code === 200) {
-    message.success('创建成功');
-    handleSearch();
-  }
-};
-
-// 添加对DrowPopup组件的引用
-const drawerPopupRef = ref();
-
 // 设置表格列
 const setTableColumns = () => {
-  columns.value = [
+  const baseColumns: TableProps['columns'] = [
     {
       title: '账号与发布平台',
       dataIndex: 'name',
-      slots: { customRender: 'name' },
+      key: 'name',
       width: 150,
       ellipsis: true,
-      fixed: 'left', // 固定列
+      fixed: 'left',
-    } as TableProps['columns'][0],
+    },
   ];
+
   let dateHeaders: any[] = [];
   const { choseType } = dateSelectorModel.value;
+
   if (choseType === '周') {
     dateHeaders = DateUtils.getWeekDaysByDate(dateSelectorModel.value.weekModel, 0);
   } else if (choseType === '月') {
@@ -305,45 +310,90 @@ const setTableColumns = () => {
   // 添加日期列
   dateHeaders.forEach((item) => {
     const isWeekend = item.date?.getDay() === 0 || item.date?.getDay() === 6;
-    // 确保item.date存在再进行判断
     const todayFlag = item.date ? isToday(item.date) : false;
 
-    // 调试信息
-    if (todayFlag) {
-      console.log('Today column detected:', item);
-      console.log('Today flag value:', todayFlag);
-    }
-
     const columnConfig: any = {
-      title: `${item.weekday}`,
+      title: item.weekday,
       dataIndex: item.day.toString(),
-      slots: { customRender: 'dateCell' },
+      key: item.day.toString(),
-      date: item.date,
       width: 135,
       sorter: true,
-      weekday: item.weekday,
+      customRender: ({ text, record, index }) => {
-      todayFlag,
+        if (!text || !text.length) {
-      // 为周末设置特定的背景色
+          return h('div', { class: 'no-task' });
-      customCell: (record: any, rowIndex: number) => {
-        return {
-          class: [isWeekend ? 'weekend-column' : '', todayFlag ? 'today-column' : ''],
-        };
-      },
-      // 为今日添加特殊类名
-      customHeaderCell: (column: any) => {
-        return {
-          class: todayFlag ? 'today-column' : '',
-        };
-      },
-    };
-
-    // 更多调试信息
-    if (todayFlag) {
-      console.log('Column config for today:', columnConfig);
         }
 
-    columns.value.push(columnConfig as TableProps['columns'][0]);
+        if (text.length >= 3) {
+          return h('div', { class: 'task-more' }, [
+            h(TaskItem, {
+              task: text[0],
+              record: record,
+              onHandleTask: handleTaskAction,
+            }),
+            h(
+              Popover,
+              {
+                trigger: 'click',
+                placement: 'bottomRight',
+              },
+              {
+                content: () =>
+                  h(
+                    'div',
+                    { class: 'more-content' },
+                    text.slice(1).map((task) =>
+                      h(TaskItem, {
+                        task: task,
+                        record: record,
+                        onHandleTask: handleTaskAction,
+                      }),
+                    ),
+                  ),
+                default: () =>
+                  h(
+                    'div',
+                    {
+                      class: 'task-more-indicator',
+                      onClick: (e: Event) => e.stopPropagation(),
+                    },
+                    `还有${text.length - 1}项`,
+                  ),
+              },
+            ),
+          ]);
+        }
+
+        return h(
+          'div',
+          {},
+          text.map((task) =>
+            h(TaskItem, {
+              task: task,
+              record: record,
+              onHandleTask: handleTaskAction,
+            }),
+          ),
+        );
+      },
+      onCell: (record, index) => ({
+        style: {
+          backgroundColor: isWeekend ? '#fbfaff' : todayFlag ? '#6d4cfe' : 'transparent',
+        },
+        class: todayFlag ? 'today-column' : isWeekend ? 'weekend-column' : '',
+      }),
+      onHeaderCell: () => ({
+        style: {
+          backgroundColor: todayFlag ? '#6d4cfe' : 'transparent',
+          color: todayFlag ? 'white' : 'inherit',
+        },
+        class: todayFlag ? 'today-column' : '',
+      }),
+    };
+
+    baseColumns.push(columnConfig);
   });
+
+  columns.value = baseColumns;
 };
 
 // 当前日期头部计算
@@ -367,6 +417,7 @@ const currentDateHeaders = computed(() => {
 const handleSearch = () => {
   query.page = pageInfo.value.page;
   query.page_size = pageInfo.value.page_size;
+
   getTaskSchedules(query)
     .then((response) => {
       if (response.data) {
@@ -374,7 +425,6 @@ const handleSearch = () => {
         if (apiData) {
           data.value = processTableData(apiData);
         }
-        console.log('显示数据', data.value);
         pageInfo.value.total = response.data.total || apiData.length;
       }
     })
@@ -383,37 +433,26 @@ const handleSearch = () => {
     });
 };
 
-// 添加一个标志位来避免死循环
-let isDateSelectorUpdating = false;
 // 日期选择器变化处理
+let isDateSelectorUpdating = false;
 const handleDateSelectorChange = (value: any) => {
-  // 如果正在更新中，则跳过
+  if (isDateSelectorUpdating) return;
-  if (isDateSelectorUpdating) {
-    return;
-  }
 
   const newStartDate = value.dateRange.start;
   const newEndDate = value.dateRange.end;
 
-  // 添加空值检查以避免数组越界错误
   const currentStart =
     Array.isArray(query.execution_time) && query.execution_time.length > 0 ? query.execution_time[0] : null;
   const currentEnd =
     Array.isArray(query.execution_time) && query.execution_time.length > 1 ? query.execution_time[1] : null;
 
-  // 如果日期范围没有变化，则不执行后续操作
+  if (currentStart === newStartDate && currentEnd === newEndDate) return;
-  if (currentStart === newStartDate && currentEnd === newEndDate) {
-    return;
-  }
 
-  // 设置标志位
   isDateSelectorUpdating = true;
-
   query.execution_time = [newStartDate, newEndDate];
   setTableColumns();
   handleSearch();
 
-  // 在下一个事件循环重置标志位
   setTimeout(() => {
     isDateSelectorUpdating = false;
   }, 0);
@@ -421,7 +460,6 @@ const handleDateSelectorChange = (value: any) => {
 
 // 筛选条件变化处理
 const handleFilterChange = (filters: any) => {
-  console.log(filters);
   if (typeof filters === 'object' && filters !== null) {
     Object.keys(filters).forEach((key) => {
       switch (key) {
@@ -438,7 +476,6 @@ const handleFilterChange = (filters: any) => {
           query[key] = filters[key];
       }
     });
-    console.log(query);
     handleSearch();
   }
 };
@@ -454,41 +491,39 @@ const handleTableChange = (pagination: any, filters: any, sorter: any) => {
   handleSearch();
 };
 
-const handleCellClick = (record: any, rowIndex: any, column: any) => {
+// 单元格点击事件
+const handleCellClick = (record: any, column: any) => {
   const accountInfo = {
     id: record.id,
     name: record.name,
     platform: record.platform,
   };
-  const selectedDate = rowIndex.date;
 
-  // 检查选中的日期是否小于今天，如果是则不处理
+  const selectedDate = column.date;
   const today = new Date();
   today.setHours(0, 0, 0, 0);
   const selectedDateTime = new Date(selectedDate);
   selectedDateTime.setHours(0, 0, 0, 0);
 
   if (selectedDateTime < today) {
-    console.log('选择的日期已过去，不打开抽屉');
+    message.warning('选择的日期已过去，无法创建任务');
     return;
   }
 
-  console.log('selectedDate', selectedDate, accountInfo);
+  drawerPopupRef.value?.showDrawer(accountInfo, selectedDate);
-  drawerPopupRef.value.showDrawer(accountInfo, selectedDate);
 };
 
 // 任务操作处理
 const handleTaskAction = async (action: string, task: any, ...args: any[]) => {
-  console.log('handleTaskAction', action, task, args);
   switch (action) {
     case 'delete':
       currentTask.value = task;
       deleteTitle.value = task.type === 1 ? '删除内容稿件排期' : '删除选题排期';
-      deleteContent.value = `确认删除“${task.name || 'AI生成内容'}”吗？`;
+      deleteContent.value = `确认删除"${task.name || 'AI生成内容'}"吗？`;
       showModal.value = true;
       break;
+
     case 'edit-time':
-      console.log('handleTaskAction edit-time', task, args);
       editTaskSchedulesTime(task.id, { execution_time: args[0] }).then((res) => {
         if (res.code === 200) {
           message.success(res.message);
@@ -496,17 +531,19 @@ const handleTaskAction = async (action: string, task: any, ...args: any[]) => {
         }
       });
       break;
+
     case 'goto-detail':
       router.push(`/media-account/management-detail/${task.id}`);
       break;
+
     case 'ai-create':
       const res = await generateContent(task.id);
       if (res.code === 200) {
         message.success(res.message);
       }
       break;
+
     case 'edit-task':
-      console.log('edit-task', args[0], typeof args[0]);
       const accountInfo = {
         id: args[0].id,
         name: args[0].name,
@@ -515,23 +552,33 @@ const handleTaskAction = async (action: string, task: any, ...args: any[]) => {
       const selectedDate = task.execution_time;
       const date = new Date(selectedDate);
 
-      // 显示抽屉
+      drawerPopupRef.value?.showDrawer(accountInfo, date);
-      drawerPopupRef.value.showDrawer(accountInfo, date);
-
-      // 等待抽屉打开后再填充数据
       nextTick(() => {
-        // 将任务信息回填到draw-popup组件
+        drawerPopupRef.value?.fillTaskData(task);
-        drawerPopupRef.value.fillTaskData(task);
       });
       break;
   }
 };
 
+// 创建任务
+const handleAddTask = () => {
+  drawerPopupRef.value?.showDrawer();
+};
+
+const handleCreateTask = async (value: any) => {
+  const res = await createTask(value);
+  if (res && res.code === 200) {
+    message.success('创建成功');
+    handleSearch();
+  }
+};
+
 // 确认删除
 const handleDeleteConfirm = () => {
   if (currentTask.value) {
     delTaskSchedules(currentTask.value.id).then(() => {
       showModal.value = false;
+      message.success('删除成功');
       handleSearch();
     });
   }
@@ -539,7 +586,6 @@ const handleDeleteConfirm = () => {
 
 // 添加账号
 const handleAddAccount = () => {
-  // 跳转到添加账号页面的逻辑
   router.push('/media-account/add');
 };
 
@@ -586,7 +632,6 @@ const handlePageSizeChange = (current: number, size: number) => {
 
 // 初始化
 onMounted(() => {
-  // 确保在初始化时设置表格列和执行搜索
   setTableColumns();
   handleSearch();
   getOperators();
@@ -599,6 +644,8 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-height: 42px;
+  cursor: pointer;
 }
 
 .task-item {
@@ -613,7 +660,15 @@ onMounted(() => {
 .task-more {
   display: flex;
   flex-direction: column;
+}
+
+.task-more-indicator {
+  color: #8f959f;
+  height: 19px;
+  margin-left: 4px;
+  border-radius: 2px;
   cursor: pointer;
+  font-size: 12px;
 }
 
 .no-task {
@@ -621,6 +676,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
 
 /* 周末列样式 */
@@ -629,52 +685,59 @@ onMounted(() => {
 }
 
 /* 今日列样式 */
-:deep(th.today-column),
+:deep(.today-column) {
-:deep(td.today-column) {
   background-color: #6d4cfe !important;
 }
 
-:deep(th.today-column) .arco-table-th-item,
+:deep(.today-column .ant-table-cell) {
-:deep(th.today-column) .arco-table-th-item-title {
-  color: #6d4cfe !important;
-  background-color: white !important;
-  font-weight: bold;
-}
-
-:deep(th.today-column) .arco-table-th-item-title {
-  color: #6d4cfe !important;
-}
-
-/* 只对 td 单元格应用样式，避免影响表头 */
-:deep(td .ant-table-cell) {
-  padding: 0px !important;
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  min-height: 42px;
-}
-
-:deep(td .ant-table-cell:first-child) {
-  align-items: center;
-  justify-content: center;
-}
-
-:deep(td.today-column) .ant-table-cell-wrap {
   color: white !important;
 }
 
-/* 抽屉左侧圆角样式 */
+:deep(.today-column .ant-table-cell .task-item) {
-:deep(.rounded-left .ant-drawer-content) {
+  color: white !important;
-  border-top-left-radius: 8px !important;
-  border-bottom-left-radius: 8px !important;
 }
 
-/* 任务弹出框样式 */
+/* 添加表格分割线和固定行高 */
-:deep(.task-popup-content) {
+:deep(.ant-table) {
-  max-height: 300px;
+  border: 1px solid #f0f0f0;
-  overflow-y: auto;
+}
+:deep(.ant-table-container) {
+  border-left: 1px solid #f0f0f0;
+  border-right: 1px solid #f0f0f0;
+}
+:deep(.ant-table-thead > tr > th) {
+  border-right: 1px solid #f0f0f0 !important;
+  background-color: #fafafa;
+  font-weight: 600;
+  height: 42px;
+  padding: 8px 12px;
 }
 
+:deep(.ant-table-tbody > tr > td) {
+  border-right: 1px solid #f0f0f0 !important;
+  height: 42px;
+  padding: 8px 12px;
+  vertical-align: top;
+}
+
+/* 第一列垂直居中 */
+:deep(.ant-table-tbody > tr > td:first-child) {
+  vertical-align: middle !important;
+}
+
+/* 移除最后一列的右边框 */
+:deep(.ant-table-thead > tr > th:last-child),
+:deep(.ant-table-tbody > tr > td:last-child) {
+  border-right: none !important;
+}
+
+.task-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 42px;
+  cursor: pointer;
+}
 /* 分页样式 */
 .pagination-box {
   display: flex;
@@ -684,17 +747,11 @@ onMounted(() => {
   align-items: center;
 }
 
-/* 下拉框样式优化 */
-:deep(.ant-dropdown-open .anticon-down) {
-  transform: rotate(180deg);
-  transition: transform 0.2s ease;
-}
-
 .more-content {
   border-radius: 8px;
   background: #fff;
-
-  /* Shadow 2 */
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+  max-height: 300px;
+  overflow-y: auto;
 }
 </style>