<template>
	<view>
		<navBar leftText="会员中心"></navBar>
		<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
		<view class="vipC relative" :style="'margin-top:'+navH+'px;'">
			<view class="vipInfoC relative">
				<image class="bg" src="/static/image/mine/vip/noVipTopBg.png" mode="widthFix"></image>
				<view class="infoC absolute">
					<view class="title">价值前沿</view>
					<view class="tips">您还不是会员 加入尊享N项服务</view>
				</view>
			</view>
			<view class="vipProfitIntroC relative">
				<view class="titleC flexCenter">
					<image class="icon" src="/static/icon/mine/vip/titleLeft.png" mode="widthFix"></image>
					<view class="title">即刻开启</view>
					<image class="icon" src="/static/icon/mine/vip/titleRight.png" mode="widthFix"></image>
				</view>
				<view class="subtitle">HOW TO SUBSCRIBE</view>
				<view class="stepC flex">
					<view class="num">01</view>
					<view class="step">点击微信顶部搜索框，并指定搜索内容为 <text class="impormant">「公众号」</text></view>
				</view>
				<view class="picList flex">
					<view class="pic flex1">
						<image class="icon" src="/static/icon/mine/vip/step1.png" mode="widthFix"></image>
					</view>
					<view class="pic flex1">
						<image class="icon" src="/static/icon/mine/vip/step2.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="stepC flex">
					<view class="num">02</view>
					<view class="step">搜索<text class="impormant">「价值前沿」</text>，并点击搜索结果中的<text class="impormant">「关注」</text></view>
				</view>
				<view class="picList flex">
					<view class="pic flex1">
						<image class="icon" src="/static/icon/mine/vip/step3.png" mode="widthFix"></image>
					</view>
					<view class="pic flex1">
						<image class="icon" src="/static/icon/mine/vip/step4.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="questionC">
					<view class="title">投资的你是否遇到过这些问题？</view>
					<view class="iconListC flex">
						<image class="icon" src="/static/icon/mine/vip/investQuestion.png" mode="widthFix"></image>
						<view class="list flex1">
							<view class="item" v-for="(item,index) in questionList" :key="index">
								{{item}}
							</view>
						</view>
					</view>
				</view>
				<view class="titleC research flexCenter">
					<image class="icon" src="/static/icon/mine/vip/titleLeft.png" mode="widthFix"></image>
					<view class="title">行业研究中心</view>
					<image class="icon" src="/static/icon/mine/vip/titleRight.png" mode="widthFix"></image>
				</view>
				<view class="subtitle">20余年专业投研，赋能每一位投资者</view>
				<view class="introC">
					<text class="flex1">依托价值前沿研究所深耕20余年的专业积淀，我们为您构建一站式行业研究平台。内容覆盖宏观趋势、产业结构、核心公司动态，帮助投资者看懂行业，识别机会，建立自己的知识体系。</text>
					<image class="icon" src="/static/icon/mine/vip/industrialResearch.png" mode="widthFix"></image>
				</view>
				<view class="titleC decision flexCenter">
					<image class="icon" src="/static/icon/mine/vip/titleLeft.png" mode="widthFix"></image>
					<view class="title">经营决策中心</view>
					<image class="icon" src="/static/icon/mine/vip/titleRight.png" mode="widthFix"></image>
				</view>
				<view class="subtitle">数据洞察，辅助每一个关键判断</view>
				<view class="introC operatingDecision">
					<text class="flex1">我们整合来自一线调研、专题报告、行业闭门会的专业数据，提供宏观到微观的全链条分析。无论是捕捉赛道拐点，还是识别公司价值，经营决策中心都是您可靠的智囊伙伴。</text>
					<image class="icon" src="/static/icon/mine/vip/operatingDecision.png" mode="widthFix"></image>
				</view>
				<view class="titleC privilege flexCenter">
					<image class="icon" src="/static/icon/mine/vip/titleLeft.png" mode="widthFix"></image>
					<view class="title">会员尊享特权</view>
					<image class="icon" src="/static/icon/mine/vip/titleRight.png" mode="widthFix"></image>
				</view>
				<view class="subtitle">数据洞察，辅助每一个关键判断</view>
				<view class="privilegeList flexWrap">
					<view class="item flexColumnCenter" v-for="(item,index) in privilegeList" :key="index">
						<image class="icon" :src="item.icon" mode="widthFix"></image>
						<view class="title">{{item.title}}</view>
						<view class="tips">{{item.tips}}</view>
					</view>
				</view>
				<view class="bottomTitle">准备好提升您的投资策略了吗？</view>
				<view class="bottomTips"> 解锁全部高级功能，让AI成为您的专属投资顾问。</view>
			</view>
		</view>
		<view class="lookMealC fixed" @click="clickVipMeal()">查看VIP套餐</view>
	</view>
</template>

