60 lines
1.1 KiB
Vue
60 lines
1.1 KiB
Vue
<template>
|
|
<view class="flex items-baseline justify-center " style="justify-content: center;">
|
|
<view v-if="!price.oldPrice" :style="{color:newColor}" class="f10" style="transform: scale(.7);">
|
|
¥
|
|
</view>
|
|
<view class="newPrice" :style="{color:newColor,fontSize:newSize}">{{price.newPrice}}</view>
|
|
<view>
|
|
<slot></slot>
|
|
</view>
|
|
<view class="oldPrice f10 t5 " v-if="price.oldPrice">{{price.oldPrice}}</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return {
|
|
|
|
}
|
|
},
|
|
props:{
|
|
newPriceSlotText:{
|
|
type: String,
|
|
default: ''
|
|
},
|
|
price:{
|
|
type: Object,
|
|
default: {
|
|
newPrice:100,
|
|
oldPrice:999
|
|
}
|
|
},
|
|
newSize:{
|
|
type: String,
|
|
default: '28rpx'
|
|
},
|
|
newColor:{
|
|
type: String,
|
|
default: '#000000'
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* @font-face {
|
|
font-family: prices;
|
|
src: url('@/static/font/HarmonyOS_Sans_Medium.ttf');
|
|
} */
|
|
.newPrice{
|
|
font-family: prices;
|
|
font-weight: 600;
|
|
|
|
}
|
|
.oldPrice{
|
|
text-decoration-line: line-through;
|
|
transform: scale(.8);
|
|
font-family: prices;
|
|
}
|
|
</style> |