典籍知识问答典籍查询界面前端界面设计效果实现

根据组内负责前端界面设计的同学的界面设计，进行典籍查询前端界面的实现

1.实现效果

2.前端代码

ClassicView.vue

<template>

  <div class="classics">

    <img

        className="back"

        alt="Back"

        src="https://c.animaapp.com/m9pqi0c3GNaMeT/img/back.png"

      />

    <div class="hero-section">

      <div class="main-area">

        <div class="frame">

          <div class="text-wrapper">中医典籍</div>

        </div>

        <div class="frame-wrapper">

          <div class="div">

            <button

              v-for="tab in tabs"

              :key="tab"

              @click="selectedTab = tab"

              :class="['text-wrapper-3', { 'text-wrapper-2': selectedTab === tab }]"

            >

              {{ tab }}

            </button>

          </div>

        </div>

        <div class="div-wrapper">

          <div class="frame-2">

            <div

              class="frame-3"

              v-for="book in store.books"

              :key="book.id"

            >

              <img class="rectangle" :src="book.coverUrl" alt="cover" />

              <div class="text-wrapper-6">{{ book.title }}</div>

              <div class="text-wrapper-7">{{ book.author }}</div>

              <div class="text-wrapper-8">{{ book.summary }}</div>

              <button class="button-blue-instance text-wrapper-15" @click="goToDetail(book.id)">

                学习

              </button>

            </div>

          </div>

        </div>

        <div class="pagination-list">

          <div class="pagination-page">

            <div class="text-wrapper-9" @click="prevPage" :disabled="page === 1">‹</div>

          </div>

          <div class="element-wrapper">

            <div class="element">{{ page }}</div>

          </div>

          <div class="pagination-page">

            <div class="text-wrapper-9" @click="nextPage">›</div>

          </div>

        </div>

        <div class="tabs" style="position: absolute; top: 20px; right: 150px;">

          <input

  v-model="searchQuery"

  placeholder="搜索标题或作者"

  class="search-input text-wrapper-14"

  style="

    margin-right: 20px;

    padding: 8px 16px;

    border: 2px solid var(--huilan);

    border-radius: 24px;

    background-color: var(--grayswhite);

    transition: all 0.3s ease;

    width: 240px;

  "

/>

          <button

            class="button-blue text-wrapper-15"

            @click="$router.push('/admin-classics')"

          >

            后台管理

          </button>

        </div>

      </div>

    </div>

  </div>

</template>

<script setup>

import { ref, onMounted, watch } from 'vue'

import { useRouter } from 'vue-router'

import { useClassicStore } from '@/stores/classic'

import { tabs, formatCategory } from '@/utils/classic'

const router = useRouter()

const store = useClassicStore()

const page = ref(1)

const pageSize = 12

const searchQuery = ref('')

const selectedTab = ref('所有类型')

const fetchBooks = async () => {

  await store.loadBooks({

    page: page.value - 1,

    size: pageSize,

    category: formatCategory(selectedTab.value),

    keyword: searchQuery.value || null

  })

}

const goToDetail = (bookId) => {

  router.push({ path: '/classic-detail', query: { book_id: bookId } })

}

const nextPage = () => {

  if (page.value < store.totalPages) page.value++

}

const prevPage = () => {

  if (page.value > 1) page.value--

}

onMounted(fetchBooks)

watch([selectedTab, searchQuery, page], fetchBooks)

</script>

<style>

/* 覆盖可能需要调整的样式 */

.classics {

  position: relative;

  height: 100vh;

  overflow: hidden;

}

.main-area {

  overscroll-behavior: contain; /* 防止滚动穿透 */

}

</style>
其余store、api、utils、css代码就不做展示了