继续制作
This commit is contained in:
parent
a075a79f88
commit
3735567b36
47
app.vue
47
app.vue
@ -1,10 +1,15 @@
|
||||
<template>
|
||||
<AppHeader />
|
||||
<NuxtPage />
|
||||
<AppFooter/>
|
||||
<n-config-provider :locale="zhCN" :date-locale="dateZhCN">
|
||||
<AppHeader />
|
||||
<NuxtPage />
|
||||
<AppFooter />
|
||||
</n-config-provider>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineComponent } from 'vue'
|
||||
import { NConfigProvider } from 'naive-ui'
|
||||
import { zhCN, dateZhCN } from 'naive-ui'
|
||||
import $api from '@/service/webRequest'
|
||||
import { useStore } from '~/store'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
@ -28,37 +33,33 @@ 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>
|
||||
#__nuxt{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
#__nuxt {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
1289
assets/css/about.css
Normal file
1289
assets/css/about.css
Normal file
File diff suppressed because it is too large
Load Diff
@ -392,13 +392,11 @@
|
||||
}
|
||||
|
||||
.text-group_13 {
|
||||
width: 136px;
|
||||
height: 18px;
|
||||
margin: 12px 0 0 9px;
|
||||
margin: 12px 5px 0 9px;
|
||||
}
|
||||
|
||||
.text_14 {
|
||||
width: 54px;
|
||||
height: 18px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(50, 50, 50, 1);
|
||||
@ -406,13 +404,10 @@
|
||||
font-family: Source Han Serif CN-Heavy;
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.text_15 {
|
||||
width: 70px;
|
||||
height: 14px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(87, 209, 200, 1);
|
||||
font-size: 14px;
|
||||
@ -422,6 +417,8 @@
|
||||
white-space: nowrap;
|
||||
line-height: 14px;
|
||||
margin-top: 4px;
|
||||
margin-left: 10px;
|
||||
|
||||
}
|
||||
|
||||
.text_16 {
|
||||
@ -1685,7 +1682,7 @@
|
||||
.image_16 {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin:0 auto
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.text_64 {
|
||||
@ -1816,8 +1813,9 @@
|
||||
font-family: Source Han Serif CN-Regular;
|
||||
font-weight: NaN;
|
||||
text-align: left;
|
||||
line-height: 20px;
|
||||
margin: 16px 0 34px 30px;
|
||||
line-height: 22px;
|
||||
margin: 16px;
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
.box_27 {
|
||||
@ -1962,7 +1960,7 @@
|
||||
}
|
||||
|
||||
.block_9 {
|
||||
width: 1183px;
|
||||
width: 70%;
|
||||
height: 111px;
|
||||
margin: 23px 0 0 358px;
|
||||
}
|
||||
@ -2476,6 +2474,10 @@
|
||||
margin: 20px 0 53px 658px;
|
||||
}
|
||||
|
||||
.text-wrapper_63 span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
.text-wrapper_63 {
|
||||
margin: 20px 0 0 349px;
|
||||
@ -2736,14 +2738,29 @@ button:active {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.group_6 .swiper-slide img{
|
||||
width:100%;
|
||||
|
||||
.group_6 .swiper-slide img {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
height:auto;
|
||||
transition:1s linear 2s;
|
||||
transform:scale(1.1,1.1);
|
||||
}
|
||||
.group_6 .swiper-slide-active img,.swiper-slide-duplicate-active img{
|
||||
transition:6s linear;
|
||||
transform:scale(1,1);
|
||||
}
|
||||
height: auto;
|
||||
transition: 1s linear 2s;
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
|
||||
.group_6 .swiper-slide-active img,
|
||||
.swiper-slide-duplicate-active img {
|
||||
transition: 6s linear;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
.left-my-news {
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
.my_text_3{
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3; /* 限制为两行 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
||||
}
|
||||
@ -370,7 +370,7 @@
|
||||
}
|
||||
|
||||
.image-text_7 {
|
||||
width: 948px;
|
||||
width: 72%;
|
||||
height: 135px;
|
||||
margin: 38px 152px 0 41px;
|
||||
}
|
||||
@ -397,20 +397,17 @@
|
||||
|
||||
.text_15 {
|
||||
width: 537px;
|
||||
height: 18px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(50, 50, 50, 1);
|
||||
font-size: 20px;
|
||||
font-family: Microsoft YaHei-Regular;
|
||||
font-weight: NaN;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.text_16 {
|
||||
width: 708px;
|
||||
height: 38px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
font-size: 14px;
|
||||
@ -439,7 +436,7 @@
|
||||
}
|
||||
|
||||
.text-wrapper_11 {
|
||||
width: 100%;
|
||||
width: 126px;
|
||||
height: 210px;
|
||||
justify-content: flex-center;
|
||||
}
|
||||
|
||||
@ -52,22 +52,24 @@
|
||||
<span class="text_103">中医科门诊</span>
|
||||
<span class="text_104">妇产科门诊</span>
|
||||
</div>
|
||||
<div class="section_5 flex-col"></div>
|
||||
<div class="section_6 flex-col"></div>
|
||||
<div class="flex flex-row" style="gap: 30px;margin-left: 50px;">
|
||||
<div v-for="item in broadcast" class="text-center">
|
||||
<a :href="item.live_address" target="_blank">
|
||||
<img src="public/images/y1.png" width="150px" height="150px" alt="服务号">
|
||||
</a>
|
||||
<div style="color: #ffffff;font-size: 15px;margin-top: 10px;">{{ item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-wrapper_63 flex-row">
|
||||
<span class="text_105">来院路线</span>
|
||||
<span class="text_106">内科病区</span>
|
||||
<span class="text_107">妇产科门诊</span>
|
||||
<span class="text_108">妇产科门诊</span>
|
||||
<span class="text_109">服务号</span>
|
||||
<span class="text_110">订阅号</span>
|
||||
<span class="text_111">来院路线</span>
|
||||
<span class="text_112">内科病区</span>
|
||||
<span class="text_113">妇产科门诊</span>
|
||||
<span class="text_114">妇产科门诊</span>
|
||||
<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>
|
||||
@ -89,7 +91,7 @@
|
||||
<!-- 快速链接区域（可折叠） -->
|
||||
<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>
|
||||
<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>
|
||||
@ -99,7 +101,7 @@
|
||||
</div>
|
||||
|
||||
<div class="link-section" @click="toggleSection('departments')">
|
||||
<h4>科室导航 <i :class="{'arrow-down': !openSections.departments, 'arrow-up': openSections.departments}"></i></h4>
|
||||
<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>
|
||||
@ -132,7 +134,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, reactive } from 'vue';
|
||||
|
||||
import $api from '@/service/webRequest'
|
||||
// 用于检测设备类型的响应式变量
|
||||
const isMobile = ref(false);
|
||||
|
||||
@ -165,6 +167,7 @@ const checkIfMobile = () => {
|
||||
onMounted(() => {
|
||||
// 初始检查
|
||||
checkIfMobile();
|
||||
getBroadcast();
|
||||
// 添加窗口大小变化监听
|
||||
window.addEventListener('resize', checkIfMobile);
|
||||
});
|
||||
@ -173,6 +176,19 @@ onMounted(() => {
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', checkIfMobile);
|
||||
});
|
||||
|
||||
const broadcast = ref([]);
|
||||
const getBroadcast = () => {
|
||||
$api.post("/api/Broadcast/wl_url")
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
broadcast.value = res.data.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -186,14 +202,14 @@ onUnmounted(() => {
|
||||
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);
|
||||
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.hospital-info {
|
||||
h3 {
|
||||
color: rgba(26, 172, 162, 1);
|
||||
@ -201,13 +217,13 @@ onUnmounted(() => {
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin: 8px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
width: 16px;
|
||||
@ -215,29 +231,29 @@ onUnmounted(() => {
|
||||
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);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
@ -248,38 +264,38 @@ onUnmounted(() => {
|
||||
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);
|
||||
}
|
||||
@ -287,56 +303,56 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.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);
|
||||
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;
|
||||
@ -345,16 +361,20 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-wrapper_59 span{
|
||||
|
||||
.text-wrapper_59 span {
|
||||
cursor: pointer;
|
||||
}
|
||||
.text-wrapper_60 span{
|
||||
|
||||
.text-wrapper_60 span {
|
||||
cursor: pointer;
|
||||
}
|
||||
.text-wrapper_61 span{
|
||||
|
||||
.text-wrapper_61 span {
|
||||
cursor: pointer;
|
||||
}
|
||||
.text-wrapper_62 span{
|
||||
|
||||
.text-wrapper_62 span {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
<template>
|
||||
<div class="box_32 flex-col">
|
||||
<div class="section_1 flex-row justify-center" :style="!isMobile ? 'padding-top: 25px;height: 110px;' : 'padding-top: 0;height: 50px;'">
|
||||
<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">
|
||||
<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>
|
||||
@ -15,66 +17,28 @@
|
||||
|
||||
<!-- 桌面端菜单 -->
|
||||
<div v-if="!isMobile" class="section_2 flex-row">
|
||||
|
||||
<div :class="isLinl==0?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=0">
|
||||
|
||||
<div :class="isLinl == 0 ? 'group_2 flex-col' : 'group_4 flex-col'" @click="openLinl(0)">
|
||||
<span class="text_2">首页</span>
|
||||
<div v-if="isLinl==0" class="group_3 flex-col"></div>
|
||||
<div v-if="isLinl == 0" class="group_3 flex-col"></div>
|
||||
</div>
|
||||
<div :class="isLinl==1?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=1">
|
||||
<div :class="isLinl == -1 ? 'group_2 flex-col' : 'group_4 flex-col'" @click="openLinl(-1)">
|
||||
<span class="text_3">医院概况</span>
|
||||
<div v-if="isLinl==1" class="group_3 flex-col"></div>
|
||||
<div v-if="isLinl == -1" class="group_3 flex-col"></div>
|
||||
</div>
|
||||
<div :class="isLinl==2?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=2">
|
||||
<span class="text_3">党建工作</span>
|
||||
<div v-if="isLinl==2" class="group_3 flex-col"></div>
|
||||
</div>
|
||||
<div :class="isLinl==3?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=3">
|
||||
<span class="text_3">医生团队</span>
|
||||
<div v-if="isLinl==3" class="group_3 flex-col"></div>
|
||||
</div>
|
||||
<div :class="isLinl==4?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=4">
|
||||
<span class="text_3">科室介绍</span>
|
||||
<div v-if="isLinl==4" class="group_3 flex-col"></div>
|
||||
</div>
|
||||
<div :class="isLinl==5?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=5">
|
||||
<span class="text_3">招聘信息</span>
|
||||
<div v-if="isLinl==5" class="group_3 flex-col"></div>
|
||||
</div>
|
||||
<div :class="isLinl==6?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=6">
|
||||
<span class="text_3">健康科普</span>
|
||||
<div v-if="isLinl==6" class="group_3 flex-col"></div>
|
||||
</div>
|
||||
<div :class="isLinl==7?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=7">
|
||||
<span class="text_3">院务公开</span>
|
||||
<div v-if="isLinl==7" class="group_3 flex-col"></div>
|
||||
</div>
|
||||
<div :class="isLinl==8?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=8">
|
||||
<span class="text_3">患者服务</span>
|
||||
<div v-if="isLinl==8" class="group_3 flex-col"></div>
|
||||
</div>
|
||||
<div :class="isLinl==9?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=9">
|
||||
<span class="text_3">紧急服务</span>
|
||||
<div v-if="isLinl==9" class="group_3 flex-col"></div>
|
||||
</div>
|
||||
<div :class="isLinl==10?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=10">
|
||||
<span class="text_3">科研成果</span>
|
||||
<div v-if="isLinl==10" class="group_3 flex-col"></div>
|
||||
<div v-for="(item, index) in groupList" :key="item.id"
|
||||
:class="isLinl == item.id ? 'group_2 flex-col' : 'group_4 flex-col'" @click="isOpneLinl(item)">
|
||||
<span class="text_3">{{ item.name }}</span>
|
||||
<div v-if="isLinl == item.id" 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 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 v-for="(item, index) in groupList" :key="item.id" class="mobile-menu-item"
|
||||
:class="{ 'active': isLinl == item.id }" @click="isOpneLinl(item)">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -89,22 +53,19 @@ const route = useRoute()
|
||||
const isMenuOpen = ref(false)
|
||||
const { locale } = useI18n()
|
||||
const isLinl = ref(0)
|
||||
|
||||
import $api from '@/service/webRequest'
|
||||
// 手机端相关变量和函数
|
||||
const isMobile = ref(false)
|
||||
const mobileMenuOpen = ref(false)
|
||||
|
||||
const router = useRouter()
|
||||
// 检测是否为手机端
|
||||
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
|
||||
}
|
||||
}
|
||||
@ -120,17 +81,62 @@ const selectMenuItem = (index: number) => {
|
||||
if (isMobile.value) {
|
||||
mobileMenuOpen.value = false
|
||||
}
|
||||
if (index == 0) {
|
||||
sessionStorage.setItem('group_id', '0')
|
||||
router.push('/');
|
||||
} else {
|
||||
sessionStorage.setItem('group_id', '-1')
|
||||
window.location.href = `/about`
|
||||
}
|
||||
}
|
||||
const isOpneLinl = (item: any) => {
|
||||
console.log(item);
|
||||
isLinl.value = item.id;
|
||||
sessionStorage.setItem('group_id', item.id)
|
||||
mobileMenuOpen.value = false
|
||||
router.push(`/list/${item.id}`)
|
||||
}
|
||||
const openLinl = (item) => {
|
||||
isLinl.value = item;
|
||||
mobileMenuOpen.value = false
|
||||
if (item == 0) {
|
||||
sessionStorage.setItem('group_id', '0')
|
||||
router.push('/');
|
||||
} else {
|
||||
sessionStorage.setItem('group_id', '-1')
|
||||
//在当前页面打开
|
||||
window.location.href = `/about`
|
||||
}
|
||||
}
|
||||
|
||||
// 监听窗口大小变化
|
||||
onMounted(() => {
|
||||
if (route.path == '/about') {
|
||||
isLinl.value = -1
|
||||
} else {
|
||||
isLinl.value = Number(sessionStorage.getItem('group_id'))
|
||||
}
|
||||
|
||||
checkIfMobile()
|
||||
window.addEventListener('resize', checkIfMobile)
|
||||
getGroupList()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', checkIfMobile)
|
||||
})
|
||||
const groupList = ref([])
|
||||
const getGroupList = () => {
|
||||
$api.post("/api/news/group", { flag: 'top' })
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
groupList.value = res.data.data;
|
||||
//在第三个位置加上一个
|
||||
groupList.value.splice(0, 0, { id: -3, name: '医生团队' });
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -175,7 +181,7 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.text_1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@ -3,22 +3,13 @@ import { defineNuxtConfig } from 'nuxt/config'
|
||||
|
||||
export default defineNuxtConfig({
|
||||
app: {
|
||||
baseURL:'/',
|
||||
baseURL: '/',
|
||||
},
|
||||
nitro: {
|
||||
routeRules: {
|
||||
'/**': { trailingSlash: false }
|
||||
}
|
||||
},
|
||||
router: {
|
||||
// extendRoutes(routes, resolve) {
|
||||
// routes.push({
|
||||
// name: 'index_info',
|
||||
// path: '/params/:param1', // * 表示可选的多个参数
|
||||
// component: resolve(__dirname, 'pages/index_info.vue')
|
||||
// });
|
||||
// }
|
||||
},
|
||||
ssr: false,
|
||||
css: [
|
||||
'swiper/css',
|
||||
@ -39,7 +30,7 @@ export default defineNuxtConfig({
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: "https://www.navigatortrades.com/",
|
||||
target: "http://192.168.10.140/",
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
}
|
||||
|
||||
137
package-lock.json
generated
137
package-lock.json
generated
@ -15,6 +15,7 @@
|
||||
"nuxt-icons": "^3.2.1",
|
||||
"pinia": "^2.1.7",
|
||||
"swiper": "^11.2.5",
|
||||
"vue-baidu-map-3x": "^1.0.40",
|
||||
"vue-i18n": "^9.8.0",
|
||||
"vue-swiper-animate": "^1.0.0"
|
||||
},
|
||||
@ -1891,25 +1892,24 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@nuxt/telemetry": {
|
||||
"version": "2.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@nuxt/telemetry/-/telemetry-2.6.5.tgz",
|
||||
"integrity": "sha512-lwMp9OHML/m0mjh7P5iz9PxINnk5smGkGebh88Wh8PjvnRooY1TBsbyq7mlSrNibpwD1BkwqhV5IAZOXWHLxMQ==",
|
||||
"version": "2.6.6",
|
||||
"resolved": "https://registry.npmjs.org/@nuxt/telemetry/-/telemetry-2.6.6.tgz",
|
||||
"integrity": "sha512-Zh4HJLjzvm3Cq9w6sfzIFyH9ozK5ePYVfCUzzUQNiZojFsI2k1QkSBrVI9BGc6ArKXj/O6rkI6w7qQ+ouL8Cag==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@nuxt/kit": "^3.15.4",
|
||||
"citty": "^0.1.6",
|
||||
"consola": "^3.4.0",
|
||||
"consola": "^3.4.2",
|
||||
"destr": "^2.0.3",
|
||||
"dotenv": "^16.4.7",
|
||||
"git-url-parse": "^16.0.0",
|
||||
"git-url-parse": "^16.0.1",
|
||||
"is-docker": "^3.0.0",
|
||||
"ofetch": "^1.4.1",
|
||||
"package-manager-detector": "^0.2.9",
|
||||
"parse-git-config": "^3.0.0",
|
||||
"pathe": "^2.0.2",
|
||||
"package-manager-detector": "^1.1.0",
|
||||
"pathe": "^2.0.3",
|
||||
"rc9": "^2.1.2",
|
||||
"std-env": "^3.8.0"
|
||||
"std-env": "^3.8.1"
|
||||
},
|
||||
"bin": {
|
||||
"nuxt-telemetry": "bin/nuxt-telemetry.mjs"
|
||||
@ -4467,6 +4467,12 @@
|
||||
"integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@yangjianfei/bmaplib.lushu": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@yangjianfei/bmaplib.lushu/-/bmaplib.lushu-1.0.0.tgz",
|
||||
"integrity": "sha512-qZVijbgUgNs6tsP1muS67x0XzE5fJ3kFireouDvXO3bUYVV6XbpjZXksQTsggihLMIEvC1DO9GS9vVF8CnEeqQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/abbrev": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-3.0.0.tgz",
|
||||
@ -4929,6 +4935,39 @@
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/bmaplib.curveline": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/bmaplib.curveline/-/bmaplib.curveline-1.0.0.tgz",
|
||||
"integrity": "sha512-9wcFMVhiYxNPqpvsLDAADn3qDhNzXp2mA6VyHSHg2XOAgSooC7ZiujdFhy0sp+0QYjTfJ/MjmLuNoUg2HHxH4Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/bmaplib.distancetool": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/bmaplib.distancetool/-/bmaplib.distancetool-1.0.2.tgz",
|
||||
"integrity": "sha512-EvxMnQRH6xM036zx5OLPyTg5tMCTbFBuGTTHOtExLy2/T0X6v5Va0YE7c3IPm/a/Eo5V/ynYpOLOLZbRY8ccyA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/bmaplib.heatmap": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/bmaplib.heatmap/-/bmaplib.heatmap-1.0.4.tgz",
|
||||
"integrity": "sha512-rmhqUARBpUSJ9jXzUI2j7dIOqnc38bqubkx/8a349U2qtw/ulLUwyzRD535OrA8G7w5cz4aPKm6/rNvUAarg/Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/bmaplib.markerclusterer": {
|
||||
"version": "1.0.13",
|
||||
"resolved": "https://registry.npmjs.org/bmaplib.markerclusterer/-/bmaplib.markerclusterer-1.0.13.tgz",
|
||||
"integrity": "sha512-VrLyWSiuDEVNi0yUfwOhFQ6z1oEEHS4w36GNu3iASu6p52QIx9uAXMUkuSCHReNR0bj2Cp9SA1dSx5RpojXajQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"bmaplib.texticonoverlay": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/bmaplib.texticonoverlay": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/bmaplib.texticonoverlay/-/bmaplib.texticonoverlay-1.0.2.tgz",
|
||||
"integrity": "sha512-4ZTWr4ZP3B6qEWput5Tut16CfZgII38YwM3bpyb4gFTQyORlKYryFp9WHWrwZZaHlOyYDAXG9SX0hka43jTADg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/boolbase": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
|
||||
@ -5539,9 +5578,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/consola": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npmjs.org/consola/-/consola-3.4.0.tgz",
|
||||
"integrity": "sha512-EiPU8G6dQG0GFHNR8ljnZFki/8a+cQwEQ+7wpxdChl02Q8HXlwEZWD5lqAF8vC2sEC3Tehr8hy7vErz88LHyUA==",
|
||||
"version": "3.4.2",
|
||||
"resolved": "https://registry.npmjs.org/consola/-/consola-3.4.2.tgz",
|
||||
"integrity": "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": "^14.18.0 || >=16.10.0"
|
||||
@ -7301,16 +7340,6 @@
|
||||
"giget": "dist/cli.mjs"
|
||||
}
|
||||
},
|
||||
"node_modules/git-config-path": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/git-config-path/-/git-config-path-2.0.0.tgz",
|
||||
"integrity": "sha512-qc8h1KIQbJpp+241id3GuAtkdyJ+IK+LIVtkiFTRKRrmddDzs3SI9CvP1QYmWBFvm1I/PWRwj//of8bgAc0ltA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/git-up": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/git-up/-/git-up-8.0.1.tgz",
|
||||
@ -9770,14 +9799,11 @@
|
||||
"license": "BlueOak-1.0.0"
|
||||
},
|
||||
"node_modules/package-manager-detector": {
|
||||
"version": "0.2.11",
|
||||
"resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-0.2.11.tgz",
|
||||
"integrity": "sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==",
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.1.0.tgz",
|
||||
"integrity": "sha512-Y8f9qUlBzW8qauJjd/eu6jlpJZsuPJm2ZAV0cDVd420o4EdpH5RPdoCv+60/TdJflGatr4sDfpAL6ArWZbM5tA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"quansync": "^0.2.7"
|
||||
}
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/parent-module": {
|
||||
"version": "1.0.1",
|
||||
@ -9792,27 +9818,6 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/parse-git-config": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/parse-git-config/-/parse-git-config-3.0.0.tgz",
|
||||
"integrity": "sha512-wXoQGL1D+2COYWCD35/xbiKma1Z15xvZL8cI25wvxzled58V51SJM04Urt/uznS900iQor7QO04SgdfT/XlbuA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"git-config-path": "^2.0.0",
|
||||
"ini": "^1.3.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/parse-git-config/node_modules/ini": {
|
||||
"version": "1.3.8",
|
||||
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
|
||||
"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/parse-json": {
|
||||
"version": "8.1.0",
|
||||
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-8.1.0.tgz",
|
||||
@ -12287,6 +12292,12 @@
|
||||
"node": ">=12.22"
|
||||
}
|
||||
},
|
||||
"node_modules/tiny-emitter": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
|
||||
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tiny-invariant": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
|
||||
@ -13034,9 +13045,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.1.tgz",
|
||||
"integrity": "sha512-n2GnqDb6XPhlt9B8olZPrgMD/es/Nd1RdChF6CBD/fHW6pUyUTt2sQW2fPRX5GiD9XEa6+8A6A4f2vT6pSsE7Q==",
|
||||
"version": "6.2.5",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.5.tgz",
|
||||
"integrity": "sha512-j023J/hCAa4pRIUH6J9HemwYfjB5llR2Ps0CWeikOtdR8+pAURAk0DoJC5/mm9kd+UgdnIy7d6HE4EAvlYhPhA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -13410,6 +13421,25 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vue-baidu-map-3x": {
|
||||
"version": "1.0.40",
|
||||
"resolved": "https://registry.npmjs.org/vue-baidu-map-3x/-/vue-baidu-map-3x-1.0.40.tgz",
|
||||
"integrity": "sha512-Rq3g1KNsNztkuX3SJIuCpy6HE3xHVX8ySgqS2xC3jut/hvVr5kFBS0Nu7uYppk3xYVz69S1JFxU8WUI0Xftpyg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@yangjianfei/bmaplib.lushu": "^1.0.0",
|
||||
"bmaplib.curveline": "^1.0.0",
|
||||
"bmaplib.distancetool": "^1.0.2",
|
||||
"bmaplib.heatmap": "^1.0.4",
|
||||
"bmaplib.markerclusterer": "^1.0.13",
|
||||
"tiny-emitter": "^2.1.0",
|
||||
"vue": "^3.2.25",
|
||||
"vue-router": "^4.0.14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.25"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-bundle-renderer": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-bundle-renderer/-/vue-bundle-renderer-2.1.1.tgz",
|
||||
@ -13514,7 +13544,6 @@
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
|
||||
"integrity": "sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.6.4"
|
||||
|
||||
@ -36,6 +36,7 @@
|
||||
"nuxt-icons": "^3.2.1",
|
||||
"pinia": "^2.1.7",
|
||||
"swiper": "^11.2.5",
|
||||
"vue-baidu-map-3x": "^1.0.40",
|
||||
"vue-i18n": "^9.8.0",
|
||||
"vue-swiper-animate": "^1.0.0"
|
||||
},
|
||||
|
||||
99
pages/about.vue
Normal file
99
pages/about.vue
Normal file
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="bg-[#ffffff] pb-[50px]">
|
||||
<div class="group_3 flex-col">
|
||||
<div class="section_1 flex-col">
|
||||
<div class="flex group_7 flex-row">
|
||||
<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_9 flex-row justify-center">
|
||||
<div class="flex group_8 flex-col justify-center">
|
||||
<div class="flex group_9 flex-row justify-between">
|
||||
<div class="flex image-wrapper_1 flex-col">
|
||||
<img class="label_1" referrerpolicy="no-referrer"
|
||||
src="public/images/k7.png" />
|
||||
</div>
|
||||
<span class="text_15">医院介绍</span>
|
||||
</div>
|
||||
<span class="paragraph_1">
|
||||
{{ hospitalInfo.description }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="block_2 flex-col relative">
|
||||
<img class="w-full mb-4" referrerpolicy="no-referrer" :src="hospitalInfo.image" style=" position: absolute;top: -30px;left: -30px;"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="z-10 mt-10">
|
||||
<div class="font-bold text-center" style="font-size: 32px;">医院位置</div>
|
||||
<div>
|
||||
<baidu-map @ready="onBaiduMapReady" class="map" ak="OCHRqb6XXcOh9LH7H6c67c6xAoGxznQF" v="3.0" type="API"
|
||||
:zoom="18" :center="centerVal">
|
||||
<bm-marker @click="isShowInfoWindow = true" :position="{ lng: 114.221199, lat: 32.137085 }">
|
||||
</bm-marker>
|
||||
<bm-info-window @close="isShowInfoWindow = false" :show="isShowInfoWindow"
|
||||
:position="{ lng: 114.221199, lat: 32.137085 }" :width="100" :max-width="300">
|
||||
<div>
|
||||
信阳第五人民医院
|
||||
</div>
|
||||
</bm-info-window>
|
||||
</baidu-map>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue';
|
||||
import { BaiduMap, BmGeolocation, BmControl, BmInfoWindow, BmMarker } from 'vue-baidu-map-3x'
|
||||
import $api from '@/service/webRequest'
|
||||
const router = useRouter()
|
||||
const isShowInfoWindow = ref(true);
|
||||
// 百度地图默认定位
|
||||
const centerVal = ref({ lng: 114.221199, lat: 32.137085 });
|
||||
const onBaiduMapReady = (map: any) => {
|
||||
console.log(map);
|
||||
}
|
||||
onMounted(() => {
|
||||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
if (coMobile) {
|
||||
router.push('/phone_about')
|
||||
} else {
|
||||
router.push('/about')
|
||||
}
|
||||
getHospitalInfo();
|
||||
});
|
||||
//医院简介
|
||||
const hospitalInfo = ref({});
|
||||
const getHospitalInfo = () => {
|
||||
$api.post("/api/Broadcast/hospital_overview")
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
hospitalInfo.value = res.data.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/common.scss";
|
||||
@import "@/assets/css/about.css";
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
padding: 40px 360px;
|
||||
}
|
||||
@media screen and (max-width: 1440px) {
|
||||
.map { padding:40px 30px;}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
img {
|
||||
max-width: none !important;
|
||||
}
|
||||
</style>
|
||||
259
pages/index.vue
259
pages/index.vue
@ -3,15 +3,13 @@
|
||||
<div class="group_6 flex-col relative">
|
||||
<swiper class="swiper-container w-full" :slides-per-view="1" @swiper="onSwiperNews"
|
||||
v-bind="swiperOptionsNews" @slideChange="onSlideChangeNews">
|
||||
<swiper-slide>
|
||||
<img src="public/images/sw1.png" class="w-full"/>
|
||||
<swiper-slide v-for="item in swiperList">
|
||||
<img :src="item.rotation_image" class="w-full" />
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div class="flex items-center justify-center gap-5 absolute w-full z-10 bottom-[80px]">
|
||||
<div class="w-[30px] bg-white h-[5px]" :class="activeIndex == 0 ? '' : 'opacity-50'"></div>
|
||||
<div class="w-[30px] bg-white h-[5px]" :class="activeIndex == 1 ? '' : 'opacity-50'"></div>
|
||||
<div class="w-[30px] bg-white h-[5px]" :class="activeIndex == 2 ? '' : 'opacity-50'"></div>
|
||||
<div class="w-[30px] bg-white h-[5px]" :class="activeIndex == 3 ? '' : 'opacity-50'"></div>
|
||||
<div v-for="(item, index) in swiperList" class="w-[30px] bg-white h-[5px]"
|
||||
:class="activeIndex == index ? '' : 'opacity-50'"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--第二块-->
|
||||
@ -30,14 +28,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_23 flex-col">
|
||||
<div class="box_23 flex-col" @click="openUrl(0)">
|
||||
<div class="image-wrapper_7 flex-col i2">
|
||||
<img class="image_16" referrerpolicy="no-referrer" src="public/images/k5.png" />
|
||||
</div>
|
||||
<span class="text_62">医院概况</span>
|
||||
<span class="text_63">Hospital Overview</span>
|
||||
</div>
|
||||
<div class="box_24 flex-col">
|
||||
<div class="box_24 flex-col" @click="openUrl(1)">
|
||||
<div class="image-wrapper_8 flex-col">
|
||||
<img class="image_16" referrerpolicy="no-referrer" src="public/images/k1.png" />
|
||||
</div>
|
||||
@ -47,7 +45,7 @@
|
||||
<br />
|
||||
</span>
|
||||
</div>
|
||||
<div class="box_25 flex-col">
|
||||
<div class="box_25 flex-col" @click="openUrl(0)">
|
||||
<div class="image-wrapper_9 flex-col">
|
||||
<img class="label_5" referrerpolicy="no-referrer" src="public/images/k4.png" />
|
||||
</div>
|
||||
@ -60,7 +58,7 @@
|
||||
<div class="group_19 flex-col"></div>
|
||||
</div>
|
||||
<div class="group_36 flex-col justify-between">
|
||||
<div class="box_14 flex-col">
|
||||
<div class="box_14 flex-col" @click="openUrl(2)">
|
||||
<div class="image-text_20 flex-col justify-between">
|
||||
<div class="image-wrapper_2 flex-col">
|
||||
<img class="label_1" referrerpolicy="no-referrer" src="public/images/k6.png" />
|
||||
@ -70,7 +68,7 @@
|
||||
<span class="text_34">Emergency services</span>
|
||||
</div>
|
||||
<div class="box_15 flex-col">
|
||||
<div class="section_4 flex-col">
|
||||
<div class="section_4 flex-col" @click="openUrl(3)">
|
||||
<div class="block_2 flex-col align-center">
|
||||
<div class="image-wrapper_3 flex-col">
|
||||
<img class="label_2" referrerpolicy="no-referrer" src="public/images/k2.png" />
|
||||
@ -86,7 +84,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="group_37 flex-col justify-between">
|
||||
<div class="box_16 flex-col">
|
||||
<div class="box_16 flex-col" @click="openUrl(4)">
|
||||
<div class="image-wrapper_4 flex-col">
|
||||
<img class="image_10" referrerpolicy="no-referrer" src="public/images/k3.png" />
|
||||
</div>
|
||||
@ -98,7 +96,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-col z-10" style="flex-direction: row; margin: 0 auto;margin-top: 30px;">
|
||||
<img class="image_12" referrerpolicy="no-referrer" src="public/images/ks4.png" />
|
||||
<img class="image_12" referrerpolicy="no-referrer" :src="hospitalInfo.image" />
|
||||
<div class="box_26 flex-col">
|
||||
<div class="group_38 flex-row justify-between">
|
||||
<div class="image-wrapper_10 flex-col">
|
||||
@ -107,20 +105,20 @@
|
||||
<span class="text_67">医院简介</span>
|
||||
</div>
|
||||
<span class="text_68">
|
||||
医院内设科室15个，现有专业技术人员109人，其中高级职称7人，中级职称25人，医院设有120张床位，拥有先进的医疗设备，如飞利浦螺旋CT、德国CE公司800mAX线机、意大利移动式床边X光机、日本心电监护仪、日本肺功能测量系统、人工肝、全自动肝病治疗仪、中心监护系统、纤维内窥镜系统、有创和无创呼吸系统、重症监护系统、心脏除颤系统、中心负压和供氧系统、自动心电分析系统、全自动生化分析系统、全自动血液和尿检测系统、全自动酶标仪、荷兰彩色B超等先进医疗设备。信阳市第五人民医院奉行救死扶伤，全心全意为人民服务的宗旨，全体医务人员将以优质的服务质量、精湛的医疗技术，为广大患者提供满意周到的服务。
|
||||
{{ hospitalInfo.description }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="z-10 justify-around align-center gap-10 san_count">
|
||||
<!--左侧-->
|
||||
<div class="w-[50%]">
|
||||
<div class="left-my-news w-[50%]">
|
||||
<div class="align-center justify-between ">
|
||||
<div class="align-center">
|
||||
<img class="label_3" referrerpolicy="no-referrer" src="public/images/c2.png" />
|
||||
<span class="text_38">通知公告</span>
|
||||
</div>
|
||||
<div class="flex-row align-center"
|
||||
<div class="flex-row align-center" @click="openUrl(5)"
|
||||
style="border:1px solid #000;padding: 10px 20px;border-radius: 50px;cursor: pointer;">
|
||||
<span class="text_39">查看更多</span>
|
||||
<div class="group_22 flex-col">
|
||||
@ -129,20 +127,20 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-[20px]">
|
||||
<div v-for="(item, index) in 3" class="cursor-pointer">
|
||||
<div v-for="(item, index) in msgList" class="cursor-pointer" @click="goDetail(item)">
|
||||
<div v-if="index == 0">
|
||||
<img class="image_13" referrerpolicy="no-referrer" src="public/images/new.png" />
|
||||
<img class="image_13" referrerpolicy="no-referrer" :src="item.news_image[0]" />
|
||||
</div>
|
||||
<div class="mt-[20px]">
|
||||
<span class="text_41">国际交流添新篇发，合作共筑医疗梦 意大利锡耶纳大学教</span>
|
||||
<span class="text_41">{{ item.news_title }}</span>
|
||||
</div>
|
||||
<div class="mt-[10px]">
|
||||
<span class="text_43">
|
||||
与北京华通国康公益基金会理事长陈冉率11人专家代表团，到我院进行深度参观交流。我院院长高社干、党委副书记牛牧青、副院长富奇志及相关职能科室负责人参加了会议。
|
||||
{{ item.news_titleshort }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-[10px]">
|
||||
<span class="text_45">2025-04-15</span>
|
||||
<span class="text_45">{{ formattedYearMonthDay(item.showtime) }}</span>
|
||||
</div>
|
||||
<div class="mt-[10px]" v-if="index < 2">
|
||||
<div class="box_19 flex-col"></div>
|
||||
@ -150,13 +148,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[50%]">
|
||||
<div class="left-my-news w-[50%]">
|
||||
<div class="align-center justify-between ">
|
||||
<div class="align-center">
|
||||
<img class="label_3" referrerpolicy="no-referrer" src="public/images/c1.png" />
|
||||
<span class="text_38">医院动态</span>
|
||||
</div>
|
||||
<div class="flex-row align-center"
|
||||
<div class="flex-row align-center" @click="openUrl(6)"
|
||||
style="cursor: pointer;border: 1px solid #000;padding: 10px 20px;border-radius: 50px;">
|
||||
<span class="text_39">查看更多</span>
|
||||
<div class="group_22 flex-col">
|
||||
@ -165,16 +163,16 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-[20px]">
|
||||
<div v-for="(item, index) in 3" class="cursor-pointer">
|
||||
<div v-for="(item, index) in dtList" class="cursor-pointer" @click="goDetail(item)">
|
||||
<div v-if="index == 0">
|
||||
<img class="image_13" referrerpolicy="no-referrer" src="public/images/new1.png" />
|
||||
<img class="image_13" referrerpolicy="no-referrer" :src="item.news_image[0]" />
|
||||
</div>
|
||||
<div class="mt-[20px]">
|
||||
<span class="text_41">国际交流添新篇发，合作共筑医疗梦 意大利锡耶纳大学教</span>
|
||||
<span class="text_41">{{ item.news_title }}</span>
|
||||
</div>
|
||||
<div class="mt-[10px]">
|
||||
<span class="text_43">
|
||||
与北京华通国康公益基金会理事长陈冉率11人专家代表团，到我院进行深度参观交流。我院院长高社干、党委副书记牛牧青、副院长富奇志及相关职能科室负责人参加了会议。
|
||||
{{ item.news_titleshort }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-[10px]">
|
||||
@ -199,16 +197,16 @@
|
||||
</div>
|
||||
<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">
|
||||
<swiper-slide v-for="item in ysList" @click="goYsDetail(item)">
|
||||
<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">
|
||||
<span class="text_14">李商隐</span>
|
||||
<span class="text_15">副主任医师</span>
|
||||
<img class="image_3" referrerpolicy="no-referrer" :src="item.news_image[0]" />
|
||||
<div class="text-group_13 flex-row">
|
||||
<span class="text_14">{{ item.news_title }}</span>
|
||||
<span class="text_15">{{ item.news_key }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text_16">擅长:从事眼科临床工作20年，对眼科临床疾病的诊断和治疗累积了丰富的经验</span>
|
||||
<div class="text_16 my_text_2">{{ item.news_auto }}</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
@ -221,31 +219,18 @@
|
||||
</div>
|
||||
<div class="flex-row mt-[20px]">
|
||||
<div class="flex items-center justify-center gap-5 w-full z-10">
|
||||
<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedIndex == 0 ? '' : 'opacity-50'"></div>
|
||||
<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedIndex == 1 ? '' : 'opacity-50'"></div>
|
||||
<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedIndex == 2 ? '' : 'opacity-50'"></div>
|
||||
<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedIndex == 3 ? '' : 'opacity-50'"></div>
|
||||
<div v-for="(item, index) in ysTotal" class="w-[20px] bg-[#57D1C8] h-[5px]"
|
||||
:class="activedIndex == index ? '' : 'opacity-50'"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white pb-[50px]">
|
||||
<div class="block_6 flex-row justify-center">
|
||||
<div @click="card = 1" :class="['text-wrapper_12', card == 1 ? 'text-wrapper_12-is' : '', 'flex-col']">
|
||||
<span class="text_29">先进设备</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">医院环境</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">荣誉资质</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">公益行动</span>
|
||||
<div v-if="card == 4" class="box_7 flex-col"></div>
|
||||
<div v-for="item in bottomList" @click="cardOpen(item)"
|
||||
:class="['text-wrapper_12', card == item.id ? 'text-wrapper_12-is' : '', 'flex-col']">
|
||||
<span class="text_29">{{ item.name }}</span>
|
||||
<div v-if="card == item.id" class="box_7 flex-col"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -255,20 +240,17 @@
|
||||
<img class="w-[50px]" src="public/images/left.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<swiper-slide v-for="(item, index) in bottomInfoList" @click="goDetail(item)">
|
||||
<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>
|
||||
<span class="text_33">{{ item.news_title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
|
||||
|
||||
<div class="box_11 flex-col">
|
||||
<div id="kkswipen_prev" style="cursor: pointer;">
|
||||
<img class="w-[50px]" src="public/images/right2.png" />
|
||||
@ -277,10 +259,8 @@
|
||||
</div>
|
||||
<div class="flex-row mt-[40px]">
|
||||
<div class="flex items-center justify-center gap-5 w-full z-10">
|
||||
<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedKKIndex == 0 ? '' : 'opacity-50'"></div>
|
||||
<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedKKIndex == 1 ? '' : 'opacity-50'"></div>
|
||||
<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedKKIndex == 2 ? '' : 'opacity-50'"></div>
|
||||
<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedKKIndex == 3 ? '' : 'opacity-50'"></div>
|
||||
<div v-for="(item, index) in bottomInfoTotal" class="w-[20px] bg-[#57D1C8] h-[5px]"
|
||||
:class="activedKKIndex == index ? '' : 'opacity-50'"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -301,9 +281,10 @@ import * as swiperAni from '@/assets/animate/animate.js'
|
||||
import $api from '@/service/webRequest'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
import { c } from 'naive-ui'
|
||||
const { locale } = useI18n()
|
||||
|
||||
const card = ref(1);
|
||||
|
||||
|
||||
const activeIndex = ref(0);
|
||||
|
||||
@ -383,10 +364,162 @@ const onSwiperKK = (swiper: any) => {
|
||||
const onSlideChangeKK = (s) => {
|
||||
activedKKIndex.value = s.snapIndex;
|
||||
}
|
||||
const router = useRouter()
|
||||
onMounted(() => {
|
||||
|
||||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
if (coMobile) {
|
||||
router.push('/phone_index')
|
||||
} else {
|
||||
router.push('/')
|
||||
}
|
||||
getSwiperList();
|
||||
getHospitalInfo();
|
||||
getMsgList();
|
||||
getDtList();
|
||||
getYsList();
|
||||
getBottomList();
|
||||
|
||||
})
|
||||
|
||||
//轮播图
|
||||
const swiperList = ref([]);
|
||||
const getSwiperList = () => {
|
||||
$api.post("/api/index/rotation")
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
swiperList.value = res.data.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
// 通知公告
|
||||
const msgList = ref([]);
|
||||
const getMsgList = () => {
|
||||
$api.post("/api/news/index", { gory_id: 90, page: 1, pageSize: 3 })
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
msgList.value = res.data.data.list;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
// 医院动态
|
||||
const dtList = ref([]);
|
||||
const getDtList = () => {
|
||||
$api.post("/api/news/index", { gory_id: 91, page: 1, pageSize: 3 })
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
dtList.value = res.data.data.list;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
// 医生团队
|
||||
const ysList = ref([]);
|
||||
const ysTotal = ref(0);
|
||||
const getYsList = () => {
|
||||
$api.post("/api/Newsbx/index", {page: 1, pageSize: 9999 })
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
ysList.value = res.data.data.list;
|
||||
//计算页数
|
||||
ysTotal.value = Math.ceil(res.data.data.total_count / 5);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
//医院简介
|
||||
const hospitalInfo = ref({});
|
||||
const getHospitalInfo = () => {
|
||||
$api.post("/api/Broadcast/hospital_overview")
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
hospitalInfo.value = res.data.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
//先进设备等
|
||||
const card = ref(1);
|
||||
const bottomList = ref({});
|
||||
const getBottomList = () => {
|
||||
$api.post("/api/news/group", { flag: 'index' })
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
bottomList.value = res.data.data;
|
||||
card.value = res.data.data[0].id;
|
||||
getBottomInfoList();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
//先进设备list
|
||||
const bottomInfoList = ref({});
|
||||
const bottomInfoTotal = ref(0);
|
||||
const getBottomInfoList = () => {
|
||||
$api.post("/api/news/index", { gory_id: card.value, page: 1, pageSize: 999 })
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
bottomInfoList.value = res.data.data.list;
|
||||
bottomInfoTotal.value = Math.ceil(res.data.data.total_count / 8);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
const cardOpen = (item) => {
|
||||
card.value = item.id;
|
||||
getBottomInfoList();
|
||||
}
|
||||
const openUrl = (index: number) => {
|
||||
if (index == 0) {
|
||||
window.location.href = `/about`
|
||||
} else if (index == 1) {
|
||||
sessionStorage.setItem('group_id', '23')
|
||||
window.location.href = `/list/23`
|
||||
} else if (index == 2) {
|
||||
sessionStorage.setItem('group_id', '87')
|
||||
window.location.href = `/list/87`
|
||||
} else if (index == 3) {
|
||||
sessionStorage.setItem('group_id', '-3')
|
||||
window.location.href = `/list/-3`
|
||||
} else if (index == 4) {
|
||||
sessionStorage.setItem('group_id', '34')
|
||||
window.location.href = `/list/34`
|
||||
} else if (index == 5) {
|
||||
sessionStorage.setItem('group_id', '90')
|
||||
window.location.href = `/list/90`
|
||||
} else if (index == 6) {
|
||||
sessionStorage.setItem('group_id', '91')
|
||||
window.location.href = `/list/91`
|
||||
}
|
||||
else {
|
||||
sessionStorage.setItem('group_id', '0')
|
||||
window.location.href = `/`
|
||||
}
|
||||
}
|
||||
// 计算 "YYYY.MM.DD" 格式
|
||||
const formattedYearMonthDay = (showtime) => {
|
||||
const date = new Date(showtime);
|
||||
const year = date.getFullYear();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||||
const day = date.getDate().toString().padStart(2, "0");
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
const goDetail = (item) => {
|
||||
sessionStorage.setItem('group_id', '-2')
|
||||
window.open(`/info/${item.id}`)
|
||||
}
|
||||
const goYsDetail = (item) =>{
|
||||
sessionStorage.setItem('group_id', '-3')
|
||||
window.open(`/ys_info/${item.id}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
93
pages/info/[id].vue
Normal file
93
pages/info/[id].vue
Normal file
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="bg-[#ffffff]">
|
||||
<div class="box_6 flex-col">
|
||||
<div class="group_1">
|
||||
<div class="flex section_4 flex-row justify-between" style="padding-top: 67px;">
|
||||
<img class="thumbnail_1" referrerpolicy="no-referrer" src="public/images/home.png" />
|
||||
<span class="text_13">您的位置：首页>系统公告</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-container mt-[30px]">
|
||||
<div>
|
||||
<div class="title">{{ info.news_title }}</div>
|
||||
<div class="flex flex-row justify-start author">
|
||||
<div>发布人：{{ info.news_auto }}</div>
|
||||
<div class="ml-[70px]">发布时间：{{ info.showtime }}</div>
|
||||
</div>
|
||||
<div style="border-top: 1px solid rgba(238, 238, 238, 1);"></div>
|
||||
<div class="my-[30px]">
|
||||
<div v-html="info.news_content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-top: 1px solid rgba(238, 238, 238, 1);"></div>
|
||||
<div class="py-[30px]">
|
||||
<div class="">
|
||||
<div class="">
|
||||
<div>上一篇：XXXXXXXXXXXXXXXXXXXXX</div>
|
||||
<div class="mt-[10px]">下一篇：暂无</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useStore } from '~/store'
|
||||
import $api from '@/service/webRequest'
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const id = ref(route.params.id)
|
||||
onMounted(() => {
|
||||
// 在移动端视图下初始化
|
||||
document.documentElement.style.fontSize = '16px';
|
||||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
if (coMobile) {
|
||||
router.push('/phone_info/' + id.value)
|
||||
} else {
|
||||
router.push('/info/' + id.value)
|
||||
}
|
||||
getInfo();
|
||||
})
|
||||
const info = ref({})
|
||||
const getInfo = () => {
|
||||
$api.post("/api/news/info", { id: id.value })
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
info.value = res.data.data
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import "@/assets/css/common.scss";
|
||||
@import "@/assets/css/list.css";
|
||||
</style>
|
||||
<style>
|
||||
.title {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.author {
|
||||
font-size: 14px;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.page-container{
|
||||
padding: 0 360px;
|
||||
}
|
||||
@media (max-width: 1440px) {
|
||||
.page-container{
|
||||
padding: 0 100px;
|
||||
}
|
||||
}
|
||||
/* video{
|
||||
margin: 20px auto;
|
||||
} */
|
||||
</style>
|
||||
@ -4,44 +4,142 @@
|
||||
<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>
|
||||
<span class="text_13">您的位置：首页>{{ id=='-3'?'医生团队':gory_name }}</span>
|
||||
</div>
|
||||
<div class="text_14">系统公告</div>
|
||||
<div class="text_14">{{ id=='-3'?'医生团队':gory_name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex box_7 flex-row align-center" v-for="item in 5">
|
||||
<div class="flex box_7 flex-row align-center" v-for="(item, index) in newsList" :key="index"
|
||||
@click="goDetail(item)">
|
||||
<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" />
|
||||
<img class="image_1" referrerpolicy="no-referrer" :src="item.news_image[0]" />
|
||||
<div class="flex group_13 flex-col justify-between">
|
||||
<div class="flex text-group_7 flex-col justify-between">
|
||||
<span class="text_15">
|
||||
青云计划」再启航，树立长三角放疗「顶天立地」人才培养…
|
||||
<span class="text_15 text-ellipsis font-bold">
|
||||
{{ item.news_title }}
|
||||
</span>
|
||||
<span class="text_16">
|
||||
在清明节来临之际，为缅怀革命先烈，传承红色精神，增强党支部的凝聚力和战斗力。3月29日，我院机关党总支党委宣传处党支部联合党委办公室党支部赴郑州烈士陵园开展“传承红色基因，续红色血脉”主.….
|
||||
{{ item.news_auto }}
|
||||
</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 v-if="id!='-3'" class="flex text-wrapper_11 flex-col text-center">
|
||||
<span class="text_17">{{ formattedMonth(item.showtime) }}</span>
|
||||
<span class="text_18">{{ formattedYearMonth(item.showtime) }}</span>
|
||||
</div>
|
||||
<div v-if="id=='-3'" class="flex text-wrapper_11 flex-col text-center">
|
||||
<span style="font-size: 22px;margin-top: 87px;color: #ffffff;">{{ item.news_titleshort }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group_18 flex-row">
|
||||
|
||||
<div class="flex flex-row justify-center py-5">
|
||||
<n-pagination v-model:page="page" :item-count="total" size="large" show-quick-jumper show-size-picker
|
||||
@update:page="getPageList">
|
||||
</n-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import { NPagination } from 'naive-ui'
|
||||
import { nextTick, ref } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import $api from '@/service/webRequest'
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const id = ref(route.params.id)
|
||||
onMounted(() => {
|
||||
document.documentElement.style.fontSize = '16px';
|
||||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
if (coMobile) {
|
||||
router.push('/phone_list/' + id.value)
|
||||
} else {
|
||||
router.push('/list/' + id.value)
|
||||
}
|
||||
if(id.value=='-3'){
|
||||
getYsGroupList()
|
||||
}else{
|
||||
getGroupList()
|
||||
}
|
||||
})
|
||||
|
||||
const newsList = ref([])
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const total = ref(0)
|
||||
const gory_name=ref('');
|
||||
const getGroupList = () => {
|
||||
$api.post("/api/news/index", { gory_id: id.value, page: page.value, pageSize: pageSize.value })
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
newsList.value = res.data.data.list;
|
||||
total.value = res.data.data.total_count;
|
||||
gory_name.value=res.data.data.gory_name;
|
||||
//滚到页面最上面
|
||||
window.scrollTo(0, 0)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
const getPageList = (p) => {
|
||||
page.value = p;
|
||||
if(id.value=='-3'){
|
||||
getYsGroupList()
|
||||
}else{
|
||||
getGroupList()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const getYsGroupList = () => {
|
||||
$api.post("/api/Newsbx/index", { gory_id: id.value, page: page.value, pageSize: pageSize.value })
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
newsList.value = res.data.data.list;
|
||||
total.value = res.data.data.total_count;
|
||||
gory_name.value=res.data.data.gory_name;
|
||||
//滚到页面最上面
|
||||
window.scrollTo(0, 0)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const goDetail = (item: any) => {
|
||||
//router.push(`/info/${item.id}`)
|
||||
if(id.value=='-3'){
|
||||
window.open( `/ys_info/${item.id}`)
|
||||
}else{
|
||||
window.open( `/info/${item.id}`)
|
||||
}
|
||||
}
|
||||
// 计算月份（补零）
|
||||
const formattedMonth = (showtime) => {
|
||||
const date = new Date(showtime);
|
||||
return (date.getMonth() + 1).toString().padStart(2, "0");
|
||||
};
|
||||
|
||||
// 计算 "YYYY.MM" 格式
|
||||
const formattedYearMonth = (showtime) => {
|
||||
const date = new Date(showtime);
|
||||
const year = date.getFullYear();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||||
return `${year}.${month}`;
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
@import "@/assets/css/common.scss";
|
||||
@import "@/assets/css/list.css";
|
||||
|
||||
::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active {
|
||||
color: #1FC4C2;
|
||||
border: 1px solid #1FC4C2;
|
||||
}
|
||||
</style>
|
||||
|
||||
116
pages/phone_about.vue
Normal file
116
pages/phone_about.vue
Normal file
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div class="bg-[#ffffff] pb-5">
|
||||
<div class="box_6 flex-col px-4 py-3">
|
||||
<div class="group_1">
|
||||
<div class="flex section_4 justify-start items-center mb-2">
|
||||
<div>
|
||||
<img class="thumbnail_1 w-6 h-6" referrerpolicy="no-referrer" src="public/images/home.png" />
|
||||
</div>
|
||||
<div class="text_13 text-sm mt-1 sm:mt-0">您的位置：首页>联系我们</div>
|
||||
</div>
|
||||
<div class="text_14 text-center text-xl font-bold my-3">联系我们</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="z-10 px-4 mt-4">
|
||||
<img class="w-full mb-4" referrerpolicy="no-referrer" :src="hospitalInfo.image" />
|
||||
<div>
|
||||
<div class="flex flex-row items-center mb-2">
|
||||
<div>
|
||||
<img class="" referrerpolicy="no-referrer" src="public/images/k7.png" />
|
||||
</div>
|
||||
<div class="text-lg font-bold ml-3">医院介绍</div>
|
||||
</div>
|
||||
<div>
|
||||
{{ hospitalInfo.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="z-10 px-4 mt-4">
|
||||
<div class="text-lg font-bold text-center">医院位置</div>
|
||||
<div>
|
||||
<baidu-map @ready="onBaiduMapReady" class="map" ak="OCHRqb6XXcOh9LH7H6c67c6xAoGxznQF" v="3.0" type="API"
|
||||
:zoom="18" :center="centerVal">
|
||||
<bm-marker @click="isShowInfoWindow = true" :position="{ lng: 114.221199, lat: 32.137085 }">
|
||||
</bm-marker>
|
||||
<bm-info-window @close="isShowInfoWindow = false" :show="isShowInfoWindow"
|
||||
:position="{ lng: 114.221199, lat: 32.137085 }" :width="100" :max-width="300">
|
||||
<div>
|
||||
信阳第五人民医院
|
||||
</div>
|
||||
</bm-info-window>
|
||||
</baidu-map>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue';
|
||||
import { BaiduMap, BmGeolocation, BmControl, BmInfoWindow, BmMarker } from 'vue-baidu-map-3x'
|
||||
import $api from '@/service/webRequest'
|
||||
const router = useRouter()
|
||||
const isShowInfoWindow = ref(true);
|
||||
// 百度地图默认定位
|
||||
const centerVal = ref({ lng: 114.221199, lat: 32.137085 });
|
||||
const onBaiduMapReady = (map: any) => {
|
||||
console.log(map);
|
||||
}
|
||||
onMounted(() => {
|
||||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
if (coMobile) {
|
||||
router.push('/phone_about')
|
||||
} else {
|
||||
router.push('/about')
|
||||
}
|
||||
getHospitalInfo();
|
||||
});
|
||||
//医院简介
|
||||
const hospitalInfo = ref({});
|
||||
const getHospitalInfo = () => {
|
||||
$api.post("/api/Broadcast/hospital_overview")
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
hospitalInfo.value = res.data.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/animate/animate.min.css";
|
||||
@import "@/assets/css/list.css";
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.box_6,
|
||||
.box_7 {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.text_14 {
|
||||
font-size: 1.25rem;
|
||||
margin-top: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text_15 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.text_16 {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.group_1 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
img {
|
||||
max-width: none !important;
|
||||
}
|
||||
</style>
|
||||
@ -3,24 +3,13 @@
|
||||
<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 v-for="item in swiperList">
|
||||
<img :src="item.rotation_image" 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 v-for="(item, index) in swiperList" class="w-[20px] bg-white h-[3px] rounded-full"
|
||||
:class="activeIndex == index ? '' : 'opacity-50'"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--第二块-->
|
||||
@ -31,7 +20,7 @@
|
||||
<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>
|
||||
<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" />
|
||||
@ -43,7 +32,7 @@
|
||||
</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="box_23 flex-col w-[48%] mb-4" @click="openUrl(0)">
|
||||
<div class="image-wrapper_7 flex-col i2">
|
||||
<img class="image_16 w-12 h-12" referrerpolicy="no-referrer"
|
||||
src="public/images/k5.png" />
|
||||
@ -51,7 +40,8 @@
|
||||
<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="box_24 flex-col w-[48%] mb-4" @click="openUrl(1)"
|
||||
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" />
|
||||
@ -59,7 +49,8 @@
|
||||
<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="box_24 flex-col w-[48%] mb-4" @click="openUrl(0)"
|
||||
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" />
|
||||
@ -67,7 +58,8 @@
|
||||
<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="box_24 flex-col w-[48%] mb-4" @click="openUrl(2)"
|
||||
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" />
|
||||
@ -75,7 +67,8 @@
|
||||
<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="box_24 flex-col w-[48%] mb-4" @click="openUrl(3)"
|
||||
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" />
|
||||
@ -83,7 +76,8 @@
|
||||
<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="box_24 flex-col w-[48%] mb-4" @click="openUrl(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" />
|
||||
@ -95,7 +89,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-col z-10 px-4">
|
||||
<img class="w-full mb-4" referrerpolicy="no-referrer" src="public/images/ks4.png" />
|
||||
<img class="w-full mb-4" referrerpolicy="no-referrer" :src="hospitalInfo.image" />
|
||||
<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">
|
||||
@ -104,7 +98,7 @@
|
||||
<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超等先进医疗设备。信阳市第五人民医院奉行救死扶伤，全心全意为人民服务的宗旨，全体医务人员将以优质的服务质量、精湛的医疗技术，为广大患者提供满意周到的服务。
|
||||
{{ hospitalInfo.description }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -117,7 +111,7 @@
|
||||
<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">
|
||||
<div class="flex items-center border border-black px-3 py-1 rounded-full" @click="openUrl(5)">
|
||||
<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" />
|
||||
@ -125,20 +119,20 @@
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div v-for="(item, index) in 3" class="mb-4">
|
||||
<div v-for="(item, index) in msgList" class="mb-4" @click="goDetail(item)">
|
||||
<div v-if="index == 0" class="mb-2">
|
||||
<img class="image_13 w-full" referrerpolicy="no-referrer" src="public/images/new.png" />
|
||||
<img class="image_13 w-full" referrerpolicy="no-referrer" :src="item.news_image[0]" />
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="text_41 text-base font-medium">国际交流添新篇发，合作共筑医疗梦 意大利锡耶纳大学教</span>
|
||||
<span class="text_41 text-base font-medium">{{ item.news_title }}</span>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="text_43 text-sm text-gray-600">
|
||||
与北京华通国康公益基金会理事长陈冉率11人专家代表团，到我院进行深度参观交流。我院院长高社干、党委副书记牛牧青、副院长富奇志及相关职能科室负责人参加了会议。
|
||||
{{ item.news_titleshort }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="text_45 text-xs text-gray-400">2025-04-15</span>
|
||||
<span class="text_45 text-xs text-gray-400">{{ formattedYearMonthDay(item.showtime) }}</span>
|
||||
</div>
|
||||
<div v-if="index < 2" class="mb-2">
|
||||
<div class="box_19 w-full h-px bg-gray-200"></div>
|
||||
@ -154,7 +148,7 @@
|
||||
<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">
|
||||
<div class="flex items-center border border-black px-3 py-1 rounded-full" @click="openUrl(6)">
|
||||
<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" />
|
||||
@ -162,17 +156,17 @@
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div v-for="(item, index) in 3" class="mb-4">
|
||||
<div v-for="(item, index) in dtList" class="mb-4" @click="goDetail(item)">
|
||||
<div v-if="index == 0" class="mb-2">
|
||||
<img class="image_13 w-full" referrerpolicy="no-referrer"
|
||||
src="public/images/new1.png" />
|
||||
:src="item.news_image[0]" />
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="text_41 text-base font-medium">国际交流添新篇发，合作共筑医疗梦 意大利锡耶纳大学教</span>
|
||||
<span class="text_41 text-base font-medium">{{ item.news_title }}</span>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="text_43 text-sm text-gray-600">
|
||||
与北京华通国康公益基金会理事长陈冉率11人专家代表团，到我院进行深度参观交流。我院院长高社干、党委副书记牛牧青、副院长富奇志及相关职能科室负责人参加了会议。
|
||||
{{ item.news_titleshort }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
@ -192,63 +186,45 @@
|
||||
<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">
|
||||
<swiper-slide v-for="item in ysList" @click="goYsDetail(item)">
|
||||
<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>
|
||||
<span class="text_14 text-base font-medium">{{ item.news_title }}</span>
|
||||
<span class="text_15 text-xs text-gray-600">{{ item.news_key }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text_16 text-sm mt-2">擅长:从事眼科临床工作20年，对眼科临床疾病的诊断和治疗累积了丰富的经验</span>
|
||||
<span class="text_16 text-sm mt-2">{{ item.news_auto }}</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 v-for="(item, index) in ysTotal" class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
|
||||
:class="activedIndex == index ? '' : '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 v-for="item in bottomList" @click="cardOpen(item)" :class="['text-wrapper_12', card == item.id ? 'text-wrapper_12-is' : '', 'flex-col']">
|
||||
<span class="text_29 text-sm">{{ item.name }}</span>
|
||||
<div v-if="card == item.id" 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">
|
||||
<swiper-slide v-for="(item, index) in bottomInfoList" @click="goDetail(item)">
|
||||
<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>
|
||||
<span class="text_33 text-xs text-center">{{ item.news_title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
@ -256,14 +232,8 @@
|
||||
</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 v-for="(item, index) in bottomInfoTotal" class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
|
||||
:class="activedKKIndex == index ? '' : 'opacity-50'"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -287,7 +257,6 @@ import { useStore } from '~/store'
|
||||
import type { Swiper as SwiperType } from 'swiper'
|
||||
const { locale } = useI18n()
|
||||
|
||||
const card = ref(1);
|
||||
|
||||
const activeIndex = ref(0);
|
||||
|
||||
@ -367,11 +336,161 @@ const onSwiperKK = (swiper: SwiperType) => {
|
||||
const onSlideChangeKK = (s: any) => {
|
||||
activedKKIndex.value = s.snapIndex;
|
||||
}
|
||||
const router = useRouter()
|
||||
onMounted(() => {
|
||||
// 在移动端视图下初始化
|
||||
document.documentElement.style.fontSize = '16px';
|
||||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
if (coMobile) {
|
||||
router.push('/phone_index')
|
||||
} else {
|
||||
router.push('/')
|
||||
}
|
||||
getSwiperList();
|
||||
getHospitalInfo();
|
||||
getMsgList();
|
||||
getDtList();
|
||||
getYsList();
|
||||
getBottomList();
|
||||
})
|
||||
|
||||
//轮播图
|
||||
const swiperList = ref([]);
|
||||
const getSwiperList = () => {
|
||||
$api.post("/api/index/rotation")
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
swiperList.value = res.data.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
// 通知公告
|
||||
const msgList = ref([]);
|
||||
const getMsgList = () => {
|
||||
$api.post("/api/news/index", { gory_id: 90, page: 1, pageSize: 3 })
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
msgList.value = res.data.data.list;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
// 医院动态
|
||||
const dtList = ref([]);
|
||||
const getDtList = () => {
|
||||
$api.post("/api/news/index", { gory_id: 91, page: 1, pageSize: 3 })
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
dtList.value = res.data.data.list;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
// 医生团队
|
||||
const ysList = ref([]);
|
||||
const ysTotal = ref(0);
|
||||
const getYsList = () => {
|
||||
$api.post("/api/Newsbx/index", { page: 1, pageSize: 9999 })
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
ysList.value = res.data.data.list;
|
||||
//计算页数
|
||||
ysTotal.value = Math.ceil(res.data.data.total_count / 2);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
//医院简介
|
||||
const hospitalInfo = ref({});
|
||||
const getHospitalInfo = () => {
|
||||
$api.post("/api/Broadcast/hospital_overview")
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
hospitalInfo.value = res.data.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
//先进设备等
|
||||
const card = ref(1);
|
||||
const bottomList = ref({});
|
||||
const getBottomList = () => {
|
||||
$api.post("/api/news/group", { flag: 'index' })
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
bottomList.value = res.data.data;
|
||||
card.value = res.data.data[0].id;
|
||||
getBottomInfoList();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
//先进设备list
|
||||
const bottomInfoList = ref({});
|
||||
const bottomInfoTotal = ref(0);
|
||||
const getBottomInfoList = () => {
|
||||
$api.post("/api/news/index", { gory_id: card.value, page: 1, pageSize: 999 })
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
bottomInfoList.value = res.data.data.list;
|
||||
bottomInfoTotal.value = Math.ceil(res.data.data.total_count / 4);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
const cardOpen = (item) => {
|
||||
card.value = item.id;
|
||||
getBottomInfoList();
|
||||
}
|
||||
const openUrl = (index: number) => {
|
||||
if (index == 0) {
|
||||
window.location.href = `/phone_about`
|
||||
} else if (index == 1) {
|
||||
sessionStorage.setItem('group_id', '23')
|
||||
window.location.href = `/phone_list/23`
|
||||
} else if (index == 2) {
|
||||
sessionStorage.setItem('group_id', '87')
|
||||
window.location.href = `/phone_list/87`
|
||||
} else if (index == 3) {
|
||||
sessionStorage.setItem('group_id', '-3')
|
||||
window.location.href = `/phone_list/-3`
|
||||
} else if (index == 4) {
|
||||
sessionStorage.setItem('group_id', '34')
|
||||
window.location.href = `/phone_list/34`
|
||||
} else if (index == 5) {
|
||||
sessionStorage.setItem('group_id', '90')
|
||||
window.location.href = `/phone_list/90`
|
||||
} else if (index == 6) {
|
||||
sessionStorage.setItem('group_id', '91')
|
||||
window.location.href = `/phone_list/91`
|
||||
}
|
||||
else {
|
||||
sessionStorage.setItem('group_id', '0')
|
||||
window.location.href = `/`
|
||||
}
|
||||
}
|
||||
// 计算 "YYYY.MM.DD" 格式
|
||||
const formattedYearMonthDay = (showtime) => {
|
||||
const date = new Date(showtime);
|
||||
const year = date.getFullYear();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||||
const day = date.getDate().toString().padStart(2, "0");
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
const goDetail = (item) => {
|
||||
sessionStorage.setItem('group_id', '-2')
|
||||
window.open(`/phone_info/${item.id}`)
|
||||
}
|
||||
const goYsDetail = (item) => {
|
||||
sessionStorage.setItem('group_id', '-3')
|
||||
window.open(`/phone_ys_info/${item.id}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -449,22 +568,26 @@ onMounted(() => {
|
||||
.group_28 {
|
||||
margin: 8px 0 0 22px;
|
||||
}
|
||||
.group_36{
|
||||
height: auto!important;
|
||||
margin-top: 0px!important;
|
||||
|
||||
.group_36 {
|
||||
height: auto !important;
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
|
||||
.text_68 {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.box_23{
|
||||
|
||||
.box_23 {
|
||||
width: 48%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
height: 145px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.box_24{
|
||||
|
||||
.box_24 {
|
||||
width: 48%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
@ -472,6 +595,7 @@ onMounted(() => {
|
||||
padding-top: 20px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.image_16,
|
||||
.label_5,
|
||||
.label_1,
|
||||
@ -502,68 +626,85 @@ onMounted(() => {
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.image-wrapper_7{
|
||||
|
||||
.image-wrapper_7 {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.box_26{
|
||||
margin-left: 0px;;
|
||||
|
||||
.box_26 {
|
||||
margin-left: 0px;
|
||||
;
|
||||
height: auto;
|
||||
padding:20px 10px;
|
||||
padding: 20px 10px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.text_68{
|
||||
|
||||
.text_68 {
|
||||
margin: 0px;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
.group_38{
|
||||
|
||||
.group_38 {
|
||||
margin: 0 auto;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.image_13{
|
||||
|
||||
.image_13 {
|
||||
height: 100%;
|
||||
}
|
||||
.group_10{
|
||||
|
||||
.group_10 {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image_3 {
|
||||
width:100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.image-text_15{
|
||||
|
||||
.image-text_15 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.box_33 {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.box_34 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.box_2{
|
||||
|
||||
.box_2 {
|
||||
height: 100%;
|
||||
}
|
||||
.text-wrapper_12{
|
||||
height:38px
|
||||
|
||||
.text-wrapper_12 {
|
||||
height: 38px
|
||||
}
|
||||
.block_6{
|
||||
|
||||
.block_6 {
|
||||
height: 100%;
|
||||
}
|
||||
.block_8{
|
||||
|
||||
.block_8 {
|
||||
height: 100%;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.list-items_1{
|
||||
|
||||
.list-items_1 {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.text-wrapper_13{
|
||||
|
||||
.text-wrapper_13 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
107
pages/phone_info/[id].vue
Normal file
107
pages/phone_info/[id].vue
Normal file
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="bg-[#ffffff]">
|
||||
<div class="box_6 flex-col">
|
||||
<div class="group_1">
|
||||
<div class="flex section_4 flex-row justify-between" style="padding-top: 67px;">
|
||||
<img class="thumbnail_1" referrerpolicy="no-referrer" src="public/images/home.png" />
|
||||
<span class="text_13">您的位置：首页>系统公告</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-container mt-[30px]">
|
||||
<div>
|
||||
<div class="title">{{ info.news_title }}</div>
|
||||
<div class="flex flex-row justify-start author">
|
||||
<div>发布人：{{ info.news_auto }}</div>
|
||||
<div class="time">发布时间：{{ info.showtime }}</div>
|
||||
</div>
|
||||
<div style="border-top: 1px solid rgba(238, 238, 238, 1);"></div>
|
||||
<div class="my-[30px]">
|
||||
<div v-html="info.news_content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-top: 1px solid rgba(238, 238, 238, 1);"></div>
|
||||
<div class="py-[30px]">
|
||||
<div class="">
|
||||
<div class="">
|
||||
<div>上一篇：XXXXXXXXXXXXXXXXXXXXX</div>
|
||||
<div class="mt-[10px]">下一篇：暂无</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useStore } from '~/store'
|
||||
import $api from '@/service/webRequest'
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const id = ref(route.params.id)
|
||||
onMounted(() => {
|
||||
// 在移动端视图下初始化
|
||||
document.documentElement.style.fontSize = '16px';
|
||||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
if (coMobile) {
|
||||
router.push('/phone_info/' + id.value)
|
||||
} else {
|
||||
router.push('/info/' + id.value)
|
||||
}
|
||||
getInfo();
|
||||
})
|
||||
const info = ref({})
|
||||
const getInfo = () => {
|
||||
$api.post("/api/news/info", { id: id.value })
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
info.value = res.data.data
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import "@/assets/css/common.scss";
|
||||
@import "@/assets/css/list.css";
|
||||
|
||||
.title {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.author {
|
||||
font-size: 14px;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.page-container{
|
||||
padding: 0 360px;
|
||||
}
|
||||
.time{
|
||||
margin-left: 70px;
|
||||
}
|
||||
@media (max-width: 1440px) {
|
||||
.page-container{
|
||||
padding: 0 100px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.page-container{
|
||||
padding: 0 20px;
|
||||
}
|
||||
.author{
|
||||
flex-direction: column;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.time{
|
||||
margin-left: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -3,50 +3,117 @@
|
||||
<!-- 头部导航和标题区域 -->
|
||||
<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 class="flex section_4 justify-start items-center mb-2">
|
||||
<div>
|
||||
<img class="thumbnail_1 w-6 h-6" referrerpolicy="no-referrer" src="public/images/home.png" />
|
||||
</div>
|
||||
<div class="text_13 text-sm mt-1 sm:mt-0">您的位置：首页>{{ id == '-3' ? '医生团队' : gory_name }}</div>
|
||||
</div>
|
||||
<div class="text_14 text-center text-xl font-bold my-3">系统公告</div>
|
||||
<div class="text_14 text-center text-xl font-bold my-3">{{ id == '-3' ? '医生团队' : gory_name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 公告列表 -->
|
||||
<div class="flex box_7 flex-col px-4 py-2" v-for="item in 5">
|
||||
<div class="flex box_7 flex-col px-4 py-2" v-for="(item, index) in newsList" :key="index"
|
||||
@click="goDetail(item)">
|
||||
<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" />
|
||||
|
||||
<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="item.news_image[0]" />
|
||||
|
||||
<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 class="text_15 text-base font-medium mb-2">
|
||||
<span>{{ item.news_title }} </span>
|
||||
<span style="font-size: 12px;color: #999;margin-left: 10px;">{{ item.news_key }}</span>
|
||||
</div>
|
||||
<div class="text_16 text-sm text-gray-600 line-clamp-3">
|
||||
{{ item.news_auto }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 分页或底部区域 -->
|
||||
<div class="group_18 flex-row justify-center my-4 px-4">
|
||||
<!-- 分页控件可以在这里添加 -->
|
||||
<div class="flex flex-row justify-center my-4 py-4">
|
||||
<n-pagination v-model:page="page" :item-count="total" :page-slot="7"
|
||||
@update:page="getPageList"></n-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PhoneListDetail'
|
||||
<script setup lang="ts">
|
||||
import { NPagination } from 'naive-ui'
|
||||
import { nextTick, ref } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import $api from '@/service/webRequest'
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const id = ref(route.params.id)
|
||||
onMounted(() => {
|
||||
// 在移动端视图下初始化
|
||||
document.documentElement.style.fontSize = '16px';
|
||||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
if (coMobile) {
|
||||
router.push('/phone_list/' + route.params.id)
|
||||
} else {
|
||||
router.push('/list/' + route.params.id)
|
||||
}
|
||||
if (id.value == '-3') {
|
||||
getYsGroupList()
|
||||
} else {
|
||||
getGroupList()
|
||||
}
|
||||
})
|
||||
|
||||
const newsList = ref([])
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const total = ref(0)
|
||||
const gory_name = ref('');
|
||||
const getGroupList = () => {
|
||||
$api.post("/api/news/index", { gory_id: id.value, page: page.value, pageSize: pageSize.value })
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
newsList.value = res.data.data.list;
|
||||
total.value = res.data.data.total_count;
|
||||
gory_name.value = res.data.data.gory_name;
|
||||
//滚到页面最上面
|
||||
window.scrollTo(0, 0)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
const getYsGroupList = () => {
|
||||
$api.post("/api/Newsbx/index", { gory_id: id.value, page: page.value, pageSize: pageSize.value })
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
newsList.value = res.data.data.list;
|
||||
total.value = res.data.data.total_count;
|
||||
gory_name.value = res.data.data.gory_name;
|
||||
//滚到页面最上面
|
||||
window.scrollTo(0, 0)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
const getPageList = (p) => {
|
||||
page.value = p;
|
||||
if (id.value == '-3') {
|
||||
getYsGroupList()
|
||||
} else {
|
||||
getGroupList()
|
||||
}
|
||||
}
|
||||
const goDetail = (item: any) => {
|
||||
//router.push(`/info/${item.id}`)
|
||||
if (id.value == '-3') {
|
||||
window.open(`/ys_info/${item.id}`)
|
||||
} else {
|
||||
window.open(`/info/${item.id}`)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -55,22 +122,76 @@ export default {
|
||||
@import "@/assets/css/list.css";
|
||||
|
||||
/* 手机端适配样式 */
|
||||
@media (max-width: 640px) {
|
||||
.box_6, .box_7 {
|
||||
padding: 0.75rem;
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.box_6,
|
||||
.box_7 {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
|
||||
.text_14 {
|
||||
font-size: 1.25rem;
|
||||
margin: 0.75rem 0;
|
||||
margin-top: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
.text_15 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.text_16 {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.group_1 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.section_4 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.image-text_7 {
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.image_1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.box_7 {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.text-group_7 {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.text_15 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.text_16 {
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.group_13 {
|
||||
margin: 0px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active {
|
||||
color: #1FC4C2;
|
||||
border: 1px solid #1FC4C2;
|
||||
}
|
||||
</style>
|
||||
|
||||
90
pages/phone_ys_info/[id].vue
Normal file
90
pages/phone_ys_info/[id].vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="bg-[#ffffff]">
|
||||
<div class="box_6 flex-col">
|
||||
<div class="group_1">
|
||||
<div class="flex section_4 flex-row justify-between" style="padding-top: 67px;">
|
||||
<img class="thumbnail_1" referrerpolicy="no-referrer" src="public/images/home.png" />
|
||||
<span class="text_13">您的位置：首页>医生团队</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-container mt-[30px]">
|
||||
<div>
|
||||
<div class="title">{{ info.news_title }}</div>
|
||||
<div class="flex flex-row justify-center author">
|
||||
<div>科室：{{ info.news_titleshort }}</div>
|
||||
<div class="ml-[70px]">{{ info.news_key }}</div>
|
||||
</div>
|
||||
<div style="border-top: 1px solid rgba(238, 238, 238, 1);"></div>
|
||||
<div class="my-[30px]">
|
||||
<div v-html="info.news_content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-top: 1px solid rgba(238, 238, 238, 1);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useStore } from '~/store'
|
||||
import $api from '@/service/webRequest'
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const id = ref(route.params.id)
|
||||
onMounted(() => {
|
||||
// 在移动端视图下初始化
|
||||
document.documentElement.style.fontSize = '16px';
|
||||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
if (coMobile) {
|
||||
router.push('/phone_ys_info/' + id.value)
|
||||
} else {
|
||||
router.push('/ys_info/' + id.value)
|
||||
}
|
||||
getInfo();
|
||||
})
|
||||
const info = ref({})
|
||||
const getInfo = () => {
|
||||
$api.post("/api/Newsbx/info", { id: id.value })
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
info.value = res.data.data
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import "@/assets/css/common.scss";
|
||||
@import "@/assets/css/list.css";
|
||||
</style>
|
||||
<style>
|
||||
.title {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.author {
|
||||
font-size: 14px;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.page-container{
|
||||
padding: 0 360px;
|
||||
}
|
||||
@media (max-width: 1440px) {
|
||||
.page-container{
|
||||
padding: 0 100px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.page-container{
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
/* video{
|
||||
margin: 20px auto;
|
||||
} */
|
||||
</style>
|
||||
85
pages/ys_info/[id].vue
Normal file
85
pages/ys_info/[id].vue
Normal file
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="bg-[#ffffff]">
|
||||
<div class="box_6 flex-col">
|
||||
<div class="group_1">
|
||||
<div class="flex section_4 flex-row justify-between" style="padding-top: 67px;">
|
||||
<img class="thumbnail_1" referrerpolicy="no-referrer" src="public/images/home.png" />
|
||||
<span class="text_13">您的位置：首页>医生团队</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-container mt-[30px]">
|
||||
<div>
|
||||
<div class="title">{{ info.news_title }}</div>
|
||||
<div class="flex flex-row justify-center author">
|
||||
<div>科室：{{ info.news_titleshort }}</div>
|
||||
<div class="ml-[70px]">{{ info.news_key }}</div>
|
||||
</div>
|
||||
<div style="border-top: 1px solid rgba(238, 238, 238, 1);"></div>
|
||||
<div class="my-[30px]">
|
||||
<div v-html="info.news_content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-top: 1px solid rgba(238, 238, 238, 1);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useStore } from '~/store'
|
||||
import $api from '@/service/webRequest'
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const id = ref(route.params.id)
|
||||
onMounted(() => {
|
||||
// 在移动端视图下初始化
|
||||
document.documentElement.style.fontSize = '16px';
|
||||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
if (coMobile) {
|
||||
router.push('/phone_ys_info/' + id.value)
|
||||
} else {
|
||||
router.push('/ys_info/' + id.value)
|
||||
}
|
||||
getInfo();
|
||||
})
|
||||
const info = ref({})
|
||||
const getInfo = () => {
|
||||
$api.post("/api/Newsbx/info", { id: id.value })
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
info.value = res.data.data
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import "@/assets/css/common.scss";
|
||||
@import "@/assets/css/list.css";
|
||||
</style>
|
||||
<style>
|
||||
.title {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.author {
|
||||
font-size: 14px;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.page-container{
|
||||
padding: 0 360px;
|
||||
}
|
||||
@media (max-width: 1440px) {
|
||||
.page-container{
|
||||
padding: 0 100px;
|
||||
}
|
||||
}
|
||||
/* video{
|
||||
margin: 20px auto;
|
||||
} */
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 950 KiB |
@ -3,7 +3,7 @@ import { handleError } from './handleError'
|
||||
|
||||
function createRequestInstance(getServerUrl: () => string): AxiosInstance {
|
||||
//获取域名
|
||||
const serverUrl = window.location.origin;
|
||||
const serverUrl = 'http://admin.xysdwrmyy.cn';
|
||||
//console.log(serverUrl);
|
||||
const instance = axios.create({
|
||||
timeout: 1000 * 60 * 5, // 超时时间
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user