<template>
  <section class="legislation-section section">
    <div class="container-fluid">
      <div class="row hr-x" >
        <div class="col-12 legislation-header">
          <h1 class="legislation-header-title mr-3">ادوار قانون گذاری در ایران</h1>
        </div>
        <div class="col-12 legislation-main">
          <div class="legislation-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>
              </div>
            </div>

            <div class="main-nav d-flex flex-wrap mt-5 mr-5">
              <div class="legislation-card" v-for="item in 9" :key="item">
                <div class="legislation-card-main border-bottom">
                  <p>مجلس شورای اسلامی دوره یکم</p>
                </div>
                <div class="legislation-card-footer mt-2 mb-2">
                  <div class="d-flex top">
                    <p class="ml-2 footer-title">قوانین تصویب شده :</p>
                    <p class="footer-date">381</p>
                  </div>
                  <div class="d-flex bottom">
                    <p class="ml-2 footer-title">از تاریخ :</p>
                    <p class="footer-date">08/11/1386</p>
                    <p class="ml-2 footer-title mr-2"> تا تاریخ:</p>
                    <p class="footer-date">08/11/1386</p>
                  </div>

                  
                </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>