zhywpt-sp/subpackage/service/remind/satisfaction-evaluate.vue

<!-- 满意度评价 -->
<template>
	<view class="evaluate-box as-layout-horizontal as-gravity-center-start" v-for="(item,index) in list" :key="index" 
	@click="itemClick(item.id,item.title,item)">
		<view class="icon-bg as-gravity-center"><image :src="`${$imgUrl}remind/${item.icon}.png`"></image></view>
		<view class="title">{{item.title}}</view>
	</view>
</template>

<script setup lang="ts">
	import { navTo } from '@/utils/utils';
	const list = [
		{id:1,icon:'icon-fx',title:'发行产品评价'},
		{id:2,icon:'icon-bl',title:'业务办理满意度评价'},
		{id:3,icon:'icon-qy',title:'权益产品评价'},
		{id:4,icon:'icon-fwy',title:'业务员满意度评价'},
	]
	
	/* 跳转到评价列表 */
	const itemClick = (id,title,item) => {
		const evaluateListUrl = '/subpackage/service/remind/evaluate-list';
		navTo(`${evaluateListUrl}?type=${id}&title=${title}`);
	}
</script>


<style>
	page{
		background-color: #EEF7F7;
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>
<style lang="scss" scoped>
	.evaluate-box{
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223,223,223,0.8);
		padding: 35rpx 30rpx;
		min-height: 80rpx;
		margin-bottom: 30rpx;
		
		.icon-bg{
			width: 60rpx;
			height: 60rpx;
			background: #00B38B;
			border-radius: 50%;
			
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
		
		.title{
			font-size: 32rpx;
			font-family: Noto Sans S Chinese;
			font-weight: 400;
			color: #333333;
			margin-left: 28rpx;
		}
	}
</style>