296 lines
7.2 KiB
Vue
296 lines
7.2 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<!-- 顶部背景 -->
|
||
|
|
<view class="head-Bg">
|
||
|
|
<lwTopnav :bgColor="bgColor" lwColor="#fff" lwTitle="首页"></lwTopnav>
|
||
|
|
<view class="home-search">
|
||
|
|
<u-search height="80" bgColor="#fff" placeholder="请输入关键字" clearabled animation v-model="keyword"></u-search>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 轮播图 -->
|
||
|
|
<view class="swiper-view">
|
||
|
|
<u-swiper @click="handleClickSwiper" mode="number" :list="swiperList" height="400"
|
||
|
|
indicatorPos="bottomRight" borderRadius="0"></u-swiper>
|
||
|
|
</view>
|
||
|
|
<!-- 横向滚动列表 -->
|
||
|
|
<view class="horizontal-scroll">
|
||
|
|
<Function :list="functionList"/>
|
||
|
|
</view>
|
||
|
|
<!-- 番禺区“人才生态30条” -->
|
||
|
|
<view class="web-link">
|
||
|
|
<image :src="webLinkImg" @click="toWeb"></image>
|
||
|
|
</view>
|
||
|
|
<!-- 智汇谷简介、成员单位一览、人才留言板 -->
|
||
|
|
<view class="common-blocks">
|
||
|
|
<view class="common-left" @click="toShowIntroduce(1)">
|
||
|
|
<view class="left-top">
|
||
|
|
<text class="lto">智汇谷简介</text>
|
||
|
|
<text class="ltt">点击进入智汇谷简介</text>
|
||
|
|
<view class="see">立即查看</view>
|
||
|
|
</view>
|
||
|
|
<view class="left-bottom" @click="toShowIntroduce(2)">
|
||
|
|
<text class="lbo">成员单位一览</text>
|
||
|
|
<text class="lbt">点击进入成员单位一览</text>
|
||
|
|
<view class="see">立即查看</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="common-right" @click="toMessage">
|
||
|
|
<text class="rto">人才留言板</text>
|
||
|
|
<text class="rtt">点击进入人才留言板</text>
|
||
|
|
<view class="see">立即查看</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 工作动态 -->
|
||
|
|
<view class="work-dynamics">
|
||
|
|
<u-section title="工作动态" :showLine="false" fontSize="40" subTitle="查看更多" @click="toList"></u-section>
|
||
|
|
<view style="height: 40rpx"></view>
|
||
|
|
<Dynamics :list="dynamicsList" tip="置顶" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import lwTopnav from "@/components/lw-topnav/lw-topnav";
|
||
|
|
import Function from "./component/functions.vue";
|
||
|
|
import Dynamics from "./component/dynamics.vue";
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
lwTopnav,Function,Dynamics
|
||
|
|
},
|
||
|
|
props:{
|
||
|
|
bgColor:{
|
||
|
|
type: String,
|
||
|
|
default: 'transparent'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
keyword:'',//搜索内容
|
||
|
|
// 轮播图
|
||
|
|
swiperList: [
|
||
|
|
'http://8.138.171.103/static/banner.png',
|
||
|
|
],
|
||
|
|
// 功能按钮
|
||
|
|
functionList:[
|
||
|
|
{icon:"http://8.138.171.103/static/talentPolicy.png",title:'人才政策'},
|
||
|
|
{icon:"http://8.138.171.103/static/talentServices.png",title:'人才服务'},
|
||
|
|
{icon:"http://8.138.171.103/static/resourceDocking.png",title:'资源对接'}
|
||
|
|
],
|
||
|
|
// 人才生态30条链接
|
||
|
|
url:'https://b.pyrc.com.cn/pyrsj/public/login.asp',
|
||
|
|
// 人才生态30条图片
|
||
|
|
webLinkImg:'http://8.138.171.103/static/webLink.png',
|
||
|
|
// 动态列表
|
||
|
|
dynamicsList:[{
|
||
|
|
isTop: true,
|
||
|
|
title: '本年度广州市积分制入户申请即将开放！你想知道的都在这里',
|
||
|
|
content: '<p>2024年度广州市积分制入户工作正式启动今年的入户指标为1.6万个10月8日起接受积分制入户申请</p>',
|
||
|
|
img: 'http://8.138.171.103/static/banner.png',
|
||
|
|
readCount: 597,
|
||
|
|
date: '2024-04-30'
|
||
|
|
},{
|
||
|
|
isTop: false,
|
||
|
|
title: '本年度广州市积分制入户申请即将开放！你想知道的都在这里',
|
||
|
|
content: '<p>2024年度广州市积分制入户工作正式启动今年的入户指标为1.6万个10月8日起接受积分制入户申请</p>',
|
||
|
|
img: 'http://8.138.171.103/static/banner.png',
|
||
|
|
readCount: 597,
|
||
|
|
date: '2024-04-30'
|
||
|
|
}],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
uni.setNavigationBarTitle({
|
||
|
|
title: '首页'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
// 跳转网络连接-人才生态30条
|
||
|
|
toWeb(){
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/home/component/web?url=${this.url}`
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 点击轮播图
|
||
|
|
handleClickSwiper(index){
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/article/articleDetails'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 三大功能中的智汇谷简介和成员单位一览
|
||
|
|
toShowIntroduce(index){
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/article/richDetail?title=${index===1?'智汇谷简介':'成员单位一览'}`
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 留言板
|
||
|
|
toMessage(){
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/home/component/message'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 动态查看更多
|
||
|
|
toList(){
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/article/articleList'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.home-search{
|
||
|
|
padding: 10rpx 35rpx;
|
||
|
|
height: 120rpx;
|
||
|
|
}
|
||
|
|
.head-Bg{
|
||
|
|
// position: fixed;
|
||
|
|
top: 0rpx;
|
||
|
|
left: 0rpx;
|
||
|
|
z-index: 1;
|
||
|
|
width: 100%;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
overflow: hidden;
|
||
|
|
background: -webkit-linear-gradient( 190deg, #4BACFF 0%, rgba(255,255,255,0.77) 100%);
|
||
|
|
background: linear-gradient( 190deg, #4BACFF 0%, rgba(255,255,255,0.77) 100%);
|
||
|
|
}
|
||
|
|
.swiper-view{
|
||
|
|
.indicator-num {
|
||
|
|
padding: 2px 0;
|
||
|
|
background-color: rgba(0, 0, 0, 0.35);
|
||
|
|
border-radius: 100px;
|
||
|
|
width: 35px;
|
||
|
|
// @include flex;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
&__text {
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.horizontal-scroll{
|
||
|
|
margin: 50rpx 0 0 0;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.web-link{
|
||
|
|
padding: 0 25rpx;
|
||
|
|
height: 250rpx;
|
||
|
|
border-radius: 16rpx;
|
||
|
|
image{
|
||
|
|
border-radius: 16rpx;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.common-blocks{
|
||
|
|
padding: 0 25rpx;
|
||
|
|
margin-top: 70rpx;
|
||
|
|
display: flex;
|
||
|
|
height: 500rpx;
|
||
|
|
width: 100%;
|
||
|
|
justify-content: space-between;
|
||
|
|
.common-left{
|
||
|
|
width: 48%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
.left-top{
|
||
|
|
height: 48%;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
background: linear-gradient( 100deg, #d5ffd9 0%, rgba(255,255,255,0.77) 100%);
|
||
|
|
padding: 25rpx 0 0 25rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
.lto{
|
||
|
|
color: #2cae63;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 35rpx;
|
||
|
|
}
|
||
|
|
.ltt{
|
||
|
|
margin-top: 10rpx;
|
||
|
|
margin-bottom: 40rpx;
|
||
|
|
color: #878787;
|
||
|
|
font-size: 26rpx;
|
||
|
|
}
|
||
|
|
.see{
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
border-radius: 56rpx;
|
||
|
|
width: 150rpx;
|
||
|
|
height: 60rpx;
|
||
|
|
background-color: #51c280;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 25rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.left-bottom{
|
||
|
|
height: 48%;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
background: linear-gradient( 100deg, #ffefd5 0%, rgba(255,255,255,0.77) 100%);
|
||
|
|
padding: 25rpx 0 0 25rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
.lbo{
|
||
|
|
color: #e7940a;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 35rpx;
|
||
|
|
}
|
||
|
|
.lbt{
|
||
|
|
color: #878787;
|
||
|
|
margin-top: 10rpx;
|
||
|
|
font-size: 26rpx;
|
||
|
|
margin-bottom: 40rpx;
|
||
|
|
}
|
||
|
|
.see{
|
||
|
|
border-radius: 56rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
width: 150rpx;
|
||
|
|
height: 60rpx;
|
||
|
|
background-color: #e89e23;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 25rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.common-right{
|
||
|
|
width: 48%;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
background: linear-gradient( 190deg, #e7e8fd 0%, rgba(255,255,255,0.77) 100%);
|
||
|
|
padding: 25rpx 0 0 25rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
.rto{
|
||
|
|
color: #4c5fdf;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 35rpx;
|
||
|
|
}
|
||
|
|
.rtt{
|
||
|
|
color: #878787;
|
||
|
|
margin-top: 10rpx;
|
||
|
|
margin-bottom: 40rpx;
|
||
|
|
font-size: 26rpx;
|
||
|
|
}
|
||
|
|
.see{
|
||
|
|
border-radius: 56rpx;
|
||
|
|
width: 150rpx;
|
||
|
|
height: 60rpx;
|
||
|
|
background-color: #8594f1;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 25rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.work-dynamics{
|
||
|
|
padding: 0 25rpx;
|
||
|
|
margin-top: 70rpx;
|
||
|
|
}
|
||
|
|
</style>
|