Skip to content

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

创新主体部分接口对接

上级 6a7cb84b
显示空白字符变更
内嵌 并排
正在显示 包含 562 行增加 和 283 行删除
src/api/innovationSubject/overview.js 0 → 100644
浏览文件 @ c58cfb01
// 智库概览信息
import request from "@/api/request.js";
//创新主体主页:统计不同创新主体类型对应的主体数量
export function getCountSubjectType() {
return request({
method: 'GET',
url: `/api/innovateSubject/countSubjectType`,
})
}
// 创新主体主页:统计不同地理对应的主体数量
export function getCountGeography() {
return request({
method: 'GET',
url: `/api/innovateSubject/countGeography`,
})
}
//创新主体主页:类型列表
export function getSubjectTypeList() {
return request({
method: 'GET',
url: `/api/innovateSubject/subjectTypeList`,
})
}
//创新主体主页:通过类型分页查询创新主体列表
export function findListBySubjectTypeId(params) {
return request({
method: 'GET',
url: `/api/innovateSubject/findListBySubjectTypeId`,
params
})
}
//创新主体主页:综合排名
export function getOverallRanking(params) {
return request({
method: 'GET',
url: `/api/innovateSubject/overallRanking`,
params
})
}
\ No newline at end of file
src/views/innovationSubject/index.vue
浏览文件 @ c58cfb01
<!--创新主体主页-->
<template> <template>
<div class="home-wrapper"> <div class="home-wrapper">
<div class="search-header" v-show="isShow"> <div class="search-header" v-show="isShow">
...@@ -122,29 +123,20 @@ ...@@ -122,29 +123,20 @@
<div class="box1-main"> <div class="box1-main">
<div class="box1-main-left"> <div class="box1-main-left">
<div class="box1-main-left-top"> <div class="box1-main-left-top">
<div <div class="box1-main-left-top-item" v-for="item in distributionList" :key="item.name"
class="box1-main-left-top-item" :style="{ backgroundColor: item.color, color: item.textcolor }">
v-for="item in distributionList"
:key="item.name"
:style="{ backgroundColor: item.color, color: item.textcolor }"
>
<div class="box1-main-left-top-item-text1">{{ item.name }}</div> <div class="box1-main-left-top-item-text1">{{ item.name }}</div>
<div class="box1-main-left-top-item-text2">{{ item.num }}</div> <div class="box1-main-left-top-item-text2">{{ item.num }}</div>
</div> </div>
</div> </div>
<div class="box1-main-left-down"> <div class="box1-main-left-down">
<div <div class="box1-main-left-down-item" v-for="(item, index) in zhouList" :key="index" :style="{
class="box1-main-left-down-item"
v-for="item in zhouList"
:key="item.index"
:style="{
backgroundColor: backgroundColor:
item.index % 2 !== 0 ? 'rgba(248, 249, 250, 1)' : 'rgba(255, 255, 255, 1)' index % 2 !== 0 ? 'rgba(248, 249, 250, 1)' : 'rgba(255, 255, 255, 1)'
}" }">
> <div class="box1-main-left-down-item-index">{{ index + 1 }}</div>
<div class="box1-main-left-down-item-index">{{ item.index }}</div> <div class="box1-main-left-down-item-text">{{ item.countName }}</div>
<div class="box1-main-left-down-item-text">{{ item.name }}</div> <div class="box1-main-left-down-item-num">{{ item.countNum }}</div>
<div class="box1-main-left-down-item-num">{{ item.num }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -164,18 +156,11 @@ ...@@ -164,18 +156,11 @@
</div> </div>
</div> </div>
<div class="box2-main"> <div class="box2-main">
<div <div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
class="box2-main-item" <div class="item-left" :class="{
v-for="(item, index) in warningList"
:key="index"
>
<div
class="item-left"
:class="{
itemLeftStatus1: item.status === '一般风险', itemLeftStatus1: item.status === '一般风险',
itemLeftStatus2: item.status === '重大风险' itemLeftStatus2: item.status === '重大风险'
}" }">
>
{{ item.status }} {{ item.status }}
</div> </div>
<div class="item-right"> <div class="item-right">
...@@ -249,24 +234,16 @@ ...@@ -249,24 +234,16 @@
<div class="center-footer"> <div class="center-footer">
<div class="home-main-footer-header"> <div class="home-main-footer-header">
<div class="btn-box"> <div class="btn-box">
<div <div class="btn" :class="{ btnActive: activeCate === cate }" v-for="(cate, index) in categoryList"
class="btn" :key="index" @click="handleClickCate(cate)">
:class="{ btnActive: activeCate === cate }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
{{ cate }} {{ cate }}
</div> </div>
</div> </div>
<div class="select-box"> <div class="select-box">
<el-select v-model="releaseTime" placeholder="2022" style="width: 120px"> <el-select v-model="releaseTime" placeholder="2022" style="width: 120px"
<el-option @change="handleGetOverallRanking">
v-for="item in releaseTimeList" <el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label"
:key="item.value" :value="item.value" />
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
</div> </div>
</div> </div>
...@@ -279,44 +256,37 @@ ...@@ -279,44 +256,37 @@
</div> </div>
<div class="title">{{ "创新主体综合排名" }}</div> <div class="title">{{ "创新主体综合排名" }}</div>
</div> </div>
<el-table <el-table :data="innoItemList.datalist" class="sanction-table" stripe empty-text="暂无数据"
:data="innoItemList" header-row-class-name="table-header" row-class-name="table-row">
class="sanction-table" <el-table-column :prop="item.columnName" :label="item.columnLabel"
stripe v-for="item in innoItemList.headerlist"><template #default="scope">
empty-text="暂无数据" {{ scope.row.columnValues[item.columnName] }}
header-row-class-name="table-header" </template> </el-table-column>
row-class-name="table-row" <!-- <el-table-column prop="name" label="机构名称" width="200"> </el-table-column>
>
<el-table-column prop="rank" label="排名" width="80"> </el-table-column>
<el-table-column prop="name" label="机构名称" width="200"> </el-table-column>
<el-table-column label="类型" width="200"> <el-table-column label="类型" width="200">
<template #default="scope"> <template #default="scope">
<div style="display: flex; align-items: center; gap: 5px"> <div style="display: flex; align-items: center; gap: 5px">
<div <div v-for="tag in scopetype" :key="tag" :class="{
v-for="tag in scope.row.type"
:key="tag"
:class="{
tag1: tag === '研究型大学', tag1: tag === '研究型大学',
tag2: tag === '国家实验室', tag2: tag === '国家实验室',
tag3: tag === '科技企业', tag3: tag === '科技企业',
tag4: tag === '国防承包商' tag4: tag === '国防承包商'
}" }">
>
{{ tag }} {{ tag }}
</div> </div>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="research" label="研发投入指数" width="200"> </el-table-column> <el-table-column prop="research" label="研发投入指数" width="200"> </el-table-column>
<el-table-column prop="people" label="人员投入指数" width="200"> </el-table-column> <el-table-column prop="people" label="人员投入指数" width="200"> </el-table-column>
<el-table-column prop="patent" label="专利产出指数" width="200"> </el-table-column> <el-table-column prop="patent" label="专利产出指数" width="200"> </el-table-column>
<el-table-column prop="paper" label="论文产出指数" width="200"> </el-table-column> <el-table-column prop="paper" label="论文产出指数" width="200"> </el-table-column>
<el-table-column prop="score" label="综合得分" width="150"> </el-table-column> <el-table-column prop="score" label="综合得分" width="150"> </el-table-column>
<el-table-column prop="trend" label="趋势" width="100"> <el-table-column prop="trend" label="趋势" width="100">
<template #default="scope"> <template #default="scope">
<div :class="{ up: scope.row.trend === 'up', down: scope.row.trend === 'down' }"></div> <div :class="{ up: scope.row.trend === 'up', down: scope.row.trend === 'down' }"></div>
</template> </template>
</el-table-column> </el-table-column> -->
</el-table> </el-table>
<div class="center-footer-elx-footer"> <div class="center-footer-elx-footer">
<img src="./assets/images/ai.png" alt="" /> <img src="./assets/images/ai.png" alt="" />
...@@ -332,24 +302,15 @@ ...@@ -332,24 +302,15 @@
<div class="center-footer"> <div class="center-footer">
<div class="home-main-footer-header"> <div class="home-main-footer-header">
<div class="btn-box"> <div class="btn-box">
<div <div class="btn" :class="{ btnActive: activeCate === cate }" v-for="(cate, index) in categoryList"
class="btn" :key="index" @click="handleClickCate(cate)">
:class="{ btnActive: activeCate === cate }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
{{ cate }} {{ cate }}
</div> </div>
</div> </div>
<div class="select-box"> <div class="select-box">
<el-select v-model="releaseTime" placeholder="2022" style="width: 120px"> <el-select v-model="releaseTime" placeholder="2022" style="width: 120px">
<el-option <el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label"
v-for="item in releaseTimeList" :value="item.value" />
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
</div> </div>
</div> </div>
...@@ -363,19 +324,23 @@ ...@@ -363,19 +324,23 @@
</div> </div>
<div class="center-footer-layout-content"> <div class="center-footer-layout-content">
<div class="center-footer-layout-content-item"> <div class="center-footer-layout-content-item">
<EChart :option="pieOption" autoresize :style="{ height: '370px',width:'750px' }" /> <EChart :option="pieOption" autoresize :style="{ height: '370px', width: '750px' }" />
<div class="center-footer-elx-footer"> <div class="center-footer-elx-footer">
<img src="./assets/images/ai.png" alt="" /> <img src="./assets/images/ai.png" alt="" />
<div class="center-footer-elx-footer-text">人工智能与信息技术占据最大份额，反映了数字经济的核心地位;生物医学与健康是第二大研发领域，特别是在疫情后投入显著增加;能源与环境技术和先进制造与材料作为基础支撑领域保持稳定投入;国家安全与国防和航空航天作为战略领域保持专项投入。</div> <div class="center-footer-elx-footer-text">
人工智能与信息技术占据最大份额，反映了数字经济的核心地位;生物医学与健康是第二大研发领域，特别是在疫情后投入显著增加;能源与环境技术和先进制造与材料作为基础支撑领域保持稳定投入;国家安全与国防和航空航天作为战略领域保持专项投入。
</div>
<img src="./assets/images/icon-right.png" alt="" /> <img src="./assets/images/icon-right.png" alt="" />
</div> </div>
</div> </div>
<div style="width: 1px;height: 432px;background: rgba(234, 236, 238, 1);"></div> <div style="width: 1px;height: 432px;background: rgba(234, 236, 238, 1);"></div>
<div class="center-footer-layout-content-item"> <div class="center-footer-layout-content-item">
<EChart :option="raderOption" autoresize :style="{ height: '370px',width:'750px' }" /> <EChart :option="raderOption" autoresize :style="{ height: '370px', width: '750px' }" />
<div class="center-footer-elx-footer"> <div class="center-footer-elx-footer">
<img src="./assets/images/ai.png" alt="" /> <img src="./assets/images/ai.png" alt="" />
<div class="center-footer-elx-footer-text">研究型大学在基础科学领域(生物医学、材料科学)占据主导地位；科技企业高度集中于人工智能和信息技术领域；国家实验室在能源技术和国家安全相关领域有显著优势；国防承包商的研究高度集中于航空航天和国家安全领域。</div> <div class="center-footer-elx-footer-text">
研究型大学在基础科学领域(生物医学、材料科学)占据主导地位；科技企业高度集中于人工智能和信息技术领域；国家实验室在能源技术和国家安全相关领域有显著优势；国防承包商的研究高度集中于航空航天和国家安全领域。
</div>
<img src="./assets/images/icon-right.png" alt="" /> <img src="./assets/images/icon-right.png" alt="" />
</div> </div>
</div> </div>
...@@ -387,14 +352,9 @@ ...@@ -387,14 +352,9 @@
<DivideHeader id="position4" class="divide4" :titleText="'资源库'"></DivideHeader> <DivideHeader id="position4" class="divide4" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header"> <div class="home-main-footer-header">
<div class="btn-box"> <div class="btn-box">
<div <div class="btn" :class="{ btnActive: activeCate1 === cate.id }" v-for="(cate, index) in categoryList1"
class="btn" :key="index" @click="handleClickCate1(cate.id)">
:class="{ btnActive: activeCate1 === cate }" {{ cate.typeName }}
v-for="(cate, index) in categoryList1"
:key="index"
@click="handleClickCate1(cate)"
>
{{ cate }}
</div> </div>
</div> </div>
<div class="select-box"> <div class="select-box">
...@@ -404,40 +364,30 @@ ...@@ -404,40 +364,30 @@
</div> </div>
</div> </div>
<div class="home-main-footer-main"> <div class="home-main-footer-main">
<div style=" width: 1600px;">
<div class="footer-main-item" v-for="item in universityList" :key="item.name" @click="handleClickToDetail"> <div class="footer-main-item" v-for="item in universityList" :key="item.name" @click="handleClickToDetail">
<img :src="item.pic" style="height: 32px; width: 32px;" /> <img :src="item.logoUrl" style="height: 32px; width: 32px;" />
<div class="item-text">{{ item.name }}</div> <div class="item-text">{{ item.orgName }}</div>
<div class="item-text2">{{ item.adder }}</div> <div class="item-text2">{{ item.address }}</div>
<div class="item-text2">{{ item.area }}</div> <div class="item-text2">{{ item.businessScope }}</div>
<div class="taglist"> <div class="taglist">
<div <div class="tag1" v-for="(val, idx) in item.taglist" :key="idx" :class="{
class="tag1" tag2: val === '人工智能',
style="width: 82px" tag3: val === '新一代通信技术',
v-for="(val, idx) in item.tag"
:key="idx"
:class="{
tag2: val === '新能源',
tag3: val === '集成电路',
tag4: val === '生物科技', tag4: val === '生物科技',
tag5: val === '量子科技' tag5: val === '量子科技'
}" }">
>
{{ val }} {{ val }}
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="footer-box"> <div class="footer-box">
<div class="footer-right"> <div class="footer-right">
<el-pagination <el-pagination @current-change="handleCurrentChange" :pageSize="12" :current-page="currentPage" background
@current-change="handleCurrentChange" layout="prev, pager, next" :total="total" />
:pageSize="12"
:current-page="currentPage"
background
layout="prev, pager, next"
:total="100"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -457,8 +407,14 @@ import getBarChart from "./utils/barChart"; ...@@ -457,8 +407,14 @@ import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart"; import getPieChart from "./utils/piechart";
import getCalendarHeatChart from "./utils/cleandarHeat"; import getCalendarHeatChart from "./utils/cleandarHeat";
import EChart from "@/components/Chart/index.vue"; import EChart from "@/components/Chart/index.vue";
import {pieOption, raderOption} from "./utils/charts"; import { pieOption, raderOption } from "./utils/charts";
import {
getCountGeography,
getCountSubjectType,
getSubjectTypeList,
findListBySubjectTypeId,
getOverallRanking
} from "@/api/innovationSubject/overview.js";
import setChart from "@/utils/setChart"; import setChart from "@/utils/setChart";
import News1 from "./assets/images/news1.png"; import News1 from "./assets/images/news1.png";
...@@ -481,12 +437,15 @@ const handleBackHome = () => { ...@@ -481,12 +437,15 @@ const handleBackHome = () => {
const containerRef = ref(null); const containerRef = ref(null);
const { isShow } = useContainerScroll(containerRef); const { isShow } = useContainerScroll(containerRef);
const currentPage = ref(1); const currentPage = ref(1);
const pageSize = ref(10); const total = ref(0)
const pageSize = ref(16);
// 处理页码改变事件 // 处理页码改变事件
const handleCurrentChange = page => { const handleCurrentChange = page => {
currentPage.value = page; currentPage.value = page;
handleFindListBySubjectTypeId()
}; };
// 地理分布 // 地理分布
const distributionList = ref([ const distributionList = ref([
{ {
...@@ -514,35 +473,87 @@ const distributionList = ref([ ...@@ -514,35 +473,87 @@ const distributionList = ref([
textcolor: "rgba(114, 46, 209, 1)" textcolor: "rgba(114, 46, 209, 1)"
} }
]); ]);
const distributionColorList = ref([
const zhouList = ref([
{
index: 1,
name: "马萨诸塞州",
num: "85"
},
{ {
index: 2,
name: "加利福尼亚州", color: "rgba(231, 243, 255, 1)",
num: "67" textcolor: "rgba(22, 119, 255, 1)"
}, },
{ {
index: 3, color: "rgba(255, 247, 230, 1)",
name: "佐治亚州", textcolor: "rgba(255, 169, 64, 1)"
num: "49"
}, },
{ {
index: 4, color: "rgba(230, 255, 251, 1)",
name: "华盛顿州", textcolor: "rgba(19, 168, 168, 1)"
num: "31"
}, },
{ {
index: 5, color: "rgba(249, 240, 255, 1)",
name: "伊利诺伊州", textcolor: "rgba(114, 46, 209, 1)"
num: "29"
} }
])
//统计不同创新主体类型对应的主体数量
const handleGetCountSubjectType = async () => {
try {
const res = await getCountSubjectType();
console.log("统计不同创新主体类型对应的主体数量", res);
if (res.code === 200 && res.data) {
distributionList.value = res.data
let data = []
res.data.map((item, index) => {
data.push({
name: item.countName,
num: item.countNum,
color: distributionColorList.value[index].color,
textcolor: distributionColorList.value[index].textcolor,
})
})
distributionList.value = data
}
} catch (error) {
console.error("获取统计不同创新主体类型对应的主体数量error", error);
}
};
const zhouList = ref([
// {
// index: 1,
// name: "马萨诸塞州",
// num: "85"
// },
// {
// index: 2,
// name: "加利福尼亚州",
// num: "67"
// },
// {
// index: 3,
// name: "佐治亚州",
// num: "49"
// },
// {
// index: 4,
// name: "华盛顿州",
// num: "31"
// },
// {
// index: 5,
// name: "伊利诺伊州",
// num: "29"
// }
]); ]);
//统计不同地理对应的主体数量
const handleGetCountGeography = async () => {
try {
const res = await getCountGeography();
console.log("统计不同地理对应的主体数量", res);
if (res.code === 200 && res.data) {
zhouList.value = res.data
}
} catch (error) {
console.error("获取统计不同地理对应的主体数量error", error);
}
};
// 点击查看详情 // 点击查看详情
const handleClickToDetail = () => { const handleClickToDetail = () => {
const route = router.resolve("/InnovativeInstitutions"); const route = router.resolve("/InnovativeInstitutions");
...@@ -686,151 +697,171 @@ const chart1Data = ref([ ...@@ -686,151 +697,171 @@ const chart1Data = ref([
]); ]);
const colorList = ["#69B1FF", "#FFC069", "#87E8DE", "#85A5FF", "#FF7875", "#B37FEB"]; const colorList = ["#69B1FF", "#FFC069", "#87E8DE", "#85A5FF", "#FF7875", "#B37FEB"];
const innoItemList = [ const innoItemList = ref({})
{ // [
rank: "1", // {
name: "麻省理工学院（MIT）", // rank: "1",
type: ["研究型大学"], // name: "麻省理工学院（MIT）",
research: "64", // type: ["研究型大学"],
people: "72", // research: "64",
patent: "87", // people: "72",
paper: "22", // patent: "87",
score: "92", // paper: "22",
trend: "up" // score: "92",
}, // trend: "up"
{ // },
rank: "2", // {
name: "麻省理工学院", // rank: "2",
type: ["国家实验室"], // name: "麻省理工学院",
research: "66", // type: ["国家实验室"],
people: "60", // research: "66",
patent: "68", // people: "60",
paper: "69", // patent: "68",
score: "85", // paper: "69",
trend: "up" // score: "85",
}, // trend: "up"
{ // },
rank: "3", // {
name: "斯坦福大学", // rank: "3",
type: ["科技企业"], // name: "斯坦福大学",
research: "76", // type: ["科技企业"],
people: "11", // research: "76",
patent: "93", // people: "11",
paper: "51", // patent: "93",
score: "81", // paper: "51",
trend: "up" // score: "81",
}, // trend: "up"
{ // },
rank: "4", // {
name: "谷歌（Alphabet）", // rank: "4",
type: ["科技企业"], // name: "谷歌（Alphabet）",
research: "07", // type: ["科技企业"],
people: "02", // research: "07",
patent: "21", // people: "02",
paper: "04", // patent: "21",
score: "76", // paper: "04",
trend: "down" // score: "76",
}, // trend: "down"
{ // },
rank: "5", // {
name: "耶鲁大学", // rank: "5",
type: ["国防承包商"], // name: "耶鲁大学",
research: "12", // type: ["国防承包商"],
people: "04", // research: "12",
patent: "63", // people: "04",
paper: "38", // patent: "63",
score: "71", // paper: "38",
trend: "down" // score: "71",
} // trend: "down"
]; // }
// ];
//综合排名
const handleGetOverallRanking = async () => {
try {
let params = {
subjectTypeId: activeCate1.value,
// arealist:
year: releaseTime.value,
// 资源库
const universityList = ref([
{
pic: "src/views/innovationSubject/assets/images/u1.png",
name: "哈佛大学",
adder: "美国 · 马萨诸塞州",
area: "医学、法学、经济学、生物化学、公共卫生、自然科学等多个学科",
tag: ["人工智能"]
},
{
pic: "src/views/innovationSubject/assets/images/u10.png",
name: "斯坦福大学",
adder: "美国 · 加利福尼亚州",
area: "计算机科学、电子工程、生物医学工程、经济学、环境科学等学科",
tag: ["人工智能", "生物科技"]
},
{
pic: "src/views/innovationSubject/assets/images/u3.png",
name: "麻省理工学院",
adder: "美国 · 加利福尼亚州",
area: "工程、计算机、物理、数学、航空航天",
tag: ["人工智能"]
},
{
pic: "src/views/innovationSubject/assets/images/u4.png",
name: "普林斯顿大学",
adder: "美国 · 加利福尼亚州",
area: "数学、物理、政治学、经济学、哲学",
tag: ["人工智能"]
},
{
pic: "src/views/innovationSubject/assets/images/u5.png",
name: "加州理工学院",
adder: "美国 · 加利福尼亚州",
area: "物理、化学、天文、地球科学、工程",
tag: ["量子科技"]
},
{
pic: "src/views/innovationSubject/assets/images/u6.png",
name: "哥伦比亚大学 ",
adder: "美国 · 科罗拉多州",
area: "法学、商学、新闻、经济学、国际关系",
tag: ["新能源"]
},
{
pic: "src/views/innovationSubject/assets/images/u7.png",
name: "芝加哥大学",
adder: "美国 · 加利福尼亚州",
area: "经济学、社会学、物理、哲学、统计学",
tag: ["人工智能", "集成电路"]
},
{
pic: "src/views/innovationSubject/assets/images/u8.png",
name: "耶鲁大学",
adder: "美国 · 宾夕法尼亚州",
area: "法学、 医学、 戏剧、 政治学、 历史 ",
tag: ["新能源"]
},
{
pic: "src/views/innovationSubject/assets/images/u9.png",
name: "康奈尔大学",
adder: "美国 · 新墨西哥州",
area: "农业与生命科学、工程、酒店管理、兽医学",
tag: ["生物科技", "量子科技"]
},
{
pic: "src/views/innovationSubject/assets/images/u10.png",
name: "加州大学伯克利分校",
adder: "美国 · 加利福尼亚州",
area: "计算机科学、化学、物理学、经济学、环境科学、工程学等学科",
tag: ["人工智能", "集成电路"]
},
{
pic: "src/views/innovationSubject/assets/images/u11.png",
name: "宾夕法尼亚大学",
adder: "美国 · 马萨诸塞州",
area: "商学、法学、 医学、 工程、 传播学 ",
tag: ["人工智能", "生物科技"]
},
{
pic: "src/views/innovationSubject/assets/images/u12.png",
name: "华盛顿大学",
adder: "美国 · 新墨西哥州",
area: "医学、生命科学、计算机、公共卫生、工程",
tag: ["生物科技", "量子科技"]
} }
]); const res = await getOverallRanking(params);
console.log("综合排名", res);
if (res.code === 200 && res.data) {
innoItemList.value = res.data
}
} catch (error) {
console.error("获取综合排名error", error);
}
};
// 资源库
const universityList = ref({})
// [
// {
// pic: "src/views/innovationSubject/assets/images/u1.png",
// name: "哈佛大学",
// adder: "美国 · 马萨诸塞州",
// area: "医学、法学、经济学、生物化学、公共卫生、自然科学等多个学科",
// tag: ["人工智能"]
// },
// {
// pic: "src/views/innovationSubject/assets/images/u10.png",
// name: "斯坦福大学",
// adder: "美国 · 加利福尼亚州",
// area: "计算机科学、电子工程、生物医学工程、经济学、环境科学等学科",
// tag: ["人工智能", "生物科技"]
// },
// {
// pic: "src/views/innovationSubject/assets/images/u3.png",
// name: "麻省理工学院",
// adder: "美国 · 加利福尼亚州",
// area: "工程、计算机、物理、数学、航空航天",
// tag: ["人工智能"]
// },
// {
// pic: "src/views/innovationSubject/assets/images/u4.png",
// name: "普林斯顿大学",
// adder: "美国 · 加利福尼亚州",
// area: "数学、物理、政治学、经济学、哲学",
// tag: ["人工智能"]
// },
// {
// pic: "src/views/innovationSubject/assets/images/u5.png",
// name: "加州理工学院",
// adder: "美国 · 加利福尼亚州",
// area: "物理、化学、天文、地球科学、工程",
// tag: ["量子科技"]
// },
// {
// pic: "src/views/innovationSubject/assets/images/u6.png",
// name: "哥伦比亚大学 ",
// adder: "美国 · 科罗拉多州",
// area: "法学、商学、新闻、经济学、国际关系",
// tag: ["新能源"]
// },
// {
// pic: "src/views/innovationSubject/assets/images/u7.png",
// name: "芝加哥大学",
// adder: "美国 · 加利福尼亚州",
// area: "经济学、社会学、物理、哲学、统计学",
// tag: ["人工智能", "集成电路"]
// },
// {
// pic: "src/views/innovationSubject/assets/images/u8.png",
// name: "耶鲁大学",
// adder: "美国 · 宾夕法尼亚州",
// area: "法学、 医学、 戏剧、 政治学、 历史 ",
// tag: ["新能源"]
// },
// {
// pic: "src/views/innovationSubject/assets/images/u9.png",
// name: "康奈尔大学",
// adder: "美国 · 新墨西哥州",
// area: "农业与生命科学、工程、酒店管理、兽医学",
// tag: ["生物科技", "量子科技"]
// },
// {
// pic: "src/views/innovationSubject/assets/images/u10.png",
// name: "加州大学伯克利分校",
// adder: "美国 · 加利福尼亚州",
// area: "计算机科学、化学、物理学、经济学、环境科学、工程学等学科",
// tag: ["人工智能", "集成电路"]
// },
// {
// pic: "src/views/innovationSubject/assets/images/u11.png",
// name: "宾夕法尼亚大学",
// adder: "美国 · 马萨诸塞州",
// area: "商学、法学、 医学、 工程、 传播学 ",
// tag: ["人工智能", "生物科技"]
// },
// {
// pic: "src/views/innovationSubject/assets/images/u12.png",
// name: "华盛顿大学",
// adder: "美国 · 新墨西哥州",
// area: "医学、生命科学、计算机、公共卫生、工程",
// tag: ["生物科技", "量子科技"]
// }
// ]
const releaseTime = ref("2022"); const releaseTime = ref("2022");
const releaseTimeList = ref([ const releaseTimeList = ref([
...@@ -862,14 +893,51 @@ const areaList = ref([ ...@@ -862,14 +893,51 @@ const areaList = ref([
]); ]);
const categoryList1 = ref(["研究型大学", "国家实验室", "科技企业", "国防承包商"]); const categoryList1 = ref(["研究型大学", "国家实验室", "科技企业", "国防承包商"]);
const activeCate1 = ref("研究型大学"); const activeCate1 = ref('');
//类型列表
const handleGetSubjectTypeList = async () => {
try {
const res = await getSubjectTypeList();
console.log("类型列表", res);
if (res.code === 200 && res.data) {
categoryList1.value = res.data
activeCate1.value = res.data[0].id
}
} catch (error) {
console.error("获取类型列表error", error);
}
};
const handleClickCate = cate => { const handleClickCate = cate => {
activeCate.value = cate; activeCate.value = cate;
handleGetOverallRanking()
}; };
const handleClickCate1 = cate => { const handleClickCate1 = cate => {
activeCate1.value = cate; activeCate1.value = cate;
handleFindListBySubjectTypeId()
};
//资源库
const handleFindListBySubjectTypeId = async () => {
try {
let params = {
subjectTypeId: activeCate1.value,
// arealist:
currentPage: currentPage.value,
pageSize: 16,
}
const res = await findListBySubjectTypeId(params);
console.log("资源库", res);
if (res.code === 200 && res.data) {
universityList.value = res.data.content
total.value = res.data.totalElements
}
} catch (error) {
console.error("获取资源库error", error);
}
}; };
const handleToPosi = id => { const handleToPosi = id => {
...@@ -891,7 +959,12 @@ const handleToPosi = id => { ...@@ -891,7 +959,12 @@ const handleToPosi = id => {
}; };
onMounted(async () => { onMounted(async () => {
await handleGetSubjectTypeList()
handleGetCountGeography()
handleGetCountSubjectType()
handleGetOverallRanking()
handleFindListBySubjectTypeId()
let chart1 = getPieChart(chart1Data.value, colorList); let chart1 = getPieChart(chart1Data.value, colorList);
setChart(chart1, "chart1"); setChart(chart1, "chart1");
}); });
...@@ -901,16 +974,19 @@ onMounted(async () => { ...@@ -901,16 +974,19 @@ onMounted(async () => {
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
box-shadow: none; box-shadow: none;
} }
.home-wrapper { .home-wrapper {
width: 100%; width: 100%;
height: calc(100vh - 96px); height: calc(100vh - 96px);
position: relative; position: relative;
overflow-y: hidden; overflow-y: hidden;
.search-header { .search-header {
width: 100%; width: 100%;
height: 144px; height: 144px;
background: #fff; background: #fff;
overflow: hidden; overflow: hidden;
.home-main-header-center { .home-main-header-center {
margin-top: 20px; margin-top: 20px;
margin-left: 200px; margin-left: 200px;
...@@ -923,9 +999,11 @@ onMounted(async () => { ...@@ -923,9 +999,11 @@ onMounted(async () => {
padding: 1px; padding: 1px;
position: relative; position: relative;
border: 1px solid transparent; border: 1px solid transparent;
&:hover { &:hover {
border: 1px solid var(--color-main-active); border: 1px solid var(--color-main-active);
} }
.search { .search {
position: absolute; position: absolute;
right: -1px; right: -1px;
...@@ -938,14 +1016,17 @@ onMounted(async () => { ...@@ -938,14 +1016,17 @@ onMounted(async () => {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
.search-icon { .search-icon {
width: 18px; width: 18px;
height: 18px; height: 18px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.search-text { .search-text {
margin-left: 8px; margin-left: 8px;
height: 22px; height: 22px;
...@@ -957,11 +1038,13 @@ onMounted(async () => { ...@@ -957,11 +1038,13 @@ onMounted(async () => {
} }
} }
} }
.home-main-header-btn-box { .home-main-header-btn-box {
margin-top: 20px; margin-top: 20px;
margin-left: 200px; margin-left: 200px;
display: flex; display: flex;
gap: 16px; gap: 16px;
.btn { .btn {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -974,9 +1057,11 @@ onMounted(async () => { ...@@ -974,9 +1057,11 @@ onMounted(async () => {
background: #e7f3ff; background: #e7f3ff;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
&:hover { &:hover {
background: #cae3fc; background: #cae3fc;
} }
.btn-text { .btn-text {
width: 80px; width: 80px;
color: var(--color-main-active); color: var(--color-main-active);
...@@ -987,12 +1072,14 @@ onMounted(async () => { ...@@ -987,12 +1072,14 @@ onMounted(async () => {
margin-left: 36px; margin-left: 36px;
text-align: center; text-align: center;
} }
.btn-icon { .btn-icon {
position: absolute; position: absolute;
top: 16px; top: 16px;
right: 19px; right: 19px;
width: 6px; width: 6px;
height: 12px; height: 12px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -1001,21 +1088,25 @@ onMounted(async () => { ...@@ -1001,21 +1088,25 @@ onMounted(async () => {
} }
} }
} }
.scrollHomeMain { .scrollHomeMain {
width: 100%; width: 100%;
height: calc(100% - 144px); height: calc(100% - 144px);
overflow-y: auto; overflow-y: auto;
} }
.home-main { .home-main {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
background: url("./assets/images/background.png"); background: url("./assets/images/background.png");
background-size: 100% 100%; background-size: 100% 100%;
.home-main-header { .home-main-header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.home-main-header-top { .home-main-header-top {
width: 100%; width: 100%;
height: 64px; height: 64px;
...@@ -1032,16 +1123,20 @@ onMounted(async () => { ...@@ -1032,16 +1123,20 @@ onMounted(async () => {
box-sizing: border-box; box-sizing: border-box;
padding-left: 160px; padding-left: 160px;
display: flex; display: flex;
.header-item { .header-item {
margin: 0 3px; margin: 0 3px;
} }
.back-item { .back-item {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #ccc; color: #ccc;
} }
} }
} }
.home-main-header-center { .home-main-header-center {
margin-top: 48px; margin-top: 48px;
width: 960px; width: 960px;
...@@ -1053,9 +1148,11 @@ onMounted(async () => { ...@@ -1053,9 +1148,11 @@ onMounted(async () => {
padding: 1px; padding: 1px;
position: relative; position: relative;
border: 1px solid transparent; border: 1px solid transparent;
&:hover { &:hover {
border: 1px solid var(--color-main-active); border: 1px solid var(--color-main-active);
} }
.search { .search {
position: absolute; position: absolute;
right: -1px; right: -1px;
...@@ -1068,14 +1165,17 @@ onMounted(async () => { ...@@ -1068,14 +1165,17 @@ onMounted(async () => {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
.search-icon { .search-icon {
width: 18px; width: 18px;
height: 18px; height: 18px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.search-text { .search-text {
margin-left: 8px; margin-left: 8px;
height: 22px; height: 22px;
...@@ -1087,6 +1187,7 @@ onMounted(async () => { ...@@ -1087,6 +1187,7 @@ onMounted(async () => {
} }
} }
} }
.home-main-header-footer { .home-main-header-footer {
margin-top: 38px; margin-top: 38px;
width: 960px; width: 960px;
...@@ -1095,9 +1196,11 @@ onMounted(async () => { ...@@ -1095,9 +1196,11 @@ onMounted(async () => {
padding: 0 108px; padding: 0 108px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.home-main-header-footer-item { .home-main-header-footer-item {
padding: 0 10px; padding: 0 10px;
text-align: center; text-align: center;
.item-top { .item-top {
height: 22px; height: 22px;
color: rgba(20, 89, 187, 1); color: rgba(20, 89, 187, 1);
...@@ -1106,6 +1209,7 @@ onMounted(async () => { ...@@ -1106,6 +1209,7 @@ onMounted(async () => {
font-weight: 700; font-weight: 700;
line-height: 22px; line-height: 22px;
} }
.item-footer { .item-footer {
margin-top: 10px; margin-top: 10px;
height: 30px; height: 30px;
...@@ -1117,12 +1221,14 @@ onMounted(async () => { ...@@ -1117,12 +1221,14 @@ onMounted(async () => {
} }
} }
} }
.home-main-header-btn-box { .home-main-header-btn-box {
width: 688px; width: 688px;
margin: 0 auto; margin: 0 auto;
margin-top: 39px; margin-top: 39px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.btn { .btn {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -1135,9 +1241,11 @@ onMounted(async () => { ...@@ -1135,9 +1241,11 @@ onMounted(async () => {
background: #e7f3ff; background: #e7f3ff;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
&:hover { &:hover {
background: #cae3fc; background: #cae3fc;
} }
.btn-text { .btn-text {
width: 80px; width: 80px;
color: var(--color-main-active); color: var(--color-main-active);
...@@ -1148,12 +1256,14 @@ onMounted(async () => { ...@@ -1148,12 +1256,14 @@ onMounted(async () => {
margin-left: 36px; margin-left: 36px;
text-align: center; text-align: center;
} }
.btn-icon { .btn-icon {
position: absolute; position: absolute;
top: 16px; top: 16px;
right: 19px; right: 19px;
width: 6px; width: 6px;
height: 12px; height: 12px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -1161,12 +1271,14 @@ onMounted(async () => { ...@@ -1161,12 +1271,14 @@ onMounted(async () => {
} }
} }
} }
.home-main-header-item-box { .home-main-header-item-box {
margin-top: 48px; margin-top: 48px;
margin-bottom: 64px; margin-bottom: 64px;
width: 1600px; width: 1600px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.item { .item {
width: 254px; width: 254px;
height: 72px; height: 72px;
...@@ -1180,20 +1292,24 @@ onMounted(async () => { ...@@ -1180,20 +1292,24 @@ onMounted(async () => {
margin: 0 6px 16px 6px; margin: 0 6px 16px 6px;
cursor: pointer; cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
&:hover { &:hover {
transform: translateY(-3px); transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
} }
.item-left { .item-left {
width: 48px; width: 48px;
height: 48px; height: 48px;
margin-left: 24px; margin-left: 24px;
margin-top: 12px; margin-top: 12px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.item-right { .item-right {
margin-left: 17px; margin-left: 17px;
width: 140px; width: 140px;
...@@ -1206,13 +1322,16 @@ onMounted(async () => { ...@@ -1206,13 +1322,16 @@ onMounted(async () => {
} }
} }
} }
.home-main-center { .home-main-center {
margin-top: 34px; margin-top: 34px;
.center-top { .center-top {
height: 450px; height: 450px;
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 20px; gap: 20px;
.box1 { .box1 {
width: 1064px; width: 1064px;
height: 460px; height: 460px;
...@@ -1220,23 +1339,28 @@ onMounted(async () => { ...@@ -1220,23 +1339,28 @@ onMounted(async () => {
background: #fff; background: #fff;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
.box1-header { .box1-header {
height: 48px; height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.box1-header-left { .box1-header-left {
display: flex; display: flex;
margin-left: 18px; margin-left: 18px;
.icon { .icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-top: 15px; margin-top: 15px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.title { .title {
width: 112px; width: 112px;
height: 48px; height: 48px;
...@@ -1250,6 +1374,7 @@ onMounted(async () => { ...@@ -1250,6 +1374,7 @@ onMounted(async () => {
text-align: center; text-align: center;
} }
} }
.box1-header-right { .box1-header-right {
margin-top: 16px; margin-top: 16px;
height: 16px; height: 16px;
...@@ -1262,6 +1387,7 @@ onMounted(async () => { ...@@ -1262,6 +1387,7 @@ onMounted(async () => {
margin-right: 39px; margin-right: 39px;
} }
} }
.box1-main { .box1-main {
display: flex; display: flex;
margin-top: 33px; margin-top: 33px;
...@@ -1275,6 +1401,7 @@ onMounted(async () => { ...@@ -1275,6 +1401,7 @@ onMounted(async () => {
height: 353px; height: 353px;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 20px;
.box1-main-left-top { .box1-main-left-top {
/* 容器 546 */ /* 容器 546 */
width: 456px; width: 456px;
...@@ -1285,6 +1412,7 @@ onMounted(async () => { ...@@ -1285,6 +1412,7 @@ onMounted(async () => {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
gap: 8px; gap: 8px;
.box1-main-left-top-item { .box1-main-left-top-item {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -1295,6 +1423,7 @@ onMounted(async () => { ...@@ -1295,6 +1423,7 @@ onMounted(async () => {
border-radius: 4px; border-radius: 4px;
background: rgba(231, 243, 255, 1); background: rgba(231, 243, 255, 1);
color: rgba(22, 119, 255, 1); color: rgba(22, 119, 255, 1);
.box1-main-left-top-item-text1 { .box1-main-left-top-item-text1 {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
...@@ -1303,6 +1432,7 @@ onMounted(async () => { ...@@ -1303,6 +1432,7 @@ onMounted(async () => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: center; text-align: center;
} }
.box1-main-left-top-item-text2 { .box1-main-left-top-item-text2 {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 24px; font-size: 24px;
...@@ -1313,15 +1443,18 @@ onMounted(async () => { ...@@ -1313,15 +1443,18 @@ onMounted(async () => {
} }
} }
} }
.box1-main-left-down { .box1-main-left-down {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 456px; width: 456px;
.box1-main-left-down-item { .box1-main-left-down-item {
height: 48px; height: 48px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.box1-main-left-down-item-index { .box1-main-left-down-item-index {
margin-left: 42px; margin-left: 42px;
width: 24px; width: 24px;
...@@ -1336,6 +1469,7 @@ onMounted(async () => { ...@@ -1336,6 +1469,7 @@ onMounted(async () => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: center; text-align: center;
} }
.box1-main-left-down-item-text { .box1-main-left-down-item-text {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -1345,6 +1479,7 @@ onMounted(async () => { ...@@ -1345,6 +1479,7 @@ onMounted(async () => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: justify; text-align: justify;
} }
.box1-main-left-down-item-num { .box1-main-left-down-item-num {
margin-right: 42px; margin-right: 42px;
color: rgba(5, 95, 194, 1); color: rgba(5, 95, 194, 1);
...@@ -1358,37 +1493,44 @@ onMounted(async () => { ...@@ -1358,37 +1493,44 @@ onMounted(async () => {
} }
} }
} }
.box1-main-right { .box1-main-right {
margin-left: 10px; margin-left: 10px;
flex: 1; flex: 1;
} }
} }
} }
.box2 { .box2 {
width: 520px; width: 520px;
height: 460px; height: 460px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
position: relative; position: relative;
.box2-header { .box2-header {
height: 54px; height: 54px;
display: flex; display: flex;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
.icon { .icon {
width: 24px; width: 24px;
height: 22px; height: 22px;
margin-left: 33px; margin-left: 33px;
margin-top: 18px; margin-top: 18px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.title { .title {
display: flex; display: flex;
width: 148px; width: 148px;
background: rgba(206, 79, 81, 1); background: rgba(206, 79, 81, 1);
margin-left: 25px; margin-left: 25px;
.text { .text {
margin-left: 15px; margin-left: 15px;
margin-top: 16px; margin-top: 16px;
...@@ -1399,6 +1541,7 @@ onMounted(async () => { ...@@ -1399,6 +1541,7 @@ onMounted(async () => {
font-weight: 700; font-weight: 700;
line-height: 22px; line-height: 22px;
} }
.num { .num {
width: 24px; width: 24px;
height: 20px; height: 20px;
...@@ -1413,6 +1556,7 @@ onMounted(async () => { ...@@ -1413,6 +1556,7 @@ onMounted(async () => {
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
} }
} }
.more { .more {
margin-top: 19px; margin-top: 19px;
margin-left: 200px; margin-left: 200px;
...@@ -1424,28 +1568,34 @@ onMounted(async () => { ...@@ -1424,28 +1568,34 @@ onMounted(async () => {
cursor: pointer; cursor: pointer;
} }
} }
.box2-main { .box2-main {
box-sizing: border-box; box-sizing: border-box;
padding-right: 20px; padding-right: 20px;
height: 330px; height: 330px;
overflow-y: auto; overflow-y: auto;
.box2-main-item { .box2-main-item {
margin-left: 23px; margin-left: 23px;
height: 47px; height: 47px;
width: 464px; width: 464px;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: var(--color-bg-hover); background: var(--color-bg-hover);
} }
.itemLeftStatus1 { .itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important; color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important; background: rgba(246, 255, 237, 1) !important;
} }
.itemLeftStatus2 { .itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important; color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important; background: rgba(255, 247, 230, 1) !important;
} }
.item-left { .item-left {
margin-top: 4px; margin-top: 4px;
margin-left: 2px; margin-left: 2px;
...@@ -1462,12 +1612,14 @@ onMounted(async () => { ...@@ -1462,12 +1612,14 @@ onMounted(async () => {
padding: 6px 4px; padding: 6px 4px;
text-align: center; text-align: center;
} }
.item-right { .item-right {
margin-left: 13px; margin-left: 13px;
width: 408px; width: 408px;
height: 47px; height: 47px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
.text { .text {
width: 348px; width: 348px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
...@@ -1476,6 +1628,7 @@ onMounted(async () => { ...@@ -1476,6 +1628,7 @@ onMounted(async () => {
font-weight: 400; font-weight: 400;
line-height: 47px; line-height: 47px;
} }
.time { .time {
margin-left: 10px; margin-left: 10px;
line-height: 47px; line-height: 47px;
...@@ -1487,6 +1640,7 @@ onMounted(async () => { ...@@ -1487,6 +1640,7 @@ onMounted(async () => {
} }
} }
} }
.box2-footer { .box2-footer {
position: absolute; position: absolute;
left: 45px; left: 45px;
...@@ -1500,14 +1654,17 @@ onMounted(async () => { ...@@ -1500,14 +1654,17 @@ onMounted(async () => {
border-radius: 6px; border-radius: 6px;
background: var(--color-main-active); background: var(--color-main-active);
cursor: pointer; cursor: pointer;
.icon { .icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.text { .text {
margin-left: 8px; margin-left: 8px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
...@@ -1519,23 +1676,27 @@ onMounted(async () => { ...@@ -1519,23 +1676,27 @@ onMounted(async () => {
} }
} }
} }
.divide2 { .divide2 {
width: 1600px; width: 1600px;
margin: 0 auto; margin: 0 auto;
margin-top: 68px; margin-top: 68px;
margin-bottom: 36px; margin-bottom: 36px;
} }
.center-center { .center-center {
width: 1600px; width: 1600px;
margin: 0 auto; margin: 0 auto;
margin-top: 21px; margin-top: 21px;
height: 450px; height: 450px;
display: flex; display: flex;
.box3 { .box3 {
width: 792px; width: 792px;
height: 450px; height: 450px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2); box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.box3-header { .box3-header {
height: 48px; height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
...@@ -1544,17 +1705,21 @@ onMounted(async () => { ...@@ -1544,17 +1705,21 @@ onMounted(async () => {
justify-content: space-between; justify-content: space-between;
padding: 0 20px; padding: 0 20px;
position: relative; position: relative;
.box3-header-left { .box3-header-left {
display: flex; display: flex;
.box3-header-icon { .box3-header-icon {
margin-top: 16px; margin-top: 16px;
width: 19px; width: 19px;
height: 19px; height: 19px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.box3-header-title { .box3-header-title {
margin-top: 13px; margin-top: 13px;
margin-left: 19px; margin-left: 19px;
...@@ -1566,6 +1731,7 @@ onMounted(async () => { ...@@ -1566,6 +1731,7 @@ onMounted(async () => {
line-height: 22px; line-height: 22px;
} }
} }
.more { .more {
width: 49px; width: 49px;
height: 24px; height: 24px;
...@@ -1580,33 +1746,40 @@ onMounted(async () => { ...@@ -1580,33 +1746,40 @@ onMounted(async () => {
cursor: pointer; cursor: pointer;
} }
} }
.box3-main { .box3-main {
height: 402px; height: 402px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
padding-top: 6px; padding-top: 6px;
.box3-item { .box3-item {
display: flex; display: flex;
height: 77px; height: 77px;
width: 749px; width: 749px;
margin-left: 21px; margin-left: 21px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
.left { .left {
width: 72px; width: 72px;
height: 48px; height: 48px;
margin-top: 15px; margin-top: 15px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.right { .right {
width: 657px; width: 657px;
margin-left: 20px; margin-left: 20px;
.right-top { .right-top {
width: 657px; width: 657px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.title { .title {
margin-top: 13px; margin-top: 13px;
width: 520px; width: 520px;
...@@ -1620,6 +1793,7 @@ onMounted(async () => { ...@@ -1620,6 +1793,7 @@ onMounted(async () => {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.time { .time {
flex: 1; flex: 1;
text-align: right; text-align: right;
...@@ -1632,6 +1806,7 @@ onMounted(async () => { ...@@ -1632,6 +1806,7 @@ onMounted(async () => {
line-height: 22px; line-height: 22px;
} }
} }
.right-footer { .right-footer {
width: 657px; width: 657px;
height: 24px; height: 24px;
...@@ -1648,12 +1823,14 @@ onMounted(async () => { ...@@ -1648,12 +1823,14 @@ onMounted(async () => {
} }
} }
} }
.box4 { .box4 {
margin-left: 20px; margin-left: 20px;
width: 792px; width: 792px;
height: 450px; height: 450px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2); box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.box4-header { .box4-header {
width: 792px; width: 792px;
height: 48px; height: 48px;
...@@ -1662,15 +1839,18 @@ onMounted(async () => { ...@@ -1662,15 +1839,18 @@ onMounted(async () => {
box-sizing: border-box; box-sizing: border-box;
padding-left: 22px; padding-left: 22px;
position: relative; position: relative;
.header-icon { .header-icon {
margin-top: 15px; margin-top: 15px;
width: 20px; width: 20px;
height: 20px; height: 20px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.header-title { .header-title {
margin-top: 12px; margin-top: 12px;
margin-left: 18px; margin-left: 18px;
...@@ -1681,6 +1861,7 @@ onMounted(async () => { ...@@ -1681,6 +1861,7 @@ onMounted(async () => {
font-weight: 700; font-weight: 700;
line-height: 22px; line-height: 22px;
} }
.more { .more {
width: 49px; width: 49px;
height: 24px; height: 24px;
...@@ -1695,24 +1876,29 @@ onMounted(async () => { ...@@ -1695,24 +1876,29 @@ onMounted(async () => {
cursor: pointer; cursor: pointer;
} }
} }
.box4-main { .box4-main {
height: 402px; height: 402px;
overflow-y: auto; overflow-y: auto;
box-sizing: border-box; box-sizing: border-box;
padding-top: 8px; padding-top: 8px;
.box4-main-item { .box4-main-item {
margin-top: 16px; margin-top: 16px;
display: flex; display: flex;
margin-left: 21px; margin-left: 21px;
.left { .left {
margin-top: 5px; margin-top: 5px;
width: 36px; width: 36px;
height: 36px; height: 36px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.right { .right {
margin-left: 10px; margin-left: 10px;
width: 690px; width: 690px;
...@@ -1720,9 +1906,11 @@ onMounted(async () => { ...@@ -1720,9 +1906,11 @@ onMounted(async () => {
border: 1px solid rgba(231, 243, 255, 1); border: 1px solid rgba(231, 243, 255, 1);
background: rgba(246, 250, 255, 1); background: rgba(246, 250, 255, 1);
padding: 10px 15px; padding: 10px 15px;
.right-top { .right-top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.name { .name {
height: 24px; height: 24px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
...@@ -1731,6 +1919,7 @@ onMounted(async () => { ...@@ -1731,6 +1919,7 @@ onMounted(async () => {
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
} }
.time { .time {
height: 30px; height: 30px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
...@@ -1740,6 +1929,7 @@ onMounted(async () => { ...@@ -1740,6 +1929,7 @@ onMounted(async () => {
line-height: 30px; line-height: 30px;
} }
} }
.content { .content {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -1759,17 +1949,21 @@ onMounted(async () => { ...@@ -1759,17 +1949,21 @@ onMounted(async () => {
margin-top: 68px; margin-top: 68px;
margin-bottom: 36px; margin-bottom: 36px;
} }
.center-footer { .center-footer {
display: flex; display: flex;
justify-content: center; justify-content: center;
.home-main-footer-header { .home-main-footer-header {
width: 1600px; width: 1600px;
height: 42px; height: 42px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.btn-box { .btn-box {
width: 1000px; width: 1000px;
display: flex; display: flex;
.btn { .btn {
height: 42px; height: 42px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
...@@ -1782,21 +1976,25 @@ onMounted(async () => { ...@@ -1782,21 +1976,25 @@ onMounted(async () => {
background: rgba(20, 89, 187, 0); background: rgba(20, 89, 187, 0);
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: rgba(20, 89, 187, 0.1); background: rgba(20, 89, 187, 0.1);
} }
} }
.btnActive { .btnActive {
padding: 0 24px; padding: 0 24px;
border-radius: 21px; border-radius: 21px;
background: rgba(20, 89, 187, 1); background: rgba(20, 89, 187, 1);
color: #fff; color: #fff;
&:hover { &:hover {
color: #fff; color: #fff;
background: rgba(20, 89, 187, 1); background: rgba(20, 89, 187, 1);
} }
} }
} }
.select-box { .select-box {
margin-top: 10px; margin-top: 10px;
height: 42px; height: 42px;
...@@ -1805,6 +2003,7 @@ onMounted(async () => { ...@@ -1805,6 +2003,7 @@ onMounted(async () => {
} }
} }
} }
.center-footer-elx { .center-footer-elx {
width: 1600px; width: 1600px;
height: 528px; height: 528px;
...@@ -1813,20 +2012,24 @@ onMounted(async () => { ...@@ -1813,20 +2012,24 @@ onMounted(async () => {
margin: 30px auto; margin: 30px auto;
box-sizing: border-box; box-sizing: border-box;
border-radius: 10px; border-radius: 10px;
.content-header { .content-header {
height: 48px; height: 48px;
display: flex; display: flex;
border-bottom: 1px solid rgba(234, 236, 238, 1); border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon { .icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-top: 14px; margin-top: 14px;
margin-left: 19px; margin-left: 19px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.title { .title {
height: 48px; height: 48px;
margin-left: 21px; margin-left: 21px;
...@@ -1837,22 +2040,26 @@ onMounted(async () => { ...@@ -1837,22 +2040,26 @@ onMounted(async () => {
line-height: 48px; line-height: 48px;
} }
} }
.sanction-table { .sanction-table {
margin-top: 16px; margin-top: 16px;
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
width: 1552px; width: 1552px;
.up { .up {
width: 32px; width: 32px;
height: 32px; height: 32px;
background-image: url("src/views/innovationSubject/assets/images/icon-up.png"); background-image: url("src/views/innovationSubject/assets/images/icon-up.png");
} }
.down { .down {
width: 32px; width: 32px;
height: 32px; height: 32px;
background-image: url("src/views/innovationSubject/assets/images/icon-down.png"); background-image: url("src/views/innovationSubject/assets/images/icon-down.png");
} }
} }
.center-footer-elx-footer { .center-footer-elx-footer {
margin: 16px; margin: 16px;
width: 1568px; width: 1568px;
...@@ -1868,6 +2075,7 @@ onMounted(async () => { ...@@ -1868,6 +2075,7 @@ onMounted(async () => {
border: 1px solid rgba(231, 243, 255, 1); border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px; border-radius: 4px;
background: rgba(246, 250, 255, 1); background: rgba(246, 250, 255, 1);
.center-footer-elx-footer-text { .center-footer-elx-footer-text {
color: rgba(5, 95, 194, 1); color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -1881,6 +2089,7 @@ onMounted(async () => { ...@@ -1881,6 +2089,7 @@ onMounted(async () => {
} }
} }
} }
.center-footer-layout { .center-footer-layout {
width: 1600px; width: 1600px;
height: 528px; height: 528px;
...@@ -1889,20 +2098,24 @@ onMounted(async () => { ...@@ -1889,20 +2098,24 @@ onMounted(async () => {
margin: 30px auto; margin: 30px auto;
box-sizing: border-box; box-sizing: border-box;
border-radius: 10px; border-radius: 10px;
.content-header { .content-header {
height: 48px; height: 48px;
display: flex; display: flex;
border-bottom: 1px solid rgba(234, 236, 238, 1); border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon { .icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-top: 14px; margin-top: 14px;
margin-left: 19px; margin-left: 19px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.title { .title {
height: 48px; height: 48px;
margin-left: 21px; margin-left: 21px;
...@@ -1913,16 +2126,19 @@ onMounted(async () => { ...@@ -1913,16 +2126,19 @@ onMounted(async () => {
line-height: 48px; line-height: 48px;
} }
} }
.center-footer-layout-content { .center-footer-layout-content {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.center-footer-layout-content-item{
.center-footer-layout-content-item {
height: 480px; height: 480px;
width: 800px; width: 800px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 24px; margin-left: 24px;
.center-footer-elx-footer{
.center-footer-elx-footer {
width: 750px; width: 750px;
height: 88px; height: 88px;
...@@ -1937,7 +2153,8 @@ onMounted(async () => { ...@@ -1937,7 +2153,8 @@ onMounted(async () => {
border: 1px solid rgba(231, 243, 255, 1); border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px; border-radius: 4px;
background: rgba(246, 250, 255, 1); background: rgba(246, 250, 255, 1);
.center-footer-elx-footer-text{
.center-footer-elx-footer-text {
color: rgba(5, 95, 194, 1); color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
...@@ -1953,16 +2170,19 @@ onMounted(async () => { ...@@ -1953,16 +2170,19 @@ onMounted(async () => {
} }
} }
} }
.home-main-footer { .home-main-footer {
margin-top: 34px; margin-top: 34px;
height: 910px; height: 910px;
background: rgba(248, 249, 250, 1); background: rgba(248, 249, 250, 1);
overflow: hidden; overflow: hidden;
.divide4 { .divide4 {
margin: 0 auto; margin: 0 auto;
margin-top: 52px; margin-top: 52px;
margin-bottom: 36px; margin-bottom: 36px;
} }
.home-main-footer-header { .home-main-footer-header {
width: 1600px; width: 1600px;
height: 42px; height: 42px;
...@@ -1970,10 +2190,12 @@ onMounted(async () => { ...@@ -1970,10 +2190,12 @@ onMounted(async () => {
// background: orange; // background: orange;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.btn-box { .btn-box {
margin-top: 10px; margin-top: 10px;
width: 1000px; width: 1000px;
display: flex; display: flex;
.btn { .btn {
height: 42px; height: 42px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
...@@ -1986,21 +2208,25 @@ onMounted(async () => { ...@@ -1986,21 +2208,25 @@ onMounted(async () => {
background: rgba(20, 89, 187, 0); background: rgba(20, 89, 187, 0);
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: rgba(20, 89, 187, 0.1); background: rgba(20, 89, 187, 0.1);
} }
} }
.btnActive { .btnActive {
padding: 0 24px; padding: 0 24px;
border-radius: 21px; border-radius: 21px;
background: rgba(20, 89, 187, 1); background: rgba(20, 89, 187, 1);
color: #fff; color: #fff;
&:hover { &:hover {
color: #fff; color: #fff;
background: rgba(20, 89, 187, 1); background: rgba(20, 89, 187, 1);
} }
} }
} }
.select-box { .select-box {
margin-top: 10px; margin-top: 10px;
height: 42px; height: 42px;
...@@ -2008,12 +2234,14 @@ onMounted(async () => { ...@@ -2008,12 +2234,14 @@ onMounted(async () => {
padding: 5px 0; padding: 5px 0;
} }
} }
.home-main-footer-main { .home-main-footer-main {
width: 1600px; width: 1600px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 auto; margin: 0 auto;
gap: 16px; gap: 16px;
.footer-main-item { .footer-main-item {
width: 253px; width: 253px;
height: 216px; height: 216px;
...@@ -2028,7 +2256,8 @@ onMounted(async () => { ...@@ -2028,7 +2256,8 @@ onMounted(async () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
cursor: pointer; cursor: pointer;
.item-text{
.item-text {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 18px; font-size: 18px;
...@@ -2037,6 +2266,7 @@ onMounted(async () => { ...@@ -2037,6 +2266,7 @@ onMounted(async () => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
} }
.item-text2 { .item-text2 {
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -2046,18 +2276,21 @@ onMounted(async () => { ...@@ -2046,18 +2276,21 @@ onMounted(async () => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: justify; text-align: justify;
} }
.taglist { .taglist {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 8px; gap: 8px;
} }
} }
.footer-box { .footer-box {
margin: 0 auto; margin: 0 auto;
height: 32px; height: 32px;
margin-top: 30px; margin-top: 30px;
display: flex; display: flex;
justify-content: center; justify-content: center;
.footer-left { .footer-left {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -2189,6 +2422,7 @@ onMounted(async () => { ...@@ -2189,6 +2422,7 @@ onMounted(async () => {
box-shadow: none; box-shadow: none;
border-radius: 10px; border-radius: 10px;
} }
:deep(.el-input__wrapper:hover) { :deep(.el-input__wrapper:hover) {
box-shadow: none !important; box-shadow: none !important;
} }
...@@ -2203,6 +2437,7 @@ onMounted(async () => { ...@@ -2203,6 +2437,7 @@ onMounted(async () => {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
} }
:deep(.table-row) { :deep(.table-row) {
height: 64px; height: 64px;
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论