-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
update
Showing
10 changed files
with
908 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,56 +1,22 @@ | ||
<template> | ||
<div class="container"> | ||
<h1>💖 Vue 3 + Electron</h1> | ||
<p>Welcome to your Vue 3 Electron application.</p> | ||
<div v-if="data" class="content"> | ||
<img :src="data.image" alt="Mock Image" class="mock-image" /> | ||
<p class="mock-text">{{ data.text }}</p> | ||
</div> | ||
<div class="app"> | ||
<router-view></router-view> | ||
</div> | ||
</template> | ||
|
||
<script setup> | ||
import { ref, onMounted } from 'vue'; | ||
const data = ref(null); | ||
onMounted(async () => { | ||
try { | ||
const response = await fetch('http://localhost:3000/api/mock'); // Replace with your local API endpoint | ||
if (response.ok) { | ||
data.value = await response.json(); | ||
} else { | ||
console.error('Failed to fetch data'); | ||
} | ||
} catch (error) { | ||
console.error('Error fetching data:', error); | ||
} | ||
}); | ||
</script> | ||
|
||
<style> | ||
.container { | ||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, | ||
Arial, sans-serif; | ||
margin: auto; | ||
max-width: 38rem; | ||
padding: 2rem; | ||
text-align: center; | ||
} | ||
.content { | ||
margin-top: 2rem; | ||
} | ||
.mock-image { | ||
max-width: 100%; | ||
height: auto; | ||
border-radius: 8px; | ||
margin-bottom: 1rem; | ||
* { | ||
margin: 0; | ||
padding: 0; | ||
box-sizing: border-box; | ||
} | ||
.mock-text { | ||
font-size: 1.2rem; | ||
color: #333; | ||
.app { | ||
width: 100vw; | ||
height: 100vh; | ||
overflow-x: hidden; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import { createRouter, createWebHashHistory } from 'vue-router' | ||
|
||
const router = createRouter({ | ||
history: createWebHashHistory(), | ||
routes: [ | ||
{ | ||
path: '/', | ||
name: 'Home', | ||
component: () => import('../views/Home.vue') | ||
}, | ||
{ | ||
path: '/history', | ||
name: 'History', | ||
component: () => import('../views/History.vue') | ||
}, | ||
{ | ||
path: '/education', | ||
name: 'Education', | ||
component: () => import('../views/Education.vue') | ||
}, | ||
{ | ||
path: '/achievement', | ||
name: 'Achievement', | ||
component: () => import('../views/Achievement.vue') | ||
} | ||
] | ||
}) | ||
|
||
export default router |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,203 @@ | ||
<template> | ||
<div class="achievement"> | ||
<div class="content"> | ||
<h2>建设成就</h2> | ||
|
||
<!-- 数据概览卡片 --> | ||
<div class="statistics-cards"> | ||
<el-card v-for="stat in statistics" :key="stat.id" class="stat-card"> | ||
<el-statistic :title="stat.title" :value="stat.value" :precision="stat.precision"> | ||
<template #suffix> | ||
<span class="suffix">{{ stat.suffix }}</span> | ||
</template> | ||
</el-statistic> | ||
<div class="trend"> | ||
<span :class="['trend-value', stat.trend > 0 ? 'up' : 'down']"> | ||
{{ stat.trend > 0 ? '+' : '' }}{{ stat.trend }}% | ||
</span> | ||
<span class="trend-label">较上年</span> | ||
</div> | ||
</el-card> | ||
</div> | ||
|
||
<!-- 成就展示 --> | ||
<div class="achievements-list"> | ||
<el-timeline> | ||
<el-timeline-item | ||
v-for="item in achievements" | ||
:key="item.id" | ||
:timestamp="item.year" | ||
placement="top" | ||
type="danger" | ||
> | ||
<el-card class="achievement-card"> | ||
<h3>{{ item.title }}</h3> | ||
<p>{{ item.description }}</p> | ||
<el-image | ||
:src="item.image" | ||
fit="cover" | ||
class="achievement-image" | ||
:preview-src-list="[item.image]" | ||
/> | ||
</el-card> | ||
</el-timeline-item> | ||
</el-timeline> | ||
</div> | ||
|
||
<el-button type="primary" @click="$router.push('/')" class="back-btn">返回首页</el-button> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script setup> | ||
import { ref } from 'vue' | ||
const statistics = ref([ | ||
{ | ||
id: 1, | ||
title: '党员总数', | ||
value: 9514, | ||
suffix: '万人', | ||
precision: 0, | ||
trend: 2.8 | ||
}, | ||
{ | ||
id: 2, | ||
title: '基层党组织', | ||
value: 485.2, | ||
suffix: '万个', | ||
precision: 1, | ||
trend: 3.2 | ||
}, | ||
{ | ||
id: 3, | ||
title: '党建活动参与度', | ||
value: 98.6, | ||
suffix: '%', | ||
precision: 1, | ||
trend: 4.5 | ||
}, | ||
{ | ||
id: 4, | ||
title: '群众满意度', | ||
value: 96.8, | ||
suffix: '%', | ||
precision: 1, | ||
trend: 2.3 | ||
} | ||
]) | ||
const achievements = ref([ | ||
{ | ||
id: 1, | ||
year: '2023年', | ||
title: '全面推进乡村振兴', | ||
description: '持续巩固拓展脱贫攻坚成果,全面推进乡村振兴,农村居民人均可支配收入稳步增长。', | ||
image: 'https://img.zcool.cn/community/01f26a5d8e4515a8012060be92a0da.jpg@1280w_1l_2o_100sh.jpg' | ||
}, | ||
{ | ||
id: 2, | ||
year: '2022年', | ||
title: '共同富裕示范区建设', | ||
description: '扎实推进共同富裕示范区建设,城乡居民收入比持续缩小,基本公共服务均等化水平明显提高。', | ||
image: 'https://img.zcool.cn/community/0152695d8e4515a8012060bef30901.jpg@1280w_1l_2o_100sh.jpg' | ||
}, | ||
{ | ||
id: 3, | ||
year: '2021年', | ||
title: '全面建成小康社会', | ||
description: '如期打赢脱贫攻坚战,完成新时代脱贫攻坚目标任务,全面建成小康社会。', | ||
image: 'https://img.zcool.cn/community/01f2695d8e4515a8012060bef01385.jpg@1280w_1l_2o_100sh.jpg' | ||
} | ||
]) | ||
</script> | ||
|
||
<style scoped> | ||
.achievement { | ||
min-height: 100vh; | ||
background: url('https://img.zcool.cn/community/01526a5d8e4515a8012060be92c8c9.jpg@1280w_1l_2o_100sh.jpg') no-repeat center center; | ||
background-size: cover; | ||
padding: 2rem; | ||
} | ||
.content { | ||
background: rgba(255, 255, 255, 0.95); | ||
padding: 2rem; | ||
border-radius: 10px; | ||
max-width: 1200px; | ||
margin: 0 auto; | ||
} | ||
h2 { | ||
color: #c92323; | ||
text-align: center; | ||
margin-bottom: 2rem; | ||
font-size: 2rem; | ||
} | ||
.statistics-cards { | ||
display: grid; | ||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | ||
gap: 1.5rem; | ||
margin-bottom: 3rem; | ||
} | ||
.stat-card { | ||
text-align: center; | ||
padding: 1rem; | ||
} | ||
.trend { | ||
margin-top: 0.5rem; | ||
font-size: 0.9rem; | ||
} | ||
.trend-value { | ||
font-weight: bold; | ||
margin-right: 0.5rem; | ||
} | ||
.trend-value.up { | ||
color: #67c23a; | ||
} | ||
.trend-value.down { | ||
color: #f56c6c; | ||
} | ||
.trend-label { | ||
color: #909399; | ||
} | ||
.achievements-list { | ||
margin: 2rem 0; | ||
} | ||
.achievement-card { | ||
margin-bottom: 1rem; | ||
} | ||
.achievement-card h3 { | ||
color: #c92323; | ||
margin-bottom: 1rem; | ||
} | ||
.achievement-image { | ||
width: 100%; | ||
height: 200px; | ||
object-fit: cover; | ||
border-radius: 4px; | ||
margin-top: 1rem; | ||
} | ||
.back-btn { | ||
display: block; | ||
margin: 2rem auto 0; | ||
} | ||
.suffix { | ||
margin-left: 4px; | ||
font-size: 0.9em; | ||
color: #606266; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,129 @@ | ||
<template> | ||
<div class="education"> | ||
<div class="content"> | ||
<h2>党建教育</h2> | ||
<div class="course-grid"> | ||
<el-card v-for="course in courses" :key="course.id" class="course-card"> | ||
<img :src="course.image" class="course-image" /> | ||
<h3>{{ course.title }}</h3> | ||
<p>{{ course.description }}</p> | ||
<div class="card-footer"> | ||
<el-button type="danger" @click="startLearning(course)">开始学习</el-button> | ||
<span class="study-count">{{ course.studyCount }}人已学习</span> | ||
</div> | ||
</el-card> | ||
</div> | ||
<el-button type="primary" @click="$router.push('/')" class="back-btn">返回首页</el-button> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script setup> | ||
import { ref } from 'vue' | ||
import { ElMessage } from 'element-plus' | ||
const courses = ref([ | ||
{ | ||
id: 1, | ||
title: '习近平新时代中国特色社会主义思想', | ||
description: '深入学习贯彻习近平新时代中国特色社会主义思想,坚持和发展中国特色社会主义。', | ||
image: 'https://img.zcool.cn/community/01c2685d8e4515a8012060be1dd913.jpg@1280w_1l_2o_100sh.jpg', | ||
studyCount: 2345 | ||
}, | ||
{ | ||
id: 2, | ||
title: '党的二十大精神解读', | ||
description: '全面学习贯彻党的二十大精神,以中国式现代化全面推进中华民族伟大复兴。', | ||
image: 'https://img.zcool.cn/community/0152685d8e4515a8012060bea5a3fa.jpg@1280w_1l_2o_100sh.jpg', | ||
studyCount: 1890 | ||
}, | ||
{ | ||
id: 3, | ||
title: '党史学习教育', | ||
description: '学习百年党史,汲取奋进力量,深刻把握党的历史发展规律和大势。', | ||
image: 'https://img.zcool.cn/community/01c26a5d8e4515a8012060be231e41.jpg@1280w_1l_2o_100sh.jpg', | ||
studyCount: 2156 | ||
} | ||
]) | ||
const startLearning = (course) => { | ||
ElMessage({ | ||
message: `开始学习: ${course.title}`, | ||
type: 'success' | ||
}) | ||
} | ||
</script> | ||
|
||
<style scoped> | ||
.education { | ||
min-height: 100vh; | ||
background: url('https://img.zcool.cn/community/019f1e5d8e4515a8012060bef7a001.jpg@1280w_1l_2o_100sh.jpg') no-repeat center center; | ||
background-size: cover; | ||
padding: 2rem; | ||
} | ||
.content { | ||
background: rgba(255, 255, 255, 0.95); | ||
padding: 2rem; | ||
border-radius: 10px; | ||
max-width: 1200px; | ||
margin: 0 auto; | ||
} | ||
h2 { | ||
color: #c92323; | ||
text-align: center; | ||
margin-bottom: 2rem; | ||
font-size: 2rem; | ||
} | ||
.course-grid { | ||
display: grid; | ||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | ||
gap: 2rem; | ||
margin-bottom: 2rem; | ||
} | ||
.course-card { | ||
transition: transform 0.3s ease; | ||
} | ||
.course-card:hover { | ||
transform: translateY(-5px); | ||
} | ||
.course-image { | ||
width: 100%; | ||
height: 200px; | ||
object-fit: cover; | ||
border-radius: 4px; | ||
margin-bottom: 1rem; | ||
} | ||
h3 { | ||
color: #333; | ||
margin: 1rem 0; | ||
} | ||
p { | ||
color: #666; | ||
margin-bottom: 1rem; | ||
min-height: 3em; | ||
} | ||
.card-footer { | ||
display: flex; | ||
justify-content: space-between; | ||
align-items: center; | ||
} | ||
.study-count { | ||
color: #999; | ||
font-size: 0.9rem; | ||
} | ||
.back-btn { | ||
display: block; | ||
margin: 2rem auto 0; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
<template> | ||
<div class="history"> | ||
<div class="content"> | ||
<h2>党史学习教育</h2> | ||
<div class="timeline"> | ||
<el-timeline> | ||
<el-timeline-item | ||
v-for="(event, index) in historicalEvents" | ||
:key="index" | ||
:timestamp="event.year" | ||
placement="top" | ||
type="danger" | ||
> | ||
<h3>{{ event.title }}</h3> | ||
<p>{{ event.description }}</p> | ||
</el-timeline-item> | ||
</el-timeline> | ||
</div> | ||
<el-button type="primary" @click="$router.push('/')" class="back-btn">返回首页</el-button> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script setup> | ||
const historicalEvents = [ | ||
{ | ||
year: '1921年', | ||
title: '中国共产党成立', | ||
description: '中国共产党第一次全国代表大会在上海召开,宣告中国共产党的诞生。' | ||
}, | ||
{ | ||
year: '1949年', | ||
title: '中华人民共和国成立', | ||
description: '毛泽东主席在天安门城楼上庄严宣告中华人民共和国成立。' | ||
}, | ||
{ | ||
year: '1978年', | ||
title: '改革开放', | ||
description: '十一届三中��会召开,确立改革开放政策,开启了中国特色社会主义新征程。' | ||
} | ||
] | ||
</script> | ||
|
||
<style scoped> | ||
.history { | ||
min-height: 100vh; | ||
background: url('https://img.zcool.cn/community/01a1595d8e4515a8012060be92c8c9.jpg@1280w_1l_2o_100sh.jpg') no-repeat center center; | ||
background-size: cover; | ||
padding: 2rem; | ||
} | ||
.content { | ||
background: rgba(255, 255, 255, 0.9); | ||
padding: 2rem; | ||
border-radius: 10px; | ||
max-width: 800px; | ||
margin: 0 auto; | ||
} | ||
h2 { | ||
color: #c92323; | ||
text-align: center; | ||
margin-bottom: 2rem; | ||
} | ||
.back-btn { | ||
display: block; | ||
margin: 2rem auto 0; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
<template> | ||
<div class="home"> | ||
<div class="hero"> | ||
<h1>不忘初心 牢记使命</h1> | ||
<p>传承红色基因,弘扬革命精神</p> | ||
<div class="button-group"> | ||
<el-button type="danger" size="large" @click="$router.push('/history')">党史学习</el-button> | ||
<el-button type="danger" size="large" @click="$router.push('/education')">党建教育</el-button> | ||
<el-button type="danger" size="large" @click="$router.push('/achievement')">建设成就</el-button> | ||
</div> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script setup> | ||
</script> | ||
|
||
<style scoped> | ||
.home { | ||
height: 100vh; | ||
background: url('https://img.zcool.cn/community/01a9445d8e4515a8012060be00429d.jpg@1280w_1l_2o_100sh.jpg') no-repeat center center; | ||
background-size: cover; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
color: white; | ||
text-align: center; | ||
} | ||
.hero { | ||
background: rgba(0, 0, 0, 0.5); | ||
padding: 2rem; | ||
border-radius: 10px; | ||
} | ||
h1 { | ||
font-size: 3rem; | ||
margin-bottom: 1rem; | ||
} | ||
p { | ||
font-size: 1.5rem; | ||
margin-bottom: 2rem; | ||
} | ||
.button-group { | ||
display: flex; | ||
gap: 1rem; | ||
justify-content: center; | ||
} | ||
</style> |