<script>
	import { inject } from 'vue';

	export default {
		data() {
			return {
				navH:inject('navHeight'),
				questionList:['信息纷杂难辨真伪？','信息纷杂难辨真伪？','无法把握宏观趋势与行业动向？'],
				privilegeList:[{
					icon:'/static/icon/mine/vip/depthReport.png',
					title:'深度研报',
					tips:'行业/公司独家分析'
				},
				{
					icon:'/static/icon/mine/vip/strategicInsight.png',
					title:'策略洞察',
					tips:'赛道趋势+拐点信号'
				},
				{
					icon:'/static/icon/mine/vip/dataTool.png',
					title:'数据工具',
					tips:'行业/公司独家分析'
				},
				{
					icon:'/static/icon/mine/vip/dataTool.png',
					title:'智能筛选',
					tips:'按需定制标的列表'
				},
				{
					icon:'/static/icon/mine/vip/decisionSupport.png',
					title:'决策辅助',
					tips:'关键因子评分系统'
				},
				{
					icon:'/static/icon/mine/vip/expertMeeting.png',
					title:'专家闭门会',
					tips:'深度交流机会'
				},
				{
					icon:'/static/icon/mine/vip/dailyReport.png',
					title:'日报周报',
					tips:'研判速递、节奏掌控'
				},
				{
					icon:'/static/icon/mine/vip/specialColumn.png',
					title:'专题专栏',
					tips:'核心团队观点集结'
				},
				{
					icon:'/static/icon/mine/vip/continuouslyUnlock.png',
					title:'持续解锁',
					tips:'不定期上线新功能'
				}]
			}
		},
		onLoad() {
			
		},
		methods: {
			/**
			 * 点击查看vip套餐
			 */
			clickVipMeal()
			{
				uni.navigateTo({
					url:'/pages/mine/vipMeal/vipMeal'
				})
			}
		}
	}
</script>

<style lang="less">
.topBg 
{
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
.vipC
{
	padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
	.vipInfoC 
	{
		margin: 0 25rpx;
		.bg 
		{
			width: 100%;
			height: auto;
		}
		.infoC 
		{
			top: 130rpx;
			left: 38rpx;
			.title 
			{
				font-size: 40rpx;
				font-weight: bold;
				color: #556B87;
			}
			.tips 
			{
				font-size: 28rpx;
				font-weight: 500;
				color: #65758A;
			}
		}
	}
	.vipProfitIntroC 
	{
		background-color: white;
		margin-top: -70rpx;
		padding-top: 40rpx;
		border-radius: 20rpx 20rpx 0 0;
		.titleC 
		{
			.icon  
			{
				width: 54rpx;
				height: auto;
			}
			.title 
			{
				margin: 0 20rpx;
				font-size: 50rpx;
				font-weight: bold;
				color: #222;
			}
		}
		.titleC.research 
		{
			margin-top: 50rpx;
		}
		.titleC.decision
		{
			margin-top: 30rpx;
		}
		.titleC.privilege 
		{
			margin-top: 40rpx;
		}
		.subtitle 
		{
			font-size: 24rpx;
			color: #888;
			text-align: center;
		}
		.stepC 
		{
			margin: 16rpx 25rpx 0;
			.num 
			{
				background-color: #EDEEF1;
				margin-right: 25rpx;
				width: 50rpx;
				line-height: 50rpx;
				border-radius: 50%;
				font-size: 24rpx;
				font-weight: bold;
				color: #5C6473;
				text-align: center;
			}
			.step 
			{
				font-size: 24rpx;
				color: #5C6473;
				.impormant
				{
					font-weight: bold;
				}
			}
		}
		.picList
		{
			padding: 0 25rpx;
			margin-top: 34rpx;
			.pic 
			{
				margin-right: 20rpx;
				.icon 
				{
					width: 100%;
					height: auto;
				}
			}
			.pic:last-child 
			{
				margin-right: 0;
			}
		}
		.questionC
		{
			margin-top: 40rpx;
			.title 
			{
				font-size: 45rpx;
				font-weight: bold;
				color: #222;
				text-align: center;
			}
			.iconListC 
			{
				margin-top: 46rpx;
				padding: 0 23rpx 0 59rpx;
				.icon
				{
					margin-right: 56rpx;
					width: 235rpx;
					height: auto;
				}
				.list
				{
					.item 
					{
						background-color: #EDEDED;
						margin-bottom: 15rpx;
						line-height: 70rpx;
						border-radius: 35rpx;
						font-size: 24rpx;
						color: #555;
						text-align: center;
					}
				}
			}
		}
		.introC 
		{
			display: flex;
			box-shadow: 0px 0px 9rpx 0px rgba(0,0,0,0.1);
			margin: 24rpx 25rpx 0;
			padding: 40rpx 20rpx 20rpx 33rpx;
			line-height: 1.5rem;
			border-radius: 10rpx;
			font-size: 24rpx;
			color: #555;
			.icon 
			{
				margin-top: 92rpx;
				width: 251rpx;
				height: auto;
			}
		}
		.introC.operatingDecision
		{
			padding-bottom: 11rpx;
			.icon 
			{
				margin-top: 116rpx;
				width: 249rpx;
				height: auto;
			}
		}
		.privilegeList 
		{
			margin: 24rpx 25rpx 0;
			padding: 20rpx 0;
			box-shadow: 0px 0px 9rpx 0px rgba(0,0,0,0.1);
			border-radius: 10rpx;
			.item 
			{
				padding: 20rpx 0;
				width: calc((100%)/3);
				.icon
				{
					margin-bottom: 10rpx;
					width: 91rpx;
					height: auto;
				}
				.title 
				{
					font-size: 26rpx;
					font-weight: bold;
					color: #242323;
				}
				.tips 
				{
					margin-top: 6rpx;
					font-size: 22rpx;
					color: #555;
				}
			}
		}
		.bottomTitle
		{
			margin-top: 80rpx;
			font-size: 45rpx;
			font-weight: bold;
			color: #222;
			text-align: center;
		}
		.bottomTips
		{
			font-size: 24rpx;
			color: #888;
			text-align: center;
		}
	}
}
.lookMealC
{
	background-color: #F97316;
	margin: 0 25rpx;
	left: 0;
	right: 0;
	bottom: calc(20rpx + env(safe-area-inset-bottom));
	line-height: 80rpx;
	border-radius: 20rpx;
	font-size: 26rpx;
	font-weight: 500;
	color: white;
	text-align: center;
}
</style>
