ops
/
jump-web
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

normalize

master
taylor 8 years ago
parent
933053b550
commit
cb3667c84a
7 changed files with 73 additions and 133 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      index.html
  2. 5
      package.json
  3. 50
      src/App.vue
  4. 13
      src/main.js
  5. 6
      src/mock/mock.js
  6. 20
      src/pages/Home.vue
  7. 108
      src/pages/nav1/Table.vue

2
index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>vue element admin</title>
<title>vueadmin</title>
</head> </head>
<body> <body>

5
package.json
View File

@ -1,9 +1,9 @@
{ {
"name": "vueadmin", "name": "vueadmin",
"version": "1.0.0",
"version": "1.0.2",
"description": "vue admin project", "description": "vue admin project",
"author": "taylor <709161610@qq.com>", "author": "taylor <709161610@qq.com>",
"private": true,
"license": "MIT",
"scripts": { "scripts": {
"dev": "node build/dev-server.js", "dev": "node build/dev-server.js",
"build": "node build/build.js" "build": "node build/build.js"
@ -11,7 +11,6 @@
"dependencies": { "dependencies": {
"axios": "^0.15.3", "axios": "^0.15.3",
"echarts": "^3.3.2", "echarts": "^3.3.2",
"flex.css": "^1.1.6",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"vue": "^2.1.10", "vue": "^2.1.10",
"vuex": "^2.0.0-rc.6" "vuex": "^2.0.0-rc.6"

50
src/App.vue
View File

@ -1,65 +1,19 @@
<template> <template>
<div id="app"> <div id="app">
<!--<transition name="bounce">-->
<router-view></router-view> <router-view></router-view>
<!--</transition>-->
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'app', name: 'app',
components: { components: {
} }
} }
</script> </script>
<style> <style>
@import "../node_modules/font-awesome/css/font-awesome.min.css";
@import "../node_modules/flex.css/dist/flex.css";
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-out .2s;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
50% {
transform: scale(0.95);
}
100% {
transform: scale(0);
}
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
body { body {
/*background-color: #324057;*/ /*background-color: #324057;*/
margin: 0px; margin: 0px;
@ -69,7 +23,7 @@
background: #1F2D3D; background: #1F2D3D;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
/*font-weight: 400;*/ /*font-weight: 400;*/
font-size:14px;
font-size: 14px;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }

13
src/main.js
View File

@ -9,8 +9,9 @@ import Vuex from 'vuex'
import NProgress from 'nprogress'//页面顶部进度条 import NProgress from 'nprogress'//页面顶部进度条
import 'nprogress/nprogress.css' import 'nprogress/nprogress.css'
import routes from './routes' import routes from './routes'
import Mock from './mock';
import Mock from './mock'
Mock.bootstrap(); Mock.bootstrap();
import 'font-awesome/css/font-awesome.min.css'
Vue.use(ElementUI) Vue.use(ElementUI)
Vue.use(VueRouter) Vue.use(VueRouter)
@ -40,13 +41,11 @@ router.beforeEach((to, from, next) => {
//}); //});
new Vue({ new Vue({
el: '#app',
template: '<App/>',
//el: '#app',
//template: '<App/>',
router, router,
store, store,
components: { App }
//render: h => h(Login)
//components: { App }
render: h => h(App)
}).$mount('#app') }).$mount('#app')
//router.replace('/login')

6
src/mock/mock.js
View File

@ -39,7 +39,7 @@ export default {
} else { } else {
resolve([200, { code: 500, msg: '账号或密码错误' }]); resolve([200, { code: 500, msg: '账号或密码错误' }]);
} }
}, 500);
}, 1000);
}); });
}); });
@ -55,7 +55,7 @@ export default {
resolve([200, { resolve([200, {
users: mockUsers users: mockUsers
}]); }]);
}, 500);
}, 1000);
}); });
}); });
@ -74,7 +74,7 @@ export default {
total: total, total: total,
users: mockUsers users: mockUsers
}]); }]);
}, 500);
}, 1000);
}); });
}); });

