135 lines
4.9 KiB
Vue
135 lines
4.9 KiB
Vue
<script setup>
|
|
import LightCard from "@/components/LightCard.vue";
|
|
import {Calendar, CollectionTag, EditPen, Link} from "@element-plus/icons-vue";
|
|
import {computed, reactive, ref} from "vue"
|
|
import Weather from "@/components/Weather.vue";
|
|
import {get} from "@/net";
|
|
import {ElMessage} from "element-plus";
|
|
import TopicEditor from "@/components/TopicEditor.vue";
|
|
|
|
const weather = reactive({
|
|
now: {},
|
|
location: {},
|
|
hourly: [],
|
|
success: false
|
|
})
|
|
const editor = ref(false)
|
|
const list = ref(null)
|
|
|
|
const today = computed(() => {
|
|
const date = new Date()
|
|
return `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
|
|
})
|
|
get('/api/forum/list-topic?page=1&type=0', data => list.value = data)
|
|
|
|
navigator.geolocation.getCurrentPosition(position => {
|
|
const latitude = position.coords.latitude
|
|
const longitude = position.coords.longitude
|
|
get(`/api/forum/weather?latitude=${latitude}&longitude=${longitude}`, data => {
|
|
Object.assign(weather, data)
|
|
weather.success = true
|
|
})
|
|
}, error => {
|
|
console.info(error)
|
|
ElMessage.warning('获取位置信息超时，请检测浏览器设置')
|
|
get(`/api/forum/weather?latitude=39.90499&longitude=116.40529`, data => {
|
|
Object.assign(weather, data)
|
|
weather.success = true
|
|
})
|
|
}, {
|
|
timeout: 3000,
|
|
enableHighAccuracy: true
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div style="display: flex;margin: 20px auto;gap: 20px;max-width: 1000px">
|
|
<div style="flex: 1">
|
|
<light-card>
|
|
<div class="edit-topic">
|
|
<div @click="editor = true"><el-icon><EditPen/></el-icon> 点击发表主题...</div>
|
|
</div>
|
|
</light-card>
|
|
<light-card v-for="item in list" style="margin-top: 10px">
|
|
<div>{{item.title}}</div>
|
|
<div>{{item.text}}</div>
|
|
</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 :data="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>
|
|
<topic-editor :show="editor" @close="editor = false" @created="editor = false"/>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.friend-link {
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.edit-topic {
|
|
background-color: #ececec;
|
|
border-radius: 5px;
|
|
height: 40px;
|
|
color: grey;
|
|
font-size: 14px;
|
|
line-height: 40px;
|
|
padding: 0 10px;
|
|
|
|
:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.dark .edit-topic{
|
|
background-color: #282828;
|
|
}
|
|
</style>
|