确定论坛基本样式，添加天气组件展示效果
This commit is contained in:
parent
6831b13024
commit
91b931f306
@ -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 {
|
||||
|
||||
17
my-project-frontend/src/components/LightCard.vue
Normal file
17
my-project-frontend/src/components/LightCard.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="light-card">
|
||||
<slot/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.light-card {
|
||||
background-color: var(--el-bg-color);
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
64
my-project-frontend/src/components/Weather.vue
Normal file
64
my-project-frontend/src/components/Weather.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<script setup>
|
||||
const data = {
|
||||
location: '中国 四川省',
|
||||
city: '成都市',
|
||||
temperature: 22,
|
||||
icon: '101',
|
||||
text: '多云',
|
||||
hourly: [
|
||||
{
|
||||
icon: '100',
|
||||
temperature: 22,
|
||||
time: '1时'
|
||||
}, {
|
||||
icon: '102',
|
||||
temperature: 30,
|
||||
time: '2时'
|
||||
}, {
|
||||
icon: '101',
|
||||
temperature: 21,
|
||||
time: '3时'
|
||||
}, {
|
||||
icon: '103',
|
||||
temperature: 25,
|
||||
time: '4时'
|
||||
}, {
|
||||
icon: '104',
|
||||
temperature: 24,
|
||||
time: '5时'
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div style="display: flex;justify-content: space-between;margin: 10px 20px">
|
||||
<div style="font-size: 45px">
|
||||
<i :class="`qi-${data.icon}-fill`"></i>
|
||||
</div>
|
||||
<div style="font-weight: bold;text-align: center">
|
||||
<div style="font-size: 25px">{{data.temperature}}℃</div>
|
||||
<div style="font-size: 15px">{{data.text}}</div>
|
||||
</div>
|
||||
<div style="margin-top: 13px">
|
||||
<div style="font-size: 15px">{{data.city}}</div>
|
||||
<div style="font-size: 14px;color: grey">{{data.location}}</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 data.hourly">
|
||||
<div style="font-size: 13px">{{item.time}}</div>
|
||||
<div style="font-size: 23px">
|
||||
<i :class="`qi-${item.icon}-fill`"></i>
|
||||
</div>
|
||||
<div style="font-size: 12px">{{item.temperature}}℃</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -29,6 +29,10 @@ const router = createRouter({
|
||||
component: () => import('@/views/IndexView.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'post-list',
|
||||
component: () => import('@/views/forum/TopicList.vue')
|
||||
}, {
|
||||
path: 'user-setting',
|
||||
name: 'user-setting',
|
||||
component: () => import('@/views/settings/UserSetting.vue')
|
||||
|
||||
@ -93,7 +93,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>
|
||||
帖子广场
|
||||
|
||||
77
my-project-frontend/src/views/forum/TopicList.vue
Normal file
77
my-project-frontend/src/views/forum/TopicList.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<script setup>
|
||||
import LightCard from "@/components/LightCard.vue";
|
||||
import {Calendar, CollectionTag, Link} from "@element-plus/icons-vue";
|
||||
import {computed} from "vue"
|
||||
import Weather from "@/components/Weather.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>
|
||||
|
||||
</light-card>
|
||||
</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="margin: 10px;font-size: 14px;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 style="display: flex;justify-content: space-between;color: grey;font-size: 14px">
|
||||
<div>当前日期</div>
|
||||
<div>{{today}}</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;color: grey;font-size: 14px">
|
||||
<div>当前IP地址</div>
|
||||
<div><b>127.0.0.1</b></div>
|
||||
</div>
|
||||
</light-card>
|
||||
<div style="margin-top: 10px;color: grey;font-size: 14px">
|
||||
<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 scoped>
|
||||
.friend-link {
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user