|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>育见·视界——女性生育决策实验室</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary: #E51E86; |
|
|
--primary-light: #ff63b8; |
|
|
--primary-dark: #b0005e; |
|
|
--stats: #3498DB; |
|
|
--preference: #9B59B6; |
|
|
--environment: #2ECC71; |
|
|
--decision: #E67E22; |
|
|
--high-will: #FF1493; |
|
|
--medium-will: #DA70D6; |
|
|
--low-will: #87CEFA; |
|
|
--warning: #E74C3C; |
|
|
--positive: #27AE60; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Noto Sans SC', sans-serif; |
|
|
background-color: #fef6f9; |
|
|
color: #333; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.bg-primary { |
|
|
background-color: var(--primary); |
|
|
} |
|
|
|
|
|
.text-primary { |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
.border-primary { |
|
|
border-color: var(--primary); |
|
|
} |
|
|
|
|
|
.hover-bg-primary:hover { |
|
|
background-color: var(--primary); |
|
|
} |
|
|
|
|
|
.hover-text-primary:hover { |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.breathing-effect { |
|
|
animation: breathing 2s infinite ease-in-out; |
|
|
} |
|
|
|
|
|
@keyframes breathing { |
|
|
0% { box-shadow: 0 0 0 0 rgba(229, 30, 134, 0.4); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(229, 30, 134, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(229, 30, 134, 0); } |
|
|
} |
|
|
|
|
|
.tab-active { |
|
|
border-bottom: 3px solid var(--primary); |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.parameter-tab { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.parameter-tab:hover { |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.stats-tab { |
|
|
background-color: var(--stats); |
|
|
} |
|
|
|
|
|
.preference-tab { |
|
|
background-color: var(--preference); |
|
|
} |
|
|
|
|
|
.environment-tab { |
|
|
background-color: var(--environment); |
|
|
} |
|
|
|
|
|
.decision-tab { |
|
|
background-color: var(--decision); |
|
|
} |
|
|
|
|
|
.high-will { |
|
|
background-color: var(--high-will); |
|
|
} |
|
|
|
|
|
.medium-will { |
|
|
background-color: var(--medium-will); |
|
|
} |
|
|
|
|
|
.low-will { |
|
|
background-color: var(--low-will); |
|
|
} |
|
|
|
|
|
.slide-fade-enter-active { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.slide-fade-leave-active { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.slide-fade-enter-from, |
|
|
.slide-fade-leave-to { |
|
|
transform: translateX(20px); |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
.flip-card { |
|
|
perspective: 1000px; |
|
|
} |
|
|
|
|
|
.flip-card-inner { |
|
|
transition: transform 0.6s; |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
|
|
|
.flip-card:hover .flip-card-inner { |
|
|
transform: rotateY(10deg); |
|
|
} |
|
|
|
|
|
.bg-pattern { |
|
|
background-image: radial-gradient(var(--primary) 1px, transparent 1px); |
|
|
background-size: 20px 20px; |
|
|
opacity: 0.1; |
|
|
} |
|
|
|
|
|
.tooltip { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.tooltip .tooltip-text { |
|
|
visibility: hidden; |
|
|
width: 200px; |
|
|
background-color: #555; |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
border-radius: 6px; |
|
|
padding: 8px; |
|
|
position: absolute; |
|
|
z-index: 1; |
|
|
bottom: 125%; |
|
|
left: 50%; |
|
|
margin-left: -100px; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
|
|
|
.tooltip:hover .tooltip-text { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.range-slider::-webkit-slider-thumb { |
|
|
-webkit-appearance: none; |
|
|
appearance: none; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
background: var(--primary); |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.range-slider::-moz-range-thumb { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
background: var(--primary); |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.will-indicator { |
|
|
width: 100%; |
|
|
height: 10px; |
|
|
background: linear-gradient(to right, var(--low-will), var(--medium-will), var(--high-will)); |
|
|
border-radius: 5px; |
|
|
} |
|
|
|
|
|
.will-marker { |
|
|
position: absolute; |
|
|
top: -5px; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
background-color: white; |
|
|
border: 2px solid var(--primary); |
|
|
border-radius: 50%; |
|
|
transform: translateX(-50%); |
|
|
} |
|
|
|
|
|
.dna-bg { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23E51E86' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E"); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen"> |
|
|
<div id="app" class="min-h-screen flex flex-col"> |
|
|
|
|
|
<div id="role-page" class="min-h-screen flex flex-col p-8"> |
|
|
<header class="mb-8"> |
|
|
<h1 class="text-3xl font-bold text-primary">育见·视界——女性生育决策实验室</h1> |
|
|
</header> |
|
|
|
|
|
<main class="flex-grow flex flex-col items-center justify-center"> |
|
|
<h2 class="text-2xl font-semibold mb-8 text-gray-700">请选择您的角色</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full max-w-6xl"> |
|
|
|
|
|
<div class="flip-card"> |
|
|
<div class="flip-card-inner bg-white rounded-xl shadow-md overflow-hidden card-hover breathing-effect" data-role="1"> |
|
|
<div class="p-6 flex flex-col h-full"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-briefcase text-xl text-primary"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold">高教育高收入已婚专业人士</h3> |
|
|
<p class="text-sm text-gray-500">32岁 | 已婚 | 博士</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-grow"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="w-4 h-4 rounded-full bg-primary mr-2"></span> |
|
|
<span class="text-sm">高级管理人员</span> |
|
|
</div> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="w-4 h-4 rounded-full bg-primary mr-2"></span> |
|
|
<span class="text-sm">年收入 > 50万</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="w-4 h-4 rounded-full bg-primary mr-2"></span> |
|
|
<span class="text-sm">一线城市</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 pt-4 border-t border-gray-100"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm font-medium">生育意愿</span> |
|
|
<div class="w-24 h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-primary" style="width: 70%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flip-card"> |
|
|
<div class="flip-card-inner bg-white rounded-xl shadow-md overflow-hidden card-hover" data-role="2"> |
|
|
<div class="p-6 flex flex-col h-full"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-user-tie text-xl text-primary"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold">中等教育中等收入已婚职员</h3> |
|
|
<p class="text-sm text-gray-500">28岁 | 已婚 | 本科</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-grow"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="w-4 h-4 rounded-full bg-primary mr-2"></span> |
|
|
<span class="text-sm">办公室职员</span> |
|
|
</div> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="w-4 h-4 rounded-full bg-primary mr-2"></span> |
|
|
<span class="text-sm">年收入 15-30万</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="w-4 h-4 rounded-full bg-primary mr-2"></span> |
|
|
<span class="text-sm">二线城市</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 pt-4 border-t border-gray-100"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm font-medium">生育意愿</span> |
|
|
<div class="w-24 h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-primary" style="width: 60%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flip-card"> |
|
|
<div class="flip-card-inner bg-white rounded-xl shadow-md overflow-hidden card-hover" data-role="3"> |
|
|
<div class="p-6 flex flex-col h-full"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-user-graduate text-xl text-primary"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold">高教育中等收入单身专业人士</h3> |
|
|
<p class="text-sm text-gray-500">30岁 | 单身 | 硕士</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-grow"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="w-4 h-4 rounded-full bg-primary mr-2"></span> |
|
|
<span class="text-sm">专业技术人员</span> |
|
|
</div> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="w-4 h-4 rounded-full bg-primary mr-2"></span> |
|
|
<span class="text-sm">年收入 20-40万</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="w-4 h-4 rounded-full bg-primary mr-2"></span> |
|
|
<span class="text-sm">一线城市</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 pt-4 border-t border-gray-100"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm font-medium">生育意愿</span> |
|
|
<div class="w-24 h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-primary" style="width: 40%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flip-card"> |
|
|
<div class="flip-card-inner bg-white rounded-xl shadow-md overflow-hidden card-hover" data-role="4"> |
|
|
<div class="p-6 flex flex-col h-full"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-hard-hat text-xl text-primary"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold">低教育低收入已婚工人</h3> |
|
|
<p class="text-sm text-gray-500">35岁 | 已婚 | 高中</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-grow"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="w-4 h-4 rounded-full bg-primary mr-2"></span> |
|
|
<span class="text-sm">工厂工人</span> |
|
|
</div> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="w-4 h-4 rounded-full bg-primary mr-2"></span> |
|
|
<span class="text-sm">年收入 < 10万</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="w-4 h-4 rounded-full bg-primary mr-2"></span> |
|
|
<span class="text-sm">三线城市</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 pt-4 border-t border-gray-100"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm font-medium">生育意愿</span> |
|
|
<div class="w-24 h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-primary" style="width: 80%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flip-card"> |
|
|
<div class="flip-card-inner bg-white rounded-xl shadow-md overflow-hidden card-hover" data-role="5"> |
|
|
<div class="p-6 flex flex-col h-full"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-lightbulb text-xl text-primary"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold">高教育高收入单身创业者</h3> |
|
|
<p class="text-sm text-gray-500">33岁 | 单身 | MBA</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-grow"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="w-4 h-4 rounded-full bg-primary mr-2"></span> |
|
|
<span class="text-sm">科技公司创始人</span> |
|
|
</div> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="w-4 h-4 rounded-full bg-primary mr-2"></span> |
|
|
<span class="text-sm">年收入 > 100万</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="w-4 h-4 rounded-full bg-primary mr-2"></span> |
|
|
<span class="text-sm">一线城市</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 pt-4 border-t border-gray-100"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm font-medium">生育意愿</span> |
|
|
<div class="w-24 h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-primary" style="width: 30%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flip-card"> |
|
|
<div class="flip-card-inner bg-white rounded-xl shadow-md overflow-hidden card-hover" data-role="6"> |
|
|
<div class="p-6 flex flex-col h-full"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-user-friends text-xl text-primary"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold">中等教育低收入单亲家长</h3> |
|
|
<p class="text-sm text-gray-500">36岁 | 离异 | 大专</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-grow"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="w-4 h-4 rounded-full bg-primary mr-2"></span> |
|
|
<span class="text-sm">服务行业</span> |
|
|
</div> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="w-4 h-4 rounded-full bg-primary mr-2"></span> |
|
|
<span class="text-sm">年收入 < 8万</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="w-4 h-4 rounded-full bg-primary mr-2"></span> |
|
|
<span class="text-sm">二线城市</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 pt-4 border-t border-gray-100"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm font-medium">生育意愿</span> |
|
|
<div class="w-24 h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-primary" style="width: 20%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flip-card"> |
|
|
<div class="flip-card-inner bg-white rounded-xl shadow-md overflow-hidden card-hover" data-role="7"> |
|
|
<div class="p-6 flex flex-col h-full"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-user-edit text-xl text-primary"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold">自定义角色</h3> |
|
|
<p class="text-sm text-gray-500">自定义您的个人资料</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-grow flex items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-sliders-h text-3xl text-primary mb-2"></i> |
|
|
<p class="text-sm">自定义所有参数</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 pt-4 border-t border-gray-100"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm font-medium">生育意愿</span> |
|
|
<div class="w-24 h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-gray-400" style="width: 50%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<footer class="mt-8 flex justify-between"> |
|
|
<button id="random-role" class="px-6 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-700 font-medium flex items-center"> |
|
|
<i class="fas fa-random mr-2"></i> 随机角色 |
|
|
</button> |
|
|
<button id="enter-params" class="px-6 py-2 bg-primary hover:bg-primary-dark rounded-full text-white font-medium flex items-center"> |
|
|
点击进入 <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="params-page" class="min-h-screen hidden p-8"> |
|
|
<header class="mb-8"> |
|
|
<h1 class="text-3xl font-bold text-primary">参数设置</h1> |
|
|
</header> |
|
|
|
|
|
<div class="flex flex-col lg:flex-row flex-grow gap-6"> |
|
|
|
|
|
<div class="hidden lg:block lg:w-1/6 relative"> |
|
|
<div class="dna-bg"></div> |
|
|
<div class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center"> |
|
|
<div class="w-40 h-40 rounded-full bg-pink-50 flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-user-md text-5xl text-primary"></i> |
|
|
</div> |
|
|
<div class="w-40 h-40 rounded-full bg-pink-50 flex items-center justify-center"> |
|
|
<i class="fas fa-baby-carriage text-5xl text-primary"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:w-4/6"> |
|
|
<div class="bg-white rounded-xl shadow-md p-6 h-full"> |
|
|
<h2 class="text-xl font-semibold mb-6 text-gray-700">参数设置</h2> |
|
|
|
|
|
|
|
|
<div class="flex mb-6 border-b border-gray-200"> |
|
|
<button class="parameter-tab stats-tab text-white px-4 py-2 rounded-t-lg mr-2 tab-active" data-tab="stats"> |
|
|
基本人口统计 |
|
|
</button> |
|
|
<button class="parameter-tab preference-tab text-white px-4 py-2 rounded-t-lg mr-2" data-tab="preference"> |
|
|
生育偏好 |
|
|
</button> |
|
|
<button class="parameter-tab environment-tab text-white px-4 py-2 rounded-t-lg mr-2" data-tab="environment"> |
|
|
环境因素 |
|
|
</button> |
|
|
<button class="parameter-tab decision-tab text-white px-4 py-2 rounded-t-lg" data-tab="decision"> |
|
|
决策参数 |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tab-content"> |
|
|
|
|
|
<div id="stats-tab" class="tab-pane active"> |
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="parameter-group"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<label class="font-medium">年龄</label> |
|
|
<span class="text-sm text-gray-500 tooltip"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<span class="tooltip-text">年龄影响生育能力和生物钟</span> |
|
|
</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-sm text-gray-500 mr-2">20</span> |
|
|
<input type="range" min="20" max="45" value="30" class="w-full range-slider" id="age-slider"> |
|
|
<span class="text-sm text-gray-500 ml-2">45</span> |
|
|
</div> |
|
|
<div class="text-right mt-1"> |
|
|
<span class="text-sm font-medium" id="age-value">30</span> |
|
|
<span class="text-sm text-gray-500">岁</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="parameter-group"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<label class="font-medium">教育水平</label> |
|
|
<span class="text-sm text-gray-500 tooltip"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<span class="tooltip-text">教育水平影响职业发展机会</span> |
|
|
</span> |
|
|
</div> |
|
|
<select class="w-full p-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary"> |
|
|
<option value="high-school">高中</option> |
|
|
<option value="vocational">职校</option> |
|
|
<option value="bachelor" selected>本科</option> |
|
|
<option value="master">硕士</option> |
|
|
<option value="phd">博士</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="parameter-group"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<label class="font-medium">收入水平</label> |
|
|
<span class="text-sm text-gray-500 tooltip"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<span class="tooltip-text">收入水平影响财务稳定性</span> |
|
|
</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-sm text-gray-500 mr-2">低</span> |
|
|
<input type="range" min="1" max="5" value="3" class="w-full range-slider" id="income-slider"> |
|
|
<span class="text-sm text-gray-500 ml-2">高</span> |
|
|
</div> |
|
|
<div class="flex justify-between mt-1"> |
|
|
<span class="text-xs text-gray-500">1级</span> |
|
|
<span class="text-xs text-gray-500">2级</span> |
|
|
<span class="text-xs text-gray-500">3级</span> |
|
|
<span class="text-xs text-gray-500">4级</span> |
|
|
<span class="text-xs text-gray-500">5级</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="parameter-group"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<label class="font-medium">婚姻状况</label> |
|
|
<span class="text-sm text-gray-500 tooltip"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<span class="tooltip-text">婚姻状况影响伴侣可用性</span> |
|
|
</span> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
<label class="inline-flex items-center p-2 border border-gray-300 rounded-md cursor-pointer"> |
|
|
<input type="radio" name="marital-status" value="single" class="form-radio text-primary"> |
|
|
<span class="ml-2">单身</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center p-2 border border-gray-300 rounded-md cursor-pointer"> |
|
|
<input type="radio" name="marital-status" value="dating" class="form-radio text-primary"> |
|
|
<span class="ml-2">恋爱中</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center p-2 border border-gray-300 rounded-md cursor-pointer"> |
|
|
<input type="radio" name="marital-status" value="married" checked class="form-radio text-primary"> |
|
|
<span class="ml-2">已婚</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center p-2 border border-gray-300 rounded-md cursor-pointer"> |
|
|
<input type="radio" name="marital-status" value="divorced" class="form-radio text-primary"> |
|
|
<span class="ml-2">离异</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="preference-tab" class="tab-pane hidden"> |
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="parameter-group"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<label class="font-medium">生育意愿</label> |
|
|
<span class="text-sm text-gray-500 tooltip"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<span class="tooltip-text">生育意愿是决策的基础动机</span> |
|
|
</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-sm text-gray-500 mr-2">低</span> |
|
|
<input type="range" min="1" max="10" value="5" class="w-full range-slider" id="will-slider"> |
|
|
<span class="text-sm text-gray-500 ml-2">高</span> |
|
|
</div> |
|
|
<div class="flex justify-between mt-1"> |
|
|
<span class="text-xs text-gray-500">1</span> |
|
|
<span class="text-xs text-gray-500">2</span> |
|
|
<span class="text-xs text-gray-500">3</span> |
|
|
<span class="text-xs text-gray-500">4</span> |
|
|
<span class="text-xs text-gray-500">5</span> |
|
|
<span class="text-xs text-gray-500">6</span> |
|
|
<span class="text-xs text-gray-500">7</span> |
|
|
<span class="text-xs text-gray-500">8</span> |
|
|
<span class="text-xs text-gray-500">9</span> |
|
|
<span class="text-xs text-gray-500">10</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="parameter-group"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<label class="font-medium">最大期望子女数</label> |
|
|
<span class="text-sm text-gray-500 tooltip"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<span class="tooltip-text">您希望拥有的最多孩子数量</span> |
|
|
</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-center space-x-4"> |
|
|
<button class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-primary hover:text-white"> |
|
|
- |
|
|
</button> |
|
|
<span class="text-xl font-medium" id="children-value">2</span> |
|
|
<button class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-primary hover:text-white"> |
|
|
+ |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="parameter-group"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<label class="font-medium">职业与家庭优先级</label> |
|
|
<span class="text-sm text-gray-500 tooltip"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<span class="tooltip-text">您如何平衡职业发展与家庭生活</span> |
|
|
</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-sm text-gray-500 mr-2">职业</span> |
|
|
<input type="range" min="0" max="100" value="50" class="w-full range-slider" id="priority-slider"> |
|
|
<span class="text-sm text-gray-500 ml-2">家庭</span> |
|
|
</div> |
|
|
<div class="flex justify-between mt-1"> |
|
|
<span class="text-xs text-gray-500">0%</span> |
|
|
<span class="text-xs text-gray-500">25%</span> |
|
|
<span class="text-xs text-gray-500">50%</span> |
|
|
<span class="text-xs text-gray-500">75%</span> |
|
|
<span class="text-xs text-gray-500">100%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="environment-tab" class="tab-pane hidden"> |
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="parameter-group"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<label class="font-medium">医疗保健可及性</label> |
|
|
<span class="text-sm text-gray-500 tooltip"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<span class="tooltip-text">您所在地区的医疗资源质量</span> |
|
|
</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="rating"> |
|
|
<input type="radio" name="healthcare" value="1" class="mask mask-star bg-yellow-400" /> |
|
|
<input type="radio" name="healthcare" value="2" class="mask mask-star bg-yellow-400" /> |
|
|
<input type="radio" name="healthcare" value="3" class="mask mask-star bg-yellow-400" checked /> |
|
|
<input type="radio" name="healthcare" value="4" class="mask mask-star bg-yellow-400" /> |
|
|
<input type="radio" name="healthcare" value="5" class="mask mask-star bg-yellow-400" /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="parameter-group"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<label class="font-medium">社会压力水平</label> |
|
|
<span class="text-sm text-gray-500 tooltip"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<span class="tooltip-text">来自家庭和社会的生育期望</span> |
|
|
</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-sm text-gray-500 mr-2">低</span> |
|
|
<input type="range" min="1" max="3" value="2" class="w-full range-slider" id="pressure-slider"> |
|
|
<span class="text-sm text-gray-500 ml-2">高</span> |
|
|
</div> |
|
|
<div class="flex justify-between mt-1"> |
|
|
<span class="text-xs text-gray-500">低</span> |
|
|
<span class="text-xs text-gray-500">中</span> |
|
|
<span class="text-xs text-gray-500">高</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="parameter-group"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<label class="font-medium">伴侣支持水平</label> |
|
|
<span class="text-sm text-gray-500 tooltip"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<span class="tooltip-text">伴侣在育儿方面的参与度</span> |
|
|
</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-sm text-gray-500 mr-2">低</span> |
|
|
<input type="range" min="1" max="3" value="2" class="w-full range-slider" id="support-slider"> |
|
|
<span class="text-sm text-gray-500 ml-2">高</span> |
|
|
</div> |
|
|
<div class="flex justify-between mt-1"> |
|
|
<span class="text-xs text-gray-500">低</span> |
|
|
<span class="text-xs text-gray-500">中</span> |
|
|
<span class="text-xs text-gray-500">高</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="decision-tab" class="tab-pane hidden"> |
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="parameter-group"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<label class="font-medium">规划周期</label> |
|
|
<span class="text-sm text-gray-500 tooltip"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<span class="tooltip-text">您考虑生育决策的时间框架</span> |
|
|
</span> |
|
|
</div> |
|
|
<select class="w-full p-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary"> |
|
|
<option value="6">6个月</option> |
|
|
<option value="12">12个月</option> |
|
|
<option value="24" selected>24个月</option> |
|
|
<option value="36">36个月</option> |
|
|
<option value="48">48个月</option> |
|
|
<option value="60">60个月</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="parameter-group"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<label class="font-medium">重新评估频率</label> |
|
|
<span class="text-sm text-gray-500 tooltip"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<span class="tooltip-text">您重新评估生育决策的间隔</span> |
|
|
</span> |
|
|
</div> |
|
|
<select class="w-full p-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary"> |
|
|
<option value="monthly">月度</option> |
|
|
<option value="quarterly" selected>季度</option> |
|
|
<option value="semiannual">半年</option> |
|
|
<option value="annual">年度</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="parameter-group"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<label class="font-medium">财务稳定阈值</label> |
|
|
<span class="text-sm text-gray-500 tooltip"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<span class="tooltip-text">您认为生育所需的最低经济条件</span> |
|
|
</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-sm text-gray-500 mr-2">低</span> |
|
|
<input type="range" min="1" max="3" value="2" class="w-full range-slider" id="threshold-slider"> |
|
|
<span class="text-sm text-gray-500 ml-2">高</span> |
|
|
</div> |
|
|
<div class="flex justify-between mt-1"> |
|
|
<span class="text-xs text-gray-500">低</span> |
|
|
<span class="text-xs text-gray-500">中</span> |
|
|
<span class="text-xs text-gray-500">高</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:w-1/6"> |
|
|
<div class="bg-white rounded-xl shadow-md p-6 h-full"> |
|
|
<h2 class="text-xl font-semibold mb-4 text-gray-700">角色预览</h2> |
|
|
|
|
|
<div class="flex flex-col items-center mb-6"> |
|
|
<div class="w-24 h-24 rounded-full bg-pink-100 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-user text-3xl text-primary"></i> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<h3 class="font-medium" id="preview-name">高教育中等收入已婚职员</h3> |
|
|
<p class="text-sm text-gray-500" id="preview-age">28岁 | 已婚 | 本科</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>生育意愿指数</span> |
|
|
<span class="font-medium" id="preview-will">60%</span> |
|
|
</div> |
|
|
<div class="will-indicator relative"> |
|
|
<div class="will-marker" style="left: 60%;"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>职业-家庭平衡</span> |
|
|
<span class="font-medium" id="preview-balance">职业 50% | 家庭 50%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-gradient-to-r from-blue-500 to-pink-500 h-2 rounded-full" style="width: 100%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4 border-t border-gray-100"> |
|
|
<h4 class="text-sm font-medium mb-2">主要影响因素</h4> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">收入水平</span> |
|
|
<span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">生育意愿</span> |
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">医疗资源</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<footer class="mt-8 flex justify-between"> |
|
|
<button id="back-to-role" class="px-6 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-700 font-medium flex items-center"> |
|
|
<i class="fas fa-arrow-left mr-2"></i> 返回 |
|
|
</button> |
|
|
<div class="flex space-x-4"> |
|
|
<button id="random-params" class="px-6 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-700 font-medium flex items-center"> |
|
|
<i class="fas fa-random mr-2"></i> 随机参数 |
|
|
</button> |
|
|
<button id="enter-scenarios" class="px-6 py-2 bg-primary hover:bg-primary-dark rounded-full text-white font-medium flex items-center"> |
|
|
继续 <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="scenario-page" class="min-h-screen hidden p-8"> |
|
|
<header class="mb-8"> |
|
|
<h1 class="text-3xl font-bold text-primary">模拟决策</h1> |
|
|
</header> |
|
|
|
|
|
<div class="flex flex-col lg:flex-row flex-grow gap-6"> |
|
|
|
|
|
<div class="lg:w-1/4"> |
|
|
<div class="bg-white rounded-xl shadow-md p-6 h-full"> |
|
|
<h2 class="text-xl font-semibold mb-4 text-gray-700">事件卡牌库</h2> |
|
|
|
|
|
<div class="flex overflow-x-auto lg:overflow-x-visible lg:flex-col space-x-4 lg:space-x-0 lg:space-y-4 pb-4 lg:pb-0"> |
|
|
|
|
|
<div class="flex lg:flex-col space-x-2 lg:space-x-0 lg:space-y-2 mb-4"> |
|
|
<button class="category-tab px-4 py-2 bg-blue-100 text-blue-800 rounded-lg active" data-category="career"> |
|
|
职业转折点 |
|
|
</button> |
|
|
<button class="category-tab px-4 py-2 bg-green-100 text-green-800 rounded-lg" data-category="health"> |
|
|
健康因素 |
|
|
</button> |
|
|
<button class="category-tab px-4 py-2 bg-yellow-100 text-yellow-800 rounded-lg" data-category="economic"> |
|
|
经济环境 |
|
|
</button> |
|
|
<button class="category-tab px-4 py-2 bg-purple-100 text-purple-800 rounded-lg" data-category="social"> |
|
|
社会关系 |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="career-cards" class="category-cards space-y-4"> |
|
|
<div class="scenario-card p-4 bg-blue-50 rounded-lg border border-blue-100 cursor-pointer" data-id="career1"> |
|
|
<h3 class="font-medium text-blue-800">产后回归晋升机会</h3> |
|
|
<p class="text-sm text-blue-600">测试职业发展与育儿平衡</p> |
|
|
</div> |
|
|
<div class="scenario-card p-4 bg-blue-50 rounded-lg border border-blue-100 cursor-pointer" data-id="career2"> |
|
|
<h3 class="font-medium text-blue-800">海外工作机会</h3> |
|
|
<p class="text-sm text-blue-600">测试地理迁移对生育决策的影响</p> |
|
|
</div> |
|
|
<div class="scenario-card p-4 bg-blue-50 rounded-lg border border-blue-100 cursor-pointer" data-id="career3"> |
|
|
<h3 class="font-medium text-blue-800">创业机会</h3> |
|
|
<p class="text-sm text-blue-600">测试职业风险与生育计划的关系</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="health-cards" class="category-cards hidden space-y-4"> |
|
|
<div class="scenario-card p-4 bg-green-50 rounded-lg border border-green-100 cursor-pointer" data-id="health1"> |
|
|
<h3 class="font-medium text-green-800">幼儿急诊与工作冲突</h3> |
|
|
<p class="text-sm text-green-600">测试医疗资源获取</p> |
|
|
</div> |
|
|
<div class="scenario-card p-4 bg-green-50 rounded-lg border border-green-100 cursor-pointer" data-id="health2"> |
|
|
<h3 class="font-medium text-green-800">生育健康问题</h3> |
|
|
<p class="text-sm text-green-600">测试医疗条件对决策的影响</p> |
|
|
</div> |
|
|
<div class="scenario-card p-4 bg-green-50 rounded-lg border border-green-100 cursor-pointer" data-id="health3"> |
|
|
<h3 class="font-medium text-green-800">家族遗传疾病风险</h3> |
|
|
<p class="text-sm text-green-600">测试健康风险评估</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="economic-cards" class="category-cards hidden space-y-4"> |
|
|
<div class="scenario-card p-4 bg-yellow-50 rounded-lg border border-yellow-100 cursor-pointer" data-id="economic1"> |
|
|
<h3 class="font-medium text-yellow-800">房贷利率上涨冲击</h3> |
|
|
<p class="text-sm text-yellow-600">测试经济压力</p> |
|
|
</div> |
|
|
<div class="scenario-card p-4 bg-yellow-50 rounded-lg border border-yellow-100 cursor-pointer" data-id="economic2"> |
|
|
<h3 class="font-medium text-yellow-800">育儿补贴政策变化</h3> |
|
|
<p class="text-sm text-yellow-600">测试政策支持</p> |
|
|
</div> |
|
|
<div class="scenario-card p-4 bg-yellow-50 rounded-lg border border-yellow-100 cursor-pointer" data-id="economic3"> |
|
|
<h3 class="font-medium text-yellow-800">家庭收入波动</h3> |
|
|
<p class="text-sm text-yellow-600">测试财务不确定性</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="social-cards" class="category-cards hidden space-y-4"> |
|
|
<div class="scenario-card p-4 bg-purple-50 rounded-lg border border-purple-100 cursor-pointer" data-id="social1"> |
|
|
<h3 class="font-medium text-purple-800">家庭生育期望</h3> |
|
|
<p class="text-sm text-purple-600">测试社会压力应对</p> |
|
|
</div> |
|
|
<div class="scenario-card p-4 bg-purple-50 rounded-lg border border-purple-100 cursor-pointer" data-id="social2"> |
|
|
<h3 class="font-medium text-purple-800">伴侣育儿分工变化</h3> |
|
|
<p class="text-sm text-purple-600">测试伴侣支持水平</p> |
|
|
</div> |
|
|
<div class="scenario-card p-4 bg-purple-50 rounded-lg border border-purple-100 cursor-pointer" data-id="social3"> |
|
|
<h3 class="font-medium text-purple-800">社区育儿资源</h3> |
|
|
<p class="text-sm text-purple-600">测试社会支持网络</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:w-2/4"> |
|
|
<div class="bg-white rounded-xl shadow-md p-6 h-full"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-semibold text-gray-700">已选择的情景事件</h2> |
|
|
<div class="text-sm text-gray-500"> |
|
|
<span id="selected-count">0</span>/5 |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="selected-scenarios" class="grid grid-cols-1 gap-4 min-h-[400px]"> |
|
|
<div class="flex items-center justify-center h-full"> |
|
|
<div class="text-center text-gray-400"> |
|
|
<i class="fas fa-hand-pointer text-3xl mb-2"></i> |
|
|
<p>从左侧选择事件添加到模拟中</p> |
|
|
<p class="text-sm">最多可选择5个事件</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:w-1/4"> |
|
|
<div class="bg-white rounded-xl shadow-md p-6 h-full"> |
|
|
<h2 class="text-xl font-semibold mb-4 text-gray-700">事件详情</h2> |
|
|
|
|
|
<div id="scenario-details" class="text-center text-gray-400"> |
|
|
<i class="fas fa-info-circle text-3xl mb-2"></i> |
|
|
<p>点击事件查看详情</p> |
|
|
</div> |
|
|
|
|
|
<div id="scenario-impact" class="mt-6 hidden"> |
|
|
<h3 class="font-medium mb-2">影响参数</h3> |
|
|
<div class="space-y-3"> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>生育意愿</span> |
|
|
<span class="font-medium">-10%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-pink-500 h-2 rounded-full" style="width: 30%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>职业发展</span> |
|
|
<span class="font-medium">-15%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-blue-500 h-2 rounded-full" style="width: 45%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>财务稳定</span> |
|
|
<span class="font-medium">-5%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-yellow-500 h-2 rounded-full" style="width: 25%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<h3 class="font-medium mb-2">系统建议</h3> |
|
|
<div class="bg-pink-50 border border-pink-100 rounded-lg p-3 text-sm text-pink-800"> |
|
|
此事件可能对您的职业发展产生较大影响，建议优先考虑职业规划。 |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<footer class="mt-8 flex justify-between"> |
|
|
<button id="back-to-params" class="px-6 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-700 font-medium flex items-center"> |
|
|
<i class="fas fa-arrow-left mr-2"></i> 返回 |
|
|
</button> |
|
|
<div class="flex space-x-4"> |
|
|
<button id="random-scenarios" class="px-6 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-700 font-medium flex items-center"> |
|
|
<i class="fas fa-random mr-2"></i> 随机事件 |
|
|
</button> |
|
|
<button id="enter-decision" class="px-6 py-2 bg-primary hover:bg-primary-dark rounded-full text-white font-medium flex items-center"> |
|
|
继续 <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="decision-page" class="min-h-screen hidden p-8"> |
|
|
<header class="mb-8"> |
|
|
<h1 class="text-3xl font-bold text-primary">决策模拟</h1> |
|
|
</header> |
|
|
|
|
|
<div class="flex flex-col lg:flex-row flex-grow gap-6"> |
|
|
|
|
|
<div class="lg:w-1/4"> |
|
|
<div class="bg-white rounded-xl shadow-md p-6 h-full"> |
|
|
<h2 class="text-xl font-semibold mb-4 text-gray-700">角色与情景概览</h2> |
|
|
|
|
|
<div class="flex flex-col items-center mb-6"> |
|
|
<div class="w-20 h-20 rounded-full bg-pink-100 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-user text-2xl text-primary"></i> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<h3 class="font-medium">高教育中等收入已婚职员</h3> |
|
|
<p class="text-sm text-gray-500">28岁 | 已婚 | 本科</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4 mb-6"> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>生育意愿指数</span> |
|
|
<span class="font-medium">60%</span> |
|
|
</div> |
|
|
<div class="will-indicator relative"> |
|
|
<div class="will-marker" style="left: 60%;"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-sm font-medium mb-2">主要影响因素</h4> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">收入水平</span> |
|
|
<span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">生育意愿</span> |
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">医疗资源</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="font-medium mb-2">已选情景事件</h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="p-3 bg-blue-50 rounded-lg border border-blue-100"> |
|
|
<h4 class="text-sm font-medium text-blue-800">产后回归晋升机会</h4> |
|
|
<p class="text-xs text-blue-600">测试职业发展与育儿平衡</p> |
|
|
</div> |
|
|
<div class="p-3 bg-yellow-50 rounded-lg border border-yellow-100"> |
|
|
<h4 class="text-sm font-medium text-yellow-800">房贷利率上涨冲击</h4> |
|
|
<p class="text-xs text-yellow-600">测试经济压力</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:w-2/4"> |
|
|
<div class="bg-white rounded-xl shadow-md p-6 h-full"> |
|
|
<h2 class="text-xl font-semibold mb-6 text-gray-700">生育决策选项</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
|
|
|
<div class="decision-option p-4 bg-white rounded-xl border-2 border-pink-200 hover:border-pink-300 cursor-pointer transition-all"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-baby text-pink-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">立即生育</h3> |
|
|
<p class="text-sm text-gray-500">测试高生育意愿和紧迫感</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<div class="flex justify-between text-xs mb-1"> |
|
|
<span>生育意愿强度</span> |
|
|
<span class="font-medium">高</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-pink-500 h-2 rounded-full" style="width: 90%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="decision-option p-4 bg-white rounded-xl border-2 border-pink-100 hover:border-pink-300 cursor-pointer transition-all"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-pink-50 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-calendar-check text-pink-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">一年内生育</h3> |
|
|
<p class="text-sm text-gray-500">测试短期规划和准备</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<div class="flex justify-between text-xs mb-1"> |
|
|
<span>生育意愿强度</span> |
|
|
<span class="font-medium">中高</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-pink-400 h-2 rounded-full" style="width: 75%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="decision-option p-4 bg-white rounded-xl border-2 border-purple-100 hover:border-purple-300 cursor-pointer transition-all"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-50 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-calendar-alt text-purple-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">三年内生育</h3> |
|
|
<p class="text-sm text-gray-500">测试中期规划和职业平衡</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<div class="flex justify-between text-xs mb-1"> |
|
|
<span>生育意愿强度</span> |
|
|
<span class="font-medium">中</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-purple-400 h-2 rounded-full" style="width: 50%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="decision-option p-4 bg-white rounded-xl border-2 border-blue-100 hover:border-blue-300 cursor-pointer transition-all"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-calendar-plus text-blue-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">五年后再考虑</h3> |
|
|
<p class="text-sm text-gray-500">测试长期规划和职业优先</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<div class="flex justify-between text-xs mb-1"> |
|
|
<span>生育意愿强度</span> |
|
|
<span class="font-medium">中低</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-blue-400 h-2 rounded-full" style="width: 30%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="decision-option p-4 bg-white rounded-xl border-2 border-green-100 hover:border-green-300 cursor-pointer transition-all"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-dna text-green-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">冻卵保留选择权</h3> |
|
|
<p class="text-sm text-gray-500">测试技术辅助生育意愿</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<div class="flex justify-between text-xs mb-1"> |
|
|
<span>生育意愿强度</span> |
|
|
<span class="font-medium">可变</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-gradient-to-r from-green-400 to-blue-400 h-2 rounded-full" style="width: 60%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="decision-option p-4 bg-white rounded-xl border-2 border-gray-200 hover:border-gray-400 cursor-pointer transition-all"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-times text-gray-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">选择不生育</h3> |
|
|
<p class="text-sm text-gray-500">测试丁克倾向和原因</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<div class="flex justify-between text-xs mb-1"> |
|
|
<span>生育意愿强度</span> |
|
|
<span class="font-medium">低</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-gray-400 h-2 rounded-full" style="width: 10%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:w-1/4"> |
|
|
<div class="bg-white rounded-xl shadow-md p-6 h-full"> |
|
|
<h2 class="text-xl font-semibold mb-4 text-gray-700">决策影响预览</h2> |
|
|
|
|
|
<div id="decision-preview" class="text-center text-gray-400"> |
|
|
<i class="fas fa-mouse-pointer text-3xl mb-2"></i> |
|
|
<p>选择一个决策选项查看潜在影响</p> |
|
|
</div> |
|
|
|
|
|
<div id="decision-impact" class="hidden"> |
|
|
<h3 class="font-medium mb-3">"立即生育"的潜在影响</h3> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<h4 class="text-sm font-medium flex items-center mb-1"> |
|
|
<i class="fas fa-briefcase mr-2 text-blue-500"></i> 职业发展 |
|
|
</h4> |
|
|
<div class="text-xs bg-blue-50 p-2 rounded-lg"> |
|
|
<p>短期内职业晋升机会减少30%，3-5年后可能恢复</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-sm font-medium flex items-center mb-1"> |
|
|
<i class="fas fa-wallet mr-2 text-yellow-500"></i> 经济状况 |
|
|
</h4> |
|
|
<div class="text-xs bg-yellow-50 p-2 rounded-lg"> |
|
|
<p>前两年家庭收入减少25%，育儿成本增加40%</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-sm font-medium flex items-center mb-1"> |
|
|
<i class="fas fa-heartbeat mr-2 text-red-500"></i> 健康因素 |
|
|
</h4> |
|
|
<div class="text-xs bg-red-50 p-2 rounded-lg"> |
|
|
<p>当前年龄生育健康风险较低(8%)，产后恢复期6-12个月</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-sm font-medium flex items-center mb-1"> |
|
|
<i class="fas fa-users mr-2 text-purple-500"></i> 社会关系 |
|
|
</h4> |
|
|
<div class="text-xs bg-purple-50 p-2 rounded-lg"> |
|
|
<p>家庭支持度高，伴侣参与意愿强，社会压力缓解</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-sm font-medium flex items-center mb-1"> |
|
|
<i class="fas fa-smile mr-2 text-green-500"></i> 幸福感预测 |
|
|
</h4> |
|
|
<div class="text-xs bg-green-50 p-2 rounded-lg"> |
|
|
<p>初期压力较大，长期幸福感指数提升20-35%</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<h4 class="text-sm font-medium mb-2">系统建议</h4> |
|
|
<div class="text-xs |
|
|
</html> |
