yzf/pages/index/index.vue

<template>
	<view class="container">
		<view class="top flex">
			<view class="icon1 flex">
				<image src="/static/image/img01.png" style="width: 139rpx;" mode="widthFix"></image>
				<view class="myName">我的</view>
			</view>
			<view class="flex">
				<image src="/static/image/img03.png" style="width: 39rpx;margin-right: 38rpx;" mode="widthFix"></image>
				<image src="/static/image/img02.png" style="width: 39rpx;" mode="widthFix"></image>
			</view>
		</view>
		<view class="swiper-box">
			<u-swiper :list="swiperList" indicator indicatorMode="line" height="280rpx" circular></u-swiper>
		</view>
		<view class="flex noteBox">
			<view class="flex_item noteTpl">
				<image src="/static/image/img04.png" style="width: 42rpx;" mode="widthFix"></image>
				<view class="clamp textTpl">上线活动的公告等等公告内容上线活动的公告等等公告内容等上线活动的公告等等公告内容等</view>
			</view>
			<view class="tip"></view>
		</view>
		<view class="flex navList">
			<view class="navTpl" @click="openurl('')">
				<image src="/static/image/img06.png" style="width: 123rpx;" mode="widthFix"></image>
				<view class="navName">充值</view>
			</view>
			<view class="navTpl" @click="openurl('')">
				<image src="/static/image/img07.png" style="width: 123rpx;" mode="widthFix"></image>
				<view class="navName">实名认证</view>
			</view>
			<view class="navTpl" @click="openurl('')">
				<image src="/static/image/img08.png" style="width: 123rpx;" mode="widthFix"></image>
				<view class="navName">交易密码</view>
			</view>
			<view class="navTpl" @click="openurl('')">
				<image src="/static/image/img09.png" style="width: 123rpx;" mode="widthFix"></image>
				<view class="navName">收款信息</view>
			</view>
			<view class="navTpl" @click="openurl('')">
				<image src="/static/image/img10.png" style="width: 123rpx;" mode="widthFix"></image>
				<view class="navName">联系客服</view>
			</view>
		</view>
		<view class="starBox flex">
			<view class="starTpl flex_item">
				<image src="/static/image/img12.png" style="width: 75rpx;" mode="widthFix"></image>
				<view class="starText">
					<view class="name">okx(欧易)</view>
					<view class="num">7.21</view>
				</view>
			</view>
			<view class="starTpl flex_item">
				<image src="/static/image/img13.png" style="width: 75rpx;" mode="widthFix"></image>
				<view class="starText">
					<view class="name">STAR(星空）</view>
					<view class="num">7.21</view>
				</view>
			</view>
		</view>
		<image src="/static/image/img11.png" style="width: 692rpx;padding-top: 31rpx;" mode="widthFix"></image>
		<view class="titleBox">
			<view class="titleTip">累计成交量</view>
		</view>
		<view class="flex totalBox">
			<view class="totalTpl">
				<view class="totalNum">10,910,000<text>USDT</text></view>
				<view class="totalName">累计买入</view>
			</view>
			<view class="totalTpl">
				<view class="totalNum">10,910,000<text>USDT</text></view>
				<view class="totalName">累计卖出</view>
			</view>
		</view>
		<view class="titleBox">
			<view class="titleTip">平台优势</view>
		</view>
		<view class="advantageBox flex">
			<view class="advantageTpl">
				<image src="/static/image/img16.png" style="width:149rpx;" mode="widthFix"></image>
				<view class="advantageName">简单</view>
			</view>
			<view class="advantageTpl">
				<image src="/static/image/img15.png" style="width:149rpx;" mode="widthFix"></image>
				<view class="advantageName">安全</view>
			</view>
			<view class="advantageTpl">
				<image src="/static/image/img14.png" style="width:149rpx;" mode="widthFix"></image>
				<view class="advantageName">省心</view>
			</view>
			<view class="advantageTpl">
				<image src="/static/image/img17.png" style="width:149rpx;" mode="widthFix"></image>
				<view class="advantageName">极速</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getIndex
	} from '@/api/index.js';
	import {
		getGameList,
	} from "@/api/game.js";
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				gameList: [],
				active_user: '0',
				swiperList:['/static/image/img05.png']
			}
		},
		computed: {
			...mapState({
				langList: "langList",
				lang: "lang",
			}),
			...mapState('user', ['userInfo']),
			label() {
				const label = this.langList.find((item) => {
					console.log(this.lang, item.value);
					return item.value == this.lang
				}).label;
				return label
			}
		},
		onLoad(option) {
			// #ifndef MP
			if (option.spread) {
				// 存储其他邀请人
				uni.setStorageSync('spread', option.spread);
			}
			// #endif
			// #ifdef MP
			if (option.scene) {
				// 存储小程序邀请人
				uni.setStorage({
					key: 'spread_code',
					data: option.scene
				});
			}
			// #endif
		},
		onShow() {
			this.getGameList();
			this.loadData();
		},
		methods: {
			...mapMutations('user', ['setUserInfo', 'login']),
			...mapActions({
				setLang: "setLang",
			}),
			openurl(url){
				uni.navigateTo({
					url: url,
					fail: (err) => {
						uni.showModal({
							title: '错误',
							content: err,
							showCancel: false,
						});
					}
				});
			},
			// 请求载入数据
			async loadData() {
				getIndex({})
					.then(({
						data
					}) => {
						this.active_user = data.active_user
						console.log(data);
					})
					.catch(e => {});
			},
			selectLang(value) {
				this.setLang(this.langList[value.detail.value].value);
			},

			getGameList() {
				getGameList().then((res) => {
					this.gameList = res.data.list;

					if (this.gameList.length > 2) {
						this.gameList = this.gameList.slice(0, 2)
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		background-color: #051137;
		padding: 0rpx 30rpx;
		padding-top: calc(60px + var(--status-bar-height));
		padding-bottom: 50rpx;
	}
	.top {
		font-weight: 500;
		padding: 40rpx 30rpx 24rpx 30rpx;
		line-height: 1;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #051137;
		z-index: 99;
		.icon1 {
			line-height: 0;
			position: relative;
			.myName{
				position: absolute;
				right: 22rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #2884FF;
			}
		}
	}
	.noteBox{
		padding: 46rpx 0rpx;
		.noteTpl{
			color: #fff;
			width: 85%;
			.textTpl{
				width: calc(100% - 42rpx);
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				padding-left: 30rpx;
			}
		}
		.tip{
			width: 12rpx;
			height: 12rpx;
			background: #F7453D;
			border-radius: 100%;
		}
	}
	.navList{
		text-align: center;
		padding:15rpx 0rpx;
		.navTpl{
			.navName{
				padding-top: 23rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
	}
	.starBox{
		padding-top: 43rpx;
		.starTpl{
			width: 48%;
			background: #1F2A4A;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50,50,52,0.06);
			border-radius: 20rpx;
			padding: 20rpx 18rpx;
			.starText{
				padding-left: 25rpx;
				.name{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 24rpx;
				}
				.num{
					padding-top: 15rpx;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #FFA235;
					line-height: 24rpx;
				}
			}
		}
	}
	.titleBox{
		text-align: center;
		padding: 45rpx 0rpx;
		.titleTip{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			position: relative;
			font-weight: bold;
			font-size: 42rpx;
			color: #FFFFFF;
			line-height: 110rpx;
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 44px;
				height: 0;
				border-bottom: 3px solid #FFFFFF;
				border-radius: 25rpx;
			}
		}
	}
	.totalBox{
		padding-top: 30rpx;
		.totalTpl{
			width: 45%;
			background: url('../../static/image/img18.png') no-repeat;
			background-size: 100% 100%;
			text-align: center;
			padding: 45rpx 0rpx;
			.totalNum{
				font-family: FZCuHeiSongS-B-GB;
				font-weight: 400;
				font-size: 39rpx;
				color: #66FFFF;
				text{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #66FFFF;
				}
			}
			.totalName{
				padding-top: 20rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
	}
	.advantageBox{
		padding-top: 50rpx;
		.advantageTpl{
			text-align: center;
			.advantageName{
				padding-top: 25rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
</style>