| 
					
				 | 
			
			
				@@ -1,6 +1,6 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 <template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     <div class="order"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        <header>支付列表 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <header>缴费详情 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             <van-dropdown-menu> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				                 <van-dropdown-item @change="onChange" v-model="voicyPart" :options="voicyPartList" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             </van-dropdown-menu> 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -47,11 +47,11 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				                             <span> {{ data.currentClass }} </span> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				                             <span> {{ data.subjectName }} </span> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				                             <span> {{ data.remark }} </span> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                            <span><van-button  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                                    :disabled="data.paymentStatus == 2 ? true : false"  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                                    round  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <span><van-button 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                    :disabled="data.paymentStatus == 2 ? true : false" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                    round 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				                                     @click = "adjust(data)" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                                    type = "danger"  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                    type = "danger" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				                                     size = "small">调剂</van-button> </span> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				                         </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				                     </div> 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -63,12 +63,57 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				                     @cancel="adjustStatus = false" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				                     @select="adjustSelect" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             </van-tab> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <van-tab title="数据统计"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                <div style="width: 100%;overflow-x: auto;"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    <div class="table" style="width: 145%;"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        <van-row style="border: 1px solid #eaeaea"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <van-col span="1"> </van-col> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <van-col span="3">学员编号</van-col> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <van-col span="2">姓名</van-col> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <van-col span="2">声部</van-col> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <van-col span="4"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                <div style="display: flex;align-items: center;justify-content: center;" @click="onChangeSort('1')"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                    预报名时间 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                    <div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        <i class="box box-up" :class="[orderByPerRegister == 'ASC' ? 'active' : null]" style="margin-bottom: .02rem;"></i> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        <i class="box box-down" :class="[orderByPerRegister == 'DESC' ? 'active' : null]"></i> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                    </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            </van-col> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <van-col span="4">预报名时间差</van-col> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <van-col span="4"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                <div style="display: flex;align-items: center;justify-content: center;" @click="onChangeSort('2')"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                    缴费时间 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                    <div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        <i class="box box-up" :class="[orderByPayTime == 'ASC' ? 'active' : null]" style="margin-bottom: .02rem;"></i> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        <i class="box box-down" :class="[orderByPayTime == 'DESC' ? 'active' : null]"></i> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                    </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            </van-col> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <van-col span="4">缴费时间差</van-col> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        </van-row> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        <van-row v-for="(data, index) in countList" :key="data.id" style="border: 1px solid #ebedf0"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <van-col span="1">{{ ++index }}</van-col> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <van-col span="3">{{ data.userId }}</van-col> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <van-col span="2">{{ data.studentName }}</van-col> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <van-col span="2">{{ data.actualSubjectName }}</van-col> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <van-col span="4">{{ data.perRegisterTime }}</van-col> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <van-col span="4">{{ data.perRegIntervalStr }}</van-col> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <van-col span="4">{{ data.payTime }}</van-col> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <van-col span="4">{{ data.payIntervalStr }}</van-col> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        </van-row> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            </van-tab> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         </van-tabs> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 </template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 <script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-import { queryStudentApply, querySubByMusicGroupId, updateSubject } from '@/api/teacher' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { queryStudentApply, querySubByMusicGroupId, getRegisterOrPreList, updateSubject } from '@/api/teacher' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import setLoading from '@/utils/loading' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import moment from 'moment' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import cleanDeep from 'clean-deep' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 export default { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     name: 'order', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     data() { 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -79,6 +124,7 @@ export default { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             amountCount: 0, // 总额 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             studentList: {}, // 学生列表 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             couresList: [], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            countList: [], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             voicyPart: 0, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             voicyPartList: [{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				                 text: '全部声部', 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -86,13 +132,15 @@ export default { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             }], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             adjustStatus: false, // 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             changeStudent: null, // 修改的学生对象 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            orderByPerRegister: null, // 预报名时间排序状态 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            orderByPayTime: null, // 缴费时间排序状态 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    mounted() { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    async mounted() { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         window.localStorage.removeItem('userInfo') // 删除用户信息 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         window.localStorage.removeItem('Authorization') // 删除用户信息 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        querySubByMusicGroupId({ musicGroupId: this.musicGroupId }).then(res => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        setLoading(true) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        await querySubByMusicGroupId({ musicGroupId: this.musicGroupId }).then(res => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             let result = res.data 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             if(result.code == 200) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				                 result.data.forEach(r => { 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -108,11 +156,11 @@ export default { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				                 }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-         
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        setLoading(false) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         // 获取订单信息 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         this.getOrderList() 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         this.getOrderStudentList() 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-         
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        this.getRegisterOrPreList() 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     methods: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         adjust(item) { 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -171,11 +219,67 @@ export default { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				                 } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        async getRegisterOrPreList() { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            setLoading(true) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            // 获取订单信息 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            await getRegisterOrPreList(cleanDeep({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                musicGroupId: this.musicGroupId, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                rows: 9999, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                subjectId: this.voicyPart ? this.voicyPart : '', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                orderByPerRegister: this.orderByPerRegister, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                orderByPayTime: this.orderByPayTime, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                page: 1 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            })).then(res => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                let result = res.data 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if(result.code == 200) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    this.countList = result.data.rows 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            setLoading(false) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         onChange() { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             // 切换声部时 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             // let subId = value ? value : '' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             this.getOrderList(this.voicyPart) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             this.getOrderStudentList(this.voicyPart) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            this.getRegisterOrPreList(this.voicyPart) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        async onChangeSort(sort) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if(sort == 1) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                this.orderByPayTime = null 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if(this.orderByPerRegister == 'ASC') { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    this.orderByPerRegister = 'DESC' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } else if(this.orderByPerRegister == 'DESC') { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    this.orderByPerRegister = null 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    this.orderByPerRegister = 'ASC' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } else if(sort == 2) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                this.orderByPerRegister = null 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if(this.orderByPayTime == 'ASC') { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    this.orderByPayTime = 'DESC' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } else if(this.orderByPayTime == 'DESC') { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    this.orderByPayTime = null 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    this.orderByPayTime = 'ASC' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            await this.getRegisterOrPreList() 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    filters: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        formatterTimes(second){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (second < 60) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                return second + "秒"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } else if (60 < second && second < 3600) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                return moment(second * 1000).format("m分钟"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } else if (3600 < second && second < 86400) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                return moment(second * 1000).format("HH小时mm分钟"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } else if (second > 86400) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                return moment(second * 1000).format("DD天HH小时mm分钟"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                return "--"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 } 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -223,9 +327,6 @@ h2 { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     .content > div{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        // border: 1px solid #ccc; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        // border-left: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        // border-right: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         width: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         display: flex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         align-items: center; 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -246,4 +347,42 @@ h2 { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         box-shadow: none; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+/deep/.van-col { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    font-size: 0.14rem; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    text-align: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    padding: .08rem 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+/deep/.van-row { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    &:nth-child(2n+3) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        background: #eaeaea; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+.box { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    display: flex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    flex-direction: row; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    align-items: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    margin-left: .02rem; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+.box-up { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    width: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    height: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    border-left: 4px solid transparent; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    border-right: 4px solid transparent; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    border-bottom: 6px solid #ccc; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    &.active { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        border-bottom-color: #14928a; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+.box-down { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    width: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    height: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    border-left: 4px solid transparent; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    border-right: 4px solid transparent; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    border-top: 6px solid #ccc; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    &.active { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        border-top-color: #14928a; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 </style> 
			 |