| | |
| | | <meta charset="utf-8"> |
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| | | <meta name="viewport" content="width=device-width,initial-scale=1.0"> |
| | | <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> --> |
| | | <link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
| | | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900"> |
| | | <title>王永炎数据库</title> |
| | | </head> |
| | |
| | | color: #decaac; |
| | | font-size: 24px; |
| | | border-bottom: 1px solid #b9a587; |
| | | height: 180px; |
| | | |
| | | height: 18vh; |
| | | .menuText { |
| | | line-height: 50px; |
| | | } |
| | |
| | | v-for="(citem, cindex) in item.list" |
| | | :style="{ background: citem.color }" |
| | | @mouseover="showDetail(index, cindex, 1)" |
| | | @mouseout="closeDetail(index, cindex, 0)" |
| | | :key="cindex" |
| | | > |
| | | <div class="detailDialog" v-if="citem.showDetail"> |
| | |
| | | |
| | | methods: { |
| | | gotoDetail(item) {}, |
| | | |
| | | closeDetail(index, cindex, type) { |
| | | // console.log(cindex, "cindex"); |
| | | // for (let i = 0; i < this.contentList.length; i++) { |
| | | // const item = this.contentList[i]; |
| | | // for (let j = 0; j < item.list.length; j++) { |
| | | // const citem = item.list[j]; |
| | | // this.$set(citem, "showDetail", false); |
| | | // } |
| | | // } |
| | | |
| | | }, |
| | | showDetail(index, cindex, type) { |
| | | for (let i = 0; i < this.contentList.length; i++) { |
| | | const item = this.contentList[i]; |
| | |
| | | this.$set(citem, "showDetail", false); |
| | | } |
| | | } |
| | | if (type == 1) { |
| | | |
| | | if (this.contentList[index].list[cindex].type) { |
| | | this.contentList[index].list[cindex].showDetail = true; |
| | | } else { |
| | | this.contentList[index].list[cindex].showDetail = false; |
| | |
| | | <!-- 图表显示 --> |
| | | <div class="charts-main" v-if="activeTabs == 'chart'"> |
| | | <div class="radial-tree-container"> |
| | | <div ref="chart" style="width: 100%; height: 600px"></div> |
| | | <div ref="chart" style="width: 100%; height: 70vh"></div> |
| | | </div> |
| | | |
| | | <div class="legend"> |
| | | <div class="tagItem" v-for="(item, index) in legendList" :key="index"> |
| | | <div class="tagColor" :style="{ background: item.color }"></div> |
| | | <div class="tagText" :style="{ color: item.color }"> |
| | | {{ item.name }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <transition name="el-fade-in-linear"> |
| | | <div class="tooltipBox" v-show="tooltipShow"> |
| | |
| | | text-align: center; |
| | | " |
| | | > |
| | | <div class="closeBtn" @click="tooltipShow = false"> |
| | | <i class="el-icon-close"></i> |
| | | </div> |
| | | |
| | | <div style="display: flex"> |
| | | <div |
| | | style=" |
| | |
| | | <!-- 列表显示 --> |
| | | <div class="page-main" v-if="activeTabs == 'list'"> |
| | | <div v-for="(item, index) in universityList" :key="index"> |
| | | <div class="table-title" v-if="item.studentList && item.studentList.length > 0"> |
| | | <div |
| | | class="table-title" |
| | | v-if="item.studentList && item.studentList.length > 0" |
| | | > |
| | | <div class="table-title-left"> |
| | | <p class="table-title-name">{{ item.name }}</p> |
| | | <p class="table-title-degree">{{ item.degree }}</p> |
| | |
| | | <img :src="[item.isShow ? topIcon : bottomIcon]" alt="" /> |
| | | </div> |
| | | </div> |
| | | <table cellpadding="100" v-if="item.studentList && item.studentList.length > 0 && item.isShow"> |
| | | <table |
| | | cellpadding="100" |
| | | v-if="item.studentList && item.studentList.length > 0 && item.isShow" |
| | | > |
| | | <tr class="table-heading"> |
| | | <th>姓名</th> |
| | | <th>性别</th> |
| | |
| | | chartData: treeData, |
| | | currentNodeInfo: {}, |
| | | tooltipShow: false, |
| | | legendList: [ |
| | | { |
| | | color: "#87A7B9", |
| | | name: "北京中医大学", |
| | | }, |
| | | { |
| | | color: "#C48787", |
| | | name: "北京师范大学", |
| | | }, |
| | | { |
| | | color: "#6F8F5A", |
| | | name: "中国中医科学院", |
| | | }, |
| | | { |
| | | color: "#937950", |
| | | name: "广州中医药大学", |
| | | }, |
| | | { |
| | | color: "#8D77B3", |
| | | name: "拜师弟子", |
| | | }, |
| | | ], |
| | | }; |
| | | }, |
| | | |
| | |
| | | }, |
| | | }, |
| | | textStyle: { |
| | | color: "#bc1c00" // 设置整体字体颜色为红色 |
| | | color: "#bc1c00", // 设置整体字体颜色为红色 |
| | | }, |
| | | edgeLabel: { |
| | | normal: { |
| | | color: "#bc1c00" // 设置线条的颜色为红色 |
| | | } |
| | | color: "#bc1c00", // 设置线条的颜色为红色 |
| | | }, |
| | | }, |
| | | series: [ |
| | | { |
| | |
| | | }; |
| | | |
| | | this.chart.setOption(option); |
| | | |
| | | this.chart.on( |
| | | "showTip", |
| | | debounce((event) => { |
| | | console.log("显示时的回调", event); |
| | | this.tooltipShow = true; |
| | | }, 500) |
| | | ); |
| | | |
| | | this.chart.on( |
| | | "hideTip", |
| | | debounce((event) => { |
| | | console.log("隐藏时的回调", event); |
| | | this.tooltipShow = false; |
| | | }, 500) |
| | | ); |
| | | this.chart.on("click", (params) => { |
| | | console.log("点击时的回调", params); |
| | | this.tooltipShow = true; |
| | | }); |
| | | }, |
| | | handleResize() { |
| | | if (this.chart) { |
| | |
| | | max-width: 500px; |
| | | background-color: #fdf8f0; |
| | | position: absolute; |
| | | bottom: -60px; |
| | | right: 40px; |
| | | top: 12vh; |
| | | } |
| | | .closeBtn { |
| | | position: absolute; |
| | | top: 10px; |
| | | right: 0; |
| | | cursor: pointer; |
| | | } |
| | | .legend { |
| | | position: absolute; |
| | | bottom: 300px; |
| | | left: 100px; |
| | | } |
| | | .tagItem { |
| | | display: flex; |
| | | margin-top: 20px; |
| | | } |
| | | .tagColor { |
| | | width: 20px; |
| | | height: 20px; |
| | | } |
| | | .tagText { |
| | | margin-left: 30px; |
| | | } |
| | | </style> |
| | |
| | | <div class="copyrightInformation"> |
| | | 版权所有:中国中医研究院 京ICP备 0384937947 京公网安备 1212129923 |
| | | </div> |
| | | <div class="profilePhoto"></div> |
| | | <div class="profilePhoto"> |
| | | <img class="autoImg" src="@/assets/images/profilePhoto.png" alt="" /> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | background-repeat: no-repeat; |
| | | background-size: 98% 95%; |
| | | position: relative; |
| | | padding: 0 40px; |
| | | box-sizing: border-box; |
| | | } |
| | | .profilePhoto { |
| | | background-image: url("@/assets/images/profilePhoto.png"); |
| | | width: 475px; |
| | | height: 556px; |
| | | /* background-image: url("@/assets/images/profilePhoto.png"); */ |
| | | width: 50%; |
| | | height: 60%; |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%; |
| | | position: absolute; |
| | | top: 30%; |
| | | left: 8%; |
| | | top: 28.2%; |
| | | left: 0; |
| | | } |
| | | .headerBox { |
| | | width: 99.5%; |
| | | height: 220px; |
| | | padding-top: 60px; |
| | | padding-left: 40px; |
| | | width: 95.5%; |
| | | height: 23.1%; |
| | | padding-top: 3%; |
| | | padding-left: 5%; |
| | | border-bottom: 1px solid#937950; |
| | | font-size: 50px; |
| | | line-height: 66px; |
| | |
| | | justify-content: space-between; |
| | | font-family: Alimama DongFangDaKai; |
| | | box-sizing: border-box; |
| | | margin: 0 auto; |
| | | } |
| | | .searchBox { |
| | | margin-right: 100px; |
| | | } |
| | | .menuBox { |
| | | position: absolute; |
| | | right: 48px; |
| | | width: 1000px; |
| | | right: 2.5%; |
| | | width: 52%; |
| | | height: 47.3%; |
| | | font-family: Alimama DongFangDaKai; |
| | | } |
| | | .menu { |
| | | width: 25%; |
| | | height: 450px; |
| | | /* height: 450px; */ |
| | | height: 100%; |
| | | background-color: #fff; |
| | | text-align: center; |
| | | padding-top: 20px; |
| | |
| | | } |
| | | .menuList { |
| | | display: flex; |
| | | height: 100%; |
| | | } |
| | | |
| | | .personalProfile { |
| | | background: rgba(147, 121, 80, 0.15); |
| | | height: 170px; |
| | | width: 100%; |
| | | height: 17.8%; |
| | | width: 95.1%; |
| | | position: absolute; |
| | | right: 40px; |
| | | bottom: 111px; |
| | | right: 2.5%; |
| | | bottom: 11.7%; |
| | | border: 1px solid #937950; |
| | | } |
| | | .textInfo { |
| | | position: absolute; |
| | | right: 40px; |
| | | width: 1000px; |
| | | width: 50%; |
| | | margin-top: 20px; |
| | | line-height: 16px; |
| | | /* line-height: 16px; */ |
| | | } |
| | | .copyrightInformation { |
| | | width: 100%; |
| | | position: absolute; |
| | | bottom: 80px; |
| | | bottom: 8%; |
| | | font-size: 12px; |
| | | color: #937950; |
| | | width: 100%; |
| | | text-align: center; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px) { |
| | | .textInfo { |
| | | font-size: 20px; |
| | | line-height: 24px; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | const { defineConfig } = require("@vue/cli-service"); |
| | | module.exports = defineConfig({ |
| | | publicPath: "/", |
| | | publicPath: "./", |
| | | productionSourceMap: false, |
| | | transpileDependencies: true, |
| | | }); |