增加宣教页面

chenyc

2025-08-13 8635962f39c2d896cd521dc794d97d34a8f60ed6

增加宣教页面

 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')}
]


 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')
        }

 src/views/report/index.vue

@@ -239,6 +239,7 @@
    border-radius: 5pt;
    margin-bottom: 10pt;
    padding: 7pt;
    border-bottom: 1px solid #b4afaf;
}

.icon {

 src/views/xuanjiao/index.vue

New file
@@ -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>