88 lines
2.3 KiB
Vue
88 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<section class="rules-section section">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="row hr-x">
|
||
|
|
<div class="col-12 rules-header">
|
||
|
|
<h1 class="rules-header-title mr-3">قوانین</h1>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 rules-main">
|
||
|
|
<div class="rules-main-header">
|
||
|
|
|
||
|
|
<div class="header-nav d-flex justify-content-between">
|
||
|
|
<div class="header-nav-right">
|
||
|
|
<button
|
||
|
|
@click="changeActive(1)"
|
||
|
|
:class="{ active: activeButton == 1 }"
|
||
|
|
>
|
||
|
|
پرکاربردتر
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
@click="changeActive(2)"
|
||
|
|
:class="{ active: activeButton == 2 }"
|
||
|
|
>
|
||
|
|
جدیدتر
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
@click="changeActive(3)"
|
||
|
|
:class="{ active: activeButton == 3 }"
|
||
|
|
>
|
||
|
|
مشاهده اخیر
|
||
|
|
</button>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="header-nav-left">
|
||
|
|
<button
|
||
|
|
@click="changeActive(4)"
|
||
|
|
:class="{ active: activeButton == 4 }"
|
||
|
|
>
|
||
|
|
همه
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="main-nav d-flex flex-wrap mt-5 mr-5">
|
||
|
|
<div class="rules-card" v-for="item in 9" :key="item">
|
||
|
|
<div class="rules-card-main border-bottom">
|
||
|
|
<p class="">قانون آیین نامه داخلی مجلس شورای اسلامی</p>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="rules-card-footer d-flex justify-content-between align-items-center mt-2"
|
||
|
|
>
|
||
|
|
<div class="d-flex">
|
||
|
|
<p class="ml-2 footer-title">تاریخ تصویب:</p>
|
||
|
|
<p class="footer-date">08/11/1386</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button>مشاهده</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
activeButton: 1,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
changeActive(item) {
|
||
|
|
this.activeButton = item;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style scoped lang="scss"></style>
|