117 lines
2.0 KiB
Vue
117 lines
2.0 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="title">{{title}}</div>
|
|
<div class="progressbar">
|
|
<div class="progress-body" :style="{width: percent + '%'}"></div>
|
|
<div class="show-txt">
|
|
<div>${{now}} ({{percent}}%)</div>
|
|
</div>
|
|
</div>
|
|
<div class="progress-bottom">
|
|
<div class="min">$0</div>
|
|
<div class="max">${{max}}</div>
|
|
<div class="time">{{time}}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.main {
|
|
width: 100%;
|
|
font-size: 1em;
|
|
font-weight: 900;
|
|
|
|
.title {
|
|
text-align: center;
|
|
}
|
|
.progressbar {
|
|
background-color: #eee;
|
|
width: 100%;
|
|
height: 30px;
|
|
position: relative;
|
|
border-radius: 10px;
|
|
|
|
.progress-body {
|
|
border-radius: 10px;
|
|
height: 100%;
|
|
background-color: #0f0;
|
|
position: relative;
|
|
width: 40%;
|
|
}
|
|
.show-txt {
|
|
border-radius: 10px;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
text-align: center;
|
|
|
|
>div {
|
|
position: relative;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.progress-bottom {
|
|
position: relative;
|
|
|
|
>.min {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
max-width: 100px;
|
|
}
|
|
|
|
>.max {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
max-width: 100px;
|
|
}
|
|
|
|
>.time {
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import {toInt} from '@/tools'
|
|
import moment from 'moment'
|
|
export default {
|
|
name: 'Donatebar',
|
|
props: {
|
|
title: String,
|
|
max: Number,
|
|
timestamp: Number,
|
|
now: Number
|
|
},
|
|
data () {
|
|
return {}
|
|
},
|
|
methods: {
|
|
getDay: function (ts) {
|
|
|
|
}
|
|
},
|
|
computed: {
|
|
percent: function () {
|
|
let p = Math.floor((this.now / this.max) * 100)
|
|
return p >= 100 ? 100 : p
|
|
},
|
|
time: function () {
|
|
let ts = toInt(this.timestamp, 0, 0)
|
|
let target = moment(ts)
|
|
let now = moment()
|
|
let str = now.to(target)
|
|
return str
|
|
}
|
|
}
|
|
}
|
|
</script>
|