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

<template>
	<view @touchmove.stop.prevent>
		<view class="yc-fab-box ycFly_o" :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 v-if="item.key == 'bgm'" :class="['yc-fab-item', 'bgm', bgmPlay?'':'bgm-paused']" :style="{width:width+'rpx',height:height+'rpx',borderRadius:radius}">
					</view>
					<view v-if="item.key != 'bgm'" 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" v-if="!icon && !text"></view>
				<view class="yc-fab-icon" :style="setStyle" v-if="text && !icon">{{text}}</view>
				<view class="yc-fab-icon" v-if="icon" :style="{opacity:0.5,backgroundSize:'contain',width:width+'rpx',height:height+'rpx',borderRadius:radius,backgroundImage: 'url('+icon+')'}"></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: true
			},
			//icon
			icon : '',
			text : '',
			bgmPlay: {
				type: Boolean,
				default: false
			},
			setStyle:{
				type: String,
				default: ""
			}
		},
		data() {
			return {
				isOpen: false,
				hidden: true,
				fab_style: '',
			};
		},
		mounted() {
			if (this.Dever.source == 'h5' && uni.getSystemInfoSync().platform == 'ios') {
				//this.fab_style = 'margin-left:20rpx';
			}
			if (this.icon) {
				this.bgColor = '';
			}
		},
		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
				if (index == -1 && this.btnList.length) {
					this.isOpen = !this.isOpen
				} else {
					this.$emit("click", {
						index: index
					})
					if (this.btnList.length) {
						var key = this.btnList[index].key;
						
						if (key == 'bgm') {
							this.Dever.bgm().control();
						} else {
							this.isOpen = false
						}
					}
				}
				if (!this.isOpen) {
					this.hidden = true;
				}
			},
			handleClickCancel: function() {
				if (!this.maskClosable) return;
				this.isOpen = false
			}
		},
		beforeDestroy() {
			
		}
	}
