refactor: main page updated

src/styles/base.css

@@ -84,3 +84,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.el-scrollbar__view{
+  height: 100%;
+}

src/styles/show.css

@@ -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;
+  width: 20%;
-  height: 110px;
+  min-width: 100px;
+  max-width: 130px;
+  height: 100%;
 }
 .newscontent {
   margin-right: auto;
   display: inline-block;
   padding: 10px;
 }
+
+.search-input{
+  width: 70%;
+  margin: auto
+}

src/views/blog/blog.vue

@@ -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="2">文章</el-menu-item></router-link>
-                    <router-link><el-menu-item index="3">联系站长</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>

src/views/blog/show.vue

@@ -1,64 +1,122 @@
 <template>
     <div class="container">
         <el-row :span="24" style="height: 100%;">
-            <el-col :span="5">
+            <el-col :span="24" style="height: 100%; border-left: 1px solid #eee; border-right: 1px solid #eee;">
-                <el-row>
+                <el-row style="height: 30%;">
-                    <el-col :span="24" style="text-align: right;">
+                    <el-col :span="24" style="height: 100%;">
-                        <h1>欢迎来到我的博客</h1>
+                        <div class="show-top-text">
-                        <p class="welcome">Welcome to Merlin's blog</p>
+                            <h2>Merlin`s blog</h2>
-                    </el-col>
+                        </div>
-                </el-row>
+                        <div class="search-input">
-            </el-col>
+                            <el-input v-model="search_text" placeholder="Type something">
-            <el-col :span="19" style="height: 100%; border-left: 1px solid #eee;">
+                                <template #prefix>
-                <el-row style="height: 10%;">
+                                    <el-icon class="el-input__icon">
-                    <el-col :span="24">
+                                        <search />
-                        <h1 style="font-size: 35px;padding-left: 15px;">最新消息:</h1>
+                                    </el-icon>
-                    </el-col>
+                                </template>
-                </el-row>
+                            </el-input>
-                <el-row style="height: 90%;">
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row style="height: 60%;">
                     <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>
-                        </el-scrollbar>
-
                     </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 = 5
-const pageSize = 10
 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', {

vite.config.js

@@ -32,6 +32,7 @@ export default defineConfig({
         ws: true,
       },
     },
+    host: "0.0.0.0",
   },
   // server: {
   //   https:{