|
|
|
@ -1,41 +1,64 @@ |
|
|
|
<template> |
|
|
|
<!-- <Loading class="loading-div" type="spinner" v-show="isLoading" color="#1989fa"/> |
|
|
|
<div class="home app_content" v-if="!isLoading"> --> |
|
|
|
<div class="home app_content"> |
|
|
|
<!-- 导航栏 --> |
|
|
|
<!-- <div class="header_body">--> |
|
|
|
<!-- <header-nav :leftArrow="false" titelText="执法监督码"></header-nav>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- 中间 --> |
|
|
|
<div class="warp_body"> |
|
|
|
<div class="logobox"> |
|
|
|
<div class="logobox-title" style="position: absolute;top: 100px;left: 50%;transform: translateX(-50%);background: #0d8ddb;z-index: 100;padding: 10px 20px;color: #fff;border-radius: 8px;" @click="toDemoList">demo-list</div> |
|
|
|
<!-- 顶部蓝色背景区域 --> |
|
|
|
<div class="header-bg"> |
|
|
|
<img src="@/assets/images/logo_top.png" class="logo_top-img" alt="" /> |
|
|
|
<img src="@/assets/images/label_qyd.png" class="label_qyd-img" alt="" /> |
|
|
|
<img src="@/assets/images/slogan_top.png" class="slogan_top-img" alt="" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 内容区域 --> |
|
|
|
<div class="content-area"> |
|
|
|
<!-- 通知栏 --> |
|
|
|
<div class="notice-bar"> |
|
|
|
<img src="@/assets/images/icon_notice.png" class="notice-icon" alt="" /> |
|
|
|
<van-notice-bar v-if="noticeList.length > 0" class="notice-scroll" |
|
|
|
:scrollable="noticeList.length > 1 || (noticeList[0]?.title || '').length > 16" |
|
|
|
background="transparent" color="#8c8c8c" :text="noticeText" /> |
|
|
|
<span v-else class="notice-text">暂无新通知</span> |
|
|
|
</div> |
|
|
|
<!-- <refresh-list v-model:freshMap="freshMap" @refresh="onRefresh" @onLoad="onLoad"> --> |
|
|
|
<!-- <div class="carousel_box" @onLoad="onLoad"> |
|
|
|
<carousel-card v-if="carouselList.length" v-model:carouselList="carouselList"></carousel-card> |
|
|
|
</div>--> |
|
|
|
<div class="boutique_box"> |
|
|
|
<!-- <van-cell :border="false" title="精品" /> --> |
|
|
|
<div class="boutique_body"> |
|
|
|
<!-- <goodsCard :goodsList="boutique" :cardAttr="boutiqueAttr"></goodsCard> --> |
|
|
|
<div class="box-qr-code" @click="showEnterpriseQRCode"> |
|
|
|
<span class="box-qr-code-text">执法监督码</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 轮播图 --> |
|
|
|
<div class="banner-card"> |
|
|
|
<van-swipe :autoplay="3000" indicator-color="rgba(255,255,255,0.9)" :loop="true"> |
|
|
|
<van-swipe-item v-for="(item, index) in bannerList" :key="index"> |
|
|
|
<div class="banner-inner" @click="onBannerClick(item)"> |
|
|
|
<img v-if="item.image" :src="item.image" class="banner-img" alt="" /> |
|
|
|
<div v-else class="banner-placeholder">{{ item.title || '暂无内容' }}</div> |
|
|
|
</div> |
|
|
|
</van-swipe-item> |
|
|
|
</van-swipe> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 执法监督码卡片 --> |
|
|
|
<div class="supervision-card" @click="showEnterpriseQRCode"> |
|
|
|
<div class="card-title">执法监督码</div> |
|
|
|
<div class="qr-icon-wrap"> |
|
|
|
<img src="@/assets/images/icon_jdm.jpg" class="qr-image" alt="" /> |
|
|
|
</div> |
|
|
|
<div class="boutique_body"> |
|
|
|
<!-- <goodsCard :goodsList="boutique" :cardAttr="boutiqueAttr"></goodsCard> --> |
|
|
|
<div class="box-info" @click="toRegistrationListView"> |
|
|
|
<span class="box-info-text">历史执法信息</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 双卡片行 --> |
|
|
|
<div class="card-row"> |
|
|
|
<!-- 历史执法信息 --> |
|
|
|
<div class="info-card" @click="toEnforcementRegistrationListView"> |
|
|
|
<div class="card-title">历史执法信息</div> |
|
|
|
<div class="card-icon"> |
|
|
|
<img src="@/assets/images/icon_zfxx.jpg" class="card-icon-img" alt="" /> |
|
|
|
</div> |
|
|
|
<div class="box-complaint" @click="toComplaintView"> |
|
|
|
<span class="box-complaint-text">执法投诉</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 执法案件信息 --> |
|
|
|
<div class="info-card info-enforce" @click="toEnforcementCaseInfoView"> |
|
|
|
<div class="card-title">执法案件信息</div> |
|
|
|
<div class="card-icon"> |
|
|
|
<img src="@/assets/images/icon_ajxx.jpg" class="card-icon-img" alt="" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- </refresh-list> --> |
|
|
|
</div> |
|
|
|
<!-- 底部 --> |
|
|
|
|
|
|
|
<!-- 底部导航栏 --> |
|
|
|
<div class="footer_body"> |
|
|
|
<footer-nav></footer-nav> |
|
|
|
</div> |
|
|
|
@ -45,13 +68,64 @@ |
|
|
|
<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 { getEnterpriseMerchantAuthorization, getSiqLoginAuth, getSiqLoginAuthMock, siqCode, getCarouselBannerList, getSystemNoticeList } from '../../../api/enterprise'; |
|
|
|
import 'vant/es/toast/style'; |
|
|
|
import Vconsolefrom from 'vconsole'; |
|
|
|
|
|
|
|
const {useCommon} = $globalStore; |
|
|
|
const { useCommon } = $globalStore; |
|
|
|
const router = useRouter(); |
|
|
|
const isLoading = ref(true); |
|
|
|
|
|
|
|
// ========== 轮播图数据 ========== |
|
|
|
const bannerList = ref([]); |
|
|
|
const onBannerClick = (item) => { |
|
|
|
if (item.id) { |
|
|
|
router.push({ |
|
|
|
path: '/enterprise/bannerDetail', |
|
|
|
query: { id: item.id }, |
|
|
|
}); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 调用轮播图接口并填充 bannerList、兼容多种字段名 |
|
|
|
const fetchBannerList = () => { |
|
|
|
getCarouselBannerList({ target_platform:'1' }, (res) => { |
|
|
|
const rows = res?.rows || res?.data?.rows || res?.data || []; |
|
|
|
if (!Array.isArray(rows)) return; |
|
|
|
bannerList.value = rows.map(item => ({ |
|
|
|
id: item.id || '', |
|
|
|
title: item.title || '', |
|
|
|
image: (import.meta.env.VITE_FILE_URL || '') + (item.imageUrl || ''), |
|
|
|
link: item.linkUrl || '', |
|
|
|
raw: item, |
|
|
|
})); |
|
|
|
}, () => { }); |
|
|
|
}; |
|
|
|
|
|
|
|
// ========== 系统通知公告 ========== |
|
|
|
const noticeList = ref([]); |
|
|
|
// 多条通知拼接（van-notice-bar 使用单一文本滚动展示） |
|
|
|
const noticeText = computed(() => { |
|
|
|
return noticeList.value |
|
|
|
.map(it => it.title) |
|
|
|
.filter(Boolean) |
|
|
|
.join(' '); |
|
|
|
}); |
|
|
|
|
|
|
|
// 调用系统通知接口并填充 noticeList、兼容多种字段名 |
|
|
|
const fetchNoticeList = () => { |
|
|
|
getSystemNoticeList({ pageNum: 1, pageSize: 10 }, (res) => { |
|
|
|
const rows = res?.rows || res?.data?.rows || res?.data?.list || res?.data || []; |
|
|
|
if (!Array.isArray(rows)) return; |
|
|
|
noticeList.value = rows.map(item => ({ |
|
|
|
id: item.noticeId || item.id || '', |
|
|
|
title: item.noticeTitle || item.title || item.noticeContent || '', |
|
|
|
type: item.noticeType || item.type || '', |
|
|
|
createTime: item.createTime || item.publishTime || '', |
|
|
|
raw: item, |
|
|
|
})); |
|
|
|
}, () => { }); |
|
|
|
}; |
|
|
|
let freshMap = reactive({ |
|
|
|
refreshLoad: false, // 是否刷新 |
|
|
|
listLoading: false, // 是否加载中 |
|
|
|
@ -59,21 +133,17 @@ let freshMap = reactive({ |
|
|
|
}); |
|
|
|
|
|
|
|
const showEnterpriseQRCode = async () => { |
|
|
|
/*if (useCommon.enterpriseNumber == null || useCommon.enterpriseNumber == "") { |
|
|
|
router.push({path: "/enterprise/register"}); |
|
|
|
} else {*/ |
|
|
|
router.push({ |
|
|
|
path: "/enterprise/qrCode", |
|
|
|
query: { |
|
|
|
enterpriseNumber: useCommon.enterpriseNumber, |
|
|
|
} |
|
|
|
}); |
|
|
|
//} |
|
|
|
router.push({ |
|
|
|
path: "/enterprise/qrCode", |
|
|
|
query: { |
|
|
|
enterpriseNumber: useCommon.enterpriseNumber, |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
const toRegistrationListView = async () => { |
|
|
|
const toEnforcementRegistrationListView = async () => { |
|
|
|
router.push({ |
|
|
|
path: "/enterprise/registrationList", |
|
|
|
path: "/enterprise/enforcementRegistrationList", |
|
|
|
}); |
|
|
|
} |
|
|
|
const toDemoList = () => { |
|
|
|
@ -90,6 +160,12 @@ const toComplaintView = async () => { |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
const toEnforcementCaseInfoView = async () => { |
|
|
|
router.push({ |
|
|
|
path: "/enterprise/enforcementCaseInfo", |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
//下拉刷新 |
|
|
|
const onRefresh = () => { |
|
|
|
freshMap.listFinished = false; |
|
|
|
@ -109,7 +185,7 @@ const generateRandomNumber = () => { |
|
|
|
} |
|
|
|
|
|
|
|
const getEnterpriseMerchant = (enterpriseNum, phoneNumber) => { |
|
|
|
getEnterpriseMerchantAuthorization({enterpriseNumber: enterpriseNum, merchantTel: phoneNumber}, success => { |
|
|
|
getEnterpriseMerchantAuthorization({ enterpriseNumber: enterpriseNum, merchantTel: phoneNumber }, success => { |
|
|
|
if (success.data != null && success.data.length > 0) { |
|
|
|
useCommon.SET_USER_ENTERPRISE_NUMBER(success.data[0].enterpriseNumber); |
|
|
|
} |
|
|
|
@ -117,33 +193,38 @@ const getEnterpriseMerchant = (enterpriseNum, phoneNumber) => { |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
/** 登录成功后写入 store（与一期 Home.vue 一致，并补充企业名称/ID） */ |
|
|
|
const applyLoginResult = (data) => { |
|
|
|
useCommon.SET_USER_PHONENUMBER(data.phonenumber.toString()); |
|
|
|
useCommon.SET_USER_ID(data.userId); |
|
|
|
useCommon.SET_USER_ENTERPRISE_NUMBER(data.enterpriseNumber); |
|
|
|
if (data.enterpriseName) { |
|
|
|
useCommon.SET_USER_ENTERPRISE_NAME(data.enterpriseName); |
|
|
|
} |
|
|
|
if (data.enterpriseId) { |
|
|
|
useCommon.SET_USER_ENTERPRISE_ID(data.enterpriseId); |
|
|
|
} |
|
|
|
useCommon.SET_TOKEN(data.token); |
|
|
|
useCommon.SET_IS_FIRST_LOAD(false); |
|
|
|
if (useCommon.firstLoad) { |
|
|
|
isLoading.value = false; |
|
|
|
} |
|
|
|
getEnterpriseMerchant(data.enterpriseNumber.toString(), data.phonenumber.toString()); |
|
|
|
} |
|
|
|
// 判断用户信息是否已完整（企业端登录后已写入store） |
|
|
|
const hasUserInfo = () => { |
|
|
|
return useCommon.userId |
|
|
|
&& useCommon.enterpriseName |
|
|
|
&& useCommon.enterpriseNumber |
|
|
|
&& useCommon.enterpriseId; |
|
|
|
}; |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
new Vconsolefrom(); |
|
|
|
console.log("企业端 Home onMounted"); |
|
|
|
// new Vconsolefrom(); |
|
|
|
//debugger; |
|
|
|
console.log(useCommon.firstLoad); |
|
|
|
console.log(useCommon); |
|
|
|
isLoading.value = useCommon.firstLoad; |
|
|
|
|
|
|
|
// 首页轮播图加载 |
|
|
|
fetchBannerList(); |
|
|
|
// 首页系统通知加载 |
|
|
|
fetchNoticeList(); |
|
|
|
|
|
|
|
// 如果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 => { |
|
|
|
console.log("---> 获取密钥", success); |
|
|
|
let access_key = ""; |
|
|
|
let access_secret = ""; |
|
|
|
if (success.success) { |
|
|
|
@ -151,6 +232,8 @@ onMounted(() => { |
|
|
|
access_secret = success.data.accessSecret; |
|
|
|
} |
|
|
|
|
|
|
|
console.log("获取深i企认证信息成功", { access_key, access_secret }); |
|
|
|
|
|
|
|
const nonce = generateRandomNumber(); |
|
|
|
const timestamp = `${Date.now()}`; |
|
|
|
|
|
|
|
@ -161,41 +244,63 @@ onMounted(() => { |
|
|
|
// 最终还需要转成全小写 |
|
|
|
const signature = sha1(str).toString().toLowerCase(); |
|
|
|
|
|
|
|
if (!access_key || !access_secret) { |
|
|
|
console.log("获取深i企认证信息错误!", "access_key 或 access_secret 为空"); |
|
|
|
} |
|
|
|
|
|
|
|
console.log("生成鉴权参数", { nonce, timestamp, signature }); |
|
|
|
|
|
|
|
// ========== 深i企登录：生产环境模式 ========== |
|
|
|
console.log("开始w6s鉴权，参数:", { access_key, nonce, timestamp, signature }); |
|
|
|
w6s.config({ |
|
|
|
access_key: access_key, |
|
|
|
nonce: nonce, |
|
|
|
timestamp: timestamp, |
|
|
|
signature: signature, |
|
|
|
}).then((res) => { |
|
|
|
console.log("鉴权", res); |
|
|
|
console.log("鉴权成功", res); |
|
|
|
}).catch((err) => { |
|
|
|
console.log("鉴权", err); |
|
|
|
getEnterpriseMerchant(useCommon.enterpriseNumber.toString(), useCommon.phonenumber.toString()); |
|
|
|
console.log("鉴权失败", err); |
|
|
|
}); |
|
|
|
|
|
|
|
w6s.ready(() => { |
|
|
|
console.log("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 => { |
|
|
|
// getSiqLoginAuth({ code: "13b6a16b-1d08-4e9c-b4b6-4cc2101cd770" }, success => { |
|
|
|
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); |
|
|
|
applyLoginResult(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) |
|
|
|
console.log("认证失败", error) |
|
|
|
}) |
|
|
|
}, |
|
|
|
fail: function (err) { |
|
|
|
console.log(err) |
|
|
|
console.log("认证", err); |
|
|
|
console.log("认证失败", err); |
|
|
|
}, |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
}); |
|
|
|
const {VITE_BASE_URL, access_key, access_secret} = import.meta.env; |
|
|
|
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); |
|
|
|
@ -209,210 +314,221 @@ onMounted(() => { |
|
|
|
flex-direction: column; |
|
|
|
height: 100%; |
|
|
|
overflow: hidden; |
|
|
|
background-color: #f4f4f4; |
|
|
|
background: #f0f6ff; |
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; |
|
|
|
} |
|
|
|
|
|
|
|
.warp_body { |
|
|
|
position: relative; |
|
|
|
margin: 0; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background: #c6e6ff url("../../../assets/images/bg_c.jpg") no-repeat top; |
|
|
|
background-size: auto 100%; |
|
|
|
overflow-x: hidden; |
|
|
|
overflow-y: auto; |
|
|
|
|
|
|
|
.carousel_box { |
|
|
|
height: 4rem; |
|
|
|
width: 100%; |
|
|
|
padding-bottom: 0.27rem; |
|
|
|
/* ===== 顶部蓝色背景区域 ===== */ |
|
|
|
.header-bg { |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
flex-shrink: 0; |
|
|
|
line-height: 0; |
|
|
|
background: url('@/assets/images/bg_sz_top.png') center center no-repeat, linear-gradient(180deg, #fff 0%, #def0ff 20%, #60baff 100%); |
|
|
|
background-size: cover; |
|
|
|
width: 100%; |
|
|
|
height: 152px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
} |
|
|
|
.logo_top-img { |
|
|
|
width: 100%; |
|
|
|
height: 150px; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
|
|
|
|
.label_qyd-img { |
|
|
|
height: 30px; |
|
|
|
display: block; |
|
|
|
position: absolute; |
|
|
|
top: 93px; |
|
|
|
} |
|
|
|
|
|
|
|
.boutique_box { |
|
|
|
.slogan_top-img { |
|
|
|
width: 200px; |
|
|
|
height: 30px; |
|
|
|
position: absolute; |
|
|
|
width: 100%; |
|
|
|
bottom: 1%; |
|
|
|
top: 124px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.boutique_body { |
|
|
|
padding: 0 0 0.27rem 0; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
/* ===== 内容区域 ===== */ |
|
|
|
.content-area { |
|
|
|
padding: 0 10px; |
|
|
|
margin-top: 8px; |
|
|
|
position: relative; |
|
|
|
z-index: 2; |
|
|
|
flex: 1; |
|
|
|
overflow-y: auto; |
|
|
|
padding-bottom: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.box-qr-code { |
|
|
|
position: relative; |
|
|
|
margin: 2% 0; |
|
|
|
width: 90%; |
|
|
|
height: 3.67rem; |
|
|
|
text-align: right; |
|
|
|
border-radius: 0.27rem; |
|
|
|
|
|
|
|
.box-qr-code-text { |
|
|
|
position: absolute; |
|
|
|
z-index: 10; |
|
|
|
top: 0.35rem; |
|
|
|
right: 0.35rem; |
|
|
|
display: block; |
|
|
|
font-size: 0.5rem; |
|
|
|
} |
|
|
|
} |
|
|
|
/* 通知栏 */ |
|
|
|
.notice-bar { |
|
|
|
background: #fffbe6; |
|
|
|
border-radius: 10px; |
|
|
|
padding: 8px 10px; |
|
|
|
margin-bottom: 8px; |
|
|
|
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); |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
.notice-icon { |
|
|
|
width: 18px; |
|
|
|
height: 18px; |
|
|
|
min-width: 18px; |
|
|
|
margin-right: 10px; |
|
|
|
object-fit: contain; |
|
|
|
} |
|
|
|
|
|
|
|
.box-qr-code::before { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
top: -0.14rem; |
|
|
|
left: -0.14rem; |
|
|
|
z-index: 0; |
|
|
|
width: calc(100% + 0.13rem); |
|
|
|
height: calc(100% + 0.13rem); |
|
|
|
background-color: #fff; |
|
|
|
border: 0.14rem solid rgba(255, 255, 255, 0.5); |
|
|
|
border-radius: 0.27rem; |
|
|
|
} |
|
|
|
/* 通知滚动 */ |
|
|
|
.notice-scroll { |
|
|
|
flex: 1; |
|
|
|
height: 20px !important; |
|
|
|
line-height: 1.4 !important; |
|
|
|
padding: 0 !important; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
|
|
|
|
.box-qr-code::after { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
z-index: 1; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
border-radius: 0.27rem; |
|
|
|
background: #fff url("../../../assets/images/item_code.jpg") no-repeat left; |
|
|
|
background-size: auto 100%; |
|
|
|
border: 1px solid #8db4ff; |
|
|
|
} |
|
|
|
.notice-text { |
|
|
|
font-size: 14px; |
|
|
|
color: #8c8c8c; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.box-info { |
|
|
|
position: relative; |
|
|
|
margin-right: 2%; |
|
|
|
width: 50%; |
|
|
|
height: 3.67rem; |
|
|
|
text-align: right; |
|
|
|
border-radius: 0.27rem; |
|
|
|
|
|
|
|
.box-info-text { |
|
|
|
position: absolute; |
|
|
|
z-index: 10; |
|
|
|
top: 0.35rem; |
|
|
|
right: 0.35rem; |
|
|
|
display: block; |
|
|
|
font-size: 0.5rem; |
|
|
|
} |
|
|
|
} |
|
|
|
/* 轮播图 */ |
|
|
|
.banner-card { |
|
|
|
border-radius: 16px; |
|
|
|
overflow: hidden; |
|
|
|
margin-bottom: 14px; |
|
|
|
position: relative; |
|
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); |
|
|
|
} |
|
|
|
|
|
|
|
.box-info::before { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
top: -0.14rem; |
|
|
|
left: -0.14rem; |
|
|
|
z-index: 0; |
|
|
|
width: calc(100% + 0.13rem); |
|
|
|
height: calc(100% + 0.13rem); |
|
|
|
background-color: #fff; |
|
|
|
border: 0.14rem solid rgba(255, 255, 255, 0.5); |
|
|
|
border-radius: 0.27rem; |
|
|
|
} |
|
|
|
.banner-inner { |
|
|
|
width: 100%; |
|
|
|
height: 130px; |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.box-info::after { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
z-index: 1; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
border-radius: 0.27rem; |
|
|
|
background: #fff url("../../../assets/images/item_checkc.jpg") no-repeat left; |
|
|
|
background-size: auto 100%; |
|
|
|
border: 1px solid #8db4ff; |
|
|
|
} |
|
|
|
.banner-img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.box-complaint { |
|
|
|
position: relative; |
|
|
|
margin-left: 3%; |
|
|
|
width: 35%; |
|
|
|
height: 3.67rem; |
|
|
|
text-align: right; |
|
|
|
border-radius: 0.27rem; |
|
|
|
|
|
|
|
.box-complaint-text { |
|
|
|
position: absolute; |
|
|
|
z-index: 10; |
|
|
|
top: 0.35rem; |
|
|
|
right: 0.35rem; |
|
|
|
display: block; |
|
|
|
font-size: 0.5rem; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.banner-placeholder { |
|
|
|
font-size: 20px; |
|
|
|
color: rgba(255, 255, 255, 0.85); |
|
|
|
font-weight: 600; |
|
|
|
letter-spacing: 3px; |
|
|
|
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); |
|
|
|
} |
|
|
|
|
|
|
|
.box-complaint::before { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
top: -0.14rem; |
|
|
|
left: -0.14rem; |
|
|
|
z-index: 0; |
|
|
|
width: calc(100% + 0.13rem); |
|
|
|
height: calc(100% + 0.13rem); |
|
|
|
background-color: #fff; |
|
|
|
border: 0.14rem solid rgba(255, 255, 255, 0.5); |
|
|
|
border-radius: 0.27rem; |
|
|
|
:deep(.van-swipe__indicator) { |
|
|
|
width: 8px; |
|
|
|
height: 8px; |
|
|
|
border-radius: 4px; |
|
|
|
background: rgba(255, 255, 255, 0.5); |
|
|
|
transition: all 0.3s; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.van-swipe__indicator--active) { |
|
|
|
width: 20px; |
|
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
|
} |
|
|
|
|
|
|
|
/* 执法监督码卡片 */ |
|
|
|
.supervision-card { |
|
|
|
background: url('../../../assets/images/bg_jdm.jpg') center center no-repeat, linear-gradient(180deg, #7cc5fe 0%, #fff 100%); |
|
|
|
background-size: 100% 100%; |
|
|
|
border-radius: 16px; |
|
|
|
padding: 10px; |
|
|
|
margin-bottom: 14px; |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); |
|
|
|
height: 120px; |
|
|
|
|
|
|
|
.card-title { |
|
|
|
font-size: 16px; |
|
|
|
color: #000; |
|
|
|
// font-weight: 600; |
|
|
|
margin-bottom: 6px; |
|
|
|
margin-top: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
.box-complaint::after { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
z-index: 1; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
border-radius: 0.27rem; |
|
|
|
background: #fff url("../../../assets/images/item_complain.jpg") no-repeat left; |
|
|
|
background-size: auto 100%; |
|
|
|
border: 1px solid #8db4ff; |
|
|
|
.qr-icon-wrap { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: flex-start; |
|
|
|
} |
|
|
|
|
|
|
|
.recommend_box { |
|
|
|
.recommend_body { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.qr-image { |
|
|
|
width: 100px; |
|
|
|
// height: 100px; |
|
|
|
object-fit: contain; |
|
|
|
border-radius: 40px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.logobox { |
|
|
|
position: relative; |
|
|
|
top: 4%; |
|
|
|
left: 5%; |
|
|
|
z-index: 99; |
|
|
|
width: 82%; |
|
|
|
height: 10vh; |
|
|
|
background: url("../../../assets/images/logo.png") no-repeat; |
|
|
|
background-size: 100% auto; |
|
|
|
/* 双卡片行 */ |
|
|
|
.card-row { |
|
|
|
display: flex; |
|
|
|
gap: 12px; |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
@media screen and (max-width: 380px) { |
|
|
|
.home .warp_body { |
|
|
|
background: #c6e6ff url("../../../assets/images/bg_c.jpg") no-repeat top; |
|
|
|
background-size: 100% auto; |
|
|
|
.info-card { |
|
|
|
flex: 1; |
|
|
|
border-radius: 16px; |
|
|
|
padding: 8px 16px; |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
min-height: 100px; |
|
|
|
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-size: 100% 100%; |
|
|
|
|
|
|
|
.card-title { |
|
|
|
font-size: 14px; |
|
|
|
color: #000; |
|
|
|
margin-bottom: 4px; |
|
|
|
margin-top: 4px; |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@media screen and (min-width: 540px) { |
|
|
|
.home .warp_body { |
|
|
|
background: #c6e6ff url("../../../assets/images/bg_c.jpg") no-repeat top; |
|
|
|
background-size: 100% auto; |
|
|
|
.card-icon { |
|
|
|
width: 60px; |
|
|
|
height: 40px; |
|
|
|
// border-radius: 20px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
margin-top: 12px; |
|
|
|
|
|
|
|
.card-icon-img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
border-radius: 50px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.loading-div { |
|
|
|
position: absolute; |
|
|
|
top: 45%; |
|
|
|
left: 48%; |
|
|
|
.info-enforce { |
|
|
|
background: url('../../../assets/images/bg_ajxx.png') center center no-repeat, linear-gradient(180deg, #a6d1f9 0%, #fff 100%); |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
|
|
|
|
/* ===== 底部导航 ===== */ |
|
|
|
.footer_body { |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
