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> |
<template> |
||||
<div class="md:w-[calc(100%-60px)] overflow-hidden mx-auto" > |
<div class="w-full bg-blue-400 h-2"></div> |
||||
<div class="flex"> |
<div |
||||
<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> |
||||
|
<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> |
</div> |
||||
</template> |
</template> |
||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
|
import logo from "@/assets/images/logo2.png"; |
||||
|
const handleToICP = () => { |
||||
|
window.open("http://beian.miit.gov.cn/"); |
||||
|
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped> |
<style scoped> |
||||
/* input 取消默认样式 */ |
.bg-bottom { |
||||
input { |
background: url(/src/assets/images/nav_bottom.png) no-repeat; |
||||
background: none; |
background-size: 100% 100%; |
||||
outline: none; |
|
||||
border: 0px; |
|
||||
border-bottom: 1px solid #000; |
|
||||
} |
} |
||||
</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