jialong.yu
/
FE_IASF_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

适配部分移动端

Browse Source
mobile
wangchenguang 2 years ago
parent 84c0882de1
commit 36e6c6a385
5 changed files with 119 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/App.vue
  2. 36
      src/components/menuTree/tree.vue
  3. 73
      src/layouts/header/index.vue
  4. 4
      src/store/getters.js
  5. 21
      src/store/index.js

3
src/App.vue
Unescape View File

@ -33,7 +33,8 @@ export default {
return flagPc;
}
var flagZt = IsPC();
console.log(flagZt) //true为PC端，false为手机端
console.log(flagZt)
this.$store.commit('updateModelType', flagZt)
}
};
</script>

36
src/components/menuTree/tree.vue
Unescape View File

@ -0,0 +1,36 @@
<template>
<div class="menu-child">
<template v-for="item in this.menuList">
<el-submenu :popper-class="$route.path === '/home' || $route.path === '/sfel' ? 'home-menu-popup' : ''" :class="{active: $route.query.id == item.id}" :key="item.id" :index="String(item.id)" :id="item.id" v-if="item.children && item.children.length">
<template slot="title">
<span slot="title" :id="item.id">{{item.columnName}}</span>
</template>
<!-- <menuTree :menuList="item.children"></menuTree> -->
</el-submenu>
<el-menu-item :key="item.id" :id="item.id" :index="String(item.id)" :class="{active: $route.query.id == item.id}" v-else>
<span slot="title" :id="item.id">{{item.columnName}}</span>
</el-menu-item>
</template>
</div>
</template>
<script>
export default {
name: 'menuTree',
props: {
menuList: {
type: Array,
default: []
}
},
data () {
return {}
},
mounted () {},
methods: {}
}
</script>
<style lang="scss" scoped>
</style>

73
src/layouts/header/index.vue
Unescape View File

@ -3,16 +3,50 @@
<a class="logo" @click="toIndex">
<img :src="require('@/assets/images/' + (isSfel ? 'logo2' : isHome ? 'logo' : 'logo-black') + '.png')" alt="">
</a>
<navbar ref="nav" :isHome.sync="isHome"></navbar>
<div class="tools">
<img class="search" :src="require('@/assets/images/search' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleSearch">
<img :src="require('@/assets/images/cn' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleLang">
<div v-if="showSearch" class="search-wrap" @click.stop="stop">
<input ref="search" type="text" :placeholder="$t('column.titlePlaceholder')" v-model="title">
<img class="search-icon" src="@/assets/images/search.png" alt="" @click="handleSearch">
<i class="el-icon-close close-icon" @click="showSearch = false"></i>
<!-- <template v-if="$store.getters.getModelType"> -->
<navbar ref="nav" :isHome.sync="isHome"></navbar>
<div class="tools">
<img class="search" :src="require('@/assets/images/search' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleSearch">
<img :src="require('@/assets/images/cn' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleLang">
<div v-if="showSearch" class="search-wrap" @click.stop="stop">
<input ref="search" type="text" :placeholder="$t('column.titlePlaceholder')" v-model="title">
<img class="search-icon" src="@/assets/images/search.png" alt="" @click="handleSearch">
<i class="el-icon-close close-icon" @click="showSearch = false"></i>
</div>
</div>
</div>
<!-- </template> -->
<!-- <template v-else>
<i class="el-icon-s-fold rightNavBox"></i>
</template>
<div class="btnsBox">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title">
<span>导航一</span>
</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3">
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</div> -->
</div>
</template>
<script>
@ -100,7 +134,6 @@ $height: 90px;
top: 0;
left: 0;
width: 100%;
min-width: $min-width;
height: $height;
box-sizing: content-box;
&:not(.channel) {
@ -131,6 +164,13 @@ $height: 90px;
margin-right: 43px;
}
}
.rightNavBox{
font-size: 50px;
position: absolute;
right: 20px;
top: 20px;
}
.search-wrap {
position: absolute;
top: 67px;
@ -175,4 +215,17 @@ $height: 90px;
}
}
}
.btnsBox{
width: 100%;
height: 300px;
overflow: hidden;
overflow-y: scroll;
position: absolute;
top: 90px;
left: 0;
background-color: white;
z-index: 99;;
}
</style>

4
src/store/getters.js
Unescape View File

@ -1,2 +1,4 @@
const getters = {};
const getters = {
getModelType:(state) => state.modelType
};
export default getters;

21
src/store/index.js
Unescape View File

@ -1,25 +1,34 @@
import Vue from "vue";
import Vuex from "vuex";
import getters from "./getters";
import Vue from 'vue';
import Vuex from 'vuex';
import getters from './getters';
Vue.use(Vuex);
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context("./modules", true, /\.js$/);
const modulesFiles = require.context('./modules', true, /\.js$/);
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './app.js' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
const value = modulesFiles(modulePath);
modules[moduleName] = value.default;
return modules;
}, {});
const store = new Vuex.Store({
state: {
modelType: false //true为PC端，false为手机端
},
mutations: {
updateModelType(state, type) {
console.log(state)
state.modelType = type;
}
},
modules,
getters
});
export default store;
export default store;

Write Preview
Loading…
Cancel
Save