<template>
	<view class="container_interell">
		<!-- 公告 -->
		<view class="announcement-bar">
			<view class="announcement-content">
				<span>系統還在建設中，請敬請期待！！！</span>
			</view>
		</view>
		<!-- banner -->
		<view class="banner">
			<swiper indicator-dots="true" indicator-active-color="#fff" circular="true" autoplay="true" interval="3000"
				duration="500" class="swiper-container">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image :src="item.image" class="swiper-image"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- content -->
		<view class="content">
			<view class="content-item" v-for="item in dataList" :key="item.id">
				<image :src="item.img" mode=""></image>
				<view class="content-tit">
					{{item.name}}
				</view>
				<view class="content-btn" @click="construct(item.name)">
					<view class="title">
						立即使用
					</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#fff" size="7"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 彈框 -->
		<view class="modal" v-if="frameval">
			<view class="modal_title">
				快點閱讀保護隱私條款說明
			</view>
			<view class="modal_text">
				本《隱私條款》與《服務協議》希望向你說明:
				<view class="">
					1.為幫助你瀏覽內容、發佈內容與互動，我們會收集你的部分必要資訊。
				</view>
				<view class="">
					2.為了你保存圖片和視頻到相冊，並方便瀏覽內容及節約流量，我們會申請存儲許可權。
				</view>
				<view class="" style="margin-bottom: 30rpx;">
					3.因基礎反作弊能力的需要，協力廠商友盟+SDK需要收集您的設備Mac地址、唯一設備識別碼以提供+SDK需要收集您的設備Mac地址、唯一設備識別碼以提供
				</view>
				<view class="" style="margin-bottom: 30rpx;">
					詳情請查看<text style="color:#4f5ad8">《服務協議》</text>與<text style="color:#4f5ad8">《隱私條款》</text>
				</view>
			</view>
			<view class="modal_btn">
				<view class="savebtn" style="background-color: #f0f0f0;" @click="agree">
					不同意
				</view>
				<view class="savebtn" style="color: #fff;" @click="agree">
					同意
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [{
						image: '../../static/swiper1.png'
					},
					{
						image: '../../static/swiper2.png'
					},
					{
						image: '../../static/swiper3.png'
					}
				],
				dataList: [{
					id: 1,
					name: '巧築智金AI量化',
					img: '../../static/aibgc1.png'
				}, {
					id: 2,
					name: '農業AI',
					img: '../../static/aibgc2.png'
				}, {
					id: 3,
					name: '逍遙遊',
					img: '../../static/aibgc3.png'
				}, {
					id: 4,
					name: '商戰智靈',
					img: '../../static/aibgc4.png'
				}, {
					id: 5,
					name: '解鄉愁',
					img: '../../static/aibgc5.png'
				}, {
					id: 6,
					name: '星際算力雲',
					img: '../../static/aibgc6.png'
				}],
				show: false,
				frameval: false
			}
		},
		methods: {
			construct(name) {
				console.log('跳轉', name)
				switch (name) {
					case '逍遙遊':
						uni.navigateTo({
							url: '/pages/game/index'
						})
						break;
					case '巧築智金AI量化':
						uni.navigateTo({
							url: '/pages/smarttrading/index'
						})
						break;
					case '星際算力雲':
						uni.showToast({
							title: "系統還在建設中，請敬請期待！！！",
							icon: 'none'
						})
						break;
					case '農業AI':
						uni.showToast({
							title: "系統還在建設中，請敬請期待！！！",
							icon: 'none'
						})
						break;
					case '商戰智靈':
						uni.showToast({
							title: "系統還在建設中，請敬請期待！！！",
							icon: 'none'
						})
						break;
					case '解鄉愁':
						uni.showToast({
							title: "系統還在建設中，請敬請期待！！！",
							icon: 'none'
						})
						break;
				}
			},
			agree() {
				console.log('同意');
				this.frameval = false
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 20rpx;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.content-item {
			width: 50%;
			height: 200rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			position: relative;

			.content-tit {
				position: absolute;
				left: 45%;
				top: 20%;
				font-size: 28rpx;
				font-weight: 600;
				color: #fff;
			}

			.content-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 130rpx;
				height: 40rpx;
				background-color: #4F5AD7;
				position: absolute;
				left: 45%;
				top: 50%;
				font-size: 20rpx;
				color: #fff;
				border-radius: 20rpx;
			}
		}
	}

	image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.container_interell {
		border-top: 1px solid dimgrey;
		width: 100vw;
		min-height: 100vh;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #000033, #51599b);
		position: relative;

		.announcement-bar {
			height: 50px;
			background: linear-gradient(135deg, #000000, #333333);
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
			z-index: 1000;
		}

		.announcement-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.close-button {
			background: none;
			border: none;
			color: #ffffff;
			font-size: 18px;
			cursor: pointer;
		}

		// banner
		.banner {
			height: 430rpx;
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			overflow: hidden;

			.swiper-container {
				width: 100%;
				height: 100%;
			}
		}

		.section-title {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 20px;
			text-align: center;
			color: #61dafb;
			position: relative;
			z-index: 2;
		}

		// 模態框
		.modal {
			width: 600rpx;
			height: 740rpx;
			background-color: #fff;
			position: absolute;
			left: 10%;
			top: 26%;
			border-radius: 40rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.modal_title {
				font-weight: 600;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 40rpx;
				font-size: 32rpx;
			}

			.modal_btn {
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;

				.savebtn {
					width: 220rpx;
					height: 80rpx;
					background-color: #4f5ad8;
					border-radius: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}

	::v-deep .uni-swiper-slide-frame {
		border-radius: 20rpx;
	}
</style>