94 lines
2.1 KiB
Vue
94 lines
2.1 KiB
Vue
<template>
|
|
<view class="price-cell">
|
|
<view class="left-part">
|
|
<view class="nation">{{data.country}}</view>
|
|
<!-- <view class="sub-nation">11</view>-->
|
|
</view>
|
|
<view class="center-part">
|
|
<uni-tag type="error" v-if="data.discountOff" size="small" :text="'-'+data.discountOff+'%'" class="center-child"></uni-tag>
|
|
<uni-tag type="success" size="small" v-if="!!data.isLowestPrice" text="史低" class="center-child"></uni-tag>
|
|
<view class="time-rest center-child" v-if="data.leftTime">
|
|
<text >剩余{{data.leftTime}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="right-part">
|
|
<view class="price-tip">史低{{data.lowestPrice/100}}</view>
|
|
<view class="main-price">¥{{data.price/100}}</view>
|
|
<view class="price-tip">{{data.coinSymbol}}{{data.priceOrigin/100}}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue } from 'vue-property-decorator'
|
|
|
|
declare module 'vue/types/vue' {
|
|
interface Vue {
|
|
data?: any
|
|
}
|
|
}
|
|
|
|
|
|
@Component({
|
|
name: 'PriceCell',
|
|
props: ['data'],
|
|
})
|
|
export default class extends Vue{
|
|
|
|
}
|
|
</script>
|
|
<style>
|
|
.price-cell{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
.price-cell .left-part{
|
|
width: 30%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: auto;
|
|
font-size: 16px;
|
|
}
|
|
.price-cell .center-part{
|
|
width: 45%;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row-reverse;
|
|
}
|
|
.price-cell .center-part .center-child {
|
|
margin-right: 5px;
|
|
}
|
|
.price-cell .center-part .time-rest{
|
|
color: #666666;
|
|
font-size: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
-webkit-transform-origin-x: 0;
|
|
-webkit-transform: scale(0.80)
|
|
}
|
|
.price-cell .right-part{
|
|
width: 25%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: auto;
|
|
padding: 5px 0;
|
|
}
|
|
.price-cell .right-part .main-price {
|
|
font-size: 28rpx;
|
|
color: #dd524d;
|
|
text-align: right;
|
|
}
|
|
.price-cell .right-part .price-tip {
|
|
color: #666666;
|
|
font-size: 16rpx;
|
|
//#ifdef H5
|
|
-webkit-transform-origin-x: 0;
|
|
-webkit-transform: scale(0.80);
|
|
// #endif
|
|
line-height: 10px;
|
|
text-align: right;
|
|
width: 100%;
|
|
}
|
|
</style>
|