22 changed files with 305 additions and 101 deletions
@ -0,0 +1,19 @@ |
|||
import request from '@/utils/http.ts' |
|||
|
|||
/** |
|||
* 获取政策资讯列表 |
|||
* @param params |
|||
* @returns |
|||
*/ |
|||
export const gePolicytList = (params: object) => { |
|||
return request.get('/byspc/mzPolicy/page', params) |
|||
} |
|||
|
|||
/** |
|||
* 获取政策资讯信息 |
|||
* @param id |
|||
* @returns |
|||
*/ |
|||
export const getPolicyInfo = (id: number) => { |
|||
return request.get(`/asdh5/mzPolicy/${id}`) |
|||
} |
|||
|
Before Width: | Height: | Size: 352 KiB |
|
After Width: | Height: | Size: 171 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 65 KiB |
|
After Width: | Height: | Size: 4.7 MiB |
@ -1,20 +1,54 @@ |
|||
<template> |
|||
<div class="md:w-[calc(100%-60px)] overflow-hidden mx-auto" > |
|||
<div class="flex"> |
|||
<div>青岛市委人才工作领导小组</div> |
|||
<div class="w-full bg-blue-400 h-2"></div> |
|||
<div |
|||
class="md:w-[calc(100%)] h-40 overflow-hidden flex items-center justify-center bg-bottom px-48" |
|||
> |
|||
<div class="flex items-center w-full"> |
|||
<img :src="logo" class="w-24 h-28 mr-1" alt="" /> |
|||
<div class="flex-1"> |
|||
<div> |
|||
<span class="font-bold text-xl mr-1" |
|||
>青岛市委人才工作领导小组办公室</span |
|||
> |
|||
<span class="text-lg" style="color: #666666" |
|||
>中国山东省青岛市香港中路11号</span |
|||
> |
|||
</div> |
|||
<div> |
|||
<span class="font-bold text-xl mr-1">青岛市人力资源和社会保障局</span> |
|||
<span class="text-lg" style="color: #666666" |
|||
>中国山东省青岛市香港中路11号</span |
|||
> |
|||
</div> |
|||
<div class="text-lg mt-3"> |
|||
承办单位：青岛市公共就业和人才服务中心 |
|||
<span class="cursor-pointer" @click="handleToICP" |
|||
>ICP备案号：鲁ICP备13003495号-2</span |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<img src="@/assets/images/ewm1.png" class="w-24 h-28 mr-7" alt="" /><img |
|||
src="@/assets/images/ewm2.png" |
|||
class="w-24 h-28 mr-7" |
|||
alt="" |
|||
/><img src="@/assets/images/ewm3.png" class="w-24 h-28 mr-7" alt="" /><img |
|||
src="@/assets/images/ewm4.png" |
|||
class="w-24 h-28 mr-7" |
|||
alt="" |
|||
/> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
|
|||
import logo from "@/assets/images/logo2.png"; |
|||
const handleToICP = () => { |
|||
window.open("http://beian.miit.gov.cn/"); |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* input 取消默认样式 */ |
|||
input { |
|||
background: none; |
|||
outline: none; |
|||
border: 0px; |
|||
border-bottom: 1px solid #000; |
|||
.bg-bottom { |
|||
background: url(/src/assets/images/nav_bottom.png) no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
</style> |
|||
</style> |
|||
@ -0,0 +1,219 @@ |
|||
<template> |
|||
<div class="w-full bg min-h-screen pt-16 pb-7"> |
|||
<div class="w-[calc(100%-230px)] mx-auto mt-60px bg-white pb-9 px-6 pt-6 rounded"> |
|||
<!-- 列表 --> |
|||
<div v-show="!showDetail"> |
|||
<h3 class="font-bold text-2xl">政策资讯</h3> |
|||
<div class="flex"> |
|||
<!-- 分类菜单 --> |
|||
<div |
|||
class="w-[218px] h-[690px] bg-gradient-to-b from-blue-500 to-blue-300 text-cyan-50 p-6 rounded-l-lg mr-10 mt-2" |
|||
> |
|||
<div class="font-bold text-3xl rou">分类信息</div> |
|||
<p class="">为您提供当前最新的资讯内容</p> |
|||
<div class="flex flex-col"> |
|||
<div class="flex flex-col items-center justify-between gap-4"> |
|||
<div |
|||
class="flex items-center w-full rounded-md h-12 cursor-pointer" |
|||
:class="{ |
|||
'bg-white text-blue-500': active === item.dictValue, |
|||
'bg-blue': active !== item.dictValue, |
|||
}" |
|||
v-for="(item, index) in tabList" |
|||
:key="index" |
|||
@click="handleClickTab(item)" |
|||
> |
|||
<div class="text-center w-full">{{ item.dictLabel }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="flex flex-col w-[calc(100%-240px)] h-690px overflow-y-auto scrollBar" |
|||
@scroll="handleScroll" |
|||
> |
|||
<div |
|||
class="flex p-4" |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
@click="toPolicyDetail(item)" |
|||
> |
|||
<img :src="item.coverImg" class="rounded-md" alt="" /> |
|||
<div class="flex flex-col flex-1 justify-between p-2"> |
|||
<div>{{ item.title }}</div> |
|||
<div class="text-2 w-full text-gray-400"> |
|||
{{ item.detail }} |
|||
</div> |
|||
<div> |
|||
<span>{{ item.dictLabel }}</span |
|||
><span class="text-gray-400">{{ item.createTime }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 详情 --> |
|||
<div v-show="showDetail" class=" relative"> |
|||
<div class="text-white flex items-center mb-2 absolute -top-16"> |
|||
<span |
|||
class="cursor-pointer text-xl" |
|||
@click="showDetail = false" |
|||
>政策资讯</span |
|||
><span class="text-2xl">>详情</span> |
|||
</div> |
|||
<div class="bg-white rounded pb-9 px-6 pt-6"> |
|||
<h1 class="text-center">{{ policyInfo.title }}</h1> |
|||
<div> |
|||
<span class="mr-5">{{ |
|||
policyInfo.dicId === "1" |
|||
? "住房政策" |
|||
: policyInfo.dicId === "2" |
|||
? "人才政策" |
|||
: policyInfo.dicId === "3" |
|||
? "就业政策" |
|||
: "" |
|||
}}</span> |
|||
<span class="text-gray-400">{{ policyInfo.createTime }}</span> |
|||
</div> |
|||
<div v-html="policyInfo.detail"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, reactive, onMounted, onUnmounted } from "vue"; |
|||
import { gePolicytList, getPolicyInfo } from "@/api/policy"; |
|||
|
|||
// tabList |
|||
const tabList = reactive([ |
|||
{ |
|||
dictLabel: "最新", |
|||
dictValue: "0", |
|||
}, |
|||
{ |
|||
dictLabel: "住房政策", |
|||
dictValue: "1", |
|||
}, |
|||
{ |
|||
dictLabel: "人才政策", |
|||
dictValue: "2", |
|||
}, |
|||
{ |
|||
dictLabel: "就业政策", |
|||
dictValue: "3", |
|||
}, |
|||
]); |
|||
const active = ref("0"); |
|||
const showDetail = ref(false); |
|||
const handleClickTab = (item: any) => { |
|||
active.value = item.dictValue; |
|||
joinIn.pageNo = 1; |
|||
joinIn.dictCode = item.dictValue; |
|||
list.value = []; |
|||
isLoading.value = true; |
|||
getList(); |
|||
}; |
|||
const joinIn = { |
|||
pageNo: 1, |
|||
pageSize: 5, |
|||
dictCode: active.value, |
|||
}; |
|||
const policyInfo = ref<any>({}); |
|||
let lastScrollTime = 0; |
|||
const throttleDelay = 500; // 节流间 |
|||
// 初始化时需要异步获取 |
|||
const list = ref([]); |
|||
// 新增加载状态 |
|||
const isLoading = ref(true); |
|||
// 修改 getList 函数以支持分页加载 |
|||
const getList = async () => { |
|||
try { |
|||
if (!isLoading.value) return; |
|||
const res = await gePolicytList(joinIn); |
|||
list.value = [...list.value, ...res.data]; |
|||
if (res.data.length < joinIn.pageSize) { |
|||
isLoading.value = false; |
|||
return false; |
|||
} |
|||
joinIn.pageNo++; |
|||
} catch (err) { |
|||
console.error("获取数据失败:", err); |
|||
} |
|||
}; |
|||
|
|||
const handleScroll = (event: Event) => { |
|||
const now = Date.now(); |
|||
// 如果未达到节流时间间隔，直接返回 |
|||
if (now - lastScrollTime < throttleDelay) return; |
|||
|
|||
const target = event.target as HTMLElement; |
|||
if (target.scrollTop + target.clientHeight >= target.scrollHeight - 10) { |
|||
getList(); |
|||
// 更新最后触发时间 |
|||
lastScrollTime = now; |
|||
} |
|||
}; |
|||
const toPolicyDetail = async (item) => { |
|||
const res = await getPolicyInfo(item.id); |
|||
policyInfo.value = res.data; |
|||
showDetail.value = true; |
|||
}; |
|||
|
|||
// 生命周期钩子 |
|||
onMounted(() => { |
|||
// 初始化加载 |
|||
getList(); |
|||
}); |
|||
|
|||
onUnmounted(() => { |
|||
// 移除滚动事件监听 |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
img { |
|||
width: 200px; |
|||
height: 120px; |
|||
} |
|||
.bg { |
|||
background: url(/src/assets/images/policy-bg.png) no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
.bg-blue { |
|||
background-color: #81bcfe; |
|||
} |
|||
.text-2 { |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
.scrollBar { |
|||
&::-webkit-scrollbar { |
|||
width: 4px; |
|||
height: 4px; |
|||
&:hover { |
|||
// width: 8px; |
|||
// height: 8px; |
|||
} |
|||
} |
|||
&::-webkit-scrollbar-thumb { |
|||
/*滚动条里面小方块*/ |
|||
border-radius: 4px; |
|||
// box-shadow: inset 0 0 5px rgba(#00023f, 0.2); |
|||
box-shadow: none; |
|||
background: #287dfe; |
|||
} |
|||
&::-webkit-scrollbar-track { |
|||
/*滚动条里面轨道*/ |
|||
// box-shadow: inset 0 0 5px rgba(#00023f, 0.2); |
|||
box-shadow: none; |
|||
border-radius: 4px; |
|||
background: transparent; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,60 +0,0 @@ |
|||
<template> |
|||
<div class="w-[350px] md:w-[1200px] m-auto overflow-hidden"> |
|||
<div class="mt-[24px] md:mt-[66px] w-full flex flex-col items-center"> |
|||
<button |
|||
class="w-[107px] h-[38px] md:w-[128px] md:h-[50px] rounded-[24px] text-secondary text-base font-medium border border-gray-200 flex items-center justify-center"> |
|||
SERVICES |
|||
</button> |
|||
<div class="text-[32px] mt-8 md:mt-5 text-center md:text-[56px] md:w-[764px] font-medium"> |
|||
What are the different types of insurance? |
|||
<p class="mt-3 md:mt-5 text-[16px] md:text-[18px] font-normal"> |
|||
There are many different types of insurance, each designed to protect you from a different type of risk. Some of |
|||
the most common types of insurance include: |
|||
</p> |
|||
</div> |
|||
</div> |
|||
<div class="pb-20"> |
|||
<SidedLayout :title="layoutInfo.title" :desc="layoutInfo.desc" :bgImg="layoutInfo.bgImg" :type="layoutInfo.type" /> |
|||
<SidedLayout :title="layoutInfo2.title" :desc="layoutInfo2.desc" :bgImg="layoutInfo2.bgImg" |
|||
:type="layoutInfo2.type" /> |
|||
<SidedLayout :title="layoutInfo4.title" :desc="layoutInfo4.desc" :bgImg="layoutInfo4.bgImg" |
|||
:type="layoutInfo4.type" /> |
|||
<SidedLayout :title="layoutInfo3.title" :desc="layoutInfo3.desc" :bgImg="layoutInfo3.bgImg" |
|||
:type="layoutInfo3.type" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import SidedLayoutimg from '@/assets/images/service-img1.png' |
|||
import SidedLayoutimg2 from '@/assets/images/service-img2.png' |
|||
import SidedLayoutimg3 from '@/assets/images/service-img3.png' |
|||
import SidedLayoutimg4 from '@/assets/images/service-img4.png' |
|||
const layoutInfo = { |
|||
title: 'Car insurance', |
|||
desc: 'This type of insurance protects you financially if you are involved in a car accident. It can cover the cost of repairs to your car, medical expenses, and lost wages.', |
|||
bgImg: SidedLayoutimg, |
|||
type: 2, |
|||
} |
|||
const layoutInfo2 = { |
|||
title: 'Car insurance', |
|||
desc: 'This type of insurance protects you financially if you are involved in a car accident. It can cover the cost of repairs to your car, medical expenses, and lost wages.', |
|||
bgImg: SidedLayoutimg2, |
|||
type: 1, |
|||
} |
|||
const layoutInfo3 = { |
|||
title: 'Car insurance', |
|||
desc: 'This type of insurance protects you financially if you are involved in a car accident. It can cover the cost of repairs to your car, medical expenses, and lost wages.', |
|||
bgImg: SidedLayoutimg3, |
|||
type: 1, |
|||
} |
|||
const layoutInfo4 = { |
|||
title: 'Car insurance', |
|||
desc: 'This type of insurance protects you financially if you are involved in a car accident. It can cover the cost of repairs to your car, medical expenses, and lost wages.', |
|||
bgImg: SidedLayoutimg4, |
|||
type: 2, |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
Loading…
Reference in new issue