Skip to content

Commit

Permalink
Merge pull request eee555#61 from putianyi889/patch-46
Browse files Browse the repository at this point in the history 
Update App.vue
  • Loading branch information
@eee555
eee555 authored Jul 14, 2024
2 parents 9f2ee26 + b7b1e4c commit c00282c
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 92 deletions.
148 changes: 65 additions & 83 deletions front_end/src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,58 @@
<template>
<!-- message的z索引为2015 -->
<el-menu class="menu" mode="horizontal" :router="true" :default-active="menu_index" :ellipsis="false"
menu-trigger="click">
<el-menu-item index="/" class="logo">
<el-image class="logo1" :src="logo_1" :fit="'cover'" />
<el-image v-if="!local.menu_icon" class="logo2" :src="logo_2" :fit="'cover'" />
</el-menu-item>
<el-menu-item v-for="item in menu_items" :index="'/' + item.index" class="menuitem">
<el-tooltip v-if="local.menu_icon" :content="$t(item.content)">
<el-icon class="menumargin">
<component :is="item.icon" class="menuicon" />
</el-icon>
</el-tooltip>
<span v-else style="padding-right: 5px">
<el-icon>
<component :is="item.icon" class="menuicon" />
</el-icon>{{ $t(item.content) }}
</span>
</el-menu-item>
<div style="flex-grow: 1" />
<el-menu-item :index="player_url" v-if="store.user.id != 0" @click="store.player = store.user" class="menuitem">
<el-tooltip v-if="local.menu_icon" :content="store.user.username">
<el-icon class="menumargin">
<User class="menuicon" />
</el-icon>
</el-tooltip>
<span v-else style="padding-right: 5px">
<el-icon>
<User class="menuicon" />
</el-icon>{{ store.user.username }}
</span>
</el-menu-item>
<el-menu-item index="/settings" style="padding-left: 8px; padding-right: 5px">
<el-tooltip :content="$t('menu.setting')">
<el-icon>
<Setting class="menuicon" />
</el-icon>
</el-tooltip>
</el-menu-item>
<LanguagePicker v-show="local.language_show" style="padding-left: 8px; padding-right: 8px;" />
<Login @login="user_login" @logout="user_logout"></Login>
</el-menu>
<div class="common-layout">
<el-container>
<div class="header_all" style="padding-top: 0; overflow: auto">
<div class="content" style="padding-top: 16px;min-height: 80vh;">
<router-view />
</div>
</div>
<el-footer style="margin: auto">
<el-container style="height: 100%">
<el-header>
<el-scrollbar :height="100"> <!-- 给一个足够的高度就可以不显示纵向滚动条 -->
<el-menu mode="horizontal" :router="true" :default-active="menu_index" :ellipsis="false"
menu-trigger="click">
<el-menu-item index="/" class="logo">
<el-image class="logo1" :src="logo_1" :fit="'cover'" />
<el-image v-if="!local.menu_icon" class="logo2" :src="logo_2" :fit="'cover'" />
</el-menu-item>
<el-menu-item v-for="item in menu_items" :index="'/' + item.index" class="menuitem">
<el-tooltip v-if="local.menu_icon" :content="$t(item.content)">
<el-icon class="menumargin">
<component :is="item.icon" class="menuicon" />
</el-icon>
</el-tooltip>
<span v-else style="padding-right: 5px">
<el-icon>
<component :is="item.icon" class="menuicon" />
</el-icon>{{ $t(item.content) }}
</span>
</el-menu-item>
<div style="flex-grow: 1" />
<el-menu-item :index="player_url" v-if="store.user.id != 0" @click="store.player = store.user">
<el-tooltip v-if="local.menu_icon" :content="store.user.username">
<el-icon class="menumargin">
<User class="menuicon" />
</el-icon>
</el-tooltip>
<span v-else style="padding-right: 5px">
<el-icon>
<User class="menuicon" />
</el-icon>{{ store.user.username }}
</span>
</el-menu-item>
<el-menu-item index="/settings" style="padding-left: 8px; padding-right: 5px">
<el-tooltip :content="$t('menu.setting')">
<el-icon>
<Setting class="menuicon" />
</el-icon>
</el-tooltip>
</el-menu-item>
<LanguagePicker v-show="local.language_show" style="padding-left: 8px; padding-right: 8px;" />
<Login @login="user_login" @logout="user_logout"></Login>
</el-menu>
</el-scrollbar>
</el-header>

