218 lines
9.3 KiB
HTML
218 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>B 类能力实测对照页</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: '#0052d9',
|
||
'primary-light': '#ecf2fe',
|
||
success: '#00a870',
|
||
warning: '#ed7b2f',
|
||
error: '#e34d59',
|
||
'gray-1': '#f3f3f3',
|
||
'gray-7': '#8b8b8b',
|
||
'gray-9': '#5e5e5e',
|
||
'gray-13': '#242424',
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
@keyframes pulse-soft { 0%,100%{opacity:1} 50%{opacity:.5} }
|
||
@keyframes float-y { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
|
||
.anim-pulse { animation: pulse-soft 2s ease-in-out infinite; }
|
||
.anim-float { animation: float-y 3s ease-in-out infinite; }
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-1 text-gray-13 pb-8">
|
||
|
||
<!-- ===== 顶栏 sticky ===== -->
|
||
<div class="bg-white px-4 py-3 text-lg font-semibold sticky top-0 z-50 shadow-sm">
|
||
B 类能力实测（H5 端）
|
||
</div>
|
||
|
||
<!-- ===== 1. Grid 布局 ===== -->
|
||
<section class="mx-4 mt-4">
|
||
<p class="text-sm font-semibold mb-2">1. Grid 布局</p>
|
||
<div class="bg-white rounded-lg p-3">
|
||
<p class="text-xs text-gray-7 mb-1">grid-cols-2</p>
|
||
<div class="grid grid-cols-2 gap-2 mb-3">
|
||
<div class="bg-primary-light rounded-lg p-3 text-center text-sm">A</div>
|
||
<div class="bg-primary-light rounded-lg p-3 text-center text-sm">B</div>
|
||
</div>
|
||
<p class="text-xs text-gray-7 mb-1">grid-cols-3</p>
|
||
<div class="grid grid-cols-3 gap-2 mb-3">
|
||
<div class="bg-primary-light rounded-lg p-2 text-center text-xs">1</div>
|
||
<div class="bg-primary-light rounded-lg p-2 text-center text-xs">2</div>
|
||
<div class="bg-primary-light rounded-lg p-2 text-center text-xs">3</div>
|
||
</div>
|
||
<p class="text-xs text-gray-7 mb-1">grid-cols-4</p>
|
||
<div class="grid grid-cols-4 gap-2">
|
||
<div class="bg-primary-light rounded-lg p-2 text-center text-xs">甲</div>
|
||
<div class="bg-primary-light rounded-lg p-2 text-center text-xs">乙</div>
|
||
<div class="bg-primary-light rounded-lg p-2 text-center text-xs">丙</div>
|
||
<div class="bg-primary-light rounded-lg p-2 text-center text-xs">丁</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 2. Sticky 定位 ===== -->
|
||
<section class="mx-4 mt-4">
|
||
<p class="text-sm font-semibold mb-2">2. Sticky（需滚动观察）</p>
|
||
<div class="bg-white rounded-lg overflow-hidden">
|
||
<div class="sticky top-[52px] z-40 bg-primary text-white text-center py-2 text-sm">
|
||
sticky 元素 top-52px
|
||
</div>
|
||
<div class="p-3">
|
||
<div class="h-[160px] bg-gray-1 rounded-lg flex items-center justify-center text-xs text-gray-7">
|
||
占位区域
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 3. line-clamp ===== -->
|
||
<section class="mx-4 mt-4">
|
||
<p class="text-sm font-semibold mb-2">3. line-clamp 多行截断</p>
|
||
<div class="bg-white rounded-lg p-3">
|
||
<p class="text-xs text-gray-7 mb-1">line-clamp-2</p>
|
||
<p class="text-sm line-clamp-2 mb-3">这是一段很长的文本用于测试多行截断效果。微信小程序中 -webkit-line-clamp 属于条件能力，需要配合 display:-webkit-box 和 -webkit-box-orient:vertical 使用。在不同基础库版本上表现可能不一致，需要真机验证确认。</p>
|
||
<p class="text-xs text-gray-7 mb-1">line-clamp-3</p>
|
||
<p class="text-sm line-clamp-3">这是另一段很长的文本用于测试三行截断。第一行内容开始。第二行内容继续延伸到这里。第三行内容到这里应该被截断了。如果你能看到第四行的内容说明 line-clamp-3 没有生效。这段文字需要足够长才能触发三行截断的效果所以多写一些。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 4. vh 单位 ===== -->
|
||
<section class="mx-4 mt-4">
|
||
<p class="text-sm font-semibold mb-2">4. vh 单位</p>
|
||
<div class="bg-white rounded-lg p-3">
|
||
<div class="min-h-[25vh] bg-primary/5 rounded-lg flex items-center justify-center">
|
||
<span class="text-sm text-primary">min-height: 25vh</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 5. backdrop-filter ===== -->
|
||
<section class="mx-4 mt-4">
|
||
<p class="text-sm font-semibold mb-2">5. backdrop-filter: blur</p>
|
||
<div class="bg-white rounded-lg p-3">
|
||
<div class="relative h-[100px] rounded-lg overflow-hidden">
|
||
<div class="absolute inset-0 bg-gradient-to-br from-primary to-success"></div>
|
||
<div class="absolute inset-0 flex items-center justify-center">
|
||
<div class="bg-white/20 backdrop-blur-md rounded-lg px-6 py-3">
|
||
<span class="text-white text-sm font-medium">毛玻璃效果</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 6. space-y ===== -->
|
||
<section class="mx-4 mt-4">
|
||
<p class="text-sm font-semibold mb-2">6. space-y 子元素间距</p>
|
||
<div class="bg-white rounded-lg p-3">
|
||
<p class="text-xs text-gray-7 mb-1">space-y-2 (8px)</p>
|
||
<div class="space-y-2 mb-3">
|
||
<div class="bg-primary-light rounded p-2 text-sm">项目 A</div>
|
||
<div class="bg-primary-light rounded p-2 text-sm">项目 B</div>
|
||
<div class="bg-primary-light rounded p-2 text-sm">项目 C</div>
|
||
</div>
|
||
<p class="text-xs text-gray-7 mb-1">space-y-4 (16px)</p>
|
||
<div class="space-y-4">
|
||
<div class="bg-primary-light rounded p-2 text-sm">项目 X</div>
|
||
<div class="bg-primary-light rounded p-2 text-sm">项目 Y</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 7. gap-x / gap-y ===== -->
|
||
<section class="mx-4 mt-4">
|
||
<p class="text-sm font-semibold mb-2">7. gap-x / gap-y 方向性间距</p>
|
||
<div class="bg-white rounded-lg p-3">
|
||
<p class="text-xs text-gray-7 mb-1">flex-wrap + gap-x-3 gap-y-2</p>
|
||
<div class="flex flex-wrap gap-x-3 gap-y-2">
|
||
<span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">标签一</span>
|
||
<span class="bg-success/10 text-success text-xs px-3 py-1 rounded-full">标签二</span>
|
||
<span class="bg-warning/10 text-warning text-xs px-3 py-1 rounded-full">标签三</span>
|
||
<span class="bg-error/10 text-error text-xs px-3 py-1 rounded-full">标签四</span>
|
||
<span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">标签五</span>
|
||
<span class="bg-success/10 text-success text-xs px-3 py-1 rounded-full">标签六</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 8. CSS transition ===== -->
|
||
<section class="mx-4 mt-4">
|
||
<p class="text-sm font-semibold mb-2">8. CSS transition</p>
|
||
<div class="bg-white rounded-lg p-3">
|
||
<p class="text-xs text-gray-7 mb-2">点击按钮切换颜色（transition-colors 300ms）</p>
|
||
<button id="btn-transition" class="bg-primary text-white text-sm px-4 py-2 rounded-lg transition-colors duration-300" onclick="this.classList.toggle('bg-success')">
|
||
点我变色
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 9. CSS animation ===== -->
|
||
<section class="mx-4 mt-4">
|
||
<p class="text-sm font-semibold mb-2">9. CSS @keyframes 动画</p>
|
||
<div class="bg-white rounded-lg p-3 flex gap-6 items-center">
|
||
<div class="flex flex-col items-center gap-1">
|
||
<div class="w-10 h-10 rounded-full bg-primary anim-pulse"></div>
|
||
<span class="text-xs text-gray-7">pulse</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-1">
|
||
<div class="w-10 h-10 rounded-full bg-success anim-float"></div>
|
||
<span class="text-xs text-gray-7">float</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 10. overflow-x 横向滚动 ===== -->
|
||
<section class="mx-4 mt-4">
|
||
<p class="text-sm font-semibold mb-2">10. overflow-x-auto 横向滚动</p>
|
||
<div class="bg-white rounded-lg p-3">
|
||
<div class="overflow-x-auto">
|
||
<div class="flex gap-3" style="width: max-content;">
|
||
<div class="w-[120px] h-[80px] bg-primary/10 rounded-lg flex items-center justify-center text-xs text-primary shrink-0">卡片 1</div>
|
||
<div class="w-[120px] h-[80px] bg-success/10 rounded-lg flex items-center justify-center text-xs text-success shrink-0">卡片 2</div>
|
||
<div class="w-[120px] h-[80px] bg-warning/10 rounded-lg flex items-center justify-center text-xs text-warning shrink-0">卡片 3</div>
|
||
<div class="w-[120px] h-[80px] bg-error/10 rounded-lg flex items-center justify-center text-xs text-error shrink-0">卡片 4</div>
|
||
<div class="w-[120px] h-[80px] bg-primary/10 rounded-lg flex items-center justify-center text-xs text-primary shrink-0">卡片 5</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 11. divide-y 分割线 ===== -->
|
||
<section class="mx-4 mt-4">
|
||
<p class="text-sm font-semibold mb-2">11. divide-y 分割线</p>
|
||
<div class="bg-white rounded-lg overflow-hidden">
|
||
<div class="divide-y divide-gray-200">
|
||
<div class="px-3 py-3 text-sm">列表项 1</div>
|
||
<div class="px-3 py-3 text-sm">列表项 2</div>
|
||
<div class="px-3 py-3 text-sm">列表项 3</div>
|
||
<div class="px-3 py-3 text-sm">列表项 4</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 12. env(safe-area-inset-bottom) ===== -->
|
||
<section class="mx-4 mt-4 mb-4">
|
||
<p class="text-sm font-semibold mb-2">12. safe-area-inset-bottom</p>
|
||
<div class="bg-white rounded-lg p-3">
|
||
<div class="bg-primary text-white text-center py-3 rounded-lg text-sm" style="padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));">
|
||
底部按钮（含安全区补偿）
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</body>
|
||
</html>
|