edit

lib/community/y-Barrage/y-Barrage.vue

@@ -0,0 +1,159 @@
+<template>
+	<view class="l-barrage">
+		<block v-for="(item,index) in items" :key="index">
+			<!-- #ifdef H5 -->
+			<text v-if="item.display" class="aon" :style="{top: `${item.top}%`,color: item.color}">
+				{{item.text}}
+			</text>
+			<!-- #endif -->
+
+			<!-- #ifndef H5 -->
+			<text v-if="item.display" class="aon" :style="{top: `${item.top}%`,color: item.color,
+				  animation: `mymove ${Number(item.time)}s linear forwards`
+				  }">
+				{{item.text}}
+			</text>
+			<!-- #endif -->
+		</block>
+	</view>
+</template>
+
+<script>
+	let cycle;
+
+	export default {
+		name: 'l-barrage',
+		props: {
+			minTime: {
+				type: Number,
+				default: 4
+			},
+			maxTime: {
+				type: Number,
+				default: 9
+			},
+			minTop: {
+				type: Number,
+				default: 0
+			},
+			maxTop: {
+				type: Number,
+				default: 40
+			}
+		},
+		data() {
+			return {
+				items: [],
+			}
+		},
+		methods: {
+			getRandomColor() {
+				let rgb = []
+				for (let i = 0; i < 3; ++i) {
+					let color = Math.floor(Math.random() * 256).toString(16)
+					color = color.length == 1 ? '0' + color : color
+					rgb.push(color)
+				}
+				return '#' + rgb.join('')
+			},
+			add(text = '', time = Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime + 1) + this.minTime))) {
+				this.items.push({
+					text,
+					time,
+					top: Math.ceil(Math.random() * (this.maxTop - this.minTop + 1) + this.minTop),
+					color: this.getRandomColor(),
+					display: 1,
+				});
+			},
+			start(items = []) {
+				this.items = [];
+				cycle && (clearInterval(cycle));
+				let i = 0,
+					len = items.length;
+				cycle = setInterval(() => {
+					let time = 5;
+					// #ifndef H5
+					time = Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime + 1) + this.minTime));
+					// #endif
+					if (i < len) {
+						this.add(items[i], time);
+						i++;
+					} else {
+						clearInterval(cycle);
+						setTimeout(() => {
+							this.$emit("end", {});
+						}, time * 1000)
+					}
+				}, 500)
+			}
+		}
+	}
+</script>
+
+<style>
+	.aon {
+		position: absolute;
+		white-space: nowrap;
+		animation: mymove 5s linear forwards;
+		animation-timing-function: linear;
+		-webkit-animation-timing-function: linear;
+		animation-fill-mode: forwards;
+	}
+
+	.l-barrage {
+		position: relative;
+		z-index: 3;
+		width: 100%;
+		height: 320upx;
+		overflow: hidden;
+	}
+
+	@keyframes mymove {
+		from {
+			left: 100%;
+		}
+
+		to {
+			left: -200%;
+		}
+	}
+
+	@-moz-keyframes mymove
+
+	/* Firefox */
+		{
+		from {
+			left: 100%;
+		}
+
+		to {
+			left: -200%;
+		}
+	}
+
+	@-webkit-keyframes mymove
+
+	/* Safari and Chrome */
+		{
+		from {
+			left: 100%;
+		}
+
+		to {
+			left: -200%;
+		}
+	}
+
+	@-o-keyframes mymove
+
+	/* Opera */
+		{
+		from {
+			left: 100%;
+		}
+
+		to {
+			left: -200%;
+		}
+	}
+</style>

lib/community/y-BottomPop/y-bottomPopup.vue

@@ -0,0 +1,132 @@
+<template>
+	<view @touchmove.stop.prevent>
+		<view class="yc-popup-class yc-bottom-popup" :class="[show ? 'yc-popup-show' : '',radius ? 'borderRadius' : '']" :style="{background:bgcolor,height:height?height+'rpx':'auto'}">
+			<view class="pop-head" v-show="showHead">
+				<text @tap="handleClose">取消</text>
+				<text class="color-main title">{{headTitle}}</text>
+				<text class="color-main-detail" @tap="handleSuccess">确定</text>
+			</view>
+			<view class="pop-head" v-show="!showHead && mask">
+				<text></text>
+				<text class="color-main title">{{headTitle}}</text>
+				<text class="cuIcon-close icon-close" @tap="handleClose"></text>
+			</view>
+			<slot></slot>
+		</view>
+		<view class="yc-popup-mask" :class="[show?'yc-mask-show':'']" v-if="mask" @tap="handleClose"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "ycBottomPopup",
+		props: {
+			//是否需要mask
+			mask: {
+				type: Boolean,
+				default: true
+			},
+			showHead: {
+				type: Boolean,
+				default: true
+			},
+			headTitle: {
+				type: String,
+				default: ''
+			},
+			radius:{
+				type: Boolean,
+				default: false
+			},
+			//控制显示
+			show: {
+				type: Boolean,
+				default: false
+			},
+			//背景颜色
+			bgcolor: {
+				type: String,
+				default: "#fff"
+			},
+			//高度 rpx
+			height: {
+				type: Number,
+				default: 0
+			}
+		},
+		methods: {
+			handleClose() {
+				if (!this.show) {
+					return;
+				}
+				this.$emit('close');
+			},
+			handleSuccess() {
+				// this.handleClose()
+				this.$emit('success',{})
+			}
+		}
+	}
+</script>
+
+<style>
+	.yc-bottom-popup {
+		width: 100%;
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 9999999999999999;
+		visibility: hidden;
+		transform: translate3d(0, 100%, 0);
+		transform-origin: center;
+		transition: all 0.3s ease-in-out;
+		min-height: 20rpx;
+		border-top: 1upx solid #ececec;
+	}
+
+	.yc-popup-show {
+		transform: translate3d(0, 0, 0);
+		visibility: visible;
+	}
+
+	.yc-popup-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.6);
+		z-index: 996;
+		transition: all 0.3s ease-in-out;
+		opacity: 0;
+		visibility: hidden;
+	}
+	
+	.borderRadius{
+		border-radius: 30upx 30upx 0 0;
+	}
+
+	.yc-mask-show {
+		opacity: 1;
+		visibility: visible;
+	}
+
+	.pop-head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-size: 32upx;
+		color: #666666;
+		height: 120upx;
+		padding: 0 32upx;
+	}
+	.title{
+		font-size: 32upx;
+		font-family: AlibabaPuHuiTiM;
+	}
+
+	.color-main-detail {
+		color: var(--mainColor);
+	}
+</style>

lib/community/y-Dailog/y-Dailog.vue

