majles dashboard
This commit is contained in:
parent
10d59713b0
commit
b1154fa3ae
|
|
@ -1,2 +1,3 @@
|
|||
@import "../fonts/tavasi/style";
|
||||
@import "../img/icomoon/style";
|
||||
@import "./sahel";
|
||||
|
|
|
|||
46
assets/common/vendors/counter/counter.js
vendored
46
assets/common/vendors/counter/counter.js
vendored
|
|
@ -1,46 +0,0 @@
|
|||
(function ($) {
|
||||
$.fn.countTo = function (options) {
|
||||
// merge the default plugin settings with the custom options
|
||||
options = $.extend({}, $.fn.countTo.defaults, options || {});
|
||||
|
||||
// how many times to update the value, and how much to increment the value on each update
|
||||
var loops = Math.ceil(options.speed / options.refreshInterval),
|
||||
increment = (options.to - options.from) / loops;
|
||||
|
||||
return $(this).each(function () {
|
||||
var _this = this,
|
||||
loopCount = 0,
|
||||
value = options.from,
|
||||
interval = setInterval(updateTimer, options.refreshInterval);
|
||||
|
||||
function updateTimer() {
|
||||
value += increment;
|
||||
loopCount++;
|
||||
$(_this).html(value.toFixed(options.decimals));
|
||||
|
||||
if (typeof options.onUpdate == "function") {
|
||||
options.onUpdate.call(_this, value);
|
||||
}
|
||||
|
||||
if (loopCount >= loops) {
|
||||
clearInterval(interval);
|
||||
value = options.to;
|
||||
|
||||
if (typeof options.onComplete == "function") {
|
||||
options.onComplete.call(_this, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.countTo.defaults = {
|
||||
from: 0, // the number the element should start at
|
||||
to: 100, // the number the element should end at
|
||||
speed: 1000, // how long it should take to count between the target numbers
|
||||
refreshInterval: 100, // how often the element should be updated
|
||||
decimals: 0, // the number of decimal places to show
|
||||
onUpdate: null, // callback method for every time the element is updated,
|
||||
onComplete: null, // callback method for when the element finishes updating
|
||||
};
|
||||
})(jQuery);
|
||||
|
|
@ -43,8 +43,8 @@
|
|||
bottom: 0;
|
||||
}
|
||||
.inner-wrapper {
|
||||
max-width: 47.5em;
|
||||
margin: 0 auto;
|
||||
// max-width: 47.5em;
|
||||
// margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
}
|
||||
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
|
||||
.search-section .top-content .inner-wrapper {
|
||||
padding-top: 10em;
|
||||
// padding-top: 10em;
|
||||
}
|
||||
/* استایلهای مربوط به اندازههای بین 768 تا 991 پیکسل */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,8 @@
|
|||
<header>
|
||||
<majles-navbar></majles-navbar>
|
||||
</header>
|
||||
|
||||
<div class="inner-wrapper">
|
||||
<div class="d-md-none d-lg-block">
|
||||
<div class="inner-wrapper d-flex flex-column col-12">
|
||||
<div class="">
|
||||
<img
|
||||
src="assets/majles/img/logo_200x200.png"
|
||||
:alt="appLongTitle()"
|
||||
|
|
@ -19,44 +18,32 @@
|
|||
<h1 class="sub-title">
|
||||
{{ title2 }}<span style="font-size: 1.5rem">{{ title3 }}</span>
|
||||
</h1>
|
||||
<form
|
||||
class="ms-search-form px-3"
|
||||
role="search"
|
||||
@submit.prevent="searchNavigateList"
|
||||
>
|
||||
<div class="input-group mb-5" dir="ltr">
|
||||
<div class="input-group-prepend">
|
||||
<button
|
||||
dir="rtl"
|
||||
class="btn"
|
||||
type="button"
|
||||
id="button-addon2"
|
||||
@click.prevent="searchNavigateList()"
|
||||
>
|
||||
جستجو
|
||||
<span class="tavasi tavasi-Component-198--1"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<input
|
||||
v-focus
|
||||
class="form-control"
|
||||
ref="search-input"
|
||||
dir="rtl"
|
||||
v-model.trim="searchText"
|
||||
type="search"
|
||||
id="search-query"
|
||||
placeholder="جستجو در قوانین ..."
|
||||
name="search-query"
|
||||
size="60"
|
||||
@keyup.enter="searchNavigateList"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
<div class=" d-flex justify-content-center">
|
||||
<form
|
||||
class="ms-search-form px-3 col-12 col-sm-8 col-xl-6"
|
||||
role="search"
|
||||
@submit.prevent="searchNavigateList"
|
||||
>
|
||||
<auto-complation
|
||||
dir="ltr"
|
||||
contentKey="qasection"
|
||||
:showAppend="false"
|
||||
:showPrepend="true"
|
||||
:showAppendSearchButton="false"
|
||||
@onSearchStart="searchNavigateList"
|
||||
@on-search-navigate-list="searchNavigateList"
|
||||
:placeholder="'جستجو در هزاران محتوای قوانین'"
|
||||
ref="autoComplationRef"
|
||||
></auto-complation>
|
||||
<!-- :listAutocomplate="listAutocomplate" -->
|
||||
<!-- @selectAutocomplate2="selectAutocomplate2" -->
|
||||
<!-- </div> -->
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-content">
|
||||
<!-- <my-counter-list title=""></my-counter-list> -->
|
||||
<my-counter-list></my-counter-list>
|
||||
</div>
|
||||
<div class="footer-content">
|
||||
<div class="container-fluid">
|
||||
|
|
@ -86,7 +73,7 @@
|
|||
<div class="col-sm-6 mb-2 mb-sm-0 col-md mb-sm-2 mb-md-0">
|
||||
<div class="link-item-container">
|
||||
<NuxtLink
|
||||
:to="urlResolver('qq308235')"
|
||||
:to="urlResolver('qq308235')"
|
||||
target="_blank"
|
||||
class="btn link-item"
|
||||
>
|
||||
|
|
@ -106,7 +93,7 @@
|
|||
<div class="col-sm-6 mb-2 mb-sm-0 col-md">
|
||||
<div class="link-item-container">
|
||||
<NuxtLink
|
||||
:to="urlResolver('qq38162')"
|
||||
:to="urlResolver('qq38162')"
|
||||
target="_blank"
|
||||
class="btn link-item"
|
||||
>
|
||||
|
|
@ -126,7 +113,7 @@
|
|||
<div class="col-sm-6 mb-2 mb-sm-0 col-md">
|
||||
<div class="link-item-container">
|
||||
<NuxtLink
|
||||
:to="urlResolver('qq233930')"
|
||||
:to="urlResolver('qq233930')"
|
||||
target="_blank"
|
||||
class="btn link-item"
|
||||
>
|
||||
|
|
@ -270,6 +257,18 @@ export default {
|
|||
// return routeData.href;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
MyCounterList: defineAsyncComponent(() =>
|
||||
import("@components/other/MyCounterList.vue")
|
||||
),
|
||||
AutoComplation: defineAsyncComponent(() =>
|
||||
import("@search/components/global/AutoComplation.vue")
|
||||
),
|
||||
|
||||
// Navbar: () => import("@dashboard/majles/components/Navbar"),
|
||||
// MySystem: () => import("@dashboard/default/pages/MySystem"),
|
||||
// MyCircleProgress: () => import("@components/MyCircleProgress"),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -286,6 +285,14 @@ export default {
|
|||
// .main-page__content{
|
||||
// margin-right: 0px !important;
|
||||
// }
|
||||
.ms-search-form {
|
||||
.input-group {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.dropdown-menu {
|
||||
float: right;
|
||||
min-width: 13rem;
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@
|
|||
class="col-sm-12 col-md mb-5 mb-md-0 text-center"
|
||||
v-for="(counter, index) in list"
|
||||
>
|
||||
<!-- <my-counter-list-item
|
||||
<my-counter-list-item
|
||||
:counter="counter"
|
||||
:key="index + render"
|
||||
></my-counter-list-item> -->
|
||||
></my-counter-list-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -19,13 +19,13 @@
|
|||
import repoApi from "~/apis/repoApi";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
listData: {
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
// props: {
|
||||
// listData: {
|
||||
// default() {
|
||||
// return [];
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
async beforeMount() {
|
||||
try {
|
||||
const { $api } = useNuxtApp();
|
||||
|
|
@ -73,6 +73,11 @@ export default {
|
|||
],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
MyCounterListItem: defineAsyncComponent(() =>
|
||||
import("@components/other/MyCounterListItem.vue")
|
||||
),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
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>
|
||||
<span>{{ displayValue }}</span>
|
||||
</h2>
|
||||
<div class="d-flex flex-column align-items-center align-items-lg-start">
|
||||
<p class="counter-text">{{ counter.title }}</p>
|
||||
|
|
@ -15,42 +15,67 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import "assets/common/vendors/counter/counter.js";
|
||||
|
||||
export default {
|
||||
props: ["counter"],
|
||||
data() {
|
||||
return {
|
||||
displayValue: 0,
|
||||
interval: null,
|
||||
};
|
||||
},
|
||||
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);
|
||||
},
|
||||
});
|
||||
this.startCount();
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.interval) clearInterval(this.interval);
|
||||
},
|
||||
methods: {
|
||||
goToRouteName() {
|
||||
this.$router.push({
|
||||
name: "searchResult",
|
||||
query: {
|
||||
q: undefined,
|
||||
key: this.counter.routeName,
|
||||
},
|
||||
});
|
||||
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: "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;
|
||||
console.log("555");
|
||||
|
||||
// const routeData = this.$router.resolve({
|
||||
// name: "searchResult",
|
||||
// query: {
|
||||
// q: undefined,
|
||||
// key: this.counter.routeName,
|
||||
// },
|
||||
// });
|
||||
// return routeData.href;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user