tailwind布局实现手机端简洁车险方案多家智能报价ui效果代码
代码语言：html
所属分类：布局界面
代码描述：tailwind布局实现手机端简洁车险方案多家智能报价ui效果代码
代码标签： tailwind 布局 手机端 简洁 车险 方案 多家 智能 报价 ui
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>车险方案报价</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<!-- Tailwind 配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1E40AF', // 深蓝主色调，体现专业可靠
secondary: '#3B82F6', // 蓝色辅助色
success: '#10B981', // 成功色
warning: '#F59E0B', // 警告色
neutral: '#F3F4F6', // 背景色
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.insurance-card {
@apply bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300;
}
.insurance-card:hover {
@apply shadow-lg transform -translate-y-1;
}
.btn-primary {
@apply bg-primary text-white py-3 px-6 rounded-lg font-medium transition-all duration-300 active:scale-95;
}
.toggle-switch:checked + .toggle-slider {
@apply bg-success;
}
.toggle-switch:checked + .toggle-slider:before {
@apply transform translate-x-5;
}
}
</style>
</head>
<body class="bg-gray-50 font-sans text-gray-800 min-h-screen">
<!-- 顶部导航 -->
<header class="bg-primary text-white shadow-md fixed top-0 left-0 right-0 z-50">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<button class="text-white focus:outline-none">
<i class="fa fa-arrow-left text-xl"></i>
</button>
<h1 class="text-xl font-bold">车险方案报价</h1>
<button class="text-white focus:outline-none">
<i class="fa fa-info-circle text-xl"></i>
</button>
</div>
</header>
<!-- 主内容区 -->
<main class="container mx-auto px-4 pt-24 pb-20">
<!-- 车辆信息卡片 -->
<div class="insurance-card mb-6 p-5">
<h2 class="text-lg font-bold mb-4 flex items-center">
<i class="fa fa-car text-primary mr-2"></i>车辆信息
</h2>
<div class="grid grid-cols-2 gap-3 text-sm">
<div>
<p class="text-gray-500">车牌号</p>
<p class="font-medium">京A·12345</p>
</div>
<div>
<p class="text-gray-500">车辆类型</p>
<p class="font-medium">小型轿车</p>
</div>
<div>
<p class="text-gray-500">购置年份</p>
<p class="font-medium">2022年</p>
</div>
<div>
<p class="text-gray-500">使用性质</p>
<p class="font-medium">非营运</p>
</div>
</div>
</div>
<!-- 险种选择区域 -->
<div class="insurance-card mb-6 overflow-hidden">
<div class="bg-primary/10 px-5 py-3 border-b border-gray-100">
<h2 class="text-lg font-bold flex items-center">
<i class="fa fa-shield text-primary mr-2"></i>险种选择
</h2>
</div>
<!-- 交强险 -->
<div class="p-5 border-b border-gray-100">
<div class="flex justify-between items-center mb-2">
<div>
<h3 class="font-bold">交强险</h3>
&l.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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