1423 lines
30 KiB
Vue
1423 lines
30 KiB
Vue
<template>
|
||
<full-page v-if="businessCard">
|
||
<view class="card-page">
|
||
<view class="card-service-container">
|
||
<BusinessCard :card="businessCard" />
|
||
|
||
<view class="service-section">
|
||
<view class="service-grid">
|
||
<view class="service-item service-item-1" @click="showTeams()">
|
||
<image class="service-item-bg" src="/static/card/jzfwBack.png" mode="scaleToFill"></image>
|
||
<image class="service-icon" src="/static/card/jzfwIcon.png" mode="aspectFit"></image>
|
||
<text class="service-text">全周期管理</text>
|
||
</view>
|
||
<view class="service-item service-item-2" @click="openAddressModal">
|
||
<image class="service-item-bg" src="/static/card/gwBack.png" mode="scaleToFill"></image>
|
||
<image class="service-icon" src="/static/card/gwIcon.png" mode="aspectFit"></image>
|
||
<text class="service-text">门诊预约</text>
|
||
</view>
|
||
<view class="service-item service-item-3" @click="displayPhone()">
|
||
<image class="service-item-bg" src="/static/card/gzhBack.png" mode="scaleToFill"></image>
|
||
<image class="service-icon" src="/static/card/telephone.svg" mode="aspectFit"></image>
|
||
<text class="service-text">联系电话</text>
|
||
</view>
|
||
<view class="service-item service-item-4" @click="openEmailModal">
|
||
<image class="service-item-bg" src="/static/card/sphBack.png" mode="scaleToFill"></image>
|
||
<image class="service-icon" src="/static/card/email.svg" mode="aspectFit"></image>
|
||
<text class="service-text">邮箱</text>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="info-container">
|
||
<!-- Tab 切换栏 -->
|
||
<view class="tab-header">
|
||
<view v-if="hospitalInfo" class="tab-item" :class="{ active: activeTab === 'hospital' }"
|
||
@click="switchTab('hospital')">
|
||
<text class="tab-text">医院信息</text>
|
||
</view>
|
||
<view class="tab-item" :class="{ active: activeTab === 'intro' }" @click="switchTab('intro')">
|
||
<text class="tab-text">个人简介</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 医院信息内容 -->
|
||
<view v-if="hospitalInfo && activeTab === 'hospital'" class="tab-content"
|
||
:class="{ 'tab-content-left': activeTab === 'hospital' }">
|
||
<view class="hospital-info">
|
||
<view class="hospital-header">
|
||
<view class="hospital-logo">
|
||
<image :src="hospitalInfo.logo || '/static/card/hospital-icon.png'" mode="aspectFit">
|
||
</image>
|
||
</view>
|
||
<view class="hospital-details">
|
||
<text class="hospital-name">
|
||
{{ hospitalInfo.name || '未获取到医院名称' }}
|
||
</text>
|
||
<view class="hospital-tags">
|
||
<text class="hospital-tag" :class="getTagClass(index)"
|
||
v-for="(tag, index) in (hospitalInfo.tags || [])" :key="tag">{{ tag }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="hospital-intro">
|
||
<view class="hospital-text-wrapper">
|
||
<view v-if="hospitalInfo.introduction" class="hospital-text">
|
||
<div v-html="hospitalInfo.introduction"></div>
|
||
</view>
|
||
<text class="hospital-text" v-else>暂无医院介绍信息</text>
|
||
<!-- <view class="more-link" @click="openMoreInfoModal">更多>></view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 个人简介内容 -->
|
||
<view v-if="activeTab === 'intro'" class="tab-content" :class="{ 'tab-content-right': activeTab === 'intro' }">
|
||
<view class="intro-content">
|
||
<view class="intro-header">
|
||
<view class="intro-title-bar"></view>
|
||
<text class="intro-title">个人简介</text>
|
||
</view>
|
||
<text class="intro-text" v-if="businessCard && businessCard.memberTroduce">
|
||
{{ businessCard.memberTroduce }}
|
||
</text>
|
||
<text class="intro-text no-data" v-else>暂无个人简介</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template #footer>
|
||
<view class="bottom-actions">
|
||
<button class="edit-btn" @click="addFriend()">
|
||
<image class="edit-icon" src="/static/card/edit-card.png" mode="aspectFit"></image>
|
||
<text class="edit-text">加好友</text>
|
||
</button>
|
||
<button class="share-btn" open-type="share">
|
||
<text class="share-text">转发名片</text>
|
||
</button>
|
||
</view>
|
||
</template>
|
||
</full-page>
|
||
|
||
<!-- 电话弹窗 -->
|
||
<view v-if="showPhoneModal" class="modal-mask" @click="closePhoneModal">
|
||
<view class="service-modal-content" @click.stop>
|
||
<view class="service-modal-header">
|
||
<text class="service-modal-close" @click="closePhoneModal">×</text>
|
||
<text class="service-modal-title">电话</text>
|
||
</view>
|
||
<view class="service-modal-body">
|
||
<view class="service-list">
|
||
<view class="service-list-item" v-if="businessCard && businessCard.externalContact">
|
||
<view class="service-list-text">{{ businessCard.externalContact }}</view>
|
||
<view class="flex">
|
||
<view class="text-base text-primary mr-10" @click="setClipboardData(businessCard.externalContact)">
|
||
复制
|
||
</view>
|
||
<view class="text-base text-primary" @click="makePhoneCall(businessCard.externalContact)">拨打</view>
|
||
</view>
|
||
</view>
|
||
<view class="service-list-item" v-else>
|
||
<text class="service-list-text no-data">暂无电话信息</text>
|
||
<view class="service-list-icon">📞</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 邮箱弹窗 -->
|
||
<view v-if="showEmailModal" class="modal-mask" @click="closeEmailModal">
|
||
<view class="service-modal-content" @click.stop>
|
||
<view class="service-modal-header">
|
||
<text class="service-modal-close" @click="closeEmailModal">×</text>
|
||
<text class="service-modal-title">邮箱</text>
|
||
</view>
|
||
<view class="service-modal-body">
|
||
<view class="service-list">
|
||
<view class="service-list-item" v-if="businessCard.externalEmail"
|
||
@click="copyEmail(businessCard.externalEmail)">
|
||
<text class="service-list-text">{{ businessCard.externalEmail }}</text>
|
||
<view class="text-base text-primary mr-10" @click="setClipboardData(businessCard.externalEmail)">
|
||
复制
|
||
</view>
|
||
</view>
|
||
<view class="service-list-item" v-else>
|
||
<text class="service-list-text no-data">暂无邮箱信息</text>
|
||
<view class="service-list-icon">✉️</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 地址弹窗 -->
|
||
<view v-if="showAddressModal" class="modal-mask" @click="closeAddressModal">
|
||
<view class="service-modal-content" @click.stop>
|
||
<view class="service-modal-header">
|
||
<text class="service-modal-close" @click="closeAddressModal">×</text>
|
||
<text class="service-modal-title">地址</text>
|
||
</view>
|
||
<view class="service-modal-body">
|
||
<view class="service-list">
|
||
<view class="service-list-item" v-if="businessCard.externalAddress"
|
||
@click="setClipboardData(businessCard.externalAddress)">
|
||
<text class="service-list-text">{{ businessCard.externalAddress }}</text>
|
||
<view class="text-base text-primary" @click="setClipboardData(businessCard.externalAddress)">
|
||
复制
|
||
</view>
|
||
</view>
|
||
<view class="service-list-item" v-else>
|
||
<text class="service-list-text no-data">暂无地址信息</text>
|
||
<view class="service-list-icon">📍</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<teams-popup :visible="showTeamPopup" :teams="teams" @close="showTeamPopup = false" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue';
|
||
import { storeToRefs } from "pinia";
|
||
import { onShareAppMessage } from "@dcloudio/uni-app";
|
||
import api from '@/utils/api';
|
||
import useGuard from '@/hooks/useGuard';
|
||
import { toast } from '@/utils/widget.js';
|
||
import useAccount from '@/store/account';
|
||
|
||
import BusinessCard from './components/BusinessCard.vue'
|
||
import fullPage from '@/components/full-page.vue'
|
||
import TeamsPopup from './components/teams-popup.vue'
|
||
|
||
const { useShow, useLoad } = useGuard();
|
||
const wxAccountStore = useAccount();
|
||
const { account } = storeToRefs(useAccount());
|
||
const env = __VITE_ENV__;
|
||
const shareAppVersion = env.MP_SHARE_WX_APP_VERSION;
|
||
|
||
const activeTab = ref('hospital') // 'hospital' 或 'intro'
|
||
const corpId = ref('');
|
||
const userid = ref('')
|
||
const businessCard = ref(null);
|
||
const teams = ref([])
|
||
const hospitalInfo = computed(() => businessCard.value?.hospitalInfo || null);
|
||
const showPhoneModal = ref(false)
|
||
const showEmailModal = ref(false)
|
||
const showTeamPopup = ref(false)
|
||
|
||
|
||
function addFriend() {
|
||
uni.navigateTo({
|
||
url: `/pages/team/friend?corpId=${corpId.value}&userid=${userid.value}`
|
||
})
|
||
}
|
||
|
||
function displayPhone() {
|
||
if (businessCard.value.externalContact) {
|
||
showPhoneModal.value = true
|
||
}
|
||
}
|
||
|
||
function makePhoneCall(phone) {
|
||
closePhoneModal()
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone,
|
||
success: () => {
|
||
toast('拨打电话成功')
|
||
}
|
||
})
|
||
}
|
||
|
||
function setClipboardData(data) {
|
||
uni.setClipboardData({
|
||
data: data,
|
||
success: () => {
|
||
toast('复制成功')
|
||
}
|
||
})
|
||
}
|
||
|
||
function switchTab(tab) {
|
||
activeTab.value = tab
|
||
}
|
||
|
||
async function getCard() {
|
||
const res = await api('getBusinessCard', { userid: userid.value, corpId: corpId.value })
|
||
businessCard.value = res && res.data ? res.data : null;
|
||
if (!hospitalInfo.value && activeTab.value === 'hospital') {
|
||
activeTab.value = 'intro'
|
||
}
|
||
if (businessCard.value) {
|
||
recordBusinessCardVisit()
|
||
}
|
||
}
|
||
|
||
async function showTeams() {
|
||
const res = await api('getJoinedTeams', { mateId: userid.value, corpId: corpId.value })
|
||
teams.value = res && Array.isArray(res.data) ? res.data : [];
|
||
if (teams.value.length === 0) {
|
||
toast('暂无加入的团队')
|
||
} else {
|
||
showTeamPopup.value = true
|
||
}
|
||
}
|
||
|
||
async function recordBusinessCardVisit() {
|
||
try {
|
||
const account = await getVisitorAccount();
|
||
let visitorExternalUserId = wxAccountStore.externalUserId || "";
|
||
if (!visitorExternalUserId && account && account.unionid && account.openid && corpId.value) {
|
||
visitorExternalUserId = await wxAccountStore.getExternalUserId(corpId.value) || "";
|
||
}
|
||
|
||
const response = await api('recordBusinessCardBehavior', {
|
||
action: "visit",
|
||
corpId: corpId.value,
|
||
cardUserid: userid.value,
|
||
cardDeptName: businessCard.value?.deptName || "",
|
||
source: "team-wxapp",
|
||
visitorOpenid: account?.openid || wxAccountStore.openid || uni.getStorageSync('openid') || "",
|
||
visitorUnionid: account?.unionid || "",
|
||
visitorMobile: account?.mobile || "",
|
||
visitorExternalUserId,
|
||
}, false);
|
||
if (!response?.success) {
|
||
console.warn("record business card visit failed", response?.message || response);
|
||
}
|
||
} catch (error) {
|
||
console.warn("record business card visit failed", error);
|
||
}
|
||
}
|
||
|
||
async function getVisitorAccount() {
|
||
let account = wxAccountStore.account || uni.getStorageSync('account') || null;
|
||
if (!account) {
|
||
account = await wxAccountStore.login('', { silent: true });
|
||
}
|
||
return account || wxAccountStore.account || uni.getStorageSync('account') || null;
|
||
}
|
||
|
||
useLoad((opt) => {
|
||
console.clear()
|
||
console.log(account.value)
|
||
if (opt.q) {
|
||
const href = typeof opt.q === "string" ? decodeURIComponent(opt.q.trim()) : "";
|
||
const [, url = ""] = href.split("?");
|
||
const data = url.split("&").reduce((acc, cur) => {
|
||
if (!cur) return acc;
|
||
const [key, value] = cur.split("=");
|
||
if (!key) return acc;
|
||
acc[key] = value || ''
|
||
return acc;
|
||
}, {});
|
||
console.log(data)
|
||
corpId.value = data.corpId || ''
|
||
userid.value = data.userid || ''
|
||
} else {
|
||
corpId.value = opt.corpId
|
||
userid.value = opt.userid
|
||
}
|
||
})
|
||
|
||
useShow(() => {
|
||
getCard()
|
||
})
|
||
|
||
onShareAppMessage((res) => {
|
||
if (businessCard.value) {
|
||
return {
|
||
title: `【${businessCard.value.externalName || card.anotherName || ''}】电子名片`,
|
||
type: shareAppVersion || 0, // 0 正式版本 | 1 开发版本 | 2 体验版本
|
||
path: `/pages/team/business-card?corpId=${corpId.value}&userid=${userid.value}&shareOpenId=${account.value?.openid || ''}`,
|
||
imageUrl: 'https://ykt.youcan365.com/uploads/1782455619525-business-card.jpg'
|
||
}
|
||
}
|
||
})
|
||
|
||
const cardStore = ref({})
|
||
const accountStore = ref({})
|
||
|
||
|
||
// 弹窗显示状态
|
||
|
||
const showAddressModal = ref(false)
|
||
const showMoreInfoModal = ref(false)
|
||
const showOfficialAccountModal = ref(false)
|
||
const showVideoAccountModal = ref(false)
|
||
const showShareModal = ref(false)
|
||
|
||
// 便民服务列表
|
||
const services = ref([])
|
||
|
||
// 获取标签样式类名
|
||
const getTagClass = (index) => {
|
||
const styles = ['grade', 'center', 'specialty']
|
||
return styles[index % 3]
|
||
}
|
||
|
||
|
||
// 关闭便民服务弹窗
|
||
const closeServiceModal = () => {
|
||
showServiceModal.value = false
|
||
}
|
||
|
||
// 关闭电话弹窗
|
||
const closePhoneModal = () => {
|
||
showPhoneModal.value = false
|
||
}
|
||
|
||
// 打开邮箱弹窗
|
||
const openEmailModal = () => {
|
||
showEmailModal.value = true
|
||
}
|
||
|
||
// 关闭邮箱弹窗
|
||
const closeEmailModal = () => {
|
||
showEmailModal.value = false
|
||
}
|
||
|
||
const openAddressModal = () => {
|
||
toast('门诊预约功能暂未开放')
|
||
// showAddressModal.value = true
|
||
}
|
||
|
||
// 关闭地址弹窗
|
||
const closeAddressModal = () => {
|
||
showAddressModal.value = false
|
||
}
|
||
|
||
|
||
// 复制邮箱地址
|
||
const copyEmail = (email) => {
|
||
closeEmailModal()
|
||
uni.setClipboardData({
|
||
data: email,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '邮箱已复制',
|
||
icon: 'none'
|
||
})
|
||
},
|
||
fail: () => {
|
||
uni.showToast({
|
||
title: '复制失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
/* 模态框遮罩层 */
|
||
.modal-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
touch-action: none;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card-page {
|
||
background-color: #F8EEE3;
|
||
min-height: 100vh;
|
||
padding-bottom: 120rpx;
|
||
/* 为底部固定按钮栏留出空间 */
|
||
}
|
||
|
||
.card-page::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -20rpx;
|
||
left: 0;
|
||
right: 0;
|
||
height: 320rpx;
|
||
background: linear-gradient(180deg, #EB6625 0%, #F8EEE3 100%);
|
||
z-index: 0;
|
||
}
|
||
|
||
/* 名片和服务容器 */
|
||
.card-service-container {
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
|
||
/* 服务图标区域 */
|
||
.service-section {
|
||
margin: -10rpx 20rpx 0rpx;
|
||
}
|
||
|
||
.service-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.service-item {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
padding: 36rpx 40rpx;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
border-radius: 20rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background-size: 114% 150%;
|
||
}
|
||
|
||
.service-item-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: -10px;
|
||
right: -10px;
|
||
width: auto;
|
||
height: auto;
|
||
z-index: 0;
|
||
}
|
||
|
||
// .service-item-1 {
|
||
// background-image: url('/static/card/jzfwBack.png');
|
||
// }
|
||
|
||
// .service-item-2 {
|
||
// background-image: url('/static/card/gwBack.png');
|
||
// }
|
||
|
||
// .service-item-3 {
|
||
// background-image: url('/static/card/gzhBack.png');
|
||
// }
|
||
|
||
// .service-item-4 {
|
||
// background-image: url('/static/card/sphBack.png');
|
||
// }
|
||
|
||
.service-icon {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
margin-right: 48rpx;
|
||
}
|
||
|
||
.service-text {
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
position: relative;
|
||
white-space: nowrap;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 禁用状态的样式 */
|
||
.service-item.disabled {
|
||
opacity: 0.5;
|
||
pointer-events: none;
|
||
filter: grayscale(50%);
|
||
}
|
||
|
||
.service-icon.disabled {
|
||
filter: grayscale(100%);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.service-text.disabled {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
/* 信息容器通用样式 */
|
||
.info-container {
|
||
overflow: hidden;
|
||
margin: 24rpx 20rpx;
|
||
position: relative;
|
||
padding: 0;
|
||
}
|
||
|
||
/* 人才招聘和导航按钮 */
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
margin: 20rpx;
|
||
}
|
||
|
||
.action-btn {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12rpx;
|
||
padding: 24rpx 20rpx;
|
||
border-radius: 10px;
|
||
border: 1px solid #ffbf6533;
|
||
background: linear-gradient(95deg, #FFF5DB 16.63%, #FFECDE 92.44%);
|
||
box-shadow: 0 9px 15.6px 0 #FFF inset;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.action-btn:active {
|
||
transform: scale(0.98);
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.action-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.action-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Tab 切换栏样式 */
|
||
.tab-header {
|
||
display: flex;
|
||
background-color: #F8EEE3;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
padding: 0;
|
||
overflow: visible;
|
||
position: relative;
|
||
}
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
padding: 24rpx 0;
|
||
text-align: center;
|
||
background: linear-gradient(83deg, #eb662566 15.22%, #faae5766 77.02%);
|
||
transition: background 0.3s ease, clip-path 0.3s ease, transform 0.3s ease;
|
||
cursor: pointer;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.tab-item:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
/* 未选中的 tab - 左侧 */
|
||
.tab-item:first-child:not(.active) {
|
||
border-radius: 20rpx 0 0 0;
|
||
/* 左边垂直，右边倾斜（上宽下窄），延伸到右侧区域 */
|
||
clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
|
||
/* 缩小未选中的 tab */
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
/* 未选中的 tab - 右侧 */
|
||
.tab-item:last-child:not(.active) {
|
||
border-radius: 0 20rpx 0 0;
|
||
/* 右边垂直，左边倾斜（上宽下窄），延伸到左侧区域 */
|
||
clip-path: polygon(0% 0, 100% 0, 100% 100%, 4% 100%);
|
||
/* 缩小未选中的 tab */
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
|
||
/* 选中的 tab - 背景变为白色渐变，上窄下宽，占据另一个 tab 的下底 */
|
||
.tab-item.active {
|
||
background: linear-gradient(178deg, #FEF4E8 10.53%, #fff 100%);
|
||
transition: background 0.3s ease, clip-path 0.3s ease, transform 0.3s ease;
|
||
z-index: 2;
|
||
/* 选中状态保持正常大小 */
|
||
transform: scale(1);
|
||
}
|
||
|
||
/* 选中左侧 tab（医院信息）：左边直角边，右边斜边（上窄下宽，下底宽） */
|
||
.tab-item.active:first-child {
|
||
border-radius: 20rpx 0 0 0;
|
||
/* 左边垂直（直角边），右边倾斜（斜边，上窄下宽），延伸到右侧 tab 区域 */
|
||
clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%);
|
||
/* 使用负边距让两个 tab 重叠，消除中间空隙 */
|
||
margin-right: -8%;
|
||
}
|
||
|
||
/* 选中右侧 tab（个人简介）：右边直角边，左边斜边（上窄下宽，下底宽） */
|
||
.tab-item.active:last-child {
|
||
border-radius: 0rpx 20rpx 0 0;
|
||
/* 右边垂直（直角边），左边倾斜（斜边，上窄下宽），延伸到左侧 tab 区域 */
|
||
clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
|
||
/* 使用负边距让两个 tab 重叠，消除中间空隙 */
|
||
margin-left: -8%;
|
||
}
|
||
|
||
.tab-item.active:only-child {
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
/* 只有一个 tab 时，保持矩形，不需要梯形 */
|
||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
||
}
|
||
|
||
.tab-text {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
position: relative;
|
||
display: inline-block;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tab-item.active .tab-text {
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
/* 选中 tab 文字下方的橙红色下划线 */
|
||
.tab-item.active .tab-text::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -4rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 16rpx;
|
||
/* 颜色渐变：从深橙红色到浅色 */
|
||
background: linear-gradient(90deg, #EF8839 0%, rgba(239, 136, 57, 0.4) 70%, rgba(239, 136, 57, 0.1) 100%);
|
||
border-radius: 20rpx;
|
||
/* 使用 transform scaleX 实现从粗到细的效果，从左侧开始 */
|
||
transform: scaleX(1);
|
||
transform-origin: left center;
|
||
/* 添加过渡动画 */
|
||
transition: transform 0.3s ease;
|
||
/* 通过 mask 或 clip-path 实现从粗到细的视觉效果，粗的部分占据更大比例 */
|
||
clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%);
|
||
}
|
||
|
||
/* Tab 内容区域 */
|
||
.tab-content {
|
||
padding: 20rpx 40rpx 30rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
/* 选中左侧 tab（医院信息）时的内容区域 - 左上角有圆角，底部圆角 */
|
||
.tab-content-left {
|
||
border-radius: 0 20rpx 20rpx 20rpx;
|
||
}
|
||
|
||
/* 选中右侧 tab（个人简介）时的内容区域 - 右上角有圆角，底部圆角 */
|
||
.tab-content-right {
|
||
border-radius: 20rpx 0 20rpx 20rpx;
|
||
}
|
||
|
||
.section-header {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.section-title-wrapper {
|
||
position: relative;
|
||
display: inline-block;
|
||
margin-bottom: 20rpx;
|
||
width: fit-content;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.title-decoration {
|
||
position: absolute;
|
||
bottom: -8rpx;
|
||
left: 0;
|
||
width: 144rpx;
|
||
height: 28rpx;
|
||
flex-shrink: 0;
|
||
border-radius: 4rpx;
|
||
background: linear-gradient(90deg, #FAAE57 0%, rgba(255, 255, 255, 0.64) 100%);
|
||
z-index: 1;
|
||
}
|
||
|
||
.hospital-info {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.hospital-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.hospital-logo {
|
||
font-size: 48rpx;
|
||
flex-shrink: 0;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.hospital-logo image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.hospital-details {
|
||
flex: 1;
|
||
}
|
||
|
||
.hospital-name {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 16rpx;
|
||
display: block;
|
||
}
|
||
|
||
.hospital-tags {
|
||
display: flex;
|
||
gap: 12rpx;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.hospital-tag {
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
padding: 0 16rpx;
|
||
line-height: 36rpx;
|
||
flex-shrink: 0;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.hospital-tag.grade {
|
||
border: 1rpx solid #2f8af580;
|
||
background: #2f8af51a;
|
||
color: #037AFF;
|
||
}
|
||
|
||
.hospital-tag.center {
|
||
border: 1rpx solid #fb791e80;
|
||
background: #ef88391a;
|
||
color: #fb791e;
|
||
}
|
||
|
||
.hospital-tag.specialty {
|
||
border: 1rpx solid #12b2b380;
|
||
background: #12b2b31a;
|
||
color: #12b2b3;
|
||
}
|
||
|
||
/* Banner轮播样式 */
|
||
.banner-section {
|
||
margin: 30rpx 0;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.banner-swiper {
|
||
width: 100%;
|
||
aspect-ratio: 3 / 1;
|
||
border-radius: 16rpx;
|
||
/* 兼容不支持 aspect-ratio 的浏览器，使用 calc 计算 3:1 比例 */
|
||
height: calc(100vw / 3);
|
||
}
|
||
|
||
.banner-item {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.banner-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.hospital-intro {
|
||
display: flex;
|
||
/* 解决伪元素height:100%失效的问题 */
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.hospital-text-wrapper {
|
||
overflow: hidden;
|
||
line-height: 1.6;
|
||
position: relative;
|
||
/* 使用webkit-line-clamp实现多行文本省略 */
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
line-clamp: 3;
|
||
/* 标准属性，提升兼容性 */
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.hospital-text {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
display: block;
|
||
letter-spacing: 0.4rpx;
|
||
}
|
||
|
||
.more-link {
|
||
color: #ffb366;
|
||
position: absolute;
|
||
/* 改为绝对定位 */
|
||
right: 0;
|
||
bottom: 0;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
background: #fff;
|
||
padding-left: 8rpx;
|
||
z-index: 1;
|
||
/* 确保按钮在最上层 */
|
||
}
|
||
|
||
.more-link::before {
|
||
content: '...';
|
||
color: #999;
|
||
font-size: 14px;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.hospital-links {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.link-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.link-icon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.link-text {
|
||
font-size: 22rpx;
|
||
color: #666;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 个人擅长内容 */
|
||
.expertise-content {
|
||
margin-top: 20rpx;
|
||
min-height: 120rpx;
|
||
}
|
||
|
||
.expertise-text {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.expertise-text.no-data {
|
||
color: #999;
|
||
}
|
||
|
||
.intro-content {
|
||
margin-top: 0;
|
||
min-height: 120rpx;
|
||
}
|
||
|
||
.intro-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.intro-title-bar {
|
||
width: 6rpx;
|
||
height: 32rpx;
|
||
background: #EF8839;
|
||
border-radius: 3rpx;
|
||
}
|
||
|
||
.intro-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.intro-text {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
display: block;
|
||
letter-spacing: 0.4rpx;
|
||
}
|
||
|
||
.intro-text.no-data {
|
||
color: #999;
|
||
}
|
||
|
||
/* 底部操作按钮 */
|
||
.bottom-actions {
|
||
padding: 20rpx 40rpx;
|
||
display: flex;
|
||
gap: 20rpx;
|
||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.edit-btn {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
background: #f8f9fa;
|
||
border: 2rpx solid #e0e0e0;
|
||
border-radius: 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.edit-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.edit-text {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.share-btn {
|
||
flex: 2;
|
||
height: 80rpx;
|
||
background: #E86B3E;
|
||
border: none;
|
||
border-radius: 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.share-text {
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 便民服务弹窗样式 */
|
||
.service-modal-content {
|
||
background: white;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.service-modal-header {
|
||
position: relative;
|
||
padding: 40rpx 40rpx 20rpx;
|
||
text-align: center;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.service-modal-close {
|
||
position: absolute;
|
||
left: 40rpx;
|
||
top: 40rpx;
|
||
font-size: 40rpx;
|
||
color: #999;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.service-modal-close:active {
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
.service-modal-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.service-modal-body {
|
||
padding: 30rpx 40rpx;
|
||
}
|
||
|
||
.service-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.service-list-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 25rpx;
|
||
}
|
||
|
||
.service-list-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.service-list-text.no-data {
|
||
color: #999;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.service-list-icon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
/* 医院介绍弹窗样式 */
|
||
.more-info-modal-content {
|
||
background: white;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.more-info-modal-header {
|
||
position: relative;
|
||
padding: 40rpx 40rpx 20rpx;
|
||
text-align: center;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.more-info-modal-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.more-info-modal-close {
|
||
position: absolute;
|
||
right: 40rpx;
|
||
top: 40rpx;
|
||
font-size: 40rpx;
|
||
color: #999;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.more-info-modal-close:active {
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
.more-info-modal-body {
|
||
padding: 20rpx 0;
|
||
margin-bottom: 20rpx;
|
||
max-height: 60vh;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
}
|
||
|
||
.more-info-text {
|
||
padding: 0 40rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.more-info-content {
|
||
padding: 0 40rpx;
|
||
margin-bottom: 20rpx;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.more-info-content :deep(p) {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.more-info-content :deep(img) {
|
||
max-width: 100%;
|
||
height: auto;
|
||
margin: 20rpx 0;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.more-info-content :deep(strong) {
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.no-data-text {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
text-align: center;
|
||
padding: 60rpx 0;
|
||
display: block;
|
||
}
|
||
|
||
.more-info-image {
|
||
padding: 0 40rpx;
|
||
margin: 30rpx 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.more-info-text {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.more-info-text:last-child {
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.more-info-image-placeholder {
|
||
width: 100%;
|
||
height: 200rpx;
|
||
border: 2rpx solid #e0e0e0;
|
||
border-radius: 12rpx;
|
||
margin: 30rpx 0;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.placeholder-lines {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.line {
|
||
position: absolute;
|
||
background: #e0e0e0;
|
||
width: 2rpx;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.line-1 {
|
||
transform: translateX(-50%) rotate(45deg);
|
||
}
|
||
|
||
.line-2 {
|
||
transform: translateX(-50%) rotate(-45deg);
|
||
}
|
||
|
||
/* 链接弹窗样式 */
|
||
.link-modal-content {
|
||
background: white;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.link-modal-header {
|
||
position: relative;
|
||
padding: 40rpx 40rpx 20rpx;
|
||
text-align: center;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.link-modal-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.link-modal-close {
|
||
position: absolute;
|
||
right: 40rpx;
|
||
top: 40rpx;
|
||
font-size: 40rpx;
|
||
color: #999;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.link-modal-close:active {
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
.link-modal-body {
|
||
padding: 30rpx 40rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.link-modal-desc {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
margin-bottom: 30rpx;
|
||
display: block;
|
||
}
|
||
|
||
.link-modal-btn {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
background: #ffb366;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 16rpx;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.link-modal-btn:active {
|
||
background: #ffa356;
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.qr-code-placeholder {
|
||
margin-bottom: 20rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.qr-code-image {
|
||
width: 360rpx;
|
||
height: 360rpx;
|
||
border: 2rpx solid #e0e0e0;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.qr-code-image image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* 分享弹窗样式 */
|
||
.share-modal-content {
|
||
background: white;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.share-modal-header {
|
||
position: relative;
|
||
padding: 40rpx 40rpx 20rpx;
|
||
text-align: center;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.share-modal-close {
|
||
position: absolute;
|
||
left: 40rpx;
|
||
top: 40rpx;
|
||
font-size: 40rpx;
|
||
color: #999;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.share-modal-close:active {
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
.share-modal-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.share-modal-body {
|
||
padding: 30rpx 40rpx;
|
||
}
|
||
|
||
.share-options {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
gap: 40rpx;
|
||
}
|
||
|
||
.share-option {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.share-icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.share-option-text {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 无服务时的样式 */
|
||
.no-service {
|
||
text-align: center;
|
||
padding: 40rpx 0;
|
||
}
|
||
|
||
.no-service-text {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
</style>
|