refactor: main page updated
This commit is contained in:
merlin
@@ -84,3 +84,7 @@ body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.el-scrollbar__view{
|
||||
height: 100%;
|
||||
}
|
||||
@@ -3,9 +3,9 @@
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
h1 {
|
||||
.show-top-text h2{
|
||||
padding: 10px;
|
||||
font-size: 30px;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
margin: auto;
|
||||
font-style: italic;
|
||||
@@ -15,6 +15,9 @@ h1 {
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
}
|
||||
.show-top-text{
|
||||
text-align: center;
|
||||
}
|
||||
.newsbox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -27,15 +30,23 @@ h1 {
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
flex: 2;
|
||||
height: 100px;
|
||||
}
|
||||
.newspic {
|
||||
display: inline-block;
|
||||
background-color: #5b5a5a;
|
||||
width: 170px;
|
||||
height: 110px;
|
||||
width: 20%;
|
||||
min-width: 100px;
|
||||
max-width: 130px;
|
||||
height: 100%;
|
||||
}
|
||||
.newscontent {
|
||||
margin-right: auto;
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.search-input{
|
||||
width: 70%;
|
||||
margin: auto
|
||||
}
|
||||
@@ -2,10 +2,11 @@
|
||||
<div class="blog">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-menu :default-active="activeMenu" mode="horizontal" :ellipsis="false" class="menu">
|
||||
<el-menu :default-active="activeMenu" mode="horizontal" :ellipsis="false" class="menu"
|
||||
menu-trigger="click">
|
||||
<router-link to="/"><el-menu-item index="1">首页</el-menu-item></router-link>
|
||||
<router-link><el-menu-item index="2">参与项目</el-menu-item></router-link>
|
||||
<router-link><el-menu-item index="3">联系站长</el-menu-item></router-link>
|
||||
<router-link><el-menu-item index="2">文章</el-menu-item></router-link>
|
||||
<!-- <router-link><el-menu-item index="3">联系站长</el-menu-item></router-link> -->
|
||||
<el-sub-menu index="4" class="sub-menu">
|
||||
<template #title>
|
||||
在线应用
|
||||
@@ -288,7 +289,8 @@ const getCode = async () => {
|
||||
}
|
||||
|
||||
.blog-content {
|
||||
width: 100%;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -348,4 +350,16 @@ const getCode = async () => {
|
||||
background-color: #ececec;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.blog-content {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,64 +1,122 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<el-row :span="24" style="height: 100%;">
|
||||
<el-col :span="5">
|
||||
<el-row>
|
||||
<el-col :span="24" style="text-align: right;">
|
||||
<h1>欢迎来到我的博客</h1>
|
||||
<p class="welcome">Welcome to Merlin's blog</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="19" style="height: 100%; border-left: 1px solid #eee;">
|
||||
<el-row style="height: 10%;">
|
||||
<el-col :span="24">
|
||||
<h1 style="font-size: 35px;padding-left: 15px;">最新消息:</h1>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="height: 90%;">
|
||||
<el-col :span="24" style="height: 100%; border-left: 1px solid #eee; border-right: 1px solid #eee;">
|
||||
<el-row style="height: 30%;">
|
||||
<el-col :span="24" style="height: 100%;">
|
||||
<el-scrollbar class="newsbox">
|
||||
<div class="news" v-for="item in news" @click="openDetails(item.a_id)">
|
||||
<div class="newspic">
|
||||
<img :src="item.pic" alt="芜湖" />
|
||||
</div>
|
||||
<div class="newscontent">
|
||||
<h2>{{ item.n_title }}</h2>
|
||||
<p>{{ item.synopsis }}</p>
|
||||
<p class="date">{{ item.published }}</p>
|
||||
</div>
|
||||
|
||||
<div class="show-top-text">
|
||||
<h2>Merlin`s blog</h2>
|
||||
</div>
|
||||
<div class="search-input">
|
||||
<el-input v-model="search_text" placeholder="Type something">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<search />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="height: 60%;">
|
||||
<el-col :span="24" style="height: 100%;">
|
||||
<div class="news" v-for="item in news" @click="openDetails(item.a_id)">
|
||||
<div class="newspic">
|
||||
<img :src="item.pic" alt="芜湖" />
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
|
||||
<div class="newscontent">
|
||||
<h2>{{ item.n_title }}</h2>
|
||||
<p class="date">{{ item.published }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="dialogVisible" title="Tips" :width="dialogWidth" :before-close="handleClose">
|
||||
<span>This is a message</span>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogVisible = false">
|
||||
Confirm
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import '@/styles/show.css'
|
||||
import axios from 'axios'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { onMounted, ref, computed } from 'vue'
|
||||
import { userInfoStore } from '@/store/store'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { viewDetailsStore } from '@/store/details'
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
|
||||
const userinfo = userInfoStore()
|
||||
const details = viewDetailsStore()
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const dialogVisible = ref(true);
|
||||
|
||||
const search_text = ref('')
|
||||
|
||||
|
||||
const pageSize = 10
|
||||
const pageSize = 5
|
||||
const page = 1
|
||||
const news = ref([
|
||||
{
|
||||
a_id: '1',
|
||||
n_title: '1',
|
||||
synopsis: '1',
|
||||
published: '1',
|
||||
pic: '1'
|
||||
},
|
||||
{
|
||||
a_id: '2',
|
||||
n_title: '2',
|
||||
synopsis: '2',
|
||||
published: '2',
|
||||
pic: '2'
|
||||
},
|
||||
{
|
||||
a_id: '3',
|
||||
n_title: '3',
|
||||
synopsis: '3',
|
||||
published: '3',
|
||||
pic: '3'
|
||||
},
|
||||
{
|
||||
a_id: '1',
|
||||
n_title: '1',
|
||||
synopsis: '1',
|
||||
published: '1',
|
||||
pic: '1'
|
||||
},
|
||||
{
|
||||
a_id: '2',
|
||||
n_title: '2',
|
||||
synopsis: '2',
|
||||
published: '2',
|
||||
pic: '2'
|
||||
},
|
||||
{
|
||||
a_id: '3',
|
||||
n_title: '3',
|
||||
synopsis: '3',
|
||||
published: '3',
|
||||
pic: '3'
|
||||
},
|
||||
|
||||
])
|
||||
|
||||
const dialogWidth = computed(() => {
|
||||
return window.innerWidth < 768 ? '90%' : '60%'
|
||||
})
|
||||
|
||||
const getNews = async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/blog/get/news', {
|
||||
|
||||
@@ -32,6 +32,7 @@ export default defineConfig({
|
||||
ws: true,
|
||||
},
|
||||
},
|
||||
host: "0.0.0.0",
|
||||
},
|
||||
// server: {
|
||||
// https:{
|
||||
|
||||
Reference in New Issue
Block a user