1462 lines
28 KiB
Vue
1462 lines
28 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 头部搜索栏 -->
|
||
<view class="header" :style="{ backgroundColor: headerBgColor }">
|
||
<view class="header-content">
|
||
<view class="header-left">
|
||
<view class="calendar-icon">
|
||
<up-image :src="nosign" width="60rpx" height="60rpx" ></up-image>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="search-container" @click="focus">
|
||
<view class="mask"></view>
|
||
<uni-search-bar
|
||
placeholder="搜索视频、精品课、课件、指南等"
|
||
radius="8"
|
||
cancelButton="none"
|
||
bgColor="#ffffff"
|
||
placeholderColor="#999999"
|
||
></uni-search-bar>
|
||
</view>
|
||
<view class="header-right">
|
||
<view class="message-icon">
|
||
<uni-icons type="email" size="32" color="#fff"></uni-icons>
|
||
<view class="red-dot"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 轮播图 -->
|
||
<view class="banner-section">
|
||
|
||
<uni-swiper-dot
|
||
:info="bannerList"
|
||
:current="current"
|
||
field="content"
|
||
:mode="mode"
|
||
:dots-styles="dotsStyles"
|
||
>
|
||
<swiper class="swiper-box" @change="change" :current="current">
|
||
<swiper-item v-for="(item, index) in bannerList" :key="index">
|
||
<view class="banner-item" :style="{ background: item.background }">
|
||
<view class="banner-content">
|
||
<view class="banner-text">
|
||
<text class="banner-title">{{ item.title }}</text>
|
||
<text class="banner-subtitle">{{ item.subtitle }}</text>
|
||
</view>
|
||
<view class="banner-scene">
|
||
<view class="scene-left">
|
||
<view class="palm-tree">🌴</view>
|
||
</view>
|
||
<view class="scene-center">
|
||
<view class="beach-umbrella">🏖️</view>
|
||
<view class="beach-ball">🏐</view>
|
||
</view>
|
||
<view class="scene-right">
|
||
<view class="doctor-desk">👨⚕️</view>
|
||
<view class="bookshelf">📚</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</uni-swiper-dot>
|
||
</view>
|
||
|
||
|
||
<!-- 功能网格 -->
|
||
<view class="grid-section">
|
||
<uni-grid :column="4" :highlight="true" @change="onClick">
|
||
<uni-grid-item v-for="(item, index) in gridList" :key="index">
|
||
<view class="grid-item">
|
||
<up-image :src="item.icon" width="75rpx" height="75rpx" ></up-image>
|
||
<text class="grid-text">{{ item.text }}</text>
|
||
</view>
|
||
</uni-grid-item>
|
||
</uni-grid>
|
||
</view>
|
||
<!-- 消息通知滚动播放 -->
|
||
<view class="notice-section">
|
||
<view class="notice-container">
|
||
<view class="notice-icon">
|
||
|
||
</view>
|
||
<view class="notice-content">
|
||
<swiper class="notice-swiper"
|
||
:vertical="true"
|
||
:autoplay="true"
|
||
:interval="3000"
|
||
:duration="1000"
|
||
:circular="true"
|
||
@change="onNoticeChange"
|
||
>
|
||
<swiper-item v-for="(item, index) in noticeList" :key="index">
|
||
<view class="notice-cell">
|
||
<view class="timebox">
|
||
<view class="top">
|
||
<up-image :src="livebg" width="59rpx" height="27rpx" ></up-image>
|
||
<up-image :src="jing_sign" width="28rpx" height="28rpx" ></up-image>
|
||
</view>
|
||
<view class="date">
|
||
8月6日
|
||
</view>
|
||
</view>
|
||
<view class="bar"></view>
|
||
<view class="notice-text oneline" @click="onNoticeClick(item)">
|
||
{{ item.content }}
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 专题E站 -->
|
||
<view class="special-section">
|
||
<view class="section-title">
|
||
<text class="title-text">专题E站</text>
|
||
</view>
|
||
<view class="special-content">
|
||
<view class="special-item" v-for="(item, index) in specialList" :key="index">
|
||
<view class="special-card" :style="{ background: item.bgColor }">
|
||
<view class="special-left">
|
||
<text class="special-title">{{ item.title }}</text>
|
||
<text class="special-desc">{{ item.desc }}</text>
|
||
</view>
|
||
<view class="special-right">
|
||
<view class="special-icon">{{ item.icon }}</view>
|
||
<view class="special-arrow">›</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 精品课 -->
|
||
<view class="course-section">
|
||
<view class="section-header">
|
||
<text class="section-title-text">精品课</text>
|
||
<view class="more-link">
|
||
<text class="more-text">更多</text>
|
||
<uni-icons type="right" size="32rpx" color="#999"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<scroll-view class="course-scroll" scroll-x="true">
|
||
<view class="course-list">
|
||
<view class="course-item" v-for="(item, index) in courseList" :key="index">
|
||
<view class="course-card">
|
||
<up-image :src="item.avatar" width="464rpx" height="262rpx" ></up-image>
|
||
<view class="course-content">
|
||
<view class="course-title twoline">{{ item.title }}</view>
|
||
<view class="course-subtitle">{{ item.status }}</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 精彩回放 -->
|
||
<view class="replay-section">
|
||
<view class="section-header">
|
||
<text class="section-title-text">精彩回放</text>
|
||
<view class="more-link">
|
||
<text class="more-text">更多<uni-icons type="right" size="32rpx" color="#999"></uni-icons></text>
|
||
</view>
|
||
</view>
|
||
<view class="replay-grid">
|
||
<view class="replay-item" v-for="(item, index) in replayList" :key="index" @click="onReplayClick(item)">
|
||
<view class="replay-card">
|
||
|
||
<up-image :src="item.avatar" width="330rpx" height="186rpx" ></up-image>
|
||
<!-- <image :src="item.avatar" mode="aspectFill" class="doctor-avatar"></image> -->
|
||
|
||
<view class="replay-content">
|
||
<text class="replay-text">{{ item.content }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 实用指南 -->
|
||
<view class="guide-section">
|
||
<!-- 顶部导航标签 -->
|
||
<view class="bg">
|
||
<up-image :src="bg" width="481rpx" height="112rpx" ></up-image>
|
||
</view>
|
||
<view class="guide-tabs">
|
||
<view class="tab-item"
|
||
v-for="(tab, index) in guideTabs"
|
||
:key="index"
|
||
:class="{ active: currentGuideTab === index }"
|
||
@click="switchGuideTab(index)"
|
||
>
|
||
<text class="tab-text">{{ tab.name }}</text>
|
||
<view class="tab-underline" v-if="currentGuideTab === index"></view>
|
||
</view>
|
||
<view class="tab-more" @click="onGuideMore">
|
||
<text class="more-text">更多</text>
|
||
<uni-icons type="right" size="32rpx" color="#999"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 内容区域 -->
|
||
<view class="guide-content">
|
||
|
||
|
||
<view class="guide-list">
|
||
<view class="guide-item" v-for="(item, index) in guideList" :key="index" @click="onGuideClick(item)">
|
||
<view class="guide-info">
|
||
<text class="guide-item-title twoline">{{ item.title }}</text>
|
||
|
||
</view>
|
||
<view class="guide-action">
|
||
<text v-if="item.actionType === 'view'" class="action-view">查看</text>
|
||
<up-icon name="download" color="#8D2316" size="28" v-else></up-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 自定义Tabbar -->
|
||
<custom-tabbar
|
||
ref="tabbarRef"
|
||
@tabChange="onTabChange"
|
||
></custom-tabbar>
|
||
</view>
|
||
<up-overlay :show="showSign" >
|
||
<view class="signwrap">
|
||
<view class="signbox">
|
||
<view class="close" @click="showSign=false"></view>
|
||
<view class="signbg">
|
||
<up-image :src="signImg" width="604rpx" height="964rpx" ></up-image>
|
||
</view>
|
||
<view class="signcontent">
|
||
<view class="day">今天是我们相识的第211天</view>
|
||
<view class="signtotal">本周共签到2次</view>
|
||
<view class="signcontinue">已经连续签到2天</view>
|
||
<view class="tip">连续签到获取更多积分</view>
|
||
<view class="news" @click="showSign=false">
|
||
我是新闻内容
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</up-overlay>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted, nextTick, computed } from 'vue';
|
||
import { onShow, onLoad, onPageScroll } from "@dcloudio/uni-app";
|
||
import CustomTabbar from '@/compoents/tabBar/tabBar.vue';
|
||
import navTo from "@/utils/navTo.js";
|
||
import bg from "@/static/more_bg.png"
|
||
import patient from "@/static/icon_home_my_patient.png"
|
||
import video from "@/static/icon_home_video.png"
|
||
import consult from "@/static/icon_home_my_public.png"
|
||
import library from "@/static/icon_home_my_library.png"
|
||
import course from "@/static/jingpingke.png"
|
||
import more from "@/static/home_more.png"
|
||
import livebg from "@/static/livebg.png"
|
||
import jing_sign from "@/static/jing_sign.png"
|
||
import bo_bg from "@/static/bo_bg.png"
|
||
import nosign from "@/static/home_no_qiandao_icon.png"
|
||
import sign from "@/static/home_qiandao_icon.png"
|
||
import signImg from "@/static/sign_in_bng_big.png"
|
||
const showSign=ref(false)
|
||
// 定义refs
|
||
const tabbarRef = ref(null);
|
||
|
||
// 滚动相关状态
|
||
const scrollTop = ref(0);
|
||
const bannerHeight = 400; // 轮播图高度，单位rpx
|
||
|
||
// 获取设备像素比
|
||
const getPixelRatio = () => {
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
return systemInfo.pixelRatio || 1;
|
||
};
|
||
const focus=()=>{
|
||
navTo({
|
||
url:'/pages_app/search/search'
|
||
})
|
||
}
|
||
// 计算头部背景色
|
||
const headerBgColor = computed(() => {
|
||
// 获取屏幕宽度来计算rpx到px的转换比例
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
const screenWidth = systemInfo.screenWidth;
|
||
const rpxToPx = screenWidth / 750; // 750rpx = 屏幕宽度
|
||
|
||
const maxScroll = bannerHeight * rpxToPx; // 400rpx转换为px
|
||
const currentScroll = scrollTop.value;
|
||
const progress = Math.min(currentScroll / maxScroll, 1);
|
||
|
||
// 从透明渐变到绿色 (#8B2316)
|
||
const alpha = progress;
|
||
return `rgba(139, 34, 22, ${alpha})`;
|
||
});
|
||
|
||
// 轮播图相关
|
||
const current = ref(0);
|
||
const mode = ref('dot');
|
||
const dotsStyles = reactive({
|
||
backgroundColor: '#ddd',
|
||
border: '1px solid #ddd',
|
||
color: '#fff',
|
||
selectedBackgroundColor: '#ff0000',
|
||
selectedBorder: '1px solid #ff0000'
|
||
});
|
||
|
||
// 轮播图数据
|
||
const bannerList = reactive([{
|
||
title: '邹建东专家工作室',
|
||
subtitle: '北京肝胆相照公益基金会',
|
||
background: 'linear-gradient(135deg, #007aff, #0056b3)'
|
||
}]);
|
||
|
||
// 功能网格数据
|
||
const gridList = reactive([
|
||
{
|
||
icon: patient,
|
||
text: '我的患者'
|
||
},
|
||
{
|
||
icon: video,
|
||
text: '肝胆视频'
|
||
},
|
||
{
|
||
icon: consult,
|
||
text: '公益咨询'
|
||
},
|
||
{
|
||
icon: consult,
|
||
text: '指南杂志'
|
||
},
|
||
{
|
||
icon: '',
|
||
text: '肝胆新闻'
|
||
},
|
||
{
|
||
icon: '',
|
||
text: '肝胆课件'
|
||
},
|
||
{
|
||
icon: course,
|
||
text: '精品课'
|
||
},
|
||
{
|
||
icon: more,
|
||
text: '更多'
|
||
}
|
||
]);
|
||
|
||
// 专题E站数据
|
||
const specialList = reactive([
|
||
{
|
||
title: '肝病医生的临床计算器和决策辅助工具',
|
||
desc: '肝胆相照®——医学常用工具',
|
||
icon: '🔧',
|
||
bgColor: '#1e3a8a'
|
||
},
|
||
{
|
||
title: '徐医感染 疑难发热及感染分享',
|
||
desc: '',
|
||
icon: '🏥',
|
||
bgColor: '#10b981'
|
||
},
|
||
{
|
||
title: '爱肝微视 全国首档爱肝科普短视频',
|
||
desc: '免费领取福利',
|
||
icon: '📱',
|
||
bgColor: '#1e3a8a'
|
||
}
|
||
]);
|
||
|
||
// 消息通知数据
|
||
const noticeList = reactive([
|
||
{
|
||
id: 1,
|
||
content: '欢迎使用肝胆相照医生版，新功能上线啦！',
|
||
time: '10:30',
|
||
type: 'system'
|
||
},
|
||
{
|
||
id: 2,
|
||
content: '您有3个新的患者咨询待回复',
|
||
time: '09:15',
|
||
type: 'patient'
|
||
},
|
||
{
|
||
id: 3,
|
||
content: '今日有2场直播会议即将开始',
|
||
time: '08:45',
|
||
type: 'meeting'
|
||
},
|
||
{
|
||
id: 4,
|
||
content: '新的医学指南已更新，请及时查看',
|
||
time: '昨天',
|
||
type: 'guide'
|
||
}
|
||
]);
|
||
|
||
// 精品课数据
|
||
const courseList = reactive([
|
||
{
|
||
title: '王晓光医生发起了新的病例讨论，邀请您参与',
|
||
status:'已完结'
|
||
},
|
||
{
|
||
title: '王晓光医生发起了新的病例讨论，邀请您参与',
|
||
status:'已完结'
|
||
},
|
||
{
|
||
title: '王晓光医生发起了新的病例讨论，邀请您参与',
|
||
status:'已完结'
|
||
},
|
||
]);
|
||
|
||
// 精彩回放数据
|
||
const replayList = reactive([
|
||
{
|
||
id: 1,
|
||
avatar: '/static/c1.png',
|
||
content: 'Xxx医生发起了新的病例讨论,邀请您参与',
|
||
type: 'case_discussion'
|
||
},
|
||
{
|
||
id: 2,
|
||
avatar: '/static/c2.png',
|
||
content: 'Xxx医生发起了新的',
|
||
type: 'new_topic'
|
||
},
|
||
{
|
||
id: 3,
|
||
avatar: '/static/c3.png',
|
||
content: 'Xxx医生发起了新的病例讨论,邀请与......',
|
||
type: 'case_discussion'
|
||
},
|
||
{
|
||
id: 4,
|
||
avatar: '/static/c4.png',
|
||
content: 'Xxx医生发起了新的病例讨论,邀请您参与',
|
||
type: 'case_discussion'
|
||
}
|
||
]);
|
||
|
||
// 实用指南标签页
|
||
const guideTabs = reactive([
|
||
{ name: '实用指南', type: 'guide' },
|
||
{ name: '课件分享', type: 'courseware' }
|
||
]);
|
||
|
||
// 当前选中的标签页
|
||
const currentGuideTab = ref(0);
|
||
|
||
// 实用指南数据
|
||
const guideList = reactive([
|
||
{
|
||
id: 1,
|
||
title: '一学就会的keynote教程番外篇】keynote 线下',
|
||
description: '实训你们要的带练来了',
|
||
actionType: 'view',
|
||
type: 'guide'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '胆源性肝脏疾病——专题研讨会成功举行',
|
||
description: '',
|
||
actionType: 'view',
|
||
type: 'guide'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '肝病学新领域:肝硬化合并慢性肾脏病|深度综',
|
||
description: '述大的并慢性肾脏病|深度综述并慢并慢性.......',
|
||
actionType: 'download',
|
||
type: 'guide'
|
||
},
|
||
{
|
||
id: 4,
|
||
title: '【一学就会的keynote教程番外篇】keynote 线',
|
||
description: '下实训你们要的带练来了',
|
||
actionType: 'download',
|
||
type: 'guide'
|
||
},
|
||
{
|
||
id: 5,
|
||
title: '段钟平教授:终末期肝病营养治疗的价值及研',
|
||
description: '究进展',
|
||
actionType: 'download',
|
||
type: 'guide'
|
||
}
|
||
]);
|
||
|
||
// 轮播图切换事件
|
||
const change = (e) => {
|
||
current.value = e.detail.current;
|
||
};
|
||
|
||
// 消息通知切换事件
|
||
const onNoticeChange = (e) => {
|
||
console.log('消息通知切换:', e.detail.current);
|
||
};
|
||
|
||
// 消息通知点击事件
|
||
const onNoticeClick = (item) => {
|
||
console.log('点击消息通知:', item);
|
||
uni.showToast({
|
||
title: `查看${item.content}`,
|
||
icon: 'none'
|
||
});
|
||
|
||
// 根据消息类型跳转到不同页面
|
||
switch(item.type) {
|
||
case 'patient':
|
||
uni.navigateTo({
|
||
url: '/pages/patient/consultation'
|
||
});
|
||
break;
|
||
case 'meeting':
|
||
uni.navigateTo({
|
||
url: '/pages/meeting/live'
|
||
});
|
||
break;
|
||
case 'guide':
|
||
uni.navigateTo({
|
||
url: '/pages/guide/list'
|
||
});
|
||
break;
|
||
default:
|
||
uni.navigateTo({
|
||
url: '/pages/notice/detail?id=' + item.id
|
||
});
|
||
}
|
||
};
|
||
|
||
// 查看更多消息
|
||
const onNoticeMore = () => {
|
||
console.log('查看更多消息');
|
||
uni.navigateTo({
|
||
url: '/pages/notice/list'
|
||
});
|
||
};
|
||
|
||
// 精彩回放点击事件
|
||
const onReplayClick = (item) => {
|
||
console.log('点击精彩回放:', item);
|
||
uni.showToast({
|
||
title: `查看${item.content}`,
|
||
icon: 'none'
|
||
});
|
||
|
||
// 根据类型跳转到不同页面
|
||
switch(item.type) {
|
||
case 'case_discussion':
|
||
uni.navigateTo({
|
||
url: '/pages/discussion/detail?id=' + item.id
|
||
});
|
||
break;
|
||
case 'new_topic':
|
||
uni.navigateTo({
|
||
url: '/pages/topic/detail?id=' + item.id
|
||
});
|
||
break;
|
||
default:
|
||
uni.navigateTo({
|
||
url: '/pages/replay/detail?id=' + item.id
|
||
});
|
||
}
|
||
};
|
||
|
||
// 网格点击事件
|
||
const onClick = (e) => {
|
||
console.log('点击了第' + e.detail.index + '个');
|
||
uni.showToast({
|
||
title: `点击了${gridList[e.detail.index].text}`,
|
||
icon: 'none'
|
||
});
|
||
};
|
||
|
||
// Tab切换事件
|
||
const onTabChange = (data) => {
|
||
console.log('Tab切换:', data);
|
||
uni.showToast({
|
||
title: `切换到${data.item.text}`,
|
||
icon: 'none'
|
||
});
|
||
};
|
||
|
||
// 切换实用指南标签页
|
||
const switchGuideTab = (index) => {
|
||
currentGuideTab.value = index;
|
||
};
|
||
|
||
// 查看更多实用指南
|
||
const onGuideMore = () => {
|
||
console.log('查看更多实用指南');
|
||
uni.navigateTo({
|
||
url: '/pages/guide/list'
|
||
});
|
||
};
|
||
|
||
// 实用指南点击事件
|
||
const onGuideClick = (item) => {
|
||
console.log('点击实用指南:', item);
|
||
uni.showToast({
|
||
title: `查看${item.title}`,
|
||
icon: 'none'
|
||
});
|
||
// 根据类型跳转到不同页面
|
||
if (item.type === 'guide') {
|
||
uni.navigateTo({
|
||
url: '/pages/guide/detail?id=' + item.id
|
||
});
|
||
} else if (item.type === 'courseware') {
|
||
uni.navigateTo({
|
||
url: '/pages/courseware/list'
|
||
});
|
||
}
|
||
};
|
||
|
||
// 测试tabbar功能的方法
|
||
const testTabbar = () => {
|
||
nextTick(() => {
|
||
if (tabbarRef.value) {
|
||
// 设置徽章数量
|
||
tabbarRef.value.setBadge(1, 10);
|
||
|
||
// 显示红点
|
||
tabbarRef.value.showRedDot(2);
|
||
|
||
// 3秒后隐藏红点
|
||
setTimeout(() => {
|
||
tabbarRef.value.hideRedDot(2);
|
||
}, 3000);
|
||
}
|
||
});
|
||
};
|
||
|
||
// 获取tabbar状态
|
||
const getTabbarStatus = () => {
|
||
if (tabbarRef.value) {
|
||
const currentTab = tabbarRef.value.getCurrentTab();
|
||
console.log('当前tab状态:', currentTab);
|
||
}
|
||
};
|
||
|
||
// 更新tabbar数据
|
||
const updateTabbarData = () => {
|
||
if (tabbarRef.value) {
|
||
const newTabList = [
|
||
{
|
||
icon: 'home',
|
||
activeIcon: 'home-filled',
|
||
text: '首页',
|
||
color: '#999999',
|
||
activeColor: '#007aff',
|
||
badge: 0,
|
||
showRedDot: false,
|
||
pagePath: '/pages/index/index'
|
||
},
|
||
{
|
||
icon: 'mic',
|
||
activeIcon: 'mic-filled',
|
||
text: '患教学堂',
|
||
color: '#999999',
|
||
activeColor: '#007aff',
|
||
badge: 15,
|
||
showRedDot: true,
|
||
pagePath: '/pages/education/education'
|
||
}
|
||
];
|
||
tabbarRef.value.updateTabList(newTabList);
|
||
}
|
||
};
|
||
|
||
// 页面滚动监听
|
||
onPageScroll((e) => {
|
||
scrollTop.value = e.scrollTop;
|
||
// 调试信息
|
||
if (scrollTop.value % 50 === 0) { // 每滚动50px打印一次
|
||
console.log('滚动位置:', scrollTop.value, '背景色:', headerBgColor.value);
|
||
}
|
||
});
|
||
|
||
// 页面加载
|
||
onLoad(() => {
|
||
console.log('首页加载完成');
|
||
});
|
||
|
||
// 页面显示
|
||
onShow(() => {
|
||
console.log('首页显示');
|
||
});
|
||
|
||
// 组件挂载后
|
||
onMounted(() => {
|
||
console.log('首页组件已挂载');
|
||
// 页面加载完成后测试tabbar功能
|
||
testTabbar();
|
||
|
||
// 5秒后获取tabbar状态
|
||
setTimeout(() => {
|
||
getTabbarStatus();
|
||
}, 5000);
|
||
});
|
||
|
||
// 暴露方法给父组件（如果需要）
|
||
defineExpose({
|
||
testTabbar,
|
||
getTabbarStatus,
|
||
updateTabbarData
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.signwrap{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height:100%;
|
||
}
|
||
.signbox{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index:0;
|
||
}
|
||
.signbox .close{
|
||
position:absolute;
|
||
right:0;
|
||
height:60rpx;
|
||
width:60rpx;
|
||
opacity: 0;
|
||
background:#fff;
|
||
z-index:2;
|
||
border-radius: 50%;;
|
||
}
|
||
.signcontent{
|
||
width:100%;
|
||
top:0;
|
||
position: absolute;
|
||
z-index:1;
|
||
}
|
||
.signcontent .day{
|
||
margin-top: 384rpx;
|
||
text-align: center;
|
||
}
|
||
.signtotal{
|
||
margin-top: 30rpx;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
}
|
||
.signcontinue{
|
||
font-size: 30rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.signcontent .tip{
|
||
margin-top: 40rpx;
|
||
color:red;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
}
|
||
.signcontent .news{
|
||
margin: 196rpx 60rpx 0;
|
||
height: 116rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
.signbg{
|
||
width:604rpx;
|
||
height:964rpx;
|
||
}
|
||
.container {
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
padding-bottom: 120rpx; /* 为tabbar留出空间 */
|
||
}
|
||
|
||
/* 状态栏 */
|
||
.status-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10rpx 30rpx;
|
||
background-color: #ffffff;
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.status-center {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
/* 头部搜索栏 */
|
||
.header {
|
||
top:0rpx;
|
||
position: fixed;
|
||
left:0rpx;
|
||
right:0rpx;
|
||
height: 210rpx;
|
||
z-index: 99;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.header-content {
|
||
padding: 0 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 80rpx;
|
||
|
||
}
|
||
|
||
.header-left, .header-right {
|
||
position: relative;
|
||
}
|
||
|
||
.calendar-icon, .message-icon {
|
||
position: relative;
|
||
}
|
||
|
||
.red-dot {
|
||
position: absolute;
|
||
top: -4rpx;
|
||
right: -4rpx;
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
background-color: #ff0000;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.search-container {
|
||
flex: 1;
|
||
position: relative;
|
||
|
||
}
|
||
.search-container .mask{
|
||
position: absolute;
|
||
width:100%;
|
||
height:100%;
|
||
z-index:1;
|
||
}
|
||
/* 轮播图 */
|
||
.banner-section {
|
||
position: relative;
|
||
|
||
}
|
||
|
||
/* 消息通知 */
|
||
.notice-section {
|
||
margin: 20rpx 0rpx;
|
||
background: url('@/static/lunbo_bg.png') no-repeat 0 0;
|
||
|
||
background-size: cover;
|
||
|
||
overflow: hidden;
|
||
}
|
||
|
||
.notice-container {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0rpx 30rpx;
|
||
}
|
||
|
||
.notice-icon {
|
||
margin-right: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.notice-content {
|
||
flex: 1;
|
||
height: 94rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.notice-swiper {
|
||
height: 100%;
|
||
}
|
||
|
||
.notice-item {
|
||
height: 94rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
cursor: pointer;
|
||
}
|
||
|
||
.notice-text {
|
||
flex: 1;
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.notice-time {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.notice-more {
|
||
margin-left: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10rpx;
|
||
}
|
||
|
||
.swiper-box {
|
||
height: 400rpx;
|
||
}
|
||
|
||
.banner-item {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.banner-content {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
padding: 40rpx;
|
||
color: white;
|
||
}
|
||
|
||
.banner-text {
|
||
z-index: 2;
|
||
}
|
||
|
||
.banner-title {
|
||
display: block;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.banner-subtitle {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.banner-scene {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
font-size: 48rpx;
|
||
}
|
||
|
||
/* 功能网格 */
|
||
.grid-section {
|
||
padding: 30rpx;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.grid-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 40rpx 20rpx;
|
||
}
|
||
|
||
.grid-icon {
|
||
font-size: 64rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.grid-text {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 专题E站 */
|
||
.special-section {
|
||
margin: 30rpx;
|
||
}
|
||
|
||
.section-title {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.title-text {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.special-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.special-card {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
border-radius: 16rpx;
|
||
color: white;
|
||
}
|
||
|
||
.special-left {
|
||
flex: 1;
|
||
}
|
||
|
||
.special-title {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.special-desc {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.special-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.special-icon {
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.special-arrow {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 精品课 */
|
||
.course-section {
|
||
|
||
background-color: #fff;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
.section-header {
|
||
padding: 35rpx 30rpx 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.section-title-text {
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.more-link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.more-text {
|
||
font-size: 30rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.course-scroll {
|
||
white-space: nowrap;
|
||
margin-left: 30rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.course-list {
|
||
display: flex;
|
||
gap: 30rpx;
|
||
width:auto;
|
||
}
|
||
|
||
.course-item {
|
||
flex:1;
|
||
background-color: #f4f4f4;
|
||
width: 464rpx;
|
||
margin-right: 30rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.1);
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.course-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.course-icon {
|
||
font-size: 48rpx;
|
||
}
|
||
|
||
.course-ribbon {
|
||
background-color: #007aff;
|
||
color: white;
|
||
padding: 4rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.course-content {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.course-title {
|
||
white-space: normal;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
margin: 20rpx;
|
||
}
|
||
|
||
.course-subtitle {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #8B2316;
|
||
margin: 20rpx;
|
||
text-align: right;
|
||
padding-bottom: 25rpx;
|
||
|
||
}
|
||
|
||
.course-teacher {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.course-footer {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.course-tags {
|
||
display: flex;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.tag {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
/* 精彩回放 */
|
||
.replay-section {
|
||
margin: 30rpx;
|
||
}
|
||
|
||
.replay-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.replay-item {
|
||
cursor: pointer;
|
||
height:305rpx;
|
||
}
|
||
|
||
.replay-card {
|
||
background-color: white;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.replay-card:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.replay-image {
|
||
width: 100%;
|
||
height: 200rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.doctor-avatar {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.replay-content {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.replay-text {
|
||
font-size: 26rpx;
|
||
height: 72rpx;
|
||
color: #333;
|
||
line-height: 1.4;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 实用指南 */
|
||
.guide-section {
|
||
background: white;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.guide-section .bg{
|
||
position: absolute;
|
||
right:0;
|
||
top:5rpx;
|
||
z-index:0;
|
||
}
|
||
.guide-tabs {
|
||
position: relative;
|
||
z-index:1;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 35rpx 30rpx;
|
||
}
|
||
|
||
.tab-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 0 20rpx;
|
||
cursor: pointer;
|
||
}
|
||
.guide-tabs .tab-item:nth-child(2){
|
||
margin-left: -170rpx;
|
||
}
|
||
.tab-text {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.tab-item.active .tab-text {
|
||
color: #000;
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tab-underline {
|
||
width: 64rpx;
|
||
height: 4rpx;
|
||
background-color: #8B2316;
|
||
border-radius: 2rpx;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.tab-more {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
/* padding: 10rpx 20rpx; */
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.guide-content {
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
|
||
.guide-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.guide-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.guide-more {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.guide-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.guide-item {
|
||
display: flex;
|
||
background: #F4F4F4;
|
||
border-radius: 10rpx;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
|
||
cursor: pointer;
|
||
}
|
||
|
||
.guide-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.guide-item:active {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.guide-info {
|
||
flex: 1;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.guide-item-title {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
|
||
}
|
||
|
||
.guide-item-desc {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
line-height: 1.4;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.guide-action {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
color: #007aff;
|
||
font-size: 28rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.action-view {
|
||
font-size: 24rpx;
|
||
color: #8D2316;
|
||
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 750rpx) {
|
||
.course-item {
|
||
width: 500rpx;
|
||
}
|
||
|
||
.grid-item {
|
||
padding: 30rpx 10rpx;
|
||
}
|
||
|
||
.grid-icon {
|
||
font-size: 56rpx;
|
||
}
|
||
|
||
.replay-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 15rpx;
|
||
}
|
||
|
||
.replay-image {
|
||
height: 180rpx;
|
||
}
|
||
|
||
.replay-text {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.guide-tabs {
|
||
padding: 15rpx 0;
|
||
}
|
||
|
||
.tab-text {
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.guide-content {
|
||
padding: 15rpx 20rpx;
|
||
}
|
||
|
||
.guide-item-title {
|
||
font-size: 28rpx;
|
||
color:#333;
|
||
}
|
||
|
||
.guide-item-desc {
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.action-view {
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
:deep(.uni-grid-item__box){
|
||
border: none !important;
|
||
}
|
||
:deep(.uni-grid){
|
||
border: none !important;
|
||
}
|
||
.notice-cell{
|
||
display: flex;
|
||
height:94rpx;
|
||
align-items: center;
|
||
}
|
||
.timebox{
|
||
margin-top: -5rpx;
|
||
}
|
||
.timebox .top{
|
||
display: flex;
|
||
}
|
||
.timebox .date{
|
||
|
||
width: 129rpx;
|
||
height: 31rpx;
|
||
font-size: 24rpx;
|
||
color:#fff;
|
||
text-align: center;
|
||
background-size:cover;
|
||
background: url('@/static/bo_bg.png') no-repeat 0 0;
|
||
}
|
||
.bar{
|
||
width: 2rpx;
|
||
height: 58rpx;
|
||
margin:0 14rpx;
|
||
background: #C5C5C5;
|
||
border-radius: 1rpx;
|
||
}
|
||
:deep(.uni-searchbar__box ){
|
||
height: 60rpx!important;
|
||
}
|
||
</style>
|