hx/pages/index/index.vue

<template>
	<view class="content">
		<view class="bg"><image src="../../static/index/bg01.png" mode=""></image></view>
		<view class="bg1"><image src="../../static/index/bg03.png" mode=""></image></view>

		<top></top>
		<view class="bg5"><image src="../../static/index/img09.png" mode=""></image></view>
		<view class="bg4"><image src="../../static/index/img04.png" mode=""></image></view>
		<view class="bg6"><image src="../../static/index/img10.png" mode=""></image></view>
		<view class="bg7"><image src="../../static/index/img13.png" mode=""></image></view>
		<view class="bg8"><image src="../../static/index/img06.png" mode=""></image></view>
		<view class="bg9">
			<image src="../../static/index/bg05.png" mode=""></image>
			<view class="bg10"><image src="../../static/index/img01.png" mode=""></image></view>
		</view>
		<view class="bg9">
			<image src="../../static/index/bg05.png" mode=""></image>
			<view class="bg10"><image src="../../static/index/img03.png" mode=""></image></view>
		</view>
		<view class="bg9">
			<image src="../../static/index/bg05.png" mode=""></image>
			<view class="bg10"><image src="../../static/index/img02.png" mode=""></image></view>
		</view>
		<view class="bg11"><image src="../../static/img/bottom.png" mode=""></image></view>
	</view>
</template>

<script>
import top from '@/components/top/top.vue';
export default {
	comments: {
		top
	},
	data() {
		return {
			cdList: [
				{
					image: '../../static/img/cd1.png',
					title: '首页    ',
					right: '../../static/img/right.png',
					url: './Expect'
				},
				{
					image: '../../static/img/cd2.png',
					title: '恒星私募',
					right: '../../static/img/right.png',
					url: './Expect'
				},
				{
					image: '../../static/img/cd5.png',
					title: 'DIFI挖矿',
					right: '../../static/img/right.png'
				},
				{
					image: '../../static/img/cd4.png',
					title: '我的推荐',
					right: '../../static/img/right.png'
				},
				{
					image: '../../static/img/cd3.png',
					title: '超级节点',
					right: '../../static/img/right.png'
				},
				{
					image: '../../static/img/cd6.png',
					title: '游戏版块',
					right: '../../static/img/right.png'
				},
				{
					image: '../../static/img/cd7.png',
					title: '好友加速明细',
					right: '../../static/img/right.png'
				},
				{
					image: '../../static/img/cd8.png',
					title: '算力奖励明细',
					right: '../../static/img/right.png'
				},
				{
					image: '../../static/img/cd9.png',
					title: '社群奖励明细',
					right: '../../static/img/right.png'
				},
				{
					image: '../../static/img/cd10.png',
					title: '公会奖励明细',
					right: '../../static/img/right.png'
				}
			]
		};
	},
	methods: {
		addShow() {
			this.$refs.popup.open();
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	height: 100%;
	margin: 0;
	padding: 0;
}

image {
	height: 100%;
	width: 100%;
}

.bg {
	position: absolute;
	width: 750rpx;
	height: 3117rpx;
}

.box-top {
	display: flex;
	padding: 36rpx 41rpx 72rpx 41rpx;
}

.bg1 {
	position: absolute;
	width: 750rpx;
	height: 629rpx;
}

.bg3 {
	width: 56rpx;
	height: 62rpx;
}

.two {
	margin-left: 36rpx;
}

.bg4 {
	display: flex;
	margin: 0 auto;
	width: 680rpx;
	height: 581rpx;
}

.bg5 {
	position: absolute;
	right: 0;
	top: 105rpx;
	width: 68rpx;
	height: 108rpx;
}

.bg6 {
	width: 78rpx;
	height: 98rpx;
	margin: 33rpx 22rpx;
}

.bg7 {
	position: absolute;
	right: 0;
	top: 660rpx;
	width: 219rpx;
	height: 308rpx;
}

.bg8 {
	width: 546rpx;
	height: 168rpx;
	margin: -66rpx auto;
}

.bg9 {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 680rpx;
	height: 524rpx;
	margin: 40rpx auto;
}

.bg10 {
	position: absolute;

	width: 590rpx;
	height: 400rpx;
}

.bg11 {
	background: black;
	float: left;
	bottom: 0;

	width: 750rpx;
	height: 650rpx;
}

</style>