| | |
| | | <div class="page-header"> |
| | | <p>王永炎院士学生目录</p> |
| | | </div> |
| | | <div class="page-main-title"> |
| | | <p |
| | | @click="changeTab('chart')" |
| | | :class="[activeTabs == 'chart' ? 'active-tab' : '']" |
| | | > |
| | | <img :src="[activeTabs == 'chart' ? chartIcon : noChartIcon]" alt="" /> |
| | | <span>图表显示</span> |
| | | </p> |
| | | <p |
| | | @click="changeTab('list')" |
| | | :class="[activeTabs == 'list' ? 'active-tab' : '']" |
| | | > |
| | | <img :src="[activeTabs == 'list' ? listIcon : noListIcon]" alt="" /> |
| | | <span>列表显示</span> |
| | | </p> |
| | | </div> |
| | | <!-- 图表显示 --> |
| | | <div class="charts-main" v-if="activeTabs == 'chart'"> |
| | | <div class="radial-tree-container"> |
| | | <div ref="chart" style="width: 100%; height: 600px"></div> |
| | | <div class="page-main-father"> |
| | | <div class="page-main-title"> |
| | | <p |
| | | @click="changeTab('chart')" |
| | | :class="[activeTabs == 'chart' ? 'active-tab' : '']" |
| | | > |
| | | <img |
| | | :src="[activeTabs == 'chart' ? chartIcon : noChartIcon]" |
| | | alt="" |
| | | /> |
| | | <span>图表显示</span> |
| | | </p> |
| | | <p |
| | | @click="changeTab('list')" |
| | | :class="[activeTabs == 'list' ? 'active-tab' : '']" |
| | | > |
| | | <img :src="[activeTabs == 'list' ? listIcon : noListIcon]" alt="" /> |
| | | <span>列表显示</span> |
| | | </p> |
| | | </div> |
| | | <transition name="el-fade-in-linear"> |
| | | <div class="tooltipBox" v-show="tooltipShow"> |
| | |
| | | <img :src="[item.isShow ? topIcon : bottomIcon]" alt="" /> |
| | | </div> |
| | | </div> |
| | | <table cellpadding="100" v-if="item.studentList && item.studentList.length > 0 && item.isShow"> |
| | | <tr class="table-heading"> |
| | | <th>姓名</th> |
| | | <th>性别</th> |
| | | <th>学习时间</th> |
| | | <th>工作单位(到二级单位全称)</th> |
| | | <th>职务</th> |
| | | <th>职称</th> |
| | | </tr> |
| | | <tr v-for="(citem, cindex) in item.studentList" :key="cindex"> |
| | | <td> |
| | | {{ citem.studentName }} |
| | | </td> |
| | | <td> |
| | | {{ citem.gender }} |
| | | </td> |
| | | <td>{{ citem.studyTime }}</td> |
| | | <td>{{ citem.workUnit }}</td> |
| | | <td>{{ citem.position }}</td> |
| | | <td>{{ citem.title }}</td> |
| | | </tr> |
| | | </table> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | height: 100%; |
| | | box-sizing: border-box; |
| | | background-color: #e9e1d4; |
| | | overflow: auto; |
| | | position: relative; |
| | | } |
| | | |
| | | .page-header { |
| | | height: 102px; |
| | | height: 9.4%; |
| | | width: 100%; |
| | | text-align: left; |
| | | margin-bottom: 8px; |
| | | border-bottom: 2px solid #937950; |
| | | |
| | | background-color: #e9e1d4; |
| | | position: sticky; |
| | | top: 0; |
| | | z-index: 100; |
| | | p { |
| | | padding: 35px 0 34px 0; |
| | | padding: 2% 0 1.9% 0; |
| | | font-family: Alimama DongFangDaKai; |
| | | font-size: 30px; |
| | | text-indent: 1em; |
| | | border-bottom: 1px solid #937950; |
| | | } |
| | | } |
| | | |
| | | .page-main-father { |
| | | height: calc(100% - 9.4%); |
| | | width: 100%; |
| | | overflow: auto; |
| | | } |
| | | |
| | | .page-main-title { |
| | |
| | | cursor: pointer; |
| | | margin-bottom: 75px; |
| | | color: #9e9e9e; |
| | | margin-top: 1%; |
| | | |
| | | p { |
| | | display: flex; |
| | |
| | | } |
| | | |
| | | .page-main { |
| | | width: 1313px; |
| | | width: 77.3%; |
| | | margin: 0 auto; |
| | | overflow: hidden; |
| | | margin-bottom: 100px; |