bht-app/src/pages/knowledgeBase/knowledgeBase.vue

<!--
 * @Author: XHC
 * @Date: 2025-05-19 15:18:26
 * @LastEditors: XHC
 * @LastEditTime: 2025-05-22 15:49:57
 * @Description: 
-->
<template>
    <view class="knowledgeBase">
		<view class="search-box">
			<uni-search-bar class="search" radius="15" bgColor="#EDF4FD" placeholder="搜索线路名称" clearButton="auto" cancelButton="none" @confirm="search" />
			<view class="search-title">
				<view
					v-for="(item, index) in titleList"
					:key="index"
					:class="titleCurIndex == index ? 'active' : ''"
					class="title-item grey"
					@click="changeTitle(index)"
				>
					{{ item.name }}
				</view>
				<uni-icons fontFamily="iconfont" color="#fff" :size="24">{{'&#xe621;'}}</uni-icons>
			</view>
		</view>
		<view class="list-box" v-if="titleCurIndex == 0">
			<uni-card class="list-card" v-for="(item, index) in listData" :key="index">
				<view class="head"><text class="title">{{ item.title }}</text></view>
				<view class="num grey">{{ item.num }}</view>
				<view class="info-box grey">
					<uni-row :gutter="30">
						<uni-col :span="16">
							<text class="info"><uni-icons fontFamily="iconfont" color="#1469BC">{{'&#xe753;'}}</uni-icons> <text>{{ item.departments }}</text></text>
						</uni-col>
						<uni-col :span="8">
							<text class="info"><uni-icons fontFamily="iconfont" color="#808185">{{'&#xe74e;'}}</uni-icons> {{ item.time }}</text>
						</uni-col>
					</uni-row>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue';


// 标题
let titleCurIndex = ref(0)
let titleList = reactive([
	{ id: 1, name: "全部" },
    { id: 2, name: "发电机" },
    { id: 3, name: "发电机" },
    { id: 4, name: "发电机" },
    { id: 5, name: "发电机" },
])

// 列表数据
const listData = reactive([
	{ title: '白鹤滩电站运行巡检作业指导书', num: 'Q/BHTHP.ZDS 7008-2024', departments: '白鹤滩水力发电厂运行部', time: '2025-02-20' },
	{ title: '白鹤滩电站运行巡检作业指导书', num: 'Q/BHTHP.ZDS 7008-2024', departments: '白鹤滩水力发电厂运行部', time: '2025-02-20' },
	{ title: '白鹤滩电站运行巡检作业指导书', num: 'Q/BHTHP.ZDS 7008-2024', departments: '白鹤滩水力发电厂运行部', time: '2025-02-20' },
	{ title: '白鹤滩电站运行巡检作业指导书', num: 'Q/BHTHP.ZDS 7008-2024', departments: '白鹤滩水力发电厂运行部', time: '2025-02-20' },
	{ title: '白鹤滩电站运行巡检作业指导书', num: 'Q/BHTHP.ZDS 7008-2024', departments: '白鹤滩水力发电厂运行部', time: '2025-02-20' },
	{ title: '白鹤滩电站运行巡检作业指导书', num: 'Q/BHTHP.ZDS 7008-2024', departments: '白鹤滩水力发电厂运行部', time: '2025-02-20' },
	{ title: '白鹤滩电站运行巡检作业指导书', num: 'Q/BHTHP.ZDS 7008-2024', departments: '白鹤滩水力发电厂运行部', time: '2025-02-20' },
	{ title: '白鹤滩电站运行巡检作业指导书', num: 'Q/BHTHP.ZDS 7008-2024', departments: '白鹤滩水力发电厂运行部', time: '2025-02-20' },
	{ title: '白鹤滩电站运行巡检作业指导书', num: 'Q/BHTHP.ZDS 7008-2024', departments: '白鹤滩水力发电厂运行部', time: '2025-02-20' },
	{ title: '白鹤滩电站运行巡检作业指导书', num: 'Q/BHTHP.ZDS 7008-2024', departments: '白鹤滩水力发电厂运行部', time: '2025-02-20' },
])
// 搜索
const search = () => {

}
// 切换标题
const changeTitle = (index) => {
	titleCurIndex.value = index
}
</script>

<style lang="scss" scoped>
.knowledgeBase {
	background: url('@/static/image/index/bg.png') no-repeat;
	background-size: 100% auto;
	.search-box {
		background: #ffffff47;
		border-radius: 10rpx;
		margin: 0 30rpx;
		padding-bottom: 5rpx;
	}
	.search-title {
		width: 100%;
		display: flex;
	    justify-content: space-around;
		.title-item {
			color: #ffffffb8;
			padding-bottom: 10rpx;
		}
		.active {
			color: #fff;
			font-weight: bold;
			border-bottom: 6rpx solid #fff;
		}
	}

	.list-box {
		.info {
			margin-right: 0;
			width: 100%;
		}
	}
}
</style>