This commit is contained in:
parent
2a68878325
commit
f578bd4515
|
@ -2,12 +2,23 @@
|
|||
<div class="module">
|
||||
<div class="displayFlex left_bg">
|
||||
<div class="flex1">
|
||||
<div class="yd_title" :class="zxjz ? 'left_1' : 'left_1_1'" @click="zxjzChange()" style="cursor: pointer"></div>
|
||||
<div
|
||||
class="yd_title"
|
||||
:class="zxjz ? 'left_1' : 'left_1_1'"
|
||||
@click="zxjzChange()"
|
||||
style="cursor: pointer"
|
||||
></div>
|
||||
<div class="choose">
|
||||
<div :class="jz[0].choose == '1' ? 'choose_1' : 'choose_2'" @click="jzChange(0, '1')">
|
||||
<div
|
||||
:class="jz[0].choose == '1' ? 'choose_1' : 'choose_2'"
|
||||
@click="jzChange(0, '1')"
|
||||
>
|
||||
教育
|
||||
</div>
|
||||
<div :class="jz[0].choose == '2' ? 'choose_1' : 'choose_2'" @click="jzChange(0, '2')">
|
||||
<div
|
||||
:class="jz[0].choose == '2' ? 'choose_1' : 'choose_2'"
|
||||
@click="jzChange(0, '2')"
|
||||
>
|
||||
医疗
|
||||
</div>
|
||||
<!-- <div
|
||||
|
@ -19,7 +30,10 @@
|
|||
</div>
|
||||
<eP1 :list="data.education"></eP1>
|
||||
<div class="choose">
|
||||
<div :class="jz[1].choose == '1' ? 'choose_1' : 'choose_2'" @click="jzChange(1, '1')">
|
||||
<div
|
||||
:class="jz[1].choose == '1' ? 'choose_1' : 'choose_2'"
|
||||
@click="jzChange(1, '1')"
|
||||
>
|
||||
住房
|
||||
</div>
|
||||
<!-- <div
|
||||
|
@ -35,7 +49,7 @@
|
|||
临时救助
|
||||
</div>
|
||||
</div>
|
||||
<eP2 :list="data.housing" ></eP2>
|
||||
<eP2 :list="data.housing"></eP2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="displayFlex center_bg">
|
||||
|
@ -56,7 +70,12 @@
|
|||
<span>金额(元)</span>
|
||||
<!-- <span>数据对比</span> -->
|
||||
</div>
|
||||
<div class="rolling">
|
||||
<div
|
||||
class="rolling"
|
||||
ref="mainRef"
|
||||
@mouseenter="stopAutoScroll"
|
||||
@mouseleave="startAutoScroll"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in data.lifeAssistance.subsidyInformation"
|
||||
:key="index"
|
||||
|
@ -74,13 +93,22 @@
|
|||
<div class="flex1">
|
||||
<div class="yd_title right_1"></div>
|
||||
<div class="choose">
|
||||
<div :class="jz[2].choose == '1' ? 'choose_1' : 'choose_2'" @click="jzChange(2, '1')">
|
||||
<div
|
||||
:class="jz[2].choose == '1' ? 'choose_1' : 'choose_2'"
|
||||
@click="jzChange(2, '1')"
|
||||
>
|
||||
困难残疾人
|
||||
</div>
|
||||
<div :class="jz[2].choose == '2' ? 'choose_1' : 'choose_2'" @click="jzChange(2, '2')">
|
||||
<div
|
||||
:class="jz[2].choose == '2' ? 'choose_1' : 'choose_2'"
|
||||
@click="jzChange(2, '2')"
|
||||
>
|
||||
困难军人
|
||||
</div>
|
||||
<div :class="jz[2].choose == '3' ? 'choose_1' : 'choose_2'" @click="jzChange(2, '3')">
|
||||
<div
|
||||
:class="jz[2].choose == '3' ? 'choose_1' : 'choose_2'"
|
||||
@click="jzChange(2, '3')"
|
||||
>
|
||||
困难职工
|
||||
</div>
|
||||
</div>
|
||||
|
@ -89,7 +117,11 @@
|
|||
<div class="flex1">
|
||||
<div class="yd_title right_2"></div>
|
||||
<div class="dyh">
|
||||
<div class="czr-bj" v-for="(item, index) in data.diversification.hszhxms" :key="index">
|
||||
<div
|
||||
class="czr-bj"
|
||||
v-for="(item, index) in data.diversification.hszhxms"
|
||||
:key="index"
|
||||
>
|
||||
<div class="czrBox">
|
||||
<div>发起单位:</div>
|
||||
<div>{{ item.fqdw }}</div>
|
||||
|
@ -197,7 +229,7 @@ const getData = async () => {
|
|||
await http.get("/api/ggfwyth/succour").then((res) => {
|
||||
if (res.code == 200) {
|
||||
console.log(res.data);
|
||||
data.diversification.hszhxms = res.data.diversification.hszhxms
|
||||
data.diversification.hszhxms = res.data.diversification.hszhxms;
|
||||
// 专项救助模块
|
||||
// 教育&医疗
|
||||
data.education.data = res.data.specialAssistance.education.data;
|
||||
|
@ -221,9 +253,42 @@ const getData = async () => {
|
|||
}
|
||||
});
|
||||
};
|
||||
|
||||
//自动滚动
|
||||
const mainRef = ref(null);
|
||||
let isAutoScrolling = true;
|
||||
|
||||
const stopAutoScroll = () => {
|
||||
isAutoScrolling = false;
|
||||
};
|
||||
|
||||
const startAutoScroll = () => {
|
||||
isAutoScrolling = true;
|
||||
autoScroll();
|
||||
};
|
||||
|
||||
const autoScroll = () => {
|
||||
if (!isAutoScrolling) return;
|
||||
|
||||
const mainEl = mainRef.value;
|
||||
mainEl.scrollTop += 1; // 每次滚动的距离
|
||||
|
||||
if (mainEl.scrollTop + 1 >= mainEl.scrollHeight - mainEl.clientHeight) {
|
||||
setTimeout(() => {
|
||||
mainEl.scrollTo({ top: 0, behavior: "smooth" });
|
||||
setTimeout(autoScroll, 2000); // 2秒后再次滚动到底部
|
||||
}, 1000); // 暂停1秒后开始快速滚回顶部
|
||||
} else {
|
||||
requestAnimationFrame(autoScroll);
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
getData();
|
||||
});
|
||||
onMounted(() => {
|
||||
startAutoScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
@ -757,32 +822,29 @@ onBeforeMount(() => {
|
|||
width: 100%;
|
||||
|
||||
.czr-bj {
|
||||
width: 480px;
|
||||
// height: calc(100% - 26px);
|
||||
background: rgba(0, 103, 165, 0.18);
|
||||
box-shadow: inset 0px 0px 58px 0px rgba(37, 175, 252, 0.47);
|
||||
border-radius: 2px;
|
||||
padding: 20px 26px 1px 32px;
|
||||
margin: 0 auto 12px;
|
||||
// box-sizing: border-box;
|
||||
width: 480px;
|
||||
// height: calc(100% - 26px);
|
||||
background: rgba(0, 103, 165, 0.18);
|
||||
box-shadow: inset 0px 0px 58px 0px rgba(37, 175, 252, 0.47);
|
||||
border-radius: 2px;
|
||||
padding: 20px 26px 1px 32px;
|
||||
margin: 0 auto 12px;
|
||||
// box-sizing: border-box;
|
||||
|
||||
.czrBox {
|
||||
height: 22px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 22px;
|
||||
letter-spacing: 3px;
|
||||
text-shadow: 0px 0px 17px rgba(0, 255, 254, 0.5);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
.czrBox {
|
||||
height: 22px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
letter-spacing: 3px;
|
||||
text-shadow: 0px 0px 17px rgba(0, 255, 254, 0.5);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.school {
|
||||
display: flex;
|
||||
|
@ -830,7 +892,7 @@ onBeforeMount(() => {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
// padding-left: 6px;
|
||||
padding-left: 6px;
|
||||
|
||||
.fundingContent {
|
||||
display: flex;
|
||||
|
|
Loading…
Reference in New Issue