dev/dcp-app-gate/pages/financialService/financialService.vue

<template>
	<view class="rf-category">
		<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
			:title="i18n('FinancialServices')" :background="background">
		</u-navbar>
		<!-- Banner -->
		<view class="bannerbox">
			<image :src="bannerImg" class="bannerImg" mode="widthFix"></image>
		</view>
		<view class="finanContentBox">
			<view class="contentOne" v-for="(item,index) in menuList" :key="index" @click="gopage(item)">
				<view class="thumb">
					<image class="img" :src="item.thumb" mode="widthFix"></image>
				</view>
				<view class="title" :style="{color:item.color}">{{$t(item.label)}}</view>
			</view>
		</view>
		<view class="informations">
			<view class="zoneTitle">{{$t('common.relatedNews')}}</view>
			<view class="infoList">
				<view class="item" v-for="(infoItem,index) in infomationList" :key="index" @click="toDetails(infoItem)">
					<view class="thumb" v-if="infoItem.pictureUrl&&infoItem.pictureUrl != null">
						<image class="thumbimg" :src="websiteUrl+infoItem.pictureUrl" mode="widthFix"></image>
					</view>
					<view class="info">
						<view class="title">{{infoItem.title}}</view>
						<view class="date">{{formatDate(infoItem.publishDate)}}</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import rfSearchBar from '@/components/rf-search-bar-xiangmu';
	import {
		financeInfoList
	} from "@/api/financialService/cmsInformationViews";

	export default {
		name: 'financialService',
		components: {
			rfSearchBar,
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				circular: true,
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#fff'
				},
				bannerImg: '../../static/img/finance/financeBanner.png',
				menuList: [{
					id: 0,
					label: 'common.FinancialInstitutions',
					thumb: '../../static/img/finance/institution.png',
					path: '/pages/financialService/financialOrgans/organsList',
					color: '#3D4887',
				}, {
					id: 1,
					label: 'common.InvestmentGuide',
					thumb: '../../static/img/finance/investment.png',
					path: '/pages/financialService/investmentGuide/guideList',
					color: '#965738',
				}, {
					id: 2,
					label: 'common.ProjectAppraisal',
					thumb: '../../static/img/finance/evaluation.png',
					path: '/pages/financialService/projectEvaluation/evaluationList',
					color: '#19BA83',
				}, {
					id: 3,
					label: 'common.FundIdeas',
					thumb: '../../static/img/finance/GEIFund.png',
					path: '/pages/financialService/financialFundIdeas/fundIdeasList',
					color: '#884939',
				}],
				infomationList: [],
			}
		},
		onShow() {
			this.getInfomation();
		},
		created() {

		},
		methods: {
			back() {
				uni.navigateBack();
			},
			gopage(item) {
				uni.navigateTo({
					url: item.path
				})
			},
			navToSearch(keyword) {
				uni.navigateTo({
					url: '/pages/index/search/search?data=' + keyword
				})
			},
			async getInfomation() {
				let infoParams = {
					language: this.$i18n.locale.toUpperCase(),
				}
				let res = await this.$myRequest({
					url: '/cms/cmsInformationViews/financeInfoList/',
					data: infoParams
				});
				for (let i = 0; i < 10; i++) {
					this.infomationList.push(res.data[i]);
				}

			},
			toDetails(item) {
				let key = item.baseEntityId;
				uni.navigateTo({
					url: '/pages/information/components/rankDetail?key=' + key
				});
			},
			// formatDate(stamp){
			// 	return (new Date(stamp).toLocaleDateString()).replace(new RegExp('\/','mg'),'-');
			// },
			i18n(data) {
				return this.$t('common.' + data);
			},

		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .swiper .uni-swiper-dots {
		left: initial;
		right: 40upx;
		bottom: 34upx;
	}

	.rf-category {
		background-color: $color-white;

		/*  #ifdef  APP-PLUS  */
		// margin-top: calc(20upx + var(--status-bar-height));
		/*  #endif  */
		// .icoStyle {
		// 	display:flex;
		// 	align-items:center;
		// 	height:120upx;
		// 	.leftArrow {
		// 		width:120upx;
		// 		height:120upx;
		// 		position: fixed;
		// 		z-index:99;
		// 		/*  #ifdef  APP-PLUS  */
		// 		padding-top: calc(28upx + var(--status-bar-height));
		// 		/*  #endif  */
		// 		.text{
		// 			color:#fff;
		// 		}
		// 	}
		// }
		.uni-padding-wrap {
			/* #ifdef APP-PLUS */
			margin-top: 60upx;
			/* #endif */
		}

		.bannerbox {
			width: 100%;
			height: 320upx;
			margin-top: 30upx;

			.bannerImg {
				width: 100%;
				height: 100%;
			}
		}

		.finanContentBox {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			margin: 20upx auto;
			position: relative;
			padding: 0 16upx;

			.contentOne {
				width: 48%;
				height: 102px;
				margin-top: 20upx;
				margin: 1%;
				border-radius: 10upx;
				position: relative;

				.thumb {
					width: 100%;
					height: 102upx;

					.img {
						display: block;
						border-radius: 10upx;
					}
				}

				.title {
					height: 60upx;
					line-height: 60upx;
					font-size: 30upx;
					// font-weight: 600;
					width: 300upx;
					position: absolute;
					top: 20px;
					left: 15px;
					z-index: 99;
				}
			}

		}

		.informations {
			padding: 3%;

			.zoneTitle {
				height: 60upx;
				line-height: 60upx;
				font-weight: bold;
				position: relative;
				margin-left: 10upx;
				color: #666;

				&:before {
					content: "";
					width: 6upx;
					height: 30upx;
					background: #2d6;
					position: absolute;
					left: -10upx;
					top: 60%;
					margin-top: -22upx;
				}
			}

			.infoList {
				.item {
					display: flex;
					margin: 20upx 0;
					border-bottom: 1px solid #eee;
					padding: 20upx 0;

					&:last-of-type {
						border: none;
					}

					.thumb {
						width: 218upx;
						height: 128upx;
						position: relative;
						overflow: hidden;
						margin-right: 20upx;

						.thumbimg {
							display: block;
							width: 100%;
							height: 100%;
							margin-top: 10upx;
						}
					}

					.info {
						flex: 1;

						.title {
							margin-bottom: 10upx;
						}

						.date {
							font-size: 20upx;
							color: #aaa;
						}
					}
				}
			}
		}

	}
</style>