|
|
|
@ -1,5 +1,5 @@ |
|
|
|
<template> |
|
|
|
<!--<Loading class="loading-div" type="spinner" v-show="isLoading" color="#1989fa"/>--> |
|
|
|
<!--<Loading class="loading-div" type="spinner" v-show="isLoading" color="#1989fa"/>--> |
|
|
|
<div class="home app_content" v-if="!isLoading"> |
|
|
|
<!-- <div class="home app_content"> --> |
|
|
|
<!-- 导航栏 --> |
|
|
|
@ -10,18 +10,27 @@ |
|
|
|
<div class="warp_body"> |
|
|
|
<div class="logobox"></div> |
|
|
|
<div class="noticeContent"> |
|
|
|
<ul v-if="data.notNull" class="notice_list" :class="data.noticeList.length>1?{notice_top:freshMap.animate}:''"> |
|
|
|
<li v-for="(item, index) in data.noticeList" :key="index" @click="toNoticeDetail(item) "> |
|
|
|
<span>{{item.content}}</span> |
|
|
|
<ul |
|
|
|
v-if="data.notNull" |
|
|
|
class="notice_list" |
|
|
|
:class=" |
|
|
|
data.noticeList.length > 1 ? { notice_top: freshMap.animate } : '' |
|
|
|
" |
|
|
|
> |
|
|
|
<li |
|
|
|
v-for="(item, index) in data.noticeList" |
|
|
|
:key="index" |
|
|
|
@click="toNoticeDetail(item)" |
|
|
|
> |
|
|
|
<span>{{ item.content }}</span> |
|
|
|
<van-icon name="arrow" /> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
<ul v-else class="notice_list" > |
|
|
|
<ul v-else class="notice_list"> |
|
|
|
<li>近一星期暂无通知消息</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
<div class="carousel_box" @onLoad="onLoad"> |
|
|
|
</div> |
|
|
|
<div class="carousel_box" @onLoad="onLoad"></div> |
|
|
|
<div class="boutique_box"> |
|
|
|
<!-- <van-cell :border="false" title="精品" /> --> |
|
|
|
<div class="boutique_body"> |
|
|
|
@ -31,7 +40,13 @@ |
|
|
|
</div> --> |
|
|
|
<div class="box-qr-code"> |
|
|
|
<span class="box-qr-code-text">扫码入企</span> |
|
|
|
<div class="link-text"><span @click="toScanCodeView">行政执法<van-icon name="arrow" /></span><span @click="toNonLawView">非行政执法<van-icon name="arrow" /></span></div> |
|
|
|
<div class="link-text"> |
|
|
|
<span @click="toScanCodeView" |
|
|
|
>行政执法<van-icon name="arrow" /></span |
|
|
|
><span @click="toNonLawView" |
|
|
|
>非行政执法<van-icon name="arrow" |
|
|
|
/></span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="boutique_body"> |
|
|
|
@ -54,41 +69,44 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup name="Home"> |
|
|
|
import Vconsolefrom from 'vconsole'; |
|
|
|
import {Loading, showFailToast,showToast, showSuccessToast} from 'vant'; |
|
|
|
import {getEnterpriseMerchantAuthorization, getSzyptLoginAuth} from '../api/Home'; |
|
|
|
import {queryEnforcementNotice} from "@/api/enforce"; |
|
|
|
|
|
|
|
const isLoading = ref(true); |
|
|
|
const {useCommon} = $globalStore; |
|
|
|
const router = useRouter(); |
|
|
|
const route = useRoute(); |
|
|
|
var carouselList = reactive([]); // 轮播列表 |
|
|
|
let boutique = reactive([]); // 精品数据 |
|
|
|
let recommend = reactive([]); // 推荐 |
|
|
|
let freshMap = reactive({ |
|
|
|
import Vconsolefrom from "vconsole"; |
|
|
|
import { Loading, showFailToast, showToast, showSuccessToast } from "vant"; |
|
|
|
import { |
|
|
|
getEnterpriseMerchantAuthorization, |
|
|
|
getSzyptLoginAuth, |
|
|
|
} from "../api/Home"; |
|
|
|
import { queryEnforcementNotice } from "@/api/enforce"; |
|
|
|
|
|
|
|
const isLoading = ref(true); |
|
|
|
const { useCommon } = $globalStore; |
|
|
|
const router = useRouter(); |
|
|
|
const route = useRoute(); |
|
|
|
var carouselList = reactive([]); // 轮播列表 |
|
|
|
let boutique = reactive([]); // 精品数据 |
|
|
|
let recommend = reactive([]); // 推荐 |
|
|
|
let freshMap = reactive({ |
|
|
|
refreshLoad: false, // 是否刷新 |
|
|
|
listLoading: false, // 是否加载中 |
|
|
|
listFinished: false, // 是否加载完成标识 |
|
|
|
key: 0, |
|
|
|
animate: false |
|
|
|
}); |
|
|
|
animate: false, |
|
|
|
}); |
|
|
|
|
|
|
|
const noticeList = []; |
|
|
|
// 模拟异步数据加载 |
|
|
|
// setTimeout(() => { |
|
|
|
const noticeList = []; |
|
|
|
// 模拟异步数据加载 |
|
|
|
// setTimeout(() => { |
|
|
|
|
|
|
|
// // 如果不是执法用户 则跳转 |
|
|
|
// router.push( |
|
|
|
// { |
|
|
|
// path: "/noAccess" |
|
|
|
// }); |
|
|
|
// isLoading.value = false; |
|
|
|
// // 如果不是执法用户 则跳转 |
|
|
|
// router.push( |
|
|
|
// { |
|
|
|
// path: "/noAccess" |
|
|
|
// }); |
|
|
|
// isLoading.value = false; |
|
|
|
|
|
|
|
// }, 3000); |
|
|
|
// }, 3000); |
|
|
|
|
|
|
|
//定时器 |
|
|
|
let noticeObj = reactive({ |
|
|
|
//定时器 |
|
|
|
let noticeObj = reactive({ |
|
|
|
noticeList: [], |
|
|
|
notificationtext: "", |
|
|
|
noticeTimer: null, |
|
|
|
@ -96,95 +114,96 @@ |
|
|
|
offset: 0, |
|
|
|
step: 3, |
|
|
|
speed: 20, |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
const data = reactive({ |
|
|
|
const data = reactive({ |
|
|
|
noticeList: [], |
|
|
|
notNull:true |
|
|
|
}); |
|
|
|
const adviceList = reactive([]); |
|
|
|
const boutiqueAttr = reactive({ |
|
|
|
notNull: true, |
|
|
|
}); |
|
|
|
const adviceList = reactive([]); |
|
|
|
const boutiqueAttr = reactive({ |
|
|
|
columnNum: 4, |
|
|
|
itemClass: "boutique_item", |
|
|
|
goodsCradclass: "boutique-crad", |
|
|
|
}); // 商品卡片展示 |
|
|
|
}); // 商品卡片展示 |
|
|
|
|
|
|
|
//获取轮播 |
|
|
|
const getCarousel = async () => { |
|
|
|
//获取轮播 |
|
|
|
const getCarousel = async () => { |
|
|
|
// const res = await useHome.getCarousel(); |
|
|
|
// if (res?.code === 20000) { |
|
|
|
// carouselList = res?.data; |
|
|
|
// } |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
//精品 |
|
|
|
const boutiqueGoods = async () => { |
|
|
|
//精品 |
|
|
|
const boutiqueGoods = async () => { |
|
|
|
// const res = await useHome.boutiqueGoods(); |
|
|
|
// if (res?.code === 20000) { |
|
|
|
// boutique = res?.data; |
|
|
|
// } |
|
|
|
}; |
|
|
|
var noticeStr = reactive(""); |
|
|
|
}; |
|
|
|
var noticeStr = reactive(""); |
|
|
|
|
|
|
|
/**扫码入企 */ |
|
|
|
const toScanCodeView = async () => { |
|
|
|
/**扫码入企 */ |
|
|
|
const toScanCodeView = async () => { |
|
|
|
if (useCommon.hasLaw) { |
|
|
|
// 执法人员才有权限进入 |
|
|
|
router.push({path: "/enforce/scanQrCode"}); |
|
|
|
router.push({ path: "/enforce/scanQrCode" }); |
|
|
|
} else { |
|
|
|
showFailToast('非行政执法人员无法使用该功能'); |
|
|
|
showFailToast("非行政执法人员无法使用该功能"); |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
/** 非行政执法 */ |
|
|
|
const toNonLawView = async () => { |
|
|
|
/** 非行政执法 */ |
|
|
|
const toNonLawView = async () => { |
|
|
|
// 所有人都有权限进入 |
|
|
|
router.push({path: "/non-scan"}); |
|
|
|
}; |
|
|
|
router.push({ path: "/non-scan" }); |
|
|
|
}; |
|
|
|
|
|
|
|
const toRegistrationListView = async () => { |
|
|
|
const toRegistrationListView = async () => { |
|
|
|
if (useCommon.hasLaw) { |
|
|
|
// 执法人员才有权限进入 |
|
|
|
router.push({path: "/historyCheck"}); |
|
|
|
router.push({ path: "/historyCheck" }); |
|
|
|
} else { |
|
|
|
showFailToast('非行政执法人员无法使用该功能'); |
|
|
|
} |
|
|
|
showFailToast("非行政执法人员无法使用该功能"); |
|
|
|
} |
|
|
|
const toComplaintView = async () => { |
|
|
|
}; |
|
|
|
const toComplaintView = async () => { |
|
|
|
router.push({ |
|
|
|
path: "/enterprise/complaint", |
|
|
|
}); |
|
|
|
} |
|
|
|
const toAnalyseView = async () => { |
|
|
|
/* router.push({path: "/analyse"}); */ |
|
|
|
}; |
|
|
|
const toAnalyseView = async () => { |
|
|
|
/* router.push({path: "/analyse"}); */ |
|
|
|
if (useCommon.hasLaw) { |
|
|
|
// 执法人员才有权限进入 |
|
|
|
router.push({path: "/comprehensiveAnalysis"}); |
|
|
|
router.push({ path: "/comprehensiveAnalysis" }); |
|
|
|
} else { |
|
|
|
showFailToast('非行政执法人员无法使用该功能'); |
|
|
|
} |
|
|
|
showFailToast("非行政执法人员无法使用该功能"); |
|
|
|
} |
|
|
|
const toNoticeView = async () => { |
|
|
|
}; |
|
|
|
const toNoticeView = async () => { |
|
|
|
router.push({ |
|
|
|
path: "/enforce/enforceNotice", |
|
|
|
}); |
|
|
|
} |
|
|
|
const toNoticeDetail = async (item) => { |
|
|
|
}; |
|
|
|
const toNoticeDetail = async (item) => { |
|
|
|
if (null != item) { |
|
|
|
router.push( |
|
|
|
{ |
|
|
|
router.push({ |
|
|
|
path: "/enforce/enforceNotice", |
|
|
|
query: { |
|
|
|
type:item.type |
|
|
|
} |
|
|
|
type: item.type, |
|
|
|
}, |
|
|
|
}); |
|
|
|
} else { |
|
|
|
showFailToast("没有执行计划") |
|
|
|
} |
|
|
|
} |
|
|
|
const queryList = () => { |
|
|
|
queryEnforcementNotice({isPublish:1,dateType:4}, success => { |
|
|
|
/* if (success.rows.length > 4) { |
|
|
|
showFailToast("没有执行计划"); |
|
|
|
} |
|
|
|
}; |
|
|
|
const queryList = () => { |
|
|
|
queryEnforcementNotice( |
|
|
|
{ isPublish: 1, dateType: 4 }, |
|
|
|
(success) => { |
|
|
|
/* if (success.rows.length > 4) { |
|
|
|
for (let i = 0; i < 5; i++) { |
|
|
|
carouselList.push(success.rows[i]); |
|
|
|
noticeObj.noticeList.push(success.rows[i].planName) |
|
|
|
@ -200,21 +219,21 @@ |
|
|
|
noticeStr += success.rows[0].planName != null ? success.rows[0].planName + "" : ""; |
|
|
|
} else { */ |
|
|
|
carouselList = success.rows; |
|
|
|
if(carouselList.length==0){ |
|
|
|
data.notNull=false |
|
|
|
if (carouselList.length == 0) { |
|
|
|
data.notNull = false; |
|
|
|
} |
|
|
|
for (let index = 0; index < success.rows.length; index++) { |
|
|
|
const element = success.rows[index]; |
|
|
|
console.log(element); |
|
|
|
// element.planName = element.planYear + element.planName; |
|
|
|
if(element.timeType == 'quarter'){ |
|
|
|
if (element.timeType == "quarter") { |
|
|
|
let val = ""; |
|
|
|
if(element.quarter == "1") val = "一季度"; |
|
|
|
if(element.quarter == "2") val = "二季度"; |
|
|
|
if(element.quarter == "3") val = "三季度"; |
|
|
|
if(element.quarter == "4") val = "四季度"; |
|
|
|
if (element.quarter == "1") val = "一季度"; |
|
|
|
if (element.quarter == "2") val = "二季度"; |
|
|
|
if (element.quarter == "3") val = "三季度"; |
|
|
|
if (element.quarter == "4") val = "四季度"; |
|
|
|
element.planName = element.planYear + "年" + val + element.planName; |
|
|
|
}else if (element.timeType == 'mouth') { |
|
|
|
} else if (element.timeType == "mouth") { |
|
|
|
const val = element.mouth + "月"; |
|
|
|
element.planName = element.planYear + "年" + val + element.planName; |
|
|
|
} |
|
|
|
@ -222,80 +241,87 @@ |
|
|
|
noticeObj.noticeList.push(element.planName); |
|
|
|
var obj = { |
|
|
|
content: element.planName, |
|
|
|
id:element.id, |
|
|
|
type:element.type |
|
|
|
} |
|
|
|
data.noticeList.push(obj) |
|
|
|
id: element.id, |
|
|
|
type: element.type, |
|
|
|
}; |
|
|
|
data.noticeList.push(obj); |
|
|
|
} |
|
|
|
freshMap.key = 1 |
|
|
|
freshMap.key = 1; |
|
|
|
console.log(carouselList); |
|
|
|
console.log(data.noticeList); |
|
|
|
// timerObj.timer = setInterval(flushMessage, 4000); |
|
|
|
setNotificationMove(); |
|
|
|
}, error => { |
|
|
|
|
|
|
|
}) |
|
|
|
} |
|
|
|
const flushMessage = () => { |
|
|
|
}, |
|
|
|
(error) => {}, |
|
|
|
); |
|
|
|
}; |
|
|
|
const flushMessage = () => { |
|
|
|
timerObj.value++; |
|
|
|
freshMap.key = timerObj.value; |
|
|
|
if (carouselList.length == timerObj.value) { |
|
|
|
timerObj.value = 0; |
|
|
|
} |
|
|
|
freshMap.key = timerObj.value; |
|
|
|
noticeStr = carouselList[timerObj.value].planName |
|
|
|
} |
|
|
|
noticeStr = carouselList[timerObj.value].planName; |
|
|
|
}; |
|
|
|
|
|
|
|
//下拉刷新 |
|
|
|
const onRefresh = () => { |
|
|
|
//下拉刷新 |
|
|
|
const onRefresh = () => { |
|
|
|
freshMap.listFinished = false; |
|
|
|
freshMap.listLoading = true; |
|
|
|
freshMap.refreshLoad = true; |
|
|
|
// Promise.all([getCarousel(), boutiqueGoods(), recommendGoods()]).then(() => { |
|
|
|
// freshMap.refreshLoad = false; |
|
|
|
// }); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
// 触底加载 |
|
|
|
const onLoad = () => { |
|
|
|
// 触底加载 |
|
|
|
const onLoad = () => { |
|
|
|
// recommendGoods(true); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
onMounted(() => { |
|
|
|
// new Vconsolefrom(); |
|
|
|
let fullUrl = window.location.href; |
|
|
|
let code = fullUrl.substring(fullUrl.indexOf('code=') + 5, fullUrl.indexOf('&state=')); |
|
|
|
console.log(useCommon.firstLoad) |
|
|
|
let code = fullUrl.substring( |
|
|
|
fullUrl.indexOf("code=") + 5, |
|
|
|
fullUrl.indexOf("&state="), |
|
|
|
); |
|
|
|
console.log(useCommon.firstLoad); |
|
|
|
isLoading.value = useCommon.firstLoad; |
|
|
|
// getSzyptLoginAuth(route?.query?.code,success =>{ |
|
|
|
getSzyptLoginAuth(code, success => { |
|
|
|
getSzyptLoginAuth( |
|
|
|
code, |
|
|
|
(success) => { |
|
|
|
useCommon.SET_USER_ID(success.data.userId); |
|
|
|
useCommon.SET_TOKEN(success.data.token); |
|
|
|
useCommon.SET_HAS_LAW(success.data.lawOfficer); |
|
|
|
useCommon.SET_ORG_ID(success.data.bureauDept.deptId); |
|
|
|
// useCommon.SET_HAS_LAW(true); |
|
|
|
useCommon.SET_HAS_LAW(true); |
|
|
|
// if (useCommon.firstLoad) { |
|
|
|
isLoading.value = false; |
|
|
|
// } |
|
|
|
//设置已经初始化 |
|
|
|
useCommon.SET_IS_FIRST_LOAD(false) |
|
|
|
useCommon.SET_IS_FIRST_LOAD(false); |
|
|
|
queryList(); |
|
|
|
// 如果不是执法用户 则跳转 |
|
|
|
// if (!success.data.lawOfficer) { |
|
|
|
// // router.replace({ path: "/noAccess" }); |
|
|
|
// } |
|
|
|
}, error => { |
|
|
|
}, |
|
|
|
(error) => { |
|
|
|
queryList(); |
|
|
|
}) |
|
|
|
}, |
|
|
|
); |
|
|
|
setInterval(showNotice, 3000); |
|
|
|
// isLoading.value = false; |
|
|
|
// queryList(); |
|
|
|
}); |
|
|
|
const setNotificationMove = () => { |
|
|
|
}); |
|
|
|
const setNotificationMove = () => { |
|
|
|
// 清除定时器 |
|
|
|
clearInterval(noticeObj.noticeTimer); |
|
|
|
const notificationContainer = document.getElementById( |
|
|
|
"notification-container" |
|
|
|
"notification-container", |
|
|
|
); |
|
|
|
const notificationWidth = notificationContainer.offsetWidth; |
|
|
|
let index = 0; |
|
|
|
@ -321,14 +347,16 @@ |
|
|
|
} |
|
|
|
notification.style.transform = `translateX(${noticeObj.offset}px)`; |
|
|
|
}, noticeObj.speed); |
|
|
|
} |
|
|
|
const delayNoticeMove = () => { |
|
|
|
}; |
|
|
|
const delayNoticeMove = () => { |
|
|
|
const notification = document.getElementById("notification"); |
|
|
|
let currentOffset = notification.style.transform; |
|
|
|
if (currentOffset) { |
|
|
|
currentOffset = currentOffset.split("(")[1]; |
|
|
|
currentOffset = currentOffset.substring(0, currentOffset.indexOf("px")); |
|
|
|
let duration = ((Number(currentOffset) + noticeObj.itemWidth) / noticeObj.step) * noticeObj.speed; |
|
|
|
let duration = |
|
|
|
((Number(currentOffset) + noticeObj.itemWidth) / noticeObj.step) * |
|
|
|
noticeObj.speed; |
|
|
|
// 判断当前还有多久滚动完毕 添加一个setTimeout等待滚动结束后重新计时 |
|
|
|
setTimeout(() => { |
|
|
|
this.setNotificationMove(); |
|
|
|
@ -336,21 +364,19 @@ |
|
|
|
} else { |
|
|
|
this.setNotificationMove(); |
|
|
|
} |
|
|
|
} |
|
|
|
const showNotice = () => { |
|
|
|
freshMap.animate = true |
|
|
|
}; |
|
|
|
const showNotice = () => { |
|
|
|
freshMap.animate = true; |
|
|
|
setTimeout(() => { |
|
|
|
data.noticeList.push(data.noticeList[0]) |
|
|
|
data.noticeList.shift() |
|
|
|
freshMap.animate = false |
|
|
|
}, 500) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
data.noticeList.push(data.noticeList[0]); |
|
|
|
data.noticeList.shift(); |
|
|
|
freshMap.animate = false; |
|
|
|
}, 500); |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
|
.home { |
|
|
|
.home { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
height: 100%; |
|
|
|
@ -371,9 +397,7 @@ |
|
|
|
height: 4rem; |
|
|
|
width: 100%; |
|
|
|
padding-bottom: 0.27rem; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.boutique_box { |
|
|
|
@ -528,10 +552,9 @@ |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.streamer { |
|
|
|
.streamer { |
|
|
|
display: flex; |
|
|
|
position: absolute; |
|
|
|
top: calc(1% + 10vh); |
|
|
|
@ -540,16 +563,16 @@ |
|
|
|
padding: 0 0.25rem; |
|
|
|
width: 90%; |
|
|
|
min-height: 1rem; |
|
|
|
background-color: rgba(249, 238, 219, .9); |
|
|
|
background-color: rgba(249, 238, 219, 0.9); |
|
|
|
border-radius: 0.5rem; |
|
|
|
color: #c35b01; |
|
|
|
font-size: 0.42rem; |
|
|
|
line-height: 1.0rem; |
|
|
|
line-height: 1rem; |
|
|
|
white-space: nowrap; |
|
|
|
box-sizing: content-box; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.noticbox { |
|
|
|
.noticbox { |
|
|
|
display: flex; |
|
|
|
position: absolute; |
|
|
|
top: calc(1% + 10vh); |
|
|
|
@ -558,27 +581,28 @@ |
|
|
|
padding: 0 0.25rem; |
|
|
|
width: 90%; |
|
|
|
min-height: 1rem; |
|
|
|
background-color: rgba(249, 238, 219, .9); |
|
|
|
background-color: rgba(249, 238, 219, 0.9); |
|
|
|
border-radius: 0.5rem; |
|
|
|
color: #c35b01; |
|
|
|
font-size: 0.42rem; |
|
|
|
line-height: 1.0rem; |
|
|
|
line-height: 1rem; |
|
|
|
white-space: nowrap; |
|
|
|
box-sizing: content-box; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.noticbox { |
|
|
|
.noticbox { |
|
|
|
top: 33%; |
|
|
|
right: 0; |
|
|
|
padding: 0 0.2rem; |
|
|
|
width: 1.9rem; |
|
|
|
min-height: 1rem; |
|
|
|
background-color: rgba(249, 238, 219, .7); |
|
|
|
background-color: rgba(249, 238, 219, 0.7); |
|
|
|
border-radius: 0.5rem 0 0 0.5rem; |
|
|
|
color: #000; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.streamer > i, .noticbox > i { |
|
|
|
.streamer > i, |
|
|
|
.noticbox > i { |
|
|
|
display: inline-block; |
|
|
|
position: relative; |
|
|
|
top: 0.18rem; |
|
|
|
@ -587,31 +611,31 @@ |
|
|
|
height: 0.6rem; |
|
|
|
background: url("../assets/images/icon_notice.png") no-repeat; |
|
|
|
background-size: auto 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.noticbox > i { |
|
|
|
.noticbox > i { |
|
|
|
top: 0.1rem; |
|
|
|
margin: 0 0.2rem 0 0; |
|
|
|
width: 0.8rem; |
|
|
|
height: 0.8rem; |
|
|
|
background: url("../assets/images/icon_notice3.png") no-repeat; |
|
|
|
background-size: auto 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.streamer .marquee { |
|
|
|
.streamer .marquee { |
|
|
|
display: inline-block; |
|
|
|
width: calc(100% - 1rem); /* 或者你想要的宽度 */ |
|
|
|
overflow: hidden; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .scroll-text { |
|
|
|
::v-deep .scroll-text { |
|
|
|
display: inline-block; |
|
|
|
padding-left: 100%; /* 初始时隐藏在右侧 */ |
|
|
|
animation: marquee 5s linear infinite; /* 设置动画 */ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes marquee { |
|
|
|
@keyframes marquee { |
|
|
|
0% { |
|
|
|
transform: translateX(0); |
|
|
|
} |
|
|
|
@ -620,9 +644,9 @@ |
|
|
|
transform: translateX(-100%); |
|
|
|
} |
|
|
|
/* 动画结束时，文字完全移动到左侧并重新开始 */ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.noticbox span.new { |
|
|
|
.noticbox span.new { |
|
|
|
display: block; |
|
|
|
position: absolute; |
|
|
|
top: 0.1rem; |
|
|
|
@ -631,9 +655,9 @@ |
|
|
|
height: 0.2rem; |
|
|
|
background: #ff1414; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.logobox { |
|
|
|
.logobox { |
|
|
|
position: relative; |
|
|
|
top: 4%; |
|
|
|
left: 5%; |
|
|
|
@ -642,37 +666,37 @@ |
|
|
|
height: 10vh; |
|
|
|
background: url("../assets/images/logo.png") no-repeat; |
|
|
|
background-size: 100% auto; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.loading-div { |
|
|
|
.loading-div { |
|
|
|
position: absolute; |
|
|
|
top: 45%; |
|
|
|
left: 48%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.notice-bar-container { |
|
|
|
.notice-bar-container { |
|
|
|
margin-bottom: 0.27rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.notice-bar-container:last-child { |
|
|
|
.notice-bar-container:last-child { |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@media screen and (max-width: 380px) { |
|
|
|
@media screen and (max-width: 380px) { |
|
|
|
.home .warp_body { |
|
|
|
background: #c6e6ff url("../assets/images/bg_el.jpg") no-repeat top; |
|
|
|
background-size: 100% auto; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@media screen and (min-width: 540px) { |
|
|
|
@media screen and (min-width: 540px) { |
|
|
|
.home .warp_body { |
|
|
|
background: #c6e6ff url("../assets/images/bg_el.jpg") no-repeat top; |
|
|
|
background-size: 100% auto; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.noticeContent { |
|
|
|
.noticeContent { |
|
|
|
position: absolute; |
|
|
|
top: calc(2% + 10vh); |
|
|
|
right: 3%; |
|
|
|
@ -685,13 +709,13 @@ |
|
|
|
color: #df6104; |
|
|
|
box-sizing: border-box; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.noticeContent ul { |
|
|
|
.noticeContent ul { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.noticeContent li { |
|
|
|
.noticeContent li { |
|
|
|
display: flex; |
|
|
|
position: relative; |
|
|
|
margin: 0.27rem 0 0 0; |
|
|
|
@ -702,10 +726,9 @@ |
|
|
|
height: 0.5rem; |
|
|
|
font-size: 0.37rem; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.noticeContent li::before { |
|
|
|
.noticeContent li::before { |
|
|
|
display: inline-block; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
@ -715,43 +738,42 @@ |
|
|
|
height: 0.5rem; |
|
|
|
background: url("../assets/images/icon_notice.png") no-repeat; |
|
|
|
background-size: auto 85%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.noticeContent li span { |
|
|
|
.noticeContent li span { |
|
|
|
width: calc(100% - 1.6rem); |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.notice_list { |
|
|
|
.notice_list { |
|
|
|
display: block; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.notice_list li i { |
|
|
|
.notice_list li i { |
|
|
|
float: right; |
|
|
|
margin-top: 0.05rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.notice_top { |
|
|
|
.notice_top { |
|
|
|
transition: all 0.5s; |
|
|
|
margin-top: -30px; |
|
|
|
} |
|
|
|
.link-text { |
|
|
|
} |
|
|
|
.link-text { |
|
|
|
position: absolute; |
|
|
|
z-index: 10; |
|
|
|
top: 10%; |
|
|
|
right: 0.35rem; |
|
|
|
font-size: 0.4rem; |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.link-text span { |
|
|
|
.link-text span { |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
@ -764,19 +786,17 @@ |
|
|
|
box-shadow: 0 0 0.15rem #c4d7f7; |
|
|
|
line-height: 1.5; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.link-text span:first-child { |
|
|
|
.link-text span:first-child { |
|
|
|
background-color: #336bff; |
|
|
|
border-color: #336bff; |
|
|
|
box-shadow: 0 0 0.15rem #2660f9; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.link-text span i.van-icon { |
|
|
|
.link-text span i.van-icon { |
|
|
|
position: absolute; |
|
|
|
right: 0.1rem; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
|
|
|
|
