TalentService-mobile/pages/home/component/functions.vue

65 lines
1.2 KiB
Vue

<template>
<scroll-view class='scroll-list' scroll-x>
<view class="list-item" @click="showDetail(item.title)" v-for="(item,index) in list" :key="index">
<view class="item">
<image :src="item.icon"></image>
<text>{{ item.title }}</text>
</view>
</view>
</scroll-view>
</template>
<script>
export default{
props:{
list:{
type: Array,
default: [
{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:'资源对接'}
]
}
},
data(){
return{
}
},
methods:{
showDetail(title = '介绍'){
uni.navigateTo({
url: `/pages/article/richDetail?title=${title}`
})
}
}
}
</script>
<style scoped lang="scss">
.scroll-list{
height: 200rpx;
width: 100%;
white-space: nowrap;
.list-item{
display: inline-block;
width: 120rpx;
margin-left: 100rpx;
.item{
display: flex;
flex-direction: column;
align-items: center;
image{
width: 100rpx;
height: 100rpx;
}
text{
margin-top: 10rpx;
color: #000;
font-weight: bold;
font-size: 30rpx;
}
}
}
}
</style>