hx/components/top/top.vue

<template>
	<view class="center">
		<view class="box-top">
			<view class="bg3" @click="test()"><image src="../../static/index/img14.png" mode=""></image></view>
			<view class="bg3 two"><image src="../../static/index/img08.png" mode=""></image></view>
		</view>
		<u-popup v-model="show" mode="left"	width="565rpx" border-radius="14">
			<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>
		</u-popup>
	</view>
</template>

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

<style lang="less">
.box-top {
	display: flex;
	padding: 36rpx 41rpx 72rpx 41rpx;
}
image {
	width: 100%;
	height: 100%;
}
.bg3 {
	width: 56rpx;
	height: 62rpx;
}
.two {
	margin-left: 36rpx;
}
.popup {
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #00143b 0%, #000309 100%);
	height: 100%;

	.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>