gdxz/uniapp-app
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

8.14更新

Browse Source
This commit is contained in:
zoujiandong
2025-08-14 18:58:14 +08:00
parent 2903884922
commit fb4e5b6af1
4 changed files with 1058 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages_app/news/news.vue
+347 -2
View File
@@ -9,15 +9,152 @@
:border="false"
backgroundColor="#eeeeee"
></uni-nav-bar>
<view class="zhinan-page">
<view class="news-page">
<!-- Fixed Banner Swiper -->
<view class="banner-container">
<view class="swipemask">
<view class="banner-subtitle">111111111</view>
<view class="dotbox">
<view class="circle" :class="{active:currentBannerIndex==index} "v-for="(banner, index) in bannerList"
:key="banner.id"></view>
</view>
</view>
<swiper
class="banner-swiper"
:indicator-dots="false"
:autoplay="true"
:interval="5000"
:duration="300"
indicator-color="rgba(255,255,255,0.4)"
indicator-active-color="#fff"
circular
@change="onSwiperChange"
>
<swiper-item
v-for="(banner, index) in bannerList"
:key="banner.id"
@click="playBannerVideo(banner)"
>
<view class="banner-item">
<image
class="banner-image"
:src="banner.thumbnail || '/static/big_background_my.png'"
mode="aspectFill"
></image>
<view class="banner-content">
<view class="doctor-avatar" v-if="banner.doctorAvatar">
<image :src="banner.doctorAvatar" mode="aspectFill"></image>
</view>
<view class="banner-info">
<view class="banner-title">{{banner.title}}</view>
<view class="banner-subtitle">{{banner.subtitle || '专业医学视频教育平台'}}</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
<scroll-view class="news-list" scroll-y="true">
<!-- 肝胆新闻 -->
<view class="news-item" @click="goToNews('hepatoBiliaryNews')">
<view class="news-icon blue">
<uni-icons type="paperplane" size="24" color="#fff"></uni-icons>
</view>
<view class="news-content">
<view class="news-title">肝胆新闻</view>
<view class="news-subtitle">新鲜资讯、一触即达</view>
</view>
<view class="news-arrow">
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
</view>
</view>
<!-- 互动圈 -->
<view class="news-item" @click="goToNews('interactionCircle')">
<view class="news-icon purple">
<uni-icons type="redo" size="24" color="#fff"></uni-icons>
</view>
<view class="news-content">
<view class="news-title">互动圈</view>
<view class="news-subtitle">技术、资讯、大家齐分享</view>
</view>
<view class="news-arrow">
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
</view>
</view>
<!-- 科研项目 -->
<view class="news-item" @click="goToNews('researchProjects')">
<view class="news-icon orange">
<uni-icons type="star" size="24" color="#fff"></uni-icons>
</view>
<view class="news-content">
<view class="news-title">科研项目</view>
<view class="news-subtitle">项目、基金申报信息集聚地</view>
</view>
<view class="news-arrow">
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
</view>
</view>
<!-- 临床招募 -->
<view class="news-item" @click="goToNews('clinicalRecruitment')">
<view class="news-icon green">
<uni-icons type="personadd" size="24" color="#fff"></uni-icons>
</view>
<view class="news-content">
<view class="news-title">临床招募</view>
<view class="news-subtitle">最全招募信息,快速招募合格患者</view>
</view>
<view class="news-arrow">
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
</view>
</view>
<!-- 肝胆会议 -->
<view class="news-item" @click="goToCourse('hepatoBiliaryConference')">
<view class="news-icon yellow">
<uni-icons type="staff" size="24" color="#fff"></uni-icons>
</view>
<view class="news-content">
<view class="news-title">肝胆会议</view>
<view class="news-subtitle">了解会议信息的最佳入口</view>
</view>
<view class="news-arrow">
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
</view>
</view>
<!-- 肝胆活动 -->
<view class="news-item" @click="goToNews('hepatoBiliaryActivities')">
<view class="news-icon pink">
<uni-icons type="gift" size="24" color="#fff"></uni-icons>
</view>
<view class="news-content">
<view class="news-title">肝胆活动</view>
<view class="news-subtitle">福利多多,期待您的参与</view>
</view>
<view class="news-arrow">
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
</view>
</view>
</scroll-view>
</view>
</template>
<script setup>
import { ref } from 'vue';
import { onShow } from "@dcloudio/uni-app";
onShow(()=>{
bannerList.value = getMockBannerData();
})
// Banner相关数据
const bannerList = ref([]);
const currentBannerIndex = ref(0);
// 返回
const goBack = () => {
uni.navigateBack({
@@ -28,10 +165,218 @@
}
});
};
// Banner相关方法
const getMockBannerData = () => {
return [
{
id: 'banner_1',
title: 'IgG4相关性疾病的腹部影像表现',
subtitle: '肝胆精品课 | 宋文艳教授',
thumbnail: '/static/big_background_my.png',
doctorAvatar: '/static/doctor-avatar-1.png'
},
{
id: 'banner_2',
title: '《2025年版慢加急性肝衰竭指南》解读',
subtitle: '肝胆精品课 | 专家团队',
thumbnail: '/static/big_background_my.png',
doctorAvatar: '/static/doctor-avatar-2.png'
},
{
id: 'banner_3',
title: '自身免疫性肝病专栏｜免疫治疗的双刃剑',
subtitle: '肝胆精品课 | 专业团队',
thumbnail: '/static/big_background_my.png',
doctorAvatar: '/static/doctor-avatar-3.png'
}
];
};
const onSwiperChange = (e) => {
currentBannerIndex.value = e.detail.current;
};
const playBannerVideo = (banner) => {
uni.navigateTo({
url: `/pages/videoDetail/videoDetail?id=${banner.id}`
});
};
// 新闻相关方法
const goToNews = (type) => {
console.log('跳转到新闻类型:', type);
// 这里可以根据不同的新闻类型跳转到相应的页面
uni.showToast({
title: '功能开发中',
icon: 'none'
});
};
const goToCourse = (type) => {
console.log('跳转到课程类型:', type);
// 这里可以根据不同的课程类型跳转到相应的页面
uni.showToast({
title: '功能开发中',
icon: 'none'
});
};
</script>
<style scoped lang="scss">
.news-page{
// 颜色变量
$primary-color: #ff6b6b;
$theme-color: #8B2316;
$white: #fff;
$gray-bg: #f5f5f5;
$gray-light: #eee;
$gray-medium: #999;
$gray-dark: #666;
$text-color: #333;
// 课程图标颜色
$green-color: #00D4AA;
$yellow-color: #FFB800;
$orange-color: #FF8C00;
$green-chat-color: #52C41A;
$purple-color: #B37FEB;
$blue-color: #40A9FF;
$orange-tutorial-color: #FF7A45;
// 尺寸变量
$border-radius: 8px;
$border-radius-small: 6px;
$padding: 15px;
$padding-small: 10px;
.news-page{
/* Fixed Banner Container */
.banner-container {
position: fixed;
top: 140rpx; /* uni-nav-bar height */
left: 0;
right: 0;
z-index: 50;
background-color: #fff;
.swipemask{
width:100%;
z-index:3;
box-sizing:border-box;
position: absolute;
bottom:0;
padding:0 20rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: space-between;
background-color: rgba(0,0,0,0.7);
.banner-subtitle {
font-size: 24rpx;
color: rgba(255,255,255,0.8);
}
.dotbox{
display:flex;
align-items: center;
.circle{
margin:0 4rpx;
width:16rpx;
height:16rpx;
background-color: #eee;
border-radius: 50%;
}
.circle.active{
background-color: #8B2316;
}
}
}
}
}
// 新闻列表
.news-list {
position: fixed;
width: 100%;
bottom: 30rpx;
box-sizing: border-box;
padding: 0 30rpx;
top: 450rpx;
.news-item {
background-color: $white;
border-radius: $border-radius;
margin-bottom: 20rpx;
padding: 30rpx;
display: flex;
align-items: center;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
.news-icon {
width: 94rpx;
height: 94rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 30rpx;
&.blue {
background-color: $blue-color;
}
&.purple {
background-color: $purple-color;
}
&.orange {
background-color: $orange-color;
}
&.green {
background-color: $green-color;
}
&.yellow {
background-color: $yellow-color;
}
&.pink {
background-color: $primary-color;
}
}
.news-content {
flex: 1;
margin-left: 20rpx;
display: flex;
flex-direction: column;
gap: 8rpx;
.news-title {
font-size: 32rpx;
color: $text-color;
font-weight: 600;
line-height: 1.3;
}
.news-subtitle {
font-size: 26rpx;
color: $gray-medium;
line-height: 1.4;
}
}
.news-arrow {
width: 40rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
}
// 点击效果
&:active {
opacity: 0.8;
transform: scale(0.98);
}
}
}
</style>