<el-container class="mainheight">
<el-main class="common-layout">
<router-view />
<Footer />
</el-footer>
</el-main>
</el-container>
</div>
</el-container>

<el-dialog draggable :lock-scroll="false" v-model="notice_visible" title="站长通知" width="30%"
:before-close="handle_notice_close">
Expand All @@ -73,7 +73,6 @@ import { ref, onMounted, computed } from "vue";
import LanguagePicker from "./components/widgets/LanguagePicker.vue";
import Login from "./components/Login.vue";
import Footer from "./components/Footer.vue";
// import { LoginStatus } from "@/utils/common/structInterface"
import useCurrentInstance from "@/utils/common/useCurrentInstance";
import { useLocalStore, useUserStore } from "./store";
const store = useUserStore();
Expand Down Expand Up @@ -180,18 +179,24 @@ const hash_code = function (t: string) {

<style lang="less">
body {
overflow: auto;
margin: 0;
}
</style>

<style lang="less" scoped>
.el-header {
--el-header-height: v-bind("local.menu_height + 'px'");
padding: 0px;
}
.el-menu {
height: v-bind("local.menu_height + 'px'");
}
.logo {
cursor: pointer;
display: inline-flex;
justify-content: center;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 0px;
padding-left: v-bind("local.menu_height / 8 + 'px'");
Expand All @@ -212,28 +217,12 @@ body {
display: inline-flex;
}
.header {
font-size: 18px;
margin: 0px;
padding-top: 21px;
}
.menu {
height: v-bind("local.menu_height + 'px'");
position: fixed;
width: 100%;
z-index: 1010; //message的z索引为2015
user-select: none;
overflow-x: auto;
overflow-y: hidden;
}
.menuicon {
width: 60px;
height: 60px;
}
.menuitem {
.el-menu-item {
font-size: v-bind("local.menu_font_size + 'px'");
padding-left: 8px;
padding-right: 5px;
Expand All @@ -244,14 +233,7 @@ body {
margin-bottom: 0px;
}
.header_all {
margin: auto;
width: 80vw;
.mainheight {
height: calc(100svh - v-bind("local.menu_height + 'px'"))
}
.content {
margin-top: v-bind("local.menu_height + 'px'");
}
</style>
21 changes: 12 additions & 9 deletions front_end/src/components/Footer.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
<template>
<el-row>
<el-text style="vertical-align: middle">Copyright @ 2023　</el-text>
<el-link href="http://fff666.top">元扫雷网 fff666.top</el-link>
<el-text style="vertical-align: middle">　版权所有　</el-text>
<el-link href="https://beian.miit.gov.cn/">苏ICP备2023056839号-1</el-link>
<span style="width: 12px; display: inline-block"></span>
<el-link href="https://beian.mps.gov.cn/#/query/webSearch?code=32020602001691" rel="noreferrer"
target="_blank">苏公网安备32020602001691</el-link>
</el-row>
<el-divider />
<el-footer>
<div style="text-align: center">
<el-text style="vertical-align: middle">Copyright @ 2023　</el-text>
<el-link href="http://fff666.top">元扫雷网 fff666.top</el-link>
<el-text style="vertical-align: middle">　版权所有　</el-text>
<el-link href="https://beian.miit.gov.cn/">苏ICP备2023056839号-1</el-link>
<span style="width: 12px; display: inline-block"></span>
<el-link href="https://beian.mps.gov.cn/#/query/webSearch?code=32020602001691" rel="noreferrer"
target="_blank">苏公网安备32020602001691</el-link>
</div>
</el-footer>
</template>

0 comments on commit c00282c

Please sign in to comment.