提交 b51347d3 编写于 作者: guangjun.yang's avatar guangjun.yang

固定的时候也可以左右滑动

上级 c4665e61
<!-- Tabs组件 -->
<template>
<div class="common-tabs-wrapper" :class="{'fixed': needFixed}">
<ul class="common-tabs">
<li
v-show="(item === '总体概况'
|| item === '人群分析'
|| item === '课程分析' && projectInfo.existCourse === 1)
|| (item === '考试分析' && projectInfo.existExam === 1)
|| (item === '学习效果分析' && projectInfo.existEffect === 1)"
v-for="(item, index) in tapList"
:class="{'active': index === cIndex}"
:key="index"
@click="clickTab(index)"
>{{item}}</li>
</ul>
<span class="over"></span>
<span class="border"></span>
<div class="common-tabs-wrapper" >
<div class="sub-wrapper" :class="{'fixed': needFixed}">
<ul class="common-tabs">
<li
v-show="(item === '总体概况'
|| item === '人群分析'
|| item === '课程分析' && projectInfo.existCourse === 1)
|| (item === '考试分析' && projectInfo.existExam === 1)
|| (item === '学习效果分析' && projectInfo.existEffect === 1)"
v-for="(item, index) in tapList"
:class="{'active': index === cIndex}"
:key="index"
@click="clickTab(index)"
>{{item}}</li>
</ul>
<span class="over"></span>
<span class="border"></span>
</div>
</div>
</template>
<script>
......@@ -53,19 +55,35 @@ export default {
<style lang="scss" scoped>
.common-tabs-wrapper {
&.fixed {
position: fixed;
top: 70px;
z-index: 10000000;
background: #fff;
.sub-wrapper {
display: flex;
position: relative;
width: 100%;
top: 0;
left: 0;
z-index: 1;
font-size: 13px;
width: 100%;
white-space: nowrap;
&.fixed {
position: fixed;
top: 70px;
width: 100%;
z-index: 10000000;
background: #fff;
white-space: nowrap;
overflow-x: auto;
}
}
display: flex;
position: relative;
width: 100%;
top: 0;
left: 0;
z-index: 1;
font-size: 13px;
.common-tabs {
width: 100%;
white-space: nowrap;
overflow-x: auto;
padding: 9px 0;
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册