<template>
	<view style="height: 100vh;">
		<uni-nav-bar shadow left-icon="left" fixed rightIcon="more-filled" rightText="编辑" title="他/她的主页"
			backgroundColor="transparent" />

		<uni-swiper-dot class="uni-swiper-dot-box" :info="info" :current="current" mode="round" field="content">
			<swiper class="swiper-box" :current="swiperDotIndex">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view class="swiper-item" :class="'swiper-item' + index" style="width: 100%; height: 100%;">
						<image :src="item.url" mode="aspectFill" alt="" style="width: 100%; height: 100%;"></image>
					</view>

				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<uni-section class="mb-10" title="昵称">
		</uni-section>
		<uni-section class="mb-10" title="最新动态">
			<template v-slot:right>
				<uni-icons type="right"></uni-icons>
			</template>
		</uni-section>
		<uni-section class="mb-10" title="认证信息">
			<template v-slot:right>
				<uni-icons type="right"></uni-icons>
			</template>
		</uni-section>
		<uni-section class="mb-10" title="个人资料">
			<template v-slot:right>
				<uni-icons type="right"></uni-icons>
			</template>
		</uni-section>
		<uni-section class="mb-10" title="我想说的话">
			<template v-slot:right>
				<uni-icons type="right"></uni-icons>
			</template>
		</uni-section>
		<uni-section class="mb-10" title="我的标签">
			<template v-slot:right>
				<uni-icons type="right"></uni-icons>
			</template>
		</uni-section>
		<uni-section class="mb-10" title="贵族">
			<template v-slot:right>
				<uni-icons type="right"></uni-icons>
			</template>
		</uni-section>
		<view class="goods-carts">
			<uni-goods-nav :options="options" :button-group="buttonGroup" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				swiperDotIndex: 0,
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 C'
					}
				],
				options: [{
					icon: 'chat',
					text: '私信',
				}, {
					icon: 'star',
					text: '关注',
				}],
				buttonGroup: [{
					text: '撩一下TA',
					backgroundColor: 'linear-gradient(90deg, #ff55ff, #ff557f)',
					color: '#fff'
				}],
			}
		},
		methods: {

		}
	}
</script>

<style>
	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
</style>
