<template>
<div class="wrap">
  <div class="navBar">
    <van-nav-bar
        title="文档资料"
        left-arrow
        left-arrow-color="#FFFFFF"
        :border="false"
        :fixed="true"
        :safe-area-inset-top="true"
        @click-left="goBack"
    >
      <template slot="right">
        <div class="rightWrap">
          <img src="@/assets/serach.png" class="img2"/>
        </div>
      </template>
    </van-nav-bar>
  </div>
  <div class="tab_wrap">
    <div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
         @click="changeTab(index)">
      {{ item.name }}
    </div>
  </div>
  <div class="contentWrap">
        <div class="itemWrap">
            <div class="info flexBetween common">
              <div class="title">会记回家和</div>
              <div class="time">2023-08-24 13:14:00</div>
            </div>
           <div class="imgWrap">
             <img src="@/assets/empty.png">
           </div>
           <div class="num common">111</div>
            <div class="doc flexBetween common">
              <div class="left">培训材料</div>
              <div class="right">
                <span style="color: red;font-size: 14px;margin-right: 8px">未处理</span>
                <span style="opacity: .9;color: #ccc">阅读8</span>
              </div>
            </div>
        </div>
  </div>
</div>
</template>

<script>
import {myMixins} from "@/utils/myMixins"
export default {
  name: "trainDocment",
  mixins:[myMixins],
  data(){
    return{
      tabArr: [{name: '中道制度', status: 1}, {name: '技术参数', status: 2},],
      activeIndex: 0,
      orderList: [],
    }
  },
  methods:{
   changeTab(index) {
    this.activeIndex = index
    // this.total = 0;
    this.pageNum = 1
    this.orderList = [];
  },
}
}
</script>

<style scoped lang="scss">
@import "@/styles/common.scss";
@import "@/styles/mixin.scss";
.wrap{
  width: 100%;
  height: 100%;
  background-color: #F4F5F7;
  overflow-y: auto;
}
.navBar{
  margin-bottom: 46px;
}
.rightWrap {
  @include flexCenter;
  .img2 {
    @include wh(17px, 17px)
  }
}
.tab_wrap {
  @include fontWeightSize(bolder, 15px);
  display: flex;
  justify-content: space-around;
  padding: 5px 0 5px 0;
  color: #737373;
  opacity: .7;
  div {
    padding-top: 8px;
  }
  .active {
    color: #3678FF;
    position: relative;
  }

  .active:after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
    border-radius: 2px;
    position: absolute;
    margin-top: 3px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.contentWrap{
  padding: 0 8px;
  width: 100%;
  box-sizing: border-box;
  .itemWrap{
    margin-top: 16px;
    @include wh(100%, 300px);
    background: #FFFFFF;
    box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
    border-radius: 3px;
    box-sizing: border-box;
    @include flexColumn;
    justify-content: space-around;
    padding: 6px 0;
    @include fontWeightSize(400, 12px);
    .flexBetween{
      @include flexColBet;
    }
    .common{
      margin: 0 15px ;
    }
    .imgWrap{
      width: 100%;
      height: 200px;
      //background-color: #6C81CD;
      img{
        width: 100%;
        height: 200px;
      }
    }
    .left{
      color: red;
      font-size: 15px;
      font-weight: 500;
    }
  }

}
</style>