nzhbsr/pages/index/index.vue

<template>
	<view class="container">
		<!-- 轮播图 start -->
		<swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
			<swiper-item v-for="(item, index) in 2" :key="index" class="carousel-item" @click="bannerNavToUrl(item)">
				<image src="../../static/img/banner.png" />
			</swiper-item>
		</swiper>
		<!-- 轮播图 end -->
		<!-- 功能盒 start -->
		<view class="gnh-wrap">
			<view class="gnh-top flex">
				<view class="top-item flex">
					<image src="../../static/icon/gn-1.png" mode="" class=""></image>
					<view class="">认购</view>
				</view>
				<view class="top-item flex">
					<image src="../../static/icon/gn-2.png" mode="" class=""></image>
					<view class="">充币</view>
				</view>
				<view class="top-item flex">
					<image src="../../static/icon/gn-3.png" mode="" class=""></image>
					<view class="">提币</view>
				</view>
				<view class="top-item flex">
					<image src="../../static/icon/gn-4.png" mode="" class=""></image>
					<view class="">语言</view>
				</view>
				<view class="top-item flex">
					<image src="../../static/icon/gn-5.png" mode="" class=""></image>
					<view class="">客服</view>
				</view>
			</view>
			<view class="gnh-btm flex">
				<view class="btm-item">
					<view class="btm-item-name">
						BTC/USDT
					</view>
					<view class="btm-item-val">
						15716.53
					</view>
					<view class="btm-item-bl">
						-2.44%
					</view>
				</view>
				<view class="btm-item">
					<view class="btm-item-name">
						BTC/USDT
					</view>
					<view class="btm-item-val">
						15716.53
					</view>
					<view class="btm-item-bl">
						-2.44%
					</view>
				</view>
				<view class="btm-item">
					<view class="btm-item-name">
						ETH/USDT
					</view>
					<view class="btm-item-val">
						15716.53
					</view>
					<view class="btm-item-bl">
						-2.44%
					</view>
				</view>
			</view>
		</view>
		<!-- 功能盒 end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		computed: {

		},
		onLoad: function(option) {

		},
		onShow: function() {


		},
		//下拉刷新
		onPullDownRefresh() {

		},
		methods: {
			// 轮播图跳转
			bannerNavToUrl(item) {
				// #ifdef H5
				console.log(item.wap_url.indexOf('http'), 'banner');
				if (item.wap_url.indexOf('http') >= 0) {
					window.location.href = item.wap_url;
				}
				// #endif
				//测试数据没有写id，用title代替
				uni.navigateTo({
					url: item.wap_url
				});
			},
		}
	};
</script>

<style lang="scss">
	// 顶部轮播图
	.top-swiper {
		margin: auto;
		width: 726rpx;
		height: 273rpx;

		.carousel-item {
			
		}

		// margin: 20rpx 0 0;
		image {
			// margin: auto;
			width: 726rpx;
			height: 273rpx;
		}
	}
	.gnh-wrap {
		margin: 20rpx 0;
		width: 750rpx;
		height: 315rpx;
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;
		.gnh-top {
			justify-content: space-around;
			height: 156rpx;
			.top-item {
				flex-direction: column;
				justify-content: center;
				align-items: center;
				image {
					width: 66rpx;
					height: 75rpx;
				}
				view {
					font-weight: 500;
					color: #525C6E;
				}
			}
		}
		.gnh-btm {
			justify-content: space-around;
			.btm-item {
				width: 33%;
				text-align: center;
				padding-top: 20rpx;
				.btm-item-name {
					font-size: 24rpx;
					font-weight: 500;
					color: #525C6E;
				}
				.btm-item-val {
					font-size: 26rpx;
					font-weight: 500;
					color: #DD3745;
					padding: 20rpx 0;
				}
				.btm-item-bl {
					font-size: 24rpx;
					font-weight: 500;
					color: #DD3745;
				}
			}
		}
	}
</style>