新增路由
parent
6bc57d4809
commit
d1f4e17d27
|
|
@ -0,0 +1,23 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
/node_modules
|
||||
|
||||
# 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?
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
# deqindemo
|
||||
|
||||
## 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/).
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
Subproject commit 1dfbcbc8de5d750a0deaa4ecf3cc31737d281225
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,46 @@
|
|||
{
|
||||
"name": "deqindemo",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"ant-design-vue": "^2.2.8",
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^3.0.0",
|
||||
"vue-router": "^4.0.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^7.0.0"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
},
|
||||
"rules": {
|
||||
"no-unused-vars": "off"
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<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><%= htmlWebpackPlugin.options.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>
|
||||
|
|
@ -0,0 +1,826 @@
|
|||
<template>
|
||||
<!-- <login /> -->
|
||||
<!-- <Session /> -->
|
||||
<transition name="fade">
|
||||
<router-view v-if="isRouterAlive"></router-view>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App',
|
||||
data() {
|
||||
return {
|
||||
isRouterAlive: true //控制视图是否显示的变量
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0px;
|
||||
height: 100vh;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
input {
|
||||
padding-left: .875rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fs14 {
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.fs16 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.pdlr30 {
|
||||
padding-left: 1.875rem;
|
||||
padding-right: 1.875rem;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-con-hed {
|
||||
|
||||
height: 16rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#login .int p {
|
||||
font-family: PingFangSC-Semibold;
|
||||
font-size: 1.125rem;
|
||||
font-weight: bold;
|
||||
color: #100B0C;
|
||||
margin-bottom: .5rem;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
#login .int input {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #D2D5CE;
|
||||
border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
#login .btn {
|
||||
background: #00A3E0;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
height: 3.125rem;
|
||||
border-radius: 2px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 1.125rem;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .875rem;
|
||||
color: #999F9F;
|
||||
letter-spacing: 0;
|
||||
margin: auto;
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
line-height: .875rem;
|
||||
position: absolute;
|
||||
bottom: 1.8125rem;
|
||||
}
|
||||
|
||||
.session-con-hed {
|
||||
width: 100%;
|
||||
height: 3.125rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
align-items: center;
|
||||
padding: 0 .9375rem;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.session-con-hed .tit {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 1.125rem;
|
||||
color: #100B0C;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
.session-con-hed .kf {
|
||||
width: 1.5rem;
|
||||
display: block;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.session-con-hed .rit {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.session-con-hed .menu {
|
||||
position:relative;
|
||||
display: flex;
|
||||
width: 1.5rem;
|
||||
margin-left: 1rem;
|
||||
height: 1.5rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.session-con-hed .menu p {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: #333333;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#session {
|
||||
background: #F2F2F2;
|
||||
padding-top: 2.5rem;
|
||||
padding-left: .9375rem;
|
||||
padding-right: .9375rem;
|
||||
min-height: 100%;
|
||||
padding-bottom: 4.5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.customerService {
|
||||
padding-top: 1.5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.customerService .left {
|
||||
width: 2.5rem;
|
||||
border-radius: 50%;
|
||||
margin-right: .625rem;
|
||||
overflow: hidden;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.customerService .rit .date {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .75rem;
|
||||
color: #999F9F;
|
||||
letter-spacing: 0;
|
||||
margin-bottom: .25rem;
|
||||
line-height: .75rem;
|
||||
}
|
||||
|
||||
.customerService .rit .text {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .8125rem;
|
||||
color: #292D2D;
|
||||
letter-spacing: 0;
|
||||
width: 15.9375rem;
|
||||
box-sizing: border-box;
|
||||
padding: .625rem;
|
||||
background-color: #fff;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.customerService .rit .text .gd>:nth-child(1) {
|
||||
width: 100%;
|
||||
height: 6.875rem;
|
||||
}
|
||||
|
||||
.customerService .rit .text .gd>:nth-child(2) {
|
||||
width: 14.6875rem;
|
||||
height: 2.5rem;
|
||||
background: #00A3E0;
|
||||
border-radius: .125rem;
|
||||
border-radius: .125rem;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 1rem;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
margin-top: 1.875rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.user .left {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.user .left .date {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .75rem;
|
||||
color: #999F9F;
|
||||
letter-spacing: 0;
|
||||
line-height: .75rem;
|
||||
}
|
||||
|
||||
.user .left .text {
|
||||
background: #00A3E0;
|
||||
border-radius: .25rem;
|
||||
max-width: 15.9375rem;
|
||||
margin-top: .25rem;
|
||||
border-radius: .25rem;
|
||||
padding: .625rem;
|
||||
display: inline-flex;
|
||||
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .8125rem;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
box-sizing: border-box;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.user .left .text img {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.user .left .text p {
|
||||
display: iib;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.user .rit {
|
||||
width: 2.5rem;
|
||||
margin-left: .625rem;
|
||||
height: 2.5rem;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
|
||||
.session-footer {
|
||||
width: 100%;
|
||||
height: 3.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 .9375rem;
|
||||
position: relative;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.session-footer img {
|
||||
width: 1.625rem;
|
||||
height: 1.625rem;
|
||||
}
|
||||
|
||||
.session-footer>:nth-child(2) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.session-footer>:nth-child(2) .input {
|
||||
width: 16.525rem;
|
||||
height: 2.5rem;
|
||||
background: #F2F2F2;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.session-footer>:nth-child(2) .button {
|
||||
width: 16.525rem;
|
||||
height: 2.5rem;
|
||||
background: #F2F2F2;
|
||||
border-radius: .25rem;
|
||||
border: none;
|
||||
|
||||
border-radius: .25rem;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 1rem;
|
||||
color: #999F9F;
|
||||
letter-spacing: -0.08px;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.session-footer>:nth-child(2) img {
|
||||
width: 1.625rem;
|
||||
height: 1.625rem;
|
||||
position: absolute;
|
||||
top: .375rem;
|
||||
right: .625rem;
|
||||
|
||||
}
|
||||
|
||||
#session .artificial {
|
||||
text-align: center;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
#session .artificial p {
|
||||
background: #8B8B8B;
|
||||
border-radius: .25rem;
|
||||
border-radius: .25rem;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .75rem;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding: .1875rem .5rem;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
.moban {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 12.5rem;
|
||||
top: -12.6rem;
|
||||
left: 0px;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
|
||||
padding-top: 3.125rem;
|
||||
}
|
||||
|
||||
.moban img {
|
||||
position: absolute;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
right: .9375rem;
|
||||
top: .9375rem;
|
||||
|
||||
}
|
||||
|
||||
.moban .tis {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .875rem;
|
||||
color: #999F9F;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
width: 19.6875rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qrderQuery-con-hed {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
z-index: 5;
|
||||
top: 0px;
|
||||
height: 3.125rem;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.qrderQuery-con-hed img {
|
||||
position: absolute;
|
||||
width: 1.25rem;
|
||||
left: 0.9375rem;
|
||||
height: 1.25rem;
|
||||
|
||||
}
|
||||
|
||||
.qrderQuery-con-hed p {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 1.125rem;
|
||||
color: #100B0C;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
#qrderQuery {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background-color: #F2F2F2;
|
||||
box-sizing: border-box;
|
||||
padding: .9375rem;
|
||||
padding-top: 3.6875rem;
|
||||
}
|
||||
|
||||
#qrderQuery .tit {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 1rem;
|
||||
color: #999F9F;
|
||||
margin-bottom: .9375rem;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
#qrderQuery {}
|
||||
|
||||
.qrderQuery-c {
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: .625rem;
|
||||
padding: 1rem;
|
||||
padding-top: .8125rem;
|
||||
}
|
||||
|
||||
.qrderQuery-c .titcon {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 1rem;
|
||||
padding-bottom: .6875rem;
|
||||
color: #100B0C;
|
||||
letter-spacing: 0;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
line-height: 1.625rem;
|
||||
}
|
||||
|
||||
.qrderQuery-c .zt {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .875rem;
|
||||
color: #999F9F;
|
||||
margin-top: .9375rem;
|
||||
letter-spacing: 0;
|
||||
line-height: .875rem;
|
||||
;
|
||||
}
|
||||
|
||||
.qrderQuery-c .date {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .875rem;
|
||||
color: #999F9F;
|
||||
letter-spacing: 0;
|
||||
margin-top: .625rem;
|
||||
line-height: .875rem;
|
||||
;
|
||||
}
|
||||
|
||||
.zta {
|
||||
color: #ff7e71;
|
||||
}
|
||||
|
||||
.ztb {
|
||||
color: #67d23b;
|
||||
|
||||
}
|
||||
|
||||
#personalCenter {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background-color: #F2F2F2;
|
||||
box-sizing: border-box;
|
||||
padding-top: 3.6875rem;
|
||||
}
|
||||
|
||||
#personalCenter .list {
|
||||
width: 100%;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
height: 3.375rem;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
#personalCenter .list div {
|
||||
box-shadow: inset 0 -1px 0 0 #EBEEF5;
|
||||
width: 100%;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
height: 3.375rem;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
margin-left: .875rem;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#personalCenter .list img {
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
#personalCenter .list p {
|
||||
|
||||
margin-right: .5rem;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 1rem;
|
||||
color: #100B0C;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.tc {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 3.875rem;
|
||||
background-color: #fff;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.tc button {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #00A3E0;
|
||||
border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
margin-left: 0.9375rem;
|
||||
margin-right: 0.9375rem;
|
||||
height: 3.125rem;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 1.125rem;
|
||||
color: #00A3E0;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
#costInformation {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background-color: #F2F2F2;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 4.375rem;
|
||||
padding-top: 3.6875rem;
|
||||
}
|
||||
|
||||
#costInformation .list {
|
||||
background-color: #fff;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#costInformation .list>div {
|
||||
box-shadow: inset 0 -1px 0 0 #EBEEF5;
|
||||
width: 100%;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
height: 3.375rem;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
margin-left: .875rem;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
padding-right: .9375rem;
|
||||
}
|
||||
|
||||
#costInformation .list>div>:nth-child(1) {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .875rem;
|
||||
color: #100B0C;
|
||||
letter-spacing: 0;
|
||||
min-width: 5.25rem;
|
||||
margin-right: 1.875rem;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
#costInformation .list>div>:nth-child(2) {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .875rem;
|
||||
color: #292D2D;
|
||||
letter-spacing: 0;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
padding-right: 0.9375rem;
|
||||
}
|
||||
#costInformation .list input {
|
||||
padding-left: 0px;
|
||||
height: 3.3rem;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#costInformation .list input::placeholder {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .875rem;
|
||||
color: #999F9F;
|
||||
letter-spacing: 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.qd {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
height: 3.875rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 .9375rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.qd button {
|
||||
background: #00A3E0;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
height: 3.25rem;
|
||||
border-radius: 2px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 1.125rem;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#completeSet {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background-color: #F2F2F2;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 4.375rem;
|
||||
padding-top: 3.6875rem;
|
||||
}
|
||||
|
||||
#completeSet .list {
|
||||
background-color: #fff;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#completeSet .list>div {
|
||||
box-shadow: inset 0 -1px 0 0 #EBEEF5;
|
||||
width: 100%;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
height: 3.375rem;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
margin-left: .875rem;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
padding-right: .9375rem;
|
||||
}
|
||||
|
||||
#completeSet .list>div>:nth-child(1) {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .875rem;
|
||||
color: #100B0C;
|
||||
letter-spacing: 0;
|
||||
min-width: 7.5rem;
|
||||
margin-right: 1.875rem;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
#completeSet .list>div>:nth-child(2) {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .875rem;
|
||||
color: #292D2D;
|
||||
letter-spacing: 0;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-right: .9375rem;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
#completeSet .list>div>:nth-child(2) input {
|
||||
padding-left: 0px;
|
||||
height: 3.3rem;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#completeSet .list>div>:nth-child(2) input::placeholder {
|
||||
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .875rem;
|
||||
color: #999F9F;
|
||||
letter-spacing: 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
#completeSet .mgtop {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#completeSet .list>div>:nth-child(2) button {
|
||||
padding-left: 0px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .875rem;
|
||||
color: #999F9F;
|
||||
letter-spacing: 0;
|
||||
line-height: 20px;
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
#completeSet .list>div>:nth-child(2) button img {
|
||||
position: absolute;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
right: .9375rem;
|
||||
}
|
||||
|
||||
.completeSetqd {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
height: 3.875rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 .9375rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.completeSetqd button {
|
||||
background: #00A3E0;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
height: 3.25rem;
|
||||
border-radius: 2px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 1.125rem;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
line-height: 1.125rem;
|
||||
opacity: 0.5;
|
||||
background: #00A3E0;
|
||||
border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.mobanxuan {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.mobanxuan>div {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
background: #F2F2F2;
|
||||
border-radius: 12px 12px 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mobanxuan>div .p {
|
||||
width: 100%;
|
||||
height: 3.125rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #F2F2F2;
|
||||
justify-content: center;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.mobanxuan>div .btn {
|
||||
width: 100%;
|
||||
height: 3.125rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: .625rem;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #F2F2F2;
|
||||
justify-content: center;
|
||||
font-size: .875rem;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 355 B |
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,53 @@
|
|||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
/* 去掉router-link标签的下划线 */
|
||||
.router-link-active {
|
||||
text-decoration: none;
|
||||
}
|
||||
input,textarea{
|
||||
outline: none;
|
||||
}
|
||||
.fun-box{
|
||||
position:absolute;
|
||||
top:2.375rem;
|
||||
right:0px;
|
||||
font-size:1rem;
|
||||
width:6rem;
|
||||
height:5.375rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
color:#000;
|
||||
box-shadow: 0 0 1.25rem 0 rgba(0,0,0,0.10);
|
||||
border-radius:0.3125rem;
|
||||
}
|
||||
.fun-box div{
|
||||
width:6rem;
|
||||
height:2.25rem;
|
||||
line-height:2.25rem;
|
||||
text-align:center;
|
||||
}
|
||||
.fun-box span{
|
||||
position:absolute;
|
||||
top:-0.25rem;
|
||||
right:0.5rem;
|
||||
width:0.5rem;
|
||||
height:0.5rem;
|
||||
background:#fff;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.tank{
|
||||
position: fixed;
|
||||
/* top: 50%; */
|
||||
left: 50%;
|
||||
/* transform: translate(-50%,-50%); */
|
||||
transform: translateX(-50%);
|
||||
bottom: 10%;
|
||||
font-size: 0.875rem;
|
||||
padding: 0.625rem 1.25rem;
|
||||
background: rgba(0,0,0,.5);
|
||||
color: #fff;
|
||||
border-radius: 0.1875rem;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 405 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,11 @@
|
|||
import { createApp } from 'vue'
|
||||
import router from '@/router'//引入router
|
||||
import App from './App.vue'
|
||||
|
||||
// 引入公共样式
|
||||
import '@/assets/css/style.css'
|
||||
import '@/assets/css/animate.min.css'
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(router);//挂载使用router
|
||||
app.mount('#app')
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
// 引入vue-router
|
||||
import {
|
||||
createRouter,
|
||||
createWebHistory
|
||||
} from 'vue-router'
|
||||
// 引入组件
|
||||
import login from '../view/login.vue'
|
||||
import completeSet from '../view/completeSet.vue'
|
||||
import costInformation from '../view/costInformation.vue'
|
||||
import personalCenter from '../view/personalCenter.vue'
|
||||
import qrderQuery from '../view/qrderQuery.vue'
|
||||
import session from '../view/session.vue'
|
||||
//配置路由
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [{
|
||||
path: '/', //登录页
|
||||
name: 'login',
|
||||
component: login
|
||||
}, {
|
||||
path: '/completeSet', //
|
||||
name: 'completeSet',
|
||||
component: completeSet
|
||||
}, {
|
||||
path: '/costInformation', //
|
||||
name: 'costInformation',
|
||||
component: costInformation
|
||||
}, {
|
||||
path: '/personalCenter', //
|
||||
name: 'personalCenter',
|
||||
component: personalCenter
|
||||
}, {
|
||||
path: '/qrderQuery', //
|
||||
name: 'qrderQuery',
|
||||
component: qrderQuery
|
||||
}, {
|
||||
path: '/session', //对话框页
|
||||
name: 'session',
|
||||
component: session
|
||||
}]
|
||||
})
|
||||
// 导出router
|
||||
export default router;
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
<template>
|
||||
<div class="main">
|
||||
<div class="qrderQuery-con-hed">
|
||||
<img @click="backEv" class="img" src="../assets/back.png" alt="">
|
||||
<p>基本信息</p>
|
||||
</div>
|
||||
<div id="completeSet">
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>常用项目代码</p>
|
||||
<div><input placeholder="请输入常用的项目代码" v-model="projectCode" type="text"></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>常用项目名称</p>
|
||||
<div><input placeholder="请输入常用的项目名称" v-model="projectName" type="text"></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>乘机/订酒店姓名</p>
|
||||
<div><input placeholder="请输入乘机/订酒店时用的证件姓名" v-model="userName" type="text"></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>证件类型</p>
|
||||
<div><button class="listBtn" @click="xiugai(0)" :style="{color:certificate_cate!='请选择您的证件类型'?'#292D2D':''}">{{certificate_cate}}<img src="../assets/icon_arrow_right@2x.png" alt=""></button></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>证件号码</p>
|
||||
<div><input placeholder="请输入证件类型对应的证件号码" v-model="certificate" type="text"></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>乘机/订酒店手机</p>
|
||||
<div><input placeholder="请输入订机票/订酒店时用的手机号码" v-model="userPhone" type="text"></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list mgtop">
|
||||
<div>
|
||||
<p>偏好航司(if any)</p>
|
||||
<div><input placeholder="请输入个人偏好的航司" v-model="preference" type="text"></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>偏好舱位(if any)</p>
|
||||
<div><button class="listBtn" @click="xiugai(1)" :style="{color:shippingSpace!='请选择个人偏好舱位 '?'#292D2D':''}">{{shippingSpace}}<img src="../assets/icon_arrow_right@2x.png" alt=""></button></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list mgtop">
|
||||
<div>
|
||||
<p>偏好酒店(if any)</p>
|
||||
<div><button class="listBtn" @click="xiugai(2)" :style="{color:hotel!='请输入个人偏好酒店'?'#292D2D':''}">{{hotel}}<img src="../assets/icon_arrow_right@2x.png" alt=""></button></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>偏好房型(if any)</p>
|
||||
<div><button class="listBtn" :style="{color:preference_room!='请选择个人偏好房型'?'#292D2D':''}" @click="xiugai(3)">{{preference_room}}<img src="../assets/icon_arrow_right@2x.png" alt=""></button></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>偏好无烟房(if any)</p>
|
||||
<div><input placeholder="请选择个人偏好房型" v-model="preference_wuroom" type="text"> </div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list mgtop">
|
||||
<div>
|
||||
<p>备注</p>
|
||||
<div><input placeholder="请输入其它偏好备注" v-model="remaks" type="text"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="completeSetqd"><button @click="submitEv">确定</button></div>
|
||||
<div @click="closeEv" class="mobanxuan" v-if="indata">
|
||||
<div>
|
||||
<div>
|
||||
<p class="p" :style="{color:item.active ? '#00A3E0':''}" v-for="(item,index) in publicArr" :key="index" @click.stop="choosecate(index)">{{item.title}}</p>
|
||||
</div>
|
||||
<p class="btn" @click="closeEv">取消</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="msg!=''" class="tank">{{msg}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
indata: false,
|
||||
msg:'',
|
||||
times:0,
|
||||
projectCode:'',//常用项目代码
|
||||
projectName:'',//常用的项目名称
|
||||
userName:'',//乘机/订酒店时用的证件姓名
|
||||
certificate_cate:'请选择您的证件类型',//证件类型
|
||||
certificate:'',//证件号码
|
||||
userPhone:'',//乘机/订酒店手机
|
||||
preference:'',//偏好航司(if any)
|
||||
shippingSpace:'请选择个人偏好舱位 ',//偏好舱位(if any)
|
||||
hotel:'请输入个人偏好酒店',//偏好酒店(if any)
|
||||
preference_room:'请选择个人偏好房型',//偏好房型(if any)
|
||||
preference_wuroom:'',//偏好无烟房(if any)
|
||||
remaks:'',//备注
|
||||
publicArr:[],
|
||||
cateIndex:'-1',
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
submitEv(){//确定按钮点击事件
|
||||
if(this.times==0){
|
||||
this.times++;
|
||||
}
|
||||
},
|
||||
xiugai(index) {
|
||||
this.cateIndex = index;
|
||||
switch (index){
|
||||
case 0://证件类型
|
||||
this.publicArr = [
|
||||
{id:0,title:'证件类型一',active:false},
|
||||
{id:1,title:'证件类型二',active:false},
|
||||
{id:2,title:'证件类型三',active:false},
|
||||
{id:3,title:'证件类型四',active:false}
|
||||
]
|
||||
break;
|
||||
case 1://偏好舱位
|
||||
this.publicArr = [
|
||||
{id:0,title:'偏好舱位一',active:false},
|
||||
{id:1,title:'偏好舱位二',active:false},
|
||||
]
|
||||
break;
|
||||
case 2://偏好酒店
|
||||
this.publicArr = [
|
||||
{id:0,title:'偏好酒店一',active:false},
|
||||
{id:1,title:'偏好酒店二',active:false},
|
||||
{id:2,title:'偏好酒店三',active:false},
|
||||
{id:3,title:'偏好酒店四',active:false},
|
||||
{id:4,title:'偏好酒店五',active:false},
|
||||
{id:5,title:'偏好酒店六',active:false},
|
||||
]
|
||||
break;
|
||||
case 3://偏好房型
|
||||
this.publicArr = [
|
||||
{id:0,title:'偏好房型一',active:false},
|
||||
{id:1,title:'偏好房型二',active:false},
|
||||
{id:2,title:'偏好房型三',active:false},
|
||||
]
|
||||
break;
|
||||
}
|
||||
var activeIndex = 0;
|
||||
this.publicArr.forEach((item,index)=>{
|
||||
if(this.cateIndex==0 && item.title==this.certificate_cate){
|
||||
activeIndex = index;
|
||||
}
|
||||
if(this.cateIndex==1 && item.title==this.shippingSpace){
|
||||
activeIndex = index;
|
||||
}
|
||||
if(this.cateIndex==2 && item.title==this.hotel){
|
||||
activeIndex = index;
|
||||
}
|
||||
if(this.cateIndex==3 && item.title==this.preference_room){
|
||||
activeIndex = index;
|
||||
}
|
||||
});
|
||||
this.publicArr[activeIndex].active = true;
|
||||
this.indata = !this.indata
|
||||
},
|
||||
choosecate(index){//类型选择
|
||||
this.publicArr.forEach(item=>{
|
||||
item.active = false;
|
||||
})
|
||||
this.publicArr[index].active = true;
|
||||
if(this.cateIndex==0) this.certificate_cate = this.publicArr[index].title;
|
||||
if(this.cateIndex==1) this.shippingSpace = this.publicArr[index].title;
|
||||
if(this.cateIndex==2) this.hotel = this.publicArr[index].title;
|
||||
if(this.cateIndex==3) this.preference_room = this.publicArr[index].title;
|
||||
this.indata = false;
|
||||
},
|
||||
closeEv(){//关闭弹框
|
||||
this.indata = false;
|
||||
},
|
||||
backEv() {
|
||||
this.$router.push({
|
||||
path: '/personalCenter'
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,185 @@
|
|||
<template>
|
||||
<div class="main">
|
||||
<div class="qrderQuery-con-hed">
|
||||
<img @click="backEv" class="img" src="../assets/back.png">
|
||||
<p>基本信息</p>
|
||||
</div>
|
||||
<div id="costInformation">
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>员工号</p>
|
||||
<!-- <p>144213</p> -->
|
||||
<div><input placeholder="请输入员工号" v-model="staff_number" type="text"></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>姓名（英文）</p>
|
||||
<!-- <p>Wang, Belle Chenxin (CN - Chongqing)</p> -->
|
||||
<div><input placeholder="请输入员工姓名(英文)" v-model="staff_name_en" type="text"></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>姓名（中文）</p>
|
||||
<!-- <p>王辰欣</p> -->
|
||||
<div><input placeholder="请输入员工姓名（中文）" v-model="staff_name_cn" type="text"></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>成本中心代码</p>
|
||||
<!-- <p>CQDWDOJ000</p> -->
|
||||
<div><input placeholder="请输入成本中心代码" v-model="center_code" type="text"></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>成本中心全称</p>
|
||||
<!-- <p>GDCops-Sys Dvlp-GDC</p> -->
|
||||
<div><input placeholder="请输入成本中心全称" v-model="center_code_name" type="text"></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>部门编码</p>
|
||||
<!-- <p>GPEO</p> -->
|
||||
<div><input placeholder="请输入部门编码" v-model="department_code" type="text"></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>部门名称</p>
|
||||
<!-- <p>GDC Process Excellence-Operation</p> -->
|
||||
<div><input placeholder="请输入部门名称" v-model="department_name" type="text"></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>业务线</p>
|
||||
<!-- <p>卓越运营部</p> -->
|
||||
<div><input placeholder="请输入业务线" v-model="business_line" type="text"></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>区域代码</p>
|
||||
<!-- <p>GDC</p> -->
|
||||
<div><input placeholder="请输入区域代码" v-model="area_code" type="text"></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>级别（英文）</p>
|
||||
<!-- <p>Senior Associate</p> -->
|
||||
<div><input placeholder="请输入级别（英文）" v-model="grade_en" type="text"></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>级别（中文）</p>
|
||||
<!-- <p>高级专员</p> -->
|
||||
<div><input placeholder="请输入级别（中文）" v-model="grade_cn" type="text"></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>邮箱地址</p>
|
||||
<!-- <p>bellewang@deloitte.com.cn</p> -->
|
||||
<div><input placeholder="请输入邮箱地址" v-model="email" type="text"></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="list">
|
||||
<div>
|
||||
<p>地点</p>
|
||||
<!-- <p>CQ</p> -->
|
||||
<div><input placeholder="请输入地点" v-model="address" type="text"></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div class="qd"><button @click="submitEv">确定</button></div>
|
||||
<div v-if="msg!=''" class="tank">{{msg}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
staff_number:'',//员工号
|
||||
staff_name_en:'',//姓名（英文）
|
||||
staff_name_cn:'',//姓名（中文）
|
||||
center_code:'',//成本中心代码
|
||||
center_code_name:'',//成本中心全称
|
||||
department_code:'',//部门编码
|
||||
department_name:'',//部门名称
|
||||
business_line:'',//业务线
|
||||
area_code:'',//区域代码
|
||||
grade_en:'',//级别（英文）
|
||||
grade_cn:'',//级别（中文）
|
||||
email:'',//邮箱地址
|
||||
address:'',//地点
|
||||
times:true,
|
||||
msg:''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitEv(){
|
||||
if(this.times){
|
||||
this.times = false;
|
||||
console.log(this.checkEmpty());
|
||||
}
|
||||
},
|
||||
checkEmpty(){
|
||||
var flag = false;
|
||||
if(!this.staff_number||!this.staff_name_en||!this.staff_name_cn||!this.center_code||!this.center_code_name||!this.department_code||
|
||||
!this.department_name||!this.business_line||!this.area_code||!this.grade_en||!this.grade_cn||!this.email||!this.address){
|
||||
// this.msg = '请输入业务线';
|
||||
if(!this.staff_number) {
|
||||
this.msg = '请输入员工号';
|
||||
} else if(!this.staff_name_en) {
|
||||
this.msg = '请输入姓名（英文）';
|
||||
} else if(!this.staff_name_cn) {
|
||||
this.msg = '请输入姓名（中文）';
|
||||
} else if(!this.center_code) {
|
||||
this.msg = '请输入成本中心代码';
|
||||
} else if(!this.center_code_name) {
|
||||
this.msg = '请输入成本中心全称';
|
||||
} else if(!this.department_code) {
|
||||
this.msg = '请输入部门编码';
|
||||
} else if(!this.department_name) {
|
||||
this.msg = '请输入部门名称';
|
||||
} else if(!this.business_line) {
|
||||
this.msg = '请输入业务线';
|
||||
} else if(!this.area_code) {
|
||||
this.msg = '请输入区域代码';
|
||||
} else if(!this.grade_en) {
|
||||
this.msg = '请输入级别（英文）';
|
||||
} else if(!this.grade_cn) {
|
||||
this.msg = '请输入级别（中文）';
|
||||
} else if(!this.email) {
|
||||
this.msg = '请输入邮箱地址';
|
||||
} else if(!this.address) {
|
||||
this.msg = '请输入地点';
|
||||
}
|
||||
this.untieClick();
|
||||
} else {
|
||||
flag = true;
|
||||
}
|
||||
return flag;
|
||||
},
|
||||
untieClick(){
|
||||
setTimeout(()=>{
|
||||
this.msg = '';
|
||||
this.times = true;
|
||||
},2000)
|
||||
},
|
||||
backEv() {
|
||||
this.$router.push({
|
||||
path: '/personalCenter'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<div class="main">
|
||||
<div class="login-con-hed">
|
||||
<img class="img" src="../assets/login_02.gif" alt="">
|
||||
</div>
|
||||
<form class="pdlr30" id="login">
|
||||
<div class="int">
|
||||
<p>账号</p>
|
||||
<input type="text" v-model="accountNumber" placeholder="请输入账号">
|
||||
</div>
|
||||
<div class="int">
|
||||
<p>密码</p>
|
||||
<input type="password" v-model="passwordVal" placeholder="请输入密码">
|
||||
</div>
|
||||
<button @click="loginEv" class="btn" type="button">登录</button>
|
||||
</form>
|
||||
<p class="copyright">版权信息</p>
|
||||
<div v-if="msg!=''" class="tank">{{msg}}</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
data() {
|
||||
return {
|
||||
accountNumber: '',
|
||||
passwordVal: '',
|
||||
msg: '',
|
||||
times:0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loginEv() {
|
||||
if(this.times==0){
|
||||
this.times++;
|
||||
if (!this.accountNumber) {
|
||||
this.msg = '请输入账号';
|
||||
} else if(!this.passwordVal){
|
||||
this.msg = '请输入密码';
|
||||
} else {
|
||||
this.$router.push({path: '/session'})
|
||||
}
|
||||
setTimeout(()=>{
|
||||
this.times = 0;
|
||||
this.msg = '';
|
||||
},2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<div class="main">
|
||||
<div class="qrderQuery-con-hed">
|
||||
<img @click="backEv" class="img" src="../assets/back.png" alt="" />
|
||||
<p>个人中心</p>
|
||||
</div>
|
||||
<div id="personalCenter">
|
||||
<router-link to="/costInformation" class="list">
|
||||
<div>
|
||||
<img src="../assets/admin_icon_jbxx@3x.png" alt="" />
|
||||
<p>基本信息</p>
|
||||
</div>
|
||||
</router-link>
|
||||
<router-link to="/completeSet" class="list">
|
||||
<div>
|
||||
<img src="../assets/admin_icon_phsz@3x.png" alt="" />
|
||||
<p>偏好设置</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="tc">
|
||||
<button @click="exitEv">退出</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
backEv() {
|
||||
this.$router.push({path: '/session'})
|
||||
},
|
||||
exitEv(){
|
||||
this.$router.push({path: '/'})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<div class="main">
|
||||
<div class="qrderQuery-con-hed">
|
||||
<img @click="backEv" class="img" src="../assets/back.png" alt="">
|
||||
<p>查询订单</p>
|
||||
</div>
|
||||
<div id="qrderQuery">
|
||||
<p class="tit">待受理指订单正在等待被处理，处理中指订单需求正在核实购买中，已完结指订单已经购买成功。</p>
|
||||
<div class="con">
|
||||
<div class="qrderQuery-c">
|
||||
<p class="titcon">#1910 订12月18日晚上北京到成都的机票</p>
|
||||
<div class="zt">
|
||||
<p>类型：订机票</p>
|
||||
<p>状态：<span class="zta">待受理</span> </p>
|
||||
</div>
|
||||
<p class="date">提单时间：2021-12-18 14:30</p>
|
||||
</div>
|
||||
<div class="qrderQuery-c">
|
||||
<p class="titcon">#1910 订12月18日晚上北京到成都的机票</p>
|
||||
<div class="zt">
|
||||
<p>类型：订机票</p>
|
||||
<p>状态：<span class="ztb">处理中</span> </p>
|
||||
</div>
|
||||
<p class="date">提单时间：2021-12-18 14:30</p>
|
||||
</div>
|
||||
<div class="qrderQuery-c">
|
||||
<p class="titcon">#1910 订12月18日晚上北京到成都的机票</p>
|
||||
<div class="zt">
|
||||
<p>类型：订机票</p>
|
||||
<p>状态：<span>已完结</span> </p>
|
||||
</div>
|
||||
<p class="date">提单时间：2021-12-18 14:30</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
backEv() {
|
||||
this.$router.push({
|
||||
path: '/session'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
<template>
|
||||
<div :class=" voice?'pb main':'main'">
|
||||
<div class="session-con-hed">
|
||||
<a class="tit">勤勤助手</a>
|
||||
<div class="rit">
|
||||
<a class="kf"><img class="img" src="../assets/rgzn.png" alt=""></a>
|
||||
<div class="menu" @click="funEv">
|
||||
<p></p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
<div v-show="showFun" :class="fade" class="fun-box animated ">
|
||||
<span></span>
|
||||
<div @click="checkOrder">查询订单</div>
|
||||
<div @click="goPerson">个人中心</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="session">
|
||||
<div class="customerService">
|
||||
<div class="left">
|
||||
<img class="img" src="../assets/img_head_1@3x.png" alt="">
|
||||
</div>
|
||||
<div class="rit">
|
||||
<p class="date"><span>今天</span><span>17:45:52</span></p>
|
||||
<div class="text">
|
||||
<div>老板您好，我是您的智能助理勤勤，可以帮您订机票，订酒店，有事请吩咐！
|
||||
最新政策，温馨提示:
|
||||
<p>1.xxxxxxx</p>
|
||||
<p>2.xxxxxxx</p>
|
||||
<p> 3.xxxxxxx</p>
|
||||
<p> 祝您旅途愉快！</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user">
|
||||
<div class="left">
|
||||
<p class="date"><span>今天</span><span>17:45:52</span></p>
|
||||
<div class="text">
|
||||
<p>
|
||||
在吗
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rit">
|
||||
<img class="img" src="../assets/img_head_1@3x.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="user">
|
||||
<div class="left">
|
||||
<p class="date"><span>今天</span><span>17:45:52</span></p>
|
||||
<div class="text">
|
||||
<img src="../assets/icon_play_w@3x.png" alt="">
|
||||
<p>
|
||||
|
||||
我要定11月11日，从成都到北京上午的机票。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rit">
|
||||
<img class="img" src="../assets/img_head_1@3x.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="customerService">
|
||||
<div class="left">
|
||||
<img class="img" src="../assets/img_head_1@3x.png" alt="">
|
||||
</div>
|
||||
<div class="rit">
|
||||
<p class="date"><span>今天</span><span>17:45:52</span></p>
|
||||
<div class="text">
|
||||
<div class="gd">
|
||||
<div></div>
|
||||
<button type="button">生产工单</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user">
|
||||
<div class="left">
|
||||
<p class="date"><span>今天</span><span>17:45:52</span></p>
|
||||
<div class="text">
|
||||
<p>
|
||||
转人工
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rit">
|
||||
<img class="img" src="../assets/img_head_1@3x.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="artificial">
|
||||
<p>人工助理001为您服务！</p>
|
||||
</div>
|
||||
<div class="customerService">
|
||||
<div class="left">
|
||||
<img class="img" src="../assets/img_head_1@3x.png" alt="">
|
||||
</div>
|
||||
<div class="rit">
|
||||
<p class="date"><span>今天</span><span>17:45:52</span></p>
|
||||
<div class="text">
|
||||
<p>老板您好，我这边看一下上面的聊天需求内容，请稍等！ </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="session-footer">
|
||||
<img src="../assets/icon_yuyin@3x.png" class="voice" @click="voiceY()" alt="">
|
||||
<div>
|
||||
<input class="input" v-if="!voice" type="text">
|
||||
<img class="inputImg" @mouseover="mouseOver()" @mouseleave="mouseLeave()" v-if="!voice"
|
||||
src="../assets/icon_biaoqing@3x.png" alt="">
|
||||
<button class="button" v-if="voice">按住说话</button>
|
||||
</div>
|
||||
<img src="../assets/icon_gongju@3x.png" alt="">
|
||||
<div class="moban" v-if="voice">
|
||||
<img src="../assets/tittle_btn_close@2x.png" @click="voiceY()" alt="">
|
||||
<p class="tis">请用普通话描述您需求，如：我要定11月11日，从成都到北京上午的机票。</p>
|
||||
<p class="text">请用普通话描述您需求，如：我要定11月11日，从成都到北京上午的机票。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
voice: false,
|
||||
fade:'',
|
||||
showFun:false,
|
||||
times:0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
voiceY() {
|
||||
this.voice = !this.voice
|
||||
},
|
||||
funEv(){//右上角功能菜单
|
||||
this.times++;
|
||||
this.times%2!=0 ? this.fade = 'fadeIn' : this.fade = 'fadeOut'
|
||||
if(!this.showFun) {
|
||||
this.showFun = true;
|
||||
} else {
|
||||
setTimeout(()=>{
|
||||
this.showFun = !this.showFun;
|
||||
},1000)
|
||||
}
|
||||
},
|
||||
checkOrder(){//查询订单
|
||||
this.$router.push({path:'/qrderQuery',query:''})
|
||||
},
|
||||
goPerson(){//前往个人中心
|
||||
this.$router.push({path:'/personalCenter',query:''})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pb {
|
||||
padding-bottom: 15rem;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue