Compare commits
5 Commits
5aae828374
...
c480aaf938
| Author | SHA1 | Date |
|---|---|---|
JayChou
|
c480aaf938 | 2 weeks ago |
|
JayChou
|
6f71344039 | 2 weeks ago |
|
JayChou
|
fa223dbbd6 | 2 weeks ago |
|
JayChou
|
05e7bde62d | 2 weeks ago |
|
JayChou
|
87db007d3b | 2 weeks ago |
17 changed files with 2055 additions and 822 deletions
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 40 KiB |
@ -0,0 +1,75 @@ |
||||
/** |
||||
The routing of this file will not show the layout. |
||||
It is an independent new page. |
||||
the contents of the file still need to log in to access |
||||
*/ |
||||
import type { AppRouteModule } from '/@/router/types'; |
||||
|
||||
// test |
||||
// http:ip:port/main-out |
||||
export const mainOutRoutes: AppRouteModule[] = [ |
||||
{ |
||||
path: '/main-out', |
||||
name: 'MainOut', |
||||
component: () => import('/@/views/demo/main-out/index.vue'), |
||||
meta: { |
||||
title: 'MainOut', |
||||
ignoreAuth: true, |
||||
}, |
||||
}, |
||||
// ====== |
||||
{ |
||||
path: '/main-home', |
||||
name: 'MainOut', |
||||
component: () => import('/@/views/demo/main-home/index.vue'), |
||||
meta: { |
||||
title: 'MainHome', |
||||
ignoreAuth: true, |
||||
}, |
||||
redirect: '/main-home/HomePage', |
||||
children: [ |
||||
{ |
||||
path: '/main-home/HomePage', |
||||
name: 'HomePage', |
||||
component: () => import('/@/views/demo/main-home/components/homePage/index.vue'), |
||||
meta: { |
||||
title: 'HomePage', |
||||
ignoreAuth: true, |
||||
}, |
||||
}, |
||||
{ |
||||
path: '/main-home/MatchEvaluation', |
||||
name: 'MatchEvaluation', |
||||
component: () => import('/@/views/demo/main-home/components/matchEvaluation/index.vue'), |
||||
meta: { |
||||
title: 'MatchEvaluation', |
||||
ignoreAuth: true, |
||||
}, |
||||
redirect: '/main-home/MatchEvaluation/MCh', |
||||
children: [ |
||||
{ |
||||
path: '/main-home/MatchEvaluation/MCh', |
||||
name: 'MCh', |
||||
component: () => import('/@/views/demo/main-home/components/matchEvaluation/components/MCh.vue'), |
||||
meta: { |
||||
title: 'MCh', |
||||
ignoreAuth: true, |
||||
}, |
||||
}, |
||||
{ |
||||
path: '/main-home/MatchEvaluation/LesserCh/:id', |
||||
name: 'LesserCh', |
||||
component: () => import('/@/views/demo/main-home/components/matchEvaluation/components/LesserCh.vue'), |
||||
meta: { |
||||
title: 'LesserCh', |
||||
ignoreAuth: true, |
||||
}, |
||||
}, |
||||
] |
||||
}, |
||||
|
||||
], |
||||
} |
||||
]; |
||||
|
||||
export const mainOutRouteNames = mainOutRoutes.map((item) => item.name); |
||||
@ -0,0 +1,129 @@ |
||||
<template> |
||||
<div class="container"> |
||||
<div class="news-list"> |
||||
<div class="item" v-for="i in 10" :key="i"> |
||||
<div class="left"><div class="year">2024-10</div><div class="day">10</div></div> |
||||
<div class="right"> |
||||
<div class="title">新闻标题</div> |
||||
<div class="editor">编辑 | 无糖</div> |
||||
<div class="description" |
||||
>小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本</div |
||||
> |
||||
<div class="get-info">查看详情</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 栏目 --> |
||||
<div class="column-list"> |
||||
<div class="title">栏目列表</div> |
||||
<div class="list"> |
||||
<div class="item">全部</div> |
||||
<div class="item">项目申报</div> |
||||
<div class="item">新闻列表</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup></script> |
||||
|
||||
<style scoped lang="less"> |
||||
.container { |
||||
position: relative; |
||||
width: 1200px; |
||||
margin: 0 auto; |
||||
display: flex; |
||||
margin-top: 50px; |
||||
.news-list { |
||||
width: calc(1200px - 415px); |
||||
margin-right: 30px; |
||||
|
||||
.item { |
||||
display: flex; |
||||
width: 100%; |
||||
border-bottom: 2px solid #CCC; |
||||
padding-bottom: 45px; |
||||
margin-top: 40px; |
||||
.left { |
||||
width: 100px; |
||||
height: 100px; |
||||
border: 1px solid #ccc; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.year { |
||||
font-size: 16px; |
||||
color: #333; |
||||
} |
||||
.day { |
||||
font-size: 40px; |
||||
font-weight: 600; |
||||
color: #333; |
||||
} |
||||
} |
||||
.right { |
||||
margin-left: 30px; |
||||
.title { |
||||
font-size: 22px; |
||||
color: #000; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.editor { |
||||
position: relative; |
||||
font-size: 14px; |
||||
color: #999; |
||||
font-size: 14px; |
||||
margin-top: 10px; |
||||
} |
||||
.editor::before { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
width: 53px; |
||||
bottom: -15px; |
||||
height: 4px; |
||||
background-color: #d9d9d9; |
||||
} |
||||
.description { |
||||
margin-top: 30px; |
||||
width: 660px; |
||||
} |
||||
.get-info { |
||||
color: #fff; |
||||
width: 132px; |
||||
height: 40px; |
||||
text-align: center; |
||||
line-height: 40px; |
||||
margin-top: 30px; |
||||
background-color: #002e97; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.column-list { |
||||
position: sticky; |
||||
top: 0; |
||||
width: 385px; |
||||
background-color: #fff; |
||||
height: 755px; |
||||
padding: 30px; |
||||
.title{ |
||||
font-size: 20px; |
||||
font-weight: 600; |
||||
color: #555; |
||||
} |
||||
.list{ |
||||
.item{ |
||||
font-size: 16px; |
||||
color: #555; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
border-bottom: 1px solid #D9D9D9; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,20 @@ |
||||
<template> |
||||
<div class=""> |
||||
文章管理 |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, computed, nextTick, watch, onMounted } from "vue" |
||||
import { useRouter, useRoute } from "vue-router" |
||||
|
||||
const router = useRouter() |
||||
const route = useRoute() |
||||
|
||||
const total = ref(0) |
||||
|
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
|
||||
</style> |
||||
@ -0,0 +1,20 @@ |
||||
<template> |
||||
<div class=""> |
||||
栏目管理 |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, computed, nextTick, watch, onMounted } from "vue" |
||||
import { useRouter, useRoute } from "vue-router" |
||||
|
||||
const router = useRouter() |
||||
const route = useRoute() |
||||
|
||||
const total = ref(0) |
||||
|
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
|
||||
</style> |
||||
@ -0,0 +1,92 @@ |
||||
<template> |
||||
<div class="container"> |
||||
<div class="filter"> |
||||
<div :class="activeIndex === index ? 'item avtive' : 'item'" @click="activeIndex = index" v-for="(i, index) in filterList" :key="i">{{ |
||||
i |
||||
}}</div> |
||||
</div> |
||||
<div class="user-list"> |
||||
<div class="item" v-for="i in 10" :key="i"> |
||||
<div class="avater"></div> |
||||
<div class="name">张三</div> |
||||
<div class="description">专家介绍</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref } from 'vue'; |
||||
const activeIndex = ref(0); |
||||
const filterList = ref(['全部', '科技学科领域', '高新技术', '化学精密', '其他筛选']); |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
.container { |
||||
width: 1200px; |
||||
margin: 0 auto; |
||||
.filter { |
||||
display: flex; |
||||
justify-content: center; |
||||
margin: 40px 0; |
||||
.item { |
||||
width: 136px; |
||||
height: 40px; |
||||
text-align: center; |
||||
line-height: 40px; |
||||
border: 1px solid #ccc; |
||||
margin: 0 20px; |
||||
cursor: pointer; |
||||
} |
||||
.avtive { |
||||
background-color: #013ebc; |
||||
color: #fff; |
||||
} |
||||
} |
||||
.user-list { |
||||
display: grid; |
||||
grid-template-columns: repeat(4, minmax(100px, 1fr)); |
||||
grid-template-rows: repeat(auto - fill, minmax(50px, 100px)); |
||||
gap: 15px; |
||||
.item { |
||||
position: relative; |
||||
width: 287px; |
||||
height: 430px; |
||||
border: 1px solid #013ebc; |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 20px 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
align-items: center; |
||||
.avater { |
||||
width: 216px; |
||||
height: 246px; |
||||
background-color: #ccc; |
||||
margin-top: 10px; |
||||
} |
||||
.name { |
||||
font-size: 30px; |
||||
font-weight: 700; |
||||
color: #333; |
||||
margin-top: 30px; |
||||
} |
||||
.description { |
||||
font-size: 20px; |
||||
color: #555; |
||||
} |
||||
} |
||||
.item::before { |
||||
content: ' '; |
||||
position: absolute; |
||||
top:10px; |
||||
left: -5px; |
||||
display: block; |
||||
width: 25px; |
||||
height: 6px; |
||||
background-color: #013ebc; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,418 +1,377 @@ |
||||
<template> |
||||
<div class="home-page"> |
||||
<div class="main-img-box"> |
||||
<img src="../../../../../assets/images/mainHome/div.png" alt=""> |
||||
<div class="important"> |
||||
<div class="box1"> |
||||
<div class="paper"> |
||||
<div class="fl"> |
||||
<img style="width: 100%; height: 100%" src="../../../../../assets/images/image11.png" alt="" srcset="" /> |
||||
</div> |
||||
<div class="main-content"> |
||||
<!-- 新闻资讯 --> |
||||
<div class="news-information"> |
||||
<h1>新闻资讯</h1> |
||||
<div class="nav-news-box"> |
||||
<div class="nav-item" v-for="item in navNews" :class="{ active: activeNavNew.text === item.text }" |
||||
@click="activeNavNew = item" :key="item.text"> |
||||
<div class="img-box"> |
||||
<img :src="item.img" alt=""> |
||||
<div class="fr"> |
||||
<ul> |
||||
<li> 向着航天强国目标勇毅前进————以习近平通知为核心的党中央关心引领探月工程纪实 </li> |
||||
<li> 在第七个“中国农民丰收节”到来之际，习近平向全国广大农民和工作在“三农”战线上的同志们致以节日... </li> |
||||
<li>李强会见马来西亚最高元首易卜拉欣</li> |
||||
</ul> |
||||
</div> |
||||
<span>{{ item.text }}</span> |
||||
</div> |
||||
<div class="more"> |
||||
<p>更多</p> |
||||
</div> |
||||
<div class="if-item" v-if="activeNavNew.text === navNews[0].text"> |
||||
<div class="all_"> |
||||
<div class="left_"> |
||||
<img src="../../../../../assets/images/mainHome/div.png" alt=""> |
||||
</div> |
||||
<ul class="right_"> |
||||
<li class="" v-for="o in data" :key="o.columnId" |
||||
@click="$router.push(`/main-home/MatchEvaluation/LesserCh/${o.id}`)"> |
||||
<span style="cursor: pointer" class="le_">{{ o.title}}</span> |
||||
<span class="re_">{{o.publishTime}}</span> |
||||
</li> |
||||
<div class="box2"> |
||||
<div class="leftt"> |
||||
<a-carousel arrows style="width: 100%; height: 100%"> |
||||
<template #prevArrow> |
||||
<div class="custom-slick-arrow" style="left: 10px; z-index: 1"> |
||||
<left-circle-outlined /> |
||||
</div> |
||||
</template> |
||||
<template #nextArrow> |
||||
<div class="custom-slick-arrow" style="right: 10px"> |
||||
<right-circle-outlined /> |
||||
</div> |
||||
</template> |
||||
<div v-for="(item, index) in imageList" :key="index" |
||||
><img style="width: 100%; height: 400px" :src="item" alt="" srcset="" |
||||
/></div> </a-carousel |
||||
></div> |
||||
<div class="rightt"> |
||||
<div class="tell"> |
||||
<div class="fl">通知通告</div> |
||||
</div> |
||||
<div class="inner"> |
||||
<ul> |
||||
<li>省科技厅召开党组会传达学习省管主要领导干部学习贯彻</li> |
||||
<li>王浩：建设高水平创新型省份 因地制宜大力发展新质生</li> |
||||
<li>省委第四巡视组省科学技术厅工作动员会议召开</li> |
||||
<li>省科技厅召开厅系统重点工作交流会</li> |
||||
<li>省科技厅召开党组(扩大)会总结党纪学习教育工作</li> |
||||
<li>省科技厅召开党组会传达学习贯彻省委十五届五次全会精神</li> |
||||
<li>建设高水平创新型省份</li> |
||||
<li>学习贯彻省委十五届五次全会精神</li> |
||||
<li>省科技厅召开党组会传达学习省管主要领导干部学习贯彻</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div class="look-more" @click="lookMore(1)"> |
||||
<span>查看更多>></span> |
||||
</div> |
||||
<div class="box3"> |
||||
<img src="../../../../../assets/images/image1.png" alt="" style="width: 100%" /> |
||||
</div> |
||||
|
||||
<!-- 竞赛导航 --> |
||||
<div class="race-navigation"> |
||||
<div class="title_">比赛信息</div> |
||||
<div class="content_"> |
||||
<div class="card_" v-for="o in data2" :key="o.columnId" |
||||
@click="$router.push(`/main-home/MatchEvaluation/LesserCh/${o.id}`)"> |
||||
<div class="img-box"> |
||||
<img :src= "setImageUrl(o.comimg)" alt=""> |
||||
<div class="box4"> |
||||
<div class="inner1"> |
||||
<div class="tell"> |
||||
<div class="fl">通知通告</div> |
||||
</div> |
||||
<div class="inner"> |
||||
<ul> |
||||
<li>省科技厅召开党组会传达学习省管主要领导干部学习贯彻</li> |
||||
<li>王浩：建设高水平创新型省份 因地制宜大力发展新质生</li> |
||||
<li>省委第四巡视组省科学技术厅工作动员会议召开</li> |
||||
<li>省科技厅召开厅系统重点工作交流会</li> |
||||
<li>省科技厅召开党组(扩大)会总结党纪学习教育工作</li> |
||||
<li>省科技厅召开党组会传达学习贯彻省委十五届五次全会精</li> |
||||
<li>建设高水平创新型省份</li> |
||||
<li>学习贯彻省委十五届五次全会精神</li> |
||||
<li>省科技厅召开党组会传达学习省管主要领导干部学习贯彻</li> |
||||
</ul> |
||||
</div> |
||||
<div class="text"> |
||||
{{ o.title}} |
||||
</div> |
||||
<div class="inner2"> |
||||
<div class="tell"> |
||||
<div class="fl">通知通告</div> |
||||
</div> |
||||
<div class="inner"> |
||||
<ul> |
||||
<li>省科技厅召开党组会传达学习省管主要领导干部学习贯彻</li> |
||||
<li>王浩：建设高水平创新型省份 因地制宜大力发展新质生</li> |
||||
<li>省委第四巡视组省科学技术厅工作动员会议召开</li> |
||||
<li>省科技厅召开厅系统重点工作交流会</li> |
||||
<li>省科技厅召开党组(扩大)会总结党纪学习教育工作</li> |
||||
<li>省科技厅召开党组会传达学习贯彻省委十五届五次全会精神</li> |
||||
<li>建设高水平创新型省份</li> |
||||
<li>学习贯彻省委十五届五次全会精神</li> |
||||
<li>省科技厅召开党组会传达学习省管主要领导干部学习贯彻</li> |
||||
</ul> |
||||
</div> |
||||
<div class="look-more" @click="lookMore(2)">查看更多>></div> |
||||
|
||||
</div> |
||||
|
||||
<!-- 研究成果 --> |
||||
<div class="research-result"> |
||||
<div class="re_title">比赛结果</div> |
||||
<div class="re_card_box"> |
||||
<div class="re_card"> |
||||
<div class="re_card_img_box" v-for="o in data3" :key="o.columnId" |
||||
@click="$router.push(`/main-home/MatchEvaluation/LesserCh/${o.id}`)"> |
||||
<img style="cursor: pointer" :src="setImageUrl(o.comimg)" alt=""> |
||||
<div class="text"> |
||||
{{ o.title}} |
||||
</div> |
||||
<div class="box5"> |
||||
<img src="../../../../../assets/images/image3.png" alt="" style="width: 100%" /> |
||||
</div> |
||||
<div class="box6"> |
||||
<div class="share1"> |
||||
<div class="tell"> |
||||
<div class="fl">仪器共享</div> |
||||
</div> |
||||
<div class="instrument"> |
||||
<vue3ScrollSeamless class="scroll-wrap" :classOptions="classOptions" :dataList="list"> |
||||
<ul class="ui-wrap"> |
||||
<li class="li-item" v-for="(item, i) of list" :key="i"> |
||||
<div class="instrumentImage"> |
||||
<img width="100%" src="../../../../../assets/images/image.png" alt="" /> |
||||
<div class="small"> |
||||
<h6>数字无线电综合测试仪</h6> |
||||
<p>分类：电子测量仪器->通讯测量...</p> |
||||
<p>服务次数：0</p> |
||||
<p>鹤壁天海电子信息系统有限公司</p> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
</vue3ScrollSeamless> |
||||
</div> |
||||
|
||||
</div> |
||||
<div class="share2"> |
||||
<div class="a">科研仪器入网</div> |
||||
<div class="a">仪器信息查询</div> |
||||
<div class="b"> |
||||
<div class="bb1">技术交流</div> |
||||
<div class="bb2">数据上报</div> |
||||
</div> |
||||
<div class="look-more" @click="lookMore(3)">查看更多>></div> |
||||
<div class="c">在线预约</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import * as n from './newsImgs' |
||||
import {reactive, ref} from 'vue'; |
||||
import { getindexnews ,getindexcomp,getindexaward} from '/@/api/demo/mainHome'; |
||||
import {useRouter} from 'vue-router' |
||||
const router = useRouter() |
||||
const props = defineProps(['navList']) |
||||
const data3 = reactive<any[]>([]) |
||||
const data2 = reactive<any[]>([]) |
||||
const data = reactive<any[]>([]) |
||||
// 获取数据 |
||||
function getData() { |
||||
getindexnews({ }).then(res => { |
||||
data.length = 0 |
||||
data.push(...res.records as any[]) |
||||
|
||||
<script setup> |
||||
import { ref, reactive } from 'vue'; |
||||
import { vue3ScrollSeamless } from 'vue3-scroll-seamless'; |
||||
let list = reactive([1, 2, 3, 4, 5, 6]); |
||||
const classOptions = { |
||||
limitMoveNum: 2, |
||||
direction: 2, |
||||
}; |
||||
const imageList = ref([ |
||||
'https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0', |
||||
'https://tse1-mm.cn.bing.net/th/id/OIP-C.DOOxGtkUiW8QevWtAxsRtAHaEK?rs=1&pid=ImgDetMain', |
||||
]); |
||||
</script> |
||||
|
||||
}) |
||||
} |
||||
const setImageUrl = (url:any) => { |
||||
return import.meta.env.VITE_GLOB_DOMAIN_URL + '/' + url |
||||
<style scoped lang="less"> |
||||
.important { |
||||
width: 1300px; |
||||
// height: 1800px; |
||||
background-color: #e6e6e6; |
||||
margin: 0px auto; |
||||
// display: flex; |
||||
// align-items: center; |
||||
// justify-content: center; |
||||
} |
||||
function getData2() { |
||||
getindexcomp({ }).then(res => { |
||||
data2.length = 0 |
||||
data2.push(...res.records as any[]) |
||||
|
||||
// return this.data2.map(item => ({ |
||||
// ...item, // 复制原始对象 |
||||
// fullImageUrl: `${import.meta.env.VITE_GLOB_DOMAIN_URL}${item.comimg}` // 添加 URL 前缀 |
||||
// })); |
||||
}) |
||||
.box1 { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 160px; |
||||
background-color: #f6f6f6; |
||||
border-bottom: 2px solid #1b4290; |
||||
} |
||||
|
||||
function getData3() { |
||||
getindexaward({ }).then(res => { |
||||
data3.length = 0 |
||||
data3.push(...res.records as any[]) |
||||
}) |
||||
.paper { |
||||
height: 100%; |
||||
} |
||||
|
||||
getData(); |
||||
|
||||
getData2(); |
||||
getData3(); |
||||
|
||||
|
||||
|
||||
const navNews = [ |
||||
{ img: n.Frame, text: '全部' }, |
||||
/* { img: n.Frame1, text: '通知公告' }, |
||||
{ img: n.Frame2, text: '赛事咨讯' }, |
||||
{ img: n.Frame3, text: '活动速递' }, |
||||
{ img: n.Frame4, text: '政策文件' },*/ |
||||
] |
||||
const activeNavNew = ref(navNews[0]) |
||||
|
||||
function lookMore(i){ |
||||
const item = props.navList[i] |
||||
router.push(item.path+'?id='+item.id) |
||||
.paper .fl { |
||||
width: 110px; |
||||
float: left; |
||||
margin-left: 30px; |
||||
padding-top: 28px; |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.home-page { |
||||
.main-img-box { |
||||
width: 100%; |
||||
height: 350px; |
||||
|
||||
img { |
||||
.img(); |
||||
.paper .fr { |
||||
float: right; |
||||
padding: 38px 170px 0 0; |
||||
} |
||||
.fr ul li { |
||||
list-style: disc; |
||||
font-size: 20px; |
||||
padding-bottom: 12px; |
||||
} |
||||
|
||||
.main-content { |
||||
width: 1220px; |
||||
margin: auto; |
||||
|
||||
&>* { |
||||
width: 100%; |
||||
.fr ul li::marker { |
||||
color: #1b4290; |
||||
} |
||||
|
||||
.news-information { |
||||
|
||||
h1 { |
||||
height: 45px; |
||||
font-weight: 600; |
||||
font-size: 34px; |
||||
color: #333333; |
||||
line-height: 45px; |
||||
text-align: center; |
||||
.box1 .more { |
||||
position: absolute; |
||||
right: 50px; |
||||
bottom: 5px; |
||||
color: #1b4290; |
||||
} |
||||
|
||||
.nav-news-box { |
||||
@color: #ED1E26; |
||||
display: flex; |
||||
width: 100%; |
||||
justify-content: space-evenly; |
||||
align-items: center; |
||||
|
||||
.nav-item { |
||||
display: flex; |
||||
align-items: center; |
||||
font-weight: 400; |
||||
font-size: 22px; |
||||
color: #333; |
||||
text-align: center; |
||||
.box2 { |
||||
height: 450px; |
||||
background-color: #ffffff; |
||||
position: relative; |
||||
cursor: pointer; |
||||
|
||||
.img-box { |
||||
width: 20px; |
||||
height: 20px; |
||||
|
||||
img { |
||||
.img(); |
||||
} |
||||
.leftt { |
||||
position: absolute; |
||||
width: 600px; |
||||
height: 400px; |
||||
margin-top: 20px; |
||||
background-color: #999999; |
||||
} |
||||
|
||||
&.active { |
||||
color: @color; |
||||
|
||||
&::after { |
||||
content: ''; |
||||
.rightt { |
||||
position: absolute; |
||||
left: 0; |
||||
bottom: -2px; |
||||
width: 660px; |
||||
height: 400px; |
||||
right: 0px; |
||||
margin-top: 20px; |
||||
} |
||||
.tell { |
||||
width: 100%; |
||||
height: 2px; |
||||
background-color: @color; |
||||
height: 50px; |
||||
background-color: #e9f3fd; |
||||
} |
||||
.tell .fl { |
||||
width: 120px; |
||||
height: 100%; |
||||
line-height: 50px; |
||||
font-size: 22px; |
||||
color: #fff; |
||||
background-color: #003cb9; |
||||
padding-left: 15px; |
||||
} |
||||
.inner { |
||||
height: calc(400px - 50px); |
||||
margin: 20px 30px; |
||||
overflow: auto; |
||||
} |
||||
|
||||
.inner ul { |
||||
height: 100%; |
||||
padding-left: 23px; |
||||
} |
||||
|
||||
.if-item { |
||||
|
||||
.all_ { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
margin-top: 35px; |
||||
|
||||
.left_ { |
||||
width: 479px; |
||||
height: 270px; |
||||
|
||||
img { |
||||
.img(); |
||||
.inner ul li { |
||||
font-size: 22px; |
||||
list-style-type: disc; |
||||
padding-bottom: 14px; |
||||
color: #404040; |
||||
} |
||||
.inner ul li::marker { |
||||
color: rgb(173, 89, 89); |
||||
} |
||||
|
||||
.right_ { |
||||
width: 740px; |
||||
height: 270px; |
||||
padding: 0 34px 23px; |
||||
background: #F9FBFF; |
||||
|
||||
li { |
||||
@height: 19px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
height: @height; |
||||
margin: 22px 0; |
||||
|
||||
span { |
||||
height: @height; |
||||
line-height: @height; |
||||
font-size: 16px; |
||||
.ove_ellipsis(); |
||||
.box3 { |
||||
padding-top: 30px; |
||||
height: 200px; |
||||
width: 100%; |
||||
background-color: #d3e8fe; |
||||
} |
||||
|
||||
span.le_ { |
||||
width: 480px; |
||||
color: #131313; |
||||
|
||||
.box4 { |
||||
height: 450px; |
||||
background-color: #ffffff; |
||||
position: relative; |
||||
padding-top: 30px; |
||||
} |
||||
.inner1 { |
||||
width: 630px; |
||||
height: 400px; |
||||
|
||||
span.re_ { |
||||
color: rgba(19, 19, 19, 0.46); |
||||
} |
||||
} |
||||
position: absolute; |
||||
left: 0px; |
||||
} |
||||
.inner2 { |
||||
width: 670px; |
||||
height: 400px; |
||||
|
||||
position: absolute; |
||||
right: 0px; |
||||
} |
||||
|
||||
.box5 { |
||||
height: 134px; |
||||
} |
||||
.box6 { |
||||
padding: 20px 0; |
||||
position: relative; |
||||
width: 100%; |
||||
height: 405px; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.race-navigation { |
||||
margin-top: 50px; |
||||
height: 603px; |
||||
padding-bottom: 15px; |
||||
|
||||
.title_ { |
||||
width: 136px; |
||||
height: 45px; |
||||
font-weight: 600; |
||||
font-size: 34px; |
||||
color: #333333; |
||||
line-height: 45px; |
||||
text-align: center; |
||||
margin: auto; |
||||
margin-bottom: 30px; |
||||
.share1 { |
||||
overflow: hidden; |
||||
position: absolute; |
||||
left: 0; |
||||
width: 900px; |
||||
height: 370px; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.content_ { |
||||
width: 100%; |
||||
height: 433px; |
||||
margin-bottom: 40px; |
||||
.instrument { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: space-between; |
||||
|
||||
.card_ { |
||||
width: 290px; |
||||
height: 189px; |
||||
|
||||
.img-box { |
||||
cursor: pointer; |
||||
width: 100%; |
||||
height: 158px; |
||||
margin-bottom: 10px; |
||||
|
||||
img { |
||||
.img(); |
||||
} |
||||
.instrument li { |
||||
display: inline-block; |
||||
margin: 23px 1px; |
||||
width: 231px; |
||||
height: 283px; |
||||
border: 1px solid #ddd; |
||||
margin-right: 20px; |
||||
} |
||||
|
||||
.text { |
||||
height: 21px; |
||||
padding-left: 10px; |
||||
font-size: 16px; |
||||
color: #333333; |
||||
line-height: 21px; |
||||
.ove_ellipsis(); |
||||
} |
||||
.small { |
||||
padding: 15px; |
||||
} |
||||
.small h6 { |
||||
font-size: 14px; |
||||
margin-bottom: 10px; |
||||
} |
||||
.small p { |
||||
font-size: 12px; |
||||
margin-bottom: 5px; |
||||
color: #666666; |
||||
} |
||||
|
||||
.research-result { |
||||
height: 503px; |
||||
margin-bottom: 54px; |
||||
|
||||
.re_title { |
||||
width: 136px; |
||||
height: 45px; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 600; |
||||
font-size: 34px; |
||||
color: #333333; |
||||
line-height: 45px; |
||||
text-align: center; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
margin: auto; |
||||
margin-bottom: 31px; |
||||
.share2 { |
||||
position: absolute; |
||||
right: 0; |
||||
width: 400px; |
||||
height: 370px; |
||||
} |
||||
|
||||
.re_card_box { |
||||
.a { |
||||
width: 100%; |
||||
height: 65px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
.re_card { |
||||
width: 387px; |
||||
height: 428px; |
||||
background: #F9FBFF; |
||||
border-radius: 0px 0px 0px 0px; |
||||
|
||||
.re_card_img_box { |
||||
height: 308px; |
||||
margin-bottom: 29px; |
||||
|
||||
img { |
||||
.img(); |
||||
} |
||||
justify-content: center; |
||||
align-items: center; |
||||
line-height: 50px; |
||||
background-color: #dce4f7; |
||||
margin-bottom: 10px; |
||||
} |
||||
|
||||
.fot_text { |
||||
width: 88px; |
||||
height: 29px; |
||||
font-family: Microsoft YaHei, Microsoft YaHei; |
||||
font-weight: 400; |
||||
font-size: 22px; |
||||
color: #333333; |
||||
line-height: 29px; |
||||
text-align: center; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
margin: auto; |
||||
.b { |
||||
position: relative; |
||||
|
||||
&::after { |
||||
content: ''; |
||||
position: absolute; |
||||
width: 90px; |
||||
height: 2px; |
||||
left: -1px; |
||||
bottom: -2px; |
||||
background-color: #E62129; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
width: 100%; |
||||
height: 65px; |
||||
} |
||||
.bb1 { |
||||
position: absolute; |
||||
left: 0; |
||||
width: 196px; |
||||
height: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
background-color: #dce4f7; |
||||
} |
||||
|
||||
|
||||
|
||||
.img() { |
||||
width: 100%; |
||||
.bb2 { |
||||
position: absolute; |
||||
right: 0; |
||||
width: 196px; |
||||
height: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
background-color: #dce4f7; |
||||
} |
||||
|
||||
.ove_ellipsis() { |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
.c { |
||||
width: 100%; |
||||
height: 130px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
line-height: 50px; |
||||
background-color: #003cba; |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
|
||||
.look-more { |
||||
width: 136px; |
||||
height: 40px; |
||||
margin: auto; |
||||
background-color: #333; |
||||
font-size: 16px; |
||||
color: #fff; |
||||
:deep(.slick-slide) { |
||||
text-align: center; |
||||
line-height: 40px; |
||||
cursor: pointer; |
||||
transition: all .3s; |
||||
|
||||
&:hover { |
||||
transform: translate(0, -2px); |
||||
box-shadow: 1px 3px 5px 0px #ccc; |
||||
} |
||||
height: 400px; |
||||
line-height: 160px; |
||||
overflow: hidden; |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,170 @@ |
||||
<template> |
||||
<div class="contianer"> |
||||
<div class="classify"> |
||||
<div class="item"> |
||||
<div class="left">机构组织</div> |
||||
<div class="right">驻马店实验室(共407台)</div> |
||||
</div> |
||||
<div class="item"> |
||||
<div class="left">机构组织</div> |
||||
<div class="right"><div v-for="i in 15" :key="i">黄淮创新中心</div></div> |
||||
</div> |
||||
<div class="item"> |
||||
<div class="left">机构组织</div> |
||||
<div class="right">驻马店实验室(共407台)</div> |
||||
</div> |
||||
</div> |
||||
<div class="list"> |
||||
<div class="top"> |
||||
<div class="left">已筛选条件</div> |
||||
<div class="right">2</div> |
||||
</div> |
||||
<div class="content"> |
||||
<div class="item" v-for="i in 10" :key="i"> |
||||
<div class="left"></div> |
||||
<div class="right"> |
||||
<div class="info"> |
||||
<div class="title">组合型四极杆轨道离子阱质谱仪 Q Exactive Plus Hybrid Quadrupole-Orbitrap Mass Spectrometer</div> |
||||
<div class="info-list"> |
||||
<ul> |
||||
<li> |
||||
<div class="label">状态</div> |
||||
<div class="count">使用种</div> |
||||
</li> |
||||
<li> |
||||
<div class="label">型号</div> |
||||
<div class="count">Orbitrap Exploris 480</div> |
||||
</li> |
||||
<li> |
||||
<div class="label">管理员</div> |
||||
<div class="count">赵公正、郑婷、张美莹、孙正、李娥</div> |
||||
</li> |
||||
<li> |
||||
<div class="label">所在地点</div> |
||||
<div class="count">Emphasis → 高科创新中心B栋116</div> |
||||
</li> |
||||
<li>查看预约资源</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div class="btn"> |
||||
<div class="booking">机时预约</div> |
||||
<div class="show-info">查看详情</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup></script> |
||||
|
||||
<style scoped lang="less"> |
||||
.contianer { |
||||
width: 1200px; |
||||
margin: 0 auto; |
||||
.classify { |
||||
width: 100%; |
||||
background-color: #fff; |
||||
.item { |
||||
display: flex; |
||||
min-height: 48px; |
||||
|
||||
.left { |
||||
width: 120px; |
||||
background-color: #f1f1f1; |
||||
line-height: 48px; |
||||
padding-left: 20px; |
||||
} |
||||
.right { |
||||
flex: 1; |
||||
line-height: 48px; |
||||
padding: 0 20px; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
div { |
||||
margin-right: 20px; |
||||
} |
||||
} |
||||
} |
||||
.item:not(:last-child) { |
||||
border-bottom: 1px dashed #ccc; |
||||
} |
||||
} |
||||
.list { |
||||
margin-top: 30px; |
||||
background-color: #fff; |
||||
padding: 20px; |
||||
.top { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
.content { |
||||
padding: 20px; |
||||
.item { |
||||
display: flex; |
||||
margin-bottom: 20px; |
||||
.left { |
||||
width: 180px; |
||||
height: 164px; |
||||
background-color: #aaa; |
||||
} |
||||
.right { |
||||
display: flex; |
||||
margin-left: 20px; |
||||
.info { |
||||
// display: flex; |
||||
.title { |
||||
width: 680px; |
||||
font-size: 18px; |
||||
color: #333333; |
||||
} |
||||
.info-list { |
||||
font-size: 12px; |
||||
// margin-top: 10px; |
||||
ul { |
||||
li { |
||||
line-height: 22px; |
||||
display: flex; |
||||
align-items: center; |
||||
.label { |
||||
width: 60px; |
||||
} |
||||
} |
||||
li:last-child { |
||||
color: #002e97; |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.btn { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: space-around; |
||||
div { |
||||
width: 120px; |
||||
height: 42px; |
||||
border-radius: 5px; |
||||
text-align: center; |
||||
line-height: 42px; |
||||
font-size: 14px; |
||||
} |
||||
.booking { |
||||
background-color: #002E97; |
||||
color: #fff |
||||
} |
||||
.show-info{ |
||||
border: 1px solid #002E97; |
||||
color: #002E97; |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,119 @@ |
||||
<template> |
||||
<div class="container"> |
||||
<div class="news-list"> |
||||
<div class="item"> |
||||
|
||||
<div class="right"> |
||||
<div class="title">新闻标题</div> |
||||
<div class="editor"><div>2022-03-24 | 信息来源：国际教育学院</div><div>负责人 | 无糖</div></div> |
||||
<div class="description" |
||||
>小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本</div |
||||
> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 栏目 --> |
||||
<div class="column-list"> |
||||
<div class="title">栏目列表</div> |
||||
<div class="list"> |
||||
<div class="item">全部</div> |
||||
<div class="item">项目申报</div> |
||||
<div class="item">新闻列表</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup></script> |
||||
|
||||
<style scoped lang="less"> |
||||
.container { |
||||
position: relative; |
||||
width: 1200px; |
||||
margin: 0 auto; |
||||
display: flex; |
||||
margin-top: 50px; |
||||
.news-list { |
||||
width: calc(1200px - 415px); |
||||
margin-right: 30px; |
||||
|
||||
.item { |
||||
display: flex; |
||||
width: 100%; |
||||
|
||||
padding-bottom: 45px; |
||||
margin-top: 40px; |
||||
|
||||
.right { |
||||
margin-left: 30px; |
||||
.title { |
||||
font-size: 22px; |
||||
color: #000; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.editor { |
||||
height: 53px; |
||||
position: relative; |
||||
font-size: 14px; |
||||
color: #999; |
||||
font-size: 14px; |
||||
margin-top: 30px; |
||||
margin-left: 40px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
} |
||||
.editor::before { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
width:4px; |
||||
left: -40px; |
||||
height: 53px; |
||||
background-color: #d9d9d9; |
||||
} |
||||
.description { |
||||
margin-top: 30px; |
||||
width: 660px; |
||||
text-indent: 2em; |
||||
line-height: 28px; |
||||
} |
||||
.get-info { |
||||
color: #fff; |
||||
width: 132px; |
||||
height: 40px; |
||||
text-align: center; |
||||
line-height: 40px; |
||||
margin-top: 30px; |
||||
background-color: #002e97; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.column-list { |
||||
position: sticky; |
||||
top: 0; |
||||
width: 385px; |
||||
background-color: #fff; |
||||
height: 755px; |
||||
padding: 30px; |
||||
.title{ |
||||
font-size: 20px; |
||||
font-weight: 600; |
||||
color: #555; |
||||
} |
||||
.list{ |
||||
.item{ |
||||
font-size: 16px; |
||||
color: #555; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
border-bottom: 1px solid #D9D9D9; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,52 @@ |
||||
<template> |
||||
<div class="container"> |
||||
<div class="top-filter"> |
||||
<div :class="activeIndex === index ? 'active item' : 'item'" @click="activeIndex = index" class="item " v-for="(item, index) in filterList" :key="index" |
||||
><component :is="item.icon"></component><div style="margin-left: 10px">{{ item.label }}</div></div |
||||
> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref } from 'vue'; |
||||
import { PartitionOutlined, DollarCircleOutlined } from '@ant-design/icons-vue'; |
||||
const activeIndex = ref(0); |
||||
const filterList = ref([ |
||||
{ label: '科技省厅', icon: PartitionOutlined }, |
||||
{ label: '管理制度', icon: DollarCircleOutlined }, |
||||
{ label: '申报项目', icon: DollarCircleOutlined }, |
||||
{ label: '项目受理', icon: DollarCircleOutlined }, |
||||
{ label: '立项信息', icon: DollarCircleOutlined }, |
||||
{ label: '验收情况', icon: DollarCircleOutlined }, |
||||
{ label: '创新券', icon: DollarCircleOutlined }, |
||||
]); |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
.container { |
||||
width: 1200px; |
||||
margin: 0 auto; |
||||
margin-top: 20px; |
||||
.top-filter { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
.item { |
||||
display: flex; |
||||
justify-content: center; |
||||
|
||||
width: 167px; |
||||
height: 70px; |
||||
text-align: center; |
||||
line-height: 70px; |
||||
cursor: pointer; |
||||
border-radius: 8px; |
||||
box-shadow: 1px 0px 9px 0px rgba(100, 100, 111, 0.1); |
||||
} |
||||
.active { |
||||
color: #fff; |
||||
background-color: #002e97; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,445 @@ |
||||
<template> |
||||
<div class="main-home"> |
||||
<!-- 头部 --> |
||||
<div class="header-box"> |
||||
<div class="nav-center"> |
||||
<div class="title"> 大数据双创应用竞赛管理系统 </div> |
||||
<div class="nav-content"> |
||||
<div class="nav-box"> |
||||
<div class="nav-item" v-for="(item, i) in navItems" :class="{ active: acI === i }" @click="hanRou(item, i)" :key="item.path"> |
||||
{{ item.name }} |
||||
</div> |
||||
</div> |
||||
<!-- <div class="login"> |
||||
登录 |
||||
</div>--> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="fixed"> |
||||
<!-- <div style="width: 100px;height: 100px;cursor: pointer;"> |
||||
<img style="width: 100%;height: 100%;" src="../../../assets/images/mainHome/div(1).png" alt=""> |
||||
</div>--> |
||||
<!-- <div class="bas"></div>--> |
||||
<div class="card bot"> |
||||
<!--<div class="img-box" onclick="window.location.href='http://10.20.15.171:3200/'"><img src="../../../assets/images/mainHome/Frame.png" alt=""></div>--> |
||||
<div class="img-box" onclick="window.location.href='http://127.0.0.1:3200/'" |
||||
><img src="../../../assets/images/mainHome/Frame.png" alt="" |
||||
/></div> |
||||
|
||||
<div class="text">后台管理</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<router-view v-slot="{ Component }"> |
||||
<component :is="Component" :navList="navItems" /> |
||||
</router-view> |
||||
|
||||
<!-- 脚部 --> |
||||
<div class="footer-box"> |
||||
<div class="foo_top"> |
||||
<div class="top_con"> |
||||
<div class="con_left"> |
||||
<div class="img-box"> |
||||
<img src="../../../assets/images/mainHome/2641675928551_3.png" alt="" /> |
||||
</div> |
||||
<div class="text"> |
||||
<!-- <div class="item">主办单位：黄淮学院</div>--> |
||||
<div class="item">河南机电</div> |
||||
</div> |
||||
</div> |
||||
<div class="con_center"> |
||||
<ul> |
||||
<li> |
||||
<div class="tit">友情链接</div> |
||||
<div class="box"> |
||||
<div class="item">河南机电</div> |
||||
<div class="item">中国高等教育博览会</div> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<div class="tit">关于我们</div> |
||||
<div class="box"> |
||||
<div class="item">平台简介</div> |
||||
<div class="item">服务支持</div> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<div class="tit">帮助中心</div> |
||||
<div class="box"> |
||||
<div class="item">平台疑问</div> |
||||
<div class="item">登录疑问</div> |
||||
<div class="item">竞赛疑问</div> |
||||
<div class="item">账号疑问</div> |
||||
<div class="item">密码疑问</div> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<div class="tit">申领账号</div> |
||||
<div class="box"> |
||||
<div class="item">高效管理账号申领</div> |
||||
<div class="item">赛事主办方账号申领</div> |
||||
<div class="item">管理员入口</div> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
<div class="con_right"> |
||||
<div class="img-box"><img src="../../../assets/images/mainHome/image6@2x.png" alt="" /></div> |
||||
<div class="text">扫一扫关注微信公众号</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="foo_bottom"> 竞赛内容版权归内容提供者（机构）所有技术支持：原点科技有限公司豫公网安备：41210678904724号豫1CP备15021338号 </div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { reactive, ref } from 'vue'; |
||||
import { demoNavListApi } from '/@/api/demo/mainHome'; |
||||
import { useRouter } from 'vue-router'; |
||||
const router = useRouter(); |
||||
type item = { |
||||
id: string; |
||||
name: string; |
||||
path: string; |
||||
}; |
||||
|
||||
const navItems: item[] = reactive([ |
||||
{ |
||||
id: '1', |
||||
name: '首页', |
||||
path: '/main-home/HomePage', |
||||
}, |
||||
]); |
||||
|
||||
demoNavListApi().then((res) => { |
||||
if (typeof res[Symbol.iterator] !== 'function') return; |
||||
navItems.length = 1; |
||||
res.forEach((o: any) => { |
||||
navItems.push({ |
||||
id: o.id, |
||||
name: o.name, |
||||
path: '/main-home/MatchEvaluation', |
||||
}); |
||||
}); |
||||
}); |
||||
// @ts-ignore |
||||
const acI = ref(+sessionStorage.getItem('MAIN_HOME_ACI')); |
||||
|
||||
function hanRou(item: item, i: number) { |
||||
if (acI.value === i) return; |
||||
router.push(item.path + '?id=' + item.id); |
||||
acI.value = i; |
||||
sessionStorage.setItem('MAIN_HOME_ACI', JSON.stringify(acI.value)); |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.fixed { |
||||
position: fixed; |
||||
width: 100px; |
||||
height: 202px; |
||||
top: calc(80px + 20px); |
||||
right: 7px; |
||||
z-index: 9; |
||||
|
||||
.card { |
||||
width: 100px; |
||||
height: 100px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
cursor: pointer; |
||||
|
||||
.img-box { |
||||
width: 40px; |
||||
height: 40px; |
||||
margin-bottom: 4px; |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
.text { |
||||
height: 18px; |
||||
font-family: |
||||
Microsoft YaHei, |
||||
Microsoft YaHei; |
||||
font-weight: 400; |
||||
font-size: 13px; |
||||
color: #ffffff; |
||||
line-height: 17px; |
||||
text-align: center; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
} |
||||
} |
||||
|
||||
.bas { |
||||
height: 2px; |
||||
width: 100%; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.bot { |
||||
background: #a7b2c6; |
||||
border-bottom-left-radius: 20px; |
||||
} |
||||
} |
||||
|
||||
.main-home { |
||||
.header-box { |
||||
display: flex; |
||||
height: 80px; |
||||
background: #ffffff; |
||||
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1); |
||||
|
||||
.nav-center { |
||||
@color: #e62129; |
||||
.fl_or_cen(); |
||||
@nav_width: 1280px; |
||||
width: @nav_width; |
||||
margin: auto; |
||||
|
||||
.title { |
||||
font-size: 20px; |
||||
font-weight: bolder; |
||||
} |
||||
|
||||
.nav-content { |
||||
.fl_or_cen(); |
||||
@width: @nav_width - 587px; |
||||
width: @width; |
||||
|
||||
.nav-box { |
||||
.fl_or_cen(); |
||||
width: calc(@width - 203px); |
||||
|
||||
.nav-item { |
||||
color: #333; |
||||
font-size: 18px; |
||||
font-weight: 600; |
||||
position: relative; |
||||
cursor: pointer; |
||||
|
||||
&.active { |
||||
color: @color; |
||||
|
||||
&::after { |
||||
content: ''; |
||||
position: absolute; |
||||
left: 0; |
||||
bottom: -2px; |
||||
width: 100%; |
||||
height: 2px; |
||||
background-color: @color; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.login { |
||||
margin-right: 76px; |
||||
color: @color; |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.footer-box { |
||||
.foo_top { |
||||
height: 154px; |
||||
background: #333333; |
||||
border-radius: 0px 0px 0px 0px; |
||||
|
||||
.top_con { |
||||
width: 1200px; |
||||
height: 100%; |
||||
border-radius: 0px 0px 0px 0px; |
||||
margin: auto; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.con_left { |
||||
height: 104px; |
||||
width: 175px; |
||||
|
||||
.img-box { |
||||
width: 175px; |
||||
height: 60px; |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
.text { |
||||
margin-top: 8px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
.item { |
||||
height: 18px; |
||||
font-family: |
||||
Microsoft YaHei, |
||||
Microsoft YaHei; |
||||
font-weight: 400; |
||||
font-size: 12px; |
||||
color: #ffffff; |
||||
line-height: 18px; |
||||
text-align: center; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.con_center { |
||||
height: 104px; |
||||
width: 550px; |
||||
border-left: 1px solid #ffffff; |
||||
position: relative; |
||||
|
||||
ul { |
||||
width: 485px; |
||||
position: absolute; |
||||
top: 50%; |
||||
transform: translate(0, -50%); |
||||
right: 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
row-gap: 4px; |
||||
|
||||
li { |
||||
height: 19px; |
||||
border-radius: 0px 0px 0px 0px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.tit { |
||||
width: 48px; |
||||
height: 17px; |
||||
font-family: |
||||
PingFang SC, |
||||
PingFang SC; |
||||
font-weight: 600; |
||||
font-size: 12px; |
||||
color: #fbfbfb; |
||||
line-height: 17px; |
||||
text-align: left; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
} |
||||
|
||||
.box { |
||||
width: 382px; |
||||
display: flex; |
||||
|
||||
.item { |
||||
height: 17px; |
||||
font-family: |
||||
Microsoft YaHei, |
||||
Microsoft YaHei; |
||||
font-weight: 400; |
||||
font-size: 12px; |
||||
color: #c9c9c9; |
||||
line-height: 17px; |
||||
text-align: left; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
margin-left: 17px; |
||||
margin-right: 17px; |
||||
white-space: nowrap; |
||||
position: relative; |
||||
|
||||
&:first-child { |
||||
margin-left: 0; |
||||
} |
||||
|
||||
&::before { |
||||
content: ''; |
||||
display: flex; |
||||
width: 2px; |
||||
height: 11px; |
||||
background: #c9c9c9; |
||||
border-radius: 0px 0px 0px 0px; |
||||
position: absolute; |
||||
left: -18px; |
||||
top: 50%; |
||||
transform: translate(0, -50%); |
||||
} |
||||
|
||||
&:first-child::before { |
||||
display: none; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.con_right { |
||||
height: 100px; |
||||
width: 180px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
.img-box { |
||||
width: 100px; |
||||
height: 100px; |
||||
flex-shrink: 0; |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
.text { |
||||
align-self: flex-end; |
||||
width: 60px; |
||||
font-family: |
||||
Microsoft YaHei, |
||||
Microsoft YaHei; |
||||
font-weight: 400; |
||||
font-size: 12px; |
||||
color: #c9c9c9; |
||||
line-height: 17px; |
||||
text-align: center; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.foo_bottom { |
||||
height: 34px; |
||||
background: #666666; |
||||
border-radius: 0px 0px 0px 0px; |
||||
line-height: 34px; |
||||
text-align: center; |
||||
font-size: 12px; |
||||
color: #c9c9c9; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.fl_or_cen() { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue