js+css实现中国亲戚关系计算器代码
代码语言：html
所属分类：其他
代码描述：js+css实现中国亲戚关系计算器代码，让你知道该怎么称呼亲戚。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!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 href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Tailwind 配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4F46E5', // 主色调：靛蓝色，代表智慧和信任
secondary: '#EC4899', // 辅助色：粉红色，代表家庭温暖
neutral: '#1F2937', // 中性色：深灰色
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.card-shadow {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.transition-custom {
transition: all 0.3s ease;
}
}
</style>
</head>
<body class="bg-gray-50 min-h-screen font-sans">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-md sticky top-0 z-50 transition-custom">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fa fa-users text-primary text-2xl"></i>
<h1 class="text-[clamp(1.2rem,3vw,1.8rem)] font-bold text-neutral">中国亲戚关系计算器</h1>
</div>
<button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 transition-custom">
<i class="fa fa-moon-o text-neutral"></i>
</button>
</div>
</header>
<!-- 主要内容 -->
<main class="container mx-auto px-4 py-8 max-w-5xl">
<!-- 介绍部分 -->
<section class="mb-10 text-center">
<h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral mb-4">轻松理清复杂的亲戚关系</h2>
<p class="text-gray-600 max-w-2xl mx-auto">
中国的亲属关系系统复杂而精细，这个工具可以帮助你计算各种亲属关系的正确称呼，
无论是过年走亲戚还是家庭聚会，都能让你准确称呼每一位亲人。
</p>
</section>
<!-- 计算器部分 -->
<section class="bg-white rounded-xl p-6 md:p-8 card-shadow mb-10 transform hover:scale-[1.01] transition-custom">
<div class="grid md:grid-cols-2 gap-8">
<!-- 左侧：输入区域 -->
<div>
<h3 class="text-xl font-semibold text-neutral mb-6 flex items-center">
<i class="fa fa-calculator text-primary mr-2"></i>关系设置
</h3>
<form id="relation-form" class="space-y-6">
<!-- 自己的性别 -->
<div>
<label class="block text-gray-700 font-medium mb-2">你的性别</label>
<div class="flex space-x-4">
<label class="inline-flex items-center cursor-pointer">
<input type="radio" name="my-gender" value="male" checked
class="form-radio text-primary h-5 w-5">
<span class="ml-2">男</span>
</label>
<label class="inline-flex items-center cursor-pointer">
<input type="radio" name="my-gender" value="female"
class="form-radio text-primary h-5 w-5">
<span class="ml-2">女</span>
</label>
</div>
</div>
<!-- 亲戚的性别 -->
<div>
<label class="block text-gray-700 font-medium mb-2">亲戚的性别</label>
<div class="flex space-x-4">
<label class="inline-flex items-center cursor-pointer">
<input type="radio" name="relative-gender" value="male" checked
class="form-radio text-primary h-5 w-5">
<span class="ml-2">男</span>
</label>
<label class="inline-flex items-center cursor-pointer">
<input type="radio" name="relative-gender" value="female"
class="form-radio text-primary h-5 w-5">
<span class="ml-2">女</span>
</label>
</div>
</div>
<!-- 亲戚与自己的关系路径 -->
<div>
<label class="block text-gray-700 font-medium mb-2">关系路径</label>
<div id="relation-path-container" class="space-y-4">
<div class="relation-step flex items-center space-x-2">
<select class="relation-select bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary focus:border-primary p-2.5 flex-grow">
<option value="">选择关系...</option>
<option value="father">父亲</option>
<option value="mother">母亲</option>
<option value="brother">兄弟</option>
<option value="sister">姐妹</option>
<option value="husband">丈夫</option>
<option value="wife">妻子</option>
<option value="son">儿子</option>
<option value="daughter">女儿</option>
<option value="grandfather_p">祖父（父亲的父亲）</option>
<option value="grandmother_p">祖母（父亲的母亲）</option>
<option value="grandfather_m">外祖父（母亲的父亲）</option>
<option value="grandmother_m">外祖母（母亲的母亲）</option>
<option value="uncle_father">伯父/叔父（父亲的兄弟）</option>
<option value="aunt_father">姑母（父亲的姐妹）</option>
.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0