buykey/pages/ucenter/home.vue

<template name="ucenter">
	<view>
		<scroll-view scroll-y class="page">
			<view class="fixed">
				<cu-custom bgColor="bg-shadeTop text-white">
					<block slot="content">微风的Buykey</block>
				</cu-custom>
			</view>
			
			<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
			 :autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
				</swiper-item>
			</swiper>
			
			<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
				<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<gridCol*2">
					<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
						<view class="cu-tag badge" v-if="item.badge!=0">
							<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
						</view>
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
			
			<view class="cu-bar bg-white solid-bottom margin-top hide">
				<view class="action">
					<text class="cuIcon-title text-orange "></text> 最新动态
				</view>
			</view>
			
			<view>
				<view class="cu-timeline">
					<view class="cu-time">昨天</view>
					<view class="cu-item cur cuIcon-noticefill">
						<view class="content bg-green shadow-blur">
							<text>22:22</text> 【广州市】快件已到达地球
						</view>
					</view>
					<view class="cu-item text-red cuIcon-attentionforbidfill">
						<view class="content bg-red shadow-blur">
							这是第一次，我家的铲屎官走了这么久。久到足足有三天！！
						</view>
					</view>
					<view class="cu-item text-grey cuIcon-evaluate_fill">
						<view class="content bg-grey shadow-blur">
							这是第一次，我家的铲屎官走了这么久。
						</view>
					</view>
					<view class="cu-item text-blue">
						<view class="bg-blue content">
							<text>20:00</text> 【月球】快件已到达月球，准备发往地球
						</view>
						<view class="bg-cyan content">
							<text>10:00</text> 【银河系】快件已到达银河系，准备发往月球
						</view>
					</view>
				</view>
				
				<view class="cu-timeline">
					<view class="cu-time">06-17</view>
					<view class="cu-item">
						<view class="content">
							<text>01:30</text> 【喵星】 MX-12138 已揽收，准备发往银河系
						</view>
					</view>
				</view>
				
				<view class="cu-timeline">
					<view class="cu-time">06-17</view>
					<view class="cu-item">
						<view class="content">
							<view class="cu-capsule radius">
								<view class="cu-tag bg-cyan">上午</view>
								<view class="cu-tag line-cyan">10:00</view>
							</view>
							<view class="margin-top">这是第一次，我家的铲屎官走了这么久。久到足足有三天！！ 在听到他的脚步声响在楼梯间的那一刻，我简直想要破门而出，对着他狠狠地吼上10分钟，然后再看心情要不要他进门。</view>
						</view>
					</view>
					<view class="cu-item text-blue">
						<view class="bg-blue shadow-blur content">
							<view class="cu-list menu-avatar radius">
								<view class="cu-item">
									<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
									<view class="content">
										<view class="text-grey">文晓港</view>
										<view class="text-gray text-sm">
											<text class="cuIcon-infofill text-red"></text> 消息未送达</view>
									</view>
									<view class="action">
										<view class="text-grey text-xs">22:20</view>
										<view class="cu-tag round bg-grey sm">5</view>
									</view>
								</view>
								<view class="cu-item">
									<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);">
										<view class="cu-tag badge">99+</view>
									</view>
									<view class="content">
										<view class="text-grey">文晓港
											<view class="cu-tag round orange sm">SVIP</view>
										</view>
										<view class="text-gray text-sm">
											<text class="cuIcon-redpacket_fill text-red"></text> 收到红包</view>
									</view>
									<view class="action">
										<view class="text-grey text-xs">22:20</view>
										<text class="cuIcon-notice_forbid_fill text-gray"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "ucenter",
		data() {
			return {
				cuIconList: [{
					cuIcon: 'location',
					color: 'red',
					badge: 120,
					name: '商品'
				}, {
					cuIcon: 'recordfill',
					color: 'orange',
					badge: 1,
					name: '身份'
				}, {
					cuIcon: 'picfill',
					color: 'yellow',
					badge: 0,
					name: '图像'
				}, {
					cuIcon: 'noticefill',
					color: 'olive',
					badge: 22,
					name: '通知'
				}, {
					cuIcon: 'upstagefill',
					color: 'cyan',
					badge: 0,
					name: '排行榜'
				}, {
					cuIcon: 'clothesfill',
					color: 'blue',
					badge: 0,
					name: '皮肤'
				}, {
					cuIcon: 'discoverfill',
					color: 'purple',
					badge: 0,
					name: '发现'
				}, {
					cuIcon: 'questionfill',
					color: 'mauve',
					badge: 0,
					name: '帮助'
				}, {
					cuIcon: 'commandfill',
					color: 'purple',
					badge: 0,
					name: '问答'
				}, {
					cuIcon: 'brandfill',
					color: 'mauve',
					badge: 0,
					name: '版权'
				}],
				modalName: null,
				gridCol: 4,
				gridBorder: true,
				
				
				cardCur: 0,
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				}, {
					id: 1,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
				}, {
					id: 2,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
				}, {
					id: 3,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
				}, {
					id: 4,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
				}, {
					id: 5,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
				}, {
					id: 6,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
				}],
				dotStyle: true,
			};
		},
		mounted: function(option) {
			console.info(111);
		},
		methods: {
			Gridchange(e) {
				this.gridCol = e.detail.value
			},
			Gridswitch(e) {
				this.gridBorder = e.detail.value
			},
		}
	}
</script>

<style>
	.fixed {
		position: fixed;
		z-index: 99;
	}
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
	
	.cu-list.grid>.cu-item [class*=cuIcon] {
		font-size:50px;
	}
</style>