</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 {
		display: none;
		/*
		width: 0;
		height: 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);
	}
	.bgm{
	  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUJBQTMwRUZGNTcwMTFFODk1QzlBNDg3MzAwOTNBRTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUJBQTMwRjBGNTcwMTFFODk1QzlBNDg3MzAwOTNBRTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQkFBMzBFREY1NzAxMUU4OTVDOUE0ODczMDA5M0FFMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQkFBMzBFRUY1NzAxMUU4OTVDOUE0ODczMDA5M0FFMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Prb3w+IAAArqSURBVHja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) no-repeat;
	  background-size: 108rpx 108rpx;
	}
	.bgm-paused{
	  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUJBQTMwRjNGNTcwMTFFODk1QzlBNDg3MzAwOTNBRTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUJBQTMwRjRGNTcwMTFFODk1QzlBNDg3MzAwOTNBRTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQkFBMzBGMUY1NzAxMUU4OTVDOUE0ODczMDA5M0FFMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQkFBMzBGMkY1NzAxMUU4OTVDOUE0ODczMDA5M0FFMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pj3u49UAAAtDSURBVHja7F17TFTZGb8zMLyGh7JLVXYSHosv7Nr1xSo16qayIVVqim4jtQ0KKNW2UUza+Kj/6F9No8bYQAWEdC3yB4F1syXFRy2KIixs1S3W7a5dMC0+ujyFweExQ7/fcI7enfCYOecOj5Ev+eJknHvPd373O9/rfOeiUyaWAojfIJ5F/BrxDPadD7Ef+9eLuI+4n7iHuJu4g7iF+CnxI/b9hJBunMcDIFEq/pYGMgwyIBuJm4i/YmB7DIAY403it4nnExvcPB609Qvi2wzMwakKoC/xUuJ32NKcCGonrmFg9k0VAA0MtHhmzyYDmYlvEtdpvby1BvAt4vXEIcrkpE7iy8QNkw1ALNGNxDHK1KAvif/MAJ1wAL9D/H1m86YSWYjLif8hcxMviWu9iZOI32WfpxpB5ljiYOJ/E9vGE0A4h5+ysGSq0xwWk/5LxMGIAAgHsZ14tuI5hDktZCBa3AlgGHEqcajieeTPljSC8OfuADCUaV6w4rnkyzTxc2c10VkAjQy8GYrnE0Ccx2LFfi0A9GYOY5by6hCWcwTx3bFyaWfiQMR4ce6Uds2aNa9nZGQsj4yMNBmNxhAvLy+/wcFBPdgupE5nA1utVovZbO5samr6b35+fv3169db3Azkp8QfywAIo/ojd0iWmJg4e+/eve/OmTMnemBgQCiO9Pb2Hnj8+PFXp06d+ltFRcUTN4FYOlqwrRsjPfuZMlTY1Ix27949b8eOHYmkZTNJwxwBsRKYPdCy7u5us8Vi6cX3fn5+voGBgUZoJ/0mgH7zDdND2qmQdrYXFhZW5OTkfOGGjCVnpLRvNAB/zIypJrRy5cqZJ0+eTDEYDGHqiROIXfeIzp49+6mzSxJLPj09fdkiIrpHkPpB9Pf3f52VlVVcU1PTrnHuXOQKgAuIt2o1em5u7vdWrFjxXdIS+3ikfUpbW1vTkSNHPq6urm6TuXd8fHzosWPHkkJDQyPp/gq7/2BdXd3NXbt2/VVDEEuI7zkDIOp5P9ciZKEl53X58uUMHx+f2VzjaHk+yszMLL5//363luts4cKFgWfOnEmhMcO5Rvb19T1JSEjIpzGtGgyBJXyaeED9pX6YH2pSQY6KigqgJZnFwaOlay0qKiqh5ZenNXgg3BP3xhgYC99hbMgAWTRK9+LG0kBs+mSxOEgKvLKysl/SkrI7INKIzpSUlLwHDx6YxyOIi4mJMRYXF+8kjQ9hS9qSnJx8urGxUXb3DvKfUlTbA44Aogz/nuyyxVMn0JC9KOQxzVu3bs2h2G1cwFN5dF1lZeUu8uDcfJhJQ09qsJz/Qlw73BLWseUrRbB5HDw2ESM5ke0RERHjuj9CD25w9erVZygUesJWgRGyaXDrd9SKpwYwRpHcy4C35TaPBH5GnrbVXoUIDX09Ly9vx3iDCFq3bl0uTAi3iZBR8pYoqkQNB+DbsnEeQhXuMMjm5VIYUTjRIEITYX+5Y4GMkFXytksciwlwHj9QJEr8JSUlaWRnjAhVzp07V1peXv6oo6Ojv6qq6t769evn+/v7B4AprJhPNvJeZ2enU9Xfa9eupZNTgj17LCobPcT+gICAlsWLFy+y2Ww6kiGaAvc6CQBnMDto06uWr3DHANIznmEgzjtx4sQ/+f/BechoYlBQkGnTpk2JYWFhPjIqA5kgG1shYZBZsuQVpV7CUtuRyG15hoEg2fH/ZUGkZWi4cuXKry9cuLB5yZIlwnYaskFGtcwSFKkGMEqmqoLCAFsqTSMFybIgUo7rZTKZvp2fn7+P0rR9Bw8eXCwSbENG9rBnQnaZcJcDGEgsbFRRkkLqBNuH3Ha034qCSKFQL//MxgrZvHnzD69evbrdVXkhIyti2GWXABDgBwDAcBk9Rj2PTazLmcKACIgXL16sJKNfTLntU73+ZeAQHBwcQRrpUlgCGSGrWnZBQiwYDmmES/UoK/FiKEpSzl4nAiLqfPHx8X9ISkr67cOHDz/jQMbGxrrsDLiskB1zkABxFqR4TfRqlOH5Z9TzXLlWdDk3NzdbaPl+SHn1bWZ3W12VWy2reg4iQbVexv5hD4PZKKvI/oSMYwkMDAygcQcPHz5c4eq4kBUyq+cgGg9yJyJaOAhhS0G4ygEQd+7cWeAKiBQbeoeHh8+rqKi4ePfu3WeCGUqPeg6CFKSXKV1h94wFz1JtYmTTelwBsaura+D48eMfHDhwoFa4LsVk5nMQJLsXFo7w+bYjNoBkc9aRQBzp95QuNsmMx2XmcxCtmuFib1kA+e6ZO0BEvObn5+ejaExcZkkAffTKJCNHEAHg8uXL4yaiFOYEWQHggHAkqdPZmxKxb+tOEH19fY1al8K4zHwOgtQHAPtkAcSmt7s08UXApXE9kcusBYDPhfXXarVoEAqMCiIyjt7eXrPWIHKZ+RwEqRcACm8x8lAA7RbuNDT19fWfaF3Z5jJLhmBmACjcAoEuKRaUeknmlEpycrKJYrtV2dnZa9PS0t508Jh9rgbbTuTwXuo5CFIHAGwVvRotZvwzelVE7lFcXLzxzp07vzl06FD62rVr34uLi1u3Z8+en9B3h44ePbpMNNgejdSyqucgQG0A8Kno1SyntHtxNPq4en1lZWXa3Llzlzl2WzGtNmzYsGGjzWZTtAaRywrZJXsMnwLARzJLD/15zJsFodHHlWtDQkJMYwTq3FlZtQIRMkJWteyieQSw405E2A6iuZFXeNEl5WIYNGYIhT2M8+fPfy6TO6sJMvIKOmSXABAb9j08E2kUvQs6Q9HcyCYSiS4pZ68tKCj4iJbRiHGYwWAYIBtZ2tDQ0CVbgABBNsjItLpdsqvVjhm3Pfh3keidCIT2pUuXvoUnm5iYGFlYWPh3Z66rra1tKSoqqjaZTGbKDPrp+h6K+TpbW1ubL126dDM1NbW0qqrqfyNdj71lsmENCQkJC5zZdy4rK0slWYPYw7tA4VGrBIBVcMC8xwPJ+q8Uib3hW7du7cF+K5YGWszUe8PuJmgdaV8aaZe9uk5a2ULaWQgt5b/Zv39/7LZt297HQ0YX66pVq7JlMhDi3xH361VffCkzCbTVojMUApLmJKPFbKIKEI7LGbJAJsgGGSGr5JAvztWpqzG3Ze6InmS01eIz9nDRn4cWs4kGMTo62t4rCJnwPWTUoH/6BVbqCeLzPkWyQ6u6ujqTd2ihtQwtZuNZX3JczgRcN5kWu2NDyy+FMbLyYOv2NAtjvqGB+KJWdgLoSUYzIysZzb5x40bmeGtiRkZGATmfavK0Zg4eZIJsGgxRq6hOLzkWVOtlqjMsObdu2bIlG221HERyMHvH0ybSCtCR5i8iGYwslrRAJg26U82Opk4/jHeplp0AepHRk8w1Ea0YpaWlWfCE7gYPY2As3h8NGTTqjwbddKyfjnTM4ReKBm/e8MBjDr9XHE5wTh+0cZ6cPmjDafqo10t6QPynYfP5US6aPmzI6rmK4GFDheXH77vD2L8Kx105bSBe4U7P6ckHru0PWhl6X4JJebUIeyWFqHyNWq904kY2ljzjbRb+rwh4iAw+IB6zZcXZcyH9rFqDQNjXw8F7xsBzqm3OlYM1z5k7X+DBIOLdrOcUF3YqXT2ZhHTovjJ0riTAw8BD5fuPiov7QyJHuxAX4aU0eK+Kp7zF6D9M81zucxQ9Gweb+BkLst+YwsAhkv+EuEwRbLKSeX+gjTmWr5Wht/ROtXcIWliQXKMIvjvQ2TjQGULal8SAnAqEB1/OnIYUTb+EdpIBCJqMr0FG9HCT2btJ/RpkNSFWRBdUnDL9Im7pMaZfBa8RufOPETQpQ/0qHvfHCEYj7JrhuK36z2EEMttpUF4eAhruz2G0MuCalQn8cxj/F2AAjjk60DziZsQAAAAASUVORK5CYII=) no-repeat;
	background-size: 108rpx 108rpx;
	}
</style>