1132 lines
24 KiB
Vue
1132 lines
24 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 } 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('');
|
||
// 页面加载
|
||
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>
|