style: 分销卡片样式

template/uni-app/components/shareRedPackets/index.vue

@@ -1,152 +1,158 @@
-<template>
-	<view v-if="sharePacket.isState" class='sharing-packets' :class='sharePacket.isState && showAnimate ? "":"right"'>
-		<view class='sharing-con' @click='goShare'>
-			<image :src="imgHost + '/statics/images/red-packets.png'" />
-			<view class='text font-color'>
-				<view>{{$t(`最高返佣`)}}</view>
-				<view class='money'><text class='label'>{{$t(`￥`)}}</text>{{sharePacket.priceName}}</view>
-				<view class='tip'>{{$t(`推广享佣金`)}}</view>
-				<view class='shareBut'>{{$t(`立即分享`)}}</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import {HTTP_REQUEST_URL} from '@/config/app';
-	export default {
-
-		props: {
-			sharePacket: {
-				type: Object,
-				default: function() {
-					return {
-						isState: true,
-						priceName: ''
-					}
-				}
-			},
-			showAnimate: {
-				type: Boolean,
-				default: true
-			},
-		},
-		watch: {
-			showAnimate(nVal, oVal) {
-				setTimeout(res => {
-					this.isAnimate = nVal
-				}, 1000)
-			}
-		},
-		data() {
-			return {
-				imgHost:HTTP_REQUEST_URL,
-				isAnimate: true
-			};
-		},
-
-		methods: {
-			closeShare: function() {
-				this.$emit('closeChange');
-			},
-			goShare: function() {
-				if (this.isAnimate) {
-					this.$emit('listenerActionSheet');
-				} else {
-					this.isAnimate = true
-					this.$emit('boxStatus', true);
-				}
-			}
-		}
-	}
-</script>
-
-<style scoped lang="scss">
-	.sharing-packets {
-		position: fixed;
-		left: 30rpx;
-		bottom: 200rpx;
-		z-index: 5;
-		transition: all 0.3s ease-in-out 0s;
-		opacity: 1;
-		transform: scale(1);
-
-		&.right {
-			left: -170rpx;
-		}
-	}
-
-	// .sharing-packets.on {
-	// 	transform: scale(0);
-	// 	opacity: 0;
-	// }
-
-	.sharing-packets .iconfont {
-		width: 44rpx;
-		height: 44rpx;
-		border-radius: 50%;
-		text-align: center;
-		line-height: 44rpx;
-		background-color: #999;
-		font-size: 20rpx;
-		color: #fff;
-		margin: 0 auto;
-		box-sizing: border-box;
-		padding-left: 1px;
-	}
-
-	.sharing-packets .line {
-		width: 2rpx;
-		height: 40rpx;
-		background-color: #999;
-		margin: 0 auto;
-	}
-
-	.sharing-packets .sharing-con {
-		width: 187rpx;
-		height: 210rpx;
-		position: relative;
-	}
-
-	.sharing-packets .sharing-con image {
-		width: 100%;
-		height: 100%;
-	}
-
-	.sharing-packets .sharing-con .text {
-		position: absolute;
-		top: 30rpx;
-		font-size: 20rpx;
-		width: 100%;
-		text-align: center;
-	}
-
-	.sharing-packets .sharing-con .text .money {
+<template>
+	<view v-if="sharePacket.isState" class='sharing-packets' :class='sharePacket.isState && showAnimate ? "":"right"'>
+		<view class='sharing-con' @click='goShare'>
+			<image :src="imgHost + '/statics/images/red-packets.png'" />
+			<view class='text font-color'>
+				<view>{{$t(`最高返佣`)}}</view>
+				<view class='money'><text class='label'>{{$t(`￥`)}}</text>{{sharePacket.priceName}}</view>
+				<view class='tip'>{{$t(`推广享佣金`)}}</view>
+				<view class='shareBut'>{{$t(`立即分享`)}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		HTTP_REQUEST_URL
+	} from '@/config/app';
+	export default {
+
+		props: {
+			sharePacket: {
+				type: Object,
+				default: function() {
+					return {
+						isState: true,
+						priceName: ''
+					}
+				}
+			},
+			showAnimate: {
+				type: Boolean,
+				default: true
+			},
+		},
+		watch: {
+			showAnimate(nVal, oVal) {
+				setTimeout(res => {
+					this.isAnimate = nVal
+				}, 1000)
+			}
+		},
+		data() {
+			return {
+				imgHost: HTTP_REQUEST_URL,
+				isAnimate: true
+			};
+		},
+
+		methods: {
+			closeShare: function() {
+				this.$emit('closeChange');
+			},
+			goShare: function() {
+				if (this.isAnimate) {
+					this.$emit('listenerActionSheet');
+				} else {
+					this.isAnimate = true
+					this.$emit('boxStatus', true);
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.sharing-packets {
+		position: fixed;
+		left: 30rpx;
+		bottom: 200rpx;
+		z-index: 5;
+		transition: all 0.3s ease-in-out 0s;
+		opacity: 1;
+		transform: scale(1);
+
+		&.right {
+			left: -170rpx;
+		}
+	}
+
+	// .sharing-packets.on {
+	// 	transform: scale(0);
+	// 	opacity: 0;
+	// }
+
+	.sharing-packets .iconfont {
+		width: 44rpx;
+		height: 44rpx;
+		border-radius: 50%;
+		text-align: center;
+		line-height: 44rpx;
+		background-color: #999;
+		font-size: 20rpx;
+		color: #fff;
+		margin: 0 auto;
+		box-sizing: border-box;
+		padding-left: 1px;
+	}
+
+	.sharing-packets .line {
+		width: 2rpx;
+		height: 40rpx;
+		background-color: #999;
+		margin: 0 auto;
+	}
+
+	.sharing-packets .sharing-con {
+		width: 187rpx;
+		height: 210rpx;
+		position: relative;
+	}
+
+	.sharing-packets .sharing-con image {
+		width: 100%;
+		height: 100%;
+	}
+
+	.sharing-packets .sharing-con .text {
+		position: absolute;
+		top: 30rpx;
+		font-size: 20rpx;
+		line-height: 30rpx;
+		width: 100%;
+		text-align: center;
+	}
+
+	.sharing-packets .sharing-con .text .money {
 		font-size: 32rpx;
-		font-weight: bold;
-		margin-top: 5rpx;
-	}
-
-	.sharing-packets .sharing-con .text .money .label {
-		font-size: 20rpx;
-	}
-
-	.sharing-packets .sharing-con .text .tip {
+		line-height: 42rpx;
+		font-weight: bold;
+		margin-top: 5rpx;
+	}
+
+	.sharing-packets .sharing-con .text .money .label {
+		font-size: 20rpx;
+	}
+
+	.sharing-packets .sharing-con .text .tip {
 		font-size: 18rpx;
-		color: #999;
-		margin-top: 5rpx;
-	}
-
-	.sharing-packets .sharing-con .text .shareBut {
+		line-height: 18rpx;
+		color: #999;
+		margin-top: 5rpx;
+	}
+
+	.sharing-packets .sharing-con .text .shareBut {
 		font-size: 22rpx;
-		color: #fff;
-		// #ifdef H5
-		margin-top: 14rpx;
-		// #endif
-		// #ifndef H5
-		margin-top: 26rpx;
-		// #endif
-		height: 50rpx;
-		line-height: 50rpx;
-	}
+		line-height: 48rpx;
+		color: #fff;
+		/* #ifdef H5 */
+		margin-top: 28rpx;
+		/* #endif */
+
+		/* #ifndef H5 */
+		margin-top: 26rpx;
+		/* #endif */
+
+	}
 </style>