4 changed files with 1407 additions and 4 deletions
@ -0,0 +1,656 @@ |
|||
<!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> |
|||
<style> |
|||
* { margin: 0; padding: 0; box-sizing: border-box; } |
|||
body { |
|||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; |
|||
background: #f0f6ff; |
|||
max-width: 430px; |
|||
margin: 0 auto; |
|||
min-height: 100vh; |
|||
position: relative; |
|||
padding-bottom: 70px; |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
/* ===== 顶部蓝色背景区域 ===== */ |
|||
.header-bg { |
|||
background: linear-gradient(180deg, #2b7de9 0%, #5ba3f5 40%, #a0cdf8 70%, #dceefb 90%, #eef5ff 100%); |
|||
padding: 40px 20px 30px; |
|||
text-align: center; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
/* 城市天际线装饰 */ |
|||
.header-bg::after { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
height: 80px; |
|||
background: linear-gradient(180deg, transparent, rgba(255,255,255,0.3)); |
|||
} |
|||
.cityscape { |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
height: 120px; |
|||
opacity: 0.15; |
|||
background: |
|||
linear-gradient(0deg, rgba(255,255,255,0.5) 0%, transparent 100%); |
|||
} |
|||
.cityscape::before { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 5%; |
|||
width: 8%; |
|||
height: 60px; |
|||
background: rgba(255,255,255,0.4); |
|||
border-radius: 2px 2px 0 0; |
|||
} |
|||
.cityscape::after { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 15%; |
|||
width: 6%; |
|||
height: 100px; |
|||
background: rgba(255,255,255,0.3); |
|||
border-radius: 2px 2px 0 0; |
|||
box-shadow: |
|||
-30px 20px 0 rgba(255,255,255,0.25), |
|||
-55px 35px 0 rgba(255,255,255,0.2), |
|||
30px 40px 0 rgba(255,255,255,0.2), |
|||
60px 15px 0 rgba(255,255,255,0.15); |
|||
} |
|||
|
|||
/* 盾牌图标 */ |
|||
.shield-wrapper { |
|||
position: relative; |
|||
z-index: 1; |
|||
margin-bottom: 8px; |
|||
} |
|||
.shield { |
|||
display: inline-block; |
|||
width: 90px; |
|||
height: 100px; |
|||
position: relative; |
|||
} |
|||
.shield-icon { |
|||
width: 90px; |
|||
height: 100px; |
|||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); |
|||
clip-path: polygon(50% 0%, 100% 20%, 100% 65%, 50% 100%, 0% 65%, 0% 20%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
color: white; |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
letter-spacing: 4px; |
|||
text-shadow: 0 1px 3px rgba(0,0,0,0.2); |
|||
box-shadow: 0 4px 15px rgba(29,78,216,0.4); |
|||
} |
|||
.shield-icon::before { |
|||
content: ''; |
|||
position: absolute; |
|||
inset: 3px; |
|||
background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%); |
|||
clip-path: polygon(50% 2%, 98% 21%, 98% 64%, 50% 98%, 2% 64%, 2% 21%); |
|||
z-index: -1; |
|||
} |
|||
.shield-text { |
|||
line-height: 1.3; |
|||
margin-top: 12px; |
|||
} |
|||
|
|||
/* QR码装饰 */ |
|||
.qr-decoration { |
|||
width: 55px; |
|||
height: 55px; |
|||
margin: -5px auto 6px; |
|||
position: relative; |
|||
z-index: 1; |
|||
opacity: 0.6; |
|||
display: grid; |
|||
grid-template-columns: repeat(5, 1fr); |
|||
grid-template-rows: repeat(5, 1fr); |
|||
gap: 2px; |
|||
} |
|||
.qr-decoration span { |
|||
background: rgba(255,255,255,0.7); |
|||
border-radius: 1px; |
|||
} |
|||
.qr-decoration span:nth-child(odd) { |
|||
background: rgba(255,255,255,0.4); |
|||
} |
|||
|
|||
/* 轨道线装饰 */ |
|||
.orbit-line { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
width: 200px; |
|||
height: 120px; |
|||
border: 1.5px solid rgba(255,255,255,0.2); |
|||
border-radius: 50%; |
|||
z-index: 0; |
|||
} |
|||
.orbit-line:nth-child(2) { |
|||
width: 260px; |
|||
height: 155px; |
|||
border-color: rgba(255,255,255,0.12); |
|||
} |
|||
|
|||
/* 企业端标签 */ |
|||
.enterprise-tag { |
|||
display: inline-block; |
|||
background: linear-gradient(135deg, #2563eb, #1d4ed8); |
|||
color: white; |
|||
padding: 5px 22px; |
|||
border-radius: 4px; |
|||
font-size: 15px; |
|||
font-weight: 500; |
|||
letter-spacing: 2px; |
|||
margin: 6px 0 12px; |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
|
|||
/* 标语 */ |
|||
.slogan { |
|||
position: relative; |
|||
z-index: 1; |
|||
font-size: 22px; |
|||
font-weight: bold; |
|||
letter-spacing: 3px; |
|||
} |
|||
.slogan .white { |
|||
color: #ffffff; |
|||
text-shadow: 0 1px 4px rgba(0,0,0,0.15); |
|||
} |
|||
.slogan .gold { |
|||
color: #fbbf24; |
|||
text-shadow: 0 1px 4px rgba(0,0,0,0.15); |
|||
} |
|||
|
|||
/* ===== 内容区域 ===== */ |
|||
.content { |
|||
padding: 0 16px; |
|||
margin-top: -10px; |
|||
position: relative; |
|||
z-index: 2; |
|||
} |
|||
|
|||
/* 搜索栏 */ |
|||
.search-bar { |
|||
background: rgba(255, 255, 255, 0.85); |
|||
backdrop-filter: blur(10px); |
|||
border-radius: 25px; |
|||
padding: 14px 20px; |
|||
margin-bottom: 14px; |
|||
display: flex; |
|||
align-items: center; |
|||
box-shadow: 0 2px 12px rgba(0,0,0,0.06); |
|||
border: 1px solid rgba(255,255,255,0.9); |
|||
} |
|||
.search-bar .search-icon { |
|||
width: 18px; |
|||
height: 18px; |
|||
margin-right: 10px; |
|||
color: #9ca3af; |
|||
} |
|||
.search-bar input { |
|||
border: none; |
|||
background: transparent; |
|||
font-size: 14px; |
|||
color: #999; |
|||
outline: none; |
|||
width: 100%; |
|||
} |
|||
|
|||
/* 轮播图 */ |
|||
.banner-card { |
|||
border-radius: 16px; |
|||
overflow: hidden; |
|||
margin-bottom: 14px; |
|||
position: relative; |
|||
box-shadow: 0 2px 12px rgba(0,0,0,0.06); |
|||
} |
|||
.banner-inner { |
|||
width: 100%; |
|||
height: 180px; |
|||
background: linear-gradient(135deg, #c8e2f8 0%, #a0c8f0 30%, #7bb3e8 60%, #5a9de0 100%); |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
.banner-inner::before { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 20%; |
|||
right: -10%; |
|||
width: 70%; |
|||
height: 120%; |
|||
background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)); |
|||
transform: rotate(-15deg); |
|||
border-radius: 20px; |
|||
} |
|||
.banner-inner::after { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: 10%; |
|||
left: 10%; |
|||
width: 80%; |
|||
height: 60%; |
|||
background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.2), rgba(255,255,255,0.05)); |
|||
transform: skewX(-10deg); |
|||
border-radius: 10px; |
|||
} |
|||
|
|||
/* 轮播指示器 */ |
|||
.banner-dots { |
|||
position: absolute; |
|||
bottom: 12px; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
display: flex; |
|||
gap: 6px; |
|||
z-index: 1; |
|||
} |
|||
.banner-dots .dot { |
|||
width: 8px; |
|||
height: 8px; |
|||
border-radius: 4px; |
|||
background: rgba(255,255,255,0.5); |
|||
transition: all 0.3s; |
|||
} |
|||
.banner-dots .dot.active { |
|||
width: 20px; |
|||
background: rgba(255,255,255,0.9); |
|||
} |
|||
|
|||
/* 执法监督码卡片 */ |
|||
.supervision-card { |
|||
background: linear-gradient(135deg, #eaf3ff 0%, #d6eaff 50%, #c0dbf8 100%); |
|||
border-radius: 16px; |
|||
padding: 18px 20px; |
|||
margin-bottom: 14px; |
|||
position: relative; |
|||
overflow: hidden; |
|||
box-shadow: 0 2px 12px rgba(0,0,0,0.05); |
|||
} |
|||
.supervision-card h3 { |
|||
font-size: 17px; |
|||
color: #1a1a2e; |
|||
font-weight: 600; |
|||
margin-bottom: 12px; |
|||
} |
|||
.supervision-card .qr-icon-wrap { |
|||
display: flex; |
|||
align-items: flex-end; |
|||
justify-content: space-between; |
|||
} |
|||
.qr-main { |
|||
width: 100px; |
|||
height: 100px; |
|||
background: linear-gradient(135deg, #3b82f6, #2563eb); |
|||
border-radius: 16px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: relative; |
|||
box-shadow: 0 4px 15px rgba(37,99,235,0.3); |
|||
} |
|||
.qr-main .qr-grid { |
|||
width: 60px; |
|||
height: 60px; |
|||
display: grid; |
|||
grid-template-columns: repeat(5, 1fr); |
|||
grid-template-rows: repeat(5, 1fr); |
|||
gap: 3px; |
|||
} |
|||
.qr-grid span { |
|||
background: rgba(255,255,255,0.85); |
|||
border-radius: 2px; |
|||
} |
|||
.qr-grid span:nth-child(3n) { |
|||
background: rgba(255,255,255,0.4); |
|||
} |
|||
.qr-check { |
|||
position: absolute; |
|||
bottom: -4px; |
|||
right: -4px; |
|||
width: 32px; |
|||
height: 32px; |
|||
background: linear-gradient(135deg, #60a5fa, #3b82f6); |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border: 3px solid #eaf3ff; |
|||
} |
|||
.qr-check svg { |
|||
width: 16px; |
|||
height: 16px; |
|||
color: white; |
|||
} |
|||
.qr-small { |
|||
width: 65px; |
|||
height: 65px; |
|||
opacity: 0.35; |
|||
display: grid; |
|||
grid-template-columns: repeat(5, 1fr); |
|||
grid-template-rows: repeat(5, 1fr); |
|||
gap: 2px; |
|||
margin-right: 10px; |
|||
} |
|||
.qr-small span { |
|||
background: #6b7280; |
|||
border-radius: 1px; |
|||
} |
|||
.qr-small span:nth-child(even) { |
|||
background: #9ca3af; |
|||
} |
|||
/* 卡片背景装饰 */ |
|||
.supervision-card::after { |
|||
content: ''; |
|||
position: absolute; |
|||
top: -20px; |
|||
right: -20px; |
|||
width: 180px; |
|||
height: 180px; |
|||
background: radial-gradient(circle, rgba(59,130,246,0.08), transparent 70%); |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
/* 底部双卡片 */ |
|||
.card-row { |
|||
display: flex; |
|||
gap: 12px; |
|||
margin-bottom: 20px; |
|||
} |
|||
.info-card { |
|||
flex: 1; |
|||
background: linear-gradient(135deg, #eaf3ff 0%, #d6eaff 60%, #c8e0f8 100%); |
|||
border-radius: 16px; |
|||
padding: 18px 16px; |
|||
position: relative; |
|||
overflow: hidden; |
|||
min-height: 130px; |
|||
box-shadow: 0 2px 12px rgba(0,0,0,0.05); |
|||
} |
|||
.info-card h4 { |
|||
font-size: 15px; |
|||
color: #1a1a2e; |
|||
font-weight: 600; |
|||
margin-bottom: 14px; |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
.info-card .card-icon { |
|||
width: 52px; |
|||
height: 52px; |
|||
background: linear-gradient(135deg, #3b82f6, #2563eb); |
|||
border-radius: 14px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: relative; |
|||
box-shadow: 0 4px 12px rgba(37,99,235,0.25); |
|||
} |
|||
.info-card .card-icon svg { |
|||
width: 26px; |
|||
height: 26px; |
|||
color: white; |
|||
} |
|||
.card-icon-check { |
|||
position: absolute; |
|||
bottom: -3px; |
|||
right: -3px; |
|||
width: 22px; |
|||
height: 22px; |
|||
background: linear-gradient(135deg, #60a5fa, #3b82f6); |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border: 2px solid #eaf3ff; |
|||
} |
|||
.card-icon-check svg { |
|||
width: 11px; |
|||
height: 11px; |
|||
color: white; |
|||
} |
|||
/* 卡片右下角装饰图标 */ |
|||
.info-card .bg-icon { |
|||
position: absolute; |
|||
bottom: 8px; |
|||
right: 8px; |
|||
width: 50px; |
|||
height: 50px; |
|||
opacity: 0.15; |
|||
color: #6b7280; |
|||
} |
|||
|
|||
/* ===== 底部导航栏 ===== */ |
|||
.tab-bar { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
width: 100%; |
|||
max-width: 430px; |
|||
background: #ffffff; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
padding: 8px 0 12px; |
|||
box-shadow: 0 -2px 12px rgba(0,0,0,0.06); |
|||
z-index: 100; |
|||
border-top: 1px solid #f0f0f0; |
|||
} |
|||
.tab-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
gap: 3px; |
|||
cursor: pointer; |
|||
flex: 1; |
|||
} |
|||
.tab-item svg { |
|||
width: 24px; |
|||
height: 24px; |
|||
color: #9ca3af; |
|||
} |
|||
.tab-item span { |
|||
font-size: 11px; |
|||
color: #9ca3af; |
|||
} |
|||
.tab-item.active svg { color: #2563eb; } |
|||
.tab-item.active span { color: #2563eb; font-weight: 600; } |
|||
</style> |
|||
</head> |
|||
<body> |
|||
|
|||
<!-- 顶部蓝色背景区域 --> |
|||
<div class="header-bg"> |
|||
<div class="orbit-line"></div> |
|||
<div class="orbit-line"></div> |
|||
<div class="cityscape"></div> |
|||
|
|||
<!-- 盾牌图标 --> |
|||
<div class="shield-wrapper"> |
|||
<div class="shield"> |
|||
<div class="shield-icon"> |
|||
<div class="shield-text">执法<br>监督</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- QR码装饰 --> |
|||
<div class="qr-decoration"> |
|||
<span></span><span></span><span></span><span></span><span></span> |
|||
<span></span><span></span><span></span><span></span><span></span> |
|||
<span></span><span></span><span></span><span></span><span></span> |
|||
<span></span><span></span><span></span><span></span><span></span> |
|||
<span></span><span></span><span></span><span></span><span></span> |
|||
</div> |
|||
|
|||
<!-- 企业端标签 --> |
|||
<div class="enterprise-tag">企业端</div> |
|||
|
|||
<!-- 标语 --> |
|||
<div class="slogan"> |
|||
<span class="white">执法受监督</span> |
|||
<span class="gold">入企须扫码</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 内容区域 --> |
|||
<div class="content"> |
|||
<!-- 搜索栏 --> |
|||
<div class="search-bar"> |
|||
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|||
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/> |
|||
</svg> |
|||
<input type="text" placeholder="搜索..." readonly> |
|||
</div> |
|||
|
|||
<!-- 轮播图 --> |
|||
<div class="banner-card"> |
|||
<div class="banner-inner"></div> |
|||
<div class="banner-dots"> |
|||
<div class="dot active"></div> |
|||
<div class="dot"></div> |
|||
<div class="dot"></div> |
|||
<div class="dot"></div> |
|||
<div class="dot"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 执法监督码卡片 --> |
|||
<div class="supervision-card"> |
|||
<h3>执法监督码</h3> |
|||
<div class="qr-icon-wrap"> |
|||
<!-- 左侧大QR图标 --> |
|||
<div class="qr-main"> |
|||
<div class="qr-grid"> |
|||
<span></span><span></span><span></span><span></span><span></span> |
|||
<span></span><span></span><span></span><span></span><span></span> |
|||
<span></span><span></span><span></span><span></span><span></span> |
|||
<span></span><span></span><span></span><span></span><span></span> |
|||
<span></span><span></span><span></span><span></span><span></span> |
|||
</div> |
|||
<div class="qr-check"> |
|||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
|||
<polyline points="20 6 9 17 4 12"/> |
|||
</svg> |
|||
</div> |
|||
</div> |
|||
<!-- 右侧小QR装饰 --> |
|||
<div class="qr-small"> |
|||
<span></span><span></span><span></span><span></span><span></span> |
|||
<span></span><span></span><span></span><span></span><span></span> |
|||
<span></span><span></span><span></span><span></span><span></span> |
|||
<span></span><span></span><span></span><span></span><span></span> |
|||
<span></span><span></span><span></span><span></span><span></span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 双卡片行 --> |
|||
<div class="card-row"> |
|||
<!-- 历史执法信息 --> |
|||
<div class="info-card"> |
|||
<h4>历史执法信息</h4> |
|||
<div class="card-icon"> |
|||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|||
<rect x="3" y="3" width="18" height="18" rx="2"/> |
|||
<line x1="7" y1="8" x2="17" y2="8"/> |
|||
<line x1="7" y1="12" x2="14" y2="12"/> |
|||
<line x1="7" y1="16" x2="11" y2="16"/> |
|||
</svg> |
|||
<div class="card-icon-check"> |
|||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
|||
<polyline points="20 6 9 17 4 12"/> |
|||
</svg> |
|||
</div> |
|||
</div> |
|||
<!-- 放大镜装饰 --> |
|||
<svg class="bg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> |
|||
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/> |
|||
</svg> |
|||
</div> |
|||
|
|||
<!-- 执法案件信息 --> |
|||
<div class="info-card"> |
|||
<h4>执法案件信息</h4> |
|||
<div class="card-icon"> |
|||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|||
<path d="M4 4h16v16H4z" rx="2"/> |
|||
<path d="M8 2v4M16 2v4"/> |
|||
<line x1="7" y1="10" x2="17" y2="10"/> |
|||
<line x1="7" y1="14" x2="13" y2="14"/> |
|||
</svg> |
|||
<div class="card-icon-check"> |
|||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
|||
<polyline points="20 6 9 17 4 12"/> |
|||
</svg> |
|||
</div> |
|||
</div> |
|||
<!-- 星星装饰 --> |
|||
<svg class="bg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> |
|||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/> |
|||
</svg> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 底部导航栏 --> |
|||
<div class="tab-bar"> |
|||
<!-- 首页 --> |
|||
<div class="tab-item active"> |
|||
<svg viewBox="0 0 24 24" fill="currentColor"> |
|||
<path d="M12 3l9 8v10a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-5h-4v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V11l9-8z"/> |
|||
</svg> |
|||
<span>首页</span> |
|||
</div> |
|||
<!-- 法律查询 --> |
|||
<div class="tab-item"> |
|||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|||
<rect x="4" y="2" width="16" height="20" rx="2"/> |
|||
<line x1="8" y1="7" x2="16" y2="7"/> |
|||
<line x1="8" y1="11" x2="16" y2="11"/> |
|||
<line x1="8" y1="15" x2="13" y2="15"/> |
|||
</svg> |
|||
<span>法律查询</span> |
|||
</div> |
|||
<!-- 消息 --> |
|||
<div class="tab-item"> |
|||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/> |
|||
<path d="M13.73 21a2 2 0 0 1-3.46 0"/> |
|||
</svg> |
|||
<span>消息</span> |
|||
</div> |
|||
<!-- 我的 --> |
|||
<div class="tab-item"> |
|||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/> |
|||
<circle cx="12" cy="7" r="4"/> |
|||
</svg> |
|||
<span>我的</span> |
|||
</div> |
|||
</div> |
|||
|
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,747 @@ |
|||
<template> |
|||
<div class="home app_content"> |
|||
<!-- 顶部蓝色背景区域 --> |
|||
<div class="header-bg"> |
|||
<div class="orbit-line"></div> |
|||
<div class="orbit-line"></div> |
|||
<div class="cityscape"></div> |
|||
|
|||
<!-- 盾牌图标 --> |
|||
<div class="shield-wrapper"> |
|||
<div class="shield"> |
|||
<div class="shield-icon"> |
|||
<div class="shield-text">执法<br>监督</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 企业端标签 --> |
|||
<div class="enterprise-tag">企业端</div> |
|||
|
|||
<!-- 标语 --> |
|||
<div class="slogan"> |
|||
<span class="white-text">执法受监督</span> |
|||
<span class="gold-text">入企须扫码</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 内容区域 --> |
|||
<div class="content-area"> |
|||
<!-- 通知栏 --> |
|||
<div class="notice-bar"> |
|||
<svg class="notice-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/> |
|||
<path d="M13.73 21a2 2 0 0 1-3.46 0"/> |
|||
</svg> |
|||
<span class="notice-text">暂无新通知</span> |
|||
</div> |
|||
|
|||
<!-- 轮播图 --> |
|||
<div class="banner-card"> |
|||
<div class="banner-inner"> |
|||
<div class="logobox-title" style="position: absolute;top: 10px;left: 50%;transform: translateX(-50%);background: #0d8ddb;z-index: 100;padding: 10px 20px;color: #fff;border-radius: 8px;" @click="toDemoList">demo-list</div> |
|||
</div> |
|||
<div class="banner-dots"> |
|||
<div class="dot active"></div> |
|||
<div class="dot"></div> |
|||
<div class="dot"></div> |
|||
<div class="dot"></div> |
|||
<div class="dot"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 执法监督码卡片 --> |
|||
<div class="supervision-card" @click="showEnterpriseQRCode"> |
|||
<h3>执法监督码</h3> |
|||
<div class="qr-icon-wrap"> |
|||
<!-- 左侧大QR图标 --> |
|||
<div class="qr-main"> |
|||
<div class="qr-grid"> |
|||
<span v-for="i in 25" :key="i"></span> |
|||
</div> |
|||
<div class="qr-check"> |
|||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
|||
<polyline points="20 6 9 17 4 12"/> |
|||
</svg> |
|||
</div> |
|||
</div> |
|||
<!-- 右侧小QR装饰 --> |
|||
<div class="qr-small"> |
|||
<span v-for="i in 25" :key="i"></span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 双卡片行 --> |
|||
<div class="card-row"> |
|||
<!-- 历史执法信息 --> |
|||
<div class="info-card" @click="toRegistrationListView"> |
|||
<h4>历史执法信息</h4> |
|||
<div class="card-icon"> |
|||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|||
<rect x="3" y="3" width="18" height="18" rx="2"/> |
|||
<line x1="7" y1="8" x2="17" y2="8"/> |
|||
<line x1="7" y1="12" x2="14" y2="12"/> |
|||
<line x1="7" y1="16" x2="11" y2="16"/> |
|||
</svg> |
|||
<div class="card-icon-check"> |
|||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
|||
<polyline points="20 6 9 17 4 12"/> |
|||
</svg> |
|||
</div> |
|||
</div> |
|||
<!-- 放大镜装饰 --> |
|||
<svg class="bg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> |
|||
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/> |
|||
</svg> |
|||
</div> |
|||
|
|||
<!-- 执法案件信息 --> |
|||
<div class="info-card" @click="toComplaintView"> |
|||
<h4>执法案件信息</h4> |
|||
<div class="card-icon"> |
|||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|||
<path d="M4 4h16v16H4z" rx="2"/> |
|||
<path d="M8 2v4M16 2v4"/> |
|||
<line x1="7" y1="10" x2="17" y2="10"/> |
|||
<line x1="7" y1="14" x2="13" y2="14"/> |
|||
</svg> |
|||
<div class="card-icon-check"> |
|||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
|||
<polyline points="20 6 9 17 4 12"/> |
|||
</svg> |
|||
</div> |
|||
</div> |
|||
<!-- 星星装饰 --> |
|||
<svg class="bg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> |
|||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/> |
|||
</svg> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 底部导航栏 --> |
|||
<div class="footer_body"> |
|||
<footer-nav></footer-nav> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup name="enterpriseHome"> |
|||
import * as w6s from 'szient-js-sdk'; |
|||
import sha1 from 'crypto-js/sha1'; |
|||
import {getEnterpriseMerchantAuthorization, getSiqLoginAuth, siqCode} from '../../api/enterprise'; |
|||
import 'vant/es/toast/style'; |
|||
|
|||
const {useCommon} = $globalStore; |
|||
const router = useRouter(); |
|||
const isLoading = ref(true); |
|||
let freshMap = reactive({ |
|||
refreshLoad: false, // 是否刷新 |
|||
listLoading: false, // 是否加载中 |
|||
listFinished: false, // 是否加载完成标识 |
|||
}); |
|||
|
|||
const showEnterpriseQRCode = async () => { |
|||
router.push({ |
|||
path: "/enterprise/qrCode", |
|||
query: { |
|||
enterpriseNumber: useCommon.enterpriseNumber, |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
const toRegistrationListView = async () => { |
|||
router.push({ |
|||
path: "/enterprise/registrationList", |
|||
}); |
|||
} |
|||
const toDemoList = () => { |
|||
router.push({ path: "/demo/enfDemoList" }); |
|||
}; |
|||
|
|||
const toComplaintView = async () => { |
|||
router.push({ |
|||
path: "/enterprise/complaint", |
|||
query: { |
|||
comOrOpi: 0, |
|||
isSelect: true |
|||
} |
|||
}); |
|||
} |
|||
|
|||
//下拉刷新 |
|||
const onRefresh = () => { |
|||
freshMap.listFinished = false; |
|||
freshMap.listLoading = true; |
|||
freshMap.refreshLoad = true; |
|||
}; |
|||
|
|||
// 触底加载 |
|||
const onLoad = () => { |
|||
}; |
|||
|
|||
const generateRandomNumber = () => { |
|||
const min = 100000; |
|||
const max = 999999; |
|||
const randomNum = (Math.floor(Math.random() * (max - min + 1)) + min); |
|||
return randomNum.toString().padStart(6, '0'); |
|||
} |
|||
|
|||
const getEnterpriseMerchant = (enterpriseNum, phoneNumber) => { |
|||
getEnterpriseMerchantAuthorization({enterpriseNumber: enterpriseNum, merchantTel: phoneNumber}, success => { |
|||
if (success.data != null && success.data.length > 0) { |
|||
useCommon.SET_USER_ENTERPRISE_NUMBER(success.data[0].enterpriseNumber); |
|||
} |
|||
}, error => { |
|||
}) |
|||
} |
|||
|
|||
// 判断用户信息是否已完整(企业端登录后已写入store) |
|||
const hasUserInfo = () => { |
|||
return useCommon.userId |
|||
&& useCommon.enterpriseName |
|||
&& useCommon.enterpriseNumber |
|||
&& useCommon.enterpriseId; |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
console.log(useCommon.firstLoad); |
|||
console.log(useCommon); |
|||
isLoading.value = useCommon.firstLoad; |
|||
|
|||
// 如果store中已存在完整的用户和企业信息,则跳过w6s鉴权 |
|||
if (hasUserInfo()) { |
|||
console.log("用户信息已存在,跳过w6s鉴权"); |
|||
isLoading.value = false; |
|||
getEnterpriseMerchant(useCommon.enterpriseNumber.toString(), useCommon.phonenumber.toString()); |
|||
useCommon.SET_IS_FIRST_LOAD(false); |
|||
return; |
|||
} |
|||
|
|||
siqCode(null, success => { |
|||
let access_key = ""; |
|||
let access_secret = ""; |
|||
if (success.success) { |
|||
access_key = success.data.accessKey; |
|||
access_secret = success.data.accessSecret; |
|||
} |
|||
|
|||
const nonce = generateRandomNumber(); |
|||
const timestamp = `${Date.now()}`; |
|||
|
|||
const str = [access_secret, nonce, timestamp] |
|||
.sort() |
|||
.reduce((str, item) => str += item, ''); |
|||
|
|||
// 最终还需要转成全小写 |
|||
const signature = sha1(str).toString().toLowerCase(); |
|||
|
|||
w6s.config({ |
|||
access_key: access_key, |
|||
nonce: nonce, |
|||
timestamp: timestamp, |
|||
signature: signature, |
|||
}).then((res) => { |
|||
console.log("鉴权", res); |
|||
}).catch((err) => { |
|||
console.log("鉴权", err); |
|||
}); |
|||
|
|||
w6s.ready(() => { |
|||
w6s.header.setTitle('深圳市行政执法监督码'); |
|||
w6s.szient.getAuthCode({ |
|||
success: function (res) { |
|||
console.log(res) |
|||
console.log("认证", res); |
|||
console.log("code: " + res.result.result.code); |
|||
getSiqLoginAuth({code: res.result.result.code}, success => { |
|||
useCommon.SET_USER_PHONENUMBER(success.data.phonenumber.toString()); |
|||
useCommon.SET_USER_ID(success.data.userId); |
|||
useCommon.SET_USER_ENTERPRISE_NUMBER(success.data.enterpriseNumber); |
|||
console.log(success.data); |
|||
useCommon.SET_TOKEN(success.data.token); |
|||
console.log(useCommon.userId); |
|||
console.log(useCommon.firstLoad); |
|||
if (useCommon.firstLoad) { |
|||
isLoading.value = false; |
|||
} |
|||
//设置已经初始化 |
|||
useCommon.SET_IS_FIRST_LOAD(false) |
|||
getEnterpriseMerchant(success.data.enterpriseNumber.toString(), success.data.phonenumber.toString()); |
|||
if (useCommon.firstLoad) { |
|||
isLoading.value = false; |
|||
} |
|||
}, error => { |
|||
console.log("error : " + error) |
|||
}) |
|||
}, |
|||
fail: function (err) { |
|||
console.log(err) |
|||
console.log("认证", err); |
|||
}, |
|||
}); |
|||
}); |
|||
|
|||
}); |
|||
const {VITE_BASE_URL, access_key, access_secret} = import.meta.env; |
|||
console.log(VITE_BASE_URL); |
|||
const apiUrl = ref(import.meta.env.accessKey); |
|||
console.log(access_key); |
|||
console.log(access_secret); |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.home { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
background: #f0f6ff; |
|||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; |
|||
} |
|||
|
|||
/* ===== 顶部蓝色背景区域 ===== */ |
|||
.header-bg { |
|||
background: linear-gradient(180deg, #2b7de9 0%, #5ba3f5 40%, #a0cdf8 70%, #dceefb 90%, #eef5ff 100%); |
|||
padding: 20px 20px 20px; |
|||
text-align: center; |
|||
position: relative; |
|||
overflow: hidden; |
|||
flex-shrink: 0; |
|||
|
|||
&::after { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
height: 80px; |
|||
background: linear-gradient(180deg, transparent, rgba(255,255,255,0.3)); |
|||
} |
|||
} |
|||
|
|||
/* 城市天际线装饰 */ |
|||
.cityscape { |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
height: 120px; |
|||
opacity: 0.15; |
|||
background: linear-gradient(0deg, rgba(255,255,255,0.5) 0%, transparent 100%); |
|||
|
|||
&::before { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 5%; |
|||
width: 8%; |
|||
height: 60px; |
|||
background: rgba(255,255,255,0.4); |
|||
border-radius: 2px 2px 0 0; |
|||
} |
|||
|
|||
&::after { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 15%; |
|||
width: 6%; |
|||
height: 100px; |
|||
background: rgba(255,255,255,0.3); |
|||
border-radius: 2px 2px 0 0; |
|||
box-shadow: |
|||
-30px 20px 0 rgba(255,255,255,0.25), |
|||
-55px 35px 0 rgba(255,255,255,0.2), |
|||
30px 40px 0 rgba(255,255,255,0.2), |
|||
60px 15px 0 rgba(255,255,255,0.15); |
|||
} |
|||
} |
|||
|
|||
/* 轨道线装饰 */ |
|||
.orbit-line { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
width: 200px; |
|||
height: 120px; |
|||
border: 1.5px solid rgba(255,255,255,0.2); |
|||
border-radius: 50%; |
|||
z-index: 0; |
|||
|
|||
&:nth-child(2) { |
|||
width: 260px; |
|||
height: 155px; |
|||
border-color: rgba(255,255,255,0.12); |
|||
} |
|||
} |
|||
|
|||
/* 盾牌图标 */ |
|||
.shield-wrapper { |
|||
position: relative; |
|||
z-index: 1; |
|||
margin-bottom: 8px; |
|||
} |
|||
|
|||
.shield { |
|||
display: inline-block; |
|||
width: 90px; |
|||
height: 100px; |
|||
position: relative; |
|||
} |
|||
|
|||
.shield-icon { |
|||
width: 90px; |
|||
height: 100px; |
|||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); |
|||
clip-path: polygon(50% 0%, 100% 20%, 100% 65%, 50% 100%, 0% 65%, 0% 20%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
color: white; |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
letter-spacing: 4px; |
|||
text-shadow: 0 1px 3px rgba(0,0,0,0.2); |
|||
|
|||
&::before { |
|||
content: ''; |
|||
position: absolute; |
|||
inset: 3px; |
|||
background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%); |
|||
clip-path: polygon(50% 2%, 98% 21%, 98% 64%, 50% 98%, 2% 64%, 2% 21%); |
|||
z-index: -1; |
|||
} |
|||
} |
|||
|
|||
.shield-text { |
|||
line-height: 1.3; |
|||
margin-top: 12px; |
|||
} |
|||
|
|||
/* 企业端标签 */ |
|||
.enterprise-tag { |
|||
display: inline-block; |
|||
background: linear-gradient(135deg, #2563eb, #1d4ed8); |
|||
color: white; |
|||
padding: 5px 22px; |
|||
border-radius: 4px; |
|||
font-size: 15px; |
|||
font-weight: 500; |
|||
letter-spacing: 2px; |
|||
margin: 6px 0 12px; |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
|
|||
/* 标语 */ |
|||
.slogan { |
|||
position: relative; |
|||
z-index: 1; |
|||
font-size: 22px; |
|||
font-weight: bold; |
|||
letter-spacing: 3px; |
|||
|
|||
.white-text { |
|||
color: #ffffff; |
|||
text-shadow: 0 1px 4px rgba(0,0,0,0.15); |
|||
} |
|||
|
|||
.gold-text { |
|||
color: #fbbf24; |
|||
text-shadow: 0 1px 4px rgba(0,0,0,0.15); |
|||
} |
|||
} |
|||
|
|||
/* ===== 内容区域 ===== */ |
|||
.content-area { |
|||
padding: 0 16px; |
|||
margin-top: -10px; |
|||
position: relative; |
|||
z-index: 2; |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
padding-bottom: 16px; |
|||
} |
|||
|
|||
/* 通知栏 */ |
|||
.notice-bar { |
|||
background: #fffbe6; |
|||
border-radius: 25px; |
|||
padding: 12px 20px; |
|||
margin-bottom: 14px; |
|||
display: flex; |
|||
align-items: center; |
|||
box-shadow: 0 2px 12px rgba(0,0,0,0.04); |
|||
border: 1px solid rgba(255,220,120,0.4); |
|||
|
|||
.notice-icon { |
|||
width: 18px; |
|||
height: 18px; |
|||
min-width: 18px; |
|||
margin-right: 10px; |
|||
color: #faad14; |
|||
} |
|||
|
|||
.notice-text { |
|||
font-size: 14px; |
|||
color: #8c8c8c; |
|||
} |
|||
} |
|||
|
|||
/* 轮播图 */ |
|||
.banner-card { |
|||
border-radius: 16px; |
|||
overflow: hidden; |
|||
margin-bottom: 14px; |
|||
position: relative; |
|||
box-shadow: 0 2px 12px rgba(0,0,0,0.06); |
|||
} |
|||
|
|||
.banner-inner { |
|||
width: 100%; |
|||
height: 180px; |
|||
background: linear-gradient(135deg, #c8e2f8 0%, #a0c8f0 30%, #7bb3e8 60%, #5a9de0 100%); |
|||
position: relative; |
|||
overflow: hidden; |
|||
|
|||
&::before { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 20%; |
|||
right: -10%; |
|||
width: 70%; |
|||
height: 120%; |
|||
background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)); |
|||
transform: rotate(-15deg); |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
&::after { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: 10%; |
|||
left: 10%; |
|||
width: 80%; |
|||
height: 60%; |
|||
background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.2), rgba(255,255,255,0.05)); |
|||
transform: skewX(-10deg); |
|||
border-radius: 10px; |
|||
} |
|||
} |
|||
|
|||
/* 轮播指示器 */ |
|||
.banner-dots { |
|||
position: absolute; |
|||
bottom: 12px; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
display: flex; |
|||
gap: 6px; |
|||
z-index: 1; |
|||
|
|||
.dot { |
|||
width: 8px; |
|||
height: 8px; |
|||
border-radius: 4px; |
|||
background: rgba(255,255,255,0.5); |
|||
transition: all 0.3s; |
|||
|
|||
&.active { |
|||
width: 20px; |
|||
background: rgba(255,255,255,0.9); |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 执法监督码卡片 */ |
|||
.supervision-card { |
|||
background: linear-gradient(135deg, #eaf3ff 0%, #d6eaff 50%, #c0dbf8 100%); |
|||
border-radius: 16px; |
|||
padding: 18px 20px; |
|||
margin-bottom: 14px; |
|||
position: relative; |
|||
overflow: hidden; |
|||
box-shadow: 0 2px 12px rgba(0,0,0,0.05); |
|||
|
|||
&::after { |
|||
content: ''; |
|||
position: absolute; |
|||
top: -20px; |
|||
right: -20px; |
|||
width: 180px; |
|||
height: 180px; |
|||
background: radial-gradient(circle, rgba(59,130,246,0.08), transparent 70%); |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
h3 { |
|||
font-size: 17px; |
|||
color: #1a1a2e; |
|||
font-weight: 600; |
|||
margin-bottom: 6px; |
|||
margin-top: 6px; |
|||
} |
|||
|
|||
.qr-icon-wrap { |
|||
display: flex; |
|||
align-items: flex-end; |
|||
justify-content: space-between; |
|||
} |
|||
} |
|||
|
|||
.qr-main { |
|||
width: 100px; |
|||
height: 100px; |
|||
background: linear-gradient(135deg, #3b82f6, #2563eb); |
|||
border-radius: 16px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: relative; |
|||
box-shadow: 0 4px 15px rgba(37,99,235,0.3); |
|||
|
|||
.qr-grid { |
|||
width: 60px; |
|||
height: 60px; |
|||
display: grid; |
|||
grid-template-columns: repeat(5, 1fr); |
|||
grid-template-rows: repeat(5, 1fr); |
|||
gap: 3px; |
|||
|
|||
span { |
|||
background: rgba(255,255,255,0.85); |
|||
border-radius: 2px; |
|||
|
|||
&:nth-child(3n) { |
|||
background: rgba(255,255,255,0.4); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.qr-check { |
|||
position: absolute; |
|||
bottom: -4px; |
|||
right: -4px; |
|||
width: 32px; |
|||
height: 32px; |
|||
background: linear-gradient(135deg, #60a5fa, #3b82f6); |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border: 3px solid #eaf3ff; |
|||
|
|||
svg { |
|||
width: 16px; |
|||
height: 16px; |
|||
color: white; |
|||
} |
|||
} |
|||
|
|||
.qr-small { |
|||
width: 65px; |
|||
height: 65px; |
|||
opacity: 0.35; |
|||
display: grid; |
|||
grid-template-columns: repeat(5, 1fr); |
|||
grid-template-rows: repeat(5, 1fr); |
|||
gap: 2px; |
|||
margin-right: 10px; |
|||
|
|||
span { |
|||
background: #6b7280; |
|||
border-radius: 1px; |
|||
|
|||
&:nth-child(even) { |
|||
background: #9ca3af; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 双卡片行 */ |
|||
.card-row { |
|||
display: flex; |
|||
gap: 12px; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.info-card { |
|||
flex: 1; |
|||
background: linear-gradient(135deg, #eaf3ff 0%, #d6eaff 60%, #c8e0f8 100%); |
|||
border-radius: 16px; |
|||
padding: 18px 16px; |
|||
position: relative; |
|||
overflow: hidden; |
|||
min-height: 90px; |
|||
box-shadow: 0 2px 12px rgba(0,0,0,0.05); |
|||
|
|||
h4 { |
|||
font-size: 15px; |
|||
color: #1a1a2e; |
|||
font-weight: 600; |
|||
margin-bottom: 4px; |
|||
margin-top: 4px; |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.card-icon { |
|||
width: 52px; |
|||
height: 52px; |
|||
background: linear-gradient(135deg, #3b82f6, #2563eb); |
|||
border-radius: 14px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: relative; |
|||
box-shadow: 0 4px 12px rgba(37,99,235,0.25); |
|||
|
|||
svg { |
|||
width: 26px; |
|||
height: 26px; |
|||
color: white; |
|||
} |
|||
} |
|||
|
|||
.bg-icon { |
|||
position: absolute; |
|||
bottom: 8px; |
|||
right: 8px; |
|||
width: 50px; |
|||
height: 50px; |
|||
opacity: 0.15; |
|||
color: #6b7280; |
|||
} |
|||
} |
|||
|
|||
.card-icon-check { |
|||
position: absolute; |
|||
bottom: -3px; |
|||
right: -3px; |
|||
width: 22px; |
|||
height: 22px; |
|||
background: linear-gradient(135deg, #60a5fa, #3b82f6); |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border: 2px solid #eaf3ff; |
|||
|
|||
svg { |
|||
width: 11px; |
|||
height: 11px; |
|||
color: white; |
|||
} |
|||
} |
|||
|
|||
/* ===== 底部导航 ===== */ |
|||
.footer_body { |
|||
flex-shrink: 0; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue