119 lines
2.5 KiB
Vue
119 lines
2.5 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 :class="counter.key + '-timer'">{{ counter.count }}</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>
|
||
|
|
import "assets/common/vendors/counter/counter.js";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: ["counter"],
|
||
|
|
mounted() {
|
||
|
|
const vm = this;
|
||
|
|
|
||
|
|
$(`.${vm.counter.key}-timer`).countTo({
|
||
|
|
from: 0,
|
||
|
|
to: vm.counter.total,
|
||
|
|
speed: 7000,
|
||
|
|
refreshInterval: 50,
|
||
|
|
onComplete: function (value) {
|
||
|
|
// console.debug(this);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
goToRouteName() {
|
||
|
|
this.$router.push({
|
||
|
|
name: "searchResult",
|
||
|
|
query: {
|
||
|
|
q: undefined,
|
||
|
|
key: this.counter.routeName,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
},
|
||
|
|
urlResolver() {
|
||
|
|
const routeData = this.$router.resolve({
|
||
|
|
name: "searchResult",
|
||
|
|
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>
|