Skip to content

C
Community-Mining-Admin
Commit a854cd25 authored by xhx's avatar xhx
Browse files
Options

feat:移动端适配

parent beaf62d3
Hide whitespace changes
Inline Side-by-side
Showing with 200 additions and 71 deletions
src/layout/Header.vue
View file @ a854cd25
<template> <template>
<div class="header"> <div class="header">
<div class="header-bar"> <div class="header-bar">
<div class="header-l">票池管理后台</div> <div class="header-l">
<i class="el-icon-s-fold show-icon" @click="$emit('update:show', !show)" />
<span class="show-title">票池管理后台</span>
</div>
<div class="header-r"> <div class="header-r">
<el-popover <el-popover
placement="bottom" placement="bottom"
...@@ -28,6 +31,11 @@ export default Vue.extend({ ...@@ -28,6 +31,11 @@ export default Vue.extend({
admin: '' admin: ''
} }
}, },
props: {
show: {
type: Boolean
}
},
methods: { methods: {
logout() { logout() {
// logout().then(res => { // logout().then(res => {
...@@ -46,40 +54,62 @@ export default Vue.extend({ ...@@ -46,40 +54,62 @@ export default Vue.extend({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.header { @media screen and (min-width: 769px) {
.header-bar {
min-width: 1200px;
}
.show-icon {
display: none;
}
.show-title {
display: block;
}
}
@media screen and (max-width: 768px) {
.header-bar {
width: 100%; width: 100%;
height: var(--headerHeight);
.header-bar {
min-width: 1200px;
height: 100%;
margin: auto;
padding: 0 35px;
background: var(--headerBgColor);
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
}
.header-r {
display: flex;
align-items: center;
&>p {
margin-right: 12px;
}
}
} }
.popup-item { .show-icon {
cursor: pointer; display: block;
&:hover { font-size: 22px;
color: #4d7afa; }
} .show-title {
display: none;
} }
.right-item { }
.header {
width: 100%;
height: var(--headerHeight);
.header-bar {
height: 100%;
margin: auto;
padding: 0 35px;
background: var(--headerBgColor);
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
}
.header-r {
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer;
&>p { &>p {
margin-left: 12px; margin-right: 12px;
} }
} }
}
.popup-item {
cursor: pointer;
&:hover {
color: #4d7afa;
}
}
.right-item {
display: flex;
align-items: center;
cursor: pointer;
&>p {
margin-left: 12px;
}
}
</style> </style>
\ No newline at end of file
src/layout/Nav.vue
View file @ a854cd25
<template> <template>
<div class="menu"> <transition name="slide">
<el-menu <div class="menu" :class="{ 'mobile-menu' :isMobile }" v-show="show">
class="el-menu-vertical-demo" <el-menu
background-color="#333B54" class="el-menu-vertical-demo"
text-color="#fff" background-color="#333B54"
active-text-color="#409EFF" text-color="#fff"
router active-text-color="#409EFF"
:default-active="defaultActive"> router
<template v-for="(items, index) in menu"> :default-active="defaultActive"
<el-submenu :index="items.url" v-if="items.list" :key="index"> @select="handleSelect">
<template slot="title"> <template v-for="(items, index) in menu">
<i :class="items.icon" /> <el-submenu :index="items.url" v-if="items.list" :key="index">
<span slot="title">{{items.name}}</span> <template slot="title">
</template> <i :class="items.icon" />
<template v-for="item in items.list"> <span slot="title">{{items.name}}</span>
<el-submenu v-if="item.list" :index="item.url" :key="item.url"> </template>
<template slot="title"> <template v-for="item in items.list">
<i :class="item.icon"></i> <el-submenu v-if="item.list" :index="item.url" :key="item.url">
<template slot="title">
<i :class="item.icon"></i>
<span slot="title">{{ item.name }}</span>
</template>
<el-menu-item v-for="(threeItem, i) in item.list" :key="i" :index="threeItem.url">
{{ threeItem.name }}
</el-menu-item>
</el-submenu>
<el-menu-item v-else :index="item.url" :key="item.url">
<!-- <i :class="item.icon"></i> -->
<span slot="title">{{ item.name }}</span> <span slot="title">{{ item.name }}</span>
</template>
<el-menu-item v-for="(threeItem, i) in item.list" :key="i" :index="threeItem.url">
{{ threeItem.name }}
</el-menu-item> </el-menu-item>
</el-submenu> </template>
<el-menu-item v-else :index="item.url" :key="item.url"> </el-submenu>
<!-- <i :class="item.icon"></i> --> <el-menu-item v-else :index="items.url" :key="index">
<span slot="title">{{ item.name }}</span> <i :class="items.icon" />
</el-menu-item> <span slot="title">{{items.name}}</span>
</template> </el-menu-item>
</el-submenu> </template>
<el-menu-item v-else :index="items.url" :key="index"> </el-menu>
<i :class="items.icon" /> </div>
<span slot="title">{{items.name}}</span> </transition>
</el-menu-item>
</template>
</el-menu>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue' import Vue from 'vue'
import menu from '@/utils/menu' import menu from '@/utils/menu'
import { getStorage } from '@/utils/storage' import { getStorage } from '@/utils/storage'
import { judgeUserAgent } from '@/utils/utils'
export default Vue.extend({ export default Vue.extend({
props: {
show: {
type: Boolean,
default: true
}
},
data() { data() {
return { return {
menu: [] as any, menu: [] as any,
...@@ -50,6 +60,19 @@ export default Vue.extend({ ...@@ -50,6 +60,19 @@ export default Vue.extend({
type: 1 type: 1
} }
}, },
computed: {
isMobile() {
return judgeUserAgent()
}
},
methods: {
handleSelect() {
const isTriggle = judgeUserAgent()
if (isTriggle) {
this.$emit('update:show', !this.show)
}
}
},
created() { created() {
const name = JSON.parse(getStorage('user') as string)?.name const name = JSON.parse(getStorage('user') as string)?.name
this.defaultActive = this.$route.path as string this.defaultActive = this.$route.path as string
...@@ -65,9 +88,25 @@ export default Vue.extend({ ...@@ -65,9 +88,25 @@ export default Vue.extend({
height: calc(100vh - var(--headerHeight)); height: calc(100vh - var(--headerHeight));
background: #333B54; background: #333B54;
flex-shrink: 0; flex-shrink: 0;
text-align: left text-align: left;
} }
/deep/ .el-menu { /deep/ .el-menu {
border-right: none; border-right: none;
} }
.mobile-menu {
position: absolute;
z-index: 100;
}
.slide-enter-active, .slide-leave-active {
transition: 0.5s;
transform: translate3d(0, 0, 0);
}
.slide-enter, .slide-leave-to /* .slide-leave-active below version 2.1.8 */ {
// opacity: 0;
transform: translate3d(-200px, 0, 0);
}
</style> </style>
\ No newline at end of file
src/layout/index.vue
View file @ a854cd25
<template> <template>
<div class="layout"> <div class="layout">
<Header /> <Header :show.sync="showMenu" />
<div class="content"> <div class="content">
<Nav /> <Nav :show.sync="showMenu" />
<div class="content-r"> <div class="content-r">
<Breadcrumb /> <Breadcrumb />
<router-view></router-view> <router-view></router-view>
...@@ -16,28 +16,54 @@ import Vue from 'vue' ...@@ -16,28 +16,54 @@ import Vue from 'vue'
import Header from './Header.vue' import Header from './Header.vue'
import Nav from './Nav.vue' import Nav from './Nav.vue'
import Breadcrumb from '@/components/Breadcrumb.vue' import Breadcrumb from '@/components/Breadcrumb.vue'
import { judgeUserAgent } from '@/utils/utils'
export default Vue.extend({ export default Vue.extend({
components: { components: {
Header, Header,
Nav, Nav,
Breadcrumb Breadcrumb
}, },
data() {
return {
showMenu: true
}
},
created() {
this.showMenu = !judgeUserAgent()
}
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@media screen and (min-width: 769px) {
.content { .content {
min-width: 1200px; min-width: 1200px;
display: flex; display: flex;
.content-r { .content-r {
width: calc(100% - 200px); width: calc(100% - var(--navWidth));
height: calc(100vh - var(--headerHeight)); height: calc(100vh - var(--headerHeight));
padding: 20px 40px; padding: 20px 40px;
overflow-x: hidden; overflow-x: hidden;
font-size: 14px; font-size: 14px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
} }
}
@media screen and (max-width: 768px) {
.content {
width: 100%;
display: flex;
.content-r {
width: 100%;
height: calc(100vh - var(--headerHeight));
padding: 20px 14px;
overflow-x: hidden;
font-size: 14px;
display: flex;
flex-direction: column;
}
}
}
</style> </style>
\ No newline at end of file
src/main.ts
View file @ a854cd25
...@@ -4,8 +4,9 @@ import './registerServiceWorker' ...@@ -4,8 +4,9 @@ import './registerServiceWorker'
import router from './router' import router from './router'
import store from './store' import store from './store'
import '@/style/common.css' import '@/style/common.css'
import '@/utils/element'
import 'element-ui/lib/theme-chalk/index.css'; import 'element-ui/lib/theme-chalk/index.css';
import '@/style/element.css'
import '@/utils/element'
Vue.config.productionTip = false Vue.config.productionTip = false
......
src/style/element.css 0 → 100644
View file @ a854cd25
.el-dialog {
min-width: 360px;
}
.el-pagination {
white-space: break-spaces;
}
\ No newline at end of file
src/utils/utils.ts
View file @ a854cd25
...@@ -4,4 +4,14 @@ import dayjs from "dayjs" ...@@ -4,4 +4,14 @@ import dayjs from "dayjs"
export const getDateTime = function(s: string) { export const getDateTime = function(s: string) {
const str = Number(s + '000') const str = Number(s + '000')
return dayjs(str).format('YYYY-MM-DD HH:mm:ss') return dayjs(str).format('YYYY-MM-DD HH:mm:ss')
}
/**
* false: PC, true: mobile
* @returns
*/
export const judgeUserAgent = ():boolean => {
const {userAgent} = window.navigator
const REGEXP = /IOS|Mac|OS|iPhone|Android/g
return REGEXP.test(userAgent)
} }
\ No newline at end of file
src/views/Home.vue
View file @ a854cd25
...@@ -81,4 +81,15 @@ export default Vue.extend({ ...@@ -81,4 +81,15 @@ export default Vue.extend({
} }
} }
} }
@media screen and (max-width: 768px) {
.statics-line {
flex-direction: column;
.statics-block {
margin-bottom: 55px;
&:last-of-type {
margin-bottom: 0;
}
}
}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment