boying/pages/profit/fund.vue

<template>
	<view class="center">
		<view class="top"><image src="../../static/img/fundtop.png" mode="" class="bg"></image></view>
		<view class="main-box">
			<view class="main-title">
				<view class="main-title-image"><image class="image" src="../../static/icon/title.png" mode=""></image></view>
				<view class="main-title-font">基金介绍</view>
			</view>
			<view class="main" v-html="content">
			</view>
		</view>
		<view class="index1"><image src="../../static/img/fundbottom.png" mode=""></image></view>
	</view>
</template>

<script>
import { details } from '@/api/index.js';
export default {
	data() {
		return {
			content:''
		};
	},
	onLoad() {
		uni.setNavigationBarTitle({
			title: this.$t('foo.xq')
		});
		details({},3).then(({data}) =>{
			console.log(data)
			this.content = data.content
		})
	}
};
</script>

<style lang="scss">
.top {
	position: relative;
	display: flex;
	flex-direction: column;
	z-index: 10;
	.bg {
		height: 900rpx;
		width: 100%;
	}
}
.index1 {
	margin-top: -400rpx;
	width: 100%;
	height: 713rpx;
	position: relative;
	image {
		width: 100%;
		height: 100%;
	}
}
.main-box {
	margin: 80rpx 30rpx 0;
	position: relative;
	z-index: 20;
	padding: 20rpx;
	background-color: #1f2020;
	border-radius: 10rpx;
	.main-title {
		width: 300rpx;
		height: 80rpx;
		margin: -60rpx auto 0;
		border-radius: 50rpx;
		position: relative;
		.main-title-image {
			position: absolute;
			left: 0;
			top: 0;
			width: 300rpx;
			height: 80rpx;
			.image {
				width: 100%;
				height: 100%;
				border-radius: 50rpx;
			}
		}

		.main-title-font {
			position: relative;
			z-index: 100;
			text-align: center;
			line-height: 80rpx;
			font-size: 46rpx;
			font-weight: bold;
			color: #54300f;
		}
	}
	.main {
		padding: 40rpx 0;
		color: #eecca7;
		.main-item {
			margin-top: 20rpx;
			width: 100%;
			padding: 14rpx;
			background: #e6c3a1;
			position: relative;
			border-radius: 20rpx;
			.main-image {
				position: absolute;
				top: -2rpx;
				left: -2rpx;
				width: 60rpx;
				height: 110rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.main-font {
				font-size: 28rpx;
				padding-left: 80rpx;
			}
		}
	}
}
</style>