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

<template>
	<scroll-view class='scroll-list' scroll-x>
		<view class="list-item" @click="showDetail(item.name)" v-for="(item,index) in list" :key="index">
			<view class="item">
				<image :src="getIcon(item.name)"></image>
				<text>{{ item.name }}</text>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import configService from "@/common/config.service";
	export default{
		props:{
			list:{
				type: Array,
				default: [
					{name:'人才政策'},
					{name:'人才服务'},
					{name:'资源对接'}
				]
			},
			moduleName:{
				type: String,
				default: '人才模块'
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			showDetail(name = '介绍'){
				uni.navigateTo({
					url: `/pages/article/richDetail?title=${name}&moduleName=${this.moduleName}`
				})
			},
			getIcon(name){
				// console.log(configService.ip+'upload/20241028/'+name+'.png')
				return encodeURI(configService.ip+'upload/20241028/'+name+'.png');
			}
		}
	}
</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>