dlsx
/
ContestPortal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://182.92.169.222:3000/dlsx/ContestPortal

Browse Source
main
significative 8 months ago
parent 438c16be4a cb22b32e92
commit 7b6eeb880a
6 changed files with 3774 additions and 2837 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6214
      pnpm-lock.yaml
  2. 5
      src/Layout/tabbar/index.vue
  3. 161
      src/router/module/constRouter/index.ts
  4. 47
      src/views/news/components/newsDetail.vue
  5. 147
      src/views/news/components/newsList.vue
  6. 37
      src/views/news/index.vue

6214
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

5
src/Layout/tabbar/index.vue
Unescape View File

@ -12,6 +12,11 @@
{{ item.meta.title }} {{ item.meta.title }}
</li> </li>
</ul> </ul>
<!-- <ul>-->
<!-- <router-link v-for="(item, index) in constRouter.children" :key="index" :to="item.path">-->
<!-- {{ item.meta.title }}-->
<!-- </router-link>-->
<!-- </ul>-->
</div> </div>
</div> </div>
<div class="right"> <div class="right">

161
src/router/module/constRouter/index.ts
Unescape View File

@ -1,75 +1,102 @@
export const constRouter: any = export const constRouter: any =
{ {
path: '/', path: '/',
component: () => import('@/Layout/index.vue'), component: () => import('@/Layout/index.vue'),
name: 'Layout', name: 'Layout',
redirect: '/home', redirect: '/home',
meta: { meta: {
icon: '', icon: '',
title: '', title: '',
hidden: false, hidden: false,
},
children: [
{
path: '/home',
name: 'Home',
component: () => import('@/views/home/index.vue'),
meta: {
icon: '',
title: '首页',
hidden: false,
},
}, },
children: [ {
{ path: '/appraise',
path: '/home', name: 'Appraise',
name: 'Home', component: () => import('@/views/appraise/index.vue'),
component: () => import('@/views/home/index.vue'), meta: {
meta: { icon: '',
icon: '', title: '竞赛评价',
title: '首页', hidden: false,
hidden: false,
},
}, },
{ },
path: '/appraise', {
name: 'Appraise', path: '/navigation',
component: () => import('@/views/appraise/index.vue'), name: 'Navigation',
meta: { component: () => import('@/views/navigation/index.vue'),
icon: '', meta: {
title: '竞赛评价', icon: '',
hidden: false, title: '竞赛导航',
}, hidden: false,
}, },
{ },
path: '/navigation', {
name: 'Navigation', path: '/achievement',
component: () => import('@/views/navigation/index.vue'), name: 'Achievement',
meta: { component: () => import('@/views/achievement/index.vue'),
icon: '', meta: {
title: '竞赛导航', icon: '',
hidden: false, title: '竞赛成果',
}, hidden: false,
}, },
{ },
path: '/achievement', {
name: 'Achievement', path: '/competition',
component: () => import('@/views/achievement/index.vue'), name: 'Competition',
meta: { component: () => import('@/views/competition/index.vue'),
icon: '', meta: {
title: '竞赛成果', icon: '',
hidden: false, title: '年度赛事',
}, hidden: false,
}, },
{ },
path: '/competition', {
name: 'Competition', path: '/registration',
component: () => import('@/views/competition/index.vue'), name: 'Registration',
meta: { component: () => import('@/views/registration/index.vue'),
icon: '', meta: {
title: '年度赛事', icon: '',
hidden: false, title: '报名信息',
}, hidden: false,
}, },
{ },
path: '/registration', {
name: 'Registration', path: '/news',
component: () => import('@/views/registration/index.vue'), name: 'news',
meta: { component: () => import('@/views/news/index.vue'),
icon: '', meta: {
title: '报名信息', icon: '',
hidden: false, title: '竞赛新闻',
}, hidden: false,
}, },
], children: [
} {
path: '',
name: 'newsList',
component: () => import('@/views/news/components/newsList.vue'), // 新闻列表组件
},
{
path: '/newsDetail',
name: 'newsDetail',
component: () => import('@/views/news/components/newsDetail.vue'),
meta: {
icon: '',
title: '新闻内容详情',
hidden: true,
}
}
],
},
],
}

47
src/views/news/components/newsDetail.vue
Unescape View File

@ -0,0 +1,47 @@
<template>
<el-button @click="backHandle" type="success">返回</el-button>
<div style="margin-top: 20px;margin-left: 50px;margin-right: 50px">
<p class="list-title">{{ data.title }}</p>
<p class="list-summary">{{ data.summary }}</p>
<div class="center-image">
<img class="list-image" :src="data.imageUrl" alt="News Image">
</div>
<p class="list-time">{{ data.date }}</p>
</div>
</template>
<script setup lang="ts">
import {ref} from 'vue';
import {useRoute, useRouter} from "vue-router";
const router = useRouter();
const route = useRoute();
const backHandle = ()=>{
router.go(-1);
}
const data = ref(route.query)
</script>
<style scoped>
.list-title{
font-size: 25px;
font-weight: 600;
}
.list-summary{
font-size: 20px;
color: #8c8b8b;
margin-top: 10px;
}
.list-time{
font-size: 16px;
color: #999999;
margin-top: 10px;
}
.center-image{
display: flex;
justify-content: center;
margin-top: 20px;
}
.list-image{
width: 500px;
margin-top: 20px;
}
</style>

147
src/views/news/components/newsList.vue
Unescape View File

@ -0,0 +1,147 @@
<template>
<ul>
<li v-for="newsItems in newsData" :key="newsItems.id">
<div class="box-list" @click="handleClick(newsItems)">
<div class="left-box-list">
<p class="list-title">{{ newsItems.title }}</p>
<p class="list-summary">{{ newsItems.summary }}</p>
<p class="list-time">{{ newsItems.date }}</p>
</div>
<img class="news-image" :src="newsItems.imageUrl" alt="News Image">
</div>
<el-divider/>
</li>
</ul>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import {useRouter} from "vue-router";
const router = useRouter()
// 假新闻数据
const newsData = ref([
{
id:1,
title: '科技新闻1',
date: '2024年9月23日',
summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
imageUrl: 'https://img1.xcarimg.com/exp/7971/8041/8084/8581/20130421003812814631.jpg'
},
{
id:2,
title: '体育新闻2',
date: '2024年9月22日',
summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
imageUrl: 'https://pic.rmb.bdstatic.com/50252becb3b391b2cb68ddde4a9c5d9b.jpeg'
},
{
id:3,
title: '科技新闻3',
date: '2024年9月23日',
summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
imageUrl: 'https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641'
},
{
id:4,
title: '科技新闻4',
date: '2024年9月23日',
summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
imageUrl: 'https://img1.baidu.com/it/u=655643694,820713725&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=729'
},
{
id:5,
title: '科技新闻5',
date: '2024年9月23日',
summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
imageUrl: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/00/00/ChMlWV0v7jyIHLj_AAgsbG2bHDcAAL5lQE1rfYACCyE751.jpg'
},
{
id:6,
title: '科技新闻6',
date: '2024年9月23日',
summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
imageUrl: 'https://img2.woyaogexing.com/2023/05/05/1601bcb82e9858e21149cf64086a21db.jpg'
},
{
id:7,
title: '体育新闻7',
date: '2024年9月22日',
summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
imageUrl: 'https://img2.woyaogexing.com/2023/05/05/6280b93c7eb748a24466bd0d3021e3a9.jpg'
},
{
id:8,
title: '科技新闻8',
date: '2024年9月23日',
summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
imageUrl: 'https://img2.woyaogexing.com/2023/05/05/113da83a57b3661c3170c2571007f8e5.jpg'
},
{
id:9,
title: '科技新闻9',
date: '2024年9月23日',
summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
imageUrl: 'https://img1.baidu.com/it/u=515359320,1010066691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=810'
},
{
id:10,
title: '科技新闻10',
date: '2024年9月23日',
summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
imageUrl: 'https://q6.itc.cn/images01/20240613/84d2e170b23b47be86f17ec5009febf9.jpeg'
},
]);
const handleClick = (newsItems)=>{
// router.push(`/news/${newsItems.id}`);
router.push({path:'/newsDetail',query:newsItems})
}
</script>
<style scoped>
.box-list{
display: flex;
/*background: cornsilk;*/
width: 95%;
height: 100px;
margin-left: 30px;
margin-bottom: 10px;
align-items: center;
cursor: pointer; /* 默认鼠标指针形状 */
}
.box-list:hover {
background-color: lightgrey; /* 鼠标悬停时改变背景颜色 */
}
.left-box-list {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
padding-right: 10px;
}
.list-title{
font-size: 22px;
margin-left: 60px;
}
.list-summary{
font-size: 16px;
margin-left: 60px;
margin-top: 15px;
color: #999999;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1 ;
overflow: hidden;
text-overflow: ellipsis; /* 溢出部分显示为省略号 */
max-width: calc(100% - 130px); /* 减去右侧图片宽度和内边距 */
}
.list-time{
margin-left: 60px;
margin-top: 20px;
color: #999999;
}
.news-image {
width: 100px;
height: 80px;
margin-right: 30px;
}
</style>

37
src/views/news/index.vue
Unescape View File

@ -0,0 +1,37 @@
<template>
<div class="container">
<el-card style="max-width: 70%;margin: auto">
<template #header>
<div class="card-header">
<span>新闻推荐</span>
</div>
</template>
<div class="content">
<router-view></router-view>
</div>
</el-card>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.container{
margin-top:100px;
}
.card-header{
font-size: 20px;
font-weight: 600;
margin-left: 100px;
}
.content {
height: 89vh;
overflow-y: scroll;
padding: 0;
margin: 0;
display: block;
}
.content::-webkit-scrollbar {
width: 0;
}
</style>
Write Preview
Loading…
Cancel
Save