<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2023-09-18 10:08:30
 * @LastEditors: JC9527
 * @LastEditTime: 2023-09-20 14:01:56
-->
<template>
  <div class="mainBox">
    <div class="convert-topBox">
      <my-input @changeInput="changeInput"></my-input>
    </div>
    <div class="convert-content">
      <div class="integral-lists">
        <div class="list" v-for="item in certificateList">
          <div class="list-top" :class="item.type == 1 ? 'top-two' : item.type == 2 ? 'top-three' : '' "></div>
          <div class="list-bottom">
            <span class="bottom-left">{{ item.type == 0 ? '高级' : item.type == 1 ? '中级' : '初级' }}</span>
            <span class="bottom-right" @click="conversion(item)">兑换</span>
          </div>
        </div>
      </div>
      <div class="pagination">
        <my-pagination :total="total" @pagesChange="pagesChange"></my-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import myInput from "@/views/components/myInput/index.vue"
import myPagination from "@/views/components/myPagination/index.vue"
export default {
  data() {
    return {
      total:0,
      certificateList:[
        {
          type:2,
        },{
          type:1,
        },{
          type:0,
        },{
          type:2,
        },{
          type:1,
        },{
          type:0,
        },{
          type:2,
        },{
          type:1,
        }
      ]
    };
  },
  components: {
    myInput,myPagination
  },
  mounted() {
    
  },
  methods: {
    // 页码切换
    pagesChange(pages){

    },
    // 点击搜索输入框的值
    changeInput(e){

    },
    // 点击兑换
    conversion(item){

    },
  },
};
</script>
<style lang="scss" scoped>
.mainBox {
  height: 100%;
  width: 100%;
  border-radius: 10px 10px 0 0;
  background-color: #fff;
  padding: 0 20px 10px 20px;
  box-shadow: 0px 0px 15px 0px rgba(229,212,212,0.58);
  .convert-topBox {
    padding: 40px 0 0 0;
  }
  .convert-content {
    .integral-lists {
      // display: flex;
      // flex-wrap: wrap;
      margin-top: 30px;
      display: grid;
      grid-template-columns: repeat(5, 300px);
      grid-column-gap: 30px;
      grid-row-gap: 30px;
      .list {
        width: 300px;
        // height: 305px;
        // background: linear-gradient(0deg, #EFE6D9, #DDC9AC);
        box-shadow: 0px 3px 15px 0px rgba(184,184,184,0.22);
        border-radius: 10px;
        .list-top {
          background: url('../../../assets/images/icon1.png') no-repeat center center;
          background-size: 100% 100%;
          height: 216px;
          width: 100%;
        }
        .top-two {
          background: url('../../../assets/images/icon2.png') no-repeat center center;
          background-size: 100% 100%;
        }
        .top-three {
          background: url('../../../assets/images/icon3.png') no-repeat center center;
          background-size: 100% 100%;
        }
        .list-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 20px;
          .bottom-left {
            font-size: 16px;
            font-family: FZDaBiaoSong-B06S;
            font-weight: 400;
            color: #4D4949;
          }
          .bottom-right {
            padding: 3px 15px;
            border-radius: 4px;
            background-color: rgba(249,86,95,0.1);
            font-size: 14px;
            font-family: 'Alibaba PuHuiTi';
            font-weight: 400;
            color: #F8414D;
            cursor: pointer;
          }
        }
      }
    }
    .pagination {
      margin-top: 45px;
    }
  }
}
</style>