|
<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>
|
