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>

		<view class="box-top">
			<view class="bg3 " @click="addShow()">
				<image src="../../static/index/img14.png" mode=""></image>
			</view>
			<view class="bg3 two">
				<image src="../../static/index/img08.png" mode=""></image>
			</view>
		</view>

		

		<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>
		<!-- <u-popup :show="show" @close="close" @open="open" mode="left" ref="dd" zIndex="999999">
			<view class="" style="background-color: #fff;width: 500rpx;height: 400rpx;">
				<text>我是黄伟强的爹</text>
			</view>
		</u-popup> -->
		<uni-popup ref="popup" type="left">
			<view class="popup">
				<view class="title">
					<view class="title-img">
						<image src="../../static/img/logo.png" mode=""></image>
					</view>
					<view class="text">
						恒星币
					</view>
				</view>
				<view class="hx">

				</view>
				<view class="box-left" v-for=" (item,index) in cdList" @click="navTo(item.url)">
					<view class="box-box">
						<view class="box-img">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="box-title">
							{{item.title}}
						</view>
						<view class="box-right">
							<image :src="item.right" mode=""></image>
						</view>
					</view>
					<view class="hx1">

					</view>
				</view>


			</view>
		</uni-popup>
		<!-- <u-alert title="将就将就军军" type = "warning" :description = "description"></u-alert> -->
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import top from '@/components/top/top.vue'
		export default {
			data() {
				return {
					show: false,
					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.show = true
					this.$refs.popup.open()
					console.log(this.$refs.dd)
					console.log("陈宫", this.show);
					if (this.show == false) {

						this.$refs.popup.close()
						console.log("陈宫", this.show);
					}

				},
				navTo(url) {
					uni.navigateTo({
						url
					})
				}
				// open() {
				// 	console.log('open');
				// },
				// close() {
				// 	this.show = false
				// 	// console.log('close');
				// }
			}
		}
</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;
	}

	.popup {
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, #00143B 0%, #000309 100%);
		width: 565rpx;
		height: 1448rpx;

		.box-left {
			width: 530rpx;
			display: flex;
			flex-direction: column;


			.box-box {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-left: 30rpx;
			}

			.box-img {
				z-index: 999;
				width: 35rpx;
				height: 35rpx;
			}

			.box-title {
				margin-left: 20rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				// font-weight: bold;
				color: #FFFFFF;
				line-height: 78rpx;

			}

			.box-right {
				position: absolute;
				right: 0;

				z-index: 999;
				width: 17rpx;
				height: 32rpx;
			}
		}

		.title {
			margin: 40rpx 190rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title-img {
				width: 186rpx;
				height: 193rpx;

			}

			.text {
				display: flex;

				font-size: 41rpx;
				font-family: zihun100hao-fangfangxianfengti;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 38rpx;
			}
		}

		.hx {
			width: 565rpx;
			height: 12rpx;
			background: #FFFFFF;
			opacity: 0.23;
		}

		.hx1 {
			width: 565rpx;
			height: 2rpx;
			background: #FFFFFF;
			opacity: 0.1;
		}

	}
</style>