57 lines
948 B
Vue
57 lines
948 B
Vue
|
<!--
|
|||
|
|
@name: Common
|
|||
|
|
@author: kahu4
|
|||
|
|
@date: 2024-01-16 14:42
|
|||
|
|
@description：普通商品
|
|||
|
|
@update: 2024-01-16 14:42
|
|||
|
|
-->
|
|||
|
|
<script setup>
|
|||
|
|
import { toRefs } from "vue";
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
price: {
|
|||
|
|
type: [String, Number],
|
|||
|
|
},
|
|||
|
|
oldPrice: {
|
|||
|
|
type: [String, Number],
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const {price, oldPrice} = toRefs(props)
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<!-- 普通商品 -->
|
|||
|
|
<view class="price-row">
|
|||
|
|
<span class="price">
|
|||
|
|
¥{{ price }}
|
|||
|
|
</span>
|
|||
|
|
<span v-if="oldPrice" class="old-price">
|
|||
|
|
¥{{ oldPrice }}
|
|||
|
|
</span>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style lang="scss"
|
|||
|
|
scoped>
|
|||
|
|
.price-row {
|
|||
|
|
width: 100%;
|
|||
|
|
@include usePadding(30, 30);
|
|||
|
|
@include useFlex(flex-start, center);
|
|||
|
|
background: $white-color;
|
|||
|
|
|
|||
|
|
.price {
|
|||
|
|
color: $primary-color;
|
|||
|
|
font-size: 50rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.old-price {
|
|||
|
|
color: $tips-color;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
text-decoration: line-through;
|
|||
|
|
margin-left: 15rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|