Skip to content

H
h5
Commit bdf1e755 by wangyalan-git
Options

页面完成

parents
Showing with 1515 additions and 0 deletions
.browserslistrc 0 → 100644
> 1%
last 2 versions
not dead
.editorconfig 0 → 100644
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
.eslintrc.js 0 → 100644
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'@vue/standard'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}
.gitignore 0 → 100644
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
README.md 0 → 100644
# wanke-h5
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
babel.config.js 0 → 100644
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
// 指定样式路径
style: (name) => `${name}/style/less`
},
'vant'
]
]
}
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"name": "wanke-h5",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vant": "^2.8.6",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.4.0",
"@vue/cli-plugin-eslint": "~4.4.0",
"@vue/cli-plugin-router": "~4.4.0",
"@vue/cli-plugin-vuex": "~4.4.0",
"@vue/cli-service": "~4.4.0",
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"babel-plugin-import": "^1.13.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"less": "^3.11.3",
"less-loader": "^6.1.1",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
}
public/index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>办公用品管理平台</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
src/App.vue 0 → 100644
<template>
<div id="app">
<router-view/>
</div>
</template>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
src/assets/less/common.less 0 → 100644
@charset "utf-8";
/* 禁用iPhone中Safari的字号自动调整 */
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
/* 解决IOS默认滑动很卡的情况 */
-webkit-overflow-scrolling: touch;
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
font-size: 13px;
}
/* 禁止缩放表单 */
input[type="submit"], input[type="reset"], input[type="button"], input {
resize: none;
border: none;
}
/* 取消链接高亮 */
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* 设置HTML5元素为块 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
textarea {
outline: none;
}
/* 图片自适应 */
img {
width: 100%;
height: auto;
width: auto \9; /* ie8 */
display: block;
-ms-interpolation-mode: bicubic; /*为了照顾ie图片缩放失真*/
}
input, select {
-webkit-appearance: none;
appearance: none;
}
select {
background: #fff;
color: #555;
/*background-image:url('../img/up.png');*/
background-repeat: no-repeat;
background-position: right center;
background-size: 0.5rem 100%;
/*background: url('../../img/up.png') no-repeat right center;*/
}
/* 初始化 */
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
margin: 0;
padding: 0;
}
body {
font: 12px/1.5 'Microsoft YaHei', '宋体', Tahoma, Arial, sans-serif;
color: #020202;
//background-color: @F2F3F3;
}
em, i {
font-style: normal;
}
ul, li {
list-style-type: none;
}
strong {
font-weight: normal;
}
.clearfix:after {
content: "";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}
a {
text-decoration: none;
color: #969696;
font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif;
}
a:hover {
text-decoration: none;
}
ul, ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-family: 'Microsoft YaHei';
}
img {
border: none;
}
input {
font-family: 'Microsoft YaHei';
}
/* 移动端点击a链接出现蓝色背景问题解决 */
a:link, a:active, a:visited, a:hover {
background: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
.page {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
color: #020202;
background: #f2f2f2;
}
.container {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
}
.cursor {
cursor: pointer;
}
.flexRow {
display: flex;
justify-content: space-between;
align-items: center;
}
.flexRowStart{
display: flex;
justify-content: flex-start;
align-items: center;
}
.flexCol {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.font15 {
font-size: 15px;
}
.font16{
font-size: 16px;
}
.plr20 {
padding: 0 20px;
}
.ml10{
margin-left: 10px;
}
.mr10{
margin-right: 10px;
}
.mb10 {
margin-bottom: 10px;
}
.price_color {
color: #FD5836
}
.align_center {
text-align: center;
}
.align_left {
text-align: left;
}
//按钮
.btn {
width: 110px;
line-height: 33px;
height: 33px;
}
.mini_btn{
width: 75px;
height: 33px;
line-height: 33px;
}
.small_btn{
width: 90px;
height: 33px;
line-height: 33px;
}
.large_btn {
width: 348px;
height: 44px;
margin: 8px 0;
}
/*商品列表*/
.list {
background: #ffffff;
margin-bottom: 55px;
}
.list .title {
img {
vertical-align: middle;
display: inline-block;
margin-right: 5px;
width: 16px;
}
span {
font-size: 15px;
}
}
.list .content {
font-size: 15px;
padding: 15px 0;
border-bottom: 0.5px solid #DCDCDC;
.download {
width: 33px;
margin-right: 8px;
}
}
/*通用设置*/
.imgs {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
.good {
width: 109px;
margin-bottom: 10px;
}
}
//商品列表
.sing_good{
font-size: 14px;
background: #ffffff;
.good_content{
flex: 1;
}
.img{
width: 84px;
}
.name{
color: #101010;
}
.sku{
font-size: 11px;
color:#CCCCCC;
}
}
/*自定义单元格cell*/
.cell_group {
.van-cell{
font-size: 15px;
padding: 17px 20px;
}
.van-cell__value{
font-size: 14px;
color: #999999;
}
}
/*文字两侧有横线*/
.wrap {
position: relative;
text-align: center;
margin: 0 auto;
width: 140px;
padding: 15px 0;
}
.wrap p {
line-height: 20px;
font-size: 15px;
}
/*CSS伪类用法*/
.wrap p:after,
.wrap p:before {
position: absolute;
top: 50%;
background: #666666;
content: '';
height: 1px;
width: 5%;
}
/*调整背景横线的左右距离*/
.wrap p:before {
left: 0;
}
.wrap p:after {
right: 0;
}
src/components/NavBar.vue 0 → 100644
<template>
<van-sticky>
<van-nav-bar :title="title" :left-arrow="leftArrow" @click-left="onClickLeft"
:right-text="rightText"
@click-right="onClickRight">
</van-nav-bar>
</van-sticky>
</template>
<script>
export default {
name: 'NavBar',
props: {
title: {
type: String,
default: ''
},
rightText: {
type: String,
default: ''
},
leftArrow: {
type: Boolean,
default: true
}
},
methods: {
onClickLeft () {
this.$router.go(-1)
},
onClickRight () {
this.$emit('rightClick')
}
}
}
</script>
<style lang="less">
.van-nav-bar__title{
font-weight: bold;
}
</style>
src/components/Stepper.vue 0 → 100644
<template>
<van-stepper v-model="num" :max="maxNum" input-width="25px" button-size="22px"/>
</template>
<script>
export default {
name: 'Stepper',
data () {
return {
num: this.inputNum
}
},
props: {
maxNum: Number,
inputNum: Number
},
watch: {
inputNum (val) {
console.log(2, val)
this.num = val
},
num (val) {
console.log(1, val)
this.$emit('changeNum', this.num)
}
}
}
</script>
<style>
.van-stepper__input {
margin: 0;
border-top: 1px solid #DCDCDC;
border-bottom: 1px solid #DCDCDC;
}
.van-stepper__plus, .van-stepper__minus {
border: 1px solid #dcdcdc;
}
.van-stepper__minus::before, .van-stepper__plus::before {
width: 40%;
height: 1px;
}
.van-stepper__minus::after, .van-stepper__plus::after {
width: 1px;
height: 40%;
}
</style>
src/main.js 0 → 100644
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/less/common.less'
import MyNavBar from '@/components/NavBar'
import { Button, DropdownMenu, DropdownItem, Tabbar, TabbarItem, Cell, CellGroup, Popup, Search, Swipe, SwipeItem, Grid, GridItem, Image, Tab, Tabs, NavBar, Icon, List, Card, Checkbox, CheckboxGroup, Stepper, Sticky, Divider, RadioGroup, Radio, Field } from 'vant'
Vue.component('navbar', MyNavBar)
Vue.config.productionTip = false
Vue.use(Cell).use(CellGroup)
Vue.use(Button)
Vue.use(Tabbar).use(TabbarItem)
Vue.use(Swipe).use(SwipeItem)
Vue.use(Grid).use(GridItem)
Vue.use(Tab).use(Tabs)
Vue.use(Checkbox).use(CheckboxGroup)
Vue.use(RadioGroup)
Vue.use(Radio)
Vue.use(Popup)
Vue.use(Search)
Vue.use(Image)
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(List)
Vue.use(Card)
Vue.use(Stepper)
Vue.use(Sticky)
Vue.use(Divider)
Vue.use(Field)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
src/my-theme/index.less 0 → 100644
@green: #4583F3;
@nav-bar-text-color: #020202;
@nav-bar-icon-color: #020202;
@nav-bar-title-font-size: 17px;
//@stepper-active-color: #e8e8e8;
@stepper-background-color: white;
//@stepper-button-icon-color: @text-color;
//@stepper-button-disabled-color: @background-color;
//@stepper-button-disabled-icon-color: @gray-5;
//@stepper-button-round-theme-color: @red;
//@stepper-input-width: 32px;
//@stepper-input-height: 28px;
@stepper-input-font-size: 11px;
//@stepper-input-line-height: normal;
//@stepper-input-text-color: @text-color;
//@stepper-input-disabled-text-color: @gray-5;
//@stepper-input-disabled-background-color: @active-color;
//@stepper-border-radius: @border-radius-md;
// DropdownMenu
//@dropdown-menu-height: 48px;
//@dropdown-menu-background-color: @white;
@dropdown-menu-title-font-size: 13px;
@dropdown-menu-title-text-color: #999999;
//@dropdown-menu-title-active-text-color: @blue;
//@dropdown-menu-title-disabled-text-color: @gray-6;
//@dropdown-menu-title-padding: 0 @padding-xs;
//@dropdown-menu-title-line-height: 22px;
//@dropdown-menu-option-active-color: @blue;
//@dropdown-menu-content-max-height: 80%;
//@dropdown-item-z-index: 10;
src/router/index.js 0 → 100644
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: () => import('@/views/Home/index.vue')
},
{
path: '/receive',
name: 'receive',
component: () => import('@/views/Employee/index.vue')
},
{
path: '/receiveRecords',
name: 'receiveRecords',
component: () => import('@/views/Employee/receiveRecords.vue')
},
{
path: '/admin',
name: 'admin',
component: () => import('@/views/Admin/index.vue')
},
{
path: '/scan',
name: 'scan',
component: () => import('@/views/Admin/scan.vue')
},
{
path: '/receiveAdmin',
name: 'receiveAdmin',
component: () => import('@/views/Admin/receiveAdmin.vue')
},
{
path: '/receiveDetail',
name: 'receiveDetail',
component: () => import('@/views/Admin/receiveDetail.vue')
},
{
path: '/inventory',
name: 'inventory',
component: () => import('@/views/Admin/inventory.vue')
}
]
const router = new VueRouter({
routes
})
export default router
src/store/index.js 0 → 100644
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
src/views/Admin/index.vue 0 → 100644
<template>
<div class="page">
<navbar title="办公用品管理" :leftArrow="false"></navbar>
<div class="container">
<router-link :to="{path: 'scan'}" class="collect">
<img class="bg" src="@/assets/images/Outbound@2x.png" alt="">
<p class="title">扫码出库</p>
<p>扫描员工的动态二维码</p>
</router-link>
<router-link :to="{path: 'receiveAdmin'}" class="collect">
<img class="bg" src="@/assets/images/Collectings@2x.png" alt="">
<p class="title">领用记录</p>
<p>查看员工的领用记录</p>
</router-link>
<router-link :to="{path: 'inventory'}" class="collect">
<img class="bg" src="@/assets/images/Statistics@2x.png" alt="">
<p class="title">库存统计</p>
<p>查看物品的库存情况</p>
</router-link>
</div>
</div>
</template>
<script>
export default {
name: 'index',
components: {},
data () {
return {}
},
mounted () {
},
methods: {}
}
</script>
<style lang='less' scoped>
.page{
background: #ffffff;
}
.collect{
margin: 20px auto 0;
width: 90%;
padding: 8% 0 8%;
position: relative;
z-index: 2;
}
.collect .bg{
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index:-1;
}
.collect p{
padding-left: 7%;
font-size: 13px;
color: #ffffff;
text-align: left;
}
.collect .title{
font-size: 22px;
margin-bottom: 5px;
}
</style>
src/views/Admin/inventory.vue 0 → 100644
<template>
<div class="page">
<navbar title="库存统计"></navbar>
<div class="container">
<van-grid class="my-grid" :column-num="3">
<van-grid-item>
<p class="num">70</p>
<p class="notice">今日出库</p>
</van-grid-item>
<van-grid-item>
<p class="num">70</p>
<p class="notice">今日入库</p>
</van-grid-item>
<van-grid-item>
<p class="num">70</p>
<p class="notice">库存预警</p>
</van-grid-item>
<van-grid-item>
<p class="num">70</p>
<p class="notice">今日申领人</p>
</van-grid-item>
<van-grid-item>
<p class="num">70</p>
<p class="notice">总库存</p>
</van-grid-item>
</van-grid>
<van-dropdown-menu class="menu">
<van-dropdown-item title="全部库存" ref="item" disabled>
</van-dropdown-item>
<van-dropdown-item v-model="value2" :options="option2"/>
<van-dropdown-item v-model="value3" :options="option3"/>
</van-dropdown-menu>
<table>
<tr>
<th>物品名称</th>
<th>型号</th>
<th>物品类别</th>
<th>数量</th>
</tr>
<tr v-for="(item,index) in 6" :key="index">
<td>圆珠笔</td>
<td>nhg</td>
<td>办公五品</td>
<td>
1
</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: 'inventory',
components: {},
data () {
return {
value1: '全部记录',
value2: 'a',
value3: 'a',
// option1: [
// { text: '全部记录', value: 0 }
// ],
option2: [
{
text: '物品类别',
value: 'a'
},
{
text: '好评排序',
value: 'b'
},
{
text: '销量排序',
value: 'c'
}
],
option3: [
{
text: '库存预警',
value: 'a'
},
{
text: '好评排序',
value: 'b'
},
{
text: '销量排序',
value: 'c'
}
]
}
},
mounted () {
},
methods: {
submit () {
console.log('提交')
}
}
}
</script>
<style lang='scss' scoped>
.num{
font-size: 17px;
font-weight:bold;
margin-bottom: 5px;
}
.notice{
color: #8B8C90;
}
.menu {
width: 100%;
margin-top: 10px;
}
.my-grid {
width: 100%;
background: #ffffff;
}
table {
width: 100%;
background: #ffffff;
border-collapse: collapse;
}
table tr:first-child {
background: #f6f7f9;
height: 34px;
}
table tr {
height: 42px;
}
table th {
color: #666666;
font-size: 14px;
}
table td {
font-size: 14px;
}
</style>
src/views/Admin/receiveAdmin.vue 0 → 100644
<template>
<div class="page">
<navbar title="领用记录"></navbar>
<div class="container">
<van-dropdown-menu class="menu">
<van-dropdown-item title="全部记录" ref="item" disabled>
</van-dropdown-item>
<van-dropdown-item v-model="value2" :options="option2"/>
<van-dropdown-item v-model="value3" :options="option3"/>
<van-dropdown-item v-model="value4" :options="option4"/>
</van-dropdown-menu>
<div class="row" v-for="(item,index) in 3" :key="index">
<p class="title">
<span>研发部：98293023</span>
<span>2020-03-02 19:30</span>
</p>
<div class="main" v-for="(item,index) in 2" :key="index">
<p>16开记事本</p>
<div class="info">
<p>类别：办公用品</p>
<p>
<span class="num">数量：</span>
<span>3</span>
</p>
</div>
</div>
<div class="btn-group">
<van-button :to="{path: 'receiveDetail'}" plain type="info" size="small">查看详情</van-button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'receiveAdmin',
components: {},
data () {
return {
value1: '全部记录',
value2: 0,
value3: 'a',
value4: 'a',
// option1: [
// { text: '全部记录', value: 0 }
// ],
option2: [
{
text: '所属部门',
value: 0
},
{
text: '新款商品',
value: 1
},
{
text: '活动商品',
value: 2
}
],
option3: [
{
text: '物品类别',
value: 'a'
},
{
text: '好评排序',
value: 'b'
},
{
text: '销量排序',
value: 'c'
}
],
option4: [
{
text: '领用日期',
value: 'a'
},
{
text: '好评排序',
value: 'b'
},
{
text: '销量排序',
value: 'c'
}
]
}
},
mounted () {
},
methods: {}
}
</script>
<style lang='scss' scoped>
.menu {
width: 100%;
}
.row {
width: 100%;
}
.row {
margin-top: 10px;
}
.row .title {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background: #f6f7f9;
}
.title span:last-child, .num {
color: #999;
}
.row .main{
padding: 15px;
font-size: 14px;
background: #ffffff;
text-align: left;
border-bottom: 1px solid #e8e8e8;
}
.row .info {
display: flex;
justify-content: space-between;
align-items: center;
}
.btn-group{
background: #ffffff;
text-align: right;
padding:20px;
}
</style>
src/views/Admin/receiveDetail.vue 0 → 100644
<template>
<div class="page">
<navbar title="详情" ></navbar>
<div class="container">
<div class="info">
<p>申领人： <span>王志军</span></p>
<p>所属部门：<span>王志军</span></p>
<p>员工编号：<span>王志军</span></p>
</div>
<table>
<tr>
<th>物品名称</th>
<th>型号</th>
<th>物品类别</th>
<th>数量</th>
</tr>
<tr v-for="(item,index) in 6" :key="index">
<td>圆珠笔</td>
<td>nhg</td>
<td>办公五品</td>
<td>
1
</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: 'receiveDetail',
components: {
},
data () {
return {}
},
mounted () {
},
methods: {
submit () {
console.log('提交')
}
}
}
</script>
<style lang='scss' scoped>
.info {
background: #ffffff;
width: 100%;
}
.info p {
width: 40%;
padding: 10px 0 10px 20px;
line-height: 18px;
color: #999999;
text-align: left;
}
.info span {
color: #020202;
}
table {
width: 100%;
background: #ffffff;
margin-top: 10px;
border-collapse: collapse;
}
table tr:first-child {
background: #f6f7f9;
height: 34px;
}
table tr {
height: 42px;
}
table th {
color: #666666;
font-size: 14px;
}
table td {
font-size: 14px;
}
</style>
src/views/Admin/scan.vue 0 → 100644
<template>
<div class="page">
<navbar title="扫码出库" :leftArrow="false" rightText="完成" @rightClick="submit"></navbar>
<div class="container">
<div class="info">
<p>申领人： <span>王志军</span></p>
<p>所属部门：<span>王志军</span></p>
<p>员工编号：<span>王志军</span></p>
</div>
<table>
<tr>
<th>物品名称</th>
<th>型号</th>
<th>物品类别</th>
<th>数量</th>
</tr>
<tr v-for="(item,index) in 6" :key="index">
<td>圆珠笔</td>
<td>nhg</td>
<td>办公五品</td>
<td style="width: 30%;">
<stepper :maxNum="item.num" :inputNum="item.count" @changeNum="changeNum"></stepper>
</td>
</tr>
</table>
</div>
<div class="bottom-fixed">
<van-button plain type="primary">扫描物品条形码</van-button>
<van-button type="primary">扫描员工二维码</van-button>
</div>
</div>
</template>
<script>
import Stepper from '@/components/Stepper.vue'
export default {
name: 'scan',
components: {
Stepper
},
data () {
return {}
},
mounted () {
},
methods: {
submit () {
console.log('提交')
}
}
}
</script>
<style lang='scss' scoped>
.info {
background: #ffffff;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.info p {
width: 40%;
padding: 10px 0 10px 20px;
line-height: 18px;
color: #999999;
text-align: left;
}
.info span {
color: #020202;
}
table {
width: 100%;
background: #ffffff;
margin-top: 10px;
border-collapse: collapse;
}
table tr:first-child {
background: #f6f7f9;
height: 34px;
}
table tr {
height: 42px;
}
table th {
color: #666666;
font-size: 14px;
}
table td {
font-size: 14px;
}
.bottom-fixed {
width: 90%;
margin: 0 auto;
position: fixed;
bottom: 10px;
left: 0;
right: 0;
}
.bottom-fixed button {
width: 50%;
border-radius: 5px;
}
.bottom-fixed button:first-child {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.bottom-fixed button:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
</style>
src/views/Employee/index.vue 0 → 100644
<template>
<div class="page">
<navbar title="办公用品领用" rightText="领用记录" @rightClick="goRecords"></navbar>
<div class="container">
<div class="code">
<img class="bg" src="@/assets/images/bg@2x.png" alt="">
<div class="wrap">
<p>我的动态二维码</p>
</div>
<img class="qr"
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2162188945,3066929966&fm=111&gp=0.jpg"
alt="">
<p class="notice">领用办公用品时请出示该二维码</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'index',
components: {},
data () {
return {}
},
mounted () {
},
methods: {
goRecords () {
this.$router.push({
path: '/receiveRecords'
})
}
}
}
</script>
<style lang='scss' scoped>
.page {
background: #ffffff;
}
.code {
width: 85%;
margin: 16px auto;
position: relative;
z-index: 1;
}
.code .bg {
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
}
.code .qr {
width: 70%;
text-align: center;
margin: 0 auto 50px;
}
.code .notice {
color: #999999;
}
</style>
src/views/Employee/receiveRecords.vue 0 → 100644
<template>
<div class="page">
<navbar title="领用记录" @rightClick="goRecords"></navbar>
<div class="container" >
<div class="row" v-for="(item,index) in 8" :key="index">
<p class="title">
<span>领用编号：98293023</span>
<span>2020-03-02 19:30</span>
</p>
<div class="info" v-for="(item,index) in 2" :key="index">
<p>16开记事本</p>
<p>
<span class="num">数量：</span>
<span>3</span>
</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'index',
components: {},
data () {
return {}
},
mounted () {
},
methods: {
goRecords () {
console.log(1111)
}
}
}
</script>
<style lang='scss' scoped>
.row {
width: 100%;
}
.row+.row{
margin-top: 10px;
}
.row .title {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background: #f6f7f9;
}
.title span:last-child, .num{
color: #999;
}
.row .info{
display: flex;
justify-content: space-between;
align-items: center;
background: #ffffff;
padding: 15px;
font-size: 14px;
}
.info +.info{
border-top: 1px solid #e8e8e8;
}
</style>
src/views/Home/index.vue 0 → 100644
<template>
<div class="page">
<navbar title="管理平台" :leftArrow="false"></navbar>
<div class="container">
<router-link :to="{path: 'receive'}" class="collect">
<img class="bg" src="@/assets/images/Collecting@2x.png" alt="">
<p class="title">办公用品领用</p>
<p>Office supplies collection</p>
</router-link>
<router-link :to="{path: 'admin'}" class="collect">
<img class="bg" src="@/assets/images/Administration@2x.png" alt="">
<p class="title">办公用品管理</p>
<p> Office supplies management</p>
</router-link>
</div>
</div>
</template>
<script>
export default {
name: 'index',
components: {},
data () {
return {}
},
mounted () {
},
methods: {}
}
</script>
<style lang='less' scoped>
.page{
background: #ffffff;
}
.collect{
margin: 20px auto 0;
width: 90%;
padding: 8% 0 8%;
position: relative;
z-index: 2;
}
.collect .bg{
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index:-1;
}
.collect p{
padding-left: 7%;
font-size: 13px;
color: #ffffff;
text-align: left;
}
.collect .title{
font-size: 22px;
margin-bottom: 5px;
}
</style>
vue.config.js 0 → 100644
module.exports = {
css: {
loaderOptions: {
less: {
// 若使用 less-loader@5，请移除 lessOptions 这一级，直接配置选项。
lessOptions: {
modifyVars: {
// 或者可以通过 less 文件覆盖（文件路径为绝对路径）
hack: 'true; @import "~@/my-theme/index.less";'
}
}
}
}
}
}
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