Skip to content

R
risk-monitor
提交 9c8a5f77 authored 作者: huhuiqing's avatar huhuiqing
浏览文件
操作

创新主体合作情况与其他情况接口对接，合作情况页面v2.0开发

上级 e0cf9513
隐藏空白字符变更
内嵌 并排
正在显示 包含 1499 行增加 和 460 行删除
src/api/innovationSubject/overview.js
浏览文件 @ 9c8a5f77
......@@ -193,3 +193,65 @@ export function getFundToList(params) {
})
}
//合作情况:与中国合作数量变化
export function getCooperateNumWithChina(params) {
return request({
method: 'GET',
url: `/api/innovateSubject/cooperateNumWithChina/${params.id}`,
params
})
}
// 合作情况:与中国合作类型变化
export function getCooperateTypeWithChina(params) {
return request({
method: 'GET',
url: `/api/innovateSubject/cooperateTypeWithChina/${params.year}/${params.id}`,
params
})
}
// 合作情况:与中国合作领域变化
export function getCooperateAreaWithChina(params) {
return request({
method: 'GET',
url: `/api/innovateSubject/cooperateAreaWithChina/${params.id}`,
params
})
}
//合作情况:与中国合作经费变化
export function getCooperateFundWithChina(params) {
return request({
method: 'GET',
url: `/api/innovateSubject/cooperateFundWithChina/${params.id}`,
params
})
}
//合作情况:与中国合作事例
export function getCooperateExampleWithChina(params) {
return request({
method: 'GET',
url: `/api/innovateSubject/cooperateExampleWithChina/${params.id}`,
params
})
}
//创新主体其他情况:重点实验室
export function getLabList(params) {
return request({
method: 'GET',
url: `/api/innovateSubject/labList/${params.id}`,
})
}
//创新主体其他情况:政策文件
export function getPolicyList(params) {
return request({
method: 'GET',
url: `/api/innovateSubject/policyList/${params.id}`,
params
})
}
\ No newline at end of file
src/views/innovationSubject/innovativeInstitutions/cooperationStatus/Timeline.vue 0 → 100644
浏览文件 @ 9c8a5f77
<template>
<div class="timeline-wrapper">
<button class="arrow left" :disabled="index <= 0" @click="index--">
{{ '<' }} </button>
<div class="timeline-box">
<div class="line"></div>
<div v-for="(item, i) in showList" :key="item[idKey]" class="node" :style="leftOffset(i)">
<div class="node" :style="leftOffset(i)">
<div class="time">
{{ item.cooperateDate }}
</div>
<!-- 圆环 -->
<div class="dot" :class="linePos(i, flip)"></div>
<!-- 卡片：放到线右侧 -->
<div class="card" :class="[cardPos(i, flip), 'right-side']" @click="$emit('click-card', item)">
<div class="tag">
{{ item.typeName }}
</div>
<div class="title">
{{ '合作主体：' + item.subjectlist.join('，') }}
<img class="item-header-icon" src="@/assets/images/icon/copy.png" style="cursor: pointer;" />
</div>
<div class="content">
{{ item.cooperateName }}
</div>
</div>
</div>
</div>
</div>
<button class="arrow right" :disabled="index >= total - 5" @click="index++">
{{ '>' }}
</button>
</div>
</template>
<script>
export default {
name: 'TimeLine',
props: {
data: { // 父组件传入的数组
type: Array,
required: true
},
textKey: { // 要显示的文本字段
type: String,
default: 'text'
},
idKey: { // 唯一标识字段
type: String,
default: 'id'
}
},
data() {
return { index: 0 };
},
computed: {
total() {
return this.data.length;
},
showList() {
return this.data.slice(this.index, this.index + 5);
},
flip() { return this.index % 2 === 1; }
},
methods: {
leftOffset(i) {
return { left: `${(i * 100) / 5}%` };
},
/* 上下层翻转（保留上次逻辑） */
cardPos(i, flip = false) {
// return (i % 2) ^ flip ? 'down' : 'up';
return 'down';
},
/* 线延伸方向 = 卡片出现方向 */
linePos(i, flip = false) {
return this.cardPos(i, flip); // up / down
}
}
};
</script>
<style scoped>
/* 样式与之前完全一致，不再重复 */
.timeline-wrapper {
display: flex;
align-items: center;
width: 100%;
position: relative;
padding: 0 40px;
}
.arrow {
position: absolute;
top: 45px;
/* 左右切换按钮 */
width: 24px;
height: 48px;
font-size: 24px;
border-color: #E7F3FF;
border: 0;
background: #E7F3FF;
cursor: pointer;
z-index: 10;
color: #3E84D1;
}
.arrow:disabled {
color: #c0c4cc;
cursor: not-allowed;
}
.left {
left: 0;
border-radius: 0px 4px 4px 0px;
}
.right {
right: 0;
border-radius: 4px 0px 0px 4px;
}
.timeline-box {
flex: 1;
height: 100%;
position: relative;
}
.line {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 6px;
background-image: url("@/assets/images/bg/timeLine-bg.jpg");
transform: translateY(-50%);
background-size: auto 100%;
}
.node {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
/* ===== 圆环基础 ===== */
.dot {
top: -30px;
width: 14px;
height: 14px;
border-radius: 50%;
border: 3px solid #409eff;
background: #fff;
position: relative;
margin: 0 auto;
z-index: 2;
}
/* ===== 延伸线 ===== */
.dot::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-1px);
/* 居中细线 */
width: 1px;
background: #409eff;
}
/* 向上节点：线往下伸 */
.dot.up::after {
bottom: 100%;
height: 165px;
/* 圆环底部 → 卡片顶 */
}
/* 向下节点：线往上伸 */
.dot.down::after {
top: 100%;
height: 165px;
}
.card {
position: absolute;
padding: 8px 12px;
text-align: left;
cursor: pointer;
font-size: 14px;
/* 容器 299 */
width: 273px;
height: 210px;
border-radius: 4px;
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: var(--主色/白色主色, rgba(255, 255, 255, 1));
}
.time {
width: 125px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: justify;
margin-bottom: 35px;
margin-left: 125px;
}
.title {
color: rgba(59, 65, 75, 1);
height: 85px;
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 18px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.content {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 18px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.card.up {
bottom: 20px;
}
.card.down {
top: 55px;
left: 115px;
}
</style>
\ No newline at end of file
src/views/innovationSubject/innovativeInstitutions/cooperationStatus/charts.js 0 → 100644
浏览文件 @ 9c8a5f77
import * as echarts from "echarts";
// 计算总和
function getTotal(data) {
return data.reduce((sum, item) => sum + item.value, 0);
};
export const pieOption = (data) => {
console.log(data, 'datadatadata')
// 颜色数组
const colors = [
'rgba(105, 177, 255, 1)',
'rgba(255, 236, 61, 1)',
'rgba(135, 232, 222, 1)',
'rgba(133, 165, 255, 1)',
'rgba(255, 120, 117, 1)',
'rgba(179, 127, 235, 1)',
'rgba(255, 187, 120, 1)',
'rgba(120, 255, 180, 1)',
'rgba(255, 150, 150, 1)'
];
const seriesData = data.names.map((name, index) => ({
name,
value: data.values[index],
itemStyle: { color: colors[index % colors.length] }
}));
const option = {
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
x: 'right',
y: 'center',
align: 'left',
left: '50%',
data: data.names,
textStyle: { // 图例字体样式
color: "rgba(59, 65, 75, 1)",
fontSize: 16
},
// formatter: function (name) {
// var total = data.total;
// 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: seriesData
}
]
};
return option
}
var data1 = [
{
name: "捐赠基金",
value: 27
},
{
name: "政府拨款",
value: 22
},
{
name: "企业合作",
value: 18
},
{
name: "学费收入",
value: 15
},
{
name: "其他来源",
value: 12
}
];
export const pieOption1 = (data) => {
// 提取部门名称和对应的金额
const colors = [
'rgba(105, 177, 255, 1)',
'rgba(255, 236, 61, 1)',
'rgba(135, 232, 222, 1)',
'rgba(133, 165, 255, 1)',
'rgba(255, 120, 117, 1)'
];
// 提取部门名称和对应的金额
const departmentNames = data.map(item => item.cooperateTypeName);
const amounts = data.map(item => item.amount);
// 计算总金额
const getTotal = (data) => {
return data.reduce((total, item) => total + item.amount, 0);
};
// 饼图配置
const option = {
legend: {
orient: 'vertical',
x: 'right',
y: 'center',
align: 'left',
left: '60%',
data: departmentNames,
textStyle: { // 图例字体样式
color: "rgba(59, 65, 75, 1)",
fontSize: 16
},
formatter: function (name) {
var total = getTotal(data);
var item = data.find(item => item.cooperateTypeName === name);
var percentage = ((item.amount / 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: data.map((item, index) => ({
name: item.cooperateTypeName,
value: item.amount,
itemStyle: { color: colors[index % colors.length] } // 使用颜色列表
}))
}
]
};
return option;
}
export const raderOption = (data) => {
// 提取所有可能的 areaName
const allAreaNames = new Set();
data.forEach(subject => {
subject.areaVoList.forEach(area => {
allAreaNames.add(area.areaName);
});
});
const indicatorNames = Array.from(allAreaNames);
// 定义雷达图的指标最大值（可以根据实际数据调整）
const indicatorMaxValues = {};
indicatorNames.forEach(name => {
indicatorMaxValues[name] = 5; // 假设每个指标的最大值为 5
});
// 生成雷达图的 indicator 配置
const radarIndicators = indicatorNames.map(name => ({
name,
max: indicatorMaxValues[name]
}));
// 为每个 subjectTypeName 生成雷达图数据
const radarSeriesData = data.map(subject => {
const values = indicatorNames.map(indicator => {
const area = subject.areaVoList.find(a => a.areaName === indicator);
return area ? area.amount : 0; // 如果存在该指标，取其 amount 值，否则为 0
});
return {
value: values,
name: subject.subjectTypeName,
areaStyle: { color: `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.2)` }
};
});
// 雷达图配置
const option = {
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: radarIndicators,
axisName: {
formatter: '{value}',
color: 'rgba(59, 65, 75, 1)',
fontSize: 16,
fontWeight: 700
}
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: radarSeriesData
}
]
};
return option;
}
export const barOption = (data) => {
// 提取年份和对应的专利数量
const years = data.map(item => item.year.toString());
const counts = data.map(item => item.countNum);
// 柱状图配置
const option = {
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: years, // 动态设置 xAxis 数据
}],
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: counts, // 动态设置 series 数据
type: "bar",
barWidth: 20,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(46, 165, 255, 1)" },
{ offset: 1, color: "rgba(46, 165, 255, 0)" }
])
},
label: {
show: false,
position: 'top',
textStyle: {
fontSize: '20px',
fontWeight: 400,
color: 'rgba(255, 255, 255, 1)'
}
}
}
]
};
return option;
}
export const lineChart = (data) => {
// 提取年份和对应的专利数量
const years = data.map(item => item.year.toString());
const counts = data.map(item => item.num);
// 折线图配置
const option = {
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: years, // 动态设置 xAxis 数据
},
yAxis: {
type: 'value',
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#E7F3FF"
}
},
axisLine: {
show: false
},
},
color: ['rgba(255, 149, 77, 1)'],
series: [
{
data: counts, // 动态设置 series 数据
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)' } // 结束颜色：浅色且透明度降低
])
},
}
]
};
return option;
}
export const lineChart1 = (data) => {
// 提取年份和对应的 fundAmount
const years = data.map(item => item.year.toString());
const fundAmounts = data.map(item => item.fund);
// 折线图配置
const option = {
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: years, // 动态设置 xAxis 数据
},
yAxis: {
type: 'value',
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#E7F3FF"
}
},
axisLine: {
show: false
},
},
color: ['rgba(33, 129, 57, 1)'],
series: [
{
data: fundAmounts, // 动态设置 series 数据
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)' } // 结束颜色：浅色且透明度降低
])
},
}
]
};
return option;
}
export const getColumnChart = (rawData) => {
// 1. 提取所有年份并排序
const years = [...new Set(rawData.map(item => item.year))].sort((a, b) => a - b);
const yearToIndex = {};
years.forEach((year, idx) => {
yearToIndex[year] = idx;
});
// 2. 收集所有 areaName（去重，保持首次出现顺序）
const areaNames = [];
const seen = new Set();
rawData.forEach(item => {
item.areaVoList.forEach(area => {
if (!seen.has(area.areaName)) {
seen.add(area.areaName);
areaNames.push(area.areaName);
}
});
});
// 3. 初始化每个 areaName 的数据数组（长度 = years.length，初始为 0）
const seriesDataMap = {};
areaNames.forEach(name => {
seriesDataMap[name] = Array(years.length).fill(0);
});
// 4. 填充数据
rawData.forEach(item => {
const idx = yearToIndex[item.year];
if (idx === undefined) return;
item.areaVoList.forEach(area => {
if (seriesDataMap.hasOwnProperty(area.areaName)) {
seriesDataMap[area.areaName][idx] = area.amount;
}
});
});
// 5. 定义颜色池
const colorPalette = [
'rgba(179, 127, 235, 1)', // 集成电路
'rgba(255, 120, 117, 1)', // 生物科技
'rgba(133, 165, 255, 1)', // 量子科技
'rgba(135, 232, 222, 1)', // 能源
'rgba(255, 192, 105, 1)', // 人工智能
'rgba(105, 177, 255, 1)' // 通信网络
];
// 6. 构建 series
const series = areaNames.map((name, index) => {
const isLast = index === areaNames.length - 1; // 最后一个显示标签
return {
name,
type: 'bar',
stack: 'total',
barWidth: 20,
itemStyle: {
borderRadius: 0,
color: colorPalette[index % colorPalette.length]
},
data: seriesDataMap[name],
// ...(isLast ? {
// label: {
// show: true,
// position: 'top',
// formatter: '{c}',
// fontSize: 16,
// fontWeight: 'bold',
// color: 'rgba(5, 95, 194, 1)'
// }
// } : {})
};
});
// 7. 返回 ECharts 配置
return {
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
legend: {
data: areaNames,
top: 0,
icon: 'circle',
textStyle: { color: '#757B82', fontSize: 15 }
},
grid: { top: '20%', right: '3%', bottom: '0%', left: '3%', containLabel: true },
xAxis: {
type: 'category',
data: years,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { color: '#666', fontSize: 12 }
},
yAxis: {
type: 'value',
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { color: '#666' },
splitLine: {
show: true,
lineStyle: { type: "dashed", color: "#E7F3FF" }
}
},
// graphic: [{
// type: 'text',
// right: 20,
// top: 40,
// style: { text: '单位：项', font: '14px sans-serif', fill: '#666' }
// }],
series
};
};
const nameList = ["教育学院", "文理学院", "法学院", "商学院", "工程学院", "医学院"];
const valueList = [21, 21, 25, 79, 95, 109];
export const horizontalBaroption = (data) => {
// 提取部门名称和对应的金额
const departmentNames = data.map(item => item.departmentName);
const amounts = data.map(item => item.amount);
// 水平柱状图配置
const option = {
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: departmentNames, // 动态设置 yAxis 数据
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: amounts.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,
}
}]
};
return option;
}
export const raderOption1 = (data) => {
// 提取指标名称和对应的值
const indicatorNames = data.map(item => item.areaName);
const indicatorValues = data.map(item => item.areaValue);
// 动态生成雷达图的 indicator 配置
const indicators = indicatorNames.map((name, index) => ({
name,
max: Math.max(...indicatorValues) * 1.2 // 设置最大值为所有值的最大值的1.2倍
}));
let radarData = {
color:
"rgba(215, 27, 56, 0.2)",
name: '',
value: indicatorValues
}
console.log(indicators, 'indicators', radarData, 'radarDataradarData')
// 雷达图配置
const option = {
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: indicators,
axisName: {
formatter: '{value}',
color: 'rgba(59, 65, 75, 1)',
fontSize: 16,
fontWeight: 700
}
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [radarData]
}
]
};
return option;
}
src/views/innovationSubject/innovativeInstitutions/cooperationStatus/index.vue
浏览文件 @ 9c8a5f77
<!--合作情况 v2.0-->
<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 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="lineChart(cooperateNumWithChinaist)" 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="pieOption1(cooperateTypeWithChina)" 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="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 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="getColumnChart(cooperateAreaWithChina)" 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(cooperateFundWithChina)" 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="footer">
<div class="info">
{{ `共105篇新闻动态` }}
<div class="row">
<div class="statisticsItem box" style="width: 1600px;height: 355px;">
<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="page-box">
<el-pagination background layout="prev, pager, next" :total="153" />
<div class="statisticsChart" style="width: 1600px;height: 355px;">
<Timeline :data="cooperateExampleWithChina" text-key="title" id-key="seq" style=" margin-top: 45px;" />
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import Echarts from "@/components/Chart/index.vue";
import { barOption, lineChart, getColumnChart, lineChart1, pieOption1, horizontalBaroption } from "./charts.js";
import {
getCooperateNumWithChina,
getCooperateTypeWithChina,
getCooperateAreaWithChina,
getCooperateFundWithChina,
getCooperateExampleWithChina,
} from "@/api/innovationSubject/overview.js";
import Timeline from "./Timeline.vue";
import { useRouter } from "vue-router";
const router = useRouter();
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 cooperateNumWithChinaist = ref([])
const handleGetCooperateNumWithChina = async () => {
try {
let params = {
id: router.currentRoute._value.params.id
}
const res = await getCooperateNumWithChina(params);
console.log("与中国合作数量变化", res);
if (res.code === 200 && res.data) {
cooperateNumWithChinaist.value = res.data
}
} catch (error) {
console.error("获取与中国合作数量变化error", error);
}
]);
const zhutiList = ref([
{
label: "全部合作主体",
value: "全部合作主体"
},
{
label: "清华大学",
value: "清华大学"
},
{
label: "复旦大学",
value: "复旦大学"
};
//与中国合作类型变化
const cooperateTypeWithChina = ref([])
const handleetCooperateTypeWithChina = async () => {
try {
let params = {
year: 2022,
id: router.currentRoute._value.params.id
}
const res = await getCooperateTypeWithChina(params);
console.log("与中国合作类型变化", res);
if (res.code === 200 && res.data) {
cooperateTypeWithChina.value = res.data
}
} catch (error) {
console.error("获取与与中国合作类型变化error", error);
}
]);
const typeList = ref([
{
label: "全部合作类型",
value: "全部合作类型"
},
{
label: "论文合作",
value: "论文合作"
},
{
label: "项目合作",
value: "项目合作"
},
{
label: "专利合作",
value: "专利合作"
};
//合作情况:与中国合作领域变化
const cooperateAreaWithChina = ref([])
const handleetCooperateAreaWithChina = async () => {
try {
let params = {
year: 2022,
id: router.currentRoute._value.params.id
}
const res = await getCooperateAreaWithChina(params);
console.log("与中国合作领域变化", res);
if (res.code === 200 && res.data) {
cooperateAreaWithChina.value = res.data
}
} catch (error) {
console.error("获取与与中国合作领域变化error", error);
}
]);
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日"
};
//合作情况:与中国合作经费变化
const cooperateFundWithChina = ref([])
const handleetCooperateFundWithChina = async () => {
try {
let params = {
year: 2022,
id: router.currentRoute._value.params.id
}
const res = await getCooperateFundWithChina(params);
console.log("与中国合作经费变化", res);
if (res.code === 200 && res.data) {
cooperateFundWithChina.value = res.data
}
} catch (error) {
console.error("获取与中国合作经费变化error", error);
}
};
]);
//合作情况:与中国合作事例
const cooperateExampleWithChina = ref([])
const handleetCooperateExampleWithChina = async () => {
try {
let params = {
year: 2022,
id: router.currentRoute._value.params.id
}
const res = await getCooperateExampleWithChina(params);
console.log("与中国合作事例", res);
if (res.code === 200 && res.data) {
cooperateExampleWithChina.value = res.data
}
} catch (error) {
console.error("获取与中国合作事例error", error);
}
};
onMounted(async () => {
handleGetCooperateNumWithChina()
handleetCooperateTypeWithChina()
handleetCooperateAreaWithChina()
handleetCooperateFundWithChina()
handleetCooperateExampleWithChina()
});
</script>
......@@ -202,16 +247,19 @@ const cooperationList = ref([
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;
......@@ -219,6 +267,7 @@ const cooperationList = ref([
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 14px;
margin-top: 14px;
......@@ -230,11 +279,13 @@ const cooperationList = ref([
letter-spacing: 0px;
text-align: left;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
......@@ -251,12 +302,14 @@ const cooperationList = ref([
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;
......@@ -264,16 +317,19 @@ const cooperationList = ref([
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);
......@@ -283,6 +339,7 @@ const cooperationList = ref([
line-height: 22px;
}
}
.header-right {
position: absolute;
top: 14px;
......@@ -290,15 +347,18 @@ const cooperationList = ref([
display: flex;
justify-content: flex-end;
gap: 8px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
.checkboxRight{
.checkboxRight {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
......@@ -307,7 +367,8 @@ const cooperationList = ref([
letter-spacing: 0px;
text-align: justify;
}
.btnRightActive{
.btnRightActive {
width: 80px;
height: 28px;
display: flex;
......@@ -326,7 +387,8 @@ const cooperationList = ref([
letter-spacing: 0px;
text-align: center;
}
.btnRight{
.btnRight {
width: 80px;
height: 28px;
display: flex;
......@@ -348,162 +410,70 @@ const cooperationList = ref([
}
}
}
.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);
.row {
display: flex;
width: 1600px;
height: 500px;
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;
.statisticsItem {
width: 792px;
height: 500px;
.statisticsChart {
width: 736px;
height: 321px;
margin: 20px auto;
}
.cardbottom{
.statisticsAI {
margin: 0 auto;
width: 760px;
height: 64px;
/* 自动布局 */
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;
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);
}
.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;
.AIbox {
}
.cardtype2{
height: 22px;
width: 736px;
height: 52px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
justify-content: flex-start;
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;
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;
}
}
.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/otherStatus/index.vue
浏览文件 @ 9c8a5f77
<!--其他情况-->
<template>
<div class="detail-wrap">
<div class="top box">
......@@ -15,12 +16,13 @@
</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>
<img :src="item.logoUrl" alt="" class="labPic" />
<div class="labTitle">{{ item.labName
}}</div>
<div class="labDes">{{ item.introduction }}</div>
<div class="labTags">
<div class="tag1" v-for="value in item.tags"
:class="{tag2: value === '化学',tag3: value === '医学',tag4: value === '天体物理'}">{{ value }}</div>
<div class="tag1" v-for="value in item.arealist"
:class="{ tag2: value === '人工智能', tag3: value === '生物科技', tag4: value === '天体物理' }">{{ value }}</div>
</div>
</div>
</div>
......@@ -40,29 +42,38 @@
</div>
<div class="policyList">
<div class="policyBox" v-for="item in policyList">
<img :src="pic7" alt="" />
<img :src="item.logoUrl" alt="" style="/* 矩形 211 */
width: 57px;
height: 77px;" />
<div class="polContent">
<div class="polTitle">{{ item.title }}</div>
<div class="polDes">{{ item.des }}</div>
<div class="polTitle">{{ item.name }}</div>
<div class="polDes">{{ item.introduction }}</div>
</div>
</div>
</div>
<div class="footer">
<div class="box1-main-footer">
<div class="info">
{{ `共105篇合作动态` }}
{{ `共有${total}条` }}
</div>
<div class="page-box">
<el-pagination background layout="prev, pager, next" :total="153" />
<el-pagination @current-change="handleCurrentChange" :pageSize="pageSize" :current-page="currentPage"
size="small" background layout="prev, pager, next" :total="total" />
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import {
getLabList,
getPolicyList
} from "@/api/innovationSubject/overview.js";
import { useRouter } from "vue-router";
const router = useRouter();
import pic1 from "./assets/images/pic1.png";
import pic2 from "./assets/images/pic2.png";
......@@ -72,76 +83,115 @@ 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:"涵盖博士生资格考试、论文提交、助教职责、奖学金续期、学术进展评估等。"
}
]);
// 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: "涵盖博士生资格考试、论文提交、助教职责、奖学金续期、学术进展评估等。"
// }
// ]);
//创新主体其他情况:重点实验室
const labList = ref([])
const handleGetLabList = async () => {
try {
let params = {
id: router.currentRoute._value.params.id
}
const res = await getLabList(params);
console.log("重点实验室", res);
if (res.code === 200 && res.data) {
labList.value = res.data
}
} catch (error) {
console.error("获取重点实验室error", error);
}
};
//创新主体其他情况:政策文件
const policyList = ref([])
const total = ref(0)
const currentPage = ref(1)
const handleGetPolicyList = async () => {
try {
let params = {
currentPage: currentPage.value,
pageSize: 6,
id: router.currentRoute._value.params.id
}
const res = await getPolicyList(params);
console.log("政策文件", res);
if (res.code === 200 && res.data) {
policyList.value = res.data.content
total.value = res.data.totalElements
}
} catch (error) {
console.error("获取政策文件error", error);
}
};
onMounted(async () => {
handleGetLabList()
handleGetPolicyList()
});
</script>
<style lang="scss" scoped>
......@@ -150,16 +200,19 @@ const policyList = ref([
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;
......@@ -167,6 +220,7 @@ const policyList = ref([
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 14px;
margin-top: 14px;
......@@ -178,11 +232,13 @@ const policyList = ref([
letter-spacing: 0px;
text-align: left;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
......@@ -199,12 +255,14 @@ const policyList = ref([
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;
......@@ -212,16 +270,19 @@ const policyList = ref([
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);
......@@ -231,6 +292,7 @@ const policyList = ref([
line-height: 22px;
}
}
.header-right {
position: absolute;
top: 14px;
......@@ -238,15 +300,18 @@ const policyList = ref([
display: flex;
justify-content: flex-end;
gap: 8px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
.checkboxRight{
.checkboxRight {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
......@@ -255,7 +320,8 @@ const policyList = ref([
letter-spacing: 0px;
text-align: justify;
}
.btnRightActive{
.btnRightActive {
width: 80px;
height: 28px;
display: flex;
......@@ -274,7 +340,8 @@ const policyList = ref([
letter-spacing: 0px;
text-align: center;
}
.btnRight{
.btnRight {
width: 80px;
height: 28px;
display: flex;
......@@ -297,15 +364,17 @@ const policyList = ref([
}
}
.top{
.top {
width: 1600px;
height: 552px;
.labList{
.labList {
display: flex;
gap: 16px;
margin-left: 24px;
flex-wrap: wrap;
.labCard{
.labCard {
width: 376px;
height: 228px;
display: flex;
......@@ -315,11 +384,13 @@ const policyList = ref([
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
background: rgba(255, 255, 255, 0.65);
.labPic{
.labPic {
width: 32px;
height: 32px;
}
.labTitle{
.labTitle {
margin-top: 12px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......@@ -329,7 +400,8 @@ const policyList = ref([
letter-spacing: 1px;
text-align: left;
}
.labDes{
.labDes {
margin-top: 4px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
......@@ -339,13 +411,15 @@ const policyList = ref([
letter-spacing: 0px;
text-align: justify;
}
.labTags{
.labTags {
display: flex;
gap: 8px;
height: auto;
margin-top: auto;
.tag1{
height: 22px;
.tag1 {
height: 22px;
display: flex;
flex-direction: row;
justify-content: center;
......@@ -361,8 +435,9 @@ const policyList = ref([
font-weight: 400;
line-height: 20px;
}
.tag2{
height: 22px;
.tag2 {
height: 22px;
display: flex;
flex-direction: row;
justify-content: center;
......@@ -378,8 +453,9 @@ const policyList = ref([
font-weight: 400;
line-height: 20px;
}
.tag3{
height: 22px;
.tag3 {
height: 22px;
display: flex;
flex-direction: row;
justify-content: center;
......@@ -395,8 +471,9 @@ const policyList = ref([
font-weight: 400;
line-height: 20px;
}
.tag4{
height: 22px;
.tag4 {
height: 22px;
display: flex;
flex-direction: row;
justify-content: center;
......@@ -418,16 +495,18 @@ const policyList = ref([
}
.down{
.down {
width: 1600px;
height: 362px;
.policyList{
.policyList {
width: 1600px;
display: flex;
gap: 16px;
margin-left: 24px;
flex-wrap: wrap;
.policyBox{
.policyBox {
width: 506px;
height: 109px;
box-sizing: border-box;
......@@ -437,67 +516,59 @@ const policyList = ref([
display: flex;
gap: 16px;
padding: 16px;
.polPic{
.polPic {
width: 57px;
height: 77px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
background: url("./assets/images/pic7.png");
}
.polContent{
.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;
}
.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;
.box1-main-footer {
margin: 30px 22px 0 22px;
height: 22px;
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;
.info {
height: 22px;
line-height: 22px;
color: rgb(132, 136, 142);
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
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论