健康咨询平台大屏
This commit is contained in:
huangzhen
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<swiper :slides-per-view="1" :space-between="10" :loop="true" :autoplay="{ delay: 10000, disableOnInteraction: false }" class="mySwiper">
|
||||
<swiper-slide v-for="(page, index) in pages" :key="index">
|
||||
<div class="grid-container">
|
||||
<div v-for="item in page" :key="item.id" class="item">
|
||||
<div class="item-left">
|
||||
<a-image class="item-img" :preview="false" height="100%" :src="getFileUrl(item.photo)" />
|
||||
</div>
|
||||
<div class="item-right">
|
||||
<div class="name">
|
||||
<span>{{ item.doctorName }}</span>
|
||||
<span class="position">（{{ item.doctorJob_dictText }}）</span>
|
||||
</div>
|
||||
<div class="hospital">{{ item.resourceName }} | {{ item.departmentName }}</div>
|
||||
<div class="experience">
|
||||
<span class="label">经历：</span>
|
||||
{{ item.experience ? item.experience : '暂无' }}
|
||||
</div>
|
||||
<div class="goodAt">
|
||||
<span class="label">擅长：</span>
|
||||
{{ item.goodAt ? item.goodAt : '暂无' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, computed } from 'vue';
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/navigation';
|
||||
import SwiperCore from 'swiper';
|
||||
import { Autoplay, Navigation } from 'swiper/modules'; // 修改此处导入路径
|
||||
// import defaultPng from '/@/assets/health/default.png';
|
||||
import { Image as AImage } from 'ant-design-vue';
|
||||
|
||||
import { getDocList } from '/@/views/healthConsultation/api/health';
|
||||
|
||||
function getFileUrl(path?: string) {
|
||||
const GATEWAY_URL = import.meta.env.VITE_GLOB_API_URL;
|
||||
if (!path) return '/@/assets/health/default.png'; // 使用默认图片
|
||||
return `${GATEWAY_URL}/file/show/${path}`;
|
||||
}
|
||||
|
||||
// 安装 Swiper 模块
|
||||
SwiperCore.use([Autoplay, Navigation]);
|
||||
interface Doctor {
|
||||
id: string;
|
||||
photo?: string;
|
||||
doctorName: string;
|
||||
doctorJob_dictText: string;
|
||||
resourceName: string;
|
||||
departmentName: string;
|
||||
experience: string;
|
||||
goodAt: string;
|
||||
}
|
||||
|
||||
// 将每 6 个元素分为一页
|
||||
const items = ref<Doctor[]>([]);
|
||||
const pages = computed(() => {
|
||||
const result: Doctor[][] = [];
|
||||
for (let i = 0; i < items.value.length; i += 6) {
|
||||
result.push(items.value.slice(i, i + 6));
|
||||
}
|
||||
return result;
|
||||
});
|
||||
|
||||
function getData() {
|
||||
getDocList()
|
||||
.then((res: any) => {
|
||||
if (res.code == 200) {
|
||||
items.value = res.result;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.mySwiper {
|
||||
height: 100%; /* 设置整个轮播高度 */
|
||||
padding-bottom: 16px;
|
||||
box-sizing: border-box;
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr); /* 每行平分Swiper高度 */
|
||||
gap: 10px; /* item 间距 */
|
||||
height: 100%; /* 占满Swiper高度 */
|
||||
// padding: 10px; /* 可选：轮播边缘留空 */
|
||||
// box-sizing: border-box;
|
||||
.item {
|
||||
width: 100%;
|
||||
background: rgba(8, 75, 100, 0.2);
|
||||
border: 1px solid #00ccff;
|
||||
border-radius: 14px;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
transition: transform 0.3s;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
.item-left {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.item-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
}
|
||||
.item-right {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// gap: clamp(10px, 1vw, 40px);
|
||||
// gap: 8px;
|
||||
.name {
|
||||
// height: 10%;
|
||||
color: #ffc000;
|
||||
font-size: 23px;
|
||||
font-weight: bold;
|
||||
font-family: HarmonyOS Sans SC;
|
||||
letter-spacing: 1px;
|
||||
line-height: 34px;
|
||||
.position {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.hospital {
|
||||
// height: 10%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
font-size: 17px;
|
||||
// font-size: clamp(14px, 1vw, 50px);
|
||||
color: #fff;
|
||||
line-height: 32px;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.experience {
|
||||
// height: 40%;
|
||||
// height: 57px;
|
||||
// line-height: 22px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3; /* 显示3行 */
|
||||
line-clamp: 3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 8px;
|
||||
.label {
|
||||
color: #82a9ef;
|
||||
}
|
||||
}
|
||||
.goodAt {
|
||||
// height: 40%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3; /* 显示3行 */
|
||||
line-clamp: 3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal;
|
||||
letter-spacing: 1px;
|
||||
.label {
|
||||
color: #82a9ef;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user