From 8635962f39c2d896cd521dc794d97d34a8f60ed6 Mon Sep 17 00:00:00 2001
From: chenyc <501753378@qq.com>
Date: 星期三, 13 八月 2025 20:11:23 +0800
Subject: [PATCH] 增加宣教页面
---
src/views/home/index.vue | 6 +-
src/views/xuanjiao/index.vue | 154 +++++++++++++++++++++++++++++++++++++++++++++++++++
src/views/report/index.vue | 1
src/router/index.ts | 1
4 files changed, 159 insertions(+), 3 deletions(-)
diff --git a/src/router/index.ts b/src/router/index.ts
index 4c93bc9..23e9128 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -17,6 +17,7 @@
{ path: '/reportItem', name: 'reportItem', component: () => import('views/report/item/index.vue'),meta:{title:'报告查看'}},
{ path: '/prescriptionDrug', name: 'prescriptionDrug', component: () => import('views/prescriptionDrug/index.vue'),meta:{title:'透析医嘱'}},
{ path: '/record', name: 'record', component: () => import('views/record/index.vue'),meta:{title:'透析记录'}},
+ { path: '/xuanjiao', name: 'xuanjiao', component: () => import('views/xuanjiao/index.vue'),meta:{title:'宣教'}},
{ path: '/test', name: 'Test', component: () => import('views/test.vue')}
]
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 7a8475f..acfddc2 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -121,7 +121,7 @@
</div>
<van-tabbar v-model="active" @change="tabChang">
<van-tabbar-item name="home" icon="like">首页</van-tabbar-item>
- <van-tabbar-item name="jifen" icon="cart-circle-o">积分商城</van-tabbar-item>
+ <van-tabbar-item name="xuanjiao" icon="smile-o">宣教</van-tabbar-item>
<van-tabbar-item name="my" icon="manager">我的</van-tabbar-item>
</van-tabbar>
</div>
@@ -143,8 +143,8 @@
const tabChang=(index:any)=>{
if (index==='home'){
router.push('/')
- } else if (index==='jifen') {
- router.push('jifenShangCheng')
+ } else if (index==='xuanjiao') {
+ router.push('xuanjiao')
} else if (index==='my') {
router.push('my')
}
diff --git a/src/views/report/index.vue b/src/views/report/index.vue
index 54495b4..08cb07a 100644
--- a/src/views/report/index.vue
+++ b/src/views/report/index.vue
@@ -239,6 +239,7 @@
border-radius: 5pt;
margin-bottom: 10pt;
padding: 7pt;
+ border-bottom: 1px solid #b4afaf;
}
.icon {
diff --git a/src/views/xuanjiao/index.vue b/src/views/xuanjiao/index.vue
new file mode 100644
index 0000000..c206007
--- /dev/null
+++ b/src/views/xuanjiao/index.vue
@@ -0,0 +1,154 @@
+
+<template>
+ <div class="xuanjiaocss">
+ <div class="toubu" style="margin-top: 15px;">
+ <van-tabs v-model:active="active" type="card" color="#409EFF">
+ <van-tab title="医护课堂"></van-tab>
+ <van-tab title="营养专题"></van-tab>
+ <van-tab title="视频课题"></van-tab>
+ </van-tabs>
+ </div>
+ <div class="listBody" style="padding: 15px;">
+ <van-loading size="24px" v-if="loading" vertical>加载中...</van-loading>
+
+ <div class="order-list" v-else>
+ <div v-for="(item, index) in list" :key="index" class="order-item">
+ <div class="image-container">
+ <img :src="item.imgUrl" alt="Item Image" class="image">
+ </div>
+ <div class="text-container">
+ <p class="title">{{ item.title }}</p>
+ <p class="description">{{ item.description }}</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <van-tabbar v-model="activeTab" @change="tabChang" style="z-index: 100;">
+ <van-tabbar-item name="home" icon="like">首页</van-tabbar-item>
+ <van-tabbar-item name="xuanjiao" icon="smile-o">宣教</van-tabbar-item>
+ <van-tabbar-item name="my" icon="manager">我的</van-tabbar-item>
+ </van-tabbar>
+ </div>
+
+</template>
+
+ <script setup>
+ import { onMounted, ref } from 'vue'
+ import {useRouter} from 'vue-router'
+ const router=useRouter()
+ // 初始化数据
+ const active = ref()
+ const activeTab=ref('xuanjiao')
+ const list = ref([])
+ const loading = ref(false)
+ const finished = ref(false)
+
+ // 模拟异步请求数据的方法
+ const onLoad = () => {
+ setTimeout(() => {
+ for (let i = 0; i < 10; i++) {
+ list.value.push({
+ imgUrl: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg', // 图片占位符，实际使用时替换为真实图片URL
+ title: '"粽"有千般好,肾友吃粽要“肾”重',
+ description: '肾内科医师宋元培教您如何吃粽子~',
+ })
+ }
+ // 加载状态结束
+ loading.value = false
+
+ // 数据全部加载完成
+ if (list.value.length >= 40) {
+ finished.value = true
+ }
+ }, 1000)
+ }
+ const tabChang=(index)=>{
+ if (index==='home'){
+ router.push('/')
+ } else if (index==='xuanjiao') {
+ router.push('xuanjiao')
+ } else if (index==='my') {
+ router.push('my')
+ }
+ }
+ onMounted(() => {
+ // 页面加载时调用数据加载方法
+ loading.value = true
+ onLoad()
+ })
+</script>
+
+<style scoped lang="css">
+.order-list {
+ /* padding: 10px; */
+ width: 100%;
+ max-width: 600px;
+ margin: 10px auto;
+ border: 1px solid #ccc;
+ border-radius: 10px;
+ padding: 10px;
+ box-sizing: border-box;
+}
+
+.order-item {
+ display: flex;
+ align-items: center;
+ padding: 10px 0;
+ border-bottom: 1px solid #b4afaf;
+}
+
+.image-container {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ overflow: hidden;
+ margin-right: 15px;
+}
+
+.image-container::before,
+.image-container::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #f0f0f0;
+ transform: skewX(-45deg);
+ z-index: 0;
+}
+
+.image-container::before {
+ transform-origin: bottom right;
+}
+
+.image-container::after {
+ transform-origin: top left;
+}
+
+.image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ z-index: 2;
+}
+
+.text-container {
+ flex: 1;
+}
+
+.title {
+ font-size: 16px;
+ color: #333;
+ margin: 0 0 5px;
+}
+
+.description {
+ font-size: 14px;
+ color: #666;
+ margin: 0;
+}
+</style>
--
Gitblit v1.8.0