1.首页静态页首页手机端页面制作
2.列表页静态页制作（适应中屏幕）
This commit is contained in:
parent
6f51187b53
commit
a075a79f88
22
app.vue
22
app.vue
@ -9,6 +9,7 @@ import $api from '@/service/webRequest'
|
||||
import { useStore } from '~/store'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { locale } = useI18n()
|
||||
const router = useRouter()
|
||||
useSeoMeta({
|
||||
title: '信阳第五人民医院',
|
||||
ogTitle: '信阳第五人民医院',
|
||||
@ -17,6 +18,27 @@ useSeoMeta({
|
||||
ogImage: 'https://example.com/image.png',
|
||||
twitterCard: 'summary_large_image',
|
||||
})
|
||||
//判断是PC还是手机端，跳转不同的页面
|
||||
const isMobile = ref(false)
|
||||
onMounted(() => {
|
||||
//checkIfMobile();
|
||||
})
|
||||
// 检查是否为移动设备的函数
|
||||
const checkIfMobile = () => {
|
||||
// 判断是否是手机端
|
||||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
if (coMobile) {
|
||||
console.log('访问自手机端或平板');
|
||||
isMobile.value = true;
|
||||
//sessionStorage.setItem('isMobile', '1');
|
||||
router.push('/phone_index')
|
||||
} else {
|
||||
console.log('访问自PC端');
|
||||
isMobile.value = false;
|
||||
//sessionStorage.setItem('isMobile', '0');
|
||||
router.push('/')
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@ -425,8 +425,6 @@
|
||||
}
|
||||
|
||||
.text_16 {
|
||||
width: 193px;
|
||||
height: 60px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(50, 50, 50, 1);
|
||||
font-size: 14px;
|
||||
@ -933,6 +931,7 @@
|
||||
background-color: rgba(253, 253, 253, 1);
|
||||
width: 240px;
|
||||
height: 193px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-text_20 {
|
||||
@ -950,9 +949,9 @@
|
||||
}
|
||||
|
||||
.label_1 {
|
||||
width: 48px;
|
||||
height: 42px;
|
||||
margin: 5px 0 0 4px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.text-group_6 {
|
||||
@ -988,6 +987,7 @@
|
||||
background: url(public/images/ks2.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 480px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.section_4 {
|
||||
@ -1009,9 +1009,9 @@
|
||||
}
|
||||
|
||||
.label_2 {
|
||||
width: 48px;
|
||||
height: 49px;
|
||||
margin: 3px 0 0 4px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.text_35 {
|
||||
@ -1051,6 +1051,7 @@
|
||||
background-color: rgba(184, 196, 137, 1);
|
||||
width: 240px;
|
||||
height: 193px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-wrapper_4 {
|
||||
@ -1060,9 +1061,9 @@
|
||||
}
|
||||
|
||||
.image_10 {
|
||||
width: 51px;
|
||||
height: 51px;
|
||||
margin: 3px 0 0 1px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.text_36 {
|
||||
@ -1232,7 +1233,6 @@
|
||||
font-family: Source Han Serif CN-Bold;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
@ -1584,17 +1584,18 @@
|
||||
}
|
||||
|
||||
.text_61 {
|
||||
width: 140px;
|
||||
height: 14px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(210, 213, 221, 1);
|
||||
color: #999999;
|
||||
font-size: 14px;
|
||||
font-family: Source Han Serif CN-Regular;
|
||||
font-weight: NaN;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 14px;
|
||||
margin: 16px 0 0 20px;
|
||||
background-color: #f9f9f9;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.group_27 {
|
||||
@ -1604,6 +1605,7 @@
|
||||
position: absolute;
|
||||
left: 350px;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.group_28 {
|
||||
@ -1671,6 +1673,7 @@
|
||||
width: 240px;
|
||||
height: 193px;
|
||||
margin-top: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-wrapper_8 {
|
||||
@ -1680,9 +1683,9 @@
|
||||
}
|
||||
|
||||
.image_16 {
|
||||
width: 47px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 4px 0 0 4px;
|
||||
margin:0 auto
|
||||
}
|
||||
|
||||
.text_64 {
|
||||
@ -1716,6 +1719,7 @@
|
||||
background-color: rgba(31, 150, 174, 1);
|
||||
width: 240px;
|
||||
height: 193px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
@ -1731,8 +1735,8 @@
|
||||
}
|
||||
|
||||
.label_5 {
|
||||
width: 40px;
|
||||
height: 49px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 3px 0 0 8px;
|
||||
}
|
||||
|
||||
|
||||
2076
assets/css/list.css
Normal file
2076
assets/css/list.css
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div class="group_29 flex-col">
|
||||
<!-- 使用条件渲染来分别显示PC端和移动端页脚 -->
|
||||
<div v-if="!isMobile" class="group_29 flex-col">
|
||||
<!-- PC端页脚 - 保持原有设计 -->
|
||||
<div class="text-wrapper_57 flex-row">
|
||||
<span class="text_69">联系我们</span>
|
||||
<span class="text_70">就医指南</span>
|
||||
@ -67,9 +69,292 @@
|
||||
<span class="text_115">服务号</span>
|
||||
<span class="text_116">订阅号</span>
|
||||
</div>
|
||||
<div style="background-color: rgba(26, 172, 162, 1);padding-bottom: 20px;text-align: center;color: #ffffff;">
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank">ICP备2025118630号</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 移动端全新页脚设计 -->
|
||||
<div v-else class="mobile-footer">
|
||||
<!-- 主要信息区 -->
|
||||
<div class="mobile-main-info">
|
||||
<div class="hospital-info">
|
||||
<h3>信阳第五人民医院</h3>
|
||||
<p><i class="location-icon"></i> 地址：河南省信阳市XXXXXXXXXXX</p>
|
||||
<p><i class="phone-icon"></i> 电话：0376-12345678</p>
|
||||
<p><i class="email-icon"></i> 邮箱：xys@diwuyifuyuan.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快速链接区域（可折叠） -->
|
||||
<div class="mobile-quick-links">
|
||||
<div class="link-section" @click="toggleSection('guide')">
|
||||
<h4>就医指南 <i :class="{'arrow-down': !openSections.guide, 'arrow-up': openSections.guide}"></i></h4>
|
||||
<div v-if="openSections.guide" class="section-content">
|
||||
<a href="#">门诊就医流程</a>
|
||||
<a href="#">住院就医流程</a>
|
||||
<a href="#">医院位置</a>
|
||||
<a href="#">来院路线</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="link-section" @click="toggleSection('departments')">
|
||||
<h4>科室导航 <i :class="{'arrow-down': !openSections.departments, 'arrow-up': openSections.departments}"></i></h4>
|
||||
<div v-if="openSections.departments" class="section-content">
|
||||
<a href="#">内科五病区</a>
|
||||
<a href="#">消化内科病区</a>
|
||||
<a href="#">内科病区</a>
|
||||
<a href="#">健康体检科</a>
|
||||
<a href="#">中医科门诊</a>
|
||||
<a href="#">妇产科门诊</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部固定信息和二维码 -->
|
||||
<div class="mobile-bottom">
|
||||
<div class="qr-codes">
|
||||
<div class="qr-item">
|
||||
<div class="qr-code service-qr"></div>
|
||||
<p>服务号</p>
|
||||
</div>
|
||||
<div class="qr-item">
|
||||
<div class="qr-code subscribe-qr"></div>
|
||||
<p>订阅号</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank">ICP备2025118630号</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, reactive } from 'vue';
|
||||
|
||||
// 用于检测设备类型的响应式变量
|
||||
const isMobile = ref(false);
|
||||
|
||||
// 移动端页脚的折叠部分状态管理
|
||||
const openSections = reactive({
|
||||
guide: false,
|
||||
departments: false,
|
||||
contact: false
|
||||
});
|
||||
|
||||
// 切换折叠部分的显示状态
|
||||
const toggleSection = (section) => {
|
||||
openSections[section] = !openSections[section];
|
||||
};
|
||||
|
||||
// 检查是否为移动设备的函数
|
||||
const checkIfMobile = () => {
|
||||
// 判断是否是手机端
|
||||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
if (coMobile) {
|
||||
console.log('访问自手机端或平板');
|
||||
isMobile.value = true
|
||||
} else {
|
||||
console.log('访问自PC端');
|
||||
isMobile.value = false
|
||||
}
|
||||
};
|
||||
|
||||
// 组件挂载时添加窗口大小变化的监听
|
||||
onMounted(() => {
|
||||
// 初始检查
|
||||
checkIfMobile();
|
||||
// 添加窗口大小变化监听
|
||||
window.addEventListener('resize', checkIfMobile);
|
||||
});
|
||||
|
||||
// 组件卸载时移除监听，避免内存泄漏
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', checkIfMobile);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/index.css";
|
||||
|
||||
/* PC端样式保持不变 */
|
||||
|
||||
/* 移动端全新页脚样式 */
|
||||
.mobile-footer {
|
||||
background-color: #f5f5f5;
|
||||
font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
|
||||
color: #333;
|
||||
padding: 20px 15px;
|
||||
|
||||
.mobile-main-info {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
|
||||
|
||||
.hospital-info {
|
||||
h3 {
|
||||
color: rgba(26, 172, 162, 1);
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin: 8px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.location-icon {
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(26, 172, 162, 1)'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") no-repeat center;
|
||||
}
|
||||
|
||||
.phone-icon {
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(26, 172, 162, 1)'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center;
|
||||
}
|
||||
|
||||
.email-icon {
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(26, 172, 162, 1)'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-quick-links {
|
||||
.link-section {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
|
||||
overflow: hidden;
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #333;
|
||||
position: relative;
|
||||
|
||||
i {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E") no-repeat center;
|
||||
}
|
||||
|
||||
.arrow-up {
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E") no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
.section-content {
|
||||
padding: 0 15px 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
padding: 8px 0;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: rgba(26, 172, 162, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-bottom {
|
||||
margin-top: 20px;
|
||||
|
||||
.qr-codes {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.qr-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 0 15px;
|
||||
|
||||
.qr-code {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 5px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin: 5px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.service-qr {
|
||||
/* 这里应该放真实的二维码图片 */
|
||||
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(26, 172, 162, 1)'%3E%3Cpath d='M3 3h8v8H3V3zm2 2v4h4V5H5zm8-2h8v8h-8V3zm2 2v4h4V5h-4zM3 13h8v8H3v-8zm2 2v4h4v-4H5zm13-2h3v3h-3v-3zm0 5h3v3h-3v-3zm-5 0h3v3h-3v-3zm5-5h3v3h-3v-3z'/%3E%3C/svg%3E") no-repeat center;
|
||||
background-size: 60px;
|
||||
}
|
||||
|
||||
.subscribe-qr {
|
||||
/* 这里应该放真实的二维码图片 */
|
||||
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(26, 172, 162, 1)'%3E%3Cpath d='M3 3h8v8H3V3zm2 2v4h4V5H5zm8-2h8v8h-8V3zm2 2v4h4V5h-4zM3 13h8v8H3v-8zm2 2v4h4v-4H5zm13-2h3v3h-3v-3zm0 5h3v3h-3v-3zm-5 0h3v3h-3v-3zm5-5h3v3h-3v-3z'/%3E%3C/svg%3E") no-repeat center;
|
||||
background-size: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
background-color: rgba(26, 172, 162, 1);
|
||||
border-radius: 8px;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-wrapper_59 span{
|
||||
cursor: pointer;
|
||||
}
|
||||
.text-wrapper_60 span{
|
||||
cursor: pointer;
|
||||
}
|
||||
.text-wrapper_61 span{
|
||||
cursor: pointer;
|
||||
}
|
||||
.text-wrapper_62 span{
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,20 @@
|
||||
<template>
|
||||
<div class="box_32 flex-col">
|
||||
<div class="section_1 flex-row justify-center" style="padding-top: 25px;">
|
||||
<div class="box_1 flex-col"></div>
|
||||
<div class="text_1">信阳第五人民医院LOGO</div>
|
||||
<div class="section_1 flex-row justify-center" :style="!isMobile ? 'padding-top: 25px;height: 110px;' : 'padding-top: 0;height: 50px;'">
|
||||
<!-- <div class="box_1 flex-col"></div> -->
|
||||
<div class="text_1">信阳第五人民医院</div>
|
||||
<!-- 手机端菜单按钮 -->
|
||||
<div v-if="isMobile" class="mobile-menu-button" @click="toggleMobileMenu">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section_2 flex-row">
|
||||
|
||||
<!-- 桌面端菜单 -->
|
||||
<div v-if="!isMobile" class="section_2 flex-row">
|
||||
|
||||
<div :class="isLinl==0?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=0">
|
||||
<span class="text_2">首页</span>
|
||||
@ -51,11 +61,26 @@
|
||||
<div v-if="isLinl==10" class="group_3 flex-col"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 手机端菜单 -->
|
||||
<div v-if="isMobile && mobileMenuOpen" class="mobile-menu">
|
||||
<div class="mobile-menu-item" :class="{'active': isLinl == 0}" @click="selectMenuItem(0)">首页</div>
|
||||
<div class="mobile-menu-item" :class="{'active': isLinl == 1}" @click="selectMenuItem(1)">医院概况</div>
|
||||
<div class="mobile-menu-item" :class="{'active': isLinl == 2}" @click="selectMenuItem(2)">党建工作</div>
|
||||
<div class="mobile-menu-item" :class="{'active': isLinl == 3}" @click="selectMenuItem(3)">医生团队</div>
|
||||
<div class="mobile-menu-item" :class="{'active': isLinl == 4}" @click="selectMenuItem(4)">科室介绍</div>
|
||||
<div class="mobile-menu-item" :class="{'active': isLinl == 5}" @click="selectMenuItem(5)">招聘信息</div>
|
||||
<div class="mobile-menu-item" :class="{'active': isLinl == 6}" @click="selectMenuItem(6)">健康科普</div>
|
||||
<div class="mobile-menu-item" :class="{'active': isLinl == 7}" @click="selectMenuItem(7)">院务公开</div>
|
||||
<div class="mobile-menu-item" :class="{'active': isLinl == 8}" @click="selectMenuItem(8)">患者服务</div>
|
||||
<div class="mobile-menu-item" :class="{'active': isLinl == 9}" @click="selectMenuItem(9)">紧急服务</div>
|
||||
<div class="mobile-menu-item" :class="{'active': isLinl == 10}" @click="selectMenuItem(10)">科研成果</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
@ -63,9 +88,96 @@ const store = useStore()
|
||||
const route = useRoute()
|
||||
const isMenuOpen = ref(false)
|
||||
const { locale } = useI18n()
|
||||
const isLinl=ref(0)
|
||||
const isLinl = ref(0)
|
||||
|
||||
// 手机端相关变量和函数
|
||||
const isMobile = ref(false)
|
||||
const mobileMenuOpen = ref(false)
|
||||
|
||||
// 检测是否为手机端
|
||||
const checkIfMobile = () => {
|
||||
console.log(window.innerWidth);
|
||||
|
||||
// 判断是否是手机端
|
||||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
if (coMobile) {
|
||||
console.log('访问自手机端或平板');
|
||||
isMobile.value = true
|
||||
} else {
|
||||
console.log('访问自PC端');
|
||||
isMobile.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 切换手机端菜单显示状态
|
||||
const toggleMobileMenu = () => {
|
||||
mobileMenuOpen.value = !mobileMenuOpen.value
|
||||
}
|
||||
|
||||
// 选择菜单项并关闭手机端菜单
|
||||
const selectMenuItem = (index: number) => {
|
||||
isLinl.value = index
|
||||
if (isMobile.value) {
|
||||
mobileMenuOpen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 监听窗口大小变化
|
||||
onMounted(() => {
|
||||
checkIfMobile()
|
||||
window.addEventListener('resize', checkIfMobile)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', checkIfMobile)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/index.css";
|
||||
|
||||
/* 响应式样式 */
|
||||
.mobile-menu-button {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 13px;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.mobile-menu-item {
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mobile-menu-item.active {
|
||||
color: #3788ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 媒体查询 */
|
||||
@media (max-width: 768px) {
|
||||
.section_1 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text_1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,7 +3,7 @@ import { defineNuxtConfig } from 'nuxt/config'
|
||||
|
||||
export default defineNuxtConfig({
|
||||
app: {
|
||||
baseURL:'/web/',
|
||||
baseURL:'/',
|
||||
},
|
||||
nitro: {
|
||||
routeRules: {
|
||||
@ -11,13 +11,13 @@ export default defineNuxtConfig({
|
||||
}
|
||||
},
|
||||
router: {
|
||||
extendRoutes(routes, resolve) {
|
||||
routes.push({
|
||||
name: 'index_info',
|
||||
path: '/params/:param1', // * 表示可选的多个参数
|
||||
component: resolve(__dirname, 'pages/index_info.vue')
|
||||
});
|
||||
}
|
||||
// extendRoutes(routes, resolve) {
|
||||
// routes.push({
|
||||
// name: 'index_info',
|
||||
// path: '/params/:param1', // * 表示可选的多个参数
|
||||
// component: resolve(__dirname, 'pages/index_info.vue')
|
||||
// });
|
||||
// }
|
||||
},
|
||||
ssr: false,
|
||||
css: [
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
<span class="text_59">医院信息查询</span>
|
||||
<span class="text_60">Hospital information inquiry</span>
|
||||
<div class="group_26 flex-col">
|
||||
<span class="text_61">请输入您要查询的内容</span>
|
||||
<input type="text" class="text_61" placeholder="请输入您要查询的内容">
|
||||
<div class="group_27 flex-col">
|
||||
<div class="group_28 flex-col">
|
||||
<img src="public/images/ser.png" />
|
||||
@ -121,7 +121,7 @@
|
||||
<span class="text_38">通知公告</span>
|
||||
</div>
|
||||
<div class="flex-row align-center"
|
||||
style="border:1px solid #000;padding: 10px 20px;border-radius: 50px;">
|
||||
style="border:1px solid #000;padding: 10px 20px;border-radius: 50px;cursor: pointer;">
|
||||
<span class="text_39">查看更多</span>
|
||||
<div class="group_22 flex-col">
|
||||
<img src="public/images/right.png" />
|
||||
@ -129,7 +129,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-[20px]">
|
||||
<div v-for="(item, index) in 3">
|
||||
<div v-for="(item, index) in 3" class="cursor-pointer">
|
||||
<div v-if="index == 0">
|
||||
<img class="image_13" referrerpolicy="no-referrer" src="public/images/new.png" />
|
||||
</div>
|
||||
@ -157,7 +157,7 @@
|
||||
<span class="text_38">医院动态</span>
|
||||
</div>
|
||||
<div class="flex-row align-center"
|
||||
style="border: 1px solid #000;padding: 10px 20px;border-radius: 50px;">
|
||||
style="cursor: pointer;border: 1px solid #000;padding: 10px 20px;border-radius: 50px;">
|
||||
<span class="text_39">查看更多</span>
|
||||
<div class="group_22 flex-col">
|
||||
<img src="public/images/right.png" />
|
||||
@ -165,7 +165,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-[20px]">
|
||||
<div v-for="(item, index) in 3">
|
||||
<div v-for="(item, index) in 3" class="cursor-pointer">
|
||||
<div v-if="index == 0">
|
||||
<img class="image_13" referrerpolicy="no-referrer" src="public/images/new1.png" />
|
||||
</div>
|
||||
@ -200,7 +200,7 @@
|
||||
<swiper class="swiper-container h-full w-full" :slides-per-view="1" @swiper="onSwiperDoctor"
|
||||
v-bind="swiperOptionsDoctor" @slideChange="onSlideChangeDoctor">
|
||||
<swiper-slide v-for="item in 20">
|
||||
<div class="group_10 flex-col">
|
||||
<div class="group_10 flex-col cursor-pointer">
|
||||
<div class="image-text_15 flex-col justify-between">
|
||||
<img class="image_3" referrerpolicy="no-referrer" src="public/images/y1.png" />
|
||||
<div class="text-group_13 flex-row justify-between">
|
||||
@ -259,7 +259,7 @@
|
||||
<swiper class="swiper-container h-full w-full" :slides-per-view="4" @swiper="onSwiperKK"
|
||||
v-bind="swiperOptionsKK" @slideChange="onSlideChangeKK">
|
||||
<swiper-slide v-for="(item, index) in 32">
|
||||
<div class="list-items_1 flex-col" :key="index">
|
||||
<div class="list-items_1 flex-col cursor-pointer" :key="index">
|
||||
<img src="public/images/t1.png">
|
||||
<div class="text-wrapper_13 flex-col">
|
||||
<span class="text_33">26人高压氧舱</span>
|
||||
@ -384,7 +384,7 @@ const onSlideChangeKK = (s) => {
|
||||
activedKKIndex.value = s.snapIndex;
|
||||
}
|
||||
onMounted(() => {
|
||||
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
47
pages/list/[id].vue
Normal file
47
pages/list/[id].vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="bg-[#ffffff]">
|
||||
<div class="box_6 flex-col">
|
||||
<div class="group_1">
|
||||
<div class="flex section_4 flex-row justify-between">
|
||||
<img class="thumbnail_1" referrerpolicy="no-referrer" src="public/images/home.png" />
|
||||
<span class="text_13">您的位置：首页>系统公告</span>
|
||||
</div>
|
||||
<div class="text_14">系统公告</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex box_7 flex-row align-center" v-for="item in 5">
|
||||
<div class="flex block_3 flex-col"></div>
|
||||
<div class="flex image-text_7 flex-row justify-between">
|
||||
<img class="image_1" referrerpolicy="no-referrer" src="public/images/new1.png" />
|
||||
<div class="flex group_13 flex-col justify-between">
|
||||
<div class="flex text-group_7 flex-col justify-between">
|
||||
<span class="text_15">
|
||||
青云计划」再启航，树立长三角放疗「顶天立地」人才培养…
|
||||
</span>
|
||||
<span class="text_16">
|
||||
在清明节来临之际，为缅怀革命先烈，传承红色精神，增强党支部的凝聚力和战斗力。3月29日，我院机关党总支党委宣传处党支部联合党委办公室党支部赴郑州烈士陵园开展“传承红色基因，续红色血脉”主.….
|
||||
</span>
|
||||
</div>
|
||||
<img class="label_1" referrerpolicy="no-referrer" src="public/images/bs1.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="block_4 flex-col">
|
||||
<div class="flex text-wrapper_11 flex-col text-center">
|
||||
<span class="text_17">08</span>
|
||||
<span class="text_18">2025.04</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group_18 flex-row">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
@import "@/assets/css/common.scss";
|
||||
@import "@/assets/css/list.css";
|
||||
</style>
|
||||
569
pages/phone_index.vue
Normal file
569
pages/phone_index.vue
Normal file
@ -0,0 +1,569 @@
|
||||
<template>
|
||||
<div class="section_3 flex-col">
|
||||
<div class="group_6 flex-col relative">
|
||||
<swiper class="swiper-container w-full" v-bind="swiperOptionsNews" @swiper="onSwiperNews"
|
||||
@slideChange="onSlideChangeNews">
|
||||
<swiper-slide>
|
||||
<img src="public/images/sw1.png" class="w-full" />
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/images/sw1.png" class="w-full" />
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/images/sw1.png" class="w-full" />
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/images/sw1.png" class="w-full" />
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div class="flex items-center justify-center gap-2 absolute w-full z-10 bottom-[30px]">
|
||||
<div class="w-[20px] bg-white h-[3px] rounded-full" :class="activeIndex == 0 ? '' : 'opacity-50'"></div>
|
||||
<div class="w-[20px] bg-white h-[3px] rounded-full" :class="activeIndex == 1 ? '' : 'opacity-50'"></div>
|
||||
<div class="w-[20px] bg-white h-[3px] rounded-full" :class="activeIndex == 2 ? '' : 'opacity-50'"></div>
|
||||
<div class="w-[20px] bg-white h-[3px] rounded-full" :class="activeIndex == 3 ? '' : 'opacity-50'"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--第二块-->
|
||||
<div class="flex-col er_back">
|
||||
<div class="group_17 flex-col z-10">
|
||||
<div class="box_35 flex-row flex-wrap justify-center gap-4 px-4" style="height: auto; padding: 20px 0;">
|
||||
<div class="box_22 flex-col w-full mb-6">
|
||||
<span class="text_59 text-xl">医院信息查询</span>
|
||||
<span class="text_60 text-sm">Hospital information inquiry</span>
|
||||
<div class="group_26 flex-col mt-2">
|
||||
<span class="text_61 text-sm">请输入您要查询的内容</span>
|
||||
<div class="group_27 flex-col">
|
||||
<div class="group_28 flex-col">
|
||||
<img src="public/images/ser.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="box_35 flex-row flex-wrap justify-center px-4 gap-4">
|
||||
<div class="group_36 flex-row flex-wrap justify-between">
|
||||
<div class="box_23 flex-col w-[48%] mb-4">
|
||||
<div class="image-wrapper_7 flex-col i2">
|
||||
<img class="image_16 w-12 h-12" referrerpolicy="no-referrer"
|
||||
src="public/images/k5.png" />
|
||||
</div>
|
||||
<span class="text-sm">医院概况</span>
|
||||
<span class="text-xs">Hospital Overview</span>
|
||||
</div>
|
||||
<div class="box_24 flex-col w-[48%] mb-4" style="background-color: #BDAA82;">
|
||||
<div class="image-wrapper_7 flex-col i2">
|
||||
<img class="image_16 w-12 h-12" referrerpolicy="no-referrer"
|
||||
src="public/images/k1.png" />
|
||||
</div>
|
||||
<span class="text-sm">患者服务</span>
|
||||
<span class="text-xs">Patient Services</span>
|
||||
</div>
|
||||
<div class="box_24 flex-col w-[48%] mb-4" style="background-color: #1F96AE;">
|
||||
<div class="image-wrapper_7 flex-col i2">
|
||||
<img class="label_5 w-12 h-12" referrerpolicy="no-referrer"
|
||||
src="public/images/k4.png" />
|
||||
</div>
|
||||
<span class="text-sm">医院位置</span>
|
||||
<span class="text-xs">Hospital location</span>
|
||||
</div>
|
||||
<div class="box_24 flex-col w-[48%] mb-4" style="background-color: #ffffff;color: #000;">
|
||||
<div class="image-wrapper_7 flex-col i2">
|
||||
<img class="label_5 w-12 h-12" referrerpolicy="no-referrer"
|
||||
src="public/images/k6.png" />
|
||||
</div>
|
||||
<span class="text-sm">紧急服务</span>
|
||||
<span class="text-xs">Emergency services</span>
|
||||
</div>
|
||||
<div class="box_24 flex-col w-[48%] mb-4" style="background-color: #466C9A;;">
|
||||
<div class="image-wrapper_7 flex-col i2">
|
||||
<img class="label_5 w-12 h-12" referrerpolicy="no-referrer"
|
||||
src="public/images/k2.png" />
|
||||
</div>
|
||||
<span class="text-sm">医生团队</span>
|
||||
<span class="text-xs">Doctor team</span>
|
||||
</div>
|
||||
<div class="box_24 flex-col w-[48%] mb-4" style="background-color: #B8C489;">
|
||||
<div class="image-wrapper_7 flex-col i2">
|
||||
<img class="label_5 w-12 h-12" referrerpolicy="no-referrer"
|
||||
src="public/images/k3.png" />
|
||||
</div>
|
||||
<span class="text-sm">科室介绍</span>
|
||||
<span class="text-xs">Department Introduction</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-col z-10 px-4">
|
||||
<img class="w-full mb-4" referrerpolicy="no-referrer" src="public/images/ks4.png" />
|
||||
<div class="box_26 flex-col">
|
||||
<div class="group_38 flex-row justify-between items-center mb-2">
|
||||
<div class="image-wrapper_10 flex-col">
|
||||
<img class="label_6 w-8 h-8" referrerpolicy="no-referrer" src="public/images/k7.png" />
|
||||
</div>
|
||||
<span class="text_67 text-lg font-medium">医院简介</span>
|
||||
</div>
|
||||
<span class="text_68 text-sm leading-relaxed">
|
||||
医院内设科室15个，现有专业技术人员109人，其中高级职称7人，中级职称25人，医院设有120张床位，拥有先进的医疗设备，如飞利浦螺旋CT、德国CE公司800mAX线机、意大利移动式床边X光机、日本心电监护仪、日本肺功能测量系统、人工肝、全自动肝病治疗仪、中心监护系统、纤维内窥镜系统、有创和无创呼吸系统、重症监护系统、心脏除颤系统、中心负压和供氧系统、自动心电分析系统、全自动生化分析系统、全自动血液和尿检测系统、全自动酶标仪、荷兰彩色B超等先进医疗设备。信阳市第五人民医院奉行救死扶伤，全心全意为人民服务的宗旨，全体医务人员将以优质的服务质量、精湛的医疗技术，为广大患者提供满意周到的服务。
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="z-10 flex-col gap-8 px-4 py-6">
|
||||
<!--通知公告-->
|
||||
<div class="w-full">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<div class="flex items-center">
|
||||
<img class="label_3 w-6 h-6 mr-2" referrerpolicy="no-referrer" src="public/images/c2.png" />
|
||||
<span class="text_38 text-lg">通知公告</span>
|
||||
</div>
|
||||
<div class="flex items-center border border-black px-3 py-1 rounded-full">
|
||||
<span class="text_39 text-xs">查看更多</span>
|
||||
<div class="group_22 flex-col ml-1">
|
||||
<img src="public/images/right.png" class="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div v-for="(item, index) in 3" class="mb-4">
|
||||
<div v-if="index == 0" class="mb-2">
|
||||
<img class="image_13 w-full" referrerpolicy="no-referrer" src="public/images/new.png" />
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="text_41 text-base font-medium">国际交流添新篇发，合作共筑医疗梦 意大利锡耶纳大学教</span>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="text_43 text-sm text-gray-600">
|
||||
与北京华通国康公益基金会理事长陈冉率11人专家代表团，到我院进行深度参观交流。我院院长高社干、党委副书记牛牧青、副院长富奇志及相关职能科室负责人参加了会议。
|
||||
</span>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="text_45 text-xs text-gray-400">2025-04-15</span>
|
||||
</div>
|
||||
<div v-if="index < 2" class="mb-2">
|
||||
<div class="box_19 w-full h-px bg-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--医院动态-->
|
||||
<div class="w-full">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<div class="flex items-center">
|
||||
<img class="label_3 w-6 h-6 mr-2" referrerpolicy="no-referrer" src="public/images/c1.png" />
|
||||
<span class="text_38 text-lg">医院动态</span>
|
||||
</div>
|
||||
<div class="flex items-center border border-black px-3 py-1 rounded-full">
|
||||
<span class="text_39 text-xs">查看更多</span>
|
||||
<div class="group_22 flex-col ml-1">
|
||||
<img src="public/images/right.png" class="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div v-for="(item, index) in 3" class="mb-4">
|
||||
<div v-if="index == 0" class="mb-2">
|
||||
<img class="image_13 w-full" referrerpolicy="no-referrer"
|
||||
src="public/images/new1.png" />
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="text_41 text-base font-medium">国际交流添新篇发，合作共筑医疗梦 意大利锡耶纳大学教</span>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="text_43 text-sm text-gray-600">
|
||||
与北京华通国康公益基金会理事长陈冉率11人专家代表团，到我院进行深度参观交流。我院院长高社干、党委副书记牛牧青、副院长富奇志及相关职能科室负责人参加了会议。
|
||||
</span>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="text_45 text-xs text-gray-400">2025-04-15</span>
|
||||
</div>
|
||||
<div v-if="index < 2" class="mb-2">
|
||||
<div class="box_19 w-full h-px bg-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_33 flex-col px-4 py-6">
|
||||
<div class="box_2 flex-col">
|
||||
<div class="text-wrapper_47 flex-row mb-4"><span class="text_13 text-lg font-medium">医生团队</span></div>
|
||||
<div class="box_34 flex-row relative">
|
||||
<swiper class="swiper-container h-full w-full" v-bind="swiperOptionsDoctor" @swiper="onSwiperDoctor"
|
||||
@slideChange="onSlideChangeDoctor">
|
||||
<swiper-slide v-for="item in 8">
|
||||
<div class="group_10 flex-col p-2">
|
||||
<div class="image-text_15 flex-col justify-between">
|
||||
<img class="image_3 w-full" referrerpolicy="no-referrer"
|
||||
src="public/images/y1.png" />
|
||||
<div class="text-group_13 flex-row justify-between mt-2">
|
||||
<span class="text_14 text-base font-medium">李商隐</span>
|
||||
<span class="text_15 text-xs text-gray-600">副主任医师</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text_16 text-sm mt-2">擅长:从事眼科临床工作20年，对眼科临床疾病的诊断和治疗累积了丰富的经验</span>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
<div class="flex-row mt-4">
|
||||
<div class="flex items-center justify-center gap-2 w-full">
|
||||
<div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
|
||||
:class="activedIndex == 0 ? '' : 'opacity-50'"></div>
|
||||
<div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
|
||||
:class="activedIndex == 1 ? '' : 'opacity-50'"></div>
|
||||
<div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
|
||||
:class="activedIndex == 2 ? '' : 'opacity-50'"></div>
|
||||
<div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
|
||||
:class="activedIndex == 3 ? '' : 'opacity-50'"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white pb-[30px] px-4">
|
||||
<div class="block_6 flex-row justify-around mb-4">
|
||||
<div @click="card = 1" :class="['text-wrapper_12', card == 1 ? 'text-wrapper_12-is' : '', 'flex-col']">
|
||||
<span class="text_29 text-sm">先进设备</span>
|
||||
<div v-if="card == 1" class="box_7 flex-col"></div>
|
||||
</div>
|
||||
<div @click="card = 2" :class="['text-wrapper_12', card == 2 ? 'text-wrapper_12-is' : '', 'flex-col']">
|
||||
<span class="text_29 text-sm">医院环境</span>
|
||||
<div v-if="card == 2" class="box_7 flex-col"></div>
|
||||
</div>
|
||||
<div @click="card = 3" :class="['text-wrapper_12', card == 3 ? 'text-wrapper_12-is' : '', 'flex-col']">
|
||||
<span class="text_29 text-sm">荣誉资质</span>
|
||||
<div v-if="card == 3" class="box_7 flex-col"></div>
|
||||
</div>
|
||||
<div @click="card = 4" :class="['text-wrapper_12', card == 4 ? 'text-wrapper_12-is' : '', 'flex-col']">
|
||||
<span class="text_29 text-sm">公益行动</span>
|
||||
<div v-if="card == 4" class="box_7 flex-col"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block_8 flex-row relative">
|
||||
<swiper class="swiper-container h-full w-full" v-bind="swiperOptionsKK" @swiper="onSwiperKK"
|
||||
@slideChange="onSlideChangeKK">
|
||||
<swiper-slide v-for="(item, index) in 16" :key="index">
|
||||
<div class="list-items_1 flex-col p-2">
|
||||
<img src="public/images/t1.png" class="w-full">
|
||||
<div class="text-wrapper_13 flex-col mt-2">
|
||||
<span class="text_33 text-xs text-center">26人高压氧舱</span>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
<div class="flex-row mt-4">
|
||||
<div class="flex items-center justify-center gap-2 w-full">
|
||||
<div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
|
||||
:class="activedKKIndex == 0 ? '' : 'opacity-50'"></div>
|
||||
<div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
|
||||
:class="activedKKIndex == 1 ? '' : 'opacity-50'"></div>
|
||||
<div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
|
||||
:class="activedKKIndex == 2 ? '' : 'opacity-50'"></div>
|
||||
<div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
|
||||
:class="activedKKIndex == 3 ? '' : 'opacity-50'"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||||
import { nextTick, ref, onMounted } from 'vue'
|
||||
import 'swiper/css'
|
||||
import { Mousewheel, Navigation, Grid, EffectFade, Autoplay } from 'swiper/modules'
|
||||
import 'swiper/css/mousewheel'
|
||||
import 'swiper/css/navigation'
|
||||
import 'swiper/css/grid'
|
||||
import 'swiper/css/effect-fade'
|
||||
import 'swiper/css/autoplay'
|
||||
import * as swiperAni from '@/assets/animate/animate.js'
|
||||
import $api from '@/service/webRequest'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
import type { Swiper as SwiperType } from 'swiper'
|
||||
const { locale } = useI18n()
|
||||
|
||||
const card = ref(1);
|
||||
|
||||
const activeIndex = ref(0);
|
||||
|
||||
|
||||
const onSlideChangeNews = (s: any) => {
|
||||
activeIndex.value = s.realIndex;
|
||||
}
|
||||
|
||||
// Swiper配置
|
||||
const swiperOptionsNews = {
|
||||
autoplay: {
|
||||
delay: 6000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
direction: 'horizontal' as 'horizontal' | 'vertical',
|
||||
speed: 500,
|
||||
effect: 'fade',
|
||||
loop: true,
|
||||
modules: [Navigation, EffectFade, Autoplay],
|
||||
navigation: {
|
||||
nextEl: '#swipen_prev',
|
||||
prevEl: '#swipen_next',
|
||||
},
|
||||
}
|
||||
// banner
|
||||
let newsSwiper: SwiperType | null = null
|
||||
const onSwiperNews = (swiper: SwiperType) => {
|
||||
newsSwiper = swiper
|
||||
}
|
||||
// Swiper配置
|
||||
const swiperOptionsDoctor = {
|
||||
direction: 'horizontal' as 'horizontal' | 'vertical',
|
||||
slidesPerView: 2,
|
||||
slidesPerGroup: 2,
|
||||
spaceBetween: 10,
|
||||
speed: 700,
|
||||
loop: false,
|
||||
modules: [Navigation],
|
||||
navigation: {
|
||||
nextEl: '#swipen_prev',
|
||||
prevEl: '#swipen_next',
|
||||
},
|
||||
}
|
||||
//医生团队
|
||||
const activedIndex = ref(0);
|
||||
let doctorSwiper: SwiperType | null = null
|
||||
const onSwiperDoctor = (swiper: SwiperType) => {
|
||||
doctorSwiper = swiper
|
||||
}
|
||||
const onSlideChangeDoctor = (s: any) => {
|
||||
activedIndex.value = s.snapIndex;
|
||||
}
|
||||
|
||||
|
||||
const swiperOptionsKK = {
|
||||
direction: 'horizontal' as 'horizontal' | 'vertical',
|
||||
slidesPerView: 2,
|
||||
slidesPerGroup: 2,
|
||||
speed: 700,
|
||||
loop: false,
|
||||
modules: [Navigation, Grid],
|
||||
grid: {
|
||||
fill: 'row',
|
||||
rows: 2,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '#kkswipen_prev',
|
||||
prevEl: '#kkswipen_next',
|
||||
},
|
||||
}
|
||||
|
||||
let kkSwiper: SwiperType | null = null;
|
||||
const activedKKIndex = ref(0);
|
||||
const onSwiperKK = (swiper: SwiperType) => {
|
||||
kkSwiper = swiper
|
||||
}
|
||||
const onSlideChangeKK = (s: any) => {
|
||||
activedKKIndex.value = s.snapIndex;
|
||||
}
|
||||
onMounted(() => {
|
||||
// 在移动端视图下初始化
|
||||
document.documentElement.style.fontSize = '16px';
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/animate/animate.min.css";
|
||||
@import "@/assets/css/index.css";
|
||||
|
||||
/* 添加更多响应式样式 */
|
||||
.section_3 {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.er_back {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.san_count {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
|
||||
/* 调整标题间距 */
|
||||
.text_59,
|
||||
.text_67,
|
||||
.text_38,
|
||||
.text_13 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* 优化按钮样式 */
|
||||
.text-wrapper_12 {
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-wrapper_12-is {
|
||||
color: #57D1C8;
|
||||
}
|
||||
|
||||
.box_7 {
|
||||
height: 2px;
|
||||
background-color: #57D1C8;
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* 手机端专用样式 */
|
||||
@media (max-width: 768px) {
|
||||
|
||||
// .flex-col {
|
||||
// width: 100%;
|
||||
// }
|
||||
.group_17 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.box_22 {
|
||||
width: 100% !important;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.group_26 {
|
||||
width: 66% !important;
|
||||
}
|
||||
|
||||
.group_27 {
|
||||
left: 245px !important;
|
||||
height: 39px !important;
|
||||
}
|
||||
|
||||
.group_28 {
|
||||
margin: 8px 0 0 22px;
|
||||
}
|
||||
.group_36{
|
||||
height: auto!important;
|
||||
margin-top: 0px!important;
|
||||
}
|
||||
.text_68 {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.box_23{
|
||||
width: 48%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
height: 145px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.box_24{
|
||||
width: 48%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
height: 145px;
|
||||
padding-top: 20px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.image_16,
|
||||
.label_5,
|
||||
.label_1,
|
||||
.label_2,
|
||||
.image_10 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.text_62,
|
||||
.text_64,
|
||||
.text_65,
|
||||
.text-group_6,
|
||||
.text_35,
|
||||
.text_36 {
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text_63,
|
||||
.paragraph_3,
|
||||
.text_66,
|
||||
.text_34,
|
||||
.paragraph_2,
|
||||
.text_37 {
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.image-wrapper_7{
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.box_26{
|
||||
margin-left: 0px;;
|
||||
height: auto;
|
||||
padding:20px 10px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.text_68{
|
||||
margin: 0px;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
.group_38{
|
||||
margin: 0 auto;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.image_13{
|
||||
height: 100%;
|
||||
}
|
||||
.group_10{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.image_3 {
|
||||
width:100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.image-text_15{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.box_33 {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.box_34 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.box_2{
|
||||
height: 100%;
|
||||
}
|
||||
.text-wrapper_12{
|
||||
height:38px
|
||||
}
|
||||
.block_6{
|
||||
height: 100%;
|
||||
}
|
||||
.block_8{
|
||||
height: 100%;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.list-items_1{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.text-wrapper_13{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
76
pages/phone_list/[id].vue
Normal file
76
pages/phone_list/[id].vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div class="bg-[#ffffff]">
|
||||
<!-- 头部导航和标题区域 -->
|
||||
<div class="box_6 flex-col px-4 py-3">
|
||||
<div class="group_1">
|
||||
<div class="flex section_4 flex-col sm:flex-row justify-between items-center mb-2">
|
||||
<img class="thumbnail_1 w-6 h-6" referrerpolicy="no-referrer" src="public/images/home.png" />
|
||||
<span class="text_13 text-sm mt-1 sm:mt-0">您的位置：首页>系统公告</span>
|
||||
</div>
|
||||
<div class="text_14 text-center text-xl font-bold my-3">系统公告</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 公告列表 -->
|
||||
<div class="flex box_7 flex-col px-4 py-2" v-for="item in 5">
|
||||
<div class="flex image-text_7 flex-col sm:flex-row justify-between mb-4 border-b pb-4">
|
||||
<img class="image_1 w-full sm:w-24 h-auto sm:h-24 object-cover mb-3 sm:mb-0" referrerpolicy="no-referrer" src="public/images/new1.png" />
|
||||
|
||||
<div class="flex group_13 flex-col justify-between flex-1 sm:ml-4">
|
||||
<div class="flex text-group_7 flex-col justify-between">
|
||||
<span class="text_15 text-base font-medium mb-2">
|
||||
青云计划」再启航，树立长三角放疗「顶天立地」人才培养…
|
||||
</span>
|
||||
<span class="text_16 text-sm text-gray-600 line-clamp-3">
|
||||
在清明节来临之际，为缅怀革命先烈，传承红色精神，增强党支部的凝聚力和战斗力。3月29日，我院机关党总支党委宣传处党支部联合党委办公室党支部赴郑州烈士陵园开展"传承红色基因，续红色血脉"主.….
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center mt-3">
|
||||
<img class="label_1 h-5" referrerpolicy="no-referrer" src="public/images/bs1.png" />
|
||||
<!-- 日期移到右侧 -->
|
||||
<div class="text-right">
|
||||
<span class="text_17 block text-xl font-bold">08</span>
|
||||
<span class="text_18 block text-xs text-gray-500">2025.04</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页或底部区域 -->
|
||||
<div class="group_18 flex-row justify-center my-4 px-4">
|
||||
<!-- 分页控件可以在这里添加 -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PhoneListDetail'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/assets/css/common.scss";
|
||||
@import "@/assets/css/list.css";
|
||||
|
||||
/* 手机端适配样式 */
|
||||
@media (max-width: 640px) {
|
||||
.box_6, .box_7 {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.text_14 {
|
||||
font-size: 1.25rem;
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.text_15 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.text_16 {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
public/images/bbe.png
Normal file
BIN
public/images/bbe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 865 B |
BIN
public/images/bs1.png
Normal file
BIN
public/images/bs1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 461 B |
BIN
public/images/home.png
Normal file
BIN
public/images/home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 348 B |
Binary file not shown.
|
Before Width: | Height: | Size: 732 B After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 923 B After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 560 B After Width: | Height: | Size: 795 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.5 KiB |
BIN
public/images/list-bg.png
Normal file
BIN
public/images/list-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Loading…
x
Reference in New Issue
Block a user