first commit
This commit is contained in:
zoujiandong
@@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
title="诊疗指南"
|
||||
@clickLeft="goBack"
|
||||
fixed
|
||||
color="#8B2316"
|
||||
height="140rpx"
|
||||
:border="false"
|
||||
backgroundColor="#eeeeee"
|
||||
></uni-nav-bar>
|
||||
<view class="zhinan-page">
|
||||
<!-- 导航栏 -->
|
||||
|
||||
|
||||
<!-- 固定搜索栏 -->
|
||||
<view class="search-container-fixed filter-bar">
|
||||
<view class="search-box">
|
||||
<uni-icons type="search" size="16" color="#999"></uni-icons>
|
||||
<text class="search-text">搜索</text>
|
||||
</view>
|
||||
|
||||
<view class="divider"></view>
|
||||
<view class="filter-item" @click="showFilterPopup">
|
||||
<text>筛选</text>
|
||||
<up-image :src="isFilterActive ? filterOn : filter" width="30rpx" height="30rpx" ></up-image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 指南分类网格 -->
|
||||
<view class="guidelines-grid">
|
||||
<view
|
||||
class="guideline-item"
|
||||
v-for="(item, index) in guidelineCategories"
|
||||
:key="index"
|
||||
@click="enterCategory(item)"
|
||||
>
|
||||
<view class="item-image" :style="{ backgroundColor: item.bgColor }">
|
||||
<image :src="item.icon" mode="aspectFit" class="category-icon"></image>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<text class="category-title">{{ item.title }}</text>
|
||||
<text class="category-count">(共{{ item.count }}份)</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<view class="bottom-tabbar">
|
||||
<view class="tab-item active" @click="switchTab('zhinan')">
|
||||
<text class="tab-text active">诊疗指南</text>
|
||||
</view>
|
||||
<view class="tab-item" @click="switchTab('qikan')">
|
||||
<text class="tab-text">期刊杂志</text>
|
||||
</view>
|
||||
<view class="tab-item" @click="switchTab('tools')">
|
||||
<text class="tab-text">常用工具</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { onShow } from "@dcloudio/uni-app";
|
||||
import upImg from "@/static/cb_up.png"
|
||||
import downImg from "@/static/cb_up.png"
|
||||
import filter from "@/static/cb_screen_no.png"
|
||||
import filterOn from "@/static/cb_screen_yes.png"
|
||||
// 响应式数据
|
||||
const searchText = ref('');
|
||||
const guidelineCategories = ref([]);
|
||||
|
||||
// 页面加载
|
||||
onMounted(() => {
|
||||
initGuidelineData();
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
// 页面显示时可以刷新数据
|
||||
});
|
||||
|
||||
// 初始化指南数据
|
||||
const initGuidelineData = () => {
|
||||
guidelineCategories.value = [
|
||||
{
|
||||
title: '肝肿瘤相关',
|
||||
count: 0,
|
||||
bgColor: '#2C2C2C',
|
||||
icon: '/static/liver_icon.png',
|
||||
category: 'liver'
|
||||
},
|
||||
{
|
||||
title: '感染相关',
|
||||
count: 0,
|
||||
bgColor: '#9C6BCF',
|
||||
icon: '/static/infection_icon.png',
|
||||
category: 'infection'
|
||||
},
|
||||
{
|
||||
title: '消化相关',
|
||||
count: 0,
|
||||
bgColor: '#5CB3E8',
|
||||
icon: '/static/digestion_icon.png',
|
||||
category: 'digestion'
|
||||
},
|
||||
{
|
||||
title: '中医/中西医结合',
|
||||
count: 192,
|
||||
bgColor: '#4A90E2',
|
||||
icon: '/static/tcm_icon.png',
|
||||
category: 'tcm'
|
||||
},
|
||||
{
|
||||
title: '新型冠状病毒肺炎',
|
||||
count: 450,
|
||||
bgColor: '#1C1C1C',
|
||||
icon: '/static/covid_icon.png',
|
||||
category: 'covid'
|
||||
},
|
||||
{
|
||||
title: 'AASLD',
|
||||
count: 63,
|
||||
bgColor: '#FF6B35',
|
||||
icon: '/static/aasld_icon.png',
|
||||
category: 'aasld'
|
||||
},
|
||||
{
|
||||
title: 'EASL',
|
||||
count: 75,
|
||||
bgColor: '#1E88E5',
|
||||
icon: '/static/easl_icon.png',
|
||||
category: 'easl'
|
||||
},
|
||||
{
|
||||
title: '其他指南',
|
||||
count: 928,
|
||||
bgColor: '#26C6DA',
|
||||
icon: '/static/other_icon.png',
|
||||
category: 'other'
|
||||
},
|
||||
{
|
||||
title: '国内指南',
|
||||
count: 375,
|
||||
bgColor: '#42A5F5',
|
||||
icon: '/static/domestic_icon.png',
|
||||
category: 'domestic'
|
||||
},
|
||||
{
|
||||
title: '共识指导',
|
||||
count: 0,
|
||||
bgColor: '#66BB6A',
|
||||
icon: '/static/consensus_icon.png',
|
||||
category: 'consensus'
|
||||
},
|
||||
{
|
||||
title: '专家解读',
|
||||
count: 0,
|
||||
bgColor: '#FFA726',
|
||||
icon: '/static/expert_icon.png',
|
||||
category: 'expert'
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
// 进入指南分类
|
||||
const enterCategory = (item) => {
|
||||
console.log('进入分类:', item.category);
|
||||
uni.navigateTo({
|
||||
url: `/pages/guidelineList/guidelineList?category=${item.category}&title=${item.title}`
|
||||
});
|
||||
};
|
||||
|
||||
// 显示筛选对话框
|
||||
const showFilterDialog = () => {
|
||||
console.log('显示筛选');
|
||||
// 可以实现筛选弹窗
|
||||
};
|
||||
|
||||
// 切换底部标签
|
||||
const switchTab = (tabName) => {
|
||||
console.log('切换到:', tabName);
|
||||
switch(tabName) {
|
||||
case 'qikan':
|
||||
uni.switchTab({
|
||||
url: '/pages/qikan/qikan'
|
||||
});
|
||||
break;
|
||||
case 'tools':
|
||||
uni.switchTab({
|
||||
url: '/pages/tools/tools'
|
||||
});
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// 返回
|
||||
const goBack = () => {
|
||||
uni.navigateBack({
|
||||
fail() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// SCSS Variables
|
||||
$primary-color: #8B2316;
|
||||
$bg-color: #f5f5f5;
|
||||
$white: #fff;
|
||||
$text-primary: #333;
|
||||
$text-secondary: #666;
|
||||
$text-light: #999;
|
||||
$primary-color: #ff6b6b;
|
||||
$theme-color: #8B2316;
|
||||
$white: #fff;
|
||||
$gray-bg: #f5f5f5;
|
||||
$gray-light: #eee;
|
||||
$gray-medium: #999;
|
||||
$gray-dark: #666;
|
||||
$text-color: #333;
|
||||
|
||||
// 尺寸变量
|
||||
$border-radius: 8px;
|
||||
$border-radius-small: 6px;
|
||||
$padding: 15px;
|
||||
$padding-small: 10px;
|
||||
.zhinan-page {
|
||||
background-color: $bg-color;
|
||||
min-height: 100vh;
|
||||
padding-top: 140rpx; // 导航栏高度
|
||||
}
|
||||
|
||||
// 固定搜索容器
|
||||
.search-container-fixed {
|
||||
position: fixed;
|
||||
top: 140rpx; // 导航栏高度
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 90;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 30rpx 30rpx;
|
||||
background-color: $white;
|
||||
gap: 20rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
// 筛选栏
|
||||
.filter-bar {
|
||||
background-color: $white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $gray-light;
|
||||
|
||||
.search-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
.search-text {
|
||||
font-size: 14px;
|
||||
color: $gray-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background-color: $gray-medium;
|
||||
margin: 0 $padding;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
flex:1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
// 指南网格
|
||||
.guidelines-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 30rpx;
|
||||
gap: 20rpx;
|
||||
margin-top: 100rpx; // 为固定搜索栏留出空间 (搜索栏高度约80rpx + 边距)
|
||||
|
||||
.guideline-item {
|
||||
width: calc(33.333% - 14rpx);
|
||||
background-color: $white;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.item-image {
|
||||
height: 160rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.category-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
padding: 20rpx 16rpx;
|
||||
text-align: center;
|
||||
|
||||
.category-title {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: $text-primary;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.category-count {
|
||||
font-size: 22rpx;
|
||||
color: $text-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 底部导航
|
||||
.bottom-tabbar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100rpx;
|
||||
background-color: $white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
z-index: 100;
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
height: 100rpx;
|
||||
gap: 8rpx;
|
||||
&.active {
|
||||
color: #fff;
|
||||
background-color: #8B2316;
|
||||
}
|
||||
.tab-icon {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-size: 32rpx;
|
||||
color: $text-secondary;
|
||||
&.active {
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-item:nth-child(2){
|
||||
border-right: 2rpx solid #eee;
|
||||
border-left: 2rpx solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
// 为网格添加底部边距，避免被tabbar遮挡
|
||||
.guidelines-grid {
|
||||
padding-bottom: 140rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user