productContent.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <template>
  2. <view class="introduce-section">
  3. <view class="price-box">
  4. <text class="price-tip">¥</text>
  5. <view class="price">
  6. {{ goodsObjact.price }}
  7. <text class="m-price" v-if="goodsObjact.ot_price > goodsObjact.price">¥{{ goodsObjact.ot_price }}</text>
  8. </view>
  9. <view class="" v-if="isgold == 1" style="color: #ffac60;">
  10. 可获金豆{{goodsObjact.price}}
  11. </view>
  12. </view>
  13. <text class="title clamp2">{{ goodsObjact.store_name }}</text>
  14. </view>
  15. </template>
  16. <script>
  17. export default {
  18. props: {
  19. goodsObjact: {
  20. type: Object,
  21. default: function() {
  22. return {
  23. percent:1
  24. };
  25. }
  26. },
  27. isgold: {
  28. type: Number,
  29. default: 0
  30. },
  31. },
  32. filters: {
  33. parseIntTo(percent) {
  34. percent = +percent * 100;
  35. if (percent % 1 === 0) {
  36. return percent;
  37. } else {
  38. percent = percent.toFixed(1);
  39. return percent;
  40. }
  41. }
  42. },
  43. data() {
  44. return {};
  45. }
  46. };
  47. </script>
  48. <style lang="scss">
  49. /* 标题简介 */
  50. .introduce-section {
  51. position: relative;
  52. background: #fff;
  53. padding: 26rpx 24rpx 30rpx;
  54. .title {
  55. font-size: 36rpx;
  56. color: $font-color-dark;
  57. .tip-o {
  58. color: #ff3334;
  59. padding-left: 15rpx;
  60. }
  61. }
  62. .shareDate {
  63. position: absolute;
  64. top: 25rpx;
  65. right: 25rpx;
  66. font-size: 26rpx;
  67. color: #3d3f46;
  68. border-radius: 15rpx;
  69. background-color: #ffffff;
  70. height: 60rpx;
  71. line-height: 60rpx;
  72. }
  73. .share-img {
  74. width: 30rpx;
  75. height: 30rpx;
  76. position: relative;
  77. top: 5rpx;
  78. left: 0;
  79. margin-right: 10rpx;
  80. }
  81. .info {
  82. color: #999999;
  83. font-size: 26rpx;
  84. padding-bottom: 15rpx;
  85. }
  86. .progress-box {
  87. width: 260rpx;
  88. position: relative;
  89. margin-top: 15rpx;
  90. line-height: 10px;
  91. .number {
  92. font-size: 17rpx;
  93. position: absolute;
  94. z-index: 999;
  95. top: 3rpx;
  96. left: 15rpx;
  97. color: #ffffff;
  98. }
  99. }
  100. .price-box {
  101. display: flex;
  102. align-items: baseline;
  103. font-size: 26rpx;
  104. color: $uni-color-primary;
  105. }
  106. .price-tip {
  107. color: #FF4C4C;
  108. }
  109. .price {
  110. font-size: 50rpx;
  111. font-family: PingFang SC;
  112. font-weight: 800;
  113. color: #FF4C4C;
  114. }
  115. .m-price {
  116. margin: 0 12rpx;
  117. color: $font-color-light;
  118. text-decoration: line-through;
  119. font-size: 34rpx;
  120. }
  121. }
  122. </style>