20
src/pages/Home.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<el-row class="panel"> <el-row class="panel">
<el-col :span="24" class="panel-top"> <el-col :span="24" class="panel-top">
<el-col :span="20" style="font-size:26px;">
<img src="../assets/logo4.png" class="logo"> <span>AD<i style="color:#20a0ff">MIN</i>
<el-col :span="20" style="font-size:22px;">
<img src="../assets/logo4.png" class="logo"> <span>VUE<i style="color:#20a0ff">ADMIN</i>
</span> </span>
</el-col> </el-col>
<el-col :span="4" class="rightbar"> <el-col :span="4" class="rightbar">
@ -44,9 +44,9 @@
</el-breadcrumb> </el-breadcrumb>
</el-col> </el-col>
<el-col :span="24" style="background-color:#fff;box-sizing: border-box;"> <el-col :span="24" style="background-color:#fff;box-sizing: border-box;">
<!--<transition name="fade">-->
<router-view></router-view>
<!--</transition>-->
<transition>
<router-view></router-view>
</transition>
</el-col> </el-col>
</div> </div>
</section> </section>
@ -113,16 +113,6 @@
</script> </script>
<style scoped> <style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s
}
.fade-enter,
.fade-leave-active {
opacity: 0
}
.panel { .panel {
position: absolute; position: absolute;
top: 0px; top: 0px;

108
src/pages/nav1/Table.vue
View File

@ -18,65 +18,65 @@
<!--列表--> <!--列表-->
<template> <template>
<el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;"> <el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;">
<el-table-column type="index" width="60">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120" sortable>
</el-table-column>
<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
</el-table-column>
<el-table-column prop="age" label="年龄" width="100" sortable>
</el-table-column>
<el-table-column prop="birth" label="生日" width="120" sortable>
</el-table-column>
<el-table-column prop="addr" label="地址" min-width="180" sortable>
</el-table-column>
<el-table-column inline-template :context="_self" label="操作" width="150">
<span>
<el-table-column type="index" width="60">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120" sortable>
</el-table-column>
<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
</el-table-column>
<el-table-column prop="age" label="年龄" width="100" sortable>
</el-table-column>
<el-table-column prop="birth" label="生日" width="120" sortable>
</el-table-column>
<el-table-column prop="addr" label="地址" min-width="180" sortable>
</el-table-column>
<el-table-column inline-template :context="_self" label="操作" width="150">
<span>
<el-button size="small" @click="handleEdit(row)">编辑</el-button> <el-button size="small" @click="handleEdit(row)">编辑</el-button>
<el-button type="danger" size="small" @click="handleDel(row)">删除</el-button> <el-button type="danger" size="small" @click="handleDel(row)">删除</el-button>
</span> </span>
</el-table-column>
</el-table>
</template>
</el-table-column>
</el-table>
</template>
<!--分页-->
<el-col :span="24" class="toolbar" style="padding-bottom:10px;">
<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
</el-pagination>
</el-col>
<!--分页-->
<el-col :span="24" class="toolbar" style="padding-bottom:10px;">
<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
</el-pagination>
</el-col>
<!--编辑界面-->
<el-dialog :title="editFormTtile" v-model="editFormVisible" :close-on-click-modal="false">
<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="editForm.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="性别">
<!--<el-select v-model="editForm.sex" placeholder="请选择性别">
<!--编辑界面-->
<el-dialog :title="editFormTtile" v-model="editFormVisible" :close-on-click-modal="false">
<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="editForm.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="性别">
<!--<el-select v-model="editForm.sex" placeholder="请选择性别">
<el-option label="男" :value="1"></el-option> <el-option label="男" :value="1"></el-option>
<el-option label="女" :value="0"></el-option> <el-option label="女" :value="0"></el-option>
</el-select>--> </el-select>-->
<el-radio-group v-model="editForm.sex">
<el-radio class="radio" :label="1">男</el-radio>
<el-radio class="radio" :label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年龄">
<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="生日">
<el-date-picker type="date" placeholder="选择日期" v-model="editForm.birth"></el-date-picker>
</el-form-item>
<el-form-item label="地址">
<el-input type="textarea" v-model="editForm.addr"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="editFormVisible = false">取 消</el-button>
<el-button type="primary" @click.native="editSubmit" :loading="editLoading">{{btnEditText}}</el-button>
</div>
</el-dialog>
</section>
<el-radio-group v-model="editForm.sex">
<el-radio class="radio" :label="1">男</el-radio>
<el-radio class="radio" :label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年龄">
<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="生日">
<el-date-picker type="date" placeholder="选择日期" v-model="editForm.birth"></el-date-picker>
</el-form-item>
<el-form-item label="地址">
<el-input type="textarea" v-model="editForm.addr"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="editFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
</div>
</el-dialog>
</section>
</template> </template>
<script> <script>
@ -106,7 +106,6 @@
addr: '' addr: ''
}, },
editLoading: false, editLoading: false,
btnEditText: '提 交',
editFormRules: { editFormRules: {
name: [ name: [
{ required: true, message: '请输入姓名', trigger: 'blur' } { required: true, message: '请输入姓名', trigger: 'blur' }
@ -185,7 +184,6 @@
_this.$confirm('确认提交吗？', '提示', {}).then(() => { _this.$confirm('确认提交吗？', '提示', {}).then(() => {
_this.editLoading = true; _this.editLoading = true;
NProgress.start(); NProgress.start();
_this.btnEditText = '提交中';
if (_this.editForm.id == 0) { if (_this.editForm.id == 0) {
//新增 //新增
@ -199,7 +197,6 @@
addUser(para).then((res) => { addUser(para).then((res) => {
_this.editLoading = false; _this.editLoading = false;
NProgress.done(); NProgress.done();
_this.btnEditText = '提 交';
_this.$notify({ _this.$notify({
title: '成功', title: '成功',
message: '提交成功', message: '提交成功',
@ -221,7 +218,6 @@
editUser(para).then((res) => { editUser(para).then((res) => {
_this.editLoading = false; _this.editLoading = false;
NProgress.done(); NProgress.done();
_this.btnEditText = '提 交';
_this.$notify({ _this.$notify({
title: '成功', title: '成功',
message: '提交成功', message: '提交成功',
@ -258,7 +254,9 @@
this.getUsers(); this.getUsers();
} }
} }
</script> </script>
<style scoped> <style scoped>
</style> </style>
Write Preview
Loading…
Cancel
Save