完成论坛首页样式
This commit is contained in:
parent
915718a07d
commit
c16b2b0010
@ -5,6 +5,7 @@
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="//lib.baomitu.com/element-plus/2.2.32/index.css"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/qweather-icons@1.5.0/font/qweather-icons.css" rel="stylesheet">
|
||||
<title>Vite App</title>
|
||||
<style>
|
||||
body {
|
||||
|
||||
13
my-project-frontend/src/components/LightCard.vue
Normal file
13
my-project-frontend/src/components/LightCard.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="light-card">
|
||||
<slot/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.light-card {
|
||||
background-color: var(--el-bg-color);
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
35
my-project-frontend/src/components/Weather.vue
Normal file
35
my-project-frontend/src/components/Weather.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div style="display: flex;justify-content: space-between;margin: 10px 20px">
|
||||
<div style="font-size: 45px;color: grey">
|
||||
<i class="qi-301-fill"></i>
|
||||
</div>
|
||||
<div style="font-weight: bold;text-align: center">
|
||||
<div style="font-size: 25px">20℃</div>
|
||||
<div style="font-size: 15px">多云</div>
|
||||
</div>
|
||||
<div style="margin-top: 13px">
|
||||
<div style="font-size: 15px">中国 四川省</div>
|
||||
<div style="font-size: 14px;color: grey">成都市 成华区</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider style="margin: 10px 0"/>
|
||||
<div style="display: grid;grid-template-columns: repeat(5, 1fr);text-align: center">
|
||||
<div v-for="item in 5">
|
||||
<div style="font-size: 13px">{{item}}时</div>
|
||||
<div style="font-size: 23px">
|
||||
<i class="qi-301-fill"></i>
|
||||
</div>
|
||||
<div style="font-size: 12px">20℃</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -29,6 +29,10 @@ const router = createRouter({
|
||||
component: () => import('@/views/IndexView.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'topic-list',
|
||||
component: () => import('@/views/forum/TopicList.vue')
|
||||
}, {
|
||||
path: 'user-setting',
|
||||
name: 'user-setting',
|
||||
component: () => import('@/views/settings/UserSetting.vue')
|
||||
|
||||
@ -89,7 +89,7 @@ function userLogout() {
|
||||
<el-icon><Location/></el-icon>
|
||||
<span><b>校园论坛</b></span>
|
||||
</template>
|
||||
<el-menu-item index="1-1">
|
||||
<el-menu-item index="/index">
|
||||
<template #title>
|
||||
<el-icon><ChatDotSquare/></el-icon>
|
||||
帖子广场
|
||||
|
||||
107
my-project-frontend/src/views/forum/TopicList.vue
Normal file
107
my-project-frontend/src/views/forum/TopicList.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<script setup>
|
||||
import LightCard from "@/components/LightCard.vue";
|
||||
import {Calendar, CollectionTag, EditPen, Link} from "@element-plus/icons-vue";
|
||||
import Weather from "@/components/Weather.vue";
|
||||
import {computed} from "vue";
|
||||
|
||||
const today = computed(() => {
|
||||
const date = new Date()
|
||||
return `${date.getFullYear()} 年 ${date.getMonth()} 月 ${date.getDay()} 日`
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flex;margin: 20px auto;gap: 20px;max-width: 900px">
|
||||
<div style="flex: 1">
|
||||
<light-card>
|
||||
<div class="create-topic">
|
||||
<el-icon><EditPen/></el-icon> 点击发表主题...
|
||||
</div>
|
||||
</light-card>
|
||||
<light-card style="margin-top: 10px;height: 30px">
|
||||
</light-card>
|
||||
<div style="margin-top: 10px;display: flex;flex-direction: column;gap: 10px">
|
||||
<light-card style="height: 150px" v-for="item in 10">
|
||||
|
||||
</light-card>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 280px">
|
||||
<div style="position: sticky;top: 20px">
|
||||
<light-card>
|
||||
<div style="font-weight: bold">
|
||||
<el-icon><CollectionTag/></el-icon>
|
||||
论坛公告
|
||||
</div>
|
||||
<el-divider style="margin: 10px 0"/>
|
||||
<div style="font-size: 14px;margin: 10px;color: grey">
|
||||
为认真学习宣传贯彻党的二十大精神,深入贯彻习近平强军思想,
|
||||
作为迎接办学70周年系列学术活动之一,国防科技大学将于2022年11月24日至26日在长沙举办“国防科技
|
||||
</div>
|
||||
</light-card>
|
||||
<light-card style="margin-top: 10px">
|
||||
<div style="font-weight: bold">
|
||||
<el-icon><Calendar/></el-icon>
|
||||
天气信息
|
||||
</div>
|
||||
<el-divider style="margin: 10px 0"/>
|
||||
<weather/>
|
||||
</light-card>
|
||||
<light-card style="margin-top: 10px">
|
||||
<div class="info-text">
|
||||
<div>当前日期</div>
|
||||
<div>{{today}}</div>
|
||||
</div>
|
||||
<div class="info-text">
|
||||
<div>当期IP地址</div>
|
||||
<div>127.0.0.1</div>
|
||||
</div>
|
||||
</light-card>
|
||||
<div style="font-size: 14px;margin-top: 10px;color: grey">
|
||||
<el-icon><Link/></el-icon>
|
||||
友情链接
|
||||
<el-divider style="margin: 10px 0"/>
|
||||
</div>
|
||||
<div style="display: grid;grid-template-columns: repeat(2, 1fr);grid-gap: 10px;margin-top: 10px">
|
||||
<div class="friend-link">
|
||||
<el-image style="height: 100%" src="https://element-plus.org/images/js-design-banner.jpg"/>
|
||||
</div>
|
||||
<div class="friend-link">
|
||||
<el-image style="height: 100%" src="https://element-plus.org/images/vform-banner.png"/>
|
||||
</div>
|
||||
<div class="friend-link">
|
||||
<el-image style="height: 100%" src="https://element-plus.org/images/sponsors/jnpfsoft.jpg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.info-text {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: grey;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.friend-link {
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.create-topic {
|
||||
background-color: #efefef;
|
||||
border-radius: 5px;
|
||||
height: 40px;
|
||||
color: grey;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
padding: 0 10px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user