<template>
	<view class="aboutMine_content">
		<view class="bg">
			<image class="bg__image" src="../../static/imgs/public/img_top_bg_1.png" mode="aspectFill"></image>
			<view class="bg__logo">
				<image class="image" src="../../static/logo.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in data_list" :key="index"
			@click="clickType(item)">
				<view class="item__left">
					<view class="item__left__name">
						{{item.name}}
					</view>
				</view>
				<view class="item__right">
					<view class="item__right__info">
						{{item.des}}
					</view>
					<uni-icons v-if="item.id==1||item.id==2" class="item__right__icon" type='right' size="14"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { tools } from '../../framework/tools';
	let version = uni.getSystemInfoSync().version
	// #ifdef H5
	version = '1.0'
	// #endif
	let data_list = [
		{'id':1,'name':'用户协议','des':''},
	    {'id':2,'name':'隐私协议','des':''},
		{'id':3,'name':'版本号','des':version},
		{'id':4,'name':'联系官方','des':'hainanliangduoduo@163.com'},
	]
	
	function clickType(item:any) {
		switch (item.id){
			case 1:			
			    tools.gotoWebview(item.name,'https://static.hainanmlwl.com/bookstatic/privacy/user_privacy.html')
				break;
			case 2:
			    tools.gotoWebview(item.name,'https://static.hainanmlwl.com/bookstatic/privacy/privacy.html')
				break;
			default:
				break;
		}
	}
	
</script>

<style lang="scss">
	.aboutMine_content{
		display: flex;
		flex-direction: column;
		justify-content: center;
		.bg{
			position: relative;
			flex-shrink: 0;
			width: 100%;
			height: 500rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			&__image{
				width: 100%;
				height: 100%;
			}
			&__logo{
				position: absolute;
				flex-shrink: 0;
				width: 200rpx;
				height: 200rpx;
				.image{
					width: 100%;
					height: 100%;
				}
			}
		}	
		
		.list{
			display: flex;
			flex-direction: column;
			margin: 30px 30rpx;
			padding: 10rpx 20rpx;
			border-radius: 20rpx;
			box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
			background-color: #ffffff;
			
			.item{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				
				&__left{
					display: flex;
					flex-direction: row;
					&__name {
						margin-left: 15rpx;
						font-size: 17px;
					}
				}
				&__right {
					display: flex;
					flex-direction: row;
					align-items: center;
					&__info{
						margin-right: 10rpx;
						font-size: 14px;
						color: #898989;
					}
				}
			}
		}

	}
</style>
