xinwang/pages/product/common/productContent.vue

<template>
	<view class="introduce-section">
		
		<!-- 分享 -->
		<button open-type="share" class="shareDate" style="border: none;">
			<image class="share-img" src="../../../static/icon/share.png"></image>
		</button>
		<!-- 价格信息 -->
		<view class="price-box">
			<text class="price-tip">¥</text>
			<view class="price">
				{{ goodsObjact.price }}
				<text class="m-price" v-if="goodsObjact.ot_price > goodsObjact.price">¥{{ goodsObjact.ot_price }}</text>
			</view>
		</view>
		<!-- 商品名称 -->
		<text class="title clamp2">{{ goodsObjact.store_name }}</text>
	</view>
</template>

<script>
export default {
	props: {
		goodsObjact: {
			type: Object,
			default: function() {
				return {
					percent:1
				};
			}
		}
	},
	filters: {
		parseIntTo(percent) {
			percent = +percent * 100;
			if (percent % 1 === 0) {
				return percent;
			} else {
				percent = percent.toFixed(1);
				return percent;
			}
		}
	},
	data() {
		return {};
	}
};
</script>

<style lang="scss">
/* 标题简介 */
.introduce-section {
	position: relative;
	background: #fff;
	padding: 35rpx 0rpx;
	padding-left: 35rpx;
	.title {
		font-size: 32rpx;
		color: $font-color-dark;
		.tip-o {
			color: #ff3334;
			padding-left: 15rpx;
		}
	}
	.shareDate {
		position: absolute;
		top: 25rpx;
		right: 10rpx;
		font-size: 26rpx;
		color: #3d3f46;
		border-radius: 15rpx;
		background-color: #ffffff;
		height: 60rpx;
		line-height: 60rpx;
		&::after {
			border: none;
		}
	}
	.share-img {
		width: 30rpx;
		height: 30rpx;
		position: relative;
		top: 5rpx;
		left: 0;
		margin-right: 10rpx;
	}
	.info {
		color: #999999;
		font-size: 26rpx;
		padding-bottom: 15rpx;
	}
	.progress-box {
		width: 260rpx;
		position: relative;
		margin-top: 15rpx;
		line-height: 10px;
		.number {
			font-size: 17rpx;
			position: absolute;
			z-index: 999;
			top: 3rpx;
			left: 15rpx;
			color: #ffffff;
		}
	}
	.price-box {
		display: flex;
		align-items: baseline;
		height: 64rpx;
		padding: 10rpx 0;
		font-size: 26rpx;
		color: $uni-color-primary;
	}
	.price {
		font-size: $font-lg + 6rpx;
		.text {
			padding-left: 5rpx;
			color: #b0b0b0;
			font-size: 22rpx !important;
		}
	}
	.price-green {
		color: #2dbd59;
		font-size: 28rpx !important;
		text {
			background: #2dbd59;
			color: #ffffff;
			padding: 0rpx 10rpx;
			border-radius: 5rpx;
			font-size: 22rpx !important;
			margin-left: 15rpx;
		}
	}
	.m-price {
		margin: 0 12rpx;
		color: $font-color-light;
		text-decoration: line-through;
		margin-left: 25rpx;
		font-size: 24rpx;
	}
}
.share-wrapper {
	width: 36rpx;
	height: 36rpx;
	position: absolute;
	top: 27rpx;
	right: 43rpx;
	background-color: #fff;
	image {
		width: 100%;
		height: 100%;
	}
}
</style>