@@ -0,0 +1,118 @@
+<template>
+	<!-- 首页资源珍贵弹窗 -->
+	<view class="model-wrap" v-if="showModel" @tap="_hideModel">
+		<view class="model-cont flex-center" @tap.stop>
+			<view class="title padding-tb-lg" v-if="model.title">{{model.title}}</view>
+			<view class="tip-text padding-tb-lg" v-if="model.content">{{model.content}}</view>
+			<view class="btn-box">
+				<view v-if="model.cancle" class="main-btn model-btn-two" @tap="_handleCancle">{{model.cancle}}</view>
+				<view v-if="model.sure" class="main-btn model-btn model-btn-two" @tap="_handleSure">{{model.sure}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				showModel: false,
+				model: {
+					title: '',
+					content: '',
+					sure: '确定',
+					cancle: '取消'
+				},
+				callBack: null
+			}
+		},
+		methods: {
+			_showModel(params) {
+				this.showModel = true
+				this.model = { ...params
+				}
+				this.$emit('showModel')
+			},
+			//隐藏弹窗
+			_hideModel() {
+				this.showModel = false
+			},
+			_handleSure() {
+				this.showModel = false
+				if (this.model.success) {
+					this.model.success()
+				}
+			},
+			_handleCancle() {
+				this.showModel = false
+				if (this.model.fail) {
+					this.model.fail()
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+	.model-wrap {
+		.model-cont {
+			flex-direction: column;
+			width: 100%;
+			margin: 0 60rpx;
+			padding: 60rpx 30rpx 40rpx;
+			background-color: #FFFFFF;
+			border-radius: 8px;
+
+			.tip-img {
+				width: 120rpx;
+				height: 120rpx;
+			}
+
+			.title {
+				font-size: 32rpx;
+				color: #333333;
+				font-family: 'aliM';
+				text-align: center;
+				max-width: 460upx;
+			}
+
+			.tip-text {
+				max-width: 460upx;
+				line-height: 40rpx;
+				text-align: center;
+				font-size: 28rpx;
+				color: #666666;
+			}
+
+			.model-btn {
+				width: 400rpx;
+				height: 72rpx;
+				text-align: center;
+			}
+
+			.model-btn-two {
+				text-align: center;
+				padding: 12upx 36upx;
+				flex: 1;
+				margin: 0 10upx;
+				letter-spacing: -2upx;
+				max-width: 400rpx;
+			}
+
+			.btn-box {
+				width: 100%;
+				display: flex;
+				flex-direction: row;
+				justify-content: center;
+
+				.model-btn {
+					flex: 1;
+					width: 260rpx;
+					height: 72rpx;
+					background-color: var(--mainColor) !important;
+					color: #FFFFFF !important;
+				}
+			}
+		}
+	}
+</style>

lib/community/y-DiaryItem/y-DiaryItem.vue

@@ -0,0 +1,213 @@
+<template>
+	<view :class="['card-item',radius ? 'radius' : '']">
+		<view class="item-head">
+			<view class="left-info">
+				<view class="img-wrap flex-center" @tap="toOthers(item.id)">
+					<image :src="item.avatarUrl" mode="widthFix" class="avatar"></image>
+				</view>
+				<view class="head-name">{{ item.nickName }}</view>
+			</view>
+			<text class="color-nine">{{item.createTime}}</text>
+		</view>
+		<view class="content" @tap="toDetails(item.id)">
+			<view class="text-content">{{ item.title }}</view>
+			<view class="img-wrap padding-bottom-lg" v-if="item.imgList.length == 1">
+				<view class="img-box">
+					<image v-for="(child, idx) in item.imgList" :key="idx" :src="child" mode="widthFix" class="img" @tap.stop @tap="Dever.viewPic([child], child)"></image>
+				</view>
+			</view>
+			<view class="img-list padding-bottom-lg" v-if="item.imgList.length > 1">
+				<view class="img-box" v-for="(child, idx) in item.imgList" :key="idx">
+					<image :src="child" mode="widthFix" class="img" @tap.stop @tap="Dever.viewPic(item.imgList, child)"></image>
+				</view>
+			</view>
+			<view class="bottom-btn padding-bottom-sm">
+				<view class="btn-item flex-center">
+					<image class="img" src="@/static/img/diary/img_say.png" mode="widthFix"></image>
+					<text>{{ item.commentNum }}</text>
+				</view>
+				<view class="btn-item flex-center" @tap.stop @tap="handleLike(item.id, item.isLike, item.likeNum)">
+					<image class="img" v-if="!item.isLike" src="@/static/img/diary/img_zan.png" mode="widthFix"></image>
+					<image class="img" v-else src="@/static/img/diary/img_zan_1.png" mode="widthFix"></image>
+					<text>{{ item.likeNum }}</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			obj: {
+				type: Object
+			},
+			radius:{
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				item: this.obj,
+				showPop: false,
+				commentList: []
+			};
+		},
+		watch: {
+			obj(val) {
+				this.list = val;
+			}
+		},
+		methods: {
+			handleFollow(id) {
+				let that = this;
+				that.item.follow = !that.item.follow;
+			},
+			toDetails(id) {
+				uni.navigateTo({
+					url: '../../pages/diary/details?id=' + id
+				});
+			},
+			handleLike(id, isLike, likeNum) {
+				let that = this;
+				if (that.item.isLike) {
+					that.item.likeNum--;
+				} else {
+					that.item.likeNum++;
+				}
+				that.item.isLike = !that.item.isLike;
+			},
+			toOthers() {
+				uni.navigateTo({
+					url: '../../pages/mine/other'
+				});
+			},
+		}
+	};
+</script>
+
+<style lang="less" scoped>
+	.flex-center {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.bottom-btn {
+		display: flex;
+	
+		.btn-item {
+			flex: 1;
+			color: var(--mainColor);
+	
+			.img {
+				width: 50rpx;
+				height: 50rpx;
+				margin-right: 20rpx;
+			}
+		}
+	}
+	.padding-bottom-sm {
+	    padding-bottom: 9px;
+		text-align: center;
+		padding-top: 12px;
+	}
+	.radius{
+		border-radius: 16rpx;
+	}
+	.card-item {
+		padding: 20rpx 40rpx 0rpx;
+		background-color: #ffffff;
+		box-shadow: 0 20rpx 40rpx 0 rgba(0, 0, 0, 0.1);
+
+		.item-head {
+			display: flex;
+			align-items: center;
+			width: 100%;
+			justify-content: space-between;
+
+			.left-info {
+				display: flex;
+				align-items: center;
+
+				.img-wrap {
+					width: 80rpx;
+					height: 80rpx;
+					overflow: hidden;
+					border-radius: 50%;
+
+					.avatar {
+						width: 100%;
+						height: 80rpx;
+					}
+				}
+
+				.head-name {
+					padding-left: 40rpx;
+					color: #666666;
+					font-size: 32rpx;
+				}
+			}
+
+			.follow-btn {
+				width: 140rpx;
+				height: 60rpx;
+				border: 1rpx solid var(--mainColor);
+				color: var(--mainColor);
+				border-radius: 40rpx;
+			}
+
+			.followed {
+				color: #fff;
+				background: var(--activeColor);
+				border: 1rpx solid var(--activeColor);
+			}
+		}
+
+		.content {
+			.text-content {
+				padding: 40rpx 0;
+				justify-content: space-between;
+				color: var(--mainColor);
+				font-size: 30rpx;
+				text-align: justify;
+			}
+
+			.img-list {
+				display: flex;
+				flex-flow: row wrap;
+
+				.img-box {
+					flex: 0 0 30%;
+					margin: 0 1% 1%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					overflow: hidden;
+					height: 200rpx;
+					border-radius: 4px;
+					background-color: #ececec;
+
+					.img {
+						width: 100%;
+					}
+				}
+			}
+
+			.img-wrap {
+				.img-box {
+					width: 100%;
+					max-height: 400rpx;
+					overflow: hidden;
+					display: flex;
+					align-items: center;
+				}
+			}
+		}
+	}
+
+	.cont {
+		--color: var(--activeColor);
+		--count: 1;
+	}
+</style>

lib/community/y-Empty/y-Empty.vue

@@ -0,0 +1,54 @@
+<template>
+	<view class="empty-wrap" :style="{height: height + 'px'}">
+		<view class="img-box"><image src="@/static/img/img_empty.png" mode="widthFix" class="img"></image></view>
+		<p class="empty-text">{{emptyText}}</p>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default{
+		props:{
+			emptyText: {
+				type: String,
+				default: '暂无数据哦！'
+			},
+			height: {
+				type: [Number,String],
+				default: 300
+			}
+		},
+		data(){
+			return{
+				
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+.empty-wrap {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	width: 100%;
+	.img-box {
+		width: 200rpx;
+		height: 192rpx;
+		overflow: hidden;
+		display: flex;
+		justify-content: center;
+		.img {
+			width: 200rpx;
+			height: 164rpx;
+		}
+	}
+	.empty-text {
+		text-align: center;
+		font-size: 24rpx;
+		color: #999999;
+		padding: 30rpx;
+	}
+}
+</style>

lib/community/y-Fab/y-Fab.vue

@@ -0,0 +1,255 @@
+<template>
+	<view @touchmove.stop.prevent>
+		<view class="yc-fab-box ycFly" :class="{'yc-fab-right':!left || (left && right)}" :style="{left:getLeft(),right:getRight(),bottom:bottom+'rpx'}">
+			<view class="yc-fab-btn" :class="{'yc-visible':isOpen,'yc-fab-hidden':hidden}">
+				<view class="yc-fab-item-box" :class="{'yc-fab-item-left':left && !right && item.imgUrl}" v-for="(item,index) in btnList"
+				 :key="index" @tap.stop="handleClick(index)">
+					<view :class="[left && !right?'yc-text-left':'yc-text-right']" v-if="item.imgUrl" :style="{fontSize:item.fontSize+'rpx',color:item.color}">{{item.text || ""}}</view>
+					<view class="yc-fab-item" :style="{width:width+'rpx',height:height+'rpx',background:item.bgColor || bgColor,borderRadius:radius}">
+						<view class="yc-fab-title" v-if="!item.imgUrl" :style="{fontSize:item.fontSize+'rpx',color:item.color}">{{item.text || ""}}</view>
+						<image :src="item.imgUrl" class="yc-fab-img" v-else :style="{width:item.imgWidth+'rpx',height:item.imgHeight+'rpx'}"></image>
+					</view>
+				</view>
+			</view>
+			<view class="yc-fab-item" :class="{'yc-active':isOpen}" :style="{width:width+'rpx',height:height+'rpx',borderRadius:radius,background:bgColor,color:color}"
+			 @tap.stop="handleClick(-1)">
+				<view class="yc-fab-icon yc-icon-plus"></view>
+			</view>
+		</view>
+		<view class="yc-fab-mask" :class="{'yc-visible':isOpen}" @tap="handleClickCancel"></view>
+	</view>
+</template>
+
+<script>
+	//拓展出来的按钮不应多于6个，否则违反了作为悬浮按钮的快速、高效的原则
+	export default {
+		name: "tuiFab",
+		props: {
+			//rpx 为0时值为auto
+			left: {
+				type: Number,
+				default: 0
+			},
+			//rpx 当为0时且left不为0，值为auto
+			right: {
+				type: Number,
+				default: 80
+			},
+			//rpx bottom值
+			bottom: {
+				type: Number,
+				default: 100
+			},
+			//默认按钮 宽度 rpx
+			width: {
+				type: Number,
+				default: 108
+			},
+			//默认按钮 高度 rpx
+			height: {
+				type: Number,
+				default: 108
+			},
+			//圆角值
+			radius: {
+				type: String,
+				default: "50%"
+			},
+			//默认按钮背景颜色
+			bgColor: {
+				type: String,
+				default: "#435257"
+			},
+			//字体颜色
+			color: {
+				type: String,
+				default: "#fff"
+			},
+			//拓展按钮
+			// bgColor: "#5677fc",
+			// //图标/图片地址
+			// imgUrl: "/static/images/fab/fab_reward.png",
+			// //图片高度 rpx
+			// imgHeight: 60,
+			// //图片宽度 rpx
+			// imgWidth: 60,
+			// //名称
+			// text: "名称",
+			// //字体大小
+			// fontSize: 30,
+			// //字体颜色
+			// color: "#fff"
+			btnList: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			//点击遮罩 是否可关闭
+			maskClosable: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				isOpen: false,
+				hidden: true,
+				timer: null
+			};
+		},
+		methods: {
+			getLeft() {
+				let val = "auto"
+				if (this.left && !this.right) {
+					val = this.left + 'rpx'
+				}
+				return val
+			},
+			getRight() {
+				let val = this.right + 'rpx'
+				if (this.left && !this.right) {
+					val = "auto"
+				}
+				return val
+			},
+			handleClick: function(index) {
+				this.hidden = false
+				clearTimeout(this.timer)
+				if (index == -1 && this.btnList.length) {
+					this.isOpen = !this.isOpen
+				} else {
+					this.$emit("click", {
+						index: index
+					})
+					this.isOpen = false
+				}
+				if (!this.isOpen) {
+					this.timer = setTimeout(() => {
+						this.hidden = true
+					}, 200)
+				}
+			},
+			handleClickCancel: function() {
+				if (!this.maskClosable) return;
+				this.isOpen = false
+			}
+		},
+		beforeDestroy() {
+			clearTimeout(this.timer)
+			this.timer = null
+		}
+	}
+</script>
+
+<style>
+	@font-face {
+		font-family: 'tuifab';
+		src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAREAA0AAAAABnAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEKAAAABoAAAAciPExJUdERUYAAAQIAAAAHgAAAB4AKQAKT1MvMgAAAaAAAABCAAAAVjyBSAVjbWFwAAAB9AAAAD4AAAFCAA/pvmdhc3AAAAQAAAAACAAAAAj//wADZ2x5ZgAAAkAAAABRAAAAYFkYQQNoZWFkAAABMAAAADAAAAA2Fm5OF2hoZWEAAAFgAAAAHQAAACQH3QOFaG10eAAAAeQAAAAPAAAAEAwAAANsb2NhAAACNAAAAAoAAAAKADAAAG1heHAAAAGAAAAAHwAAACABDwAobmFtZQAAApQAAAFJAAACiCnmEVVwb3N0AAAD4AAAAB8AAAAx2XRuznjaY2BkYGAAYtGolt54fpuvDNwsDCBwc1krH5xm/t/I/J+5FsjlYGACiQIAGAEKZHjaY2BkYGBu+N/AEMPCAALM/xkYGVABCwBZ4wNrAAAAeNpjYGRgYGBhkGEA0QwMTEDMBYQMDP/BfAYAC4kBOAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PhJ8JMzf8b2CIYW5gaAAKM4LkAN21DAEAAHjaY2GAABYIZgYAAIMAEAB42mNgYGBmgGAZBkYGELAB8hjBfBYGBSDNAoRA/jPh//8hpOQHqEoGRjYGGJOBkQlIMDGgAkaGYQ8AUSIHswAAAAAAAAAAAAAAMAAAeNpjYGRg/t/I/J+5lkGagYFRUVCPUYmNXVCRj1FETFxRUI7RyMxcUNGO0USN+fS/HEY5XTnGfznicnLijFPAHMYpYnJyjFvBlBgWBQBNJxKpAAAAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOWMCiTIxMbFmZiRmJ+QALXAKKAAAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADAAMAAQAEAAAAAgAAAAB42mNgYGBkAIKrS9Q5QPTNZa18MBoAPbcFzgAA) format('woff');
+		font-weight: normal;
+		font-style: normal;
+	}
+
+	.yc-fab-icon {
+		font-family: "tuifab" !important;
+		font-style: normal;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		padding: 10rpx;
+	}
+
+	.yc-icon-plus:before {
+		content: "\e613";
+	}
+
+	.yc-fab-box {
+		display: flex;
+		justify-content: center;
+		flex-direction: column;
+		position: fixed;
+		z-index: 99997;
+	}
+
+	.yc-fab-right {
+		align-items: flex-end;
+	}
+
+	.yc-fab-btn {
+		transform: scale(0);
+		transition: all 0.2s ease-in-out;
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	.yc-fab-hidden {
+		height: 0;
+		width: 0;
+	}
+
+
+	.yc-fab-item-box {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		padding-bottom: 40rpx;
+	}
+
+	.yc-fab-item-left {
+		flex-flow: row-reverse;
+	}
+
+	.yc-fab-title {
+		width: 90%;
+		text-align: center;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.yc-text-left {
+		padding-left: 28rpx;
+	}
+
+	.yc-text-right {
+		padding-right: 28rpx;
+	}
+
+	.yc-fab-img {
+		display: block;
+	}
+
+	.yc-fab-item {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
+		transition: all 0.2s linear;
+	}
+
+	.yc-radius {
+		border-radius: 50%;
+	}
+
+	.yc-active {
+		transform: rotate(135deg);
+	}
+
+	.yc-fab-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.75);
+		z-index: 99996;
+		transition: all 0.2s ease-in-out;
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	.yc-visible {
+		visibility: visible;
+		opacity: 1;
+		transform: scale(1);
+	}
+</style>

lib/community/y-LoadMore/y-LoadMore.vue

@@ -0,0 +1,60 @@
+<template>
+	<view class="mix-load-more">
+		<image
+			class="mix-load-icon"
+			src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUJCRjNGOEQ1RDNBMTFFOUFERjY5MEU0MTg5MjY0NDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUJCRjNGOEU1RDNBMTFFOUFERjY5MEU0MTg5MjY0NDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QkJGM0Y4QjVEM0ExMUU5QURGNjkwRTQxODkyNjQ0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QkJGM0Y4QzVEM0ExMUU5QURGNjkwRTQxODkyNjQ0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pkf/QQsAAAHYSURBVHjavFfRcYJAEOVu8h87SFJBSAUJNGCsIKQCsQK1AkkHpAKwAaUE7YB0kFRg3prFcWAPTziyM+uJHPvuvV32TuVZ2na79TG8wWkc8Ui2g3/z+BkEwc4mnrIAXGCYMpiN0SISLGDZCRiArxhW8Huvm5XwGRaQSzd1C8usB6jHz2aINbdijIkp59KlpWD+bmTMTNtA13AK8IRAipy+82/rlucijt1kzDnNWgBjAJUXCpHkTeBjw5RJlfMT8GazKZVSd8JkKpDkGl2xgJgLs1FwiPVwkppkcAVKxs/MpIKrJD8CHw6HWJK3C2gNXMr79AhMHQlsb4UJsYNqlmKMCJMYRwa2ZV9UjiGxjjRk9oUbucN3uBGLMLWhB+8cAjdiUWo1Ph4FiZwBG2L52vsHg7Q/9WvK8d6w9zozqJrUrzXvnw0pXAJDbmoaAXz5dxksboBOOXiuzaW+nToGLzAU57uTBDDmhj+Yaaq6evLZVoMCS8mv5OZdZhCz2RZpH/4YhDGzNrFLwDxznXMlHH3mF/ou+b5vd+t72LM6Q1ufqy2YC69pUHTKsdBpJnjNvizjvHQuLgE8D8OQCmppeM/PrXAidcuftogPDiPaTmlB1ANYoavsV4ABAGz+xJ8bzHJJAAAAAElFTkSuQmCC"
+			v-show="status === 1"
+		></image>
+		<text class="mix-load-text">{{ text[status] }}</text>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'mix-load-more',
+	props: {
+		status: {
+			//0加载前，1加载中，2没有更多了
+			type: Number,
+			default: 0
+		},
+		text: {
+			type: Array,
+			default() {
+				return ['上拉显示更多', '正在加载...', '没有更多数据了'];
+			}
+		}
+	}
+};
+</script>
+
+<style>
+.mix-load-more {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	height: 90upx;
+}
+.mix-load-icon {
+	display: block;
+	width: 36upx;
+	height: 36upx;
+	margin-right: 12upx;
+	animation: load 1.2s cubic-bezier(0.37, 1.08, 0.7, 0.74) infinite;
+}
+.mix-load-text {
+	font-size: 28upx;
+	color: #888;
+}
+
+@-webkit-keyframes load {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}
+</style>

lib/community/y-PersionInfo/y-PersionInfo.vue

@@ -0,0 +1,181 @@
+<template>
+	<view class="info-wrap">
+		<view class="top-box flex-center">
+			<image :src="info.avatarUrl" mode="widthFix" class="filter"></image>
+		</view>
+		<view class="mine-top">
+			<view class="avatar-wrap">
+				<view class="avatar flex-center">
+					<image :src="info.avatarUrl" mode="widthFix" class="img"></image>
+				</view>
+				<view class="cu-tag badge ycShake" :class="info.gender == 0 ? 'cuIcon-female bg-pink' : 'cuIcon-male bg-blue'"></view>
+				<view class="name">
+					<p>{{ info.nickName }}</p>
+					<p class="motto">虽然你我会下落不明，你知道我曾为你动过情</p>
+				</view>
+			</view>
+		</view>
+		<view class="top-menu">
+			<view class="menu-box flex-center" v-for="(item, index) in menuList" :key="index" @tap="handleMenu(index)">
+				<text class="title">{{ item.num }}</text>
+				<text>{{ item.name }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			info: {
+				type: Object
+			}
+		},
+		data() {
+			return {
+				menuList: [{
+					name: '喜欢',
+					num: 20
+				}, {
+					name: '关注',
+					num: 20
+				}, {
+					name: '粉丝',
+					num: 20
+				}]
+			};
+		},
+		methods:{
+			handleMenu(index){
+				this.$emit('change',index)
+			}
+		}
+	};
+</script>
+
+<style lang="less" scoped>
+	.info-wrap {
+		position: relative;
+
+		.top-box {
+			position: absolute;
+			top: 0;
+			width: 100%;
+			height: 400rpx;
+			overflow: hidden;
+			border-radius: 0 0px 100rpx 100rpx;
+
+			.filter {
+				width: 100%;
+				filter: brightness(0.8) blur(10rpx);
+			}
+		}
+
+		.mine-top {
+			position: relative;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+			padding: 40rpx 20rpx;
+			border-radius: 0 0px 100rpx 100rpx;
+			height: 400rpx;
+
+			.avatar-wrap {
+				position: relative;
+				display: flex;
+				align-items: center;
+				width: 100%;
+				padding: 0 40rpx 20rpx;
+				
+				.cu-tag{
+					top: 0;
+					left: 110rpx;
+				}
+
+				.avatar {
+					position: relative;
+					width: 100rpx;
+					height: 100rpx;
+					border-radius: 50%;
+					overflow: hidden;
+
+					.img {
+						width: 100%;
+						height: 100rpx;
+						overflow: hidden;
+						border-radius: 50%;
+					}
+				}
+
+				.name {
+					width: 520rpx;
+					overflow: hidden;
+					font-size: 36rpx;
+					color: #fff;
+					padding-left: 40rpx;
+
+					.motto {
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						font-size: 24rpx;
+						padding: 20rpx 0;
+					}
+				}
+			}
+
+			.fans-item {
+				display: flex;
+				align-items: center;
+				width: 100%;
+
+				.item {
+					display: flex;
+					flex-direction: column;
+					flex: 1;
+					color: #ffffff;
+					text-align: center;
+					font-size: 32rpx;
+
+					.title {
+						font-size: 32rpx;
+						font-family: aliM;
+						padding-top: 20rpx;
+					}
+				}
+			}
+		}
+
+		.top-menu {
+			position: absolute;
+			right: 40rpx;
+			left: 40rpx;
+			bottom: -80rpx;
+			height: 180rpx;
+			display: flex;
+			justify-content: space-around;
+			align-items: center;
+			padding: 40rpx;
+			color: var(--mainColor);
+			background-color: #fff;
+			border-radius: 16rpx;
+			line-height: 46rpx;
+			text-align: left;
+			font-size: 28rpx;
+
+			.menu-box {
+				display: flex;
+				flex-direction: column;
+				flex: 1;
+				font-size: 24rpx;
+
+				.title {
+					color: var(--activeColor);
+					font-size: 48rpx;
+					padding-bottom: 20rpx;
+				}
+			}
+		}
+	}
+</style>

lib/community/y-Refresh/y-Refresh.vue

@@ -0,0 +1,186 @@
+<template>
+	<!-- #ifdef H5	 -->	
+	<view 
+		class="mix-refresh-content"
+		:style="{
+				transform: 'translateY('+ pageDeviation +'px)',
+				transition: pageTransition + 's',
+				height: 'calc(100% - ' + pageTop + 'px)',
+				maxHeight: 'calc(100% - ' + pageTop + 'px)'
+			}"
+		@touchstart="pageTouchstart"
+		@touchmove="pageTouchmove"
+		@touchend="pageTouchend"
+	>
+	<!-- #endif -->
+	<!-- #ifndef H5	 -->	
+	<view 
+		class="mix-refresh-content"
+		:style="{
+				transform: 'translateY('+ pageDeviation +'px)',
+				transition: pageTransition + 's',
+				height: 'calc(100vh - ' + pageTop + 'px)',
+				maxHeight: 'calc(100vh - ' + pageTop + 'px)'
+			}"
+		@touchstart="pageTouchstart"
+		@touchmove="pageTouchmove"
+		@touchend="pageTouchend"
+	>
+	<!-- #endif -->
+	
+		<!-- 下拉刷新 -->
+		<view class="mix-loading-wrapper">
+			<text class="cuIcon-icloading cu-load loading"></text>
+			<text>既许一人之偏爱，愿尽余生之慷慨</text>
+		</view>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	let startY, moveY, windowHeight = 500, platform;
+	let timeDiff = 0;
+	let touchending;
+	export default {
+		
+		props: {
+			top: {
+				//距离顶部距离，单位upx
+				type: Number,
+				default: 0
+			},
+		},
+		data() {
+			return {
+				pageDeviation: 0, //下偏移量
+				pageTransition: 0, //回弹过渡时间
+				refreshReady: false, //进入刷新准备状态
+				refreshing: false, // 进入刷新状态
+				loadingText: ['人前显贵，人后受罪']
+			};
+		},
+		computed: {
+			pageTop(){
+				return uni.upx2px(this.top);
+			}
+		},
+		created(){
+			uni.getSystemInfo({
+				success: function(e) {
+					platform = e.platform;
+					windowHeight = e.windowHeight;
+				}
+			})
+		},
+		methods: {
+			pageTouchstart(e){
+				touchending = false;
+				this.pageTransition = 0;
+				startY = e.touches[0].pageY;
+			},
+			pageTouchmove(e){
+				if(touchending){
+					return;
+				}
+				moveY = (e.touches[0].pageY - startY) * 0.4;
+				if(moveY >= 0){
+					this.pageDeviation = moveY;
+					
+					this.$emit('setEnableScroll', false);
+				}
+				if(moveY >= 50 && this.refreshReady === false){
+					this.refreshReady = true;
+				}else if(moveY < 50 && this.refreshReady === true){
+					this.refreshReady = false;
+				}
+				if(platform === 'ios' && e.touches[0].pageY > windowHeight + 10){
+					this.pageTouchend();
+				}
+			},
+			pageTouchend(){
+				touchending = true;
+				if(moveY === 0){
+					return;
+				}
+				this.pageTransition = 0.3;
+				if(moveY >= 50){
+					this.startPulldownRefresh();
+				}else{
+					this.pageDeviation = 0;
+				}
+				
+				if(this.refreshReady === true){
+					this.refreshReady = false;
+				}
+				//修复下拉一点回弹后页面无法滚动的bug
+				this.$emit('setEnableScroll', true);
+				startY = moveY = 0;
+			},
+			//开启下拉刷新
+			startPulldownRefresh(){
+				if(+new Date() - timeDiff < 100){
+					return;
+				}
+				timeDiff = +new Date();
+				this.refreshing = true;
+				this.pageDeviation = uni.upx2px(90);
+				this.$emit('refresh');
+			},
+			//结束下拉刷新
+			endPulldownRefresh(){
+				let that = this
+				setTimeout(function(){
+					that.refreshing = false;
+					that.pageDeviation = uni.upx2px(0);
+				},1200)
+				//this.$emit('setEnableScroll', true);
+			},
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.mix-refresh-content{
+		display: flex;
+		flex-direction: column;
+		position: relative;
+	}
+	/* 下拉刷新部分 */
+	.mix-loading-wrapper{
+		position: absolute;
+		left: 0;
+		top: 0;
+		transform: translateY(-100%);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 100rpx;
+		font-size: 24rpx;
+		.cu-load{
+			font-size: 36rpx;
+		}
+	}
+	
+	.mix-loading-icon{
+		width: 70upx;
+		height: 70upx;
+		transition: .3s;
+	}
+	.mix-loading-icon.ready{
+		transform: scaleX(1.3);
+	}
+	.mix-loading-icon.active{
+		animation: loading .5s ease-in infinite both alternate;
+	}
+	
+	@keyframes loading {
+		0% {
+			transform: translateY(-20upx) scaleX(1);
+		}
+		100% {
+			transform: translateY(4upx)  scaleX(1.3);
+		}
+	}
+	
+</style>

lib/community/y-Tabs/y-Tabs.vue

@@ -0,0 +1,217 @@
+<template>
+	<view class="tabBlock" v-if="list.length > 0">
+		<scroll-view scroll-x="true" scroll-with-animation :scroll-left="tabsScrollLeft" @scroll="scroll">
+			<view class="tab" id="tab_list">
+				<view v-for="(item, index) in list" :key="index" :class="['tab__item', {'tab__item--active': currentIndex === index}]"
+				 :style="{color: (currentIndex === index ? `${itemColor}`: '')}" id="tab_item" @click="select(item, index)">
+					<view :class="['tab__item-title', {'tab__item-title--active': currentIndex === index}]">
+						<text class="tab_item_t">{{item.activityTime}}</text>
+						<text class="tab_item_c">{{item.title}}</text>
+					</view>
+				</view>
+			</view>
+			<view class="tab__line" v-if="lineAnimated" :style="{background: lineColor, width: lineStyle.width, transform: lineStyle.transform,transitionDuration: lineStyle.transitionDuration}">
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			value: [Number, String],
+			list: { // 传值
+				type: Array,
+				default: () => {
+					return []
+				}
+			},
+			itemColor: String, // tab主色调
+			lineColor: String, // 下划线主色调
+			lineAnimated: { // 是否展示下划线动画
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				currentIndex: 0,
+				lineStyle: {},
+				scrollLeft: 0,
+				tabsScrollLeft: 0,
+				duration: 0.3
+			}
+		},
+		watch: {
+			list() {
+				this.setTabList()
+			},
+			value() {
+				this.currentIndex = this.value
+				this.setTabList()
+			}
+		},
+		mounted() {
+			this.currentIndex = this.value
+			this.setTabList()
+			if (!this.lineAnimated) {
+				this.duration = 0
+			}
+		},
+		methods: {
+			select(item, index) {
+				this.$emit('input', index)
+			},
+			setTabList() {
+				this.$nextTick(() => {
+					if (this.list.length > 0) {
+						this.setLine()
+						this.scrollIntoView()
+					}
+				})
+			},
+			setLine() {
+				let lineWidth = 0,
+					lineLeft = 0
+				this.getElementData(`#tab_item`, (data) => {
+					let el = data[this.currentIndex]
+					lineWidth = el.width / 2
+					// lineLeft = el.width * (this.currentIndex + 0.5)  // 此种只能针对每个item长度一致的
+					lineLeft = el.width / 2 + (-data[0].left) + el.left
+					this.lineStyle = {
+						width: `${lineWidth}px`,
+						transform: `translateX(${lineLeft}px) translateX(-50%)`,
+						transitionDuration: `${this.duration}s`
+					};
+				})
+			},
+			scrollIntoView() { // item滚动
+				let lineLeft = 0;
+				this.getElementData('#tab_list', (data) => {
+					let list = data[0]
+					this.getElementData(`#tab_item`, (data) => {
+						let el = data[this.currentIndex]
+						// lineLeft = el.width * (this.currentIndex + 0.5) - list.width / 2 - this.scrollLeft
+						lineLeft = el.width / 2 + (-list.left) + el.left - list.width / 2 - this.scrollLeft
+						this.tabsScrollLeft = this.scrollLeft + lineLeft
+					})
+				})
+			},
+			getElementData(el, callback) {
+				uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
+					callback(data[0]);
+				});
+			},
+			scroll(e) {
+				this.scrollLeft = e.detail.scrollLeft;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.tabBlock {
+		position: relative;
+		background: #020824;
+
+		.tab {
+			position: relative;
+			display: flex;
+			font-size: 28rpx;
+			padding-bottom: 15rpx;
+			white-space: nowrap;
+
+			&__item {
+				flex: 1;
+				text-align: center;
+				line-height: 90rpx;
+				color: $uni-text-color;
+				margin-right: 14rpx;
+
+				&--active {
+					color: $uni-color-primary;
+				}
+
+				&-title {
+					width: 100%;
+					height: 100rpx;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: center;
+					background: #131B46;
+					border-radius: 6px;
+
+					text {
+						display: block;
+					}
+
+					.tab_item_t {
+						font-family: AlibabaPuHuiTiH;
+						font-size: 14px;
+						color: #00E78D;
+						letter-spacing: 0;
+						text-align: center;
+						line-height: 20px;
+						font-weight: 600;
+					}
+
+					.tab_item_c {
+						font-family: AlibabaPuHuiTiM;
+						font-size: 12px;
+						color: #00E78D;
+						letter-spacing: 0;
+						text-align: center;
+						line-height: 21px;
+					}
+				}
+
+				.tab__item-title--active {
+					width: 100%;
+					height: 100rpx;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: center;
+					background: #00E78D;
+					border-radius: 6px;
+
+					.tab_item_t {
+						font-family: AlibabaPuHuiTiH;
+						font-weight: 600;
+						font-size: 16px;
+						color: #FFFFFF;
+						letter-spacing: 0;
+						text-align: center;
+						line-height: 20px;
+					}
+
+					.tab_item_c {
+						font-family: AlibabaPuHuiTiM;
+						font-size: 14px;
+						color: #FFFFFF;
+						letter-spacing: 0;
+						text-align: center;
+						line-height: 21px;
+					}
+				}
+			}
+
+			&__item:last-child {
+				margin-right: 0;
+			}
+		}
+
+		.tab__line {
+			display: block;
+			height: 6rpx;
+			position: absolute;
+			bottom: 15rpx;
+			left: 0;
+			z-index: 1;
+			border-radius: 3rpx;
+			position: relative;
+			background: $uni-color-primary;
+		}
+	}
+</style>

lib/community/y-pageAnimation/index.css

@@ -0,0 +1,37 @@
+/* #ifdef H5 */
+uni-page {
+	opacity: 0;
+}
+uni-page.animation-before {
+	/* 在页面上使用 transform 会导致页面内的 fixed 定位渲染为 absolute，需要在动画完成后移除 */
+	transform: translateX(-20px);
+}
+/* 返回 */
+uni-page.animation-before2 { 
+	transform: translateX(20px);
+}
+
+uni-page.animation-leave {
+	transition: all .3s ease;
+}
+
+uni-page.animation-enter {
+	transition: all .3s ease;
+}
+
+uni-page.animation-show {
+	opacity: 1;
+}
+uni-page.animation-afterstart {
+	transform: translateX(20px);
+}
+/* 返回 */
+uni-page.animation-afterstart2 {
+	transform: translateX(-20px);
+}
+uni-page.animation-after {
+	/* 在页面上使用 transform 会导致页面内的 fixed 定位渲染为 absolute，需要在动画完成后移除 */
+	transform: translateX(0);
+}
+
+/* #endif */

lib/community/y-pageAnimation/index.vue

@@ -0,0 +1,68 @@
+<script>
+	import './index.css'
+	export default {
+		// #ifdef H5
+		data() {
+			return {
+				before: '',
+				afterstart: '',
+				isBack: false,
+				fromId: '0',
+				startType: true
+			};
+		},
+		onLaunch: function() {
+			// 监听浏览器返回按钮
+			window.addEventListener("popstate", (e) => {
+				this.isBack = true;
+			}, false);
+			this.show()
+			this.$router.beforeEach((toPage, fromPage, next) => {
+				let type = this.startType
+				this.before = type ? 'animation-before' : 'animation-before2';
+				this.afterstart = type ? 'animation-afterstart' : 'animation-afterstart2';
+				setTimeout(this.hide(next));
+			})
+			this.$router.afterEach(() => {
+				this.isBack = false
+				setTimeout(this.show, 50)
+			});
+		},
+		watch: {
+			$route(route) {
+				if (this.fromId >= route.params.__id__) {
+					this.startType = true
+				} else {
+					this.startType = false
+				}
+				this.fromId = route.params.__id__
+			}
+		},
+		methods: {
+			hide(callback) {
+				setTimeout(() => {
+					this.before = this.isBack ? 'animation-before2' : this.before;
+					this.afterstart = this.isBack ? 'animation-afterstart2' : this.afterstart;
+					const classList = document.querySelector('uni-page').classList
+					classList.add(this.before, 'animation-leave')
+					classList.remove('animation-show')
+					setTimeout(() => {
+						classList.remove(this.before, 'animation-leave')
+						callback && callback();
+					}, 300);
+				}, 20)
+			},
+			show() { 
+				const classList = document.querySelector('uni-page').classList
+				classList.add(this.afterstart, 'animation-before')
+				setTimeout(() => {
+					classList.add('animation-enter', 'animation-after', 'animation-show')
+					setTimeout(() => {
+						classList.remove('animation-before', 'animation-after', 'animation-enter', this.afterstart)
+					}, 300)
+				}, 20);
+			},
+		},
+		// #endif
+	}
+</script>

lib/graceUI/components/graceDrawer.vue

@@ -1,8 +1,8 @@
 <template>
-	<view class="grace-drawer-shade" v-if="show" @tap.stop="closeDrawer" @touchmove.stop="" :style="{background:background,zIndex:zIndex, top:top+'px'}">
-		<view  :class="['grace-drawer-shade-nav', direction == 'left' ? 'gdSlideLeft' : 'gdSlideRight']" :style="{width:width,padding:padding, zIndex:zIndex+1, background:slotBg}" @tap.stop="stopFun">
+	<view class="grace-drawer-shade" v-if="show" :style="{background:background,zIndex:zIndex, top:top+'px'}">
+		<scroll-view scroll-y="true" :class="['grace-drawer-shade-nav', direction == 'left' ? 'gdSlideLeft' : 'gdSlideRight']" :style="{width:width,padding:padding, zIndex:zIndex+1, background:slotBg}" @tap.stop="stopFun">
 			<slot name="links"></slot>
-		</view>
+		</scroll-view>
 	</view>
 </template>
 <script>

pages/dream/index.vue

@@ -22,7 +22,6 @@
 	</gracePage>
 </template>
 <script>
-import gracePage from "@/lib/graceUI/components/gracePage.vue";
 export default{
 	data() {
 		return {
@@ -62,9 +61,6 @@ export default{
 			this.Dever.location('dream/view?id=1');
 		}
 	},
-	components:{
-		gracePage
-	}
 }
 </script>
 <style>

pages/dream/view.vue

@@ -4,13 +4,19 @@
 			<swiper class="swiper" @change="change" :circular="swiper.circular" :current="index">
 				<swiper-item v-for="(v, k) in fetch.items"  v-if="v.data" :key="k" >
 					<scroll-view scroll-y="true" scroll-x="true" class="scroll-height">
-						<dream ref="dream" @select="select" :index="k" :item="v" :control="control" class="item"></dream>
+						<dream ref="dream" @cate="cate" @community="community" :index="k" :item="v" :control="control" class="item"></dream>
 					</scroll-view>
 				</swiper-item>
 			</swiper>
-			<graceDrawer :show="select_drawer.show" :zIndex="select_drawer.index" padding="select_drawer.padding" :top="select_drawer.top" width="100%" v-on:closeDrawer="closeSelect">
+			<graceDrawer :show="cate_drawer.show" :zIndex="cate_drawer.index" padding="cate_drawer.padding" :top="cate_drawer.top" direction="left" width="100%" v-on:closeDrawer="closeCate">
 				<view slot="links">
-					<cate @goIndex="goIndex" :index="index" :info_id="fetch.info_id" :page_id="fetch.page_id" :parent_page_id="fetch.parent_page_id"></cate>
+					<cate ref="cate" @goIndex="goIndex" :index="index" :info_id="fetch.info_id" :page_id="fetch.page_id" :parent_page_id="fetch.parent_page_id"></cate>
+				</view>
+			</graceDrawer>
+			
+			<graceDrawer :show="community_drawer.show" :zIndex="community_drawer.index" padding="community_drawer.padding" :top="community_drawer.top" direction="right" width="100%" v-on:closeDrawer="closeCommunity">
+				<view slot="links">
+					<community ref="community" @goIndex="goIndex" :index="index" :info_id="fetch.info_id" :page_id="fetch.page_id" :parent_page_id="fetch.parent_page_id"></community>
 				</view>
 			</graceDrawer>
 		</view>
@@ -18,8 +24,7 @@
 </template>
 <script>
 import cate from "@/pages/dream/view/cate.vue";
-import graceDrawer from '@/lib/graceUI/components/graceDrawer.vue';
-import gracePage from "@/lib/graceUI/components/gracePage.vue";
+import community from "@/pages/dream/view/community.vue";
 import dream from "@/pages/dream/view/dream.vue";
 var graceRichText = require("@/lib/graceUI/jsTools/richText.js");
 export default{
@@ -39,7 +44,13 @@ export default{
 				parent_page_id : 0,
 			},
 			control : {},
-			select_drawer : {
+			cate_drawer : {
+				index : 5,
+				top: 0,
+				padding: '0rpx',
+				show : false,
+			},
+			community_drawer : {
 				index : 5,
 				top: 0,
 				padding: '0rpx',
@@ -53,10 +64,6 @@ export default{
 		this.index = option.index;
 		this.getData();
 	},
-	// 下拉刷新
-	onPullDownRefresh: function() {
-		this.getData();
-	},
 	// 重新加载
 	onPullDownRefresh: function() {
 		this.getData();
@@ -79,7 +86,7 @@ export default{
 				}
 			}
 			if (this.swiper.index == this.fetch.items.length - 1) {
-				this.$refs.dream[this.swiper.index].setSelectShow(true);
+				//this.$refs.dream[this.swiper.index].setShow();
 			}
 		},
 		view : function() {
@@ -90,17 +97,26 @@ export default{
 		},
 		goIndex : function(index) {
 			this.index = index;
-			this.select_drawer.show = false;
+			this.closeCate();
 			var dream = this.$refs.dream[this.swiper.index];
-			dream.closeSelect();
-			//dream.setShow();
+			dream.setShow();
 		},
-		select : function() {
-			this.select_drawer.show = !this.select_drawer.show;
-		}
+		cate : function() {
+			this.cate_drawer.show = !this.cate_drawer.show;
+		},
+		closeCate : function() {
+			this.cate_drawer.show = false;
+		},
+		community : function() {
+			this.community_drawer.show = !this.community_drawer.show;
+		},
+		closeCommunity : function() {
+			this.community_drawer.show = false;
+		},
+		
 	},
 	components:{
-		gracePage,dream,cate,graceDrawer
+		dream,cate,community
 	}
 }
 </script>
@@ -110,7 +126,8 @@ export default{
   height: 100%;
   width: 100%;
   left: 0;
-  top: 0;
+  top: 0;
+  -webkit-overflow-scrolling: touch; 
 }
 .swiper {
 	width: 750rpx;

pages/dream/view/cate.vue

@@ -1,4 +1,5 @@
 <template name="cate">
+	<view slot="links">
 	<view class="category" @touchstart="Dever.slide" @touchend="end">
 		<view class="category-wrapper" v-if="fetch.cate.length>0">
 			<!-- 左边导航 -->
@@ -38,6 +39,7 @@
 			</scroll-view>
 		</view>
 	</view>
+	</view>
 </template>
 
 <script>
@@ -56,10 +58,7 @@ export default {
 			type : String,
 			value : null
 		},
-		index : {
-			type : String,
-			value : null
-		},
+		index : 0
 	},
 	data() {
 		return {

pages/dream/view/community.vue

@@ -1,4 +1,29 @@
-<template name="community">
+<template name="community">
+	<view class="home">
+		<view class="card-bottom">
+			<!-- 顶部分页栏 -->
+			<view class="top-tab">
+				<view :class="['tab-item flex-center', activeTab == index ? 'active' : '']" @tap="handleTab(index)" v-for="(item, index) in tabList" :key="index">{{ item.title }}</view>
+			</view>
+			<view class="scroll-wrapper">
+				<!-- 漂流瓶 -->
+				<view v-if="activeTab == 0">
+					<view class="margin-bottom" v-for="(item, index) in cardList" :key="index">
+						<y-DiaryItem :obj="item" />
+					</view>
+				</view>
+				<!-- 聚集岛 -->
+				<view v-else>
+					<view class="margin-bottom" v-for="(item, index) in rightList" :key="item.id">
+						<y-DiaryItem :obj="item" />
+					</view>
+				</view>
+				<y-LoadMore :status="loadMoreStatus" />
+			</view>
+			<!-- 右下角按钮 -->
+			<y-Fab :bottom="140" :right="40" :btnList="fabList" @click="handleFab" />
+		</view>
+	</view>
 </template>
 
 <script>
@@ -20,30 +45,174 @@ export default {
 	},
 	data() {
 		return {
-			comments: [
+			startNum: 0,
+			activeTab: 0,
+			// tab的名称
+			tabList: [
 				{
-					id : 1,
-					avatar : 'https://pic.rmb.bdstatic.com/b9279adf974b78d27201a0b34970c2a9.jpeg',
-					username : 'rabin',
-					content : 'dfdfdfdf',
+					title: '漂流瓶'
 				},
 				{
-					id : 2,
-					avatar : 'https://pic.rmb.bdstatic.com/b9279adf974b78d27201a0b34970c2a9.jpeg',
-					username : 'test',
-					content : '哈哈哈哈或',
+					title: '聚集岛'
 				}
 			],
-			loading: false
-		}
+			cardList: [{
+						id: 2,
+						time: '06-17',
+						avatarUrl: 'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/cat.jpg',
+						nickName: '小黄鸭',
+						title: '洛稚喜欢盛淮南谁也不知道',
+						follow: false,
+						isLike: false,
+						likeNum: '24',
+						commentNum: '0',
+						imgList: [
+							'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/tree.jpg'
+						]
+					},
+					{
+								id: 2,
+								time: '06-17',
+								avatarUrl: 'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/cat.jpg',
+								nickName: '小黄鸭',
+								title: '洛稚喜欢盛淮南谁也不知道',
+								follow: false,
+								isLike: false,
+								likeNum: '24',
+								commentNum: '0',
+								imgList: [
+									'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/tree.jpg'
+								]
+							}],
+			rightList: [{
+						id: 2,
+						time: '06-17',
+						avatarUrl: 'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/cat.jpg',
+						nickName: '小黄鸭1',
+						title: '洛稚喜欢盛淮南谁也不知道2222',
+						follow: false,
+						isLike: false,
+						likeNum: '24',
+						commentNum: '0',
+						imgList: [
+							'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/tree.jpg'
+						]
+					}],
+			loadMoreStatus: 1, //0加载前，1加载中，2没有更多了
+			//fab的设置
+			fabList: [
+				{
+					bgColor: '#16C2C2',
+					text: '发布',
+					fontSize: 28,
+					color: '#fff'
+				},
+				{
+					bgColor: '#37b59d',
+					text: '分享',
+					fontSize: 28,
+					color: '#fff'
+				}
+			]
+		};
+	},
+	created() {
+		this.loadData('add');
+		//this.rightList = this.$store.state.diary.rightList;
+	},
+	onReachBottom() {
+		this.startNum++;
+		//上滑加载
+		this.loadData('add');
 	},
 	methods:{
-		
+		toDetails : function(id){
+			uni.navigateTo({
+				url: '../diary/details/details?id=' + id 
+			})
+		},
+		toOther : function(id){
+			uni.navigateTo({
+				url: '../mine/other/other?id=' + id
+			})
+		},
+		loadData : function(type) {
+			
+		},
+		//下拉刷新
+		onPulldownReresh : function() {
+			console.info(222)
+			this.loadData('refresh');
+		},
+		handleTab : function(index) {
+			this.activeTab = index;
+		},
+		//点击右下角tab按钮
+		handleFab : function(e) {
+			let index = e.index;
+			switch (index) {
+				case 0:
+					uni.navigateTo({
+						url: '../push/push'
+					});
+					break;
+				case 1:
+					console.log(1);
+					break;
+			}
+		}
 	},
 }
 </script>
 
 <style lang="less" scoped>
+page {
+	--mainColor: #435257;
+	--activeColor: #36b39b;
+}
+
+view {
+	box-sizing: border-box;
+}
+
+.flex-center {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.mainColor {
+	color: var(--mainColor);
+}
+
+.aColor {
+	color: var(--activeColor);
+}
+
+.color-nine{
+	color: #999999;
+}
+
+.main-btn {
+	border-radius: 40upx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--mainColor);
+	border: 1upx solid var(--mainColor);
+	padding: 10rpx 40rpx;
+}
+
+.active-btn {
+	color: #FFFFFF !important;
+	background-color: var(--activeColor) !important;
+	border: 1upx solid var(--activeColor) !important;
+}
+
+/* 点赞和评论 */
+.margin-bottom {
+	margin-bottom: 14px;
+}
 .home {
 	padding-top: 120rpx;
 

pages/dream/view/dream.vue

@@ -85,8 +85,8 @@
 			<webView :index="index" :item="item.data" :control="control"></webView>
 		</view>
 		<view>
-			<view class="page-num comment" v-if="comment_show">评</view>
-			<view class="page-num select" v-if="select_show" @click="select">{{select_name}}</view>
+			<view class="page-num community" v-if="community.show" @click="showCommunity">{{community.name}}</view>
+			<view class="page-num cate" v-if="cate.show" @click="showCate">{{cate.name}}</view>
 		</view>
 		
 		<view class="page-num" @click="setShow" v-if="index != -1">P{{index+1}}</view>
@@ -125,32 +125,26 @@ export default {
 	},
 	data() {
 		return {
-			select_name : '选',
-			comment_show : false,
-			select_show : false,
-			select_drawer_show : false,
+			community : {
+				name : '域',
+				show : false,
+			},
+			cate : {
+				name : '选',
+				show : false,
+			}
 		}
 	},
 	methods:{
 		setShow : function() {
-			this.select_show = !this.comment_show;
-			this.comment_show = !this.comment_show;
-		},
-		setSelectShow : function(state) {
-			this.select_show = state;
+			this.cate.show = !this.community.show;
+			this.community.show = !this.community.show;
 		},
-		select : function() {
-			this.$emit('select');
-			this.select_drawer_show = !this.select_drawer_show;
-			if (this.select_drawer_show == true) {
-				this.select_name = '关';
-			} else {
-				this.select_name = '选';
-			}
+		showCate : function() {
+			this.$emit('cate');
 		},
-		closeSelect : function() {
-			this.select_drawer_show = false;
-			this.select_name = '选';
+		showCommunity : function() {
+			this.$emit('community');
 		},
 	},
 	components:{
@@ -195,12 +189,12 @@ export default {
   bottom: 310rpx;
 }
 
-.comment {
+.community {
   bottom: 220rpx;
   background-color: #ff5500;
 }
 
-.select {
+.cate {
   bottom: 130rpx;
   background-color: #3688ff;
 }