<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 614 0 72    5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
	<view class="fui-wrap">
		<view class="fui-page__hd">
			<view class="fui-page__title fui-align__center"  @tap="vip">Panel <image
					src="/static/images/index/light/icon_member_3x.png"></image></view>
			<view class="fui-page__desc">Panel 面板，常用的布局组件。</view>
		</view>
		<view class="fui-page__bd">
			<fui-panel :panelData="panelData"  radius="24" fontWeight="600"></fui-panel>
			<fui-panel :panelData="panelData2" :marginTop="24" :size="34" :descSize="26"></fui-panel>
			<fui-panel :panelData="panelData3" :marginTop="24" :size="34" :descSize="26">
				<fui-list-cell arrow :bottomBorder="false" topBorder topLeft="32">
					<text class="fui-text__link">查看更多</text>
				</fui-list-cell>
			</fui-panel>
			<fui-panel :panelData="panelData4" radius="16" :marginTop="24" width="60" height="60" :size="32"></fui-panel>
			<fui-panel :panelData="panelData5" :marginTop="24" :size="32" @click="itemClick">
			</fui-panel>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				panelData: {
					src: '/static/images/common/img_logo.png',
					title: '基础使用',
					desc: 'First UI组件库，是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。'
				},
				panelData2: {
					head: '带标题的列表',
					src: '/static/images/common/logo.png',
					title: 'First UI组件库',
					desc: 'First UI是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。'
				},
				panelData3: {
					head: 'First UI介绍',
					list: [{
						src: '/static/images/common/logo.png',
						title: 'First UI组件库',
						desc: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。'
					}, {
						src: '/static/images/common/logo.png',
						title: 'First UI跨平台UI组件库',
						desc: 'First UI组件库，是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。'
					}]
				},
				panelData4: {
					head: '设置图片大小',
					list: [{
						src: '/static/images/common/img_logo.png',
						title: 'First UI组件库'
					}, {
						src: '/static/images/common/img_logo.png',
						title: 'First UI跨平台UI组件库'
					}]
				},
				panelData5: {
					head: '附加信息',
					list: [{
						title: 'First UI组件库',
						desc: 'First UI组件库，是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。',
						source: '开源中国',
						time: '2021-08-09'
					}, {
						title: 'First UI跨平台UI组件库',
						desc: 'First UI组件库，是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。',
						source: 'GitHub',
						time: '2021-08-09',
						extra: 'Apache License 2.0'
					}]
				}
			}
		},
		methods: {
			itemClick(e) {
				console.log(e)
			},
			vip() {
				this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
			}
		}
	}
</script>

<style>
	page {
		font-weight: normal;
	}

	.fui-text__link {
		color: #465CFF;
		font-size: 32rpx;
	}
</style>