145 lines
3.0 KiB
Vue
145 lines
3.0 KiB
Vue
<template>
|
|
<a
|
|
:href="urlResolver()"
|
|
@click.prevent="goToRouteName()"
|
|
class="d-md-flex justify-content-sm-center align-items-center"
|
|
>
|
|
<h2 class="counter-number mb-2 mb-md-0">
|
|
<span>{{ displayValue }}</span>
|
|
</h2>
|
|
<div class="d-flex flex-column align-items-center align-items-lg-start">
|
|
<p class="counter-text">{{ counter.title }}</p>
|
|
<p class="counter-date">از تاریخ: {{ counter.date }}</p>
|
|
</div>
|
|
</a>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props: ["counter"],
|
|
data() {
|
|
return {
|
|
displayValue: 0,
|
|
interval: null,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.startCount();
|
|
},
|
|
beforeUnmount() {
|
|
if (this.interval) clearInterval(this.interval);
|
|
},
|
|
methods: {
|
|
startCount() {
|
|
const from = 0;
|
|
const to = this.counter.total;
|
|
const speed = 7000;
|
|
const refreshInterval = 50;
|
|
const decimals = 0;
|
|
|
|
const loops = Math.ceil(speed / refreshInterval);
|
|
const increment = (to - from) / loops;
|
|
|
|
let value = from;
|
|
let loopCount = 0;
|
|
|
|
this.interval = setInterval(() => {
|
|
value += increment;
|
|
loopCount++;
|
|
this.displayValue = value.toFixed(decimals);
|
|
|
|
if (loopCount >= loops) {
|
|
clearInterval(this.interval);
|
|
this.displayValue = to.toFixed(decimals);
|
|
}
|
|
}, refreshInterval);
|
|
},
|
|
|
|
goToRouteName() {
|
|
this.$router.push({
|
|
name: "search",
|
|
query: {
|
|
q: undefined,
|
|
key: this.counter.routeName,
|
|
},
|
|
});
|
|
},
|
|
|
|
urlResolver() {
|
|
|
|
|
|
const routeData = this.$router.resolve({
|
|
name: "search",
|
|
query: {
|
|
q: undefined,
|
|
key: this.counter.routeName,
|
|
},
|
|
});
|
|
return routeData.href;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.counter-container {
|
|
// padding: 0.3em;
|
|
// display: flex;
|
|
// align-items: center;
|
|
// border-radius: 1em;
|
|
|
|
// &:hover {
|
|
// background-color: rgba(255, 255, 255, 0.3);
|
|
// }
|
|
}
|
|
.counter-number {
|
|
// font-family: sahel-semi-bold;
|
|
// font-size: 3rem;
|
|
// color: #fff;
|
|
// direction: ltr;
|
|
// margin: 0;
|
|
|
|
// font-family: var(--font-family);
|
|
min-width: 3.2em;
|
|
// font-size: 3635px;
|
|
font-size: 2.57rem;
|
|
font-weight: 700;
|
|
// line-height: 30px;
|
|
line-height: 2.14rem;
|
|
letter-spacing: 0em;
|
|
color: var(--dashboard-text-primary);
|
|
margin-bottom: 0;
|
|
margin-left: 0.5em;
|
|
}
|
|
.counter-text {
|
|
// font-family: var(--font-family);
|
|
// font-size: 16px;
|
|
font-size: 1.14rem;
|
|
font-weight: 700;
|
|
// line-height: 30px;
|
|
line-height: 2.14rem;
|
|
letter-spacing: 0em;
|
|
color: var(--dashboard-text-primary);
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
|
|
// font-family: sahel-light;
|
|
// font-size: 1.2rem;
|
|
// color: #fff;
|
|
}
|
|
.counter-date {
|
|
// font-family: var(--font-family);
|
|
// font-size: 16px;
|
|
font-size: 1.14rem;
|
|
font-weight: 400;
|
|
// line-height: 30px;
|
|
line-height: 2.14rem;
|
|
letter-spacing: 0em;
|
|
text-align: center;
|
|
color: var(--dashboard-text-primary);
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|