You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
301 lines
7.3 KiB
301 lines
7.3 KiB
<template>
|
|
<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>
|
|
<div class="streamer" @click=""><i></i><span class="marquee"><span class="scroll-text">2024年度宝安区新安街道年度行政执法检查计划</span></span></div>
|
|
<div class="noticbox" @click="toNoticeView"><i></i><span class="new"></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="toScanCodeView">
|
|
<span class="box-qr-code-text">扫码入企</span>
|
|
</div>
|
|
</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="box-complaint" @click="toAnalyseView">
|
|
<span class="box-complaint-text">统计分析</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="recommend_box">
|
|
<van-cell :border="false" title="推荐" />
|
|
<div class="recommend_body">
|
|
<goodsCard :goodsList="recommend"></goodsCard>
|
|
</div>
|
|
</div> -->
|
|
<!-- </refresh-list> -->
|
|
</div>
|
|
|
|
<!-- 底部 -->
|
|
<div class="footer_body">
|
|
<footer-enforcement-nav></footer-enforcement-nav>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="Home">
|
|
import {getEnterpriseMerchantAuthorization} from '../api/Home';
|
|
const { useCommon } = $globalStore;
|
|
const router = useRouter();
|
|
let carouselList = reactive([]); // 轮播列表
|
|
let boutique = reactive([]); // 精品数据
|
|
let recommend = reactive([]); // 推荐
|
|
let freshMap = reactive({
|
|
refreshLoad: false, // 是否刷新
|
|
listLoading: false, // 是否加载中
|
|
listFinished: false, // 是否加载完成标识
|
|
});
|
|
const data = reactive({});
|
|
const boutiqueAttr = reactive({
|
|
columnNum: 4,
|
|
itemClass: "boutique_item",
|
|
goodsCradclass: "boutique-crad",
|
|
}); // 商品卡片展示
|
|
|
|
//获取轮播
|
|
const getCarousel = async () => {
|
|
// const res = await useHome.getCarousel();
|
|
// if (res?.code === 20000) {
|
|
// carouselList = res?.data;
|
|
// }
|
|
};
|
|
|
|
//精品
|
|
const boutiqueGoods = async () => {
|
|
// const res = await useHome.boutiqueGoods();
|
|
// if (res?.code === 20000) {
|
|
// boutique = res?.data;
|
|
// }
|
|
};
|
|
|
|
/**扫码入企 */
|
|
const toScanCodeView = async() =>{
|
|
router.push({ path: "/enforce/scanQrCode" });
|
|
};
|
|
|
|
const toRegistrationListView = async() =>{
|
|
router.push({
|
|
path: "/historyCheck",
|
|
});
|
|
}
|
|
const toComplaintView = async() =>{
|
|
router.push({
|
|
path: "/enterprise/complaint",
|
|
});
|
|
}
|
|
const toAnalyseView = async() =>{
|
|
router.push({
|
|
path: "/analyse",
|
|
});
|
|
}
|
|
const toNoticeView = async() =>{
|
|
router.push({
|
|
path: "/enforce/enforceNotice",
|
|
});
|
|
}
|
|
|
|
//下拉刷新
|
|
const onRefresh = () => {
|
|
freshMap.listFinished = false;
|
|
freshMap.listLoading = true;
|
|
freshMap.refreshLoad = true;
|
|
// Promise.all([getCarousel(), boutiqueGoods(), recommendGoods()]).then(() => {
|
|
// freshMap.refreshLoad = false;
|
|
// });
|
|
};
|
|
|
|
// 触底加载
|
|
const onLoad = () => {
|
|
// recommendGoods(true);
|
|
};
|
|
|
|
onMounted(() => {
|
|
getEnterpriseMerchantAuthorization({merchantTel: useCommon.phonenumber},success =>{
|
|
if(!(success.data == null && success.data.length == 0)){
|
|
useCommon.SET_USER_ENTERPRISE_NUMBER(success.data[0].enterpriseNumber);
|
|
}
|
|
},error =>{
|
|
})
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.home {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background-color: #f4f4f4;
|
|
|
|
.warp_body {
|
|
position: relative;
|
|
background: url("../assets/images/bg_el.jpg");
|
|
background-size: cover;
|
|
overflow-x: hidden;
|
|
.carousel_box {
|
|
height: 150px;
|
|
width: 100%;
|
|
padding-bottom: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.boutique_box {
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: 1%;
|
|
.boutique_body {
|
|
padding: 0px 0px 10px 0px;
|
|
display: flex;
|
|
justify-content: center;
|
|
};
|
|
.box-qr-code{
|
|
width: 90%;
|
|
text-align: right;
|
|
height: 3.66667rem;
|
|
background-color: #ff976a;
|
|
border-radius: 10px;
|
|
background: url("../assets/images/item_scan.png");
|
|
background-size: cover;
|
|
.box-qr-code-text{
|
|
margin: 0.35rem 0.5rem 0 0;
|
|
display: block;
|
|
font-size: 17px
|
|
}
|
|
}
|
|
.box-info{
|
|
width: 52%;
|
|
text-align: right;
|
|
height: 3.66667rem;
|
|
background-color: #ff976a;
|
|
border-radius: 10px;
|
|
background: url("../assets/images/item_checkc.png");
|
|
background-size: cover;
|
|
|
|
.box-info-text{
|
|
margin: 0.35rem 0.5rem 0 0;
|
|
display: block;
|
|
font-size: 17px
|
|
}
|
|
}
|
|
.box-complaint{
|
|
width: 36%;
|
|
text-align: right;
|
|
height: 3.66667rem;
|
|
background-color: #ff976a;
|
|
border-radius: 10px;
|
|
margin-left: 2%;
|
|
background: url("../assets/images/item_count.png");
|
|
background-size: cover;
|
|
.box-complaint-text{
|
|
margin: 0.35rem 0.5rem 0 0;
|
|
display: block;
|
|
font-size: 17px
|
|
}
|
|
}
|
|
}
|
|
|
|
.recommend_box {
|
|
.recommend_body {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.streamer, .noticbox {
|
|
display: flex;
|
|
position: absolute;
|
|
top: calc(1% + 10vh);
|
|
right: 3%;
|
|
z-index: 999;
|
|
padding: 0 0.25rem;
|
|
width: 90%;
|
|
min-height: 1rem;
|
|
background-color: rgba(249, 238, 219, .9);
|
|
border-radius: 0.5rem;
|
|
color: #ab6a05;
|
|
font-size: 0.45rem;
|
|
line-height: 1.0rem;
|
|
white-space: nowrap;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
.noticbox {
|
|
top: 42%;
|
|
right: 0;
|
|
padding: 0 0.2rem;
|
|
width: 1.85rem;
|
|
min-height: 1rem;
|
|
background-color: rgba(249, 238, 219, .7);
|
|
border-radius: 0.5rem 0 0 0.5rem;
|
|
color: #000;
|
|
}
|
|
|
|
.streamer > i, .noticbox > i {
|
|
display: inline-block;
|
|
position: relative;
|
|
top: 0.18rem;
|
|
margin: 0 0.3rem 0 0;
|
|
width: 0.6rem;
|
|
height: 0.6rem;
|
|
background: url("../assets/images/icon_notice.png") no-repeat;
|
|
background-size: auto 100%;
|
|
}
|
|
|
|
.streamer .marquee {
|
|
display: inline-block;
|
|
width: calc(100% - 1rem); /* 或者你想要的宽度 */
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.scroll-text {
|
|
display: inline-block;
|
|
padding-left: 100%; /* 初始时隐藏在右侧 */
|
|
animation: marquee 5s linear infinite; /* 设置动画 */
|
|
}
|
|
|
|
@keyframes marquee {
|
|
0% { transform: translateX(0); } /* 动画开始时 */
|
|
100% { transform: translateX(-100%); } /* 动画结束时，文字完全移动到左侧并重新开始 */
|
|
}
|
|
|
|
.noticbox span.new {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0.1rem;
|
|
left: 0.85rem;
|
|
width: 0.2rem;
|
|
height: 0.2rem;
|
|
background: #ff1414;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</style>
|
|
|