首页项目列表展示效果优化

2023-06-30 21:12:35 +08:00
parent 69c7e0a0f6
commit a7cf93d3e7
6 changed files with 136 additions and 33 deletions
--- a/src/components/Home/Header.vue
+++ b/src/components/Home/Header.vue
@@ -0,0 +1,120 @@
+<template>
+    <div class="header">
+        <div class="logo-all">
+            <img class="logo" src="../../assets/logo/logo.png">
+            <span class="HeaderWord">HelloGithub</span>
+        </div>
+
+        <el-menu :default-active="$route.path" class="el-menu" mode="horizontal"
+                 active-text-color="#42b983"
+                 router>
+            <el-menu-item class="menu-item" index="/home"><i class="el-icon-s-home" style="color: #13ce66"></i>首 页</el-menu-item>
+            <el-menu-item class="menu-item" index="/monthly"><i class="el-icon-s-claim" style="color: #00b2ff"></i>月 刊</el-menu-item>
+            <el-menu-item class="menu-item" index="/ranking"><i class="el-icon-trophy" style="color: #ffca00"></i>榜 单
+            </el-menu-item>
+            <el-menu-item class="menu-item" index="/paper"><i class="el-icon-s-management" style="color: #5b6bc9"></i>文 章</el-menu-item>
+        </el-menu>
+        <SearchInput class="HeaderInput"></SearchInput>
+        <el-button class="HeaderSubmitBtn" type="success" round icon="el-icon-thumb">提交项目</el-button>
+    </div>
+</template>
+
+<script>
+import SearchInput from "@/components/SearchInput.vue";
+
+export default {
+    name: "HeaderComponent",
+    components: {SearchInput},
+    data() {
+        return {}
+    }
+}
+</script>
+
+<style scoped>
+/*适用于小屏幕，手持设备*/
+/*@media(orientation: portrait){*/
+/*    .logo-all {*/
+/*        height: 20px;*/
+/*        width: 10vw;*/
+/*        display: flex;*/
+/*        align-items: center;*/
+/*        background-color: #ff4949;*/
+/*        margin-left:1vw;*/
+/*    }*/
+/*    .logo {*/
+/*        width: 20px;*/
+/*        height: 20px;*/
+/*        border-radius: 6px;*/
+/*    }*/
+/*    .HeaderWord{*/
+/*        cursor: pointer;*/
+/*        margin-left: 5px;*/
+/*        font-size: 80%;*/
+/*        font-weight: bold;*/
+/*        font-family:'楷体';*/
+/*    }*/
+/*    .header {*/
+/*        display: flex;*/
+/*        flex-direction: row;*/
+/*        align-items: center;*/
+/*        !*justify-content: space-evenly;*!*/
+/*    }*/
+/*    .el-menu {*/
+/*        font-weight: bold;*/
+/*        font-size: 5px;*/
+/*        display: flex;*/
+/*        justify-content: space-evenly;*/
+/*        width: 10vw;*/
+/*    }*/
+/*    .menu-item {*/
+/*        width: 2vw;*/
+/*        font-size:2px;*/
+/*    }*/
+/*    .HeaderInput{*/
+/*        width:15vw;*/
+/*        font-size:1px;*/
+/*    }*/
+/*    .HeaderSubmitBtn{*/
+
+/*    }*/
+/*}*/
+
+@media(orientation: landscape){
+    .logo-all {
+        height: 60px;
+        width: 12vw;
+        display: flex;
+        align-items: center;
+    }
+    .logo {
+        width: 30px;
+        height: 30px;
+        border-radius: 50px;
+    }
+    .HeaderWord{
+        cursor: pointer;
+        margin-left: 5px;
+        font-size: 150%;
+        font-weight: bold;
+        font-family:'楷体';
+    }
+    .header {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-evenly;
+    }
+    .el-menu {
+        font-weight: bold;
+        font-size: 18px;
+        display: flex;
+        justify-content: space-evenly;
+        width: 30vw;
+    }
+    .menu-item {
+        width: 6vw;
+    }
+}
+
+</style>