1175 lines
27 KiB
Vue
1175 lines
27 KiB
Vue
<template>
|
||
<!-- <uni-nav-bar
|
||
left-icon="left"
|
||
title="诊疗指南"
|
||
@clickLeft="goBack"
|
||
fixed
|
||
color="#8B2316"
|
||
height="180rpx"
|
||
:border="false"
|
||
backgroundColor="#eeeeee"
|
||
></uni-nav-bar> -->
|
||
<navBar title="诊疗指南" />
|
||
<view class="zhinan-page" v-if="tab == 'zhinan'">
|
||
<!-- 导航栏 -->
|
||
|
||
<!-- 固定搜索栏 -->
|
||
<view class="search-container-fixed filter-bar">
|
||
<view class="search-box" @click="goSearch">
|
||
<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">
|
||
<image
|
||
:src="docUrl + item.imgs"
|
||
mode="widthFix"
|
||
class="category-icon"
|
||
></image>
|
||
</view>
|
||
<view class="item-content">
|
||
<text class="category-title">{{ item.name }}</text>
|
||
<text class="category-count">(共{{ item.total }}份)</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="total">
|
||
<up-image :src="star1" width="85rpx" height="9rpx"></up-image>
|
||
<view class="count"> {{ total }}份文献</view>
|
||
<up-image :src="star2" width="85rpx" height="9rpx"></up-image>
|
||
</view>
|
||
</view>
|
||
<view class="qikan-page" v-else-if="tab == 'qikan'">
|
||
<!-- 导航头部 -->
|
||
|
||
<!-- 主要内容区域 -->
|
||
<view class="main-content">
|
||
<!-- 标签切换区域 -->
|
||
<view class="tab-section">
|
||
<view class="tab-container">
|
||
<view
|
||
class="tab-item"
|
||
:class="{ active: activeTab === 'daichawenxian' }"
|
||
@click="switchTabQikan('daichawenxian')"
|
||
>
|
||
<text class="tab-text">代查文献</text>
|
||
<view class="tab-underline">
|
||
<up-image
|
||
:src="activeImg"
|
||
width="48rpx"
|
||
height="18rpx"
|
||
v-if="activeTab === 'daichawenxian'"
|
||
></up-image>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="tab-item"
|
||
:class="{ active: activeTab === 'yingwenwenxian' }"
|
||
@click="switchTabQikan('yingwenwenxian')"
|
||
>
|
||
<text class="tab-text">英文文献</text>
|
||
<view class="tab-underline">
|
||
<up-image
|
||
:src="activeImg"
|
||
width="48rpx"
|
||
height="18rpx"
|
||
v-if="activeTab === 'yingwenwenxian'"
|
||
></up-image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 代查文献内容 -->
|
||
<view class="content-section" v-if="activeTab === 'daichawenxian'">
|
||
<!-- 顶部图标和说明 -->
|
||
|
||
<up-image :src="paperImg" width="100%"></up-image>
|
||
<!-- 表单区域 -->
|
||
<view class="form-section">
|
||
<!-- 接收邮箱 -->
|
||
<view class="form-group formemail">
|
||
<view class="form-label">
|
||
<text>接收邮箱</text>
|
||
<text class="required">*</text>
|
||
</view>
|
||
<view class="input-container">
|
||
<input
|
||
class="form-input"
|
||
type="text"
|
||
placeholder="请输入文献接收邮箱"
|
||
v-model="formData.email"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<!-- 文献单元列表 -->
|
||
<view
|
||
class="from-cell literature-item"
|
||
v-for="(literature, index) in literatureList"
|
||
:key="literature.id"
|
||
>
|
||
<!-- 文献类型标签 -->
|
||
<view class="form-group wenxian">
|
||
<view class="tag-container">
|
||
<view class="tag-item active">文献{{ index + 1 }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="formbox">
|
||
<!-- 文献名称 -->
|
||
<view class="form-group">
|
||
<view class="form-label">
|
||
<text>文献名称</text>
|
||
<text class="required">*</text>
|
||
</view>
|
||
<view class="input-container">
|
||
<textarea
|
||
class="form-textarea"
|
||
type="text"
|
||
placeholder="不支持关键字/广泛查询"
|
||
v-model="literature.literatureName"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 作者 -->
|
||
<view class="form-group">
|
||
<view class="form-label">
|
||
<text>作者</text>
|
||
</view>
|
||
<view class="input-container">
|
||
<input
|
||
class="form-input"
|
||
type="text"
|
||
placeholder="请输入作者姓名"
|
||
v-model="literature.author"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 期刊名称 -->
|
||
<view class="form-group">
|
||
<view class="form-label">
|
||
<text>期刊名称</text>
|
||
</view>
|
||
<view class="input-container">
|
||
<input
|
||
class="form-input"
|
||
type="text"
|
||
placeholder="请输入期刊名称"
|
||
v-model="literature.journalName"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 删除按钮 -->
|
||
<view
|
||
class="delbox"
|
||
v-if="literatureList.length > 1"
|
||
@click="removeLiterature(index)"
|
||
>
|
||
<up-image :src="delImg" width="40rpx" height="52rpx"></up-image>
|
||
</view>
|
||
|
||
<!-- 文献分隔线 -->
|
||
<view
|
||
class="literature-divider"
|
||
v-if="index < literatureList.length - 1"
|
||
></view>
|
||
</view>
|
||
<!-- 添加代查文献按钮 -->
|
||
<view class="add-literature-section" v-if="literatureList.length < 5">
|
||
<view class="add-button" @click="addLiterature">
|
||
<up-icon name="plus" size="18" color="#4A90E2"></up-icon>
|
||
<text class="add-text">添加代查文献</text>
|
||
</view>
|
||
<view class="limit-tip">
|
||
<view class="imgbox">
|
||
<up-image
|
||
:src="countImg"
|
||
width="186rpx"
|
||
height="74rpx"
|
||
></up-image>
|
||
</view>
|
||
<view class="count"
|
||
>还可添加{{ 5 - literatureList.length }}篇</view
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 常见问题 -->
|
||
<view class="faq-section">
|
||
<up-image
|
||
:src="questionImg"
|
||
width="100%"
|
||
mode="widtFix"
|
||
height="540rpx"
|
||
></up-image>
|
||
</view>
|
||
<view class="tips">
|
||
<view class="title">注意</view>
|
||
<view class="row">每次至多提交5篇文献代查</view>
|
||
<view class="row">每篇文献代查消耗50肝胆积分，代查成功后扣除</view>
|
||
<view class="row">不支持模糊代查，请尽可能详细提供所需文献信息</view>
|
||
</view>
|
||
<view class="btnbox">
|
||
<up-image
|
||
:src="submitImg"
|
||
width="100%"
|
||
height="160rpx"
|
||
mode="widtFix"
|
||
></up-image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 英文文献内容（暂时显示占位内容） -->
|
||
<view class="content-section" v-if="activeTab === 'yingwenwenxian'">
|
||
<view class="placeholder-content">
|
||
<uni-icons type="info" size="60" color="#999"></uni-icons>
|
||
<text class="placeholder-text">英文文献功能正在开发中...</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 筛选弹窗 -->
|
||
<view class="filter-popup" v-if="showFilter" @click="hideFilterPopup">
|
||
<view class="filter-content" @click.stop>
|
||
<!-- 筛选标签网格 -->
|
||
<view class="filter-tags">
|
||
<view
|
||
class="tag-item"
|
||
v-for="(tag, index) in filterTags"
|
||
:key="index"
|
||
:class="{ active: tag.selected }"
|
||
@click="toggleTag(index)"
|
||
>
|
||
{{ tag.NAME }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部按钮 -->
|
||
<view class="filter-buttons">
|
||
<view class="btn-reset" @click="resetFilter">重置</view>
|
||
<view class="btn-confirm" @click="confirmFilter">确定</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from "vue";
|
||
import { onShow, onBackPress } 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";
|
||
import star1 from "@/static/xingxing1.png";
|
||
import star2 from "@/static/xingxing2.png";
|
||
import paperImg from "@/static/paper_bg.png";
|
||
import activeImg from "@/static/route.png";
|
||
import emailImg from "@/static/email_bg.png";
|
||
import countImg from "@/static/sheng_bg.png";
|
||
import questionImg from "@/static/paper_question.png";
|
||
import submitImg from "@/static/paper_submit.png";
|
||
import delImg from "@/static/delete_paper.png";
|
||
import api from "@/api/api.js";
|
||
import docUrl from "@/utils/docUrl.js";
|
||
import navTo from "@/utils/navTo.js";
|
||
import navBar from "@/components/navBar/navBar.vue";
|
||
const total = ref(0);
|
||
const tab = ref("zhinan");
|
||
// 响应式数据
|
||
const searchText = ref("");
|
||
const guidelineCategories = ref([]);
|
||
const isFilterActive = ref(false);
|
||
// 指南库检索结果（如需在列表页使用）
|
||
const searchLibraryList = ref([]);
|
||
const filterTags = ref([]);
|
||
const keywords = ref("");
|
||
onBackPress(() => {
|
||
try {
|
||
uni.sendNativeEvent(
|
||
"goTabbarPage",
|
||
{
|
||
msg: "home",
|
||
},
|
||
(ret) => {
|
||
console.log(ret);
|
||
}
|
||
);
|
||
} catch (e) {
|
||
console.log(e);
|
||
}
|
||
plus.runtime.quit();
|
||
return true;
|
||
});
|
||
// 页面加载
|
||
onMounted(() => {
|
||
loadGuideTypes();
|
||
loadSearchLibrary();
|
||
loadGuideTags();
|
||
});
|
||
const showFilter = ref(false);
|
||
// 筛选弹窗相关方法
|
||
const showFilterPopup = () => {
|
||
showFilter.value = true;
|
||
};
|
||
const goSearch = () => {
|
||
uni.sendNativeEvent(
|
||
"goHomeSearch",
|
||
{
|
||
msg: "goHomeSearch",
|
||
},
|
||
(ret) => {
|
||
console.log(ret);
|
||
}
|
||
);
|
||
};
|
||
const hideFilterPopup = () => {
|
||
showFilter.value = false;
|
||
};
|
||
|
||
const toggleTag = (index) => {
|
||
filterTags.value[index].selected = !filterTags.value[index].selected;
|
||
isFilterActive.value = filterTags.value.some((tag) => tag.selected);
|
||
};
|
||
|
||
const resetFilter = () => {
|
||
// 清空所有已选标签
|
||
filterTags.value.forEach((tag) => (tag.selected = false));
|
||
// 关闭筛选激活态
|
||
isFilterActive.value = false;
|
||
// 清空关键字
|
||
keywords.value = "";
|
||
// 刷新列表数据（可按需保留或移除）
|
||
// currentPage.value = 1;
|
||
// hasMoreData.value = true;
|
||
//loadVideoData(true);
|
||
};
|
||
|
||
const confirmFilter = () => {
|
||
const selectedTags = filterTags.value.filter((tag) => tag.selected);
|
||
console.log("选中的筛选标签:", selectedTags);
|
||
for (var i = 0; i < selectedTags.length; i++) {
|
||
if (keywords.value) {
|
||
keywords.value += "," + selectedTags[i].NAME;
|
||
} else {
|
||
keywords.value = selectedTags[i].NAME;
|
||
}
|
||
|
||
navTo({
|
||
url: "/pages_app/hot/hot?keywords=" + encodeURIComponent(keywords.value),
|
||
});
|
||
}
|
||
isFilterActive.value = true;
|
||
hideFilterPopup();
|
||
// 根据选中的标签重新加载数据
|
||
};
|
||
|
||
onShow(() => {
|
||
// 页面显示时可以刷新数据
|
||
loadGuideTags();
|
||
});
|
||
|
||
// 加载指南分类（guideType）
|
||
const loadGuideTypes = async () => {
|
||
try {
|
||
const res = await api.guideType({});
|
||
guidelineCategories.value = res.data;
|
||
for (var i = 0; i < res.data.length; i++) {
|
||
total.value = total.value + res.data[i].total;
|
||
}
|
||
} catch (e) {
|
||
console.error("加载指南分类失败:", e);
|
||
}
|
||
};
|
||
|
||
// 调用治疗指南列表（searchLibraryU）
|
||
const loadSearchLibrary = async () => {
|
||
try {
|
||
const res = await api.searchLibraryU({
|
||
page: 1,
|
||
pageSize: 20,
|
||
type: 1,
|
||
keywords: "",
|
||
});
|
||
if (res && res.code === 200) {
|
||
searchLibraryList.value = res.data;
|
||
}
|
||
} catch (e) {
|
||
console.error("加载指南库失败:", e);
|
||
}
|
||
};
|
||
|
||
// 加载指南标签列表
|
||
const loadGuideTags = async () => {
|
||
try {
|
||
const res = await api.guideTag({
|
||
type: 3,
|
||
});
|
||
console.log("指南标签API响应:", res);
|
||
if (res && res.code === 200 && res.data) {
|
||
// 将API返回的标签数据转换为筛选标签格式
|
||
filterTags.value = res.data.map((tag) => ({
|
||
...tag,
|
||
selected: false,
|
||
}));
|
||
console.log("指南标签加载成功:", filterTags.value);
|
||
}
|
||
} catch (e) {
|
||
console.error("加载指南标签失败:", e);
|
||
}
|
||
};
|
||
|
||
// 进入指南分类
|
||
const enterCategory = (item) => {
|
||
navTo({
|
||
url: `/pages_app/zhinanList/zhinanList?typeUuid=${item.uuid}&title=${item.name}`,
|
||
});
|
||
};
|
||
|
||
// 显示筛选对话框
|
||
const showFilterDialog = () => {
|
||
console.log("显示筛选");
|
||
// 可以实现筛选弹窗
|
||
};
|
||
|
||
// 切换底部标签
|
||
const switchTab = (tabName) => {
|
||
console.log("切换到:", tabName);
|
||
tab.value = tabName;
|
||
};
|
||
|
||
// 返回
|
||
const goBack = () => {
|
||
uni.navigateBack({
|
||
fail() {
|
||
uni.redirectTo({
|
||
url: "/pages/index/index",
|
||
});
|
||
},
|
||
});
|
||
};
|
||
// 响应式数据
|
||
const activeTab = ref("daichawenxian");
|
||
|
||
// 表单数据
|
||
const formData = ref({
|
||
email: "",
|
||
literatureName: "",
|
||
author: "",
|
||
journalName: "",
|
||
});
|
||
|
||
// 文献列表数据
|
||
const literatureList = ref([
|
||
{
|
||
id: 1,
|
||
literatureName: "",
|
||
author: "",
|
||
journalName: "",
|
||
},
|
||
]);
|
||
|
||
// 常见问题数据
|
||
const faqList = ref([
|
||
{
|
||
question: "如何查找文献？",
|
||
answer:
|
||
"请提供准确的文献标题、作者和期刊信息，我们将为您查找并发送到指定邮箱。",
|
||
expanded: false,
|
||
},
|
||
{
|
||
question: "查找需要多长时间？",
|
||
answer: "通常在1-3个工作日内完成文献查找并发送到您的邮箱。",
|
||
expanded: false,
|
||
},
|
||
{
|
||
question: "支持哪些文献类型？",
|
||
answer: "支持国内外期刊论文、会议论文、学位论文等多种文献类型。",
|
||
expanded: false,
|
||
},
|
||
]);
|
||
|
||
// 切换顶部标签
|
||
const switchTabQikan = (tab) => {
|
||
activeTab.value = tab;
|
||
};
|
||
|
||
// 切换底部导航
|
||
const switchBottomTab = (tab) => {
|
||
if (tab === "zhinan") {
|
||
uni.navigateTo({
|
||
url: "/pages_app/zhinan/zhinan",
|
||
});
|
||
} else if (tab === "tools") {
|
||
uni.showToast({
|
||
title: "功能开发中",
|
||
icon: "none",
|
||
});
|
||
}
|
||
};
|
||
|
||
// 添加文献
|
||
const addLiterature = () => {
|
||
if (literatureList.value.length >= 5) {
|
||
uni.showToast({
|
||
title: "最多只能添加5篇文献",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
const newLiterature = {
|
||
id: Date.now(), // 使用时间戳作为唯一ID
|
||
literatureName: "",
|
||
author: "",
|
||
journalName: "",
|
||
};
|
||
|
||
literatureList.value.push(newLiterature);
|
||
|
||
uni.showToast({
|
||
title: "添加成功",
|
||
icon: "none",
|
||
});
|
||
};
|
||
|
||
// 删除文献
|
||
const removeLiterature = (index) => {
|
||
if (literatureList.value.length <= 1) {
|
||
uni.showToast({
|
||
title: "至少保留一篇文献",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
literatureList.value.splice(index, 1);
|
||
|
||
uni.showToast({
|
||
title: "删除成功",
|
||
icon: "none",
|
||
});
|
||
};
|
||
|
||
// 切换FAQ展开状态
|
||
const toggleFaq = (index) => {
|
||
faqList.value[index].expanded = !faqList.value[index].expanded;
|
||
};
|
||
</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;
|
||
$nav-height: 140rpx;
|
||
$border-color: #e0e0e0;
|
||
// 尺寸变量
|
||
$border-radius: 8px;
|
||
$border-radius-small: 6px;
|
||
$padding: 15px;
|
||
$padding-small: 10px;
|
||
$accent-color: #4a90e2;
|
||
.zhinan-page {
|
||
background-color: $bg-color;
|
||
min-height: 100vh;
|
||
padding-top: 20rpx; // 导航栏高度
|
||
}
|
||
|
||
// 固定搜索容器
|
||
.search-container-fixed {
|
||
position: fixed;
|
||
top: calc(var(--status-bar-height) + 44px); // 导航栏高度
|
||
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: 30rpx;
|
||
|
||
margin: 0 30rpx;
|
||
margin-top: calc(
|
||
var(--status-bar-height) + 44px + 106rpx
|
||
); // 为固定搜索栏留出空间 (搜索栏高度约80rpx + 边距)
|
||
|
||
.guideline-item {
|
||
margin-top: 20rpx;
|
||
width: calc(33.333% - 14rpx);
|
||
background-color: $white;
|
||
margin-left: 20rpx;
|
||
overflow: hidden;
|
||
|
||
transition: transform 0.2s ease;
|
||
&:nth-child(3n + 1) {
|
||
margin-left: 0;
|
||
}
|
||
&:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.item-image {
|
||
width: 100%;
|
||
|
||
overflow: hidden; /* 防止溢出 */
|
||
}
|
||
|
||
.category-icon {
|
||
width: 100%;
|
||
height: 320rpx; /* 高度自适应 */
|
||
display: block; /* 去除底部间隙 */
|
||
}
|
||
|
||
.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: 0rpx;
|
||
background-color: $white;
|
||
}
|
||
.total {
|
||
margin-top: 0rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding-bottom: 40rpx;
|
||
.count {
|
||
margin-top: 50rpx;
|
||
font-size: 30rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.qikan-page {
|
||
background: #f6f6f6;
|
||
min-height: 100vh;
|
||
padding-top: 0rpx;
|
||
padding-bottom: 100rpx; // 为底部导航预留空间
|
||
}
|
||
|
||
.main-content {
|
||
flex: 1;
|
||
}
|
||
|
||
// 标签切换区域 - 固定在顶部
|
||
.tab-section {
|
||
position: fixed;
|
||
top: $nav-height; // 140rpx
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 80;
|
||
background-color: #a5d9fe;
|
||
padding: 0 30rpx;
|
||
|
||
.tab-container {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100rpx;
|
||
|
||
.tab-item {
|
||
position: relative;
|
||
margin-right: 60rpx;
|
||
padding: 20rpx 0;
|
||
|
||
.tab-text {
|
||
font-size: 32rpx;
|
||
color: #333 !important;
|
||
font-weight: 500;
|
||
}
|
||
|
||
&.active {
|
||
.tab-text {
|
||
color: $primary-color;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.tab-underline {
|
||
position: absolute;
|
||
bottom: 15rpx;
|
||
left: 50%;
|
||
right: 0;
|
||
transform: translateX(-50%);
|
||
height: 18rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 内容区域
|
||
.content-section {
|
||
background-color: $bg-color;
|
||
min-height: calc(100vh - 340rpx);
|
||
margin-top: 100rpx; // 为固定的标签切换区域留出空间
|
||
}
|
||
|
||
// 头部横幅
|
||
.header-banner {
|
||
background: linear-gradient(135deg, #87ceeb, #b0e0e6);
|
||
margin: 20rpx 30rpx;
|
||
border-radius: 20rpx;
|
||
padding: 40rpx 30rpx;
|
||
|
||
.banner-content {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.icon-container {
|
||
position: relative;
|
||
margin-right: 30rpx;
|
||
|
||
.sparkle-icon {
|
||
position: absolute;
|
||
top: -10rpx;
|
||
right: -10rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.banner-text {
|
||
flex: 1;
|
||
|
||
.main-title {
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
color: $text-primary;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.sub-title {
|
||
font-size: 24rpx;
|
||
color: $text-secondary;
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 表单区域
|
||
.form-section {
|
||
margin: -156rpx 30rpx 20rpx;
|
||
border-radius: 20rpx;
|
||
padding: 0rpx 0rpx;
|
||
.wenxian {
|
||
margin-top: 40rpx;
|
||
|
||
overflow: hidden;
|
||
}
|
||
.from-cell {
|
||
position: relative;
|
||
.delbox {
|
||
top: 10rpx;
|
||
right: 30rpx;
|
||
position: absolute;
|
||
}
|
||
}
|
||
.formbox {
|
||
padding: 30rpx 30rpx 30rpx;
|
||
background: #fff url("@/static/email_bg.png") no-repeat 0rpx 0;
|
||
background-size: 100% 148rpx;
|
||
border-radius: 10rpx;
|
||
position: relative;
|
||
z-index: 8;
|
||
}
|
||
.formemail {
|
||
padding: 0 30rpx;
|
||
height: 148rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
border-radius: 20rpx;
|
||
background: #fff url("@/static/email_bg.png") no-repeat 0rpx 0 !important;
|
||
background-size: cover !important;
|
||
}
|
||
|
||
// 文献分隔线
|
||
.literature-divider {
|
||
height: 20rpx;
|
||
margin: 20rpx 0;
|
||
background-color: #f0f0f0;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 40rpx;
|
||
display: flex;
|
||
|
||
background-size: 100% 652rpx;
|
||
overflow: hidden;
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.form-label {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 160rpx;
|
||
font-size: 28rpx;
|
||
color: $text-primary;
|
||
font-weight: 500;
|
||
|
||
.required {
|
||
color: #ff4757;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.input-container {
|
||
flex: 1;
|
||
.form-input,
|
||
.form-textarea {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
padding: 0 20rpx;
|
||
background: #f6f6f6;
|
||
border: 2rpx solid $border-color;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
color: $text-primary;
|
||
background-color: $white;
|
||
box-sizing: border-box;
|
||
&::placeholder {
|
||
color: $text-light;
|
||
}
|
||
|
||
&:focus {
|
||
border-color: $accent-color;
|
||
}
|
||
}
|
||
.form-textarea {
|
||
padding: 20rpx;
|
||
height: 200rpx;
|
||
}
|
||
}
|
||
|
||
.tag-container {
|
||
.tag-item {
|
||
display: inline-block;
|
||
padding: 16rpx 32rpx;
|
||
background-color: #008aff;
|
||
color: $white;
|
||
border-radius: 10rpx 10rpx 0 0;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
.from-cell .form-group:nth-child(1) {
|
||
margin-bottom: 0;
|
||
}
|
||
.formbox .form-group:nth-child(1) {
|
||
margin-bottom: 40rpx;
|
||
}
|
||
}
|
||
|
||
// 添加文献区域
|
||
.add-literature-section {
|
||
position: relative;
|
||
margin-top: 40rpx;
|
||
padding-top: 40rpx;
|
||
border-top: 2rpx solid $border-color;
|
||
|
||
.add-button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 80rpx;
|
||
margin: 0 20rpx;
|
||
border: 2rpx solid #0197f1;
|
||
border-radius: 40rpx;
|
||
background-color: rgba(74, 144, 226, 0.05);
|
||
|
||
.add-text {
|
||
margin-left: 10rpx;
|
||
font-size: 28rpx;
|
||
color: #0197f1;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.limit-tip {
|
||
position: absolute;
|
||
right: 0;
|
||
top: -10rpx;
|
||
text-align: center;
|
||
margin-top: 20rpx;
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
|
||
width: 186rpx;
|
||
height: 74rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
.imgbox {
|
||
top: 0;
|
||
position: absolute;
|
||
}
|
||
.count {
|
||
margin-top: -20rpx;
|
||
position: relative;
|
||
z-index: 3;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 常见问题区域
|
||
.faq-section {
|
||
margin: 0rpx 30rpx;
|
||
background-color: $white;
|
||
border-radius: 20rpx;
|
||
padding: 1rpx 1rpx;
|
||
}
|
||
.tips {
|
||
font-size: 24rpx;
|
||
margin: 30rpx 30rpx;
|
||
color: #999;
|
||
}
|
||
.btnbox {
|
||
margin: 0 30rpx;
|
||
}
|
||
// 占位内容
|
||
.placeholder-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 400rpx;
|
||
|
||
.placeholder-text {
|
||
margin-top: 30rpx;
|
||
font-size: 28rpx;
|
||
color: $text-light;
|
||
}
|
||
}
|
||
// 筛选弹窗样式
|
||
.filter-popup {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
// background-color: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
z-index: 9999;
|
||
|
||
.filter-content {
|
||
margin-top: 247rpx;
|
||
overflow-y: scroll;
|
||
background-color: $white;
|
||
// border-radius: 20rpx 20rpx 0 0;
|
||
padding: 20rpx 30rpx 60rpx;
|
||
width: 100%;
|
||
max-height: 80vh;
|
||
|
||
.filter-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20rpx;
|
||
margin-bottom: 60rpx;
|
||
max-height: 65vh;
|
||
overflow-y: auto;
|
||
|
||
.tag-item {
|
||
background-color: #f8f8f8;
|
||
color: $gray-dark;
|
||
padding: 8rpx 0; /* 去掉左右padding，仅保留上下 */
|
||
border-radius: 30rpx;
|
||
font-size: 26rpx;
|
||
border: 2rpx solid #efefef;
|
||
transition: all 0.3s ease;
|
||
width: 152rpx; /* 固定宽度 */
|
||
text-align: center; /* 文本居中 */
|
||
|
||
&.active {
|
||
background-color: #fff;
|
||
color: $theme-color;
|
||
border-color: $theme-color;
|
||
}
|
||
}
|
||
}
|
||
|
||
.filter-buttons {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
position: fixed;
|
||
bottom: 30rpx;
|
||
left: 30rpx;
|
||
right: 30rpx;
|
||
background-color: #fff; /* 背景色为白色 */
|
||
|
||
.btn-reset,
|
||
.btn-confirm {
|
||
flex: 1;
|
||
height: 70rpx;
|
||
border-radius: 14rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.btn-reset {
|
||
background-color: $white;
|
||
color: $theme-color;
|
||
border: 2rpx solid $theme-color;
|
||
}
|
||
|
||
.btn-confirm {
|
||
border: 2rpx solid $theme-color;
|
||
background-color: $theme-color;
|
||
color: $white;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|