123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146 |
- <template>
- <view class="introduce-section">
- <text class="title clamp2">{{ goodsObjact.store_name }}</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;
- .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: 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;
- }
- }
- </style>
|