pbl-teacher-table/src/components/pages/sassPlatform/index.vue

<template>
  <div class="sassPlatform">
    <div class="sp_header">
      <!-- <div class="sp_h_logo">

      </div> -->
      <div class="sp_h_tagArea">
        <span :class="{tagActive:tagIndex==0}" @click="tagIndex = 0">应用中心</span>
        <span :class="{tagActive:tagIndex==1}" @click="tagIndex = 1">智能分析</span>
      </div>
    </div>
    <div class="sp_bottom">
      <div class="sp_b_left">
        <div class="sp_b_l_form" v-for="(item,index) in formTypeList" :key="item.index">
          <span @click="item.open = !item.open">{{ item.name }}<svg :style="`transform: rotate(${item.open?'180':'0'}deg);`" t="1739262423649" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7079" width="200" height="200"><path d="M52.335 261.072c-31.269 30.397-31.269 79.722 0 110.194l403.212 391.718c31.325 30.382 82.114 30.382 113.377 0l403.197-391.718c31.325-30.466 31.325-79.793 0-110.194-31.28-30.449-82.058-30.449-113.39 0l-346.497 336.64-346.457-336.64c-31.325-30.448-82.105-30.448-113.446 0l0 0z" p-id="7080"></path></svg></span>
          <div v-show="item.open" v-if="item.children.length>0">
            <span v-for="(item2,index2) in item.children" :key="item2.index" @click="formTypeTag=item2.index" :class="{formActive:item2.index==formTypeTag}">{{ item2.name }}</span>
          </div>
        </div>
      </div>
      <div class="sp_b_right">
        <tableView/>
      </div>
    </div>
  </div>
</template>

<script>
import tableView from './view/tableView.vue';
export default {
  components:{
    tableView
  },
  data(){
    return{
      tagIndex:0,
      formTypeList:[
        {
          index:"0",
          name:"教师管理",
          open:false,
          children:[{
            index:'0-0',
            type:"form",
            name:"表单管理",
          },{
            index:'0-1',
            type:"card",
            name:"年度考核",
          },{
            index:'0-2',
            type:"card",
            name:"考核数据可视化",
          }]
        },
        {
          index:"1",
          name:"校园安全",
          open:false,
          children:[{
            index:'1-0',
            type:"form",
            name:"表单管理",
          }]
        },
        {
          index:"2",
          name:"成绩管理",
          open:false,
          children:[{
            index:'2-0',
            type:"form",
            name:"表单管理",
          }]
        },
        {
          index:"3",
          name:"后勤管理",
          open:false,
          children:[{
            index:'3-0',
            type:"form",
            name:"表单管理",
          }]
        },
      ],
      formTypeTag:'',
    }
  },
  methods: {

  },
}
</script>

<style scoped>
.sassPlatform{
  width: 100vw;
  height: 100vh;
  margin: 0;
  box-sizing: border-box;
  background-color: white;
}

.sp_header{
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-bottom: solid 1px #BBBBBB;
}

.sp_h_tagArea{
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
}

.sp_h_tagArea>span{
  margin-right: 40px;
  cursor: pointer;
  font-size: 20px;
  transition: .2s;
  position: relative;
}

.sp_h_tagArea>span:hover{
  color: #1684FC;
}

.tagActive{
  color: #1684FC;
}

.tagActive::after{
  content: '';
  width: 100%;
  height: 4px;
  background-color: #1684FC;
  position: absolute;
  bottom: -10px;
  left: 0;
  border-radius: 4px;
}

.sp_bottom{
  width: 100%;
  height: calc(100% - 100px);
  display: flex;
}

.sp_b_left{
  width: 15%;
  min-width: 200px;
  height: 100%;
  box-sizing: border-box;
  border-right:solid 1px #D5D5D5;
}

.sp_b_l_form{
  width: 100%;
  height: auto;
  background-color: white;
}

.sp_b_l_form>span{
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  padding: 0 30px;
  cursor: pointer;
  transition: .3s;
}

.sp_b_l_form>span:hover{
  color: #1684FC;
}

.sp_b_l_form>span>svg{
  width: 15px;
  height: 15px;
}

.sp_b_l_form>div{
  width: 100%;
  height: auto;
  box-sizing: border-box;
  background-color: #F7F7F7;
}

.sp_b_l_form>div>span{
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 40px;
  cursor: pointer;
  transition: .3s;
}

.sp_b_l_form>div>span:hover{
  color: #1684FC;
}

.formActive{
  color: #1684FC;
}

.sp_b_right{
  flex: 1;
  height: 100%;
}


</style>