|
|
|
@ -30,32 +30,27 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 扫码入企双卡片行 --> |
|
|
|
<div class="card-row"> |
|
|
|
<div class="card-row-scan"> |
|
|
|
<!-- 行政执法 - 扫码入企 --> |
|
|
|
<div class="function-card enforcement-card" @click="toScanEntQRCode('enforcement')"> |
|
|
|
<div class="card-label-wrap"> |
|
|
|
<img src="@/assets/images/bg_label_xzzf.png" class="card-label" /> |
|
|
|
<div class="card-title">扫码入企</div> |
|
|
|
</div> |
|
|
|
<div class="card-content"> |
|
|
|
<div class="card-scan-wrap"> |
|
|
|
</div> |
|
|
|
<div class="card-scan-line"></div> |
|
|
|
<div class="card-scan-box"> |
|
|
|
<div class="enforcement-card" @click="toScanEntQRCode('enforcement')"> |
|
|
|
<div class="card-text">行政执法</div> |
|
|
|
<div class="card-title">执法人员入企登记</div> |
|
|
|
<!-- <div class="card-content"> |
|
|
|
<div class="card-text">行政执法</div> |
|
|
|
<img src="@/assets/images/icon_xzrq.jpg" class="card-icon" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 非行政执法 - 扫码入企 --> |
|
|
|
<div class="function-card other-card" @click="toScanEntQRCode('non-enforcement')"> |
|
|
|
<div class="card-label-wrap"> |
|
|
|
<img src="@/assets/images/bg_label_fxzzf.png" class="card-label" /> |
|
|
|
<div class="card-title">扫码入企</div> |
|
|
|
</div> |
|
|
|
<div class="card-content"> |
|
|
|
<div class="other-card" @click="toScanEntQRCode('non-enforcement')"> |
|
|
|
<div class="card-text">非行政执法</div> |
|
|
|
<img src="@/assets/images/icon_fxzrq.jpg" class="card-icon" /> |
|
|
|
</div> |
|
|
|
<div class="card-title">非执法人员入企登记</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 行政执法信息 + 统计分析 双卡片行 --> |
|
|
|
@ -64,18 +59,18 @@ |
|
|
|
<div class="function-card information-card" @click="toEnforcementList"> |
|
|
|
<div class="card-content"> |
|
|
|
<div class="cardOther-text">行政执法信息</div> |
|
|
|
<img src="@/assets/images/icon_zfxx.jpg" class="card-icon" /> |
|
|
|
|
|
|
|
<div class="cardOther-title">执法历史信息</div> |
|
|
|
</div> |
|
|
|
<div class="card-icon"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 统计分析 --> |
|
|
|
<div class="function-card statistics-card" @click="toStatisticsAnalysis"> |
|
|
|
<div class="card-content"> |
|
|
|
<div class="cardOther-text">统计分析</div> |
|
|
|
<img src="@/assets/images/icon_tjfx.jpg" class="card-icon" /> |
|
|
|
|
|
|
|
<div class="cardOther-title">执法人员统计信息</div> |
|
|
|
</div> |
|
|
|
<div class="cardOther-icon"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -193,7 +188,6 @@ onMounted(() => { |
|
|
|
height: 100%; |
|
|
|
overflow: hidden; |
|
|
|
background: #fbfdff; |
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; |
|
|
|
} |
|
|
|
|
|
|
|
/* ===== 顶部蓝色背景区域 ===== */ |
|
|
|
@ -251,54 +245,6 @@ onMounted(() => { |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.badge-icon { |
|
|
|
width: 80px; |
|
|
|
height: 80px; |
|
|
|
background: linear-gradient(135deg, #2563eb, #1d4ed8); |
|
|
|
border-radius: 50%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4); |
|
|
|
border: 3px solid rgba(255, 255, 255, 0.3); |
|
|
|
} |
|
|
|
|
|
|
|
.badge-svg { |
|
|
|
width: 70px; |
|
|
|
height: 70px; |
|
|
|
} |
|
|
|
|
|
|
|
.badge-label { |
|
|
|
margin-top: 8px; |
|
|
|
font-size: 14px; |
|
|
|
color: rgba(255, 255, 255, 0.9); |
|
|
|
font-weight: 500; |
|
|
|
letter-spacing: 2px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 标语 */ |
|
|
|
.header-slogan { |
|
|
|
position: relative; |
|
|
|
z-index: 2; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
gap: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.slogan-text { |
|
|
|
font-size: 18px; |
|
|
|
color: #fff; |
|
|
|
font-weight: 600; |
|
|
|
letter-spacing: 3px; |
|
|
|
} |
|
|
|
|
|
|
|
.slogan-divider { |
|
|
|
color: rgba(255, 255, 255, 0.6); |
|
|
|
font-size: 18px; |
|
|
|
} |
|
|
|
|
|
|
|
/* ===== 内容区域 ===== */ |
|
|
|
.content-area { |
|
|
|
padding: 12px; |
|
|
|
@ -310,7 +256,7 @@ onMounted(() => { |
|
|
|
border-radius: 10px 10px 0 0; |
|
|
|
top: -10px; |
|
|
|
bottom: 0px; |
|
|
|
background: #fff; |
|
|
|
background: #fbfdff; |
|
|
|
// height: calc(100% - 20px); |
|
|
|
} |
|
|
|
|
|
|
|
@ -386,100 +332,119 @@ onMounted(() => { |
|
|
|
|
|
|
|
/* ===== 卡片行 ===== */ |
|
|
|
.card-row { |
|
|
|
margin-top: 10px; |
|
|
|
display: flex; |
|
|
|
gap: 12px; |
|
|
|
margin-bottom: 14px; |
|
|
|
} |
|
|
|
|
|
|
|
.card-row-scan{ |
|
|
|
background: url('@/assets/images/scan_bg.png') no-repeat center center; |
|
|
|
background-size: 100% 100%; |
|
|
|
height: 160px; |
|
|
|
padding: 4px; |
|
|
|
position: relative; |
|
|
|
.card-scan-wrap{ |
|
|
|
background:url('@/assets/images/scan_qr_text.png') no-repeat center center; |
|
|
|
background-size: 100% 100%; |
|
|
|
width: 89px; |
|
|
|
height: 31px; |
|
|
|
position: relative; |
|
|
|
left: 131px; |
|
|
|
top: 7px; |
|
|
|
} |
|
|
|
.card-scan-line{ |
|
|
|
width: 47px; |
|
|
|
height: 47px; |
|
|
|
background: url('@/assets/images/scan_qr_icon.png') no-repeat center center; |
|
|
|
background-size: 100% 100%; |
|
|
|
position: absolute; |
|
|
|
right: 12px; |
|
|
|
top: 12px; |
|
|
|
|
|
|
|
} |
|
|
|
.card-scan-box{ |
|
|
|
display: flex; |
|
|
|
margin-top: 17px; |
|
|
|
z-index: 10; |
|
|
|
.card-text{ |
|
|
|
font-size: 16px; |
|
|
|
color: rgba(0, 0, 0, 0.9); |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
.card-title{ |
|
|
|
margin-top: 2px; |
|
|
|
font-size: 13px; |
|
|
|
color: rgba(0, 0, 0, 0.5); |
|
|
|
} |
|
|
|
} |
|
|
|
.enforcement-card { |
|
|
|
height: 140px; |
|
|
|
background: url('@/assets/images/bg_xzzf.png') no-repeat center center, linear-gradient(180deg, #7cc5fe 0%, #fff 60%); |
|
|
|
width: 169px; |
|
|
|
height: 112px; |
|
|
|
background: url('@/assets/images/administrative_bg.png') no-repeat center center; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-right: 5px; |
|
|
|
padding: 8px; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.other-card { |
|
|
|
height: 140px; |
|
|
|
background: url('@/assets/images/bg_fxzzf.png') no-repeat center center, linear-gradient(180deg, #aacbfd 0%, #fff 60%); |
|
|
|
width: 169px; |
|
|
|
height: 112px; |
|
|
|
background: url('@/assets/images/non_administrative_bg.png') no-repeat center center; |
|
|
|
background-size: 100% 100%; |
|
|
|
padding: 8px; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.information-card { |
|
|
|
height: 120px; |
|
|
|
background: url('@/assets/images/bg_zfxx.png') no-repeat center center, linear-gradient(180deg, #bbecfd 0%, #fff 60%); |
|
|
|
width: 172px; |
|
|
|
height: 80px; |
|
|
|
background: url('@/assets/images/historical_law_enforcement_bg.png')center center; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.statistics-card { |
|
|
|
height: 120px; |
|
|
|
background: url('@/assets/images/bg_tjfx.png') no-repeat center center, linear-gradient(180deg, #a3d4f7 0%, #fff 60%); |
|
|
|
width: 172px; |
|
|
|
height: 80px; |
|
|
|
background: url('@/assets/images/statistic_analysis_bg.png')center center; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
|
|
|
|
/* 功能卡片 */ |
|
|
|
.function-card { |
|
|
|
flex: 1; |
|
|
|
border-radius: 16px; |
|
|
|
padding: 0; |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
// min-height: 140px; |
|
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); |
|
|
|
|
|
|
|
.card-label-wrap { |
|
|
|
.card-title { |
|
|
|
font-size: 12px; |
|
|
|
color: #fff; |
|
|
|
letter-spacing: 1px; |
|
|
|
position: absolute; |
|
|
|
top: 6px; |
|
|
|
left: 12px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.card-label { |
|
|
|
width: 100px; |
|
|
|
height: 38px; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
|
|
|
|
box-shadow: 0px 0px 12px 0px rgba(0, 112, 236, 0.12); |
|
|
|
display: flex; |
|
|
|
border-radius: 10px; |
|
|
|
justify-content: space-between; |
|
|
|
padding:20px 8px; |
|
|
|
box-sizing: border-box; |
|
|
|
.card-content { |
|
|
|
position: relative; |
|
|
|
z-index: 2; |
|
|
|
padding: 0 16px 16px; |
|
|
|
// position: relative; |
|
|
|
// z-index: 2; |
|
|
|
// padding: 0 16px 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.card-icon { |
|
|
|
width: 52px; |
|
|
|
height: 38px; |
|
|
|
border-radius: 18px; |
|
|
|
margin-top: 8px; |
|
|
|
display: block; |
|
|
|
width: 40px; |
|
|
|
height: 40px; |
|
|
|
background: url('@/assets/images/historical_icon.png') no-repeat center center; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.card-text { |
|
|
|
font-size: 15px; |
|
|
|
color: #000; |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.cardOther-icon{ |
|
|
|
width: 40px; |
|
|
|
height: 40px; |
|
|
|
background: url('@/assets/images/statistic_icon.png') no-repeat center center; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
.cardOther-text { |
|
|
|
font-size: 15px; |
|
|
|
color: #000; |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
margin-top: 12px; |
|
|
|
font-size: 14px; |
|
|
|
font-weight:bold; |
|
|
|
color: rgba(0, 0, 0, 0.9); |
|
|
|
} |
|
|
|
|
|
|
|
.card-bg-decor { |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
object-fit: cover; |
|
|
|
opacity: 0.06; |
|
|
|
pointer-events: none; |
|
|
|
.cardOther-title{ |
|
|
|
font-size: 13px; |
|
|
|
color: rgba(0, 0, 0, 0.5); |
|
|
|
margin-top: 2px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|