王天骄
747 lines
20 KiB
Vue
747 lines
20 KiB
Vue
<template>
|
||
<view class="profile-page">
|
||
<view class="top-app-bar">
|
||
<view class="nav-left">
|
||
<button class="icon-button" aria-label="设置" @click="emit('open-settings')">
|
||
<view class="settings-icon"></view>
|
||
</button>
|
||
<button class="icon-button home-button" aria-label="首页" @click="emit('go-home')">
|
||
<view class="home-icon"></view>
|
||
</button>
|
||
</view>
|
||
<button class="icon-button" aria-label="个人中心">
|
||
<view class="account-icon active"></view>
|
||
</button>
|
||
</view>
|
||
|
||
<scroll-view class="dashboard" scroll-y>
|
||
<view class="profile-card dashboard-card">
|
||
<view class="avatar-wrap">
|
||
<image
|
||
class="avatar-image"
|
||
mode="aspectFill"
|
||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuDGDLuBqLjh_SubGoCUg45p2XkSKyTmm_AgVZYoBYjI_RtN9MjhdBR27SzIqSpMnDVwnAoVl2coW7vDPVTdIDgkMjN1SIdxITaqQOJti1jUypNt9OUOTj7r8gmkyYSK9eUzIfG8EqY_shc9mqzxJFSJ9QFqa4gQGwV9FoqspXpGM3_aOzqtUtmOAp9owP22ozTNLh87AfqR_DnOpJ1rMd9szFgIQQinFjO-GsL8h-0oRdvamAM_v_OsVHH25Fez2cHQH4cIHOqSMFo"
|
||
></image>
|
||
<text class="level-badge">Lv.3</text>
|
||
</view>
|
||
<view class="profile-copy">
|
||
<view class="name-row">
|
||
<text class="doctor-name">明医生</text>
|
||
<text class="level-chip">临床思维 Lv.3</text>
|
||
</view>
|
||
<view class="honor-row">
|
||
<view class="honor-item">
|
||
<view class="verified-icon"></view>
|
||
<text>诊断大师</text>
|
||
</view>
|
||
<text class="divider">|</text>
|
||
<view class="honor-item">
|
||
<view class="emergency-icon"></view>
|
||
<text>急诊先锋</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="metrics-grid">
|
||
<view class="metric-card dashboard-card">
|
||
<text class="metric-label">临床思维评分</text>
|
||
<view class="metric-inline">
|
||
<text class="metric-value">82</text>
|
||
<text class="metric-top">Top 15%</text>
|
||
</view>
|
||
</view>
|
||
<view class="metric-card dashboard-card">
|
||
<text class="metric-label">连续学习天数</text>
|
||
<text class="metric-value">18</text>
|
||
</view>
|
||
<view class="metric-card dashboard-card">
|
||
<text class="metric-label">已攻克案例</text>
|
||
<text class="metric-value">126</text>
|
||
</view>
|
||
<view class="metric-card dashboard-card">
|
||
<text class="metric-label">AI 活跃指数</text>
|
||
<text class="metric-value">A</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="two-col">
|
||
<view class="dashboard-card compact-card">
|
||
<text class="card-title">临床能力画像</text>
|
||
<view class="radar-box">
|
||
<svg class="mini-radar" viewBox="0 0 100 100">
|
||
<circle cx="50" cy="50" fill="none" r="45" stroke="#e5e7eb" stroke-dasharray="2 2" stroke-width="0.5"></circle>
|
||
<polygon fill="#5B9BD5" fill-opacity="0.3" points="50,15 80,35 85,60 60,85 35,80 15,55 25,30 40,20" stroke="#5B9BD5" stroke-width="1.5"></polygon>
|
||
</svg>
|
||
<text class="radar-label top">问诊能力</text>
|
||
<text class="radar-label bottom">临床决策</text>
|
||
</view>
|
||
</view>
|
||
<view class="dashboard-card compact-card">
|
||
<view class="card-head">
|
||
<text class="card-title">成长趋势</text>
|
||
<view class="segmented">
|
||
<text class="seg active">日</text>
|
||
<text class="seg">周</text>
|
||
</view>
|
||
</view>
|
||
<view class="trend-bars">
|
||
<view class="trend-bar tone-1"></view>
|
||
<view class="trend-bar tone-2"></view>
|
||
<view class="trend-bar tone-3"></view>
|
||
<view class="trend-bar tone-4"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="two-col">
|
||
<view class="dashboard-card compact-card">
|
||
<text class="card-title">训练热力图</text>
|
||
<view class="heat-grid">
|
||
<view
|
||
v-for="(tone, index) in heatTones"
|
||
:key="index"
|
||
class="heat-cell"
|
||
:class="tone"
|
||
></view>
|
||
</view>
|
||
<view class="heat-legend">
|
||
<text>训练分布</text>
|
||
<text>少■多</text>
|
||
</view>
|
||
</view>
|
||
<view class="dashboard-card compact-card">
|
||
<text class="card-title">专科能力</text>
|
||
<view class="specialty-list">
|
||
<view class="specialty">
|
||
<view class="specialty-head">
|
||
<text>呼吸内科</text>
|
||
<text class="percent">91%</text>
|
||
</view>
|
||
<view class="mini-track">
|
||
<view class="mini-fill fill-91"></view>
|
||
</view>
|
||
</view>
|
||
<view class="specialty">
|
||
<view class="specialty-head">
|
||
<text>急诊医学</text>
|
||
<text class="percent">88%</text>
|
||
</view>
|
||
<view class="mini-track">
|
||
<view class="mini-fill fill-88"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="insight-stack">
|
||
<view class="dashboard-card insight-card">
|
||
<view class="insight-title">
|
||
<view class="psychology-icon"></view>
|
||
<text>AI 弱点诊断</text>
|
||
</view>
|
||
<view class="insight-row">
|
||
<view class="error-icon"></view>
|
||
<text class="insight-text">高频问题：鉴别诊断深度不足</text>
|
||
<view class="chevron-icon"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="dashboard-card insight-card">
|
||
<view class="insight-title">
|
||
<view class="sparkle-icon"></view>
|
||
<text>个性化训练推荐</text>
|
||
</view>
|
||
<view class="insight-row">
|
||
<view class="notes-icon"></view>
|
||
<text class="insight-text">今日挑战：复杂COPD急性加重期</text>
|
||
<view class="chevron-icon"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const emit = defineEmits<{
|
||
(event: 'open-settings'): void
|
||
(event: 'go-home'): void
|
||
}>()
|
||
|
||
const heatTones = [
|
||
'heat-low',
|
||
'heat-high',
|
||
'heat-empty',
|
||
'heat-mid',
|
||
'heat-low',
|
||
'heat-high',
|
||
'heat-empty',
|
||
'heat-mid',
|
||
'heat-low',
|
||
'heat-high'
|
||
]
|
||
</script>
|
||
|
||
<style scoped>
|
||
page {
|
||
min-height: 100%;
|
||
background: #eaf3ff;
|
||
}
|
||
|
||
.profile-page {
|
||
width: 390px;
|
||
max-width: 100vw;
|
||
min-height: 884px;
|
||
margin: 0 auto;
|
||
padding-bottom: 40px;
|
||
background: #eaf3ff;
|
||
color: #191c21;
|
||
font-family: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
|
||
.profile-page view,
|
||
.profile-page text,
|
||
.profile-page button,
|
||
.profile-page scroll-view {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.top-app-bar {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
z-index: 50;
|
||
width: 100%;
|
||
height: 56px;
|
||
padding: 0 16px;
|
||
border-bottom: 1px solid rgba(194, 198, 212, 0.3);
|
||
background: #ffffff;
|
||
box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.nav-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.icon-button {
|
||
width: 40px;
|
||
height: 40px;
|
||
min-height: 40px;
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
border-radius: 50%;
|
||
background: transparent;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.icon-button::after {
|
||
border: 0;
|
||
}
|
||
|
||
.home-button {
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.settings-icon,
|
||
.home-icon,
|
||
.account-icon,
|
||
.verified-icon,
|
||
.emergency-icon,
|
||
.psychology-icon,
|
||
.error-icon,
|
||
.chevron-icon,
|
||
.sparkle-icon,
|
||
.notes-icon {
|
||
background: #424752;
|
||
}
|
||
|
||
.account-icon.active {
|
||
background: #5b9bd5;
|
||
}
|
||
|
||
.settings-icon,
|
||
.verified-icon,
|
||
.emergency-icon,
|
||
.psychology-icon,
|
||
.error-icon,
|
||
.chevron-icon,
|
||
.sparkle-icon,
|
||
.notes-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.settings-icon {
|
||
width: 22px;
|
||
height: 22px;
|
||
-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98L14.5%202.42C14.47%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.5.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.48%200-.6.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.37.31.6.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.5.42h4c.25%200%20.46-.18.5-.42l.38-2.65c.61-.25%201.17-.58%201.69-.98l2.49%201c.23.08.48%200%20.6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98L14.5%202.42C14.47%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.5.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.48%200-.6.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.37.31.6.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.5.42h4c.25%200%20.46-.18.5-.42l.38-2.65c.61-.25%201.17-.58%201.69-.98l2.49%201c.23.08.48%200%20.6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
}
|
||
|
||
.home-icon,
|
||
.account-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
|
||
.home-icon {
|
||
-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8h5z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8h5z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
}
|
||
|
||
.account-icon {
|
||
-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
}
|
||
|
||
.dashboard {
|
||
width: 390px;
|
||
height: 884px;
|
||
padding: 80px 16px 40px;
|
||
}
|
||
|
||
.dashboard-card {
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
border-radius: 16px;
|
||
background: #ffffff;
|
||
box-shadow: 0 4px 20px -2px rgba(91, 155, 213, 0.1);
|
||
}
|
||
|
||
.profile-card {
|
||
padding: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.avatar-wrap {
|
||
position: relative;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.avatar-image {
|
||
width: 64px;
|
||
height: 64px;
|
||
border: 4px solid rgba(91, 155, 213, 0.2);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.level-badge {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
padding: 2px 8px;
|
||
border: 2px solid #ffffff;
|
||
border-radius: 999px;
|
||
background: #f05a23;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
|
||
color: #ffffff;
|
||
font-size: 10px;
|
||
line-height: 12px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.profile-copy {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.name-row {
|
||
margin-bottom: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.doctor-name {
|
||
max-width: 112px;
|
||
color: #191c21;
|
||
font-size: 20px;
|
||
line-height: 28px;
|
||
font-weight: 800;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.level-chip {
|
||
flex: 0 0 auto;
|
||
padding: 2px 8px;
|
||
border-radius: 999px;
|
||
background: #dcebfa;
|
||
color: #004f54;
|
||
font-size: 12px;
|
||
line-height: 16px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.honor-row {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
color: #424752;
|
||
font-size: 11px;
|
||
line-height: 16px;
|
||
}
|
||
|
||
.honor-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.verified-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%202%202.4%202.8%203.7-.7.7%203.7%202.8%202.4-2.8%202.4-.7%203.7-3.7-.7L12%2022l-2.4-2.8-3.7.7-.7-3.7L2.4%2014l2.8-2.4.7-3.7%203.7.7L12%202zm-1%2014.2%206-6-1.4-1.4L11%2013.4l-2.6-2.6L7%2012.2l4%204z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%202%202.4%202.8%203.7-.7.7%203.7%202.8%202.4-2.8%202.4-.7%203.7-3.7-.7L12%2022l-2.4-2.8-3.7.7-.7-3.7L2.4%2014l2.8-2.4.7-3.7%203.7.7L12%202zm-1%2014.2%206-6-1.4-1.4L11%2013.4l-2.6-2.6L7%2012.2l4%204z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
}
|
||
|
||
.emergency-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202 3%205v6c0%205.55%203.84%2010.74%209%2012%205.16-1.26%209-6.45%209-12V5l-9-3zm1%2015h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202 3%205v6c0%205.55%203.84%2010.74%209%2012%205.16-1.26%209-6.45%209-12V5l-9-3zm1%2015h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
}
|
||
|
||
.divider {
|
||
color: #c2c6d4;
|
||
}
|
||
|
||
.metrics-grid,
|
||
.two-col {
|
||
margin-top: 8px;
|
||
display: grid;
|
||
gap: 8px;
|
||
}
|
||
|
||
.metrics-grid {
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
}
|
||
|
||
.two-col {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.metric-card {
|
||
min-height: 72px;
|
||
padding: 8px;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.metric-label {
|
||
margin-bottom: 4px;
|
||
color: #424752;
|
||
font-size: 12px;
|
||
line-height: 16px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.metric-inline {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 4px;
|
||
}
|
||
|
||
.metric-value {
|
||
color: #5b9bd5;
|
||
font-size: 20px;
|
||
line-height: 24px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.metric-top {
|
||
color: #22c55e;
|
||
font-size: 8px;
|
||
line-height: 10px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.compact-card {
|
||
min-height: 150px;
|
||
padding: 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.card-title {
|
||
margin-bottom: 8px;
|
||
color: #5b9bd5;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.radar-box {
|
||
position: relative;
|
||
width: 100%;
|
||
aspect-ratio: 1 / 1;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.mini-radar {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.radar-label {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%) scale(0.9);
|
||
font-size: 10px;
|
||
line-height: 12px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.radar-label.top {
|
||
top: 0;
|
||
}
|
||
|
||
.radar-label.bottom {
|
||
bottom: 0;
|
||
}
|
||
|
||
.card-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.segmented {
|
||
transform: scale(0.65);
|
||
transform-origin: right top;
|
||
padding: 2px;
|
||
border-radius: 2px;
|
||
background: #dcebfa;
|
||
display: flex;
|
||
}
|
||
|
||
.seg {
|
||
padding: 2px 4px;
|
||
color: rgba(91, 155, 213, 0.6);
|
||
font-size: 8px;
|
||
line-height: 10px;
|
||
}
|
||
|
||
.seg.active {
|
||
border-radius: 2px;
|
||
background: #ffffff;
|
||
color: #5b9bd5;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.trend-bars {
|
||
flex: 1;
|
||
height: 64px;
|
||
margin-top: auto;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
gap: 4px;
|
||
}
|
||
|
||
.trend-bar {
|
||
flex: 1;
|
||
border-radius: 2px 2px 0 0;
|
||
}
|
||
|
||
.tone-1 {
|
||
height: 40%;
|
||
background: rgba(91, 155, 213, 0.2);
|
||
}
|
||
|
||
.tone-2 {
|
||
height: 60%;
|
||
background: rgba(91, 155, 213, 0.4);
|
||
}
|
||
|
||
.tone-3 {
|
||
height: 80%;
|
||
background: #5b9bd5;
|
||
}
|
||
|
||
.tone-4 {
|
||
height: 70%;
|
||
background: rgba(91, 155, 213, 0.7);
|
||
}
|
||
|
||
.heat-grid {
|
||
margin-bottom: 8px;
|
||
display: grid;
|
||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||
gap: 4px;
|
||
}
|
||
|
||
.heat-cell {
|
||
width: 100%;
|
||
aspect-ratio: 1 / 1;
|
||
border-radius: 1px;
|
||
}
|
||
|
||
.heat-low {
|
||
background: rgba(91, 155, 213, 0.3);
|
||
}
|
||
|
||
.heat-mid {
|
||
background: rgba(91, 155, 213, 0.6);
|
||
}
|
||
|
||
.heat-high {
|
||
background: #5b9bd5;
|
||
}
|
||
|
||
.heat-empty {
|
||
background: #f3f4f6;
|
||
}
|
||
|
||
.heat-legend {
|
||
margin-top: auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: rgba(66, 71, 82, 0.6);
|
||
font-size: 7px;
|
||
line-height: 10px;
|
||
}
|
||
|
||
.specialty-list {
|
||
margin-top: 4px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.specialty-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 8px;
|
||
line-height: 12px;
|
||
}
|
||
|
||
.percent {
|
||
color: #5b9bd5;
|
||
}
|
||
|
||
.mini-track {
|
||
width: 100%;
|
||
height: 4px;
|
||
border-radius: 999px;
|
||
background: #f3f4f6;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.mini-fill {
|
||
height: 100%;
|
||
background: #5b9bd5;
|
||
}
|
||
|
||
.fill-91 {
|
||
width: 91%;
|
||
}
|
||
|
||
.fill-88 {
|
||
width: 88%;
|
||
}
|
||
|
||
.insight-stack {
|
||
margin-top: 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
padding-bottom: 16px;
|
||
}
|
||
|
||
.insight-card {
|
||
padding: 12px;
|
||
border-left: 4px solid #5b9bd5;
|
||
}
|
||
|
||
.insight-title {
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: #5b9bd5;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.psychology-icon,
|
||
.sparkle-icon {
|
||
background: #5b9bd5;
|
||
}
|
||
|
||
.psychology-icon {
|
||
-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M13%203a8%208%200%200%200-8%208v3.5L3%2018h3v3h7v-3h1a7%207%200%200%200%207-7%208%208%200%200%200-8-8zm-2%2011H9v-2h2v2zm4%200h-2v-2h2v2zm-4-4H9V8h2v2zm4%200h-2V8h2v2z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M13%203a8%208%200%200%200-8%208v3.5L3%2018h3v3h7v-3h1a7%207%200%200%200%207-7%208%208%200%200%200-8-8zm-2%2011H9v-2h2v2zm4%200h-2v-2h2v2zm-4-4H9V8h2v2zm4%200h-2V8h2v2z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
}
|
||
|
||
.sparkle-icon {
|
||
-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m19%209%201.25-2.75L23%205l-2.75-1.25L19%201l-1.25%202.75L15%205l2.75%201.25L19%209zm-7.5.5L9%204%206.5%209.5%201%2012l5.5%202.5L9%2020l2.5-5.5L17%2012l-5.5-2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m19%209%201.25-2.75L23%205l-2.75-1.25L19%201l-1.25%202.75L15%205l2.75%201.25L19%209zm-7.5.5L9%204%206.5%209.5%201%2012l5.5%202.5L9%2020l2.5-5.5L17%2012l-5.5-2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
}
|
||
|
||
.insight-row {
|
||
padding: 12px;
|
||
border-radius: 12px;
|
||
background: #dcebfa;
|
||
box-shadow: 0 2px 8px rgba(91, 155, 213, 0.12);
|
||
color: #004f54;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.error-icon,
|
||
.notes-icon {
|
||
background: #5b9bd5;
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.error-icon {
|
||
-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M11%2015h2v2h-2v-2zm0-8h2v6h-2V7zm1-5a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M11%2015h2v2h-2v-2zm0-8h2v6h-2V7zm1-5a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
}
|
||
|
||
.notes-icon {
|
||
-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19%203h-1V1h-2v2H8V1H6v2H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V5a2%202%200%200%200-2-2zM8%207h8v2H8V7zm0%204h8v2H8v-2zm0%204h5v2H8v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19%203h-1V1h-2v2H8V1H6v2H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V5a2%202%200%200%200-2-2zM8%207h8v2H8V7zm0%204h8v2H8v-2zm0%204h5v2H8v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
}
|
||
|
||
.insight-text {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.chevron-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
background: #c2c6d4;
|
||
-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m10%206-1.41%201.41L13.17%2012l-4.58%204.59L10%2018l6-6-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m10%206-1.41%201.41L13.17%2012l-4.58%204.59L10%2018l6-6-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
}
|
||
</style>
|