<template> <view class="introduce-section"> <text class="title clamp">{{ goodsObjact.title }}</text> <!-- <button open-type="share" class="shareDate"> <image class="share-img" src="/static/img/img57.png"></image> 好物推荐 </button> --> <text class="info" v-if="goodsObjact.store_info">{{ goodsObjact.store_info }}</text> <view class="progress-box"> <progress :percent="goodsObjact.percent | parseIntTo" activeColor="#F65527" font-size="10" show-info border-radius="5" stroke-width="9" /> <view class="number">剩余{{ goodsObjact.percent | parseIntTo }}%</view> </view> <view class="price-box"> <text class="price-tip">¥</text> <view class="price"> {{ goodsObjact.price }} <text class="text">/份</text> <text class="m-price" v-if="goodsObjact.ot_price > goodsObjact.price">¥{{ goodsObjact.ot_price }}</text> </view> </view> <!-- <view class="price-green"> ¥{{ goodsObjact.ot_price }} <text>市场价</text> </view> --> </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; height: 50rpx; width: 70%; .tip-o { color: #ff3334; padding-left: 15rpx; } } .shareDate { position: absolute; top: 25rpx; right: 25rpx; font-size: 26rpx; color: #3d3f46; border-radius: 15rpx; background-color: #ffffff; height: 60rpx; line-height: 60rpx; } .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: 99; 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; } } </style>