Commit 86b5205e authored by wangqinghua's avatar wangqinghua

init

parent 32cd90e3
<template>
<el-container class="container">
<el-aside width="200px">
<sidebar></sidebar>
</el-aside>
<el-header class="text-right">
<navbar></navbar>
</el-header>
<el-container>
<el-header>
<navbar></navbar>
</el-header>
<div class="margin-0-20">
<el-aside width="200px">
<sidebar></sidebar>
</el-aside>
<div ref="mainContainer" class="main-container">
<router-view/>
</div>
</el-container>
......@@ -20,7 +20,10 @@
export default {
components: {
Navbar,
Sidebar}
Sidebar},
mounted(){
}
}
</script>
......@@ -32,6 +35,7 @@
text-align: center;
color: #2c3e50;
}
el-aside,
.container{
height: 100%;
}
......@@ -45,5 +49,15 @@
}
}
}
.el-header{
line-height: 60px;
background: #3d89cb;
color: #ffffff;
}
.main-container{
padding: 0 20px;
width: calc(100% - 240px);
background-color: #f8f8f8;
}
</style>
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
......@@ -5,9 +5,9 @@
<div>
<el-row>
<el-col :span="18">
<div class="border padding-10-10">
<div class="border padding-10-0">
<template v-for="(item,i) in list">
<p @click="selectIndex(i)"> {{item.name}}</p>
<p class="padding-5-10 pointer" :class="sIndex == i ? 'select':''" @click="selectIndex(i)"> {{item.name}}</p>
</template>
</div>
</el-col>
......@@ -61,9 +61,15 @@
//置顶
toTop(){
if (this.sIndex != 0) {
this.swapArray(this.list, this.sIndex, this.sIndex - 1);
const index = this.sIndex
// this.list.unshift( this.list.splice(this.sIndex,1)[0] )
const a = this.list.splice(index,1)[0]
this.list.unshift(a)
this.sIndex = 0
// this.swapArray(this.list, this.sIndex, 0);
} else {
alert('已经处于置底,无法下移');
this.$message.warning('已经处于顶部,无法置顶');
}
},
//上移
......@@ -71,7 +77,7 @@
if (this.sIndex != 0) {
this.swapArray(this.list, this.sIndex, this.sIndex - 1);
} else {
this.$message.warning("已经处于置底,无法下移")
this.$message.warning("已经处于最顶部,无法上移")
}
},
//下移
......@@ -79,7 +85,7 @@
if (this.sIndex + 1 != this.list.length) {
this.swapArray(this.list, this.sIndex ,this.sIndex + 1);
} else {
// alert('已经处于置顶,无法上移');
this.$message.warning('已经处于最底部,无法下移');
}
},
/**
......@@ -88,6 +94,7 @@
* @param index2 需要被变更的对象序号
*/
swapArray(arr,index1,index2){
this.sIndex = index2
arr[index1] = arr.splice(index2,1,arr[index1])[0]
return arr
}
......@@ -95,6 +102,10 @@
}
</script>
<style scoped>
<style lang="scss">
.select{
background-color: rgb(30,144,255);
opacity: 0.7;
color: #ffffff;
}
</style>
\ No newline at end of file
html, body {
width: 100%;
height: 100%;
//height: 100vh;
font-weight: 400;
}
html,body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a,p, h1, h2, h3, h4, h5, h6, i, b, textarea, button, input, select, figure, figcaption {
......@@ -26,6 +26,7 @@ $border-color:#dddddd;
$color-333:#333333;
$color-666:#666666;
$color-999:#999999;
$color-fff:#ffffff;
//字体常用颜色
.main-color{color:$main-color;}
......@@ -34,6 +35,7 @@ $color-999:#999999;
.color-333{color:$color-333}
.color-666{color:$color-666}
.color-999{color:$color-999}
.color-fff{color: $color-fff;}
//行内元素位置
.text-center {text-align: center;}
......@@ -110,4 +112,7 @@ $color-999:#999999;
//背景色
.background-white{background-color: #fff;}
//鼠标手指
.pointer{cursor: pointer}
......@@ -2,23 +2,19 @@
<div class="home">
<button @click="logout">退出</button>
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import * as types from '../store/types';
export default {
name: 'home',
components: {
HelloWorld
},
methods:{
async logout(){
console.log("logout");
this.$store.commit(types.LOGOUT);
this.$router.push({
path:'login',
......
......@@ -3,7 +3,7 @@
<div class="intention">
<p class="margin-20-0">当前位置:部务会议程管理 - 部务会会议意向</p>
<el-row>
<el-col :span="6">
<el-col :span="8">
<span>意向主题:</span>
<el-input style="width: 180px;" size="small"
placeholder="会议名称"
......@@ -17,7 +17,7 @@
v-model="input2">
</el-input>
</el-col>
<el-col class="text-right" :span="10">
<el-col class="text-right" :span="8">
<el-button size="small" plain>查询</el-button>
<el-button size="small" plain>添加</el-button>
</el-col>
......
......@@ -3,7 +3,7 @@
<div class="meetList">
<p class="margin-20-0">当前位置:部务会议程管理 - 部务会会议列表</p>
<el-row>
<el-col :span="6">
<el-col :span="8">
<span>会议名称:</span>
<el-input style="width: 180px;" size="small"
placeholder="会议名称"
......@@ -12,11 +12,11 @@
</el-col>
<el-col :span="8">
<span>会议日期:</span>
<el-date-picker size="small" v-model="value1" type="date" placeholder="选择日期">
<el-date-picker size="small" v-model="input1" type="date" placeholder="选择日期">
</el-date-picker>
</el-col>
<el-col class="text-right" :span="10">
<el-col class="text-right" :span="8">
<el-button size="small" plain> 查 询 </el-button>
<el-button size="small" plain>新增会议</el-button>
</el-col>
......@@ -26,8 +26,7 @@
<el-table-column
type="index"
label="序号"
width="90"
:index="index">
width="90">
</el-table-column>
<el-table-column
prop="name"
......@@ -61,7 +60,7 @@
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
......@@ -78,6 +77,8 @@
name: "meet-list",
data(){
return {
currentPage:1,
input1:"",
tableData: [
{
date: '2016-05-02',
......
<template>
<el-row :gutter="20">
<el-col :offset="12" :span="6"><div class="grid-content bg-purple">
<el-col class="text-center" :span="3">
部位会会议管理
</el-col>
<el-col :offset="15" :span="4"><div class="grid-content bg-purple">
欢迎您!系统管理员
</div></el-col>
<el-col :span="6"><div class="grid-content bg-purple">
<el-col :span="2"><div class="grid-content bg-purple">
退出系统
</div></el-col>
</el-row>
......@@ -16,6 +18,6 @@
}
</script>
<style scoped>
<style lang="scss">
</style>
\ No newline at end of file
<template>
<el-menu>
<el-submenu index="1">
<template slot="title">
<router-link to="/meetList">
部位会会议列表
</router-link>
</template>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<router-link to="/intention">部位会会议意向</router-link>
</template>
</el-submenu>
<el-submenu index="3">
<template slot="title">
代码管理
</template>
<el-menu-item-group>
<el-menu-item index="1-1">
<router-link to="/agenda">特殊会议</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link to="/attend">列席信息</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
<div ref="sidebar" class="sidebar">
<el-menu ref="elMenu">
<el-menu-item index="1">
<span slot="title">
<router-link to="/meetList">
部位会会议列表
</router-link>
</span>
</el-menu-item>
<el-menu-item index="2">
<span slot="title">
<router-link to="/intention">
部位会会议意向
</router-link>
</span>
</el-menu-item>
<el-submenu index="3">
<template slot="title">
<span class="color-fff">代码管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="3-1">
<router-link to="/agenda">特殊会议</router-link>
</el-menu-item>
<el-menu-item index="3-2">
<router-link to="/attend">列席信息</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</div>
</template>
<script>
export default {
name: "sidebar"
name: "sidebar",
data(){
return {
pageHeight:"",
}
},
mounted(){
this.$refs.sidebar.style.minHeight = window.innerHeight +'px'
}
}
</script>
<style lang="scss">
.el-menu{
.sidebar {
height: 100%;
background-color: #3869a7;
.el-menu {
height: 100%;
/*background-color: #2282d8;*/
background: #38619c;
border-right: none;
a {
color: #ffffff;
}
}
.el-menu-item:focus, .el-menu-item:hover,
.el-submenu__title:hover {
outline: 0;
background-color: #12457d;
}
}
</style>
\ No newline at end of file
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