引言

隨著日子一天一天過去
我們也快接近尾聲了
今天開始就是來優化我們的介面

書頁列表

來到檔案BookList.vue
然後加上:hover 效果

<template>
  <div>
    <div class="box-border flex justify-center p-4">
      <table class="text-center border-collapse">
        <thead>
          <tr>
            <th v-for="header in headers" :key="header.id">{{ header.text }}</th>
          </tr>
        </thead>
        <tbody class="text-left">
          <tr v-for="book in books" :key="book.id" hover="bg-gray-100 text-red">

            <td class="border-solid border-l-0 border-gray-2 p-2 hover:bg-gray-100 hover:text-blue-500">{{ book.bookTitle }}</td>

            <td border="solid l-0 gray-2" px-2>{{ book.author }}</td>
            <td border="solid l-0 gray-2" px-2>{{ book.publisher }}</td>
            <td border="solid l-0 gray-2" px-2>{{ book.publicationDate }}</td>
            <td border="solid l-0 r-0 gray-2" px-2 text="1em">
              <button b="transparent rd-6" bg="[#004AAD]" mr-1>
                <router-link class="i-ri:game-line"
                  text-white
                  no-underline
                  :to="{ name: routesStatus.BOOKINFOID, params: { id: book.id } }"
                  >Edit</router-link
                >
              </button>

              
              <button class="i-material-symbols:delete text-4 text-red-7" b="transparent rd-4" cursor-pointer @click="checkDelete(book.id)">
                Delete
              </button>
            </td>
          

          </tr>
        </tbody>
      </table>
    </div>

    <Pagination :currentPageValue="currentPageValue"></Pagination>
  
</template>

在<table> 我們新增了一個類別
table text-center border-collapse：text-center用於使表格中的文字水平居中，border-collapse用於合併相鄰儲存格的相似性，使表格看起來更整潔

hover 是UnoCSS用於定義滑鼠懸停狀態下的樣式
我們使用類別來設定滑鼠懸停時的背景顏色和文字顏色hover。

這張是沒有加上 border-collapse

有加上 border-collapse

是不是看起來不太一樣呢？

那今天就介紹到這裡喔