|
@@ -0,0 +1,224 @@
|
|
|
+<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>
|