Skip to content

R
risk-monitor
提交 8b087b6d authored 作者: Vicky's avatar Vicky
浏览文件
操作

创新主体优化

上级 71d717e6
显示空白字符变更
内嵌 并排
正在显示 包含 3166 行增加 和 67 行删除
src/router/modules/InnovationSubject.js
浏览文件 @ 8b087b6d
//创新主体
import InnovationSubject from "@/views/innovationSubject/index.vue";
import InnovationInstitution from "@/views/innovationSubject/innovativeInstitutions/index.vue";
const innovationSubjectRoutes = [
//创新主体
......@@ -10,6 +11,14 @@ const innovationSubjectRoutes = [
meta: {
title: "主要创新主体"
}
},
{
path: "/InnovativeInstitutions",
name: "InnovativeInstitutions",
component: InnovationInstitution,
meta: {
title: "学校详情"
},
}
]
......
src/views/innovationSubject/index.vue
浏览文件 @ 8b087b6d
......@@ -144,7 +144,6 @@
class="box2-main-item"
v-for="(item, index) in warningList"
:key="index"
@click="handleClickToDetail()"
>
<div
class="item-left"
......@@ -303,6 +302,7 @@
<div class="center-footer-elx-footer-text">研究型大学在综合排名中占据主导地位，特别是在论文和影响力指标上表现突出；科技企业在专利指数上领先，但在论文产出方面相对较弱；国家实验室和国防承包商在特定领域(如国家安全、能源)有显著优势，但在综合排名中相对靠后。</div>
<img src="./assets/images/icon-right.png" alt="" />
</div>
</div>
</div>
<div v-if="activeCate === '研究布局'">
......@@ -329,6 +329,7 @@
/>
</el-select>
</div>
</div>
</div>
<div class="center-footer-layout">
......@@ -339,7 +340,23 @@
<div class="title">{{ "研究领域布局情况" }}</div>
</div>
<div class="center-footer-layout-content">
<div class="center-footer-layout-content-item">
<EChart :option="pieOption" autoresize :style="{ height: '370px',width:'750px' }" />
<div class="center-footer-elx-footer">
<img src="./assets/images/ai.png" alt="" />
<div class="center-footer-elx-footer-text">人工智能与信息技术占据最大份额，反映了数字经济的核心地位;生物医学与健康是第二大研发领域，特别是在疫情后投入显著增加;能源与环境技术和先进制造与材料作为基础支撑领域保持稳定投入;国家安全与国防和航空航天作为战略领域保持专项投入。</div>
<img src="./assets/images/icon-right.png" alt="" />
</div>
</div>
<div style="width: 1px;height: 432px;background: rgba(234, 236, 238, 1);"></div>
<div class="center-footer-layout-content-item">
<EChart :option="raderOption" autoresize :style="{ height: '370px',width:'750px' }" />
<div class="center-footer-elx-footer">
<img src="./assets/images/ai.png" alt="" />
<div class="center-footer-elx-footer-text">研究型大学在基础科学领域(生物医学、材料科学)占据主导地位；科技企业高度集中于人工智能和信息技术领域；国家实验室在能源技术和国家安全相关领域有显著优势；国防承包商的研究高度集中于航空航天和国家安全领域。</div>
<img src="./assets/images/icon-right.png" alt="" />
</div>
</div>
</div>
</div>
</div>
......@@ -370,7 +387,7 @@
</div>
</div>
<div class="home-main-footer-main">
<div class="footer-main-item" v-for="item in universityList" :key="item.name">
<div class="footer-main-item" v-for="item in universityList" :key="item.name" @click="handleClickToDetail">
<img :src="item.pic" style="height: 32px; width: 32px;" />
<div class="item-text">{{ item.name }}</div>
<div class="item-text2">{{ item.adder }}</div>
......@@ -414,6 +431,8 @@ import { useContainerScroll } from "@/hooks/useScrollShow";
import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart";
import getCalendarHeatChart from "./utils/cleandarHeat";
import EChart from "@/components/Chart/index.vue";
import {pieOption, raderOption} from "./utils/charts";
import setChart from "@/utils/setChart";
......@@ -428,7 +447,6 @@ import News5 from "./assets/images/news5.png";
import Message1 from "./assets/images/iconp9.png";
import Message2 from "./assets/images/iconp8.png";
import Message3 from "./assets/images/iconp5.png";
import { Adder } from "d3";
// 返回首页
const handleBackHome = () => {
......@@ -504,8 +522,7 @@ const zhouList = ref([
// 点击查看详情
const handleClickToDetail = () => {
// router.push("/decreeLayout");
const route = router.resolve("/decreeLayout");
const route = router.resolve("/InnovativeInstitutions");
window.open(route.href, "_blank");
};
......@@ -616,44 +633,35 @@ const messageList = ref([
}
]);
// 政令发布频度
const chart1Data = ref({
dataX: ["2019", "2020", "2021", "2022", "2023", "2024", "2025"],
dataY: [219, 228, 129, 159, 152, 157, 78]
});
// 政令涉及领域
const chart2Data = ref([
const chart1Data = ref([
{
name: "集成电路",
value: 50
name: "人工智能与信息技术",
value: 27
},
{
name: "人工智能",
value: 46
name: "生物医学与健康",
value: 22
},
{
name: "通信网络",
value: 40
name: "能源与环境技术",
value: 18
},
{
name: "量子科技",
value: 32
name: "先进制造与材料",
value: 15
},
{
name: "能源",
value: 31
},
{
name: "生物科技",
value: 30
name: "国家安全与国防",
value: 12
},
{
name: "航空航天",
value: 24
value: 8
}
]);
const colorList = ["#69B1FF", "#FFC069", "#87E8DE", "#85A5FF", "#FF7875", "#B37FEB", "#4096FF"];
const colorList = ["#69B1FF", "#FFC069", "#87E8DE", "#85A5FF", "#FF7875", "#B37FEB"];
const innoItemList = [
{
......@@ -863,12 +871,9 @@ const handleToPosi = id => {
};
onMounted(async () => {
let chart1 = getBarChart(chart1Data.value.dataX, chart1Data.value.dataY);
setChart(chart1, "chart1");
let chart2 = getPieChart(chart2Data.value, colorList);
setChart(chart2, "chart2");
let chart1 = getPieChart(chart1Data.value, colorList);
setChart(chart1, "chart1");
});
</script>
......@@ -1886,9 +1891,38 @@ onMounted(async () => {
display: flex;
flex-direction: row;
.center-footer-layout-content-item{
height: 480px;
width: 800px;
display: flex;
flex-direction: column;
margin-left: 24px;
.center-footer-elx-footer{
width: 750px;
height: 88px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
gap: 10px;
padding: 6px 12px 6px 12px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
.center-footer-elx-footer-text{
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
width: 726px;
height: 76px;
}
}
}
}
}
......@@ -1967,6 +2001,7 @@ onMounted(async () => {
padding: 16px;
display: flex;
flex-direction: column;
cursor: pointer;
.item-text{
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......
src/views/innovationSubject/innovativeInstitutions/cooperationStatus/index.vue 0 → 100644
浏览文件 @ 8b087b6d
<template>
<div class="detail-wrap">
<div class="select-box">
<el-select v-model="value" placeholder="2025" style="width: 160px">
<el-option
v-for="item in timeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select v-model="value" placeholder="全部合作主体" style="width: 160px">
<el-option
v-for="item in zhutiList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select v-model="value" placeholder="全部合作类型" style="width: 160px">
<el-option
v-for="item in typeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<div class="cardList">
<div class="card" v-for="item in cooperationList">
<img :src="item.pic" alt="" class="cardpic"/>
<div class="cardtext">
<div class="cardtitle">{{ item.title }}</div>
<div class="cardzhuti">{{ item.zhuti }}</div>
<div class="cardbottom">
<div class="cardtype"
:class="{cardtype1: item.type==='论文合作',
cardtype2: item.type==='专利合作'
}"
>{{ item.type }}</div>
<div class="cardtime">{{ item.time }}</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="info">
{{ `共105篇新闻动态` }}
</div>
<div class="page-box">
<el-pagination background layout="prev, pager, next" :total="153" />
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import pic1 from "./assets/images/pic1.png";
import pic2 from "./assets/images/pic2.png";
import pic3 from "./assets/images/pic3.png";
import pic4 from "./assets/images/pic4.png";
import pic5 from "./assets/images/pic5.png";
import pic6 from "./assets/images/pic6.png";
import pic7 from "./assets/images/pic7.png";
import pic8 from "./assets/images/pic8.png";
import pic9 from "./assets/images/pic9.png";
const timeList = ref([
{
label: "2025",
value: "2025"
},
{
label: "2024",
value: "2024"
},
{
label: "2023",
value: "2023"
},
{
label: "2022",
value: "2022"
},
{
label: "2021",
value: "2021"
}
]);
const zhutiList = ref([
{
label: "全部合作主体",
value: "全部合作主体"
},
{
label: "清华大学",
value: "清华大学"
},
{
label: "复旦大学",
value: "复旦大学"
}
]);
const typeList = ref([
{
label: "全部合作类型",
value: "全部合作类型"
},
{
label: "论文合作",
value: "论文合作"
},
{
label: "项目合作",
value: "项目合作"
},
{
label: "专利合作",
value: "专利合作"
}
]);
const cooperationList = ref([
{
pic:pic1,
title:`"气候变化、碳中和与能源智联"(CNEST)研讨会`,
zhuti:"合作主体：清华大学",
type:"项目合作",
time:" 2025年11月19日"
},
{
pic:pic2,
title:`第三届"复旦-哈佛中美青年领袖对话"`,
zhuti:"合作主体：复旦大学",
type:"论文合作",
time:" 2025年11月19日"
},
{
pic:pic3,
title:`阿诺德植物园中国访问之旅`,
zhuti:"合作主体：北京国家植物园",
type:"专利合作",
time:" 2025年11月19日"
},
{
pic:pic4,
title:`哈佛大学与国家应对气候变化战略研究和国际合作中心气候政策合作`,
zhuti:"合作主体：国家应对气候变化战略研究和国际合作中心",
type:"论文合作",
time:" 2025年11月19日"
},
{
pic:pic5,
title:`北航 — 哈佛 Wood 实验室联合研制䲟鱼仿生吸盘机器人`,
zhuti:"合作主体：北京航空航天大学",
type:"专利合作",
time:" 2025年11月19日"
},
{
pic:pic6,
title:`山西古建院 — 哈佛中国艺术实验室合作`,
zhuti:"合作主体：山西省古建筑与彩塑壁画保护研究院",
type:"专利合作",
time:" 2025年11月19日"
},
{
pic:pic7,
title:`川大西部中国研究中心 — 哈佛费正清中国研究中心合作研究中心`,
zhuti:"合作主体：四川大学",
type:"项目合作",
time:" 2025年11月19日"
},
{
pic:pic8,
title:`哈佛中国健康伙伴计划（HCHP）多机构合作`,
zhuti:"合作主体：复旦大学、四川大学",
type:"论文合作",
time:" 2025年11月19日"
},
{
pic:pic9,
title:`哈佛中国项目与清华共建大石窝大气监测站`,
zhuti:"合作主体：清华大学",
type:"项目合作",
time:" 2025年11月19日"
}
]);
</script>
<style lang="scss" scoped>
.detail-wrap {
display: flex;
flex-direction: column;
gap: 16px;
padding-bottom: 30px;
.box {
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
}
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 18px;
width: 8px;
height: 20px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 14px;
margin-top: 14px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
text-align: center;
line-height: 28px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-info {
height: 22px;
position: absolute;
right: 84px;
top: 17px;
display: flex;
justify-content: flex-end;
.icon {
margin-top: 3px;
width: 14px;
height: 14px;
margin-right: 8px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
display: flex;
justify-content: flex-end;
gap: 8px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
.checkboxRight{
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.btnRightActive{
width: 80px;
height: 28px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 1px solid rgba(5, 95, 194, 1);
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: center;
}
.btnRight{
width: 80px;
height: 28px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: center;
}
}
}
}
.select-box{
display: flex;
justify-content: right;
gap: 8px;
}
.cardList{
display: flex;
flex-wrap: wrap;
gap: 16px;
width: 1600px;
.card{
width: 522px;
height: 180px;
border-radius: 4px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
display: flex;
gap: 16px;
.cardpic{
margin-top: 16px;
width: 117px;
height: 148px;
margin-left: 16px;
}
.cardtext{
display: flex;
margin-top: 16px;
flex-direction: column;
margin-right: 16px;
gap: 12px;
height: 148px;
.cardtitle{
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.cardzhuti{
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
.cardbottom{
display: flex;
justify-content: space-between;
height: auto;
margin-top: auto;
.cardtype{
/* 数据展示/Tag标签/亮色/蓝 */
height: 22px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 1px 8px 1px 8px;
box-sizing: border-box;
border: 1px solid rgba(186, 224, 255, 1);
border-radius: 4px;
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.cardtype1{
height: 22px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 1px 8px 1px 8px;
box-sizing: border-box;
border: 1px solid rgba(217, 247, 190, 1);
border-radius: 4px;
background: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.cardtype2{
height: 22px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 1px 8px 1px 8px;
box-sizing: border-box;
border: 1px solid rgba(255, 241, 184, 1);
border-radius: 4px;
background: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.cardtime{
color: rgba(170, 173, 177, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
}
}
}
}
.footer {
width: 1600px;
height: 72px;
display: flex;
justify-content: space-between;
align-items: center;
.info{
width: 109px;
height: 19px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0px;
text-align: left;
}
}
</style>
\ No newline at end of file
src/views/innovationSubject/innovativeInstitutions/index.vue 0 → 100644
浏览文件 @ 8b087b6d
<template>
<div class="wrap">
<div class="header">
<div class="header-left">
<img src="./assets/images/icon-harvard.png" alt="" />
</div>
<div class="header-right">
<div class="title">{{ institutionInfo.name }}</div>
<div class="en-title">{{ institutionInfo.enName }}</div>
<div class="desc">{{ institutionInfo.desc }}</div>
<div class="tag-box">
<div class="tag" v-for="(tag, index) in institutionInfo.tagList" :key="index">
{{ tag }}
</div>
</div>
</div>
<div class="header-btn">
<div class="icon">
<img src="@/assets/images/links-icon.png" alt="" />
</div>
<div class="text">{{ "查看官网" }}</div>
</div>
</div>
<div class="tab-box">
<div
class="tab"
@click="handleClickTab(item, index)"
:class="{ tabActive: item.active }"
v-for="(item, index) in tabList"
:key="index"
>
{{ item.name }}
</div>
</div>
<div class="main">
<overView v-if="activeTabName === '学校详情'"></overView>
<researchStrength v-else-if="activeTabName === '科研实力'"></researchStrength>
<cooperationStatus v-else-if="activeTabName === '合作情况'"></cooperationStatus>
<otherStatus v-else-if="activeTabName === '其他情况'"></otherStatus>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import overView from "./overView/index.vue";
import researchStrength from "./researchStrength/index.vue";
import cooperationStatus from "./cooperationStatus/index.vue";
import otherStatus from "./otherStatus/index.vue";
const institutionInfo = ref({
name: "哈佛大学",
enName: "Harvard University",
desc: "哈佛大学是 1636 年创立于美国马萨诸塞州剑桥市的顶尖私立研究型大学，为常春藤盟校成员、科研与学术影响力卓著。",
tagList: ["常春藤", "精英摇篮"]
});
const activeTabName = ref("学校详情");
const tabList = ref([
{
name: "学校详情",
active: true
},
{
name: "科研实力",
active: false
},
{
name: "合作情况",
active: false
},
{
name: "其他情况",
active: false
}
]);
const handleClickTab = (val, index) => {
tabList.value.forEach(item => {
item.active = false;
});
tabList.value[index].active = true;
activeTabName.value = val.name;
};
</script>
<style lang="scss" scoped>
.wrap {
width: 1920px;
height: 100%;
background-image: url("./assets/images/bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
padding-top: 16px;
.header {
width: 1600px;
height: 200px;
margin: 0 auto 16px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.8);
display: flex;
position: relative;
.header-left {
width: 160px;
height: 160px;
margin: 20px;
img {
width: 100%;
height: 100%;
}
}
.header-right {
margin-left: 24px;
.title {
margin-top: 26px;
height: 42px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 32px;
font-weight: 700;
line-height: 42px;
letter-spacing: 0px;
text-align: left;
}
.en-title {
margin-top: 8px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.desc {
margin-top: 6px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.tag-box {
margin-top: 14px;
display: flex;
gap: 8px;
.tag {
height: 24px;
padding: 0px 8px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0px;
}
}
}
.header-btn {
position: absolute;
top: 26px;
right: 30px;
width: 120px;
height: 36px;
border-radius: 6px;
background: rgba(5, 95, 194, 1);
display: flex;
gap: 3px;
justify-content: center;
align-items: center;
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 22px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.tab-box {
width: 1600px;
height: 64px;
margin: 0 auto;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: space-between;
align-items: center;
.tab {
width: 397px;
height: 54px;
box-sizing: border-box;
border: 2px solid transparent;
border-radius: 10px;
text-align: center;
line-height: 50px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 400;
letter-spacing: 0px;
cursor: pointer;
&:hover {
background: rgba(231, 243, 255, 1);
}
}
.tabActive {
border: 2px solid rgba(174, 214, 255, 1);
background: rgba(231, 243, 255, 1);
color: rgba(5, 95, 194, 1);
font-size: 24px;
font-weight: 700;
}
}
.main {
width: 1600px;
margin: 16px auto;
}
}
</style>
\ No newline at end of file
src/views/innovationSubject/innovativeInstitutions/otherStatus/index.vue 0 → 100644
浏览文件 @ 8b087b6d
<template>
<div class="detail-wrap">
<div class="top box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">重点实验室</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="labList">
<div class="labCard" v-for="item in labList">
<img :src="item.pic" alt="" class="labPic"/>
<div class="labTitle">{{ item.title }}</div>
<div class="labDes">{{ item.des }}</div>
<div class="labTags">
<div class="tag1" v-for="value in item.tags"
:class="{tag2: value === '化学',tag3: value === '医学',tag4: value === '天体物理'}">{{ value }}</div>
</div>
</div>
</div>
</div>
<div class="down box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">政策文件</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="policyList">
<div class="policyBox" v-for="item in policyList">
<img :src="pic7" alt="" />
<div class="polContent">
<div class="polTitle">{{ item.title }}</div>
<div class="polDes">{{ item.des }}</div>
</div>
</div>
</div>
<div class="footer">
<div class="info">
{{ `共105篇合作动态` }}
</div>
<div class="page-box">
<el-pagination background layout="prev, pager, next" :total="153" />
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import pic1 from "./assets/images/pic1.png";
import pic2 from "./assets/images/pic2.png";
import pic3 from "./assets/images/pic3.png";
import pic4 from "./assets/images/pic4.png";
import pic5 from "./assets/images/pic5.png";
import pic6 from "./assets/images/pic6.png";
import pic7 from "./assets/images/pic7.png";
const labList = ref([
{
pic:pic1,
title:`怀斯生物启发工程研究所`,
des:"成立于2009年，由汉斯约尔格·怀斯（Hansjörg Wyss）捐赠建立，聚焦仿生学与跨学科工程，推动医疗、机器人、材料等领域的突破。",
tags:["生物科技"]
},
{
pic:pic2,
title:`罗兰研究所`,
des:"原为独立研究机构，2002年并入哈佛，支持高风险、高回报的基础科学研究，尤其鼓励青年科学家。",
tags:["物理学","化学"]
},
{
pic:pic3,
title:`哈佛量子计划`,
des:"跨学院合作平台，整合物理、工程、计算机科学等资源，推动量子科学与技术发展。",
tags:["物理"]
},
{
pic:pic4,
title:`博德研究所`,
des:"全球顶尖基因组学与生物医学研究中心，推动精准医学与疾病机制研究。",
tags:["医学"]
},
{
pic:pic5,
title:`哈佛干细胞研究所`,
des:"成立于2004年，联合哈佛医学院、牙医学院、文理学院等，推动干细胞基础研究与临床转化。",
tags:["医学"]
},
{
pic:pic6,
title:`哈佛大学天体物理中心`,
des:"由哈佛大学与史密森尼学会于1973年联合成立，是全球规模最大、最活跃的天体物理研究机构之一。",
tags:["天体物理"]
}
]);
const policyList = ref([
{
title:"《哈佛大学权利与责任声明》",
des:"阐明学生在言论自由、学术自由、正当程序、尊重他人等方面的权利与义务。"
},
{
title:"《哈佛大学学术诚信政策》",
des:"定义抄袭、作弊、伪造等学术不端行为，并规定处理流程。"
},
{
title:"《哈佛大学反歧视与反骚扰政策》",
des:"禁止基于种族、性别、性取向、宗教、残疾等的歧视与骚扰，明确举报与调查机制。"
},
{
title:"《研究合规与人类受试者保护政策》",
des:"规范涉及人类受试者的研究（如医学、心理学、社会学实验），确保符合联邦法规（如Common Rule）。"
},
{
title:"《哈佛法学院学术政策手册》",
des:"详述J.D./LL.M./S.J.D.学位要求、课程规则、成绩制度、书面作业要求、出勤规定、荣誉毕业标准等。"
},
{
title:"《哈佛文理研究生院学生手册》",
des:"涵盖博士生资格考试、论文提交、助教职责、奖学金续期、学术进展评估等。"
}
]);
</script>
<style lang="scss" scoped>
.detail-wrap {
display: flex;
flex-direction: column;
gap: 16px;
padding-bottom: 30px;
.box {
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
}
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 18px;
width: 8px;
height: 20px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 14px;
margin-top: 14px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
text-align: center;
line-height: 28px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-info {
height: 22px;
position: absolute;
right: 84px;
top: 17px;
display: flex;
justify-content: flex-end;
.icon {
margin-top: 3px;
width: 14px;
height: 14px;
margin-right: 8px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
display: flex;
justify-content: flex-end;
gap: 8px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
.checkboxRight{
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.btnRightActive{
width: 80px;
height: 28px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 1px solid rgba(5, 95, 194, 1);
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: center;
}
.btnRight{
width: 80px;
height: 28px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: center;
}
}
}
}
.top{
width: 1600px;
height: 552px;
.labList{
display: flex;
gap: 16px;
margin-left: 24px;
flex-wrap: wrap;
.labCard{
width: 376px;
height: 228px;
display: flex;
flex-direction: column;
padding: 20px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
background: rgba(255, 255, 255, 0.65);
.labPic{
width: 32px;
height: 32px;
}
.labTitle{
margin-top: 12px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
.labDes{
margin-top: 4px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: justify;
}
.labTags{
display: flex;
gap: 8px;
height: auto;
margin-top: auto;
.tag1{
height: 22px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 1px 8px 1px 8px;
box-sizing: border-box;
border: 1px solid rgba(186, 224, 255, 1);
border-radius: 4px;
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.tag2{
height: 22px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 1px 8px 1px 8px;
box-sizing: border-box;
border: 1px solid rgba(255, 163, 158, 1);
border-radius: 4px;
background: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.tag3{
height: 22px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 1px 8px 1px 8px;
box-sizing: border-box;
border: 1px solid rgba(255, 241, 184, 1);
border-radius: 4px;
background: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.tag4{
height: 22px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 1px 8px 1px 8px;
box-sizing: border-box;
border: 1px solid rgba(217, 247, 190, 1);
border-radius: 4px;
background: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
}
}
}
}
.down{
width: 1600px;
height: 362px;
.policyList{
width: 1600px;
display: flex;
gap: 16px;
margin-left: 24px;
flex-wrap: wrap;
.policyBox{
width: 506px;
height: 109px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
background: rgba(255, 255, 255, 0.65);
display: flex;
gap: 16px;
padding: 16px;
.polPic{
width: 57px;
height: 77px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
background: url("./assets/images/pic7.png");
}
.polContent{
display: flex;
gap: 4px;
flex-direction: column;
.polTitle{
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
.polDes{
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: justify;
}
}
}
}
.footer {
height: 72px;
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 24px;
margin-right: 26px;
.info{
width: 109px;
height: 19px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0px;
text-align: left;
}
}
}
</style>
\ No newline at end of file
src/views/innovationSubject/innovativeInstitutions/overView/index.vue 0 → 100644
浏览文件 @ 8b087b6d
<template>
<div class="detail-wrap">
<div class="left box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">最新动态</div>
<div class="header-right">
<el-checkbox checked="true" label="只看涉华动态" />
<div class="btnRightActive">机构动态</div>
<div class="btnRight">主官动态</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="left-main">
<div class="left-main-item" v-for="(item, index) in curList" :key="index">
<div class="line" ></div>
<div class="time">
<div class="timetext">{{ item.time }}</div>
<div class="timetext">{{ item.date }}</div>
</div>
<div class="icon">
<img src="./assets/images/small-harvard.png" alt="" />
</div>
<div class="info">
<div class="header">
<div class="title">{{ item.title }}</div>
</div>
<div class="content">{{ item.content }}</div>
<div class="tag-box">
<div class="tag" v-for="(val, idx) in item.tagList" :key="idx">{{ val }}</div>
</div>
</div>
</div>
</div>
<div class="left-footer">
<div class="info">
{{ `共有153项动态` }}
</div>
<div class="page-box">
<el-pagination background layout="prev, pager, next" :total="153" />
</div>
</div>
</div>
<div class="rightcontent">
<div class="right box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">基本信息</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="right-main">
<div class="img-box">
<img :src="basicInfo.image" alt="" />
</div>
<div class="info-box">
<div class="info-item">
<div class="info-item-left">{{ "成立时间：" }}</div>
<div class="info-item-right">{{ basicInfo.shijian }}</div>
</div>
<div class="info-item">
<div class="info-item-left">{{ "总部地址：" }}</div>
<div class="info-item-right">{{ basicInfo.dizhi }}</div>
</div>
<div class="info-item">
<div class="info-item-left">{{ "组织性质：" }}</div>
<div class="info-item-right">{{ basicInfo.xingzhi }}</div>
</div>
<div class="info-item">
<div class="info-item-left">{{ "在校人数：" }}</div>
<div class="info-item-right">{{ basicInfo.stuNum }}</div>
</div>
<div class="info-item">
<div class="info-item-left">{{ "教职工数：" }}</div>
<div class="info-item-right">{{ basicInfo.teaNum }}</div>
</div>
<div class="info-item">
<div class="info-item-left">{{ "QS排名：" }}</div>
<div class="info-item-right">{{ basicInfo.rate }}</div>
</div>
<div class="info-item">
<div class="info-item-left">{{ "QS排名：" }}</div>
<div class="taglist">
<div class="tagdirec" v-for="item in basicInfo.tag">{{ item }}</div>
</div>
</div>
</div>
<div class="user-box">
<div class="user-header">
{{ "重点人物：" }}
</div>
<div class="user-content">
<div class="user-item" v-for="(item, index) in basicInfo.keyUser" :key="index">
<div class="user-item-left">
<img :src="item.img" alt="" />
</div>
<div class="user-item-right">
<div class="name">{{ item.name }}</div>
<div class="position">{{ item.position }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-Num">
<div class="numbox" v-for="item in awardsList">
<div class="iconrec"></div>
<div class="awards">{{ item.name }}</div>
<div class="awardsNum">{{ item.num }}</div>
</div>
</div>
<div class="right-history">
<div class="box-header">
<div class="header-left"></div>
<div class="title">历史时间轴</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="historytimeline">
<div class="timeline"></div>
<div class="historyList">
<div class="historyPoint" v-for="item in historyList">
<div class="historytime">{{ item.time }}</div>
<img src="./assets/images/timepoint.png" alt="" style="z-index: 2;" />
<div class="historyitem">{{ item.event }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import Img from "./assets/images/img.png";
import User1 from "./assets/images/user1.png";
import User2 from "./assets/images/user2.png";
import User3 from "./assets/images/user3.png";
import User4 from "./assets/images/user4.png";
const basicInfo = ref({
image: Img,
shijian: "1636年",
dizhi: "剑桥市，马萨诸塞州，美国",
xingzhi:"私立研究型大学",
stuNum:"约22,000人",
teaNum:"约2,400人",
rate:"#1",
tag:["癌症精准医疗","气候变化解决方案","人工智能伦理","可持续发展能源"],
keyUser: [
{
name: "艾伦·M·加伯",
img: User1,
position: "第30任校长"
},
{
name: "迈克尔·桑德尔",
img: User2,
position: "政府学教授"
},
{
name: "拉凯什·库拉纳",
img: User3,
position: "哈佛学院院长"
},
{
name: "乔治·丘奇",
img: User4,
position: "哈佛医学院遗传学教授"
}
]
});
const curList = ref([
{
title: "哈佛大学再遭电话钓鱼攻击致数据泄露",
time: "2025",
date: "10月10日",
content:
"一名未授权人员通过社会工程手段入侵校友数据库，泄露联系方式、捐赠记录等信息。这是该校2025年内第二次重大数据泄露。",
tagList: ["数据泄露"]
},
{
title: "哈佛医学院发生爆炸，警方认定系蓄意制造",
time: "2025 ",
date: "10月4日",
content:
"202年11月1日凌晨2:48，哈佛医学院一栋教学楼四层发生爆炸，无人伤亡。波士顿警方公布两名戴面罩嫌疑人监控画面，FBI介入调查。",
tagList: ["恐怖袭击"]
},
{
title: "常春藤盟校联合加强网络安全联盟",
time: "2025 ",
date: "9月29日",
content:
"哈佛与普林斯顿、耶鲁、哥伦比亚等校宣布成立“常春藤网络安全协作体”，应对日益频繁的高校网络攻击。哈佛与普林斯顿、耶鲁、哥伦比亚等校宣布成立“常春藤网络安全协作体”。",
tagList: ["生物科技"]
},
{
title: "哈佛校长克劳丁·盖伊因学术诚信争议辞职",
time: "2025 ",
date: "9月21日",
content:
"首位非裔女校长克劳丁·盖伊（Claudine Gay）因多篇论文涉嫌抄袭及国会听证会上言论引发舆论风暴，上任不足一年即辞职。",
tagList: ["先进制造"]
},
{
title: "艾伦·M·加伯接任临时校长",
time: "2025 ",
date: "9月15日",
content:
"原教务长艾伦·加伯（Alan M. Garber）出任哈佛第30任校长（临时），承诺恢复学术诚信与校园团结。原教务长艾伦·加伯（Alan M. Garber）出任哈佛第30任校长（临时），承诺恢复学术诚信与校园团结。",
tagList: ["集成电路"]
},
{
title: "联邦法官叫停特朗普政府“禁招国际学生”令",
time: "2025 ",
date: "9月11日",
content:
"2025年5月29日，马萨诸塞州联邦法院法官艾莉森·伯勒斯发布临时限制令，阻止国土安全部取消哈佛招收国际学生资质。法院认为政府行为缺乏程序正当性，可能对学校造成“不可逆损害”，允许哈佛继续接收持有效签证学生。",
tagList: ["集成电路"]
},
{
title: "特朗普政府要求哈佛30天内提交“改革证据”",
time: "2025 ",
date: "9月10日",
content:
"2025年5月底，美国司法部致函哈佛，给予30天期限说明为何不应撤销其国际招生资质。此前政府指责哈佛“营造反犹环境”并拒绝提供学生名单。此举被视为强硬立场软化后的策略调整。",
tagList: ["人工智能"]
},
{
title: "哈佛2025届毕业典礼成政治声援现场",
time: "2025 ",
date: "9月1日",
content:
"在阴云密布的天空下，约3万师生家长齐聚哈佛第374届毕业典礼。众多毕业生佩戴白花声援国际学生，校长艾伦·加伯致辞强调“哈佛属于世界”，全场起立鼓掌逾一分钟，场面感人。",
tagList: ["集成电路"]
},
{
title: "哈佛教授警告：国际博士生面临系统性驱逐风险",
time: "2025 ",
date: "8月25日",
content: "多位哈佛教授联名发声，指当前政策使90%以上国际博士生陷入签证不确定性，恐导致人才外流。",
tagList: ["能源", "先进制造"]
},
{
title: "巴以冲突激化哈佛校园对立",
time: "2025 ",
date: "8月19日",
content:
"2023年10月，亲巴勒斯坦与亲以色列学生团体在校园多次激烈对峙，部分活动演变为肢体冲突。校方因初期回应迟缓遭多方批评，后成立特别工作组调解矛盾。",
tagList: ["先进制造"]
},
{
title: "联邦法院裁定哈佛招生不构成种族歧视",
time: "2025 ",
date: "8月19日",
content:
"2022年8月，马萨诸塞州地方法院驳回“学生公平录取组织”诉讼，认为哈佛在本科招生中审慎考虑种族因素以促进多样性，符合现行法律框架。",
tagList: ["先进制造"]
},
{
title: "哈佛捐赠基金规模达509亿美元，全球第一",
time: "2025 ",
date: "8月19日",
content:
"2023财年报告显示，尽管市场波动，哈佛管理公司（HMC）仍维持全球最大高校捐赠基金地位，为教学、科研与助学提供坚实财务支撑。",
tagList: ["先进制造"]
}
]);
const awardsList = ref([
{
name:"诺贝尔奖",
num:161
},
{
name:"图灵奖",
num:18
},
{
name:"菲尔兹奖",
num:14
},
{
name:"美国院士",
num:273
}
]);
const historyList = ref([
{
time:"2023年",
event:"克劳丁·盖伊成为首位非裔女校长"
},
{
time:"1999年",
event:"拉德克利夫学院转型为“拉德克利夫高等研究院”"
},
{
time:"1977年",
event:"哈佛与拉德克利夫学院正式合并招生"
},
{
time:"1950年",
event:"逐步废除招生中的宗教、种族限制，学生群体多元化"
},
{
time:"1908年",
event:"哈佛商学院成立，首创MBA案例教学法"
},
{
time:"1869年",
event:"查尔斯·W·艾略特任校长40年，推行选修制、重建法学院、改革医学院、新建商学院等"
}
]);
</script>
<style lang="scss" scoped>
.detail-wrap {
display: flex;
gap: 16px;
padding-bottom: 30px;
.box {
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
}
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 18px;
width: 8px;
height: 20px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 14px;
margin-top: 14px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
text-align: center;
line-height: 28px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-info {
height: 22px;
position: absolute;
right: 84px;
top: 17px;
display: flex;
justify-content: flex-end;
.icon {
margin-top: 3px;
width: 14px;
height: 14px;
margin-right: 8px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
display: flex;
justify-content: flex-end;
gap: 8px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
.checkboxRight{
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.btnRightActive{
width: 80px;
height: 28px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 1px solid rgba(5, 95, 194, 1);
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: center;
}
.btnRight{
width: 80px;
height: 28px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: center;
}
}
}
.left {
width: 1064px;
height: 2083px;
.left-main {
border-top: 1px solid rgba(234, 236, 238, 1);
height: 1905px;
.left-main-item {
display: flex;
margin-top: 20px;
gap: 18px;
margin-left: 31px;
height: 130px;
position: relative;
.line {
background: #e6e7e8;
width: 2px;
height: 132px;
position: absolute;
top: 24px;
left: 106px;
}
.time {
display: flex;
flex-direction: column;
.timetext{
width: 79px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: right;
}
}
.icon {
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
}
}
.info {
width: 862px;
.header {
height: 26px;
display: flex;
justify-content: space-between;
.title {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
}
.content {
margin-top: 8px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.tag-box {
margin-top: 12px;
display: flex;
gap: 8px;
.tag {
height: 28px;
padding: 0 8px;
line-height: 28px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
}
}
}
}
.left-footer {
height: 75px;
border-top: 1px solid rgba(234, 236, 238, 1);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
}
.rightcontent{
display: flex;
flex-direction: column;
width: 520px;
gap: 16px;
.right {
width: 520px;
height: 874px;
.right-main {
width: 469px;
margin: 3px auto;
.img-box {
width: 469px;
height: 240px;
img {
width: 100%;
height: 100%;
}
}
.info-box {
margin-top: 26px;
padding-bottom: 50px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.info-item {
display: flex;
margin-top: 12px;
.info-item-left {
width: 88px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
.info-item-right {
width: 356px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.taglist{
width: 358px;
display: flex;
gap: 8px;
flex-wrap: wrap;
.tagdirec{
height: 24px;
justify-content: center;
align-items: center;
padding: 1px 8px 1px 8px;
box-sizing: border-box;
border: 1px solid rgba(186, 224, 255, 1);
border-radius: 4px;
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0px;
text-align: left;
}
}
}
}
.user-box {
padding-top: 19px;
.user-header {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
.user-content {
margin-top: 19px;
display: flex;
flex-wrap: wrap;
gap: 16px 73px;
justify-content: start;
.user-item {
height: 49px;
display: flex;
gap: 8px;
.user-item-left {
width: 48px;
height: 48px;
img {
width: 100%;
height: 100%;
}
}
.user-item-right {
.name {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.position {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
}
}
}
}
}
.right-Num{
display: flex;
flex-wrap: wrap;
width: 520px;
gap: 8px;
.numbox{
display: flex;
width: 256px;
height: 80px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
align-items: center;
.iconrec{
width: 4px;
height: 49px;
background: rgba(5, 95, 194, 1);
}
.awards{
margin-left: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
.awardsNum{
margin-left: 72px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 30px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: right;
}
}
}
.right-history{
width: 520px;
height: 1009px;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.historytimeline{
display: flex;
margin-left: 37px;
margin-top: 29px;
.timeline{
position: absolute;
width: 8px;
height: 910px;
background: url("./assets/images/arrow.png") repeat;
}
.historyList{
margin-left: -2px;
display: flex;
flex-direction: column;
margin-top: 42px;
gap: 56px;
.historyPoint{
width: 458px;
height: 89px;
gap: 6px;
.historytime{
margin-left: 24px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
.historyitem{
margin-left: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
}
}
}
}
}
}
::v-deep .el-checkbox__label{
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
padding-left: 3px;
padding-right: 10px;
}
</style>
\ No newline at end of file
src/views/innovationSubject/innovativeInstitutions/researchStrength/index.vue 0 → 100644
浏览文件 @ 8b087b6d
<template>
<div class="detail-wrap">
<div class="row">
<div class="statisticsItem box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">专利数量统计</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="statisticsChart">
<Echarts :option="barOption" height="100%"></Echarts>
</div>
<div class="statisticsAI">
<div class="AIbox">
<img src="./assets/images/icon-ai.png" />
<div class="AItext">哈佛大学近十年专利数量呈现稳定增长趋势，尤其在生物技术和人工智能领域表现突出，2025年达到历史新高。</div>
<img src="./assets/images/arrow.png" />
</div>
</div>
</div>
<div class="statisticsItem box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">论文数量统计</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="statisticsChart">
<Echarts :option="lineChart" height="100%"></Echarts>
</div>
<div class="statisticsAI">
<div class="AIbox">
<img src="./assets/images/icon-ai.png" />
<div class="AItext">哈佛大学近十年论文发表数量持续增长，高质量论文占比显著提升，特别是在医学和工程领域。</div>
<img src="./assets/images/arrow.png" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="statisticsItem box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">领域实力分布</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="statisticsChart">
<Echarts :option="raderOption1" height="100%"></Echarts>
</div>
<div class="statisticsAI">
<div class="AIbox">
<img src="./assets/images/icon-ai.png" />
<div class="AItext">哈佛大学在生物科技和人工智能领域实力最为突出，同时在量子科技和能源领域也有显著优势，体现了其跨学科研究能力。</div>
<img src="./assets/images/arrow.png" />
</div>
</div>
</div>
<div class="statisticsItem box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">大学经费增长情况</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="statisticsChart">
<Echarts :option="lineChart1" height="100%"></Echarts>
</div>
<div class="statisticsAI">
<div class="AIbox">
<img src="./assets/images/icon-ai.png" />
<div class="AItext">哈佛大学经费近十年保持稳定增长，研究经费占比逐年提高，2023年总经费突破50亿美元。</div>
<img src="./assets/images/arrow.png" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="statisticsItem box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">经费来源分布</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="statisticsChart">
<Echarts :option="pieOption1" height="100%"></Echarts>
</div>
<div class="statisticsAI">
<div class="AIbox">
<img src="./assets/images/icon-ai.png" />
<div class="AItext">哈佛大学经费主要来源于捐赠基金、政府拨款和企业合作项目，捐赠基金占比最大，体现了其强大的校友支持。</div>
<img src="./assets/images/arrow.png" />
</div>
</div>
</div>
<div class="statisticsItem box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">学院经费分配排序</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div style="color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: right;">（亿美元）</div>
<div class="statisticsChart" style="height: 298px; ">
<Echarts :option="horizontalBaroption" height="100%" ></Echarts>
</div>
<div class="statisticsAI">
<div class="AIbox">
<img src="./assets/images/icon-ai.png" />
<div class="AItext">医学院和工程学院获得的经费分配最多，体现了学校对医学和工程学科的重点投入，这两个学院也是科研成果最丰富的学院。</div>
<img src="./assets/images/arrow.png" />
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import Echarts from "@/components/Chart/index.vue";
import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalBaroption } from "../../utils/charts.js";
</script>
<style lang="scss" scoped>
.detail-wrap {
display: flex;
flex-direction: column;
gap: 16px;
padding-bottom: 30px;
.box {
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
}
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 18px;
width: 8px;
height: 20px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 14px;
margin-top: 14px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
text-align: center;
line-height: 28px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-info {
height: 22px;
position: absolute;
right: 84px;
top: 17px;
display: flex;
justify-content: flex-end;
.icon {
margin-top: 3px;
width: 14px;
height: 14px;
margin-right: 8px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
display: flex;
justify-content: flex-end;
gap: 8px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
.checkboxRight{
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.btnRightActive{
width: 80px;
height: 28px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 1px solid rgba(5, 95, 194, 1);
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: center;
}
.btnRight{
width: 80px;
height: 28px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: center;
}
}
}
.row{
display: flex;
width: 1600px;
height: 500px;
gap: 16px;
.statisticsItem{
width: 792px;
height: 500px;
.statisticsChart{
width: 736px;
height: 321px;
margin: 20px auto;
}
.statisticsAI{
margin: 0 auto;
width: 760px;
height: 64px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10;
padding: 6px 12px 6px 12px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
.AIbox{
width: 736px;
height: 52px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 13px;
padding: 2px 0px 2px 0px;
.AItext{
width: 667px;
height: 48px;
display: flex;
flex-direction: row;
align-items: center;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/innovationSubject/utils/charts.js 0 → 100644
浏览文件 @ 8b087b6d
import * as echarts from "echarts";
var data = [
{
name: "人工智能与信息技术",
value: 27
},
{
name: "生物医学与健康",
value: 22
},
{
name: "能源与环境技术",
value: 18
},
{
name: "先进制造与材料",
value: 15
},
{
name: "国家安全与国防",
value: 12
},
{
name: "航空航天",
value: 8
}
];
// 计算总和
function getTotal(data) {
return data.reduce((sum, item) => sum + item.value, 0);
};
export const pieOption = {
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
x: 'right',
y: 'center',
align: 'left',
left:'50%',
data: data.map(item => item.name),
textStyle: { // 图例字体样式
color: "rgba(59, 65, 75, 1)",
fontSize: 16
},
formatter: function(name) {
var total = getTotal(data);
var item = data.find(item => item.name === name);
var percentage = ((item.value / total) * 100).toFixed(2);
return `${name} ${percentage}%`;
}
},
series: [
{
name: '频度',
type: 'pie',
center: ['25%', '50%'],
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: [
{
name: "人工智能与信息技术",
value: 27,
itemStyle:{color: 'rgba(105, 177, 255, 1)'}
},
{
name: "生物医学与健康",
value: 22,
itemStyle:{color: 'rgba(255, 236, 61, 1)'}
},
{
name: "能源与环境技术",
value: 18,
itemStyle:{color: 'rgba(135, 232, 222, 1)'}
},
{
name: "先进制造与材料",
value: 15,
itemStyle:{color: 'rgba(133, 165, 255, 1)'}
},
{
name: "国家安全与国防",
value: 12,
itemStyle:{color: 'rgba(255, 120, 117, 1)'}
},
{
name: "航空航天",
value: 8,
itemStyle:{color: 'rgba(179, 127, 235, 1)'}
}
]
}
]
};
var data1 = [
{
name: "捐赠基金",
value: 27
},
{
name: "政府拨款",
value: 22
},
{
name: "企业合作",
value: 18
},
{
name: "学费收入",
value: 15
},
{
name: "其他来源",
value: 12
}
];
export const pieOption1 = {
legend: {
orient: 'vertical',
x: 'right',
y: 'center',
align: 'left',
left:'60%',
data: data1.map(item => item.name),
textStyle: { // 图例字体样式
color: "rgba(59, 65, 75, 1)",
fontSize: 16
},
formatter: function(name) {
var total = getTotal(data1);
var item = data1.find(item => item.name === name);
var percentage = ((item.value / total) * 100).toFixed(2);
return `${name} ${percentage}%`;
}
},
series: [
{
name: '频度',
type: 'pie',
center: ['30%', '50%'],
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: [
{
name: "捐赠基金",
value: 27,
itemStyle:{color: 'rgba(105, 177, 255, 1)'}
},
{
name: "政府拨款",
value: 22,
itemStyle:{color: 'rgba(255, 236, 61, 1)'}
},
{
name: "企业合作",
value: 18,
itemStyle:{color: 'rgba(135, 232, 222, 1)'}
},
{
name: "学费收入",
value: 15,
itemStyle:{color: 'rgba(133, 165, 255, 1)'}
},
{
name: "其他来源",
value: 12,
itemStyle:{color: 'rgba(255, 120, 117, 1)'}
}
]
}
]
};
export const raderOption = {
title: { text: '' },
legend: {
icon: 'circle',
orient: 'vertical', // 纵向排列
right: 50, // 贴右边
top: 'center', // 垂直居中
align: 'left', // 文字在图标左侧
textStyle: { // 图例字体样式
color: "rgba(59, 65, 75, 1)",
fontSize: "16px"
}
},
radar: {
radius: '60%', // 关键：缩小整个雷达
indicator: [
{ name: '能源领域', max: 6500 },
{ name: '集成电路', max: 16000 },
{ name: '人工智能', max: 30000 },
{ name: '通信网络', max: 38000 },
{ name: '量子科技', max: 52000 },
{ name: '生物科技', max: 25000 }
],
axisName: {
formatter: '{value}',
color: 'rgba(59, 65, 75, 1)',
fontSize: 16,
fontWeight: 700
}
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '研究型大学',
areaStyle: { color: 'rgba(5, 95, 194, 0.2)' }
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: '国家实验室',
areaStyle: { color: 'rgba(250, 140, 22, 0.2)' }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: '科技企业',
areaStyle: { color: 'rgba(179, 127, 235, 0.2)' }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: '国防承包商',
areaStyle: { color: 'rgba(33, 129, 57, 0.2)' }
}
]
}
]
};
export const raderOption1 = {
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
radar: {
radius: '60%', // 关键：缩小整个雷达
indicator: [
{ name: '能源领域', max: 6500 },
{ name: '集成电路', max: 16000 },
{ name: '人工智能', max: 30000 },
{ name: '通信网络', max: 38000 },
{ name: '量子科技', max: 52000 },
{ name: '生物科技', max: 25000 }
],
axisName: {
formatter: '{value}',
color: 'rgba(59, 65, 75, 1)',
fontSize: 16,
fontWeight: 700
}
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '哈佛大学',
areaStyle: { color: 'rgba(179, 127, 235, 0.1)' }
}
]
}
]
};
export const barOption = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
xAxis: [{
axisLine: {
lineStyle: {
width: 1,
color: "rgba(231, 243, 255, 1)"
}
},
axisTick:
{ show: false },
type: "category",
boundaryGap: [100, 100],
axisLabel: {
color: "rgba(95, 101, 108, 1)",
// fontSize: 22,
// fontWeight: 400
},
data: ["2016","2017","2018","2019", "2020", "2021", "2022", "2023", "2024", "2025"],
}],
yAxis: {
type: "value",
axisLine: {
lineStyle: {
type: "dashed"
}
},
axisLabel: {
color: "rgba(95, 101, 108, 1)",
// fontSize: 22,
// fontWeight: 400
},
splitNumber: 5,
splitLine: {
lineStyle: {
width: 1,
type: "dashed",
color: "rgba(231, 243, 255, 1)"
},
}
},
series: [
{
name: "专利数量",
data: [80, 90, 110, 130, 140, 160, 200,250,300,340],
type: "bar",
barWidth: 20,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(46, 165, 255, 1)" },
// { offset: 0.5, color: '#188df0' },
{ offset: 1, color: "rgba(46, 165, 255, 0)" }
])
// borderRadius: [6, 6, 0, 0]
},
label:{
show:false,
position:'top',
textStyle:{
fontSize:'20px',
fontWeight:400,
color:'rgba(255, 255, 255, 1)'
}
}
}
]
};
export const lineChart = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {
left: '2%',
top: '8%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: {
show: false
},
axisLine: {
show: false
},
data: ["2016","2017","2018","2019", "2020", "2021", "2022", "2023", "2024", "2025"],
},
yAxis: {
type: 'value',
splitLine: {
show: true, lineStyle: {
type: "dashed",
color: "#E7F3FF"
}
},
axisLine: {
show: false
},
},
color: ['rgba(255, 149, 77, 1)'],
series: [
{
data: [50,60,80,100,110,140,180,260,280,330],
type: 'line',
emphasis: {
focus: 'series'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 149, 77, 0.5)' // 起始颜色：深色
}, {
offset: 1,
color: 'rgba(255, 149, 77, 0)' // 结束颜色：浅色且透明度降低
}])
},
}
]
};
export const lineChart1 = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {
left: '2%',
top: '8%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: {
show: false
},
axisLine: {
show: false
},
data: ["2016","2017","2018","2019", "2020", "2021", "2022", "2023", "2024", "2025"],
},
yAxis: {
type: 'value',
splitLine: {
show: true, lineStyle: {
type: "dashed",
color: "#E7F3FF"
}
},
axisLine: {
show: false
},
},
color: ['rgba(33, 129, 57, 1)'],
series: [
{
data: [50,60,80,100,110,140,180,260,280,330],
type: 'line',
emphasis: {
focus: 'series'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(33, 129, 57, 0.5)' // 起始颜色：深色
}, {
offset: 1,
color: 'rgba(33, 129, 57, 0)' // 结束颜色：浅色且透明度降低
}])
},
}
]
};
const nameList = ["教育学院","文理学院","法学院","商学院","工程学院","医学院"];
const valueList = [21,21,25,79,95,109];
export const horizontalBaroption = {
grid: {
top: '0',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
color: ['#ce4f51', '#1778ff'],
xAxis: {
type: 'value',
splitLine: {
show: false
},
show: false
},
yAxis: {
type: 'category',
data: nameList,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList.map((item, index) => {
return {
value: item,
label: {
textStyle: {
color: index < 3 ? '#1778ff' : '#ce4f51'
}
}
};
}),
label: {
show: true,
position: [650, -2]
},
barWidth: 8,
itemStyle: {
color: function (params) {
if (params.dataIndex < 3) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(22, 119, 255, 0)'
},
{
offset: 1,
color: '#1778ff'
}
]);
} else {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(206, 79, 81, 0)'
},
{
offset: 1,
color: '#ce4f51'
}
]);
}
},
barBorderRadius: 4,
}
}]
};
\ No newline at end of file
src/views/innovationSubject/utils/piechart.js
浏览文件 @ 8b087b6d
const getPieChart = (data,colorList) => {
let option = {
color: colorList,
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: [110, 143],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 条 {d}%}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 24,
rich: {
time: {
fontSize: 16,
color: '#999'
}
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
show: false
},
data: data
}]
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
}
return option
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论