zhuibobo
/
EnforcementCode-2.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页页面调整，加上了一个loading

dev-V1.10.2-temp
wangmingyong@163.com 3 months ago
parent
4c4a99ec62
commit
f147a23f2f
1 changed files with 110 additions and 68 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 178
      zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/home/enterpriseHome.vue

178
zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/home/enterpriseHome.vue
View File

@ -1,5 +1,10 @@
<template> <template>
<div class="home app_content"> <div class="home app_content">
<!-- 全局 Loading -->
<van-loading v-if="isLoading" class="global-loading" type="spinner" size="36px" color="#2b7de9" vertical>
加载中...
</van-loading>
<!-- 顶部蓝色背景区域 --> <!-- 顶部蓝色背景区域 -->
<div class="header-bg"> <div class="header-bg">
<img src="@/assets/images/logo_top.png" class="logo_top-img" alt="" /> <img src="@/assets/images/logo_top.png" class="logo_top-img" alt="" />
@ -29,33 +34,57 @@
</van-swipe-item> </van-swipe-item>
</van-swipe> </van-swipe>
</div> </div>
<div class="service-title">主要服务</div>
<div class="service-card-container">
<div class="supervision-card" @click="showEnterpriseQRCode">
<div class="card-icon">
<img src="../../../assets/images/law_text.png" class="card-icon-img" />
</div>
</div>
<!-- 双卡片行 -->
<div class="card-row">
<!-- 历史执法信息 -->
<div class="info-card" @click="toEnforcementRegistrationListView">
<div class="card-icon">
<img src="../../../assets/images/hist_text.png" class="card-icon-img" />
</div>
</div>
<!-- 执法案件信息 -->
<div class="info-card info-enforce" @click="toEnforcementCaseInfoView">
<div class="card-icon">
<img src="../../../assets/images/case_text.png" class="card-icon-img" />
</div>
</div>
</div>
</div>
<!-- 执法监督码卡片 --> <!-- 执法监督码卡片 -->
<div class="supervision-card" @click="showEnterpriseQRCode"> <!-- <div class="supervision-card" @click="showEnterpriseQRCode">
<div class="card-title">执法监督码</div> <div class="card-title">执法监督码</div>
<div class="qr-icon-wrap"> <div class="qr-icon-wrap">
<img src="@/assets/images/icon_jdm.jpg" class="qr-image" alt="" /> <img src="@/assets/images/icon_jdm.jpg" class="qr-image" alt="" />
</div> </div>
</div> </div> -->
<!-- 双卡片行 --> <!-- 双卡片行 -->
<div class="card-row"> <!-- <div class="card-row"> -->
<!-- 历史执法信息 --> <!-- 历史执法信息 -->
<div class="info-card" @click="toEnforcementRegistrationListView"> <!-- <div class="info-card" @click="toEnforcementRegistrationListView">
<div class="card-title">历史执法信息</div> <div class="card-title">历史执法信息</div>
<div class="card-icon"> <div class="card-icon">
<img src="@/assets/images/icon_zfxx.jpg" class="card-icon-img" alt="" /> <img src="@/assets/images/icon_zfxx.jpg" class="card-icon-img" alt="" />
</div> </div>
</div> </div> -->
<!-- 执法案件信息 --> <!-- 执法案件信息 -->
<div class="info-card info-enforce" @click="toEnforcementCaseInfoView"> <!-- <div class="info-card info-enforce" @click="toEnforcementCaseInfoView">
<div class="card-title">执法案件信息</div> <div class="card-title">执法案件信息</div>
<div class="card-icon"> <div class="card-icon">
<img src="@/assets/images/icon_ajxx.jpg" class="card-icon-img" alt="" /> <img src="@/assets/images/icon_ajxx.jpg" class="card-icon-img" alt="" />
</div> </div>
</div> </div> -->
</div> <!-- </div> -->
</div> </div>
<!-- 底部导航栏 --> <!-- 底部导航栏 -->
@ -210,10 +239,15 @@ onMounted(() => {
console.log(useCommon); console.log(useCommon);
isLoading.value = useCommon.firstLoad; isLoading.value = useCommon.firstLoad;
// 首页轮播图加载 // 安全超时：5秒后强制关闭loading，防止异常导致一直转圈
fetchBannerList(); setTimeout(() => {
// 首页系统通知加载 isLoading.value = false;
fetchNoticeList(); }, 20000);
// // 首页轮播图加载
// fetchBannerList();
// // 首页系统通知加载
// fetchNoticeList();
// 如果store中已存在完整的用户和企业信息，则跳过w6s鉴权 // 如果store中已存在完整的用户和企业信息，则跳过w6s鉴权
if (hasUserInfo()) { if (hasUserInfo()) {
@ -221,6 +255,10 @@ onMounted(() => {
isLoading.value = false; isLoading.value = false;
getEnterpriseMerchant(useCommon.enterpriseNumber.toString(), useCommon.phonenumber.toString()); getEnterpriseMerchant(useCommon.enterpriseNumber.toString(), useCommon.phonenumber.toString());
useCommon.SET_IS_FIRST_LOAD(false); useCommon.SET_IS_FIRST_LOAD(false);
// 首页轮播图加载
fetchBannerList();
// 首页系统通知加载
fetchNoticeList();
return; return;
} }
@ -288,6 +326,10 @@ onMounted(() => {
if (useCommon.firstLoad) { if (useCommon.firstLoad) {
isLoading.value = false; isLoading.value = false;
} }
// 首页轮播图加载
fetchBannerList();
// 首页系统通知加载
fetchNoticeList();
}, error => { }, error => {
console.log("认证失败", error) console.log("认证失败", error)
}) })
@ -314,8 +356,21 @@ onMounted(() => {
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
background: #f0f6ff; background: #fbfdff;
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; }
/* ===== 全局 Loading ===== */
.global-loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.85);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
} }
/* ===== 顶部蓝色背景区域 ===== */ /* ===== 顶部蓝色背景区域 ===== */
@ -442,91 +497,78 @@ onMounted(() => {
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
} }
.service-title {
font-size: 16px;
color: #000;
margin-bottom: 14px;
margin-top: 14px;
font-weight: 600;
}
.service-card-container {
display: flex;
justify-content: space-around;
}
/* 执法监督码卡片 */ /* 执法监督码卡片 */
.supervision-card { .supervision-card {
background: url('../../../assets/images/bg_jdm.jpg') center center no-repeat, linear-gradient(180deg, #7cc5fe 0%, #fff 100%); background: url('../../../assets/images/law_enf_code.png') center center no-repeat, linear-gradient(180deg, #7cc5fe 0%, #fff 100%);
background-size: 100% 100%; background-size: 100% 100%;
border-radius: 16px; border-radius: 16px;
padding: 10px; padding: 8px 16px;
margin-bottom: 14px; margin-bottom: 14px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
height: 120px; height: 200px;
width: 171px;
.card-title { box-sizing: border-box;
font-size: 16px; .card-icon {
color: #000; width: 134px;
// font-weight: 600; height: 42px;
margin-bottom: 6px; margin-top: 4px;
margin-top: 6px; .card-icon-img {
} width: 100%;
height: 100%;
.qr-icon-wrap { }
display: flex;
align-items: center;
justify-content: flex-start;
}
.qr-image {
width: 100px;
// height: 100px;
object-fit: contain;
border-radius: 40px;
} }
} }
/* 双卡片行 */ /* 双卡片行 */
.card-row { .card-row {}
display: flex;
gap: 12px;
margin-bottom: 20px;
}
.info-card { .info-card {
flex: 1;
border-radius: 16px; border-radius: 16px;
padding: 8px 16px; padding: 8px 16px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
min-height: 100px; height: 96px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
background: url('../../../assets/images/bg_zfxx.png') center center no-repeat, linear-gradient(180deg, #bbecfd 0%, #fff 100%); background: url('../../../assets/images/hist_law_casses.png') center center no-repeat, linear-gradient(180deg, #bbecfd 0%, #fff 100%);
background-size: 100% 100%; background-size: 100% 100%;
width: 171px;
.card-title { box-sizing: border-box;
font-size: 14px;
color: #000;
margin-bottom: 4px;
margin-top: 4px;
position: relative;
z-index: 1;
}
.card-icon { .card-icon {
width: 60px; width: 92px;
height: 40px; height: 42px;
// border-radius: 20px; margin-top: 4px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
margin-top: 12px;
.card-icon-img { .card-icon-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50px;
} }
} }
} }
.info-enforce { .info-enforce {
background: url('../../../assets/images/bg_ajxx.png') center center no-repeat, linear-gradient(180deg, #a6d1f9 0%, #fff 100%); background: url('../../../assets/images/case_information.png') center center no-repeat, linear-gradient(180deg, #a6d1f9 0%, #fff 100%);
background-size: 100% 100%; background-size: 100% 100%;
width: 171px;
box-sizing: border-box;
margin-top: 6px;
} }
/* ===== 底部导航 ===== */ /* ===== 底部导航 ===== */
.footer_body { .footer_body {
flex-shrink: 0; flex-shrink: 0;

Write Preview
Loading…
Cancel
Save