master
parent
d1f4e17d27
commit
871a142b55
File diff suppressed because it is too large
Load Diff
|
@ -8,8 +8,11 @@
|
|||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"adal-angular": "^1.0.18",
|
||||
"ant-design-vue": "^2.2.8",
|
||||
"core-js": "^3.6.5",
|
||||
"element": "^0.1.4",
|
||||
"element-plus": "^1.2.0-beta.3",
|
||||
"vue": "^3.0.0",
|
||||
"vue-router": "^4.0.12"
|
||||
},
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 4.2 KiB |
11
src/App.vue
11
src/App.vue
|
@ -72,7 +72,9 @@
|
|||
letter-spacing: 0;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
#login .int {
|
||||
position: relative;
|
||||
}
|
||||
#login .int input {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #D2D5CE;
|
||||
|
@ -81,6 +83,7 @@
|
|||
width: 100%;
|
||||
height: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-right: 70px;
|
||||
}
|
||||
|
||||
#login .btn {
|
||||
|
@ -199,18 +202,18 @@
|
|||
letter-spacing: 0;
|
||||
width: 15.9375rem;
|
||||
box-sizing: border-box;
|
||||
padding: .625rem;
|
||||
padding: 1.625rem 0.9375rem 0.9375rem 0.9375rem;
|
||||
background-color: #fff;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.customerService .rit .text .gd>:nth-child(1) {
|
||||
width: 100%;
|
||||
height: 6.875rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.customerService .rit .text .gd>:nth-child(2) {
|
||||
width: 14.6875rem;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
background: #00A3E0;
|
||||
border-radius: .125rem;
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 355 B After Width: | Height: | Size: 362 B |
Binary file not shown.
After Width: | Height: | Size: 1.5 KiB |
|
@ -1,13 +1,23 @@
|
|||
a {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
color: #292D2D;
|
||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-focus: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
/* 去掉router-link标签的下划线 */
|
||||
.router-link-active {
|
||||
text-decoration: none;
|
||||
}
|
||||
.posr{
|
||||
position: relative;
|
||||
}
|
||||
input,textarea{
|
||||
outline: none;
|
||||
}
|
||||
ul{list-style: none;}
|
||||
.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||
.fun-box{
|
||||
position:absolute;
|
||||
top:2.375rem;
|
||||
|
@ -50,4 +60,124 @@ input,textarea{
|
|||
background: rgba(0,0,0,.5);
|
||||
color: #fff;
|
||||
border-radius: 0.1875rem;
|
||||
}
|
||||
.switch-box{
|
||||
box-sizing: border-box;
|
||||
width: 44px;height: 22px;border-radius: 40px;background-color: #00A3E0;position: absolute;right: 10px;top: 9px;
|
||||
line-height: 22px;
|
||||
padding: 0 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.backF2{
|
||||
background-color: #dcdfe6;
|
||||
justify-content:flex-end;
|
||||
}
|
||||
.switch-box span{
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.switch-box div{
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 100%;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.right-scroll{
|
||||
left: 2px!important;
|
||||
}
|
||||
.clear-input{
|
||||
position: absolute;right: 10px;top: 12px;
|
||||
}
|
||||
.gd .info-box>div:nth-child(1){
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 11px;
|
||||
font-size: 18px;
|
||||
color: #100B0C;
|
||||
font-weight: bold;
|
||||
}
|
||||
.gd .info-box>div:nth-child(1) div{
|
||||
width: 42%;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
.gd .info-box>div:nth-child(1) div:last-child{
|
||||
text-align: right;
|
||||
}
|
||||
.gd .info-box>div:nth-child(1) img{
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.gd .info-box>div:nth-child(2){
|
||||
border-top: 1px solid #e8eae6;
|
||||
border-bottom: 1px solid #e8eae6;
|
||||
padding: 11px 0;
|
||||
}
|
||||
.gd .info-box>div:nth-child(2) p {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.gd .info-box>div:nth-child(2) div{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
.gd .info-box>div:nth-child(2) div span{
|
||||
margin-top: 4px;
|
||||
}
|
||||
.gd .info-box>div:nth-child(2) ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #f0f2f5;
|
||||
max-width: 8.75rem;
|
||||
margin: 0 auto;
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
}
|
||||
.gd .info-box>div:nth-child(2) ul li {
|
||||
width: 32%;
|
||||
}
|
||||
.gd .info-box>div:nth-child(2) ul li a{
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.activeTime {
|
||||
color: #00A3E0;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.gd .info-box>div:nth-child(3){
|
||||
background-color: #f0f2f5;
|
||||
max-width: 124px;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
padding: 2px;
|
||||
}
|
||||
.gd .info-box>div:nth-child(3) span{
|
||||
flex-shrink: 0;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
.activeCang{
|
||||
color: #00A3E0;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.gd .info-box>div:nth-child(4){
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
.gd .info-box>div:nth-child(4) input{
|
||||
margin-right: 4px;
|
||||
}
|
Binary file not shown.
After Width: | Height: | Size: 3.1 KiB |
|
@ -0,0 +1,325 @@
|
|||
<template>
|
||||
<div v-show="isShow" class="date-box">
|
||||
<div class="date-con">
|
||||
<div class="date-nav">
|
||||
<img src="../assets/tittle_btn_close@2x.png" width="20" height="20">
|
||||
<div class="date-title">选择出发日期</div>
|
||||
<div class="date-clear">清除</div>
|
||||
</div>
|
||||
<div class="day-box">
|
||||
<div v-for="(item,index) in dayArr" :class="item.finish?'':'active-day'" :key="index">{{item.title}}</div>
|
||||
</div>
|
||||
<div class="all-day">
|
||||
<!-- 当月 -->
|
||||
<div class="present-title">{{presentMonth}}</div>
|
||||
<div class="present-box">
|
||||
<template v-for="(item,index) in presentArr" :key="index">
|
||||
<div @click="choosePresent(index)" :class="{'past-day':item.finish,'active-num':item.isChoose}">{{item.title}}</div>
|
||||
</template>
|
||||
</div>
|
||||
<!-- 下月 -->
|
||||
<div class="present-title">{{nextMonth}}</div>
|
||||
<div class="present-box">
|
||||
<template v-for="(item,index) in nextArr" :key="index">
|
||||
<div @click="chooseNext(index)" :class="{'past-day':item.finish,'active-num':item.isChoose}">{{item.title}}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 星期
|
||||
dayArr: [{
|
||||
title: '一',
|
||||
finish: true
|
||||
},
|
||||
{
|
||||
title: '二',
|
||||
finish: true
|
||||
},
|
||||
{
|
||||
title: '三',
|
||||
finish: true
|
||||
},
|
||||
{
|
||||
title: '四',
|
||||
finish: true
|
||||
},
|
||||
{
|
||||
title: '五',
|
||||
finish: true
|
||||
},
|
||||
{
|
||||
title: '六',
|
||||
finish: false
|
||||
},
|
||||
{
|
||||
title: '日',
|
||||
finish: false
|
||||
}
|
||||
],
|
||||
// 当月
|
||||
presentMonth:'2021年01月',
|
||||
presentTian:0,
|
||||
presentArr: [],
|
||||
// 选中的时间
|
||||
presentZanTime: [],
|
||||
// 缓冲区
|
||||
bufferArr: [],
|
||||
// 下月
|
||||
nextMonth:'2021年02月',
|
||||
nextArr:[],
|
||||
nextZanTime:[],
|
||||
bufferArrNext:[]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.presentEv();
|
||||
},
|
||||
methods: {
|
||||
presentEv() { //获取当前月份的日期
|
||||
this.obtainDate(0);
|
||||
},
|
||||
obtainDate(index) { //获取日期
|
||||
// 获取当月的天数
|
||||
let date = new Date();
|
||||
//获取当前日(1-31)
|
||||
let presentDay = date.getDate();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
let d = new Date(year, month, 0);
|
||||
this.presentMonth = `${year}年${month < 10 ? month = '0'+ month : month}月`;
|
||||
this.nextMonth = `${year}年${month < 10 ? month = '0'+ month+1 : month+1}月`;
|
||||
let week = new Date(`${year}/${month}/1`).getDay();//当月1号,星期几
|
||||
for (let i = 1; i < week; i++) {
|
||||
this.presentArr.push({title: '',finish: false,isChoose: false})
|
||||
}
|
||||
console.log(d.getDate()); //当前有多少天
|
||||
// 获取当月的所有日期
|
||||
let current_month_num = d.getDate();
|
||||
this.presentTian = current_month_num;
|
||||
for (let i = 1; i <= current_month_num; i++) {
|
||||
// let day = date.setDate(i);//转时间戳
|
||||
let fini1 = false;
|
||||
for (let j = 1; j <= presentDay; j++) {
|
||||
if (i == j) {
|
||||
fini1 = true;
|
||||
}
|
||||
}
|
||||
let num1 = i < 10 ? num1 = '0' + i : num1 = i;
|
||||
let presentObj = {
|
||||
title: num1,
|
||||
finish: fini1,
|
||||
isChoose: false
|
||||
}
|
||||
this.presentArr.push(presentObj);
|
||||
}
|
||||
// 获取下月所有日期
|
||||
if(month+1>12){
|
||||
year++;
|
||||
month = 1;
|
||||
} else {
|
||||
month++;
|
||||
}
|
||||
let week2 = new Date(`${year}/${month}/1`).getDay();//当月1号,星期几
|
||||
for (let i = 1; i < week2; i++) {
|
||||
this.nextArr.push({title: '',finish: false,isChoose: false})
|
||||
}
|
||||
let n = new Date(year, month, 0);
|
||||
let next_month_num = n.getDate();
|
||||
for (let i = 1; i <= next_month_num; i++) {
|
||||
let num1 = i < 10 ? num1 = '0' + i : num1 = i;
|
||||
let presentObj = {
|
||||
title: num1,
|
||||
finish: false,
|
||||
isChoose: false
|
||||
}
|
||||
this.nextArr.push(presentObj);
|
||||
}
|
||||
},
|
||||
choosePresent(index) {
|
||||
this.publicEv(this.presentArr,this.bufferArr,this.presentZanTime,index,1);
|
||||
},
|
||||
chooseNext(index){
|
||||
this.publicEv(this.nextArr,this.bufferArrNext,this.nextZanTime,index,2);
|
||||
},
|
||||
publicEv(arr=[],zanarr=[],choosearr=[],index,who){
|
||||
if (!arr[index].finish) { //今日至未来可点
|
||||
let cunIndex1 = zanarr.indexOf(arr[index].title); //查找缓冲区有无当前选中的日期
|
||||
if (cunIndex1 == -1) { //没有
|
||||
arr[index].isChoose = true; //设置选中日期颜色
|
||||
zanarr.push({
|
||||
title: arr[index].title,
|
||||
id: (index + 1)
|
||||
}); //添加至缓冲区
|
||||
if(zanarr[zanarr.length-1].title < zanarr[0].title){
|
||||
zanarr.unshift(zanarr[zanarr.length-1]);
|
||||
console.log(zanarr);
|
||||
zanarr = zanarr.splice(zanarr.length-2,zanarr.length-1);
|
||||
}
|
||||
zanarr.splice(1,zanarr.length-2);//去除首尾之外的数据
|
||||
zanarr = zanarr.sort(function(a, b) {//升序
|
||||
return (a.title - b.title)
|
||||
});
|
||||
zanarr.forEach((item1, index1) => { //循环缓冲区的日期
|
||||
arr.forEach((item2, index2) => { //循环当月日期
|
||||
if (item1.title * 1 == item2.title * 1) { //如果缓冲区日期等于当月日期
|
||||
for (let i = zanarr[0].id - 1; i < item1.id; i++) { //以缓冲区第一个-1为起始索引,以缓冲区最后一个为长度循环
|
||||
arr[i].isChoose = true;
|
||||
}
|
||||
} else {
|
||||
arr[index2].isChoose = false;
|
||||
}
|
||||
})
|
||||
})
|
||||
choosearr = [];
|
||||
arr.forEach(item3 => {
|
||||
if (item3.isChoose) {
|
||||
choosearr.push(item3);
|
||||
}
|
||||
})
|
||||
} else { // 有
|
||||
zanarr.splice(cunIndex1, 1);
|
||||
}
|
||||
if(this.bufferArr.length!=0 && this.bufferArrNext.length!=0 && who==2){
|
||||
for (let i = this.bufferArr[0].id - 1; i < this.presentArr.length; i++) { //以缓冲区第一个-1为起始索引,以缓冲区最后一个为长度循环
|
||||
this.presentArr[i].isChoose = true;
|
||||
}
|
||||
this.presentArr.forEach(item => {
|
||||
if (item.isChoose) {
|
||||
this.presentZanTime.push(item);
|
||||
}
|
||||
})
|
||||
let emptyDay = this.nextArr.filter(item=>item.title=='').length;
|
||||
for (let i = emptyDay; i < this.bufferArrNext[0].id-1; i++) { //以缓冲区第一个-1为起始索引,以缓冲区最后一个为长度循环
|
||||
this.nextArr[i].isChoose = true;
|
||||
}
|
||||
this.nextArr.forEach(item => {
|
||||
if (item.isChoose) {
|
||||
this.nextZanTime.push(item);
|
||||
}
|
||||
})
|
||||
}
|
||||
if(this.bufferArr.length!=0 && this.bufferArrNext.length!=0 && who==1){
|
||||
for (let i = this.bufferArr[0].id - 1; i < this.presentArr[index].id; i++) { //以缓冲区第一个-1为起始索引,以缓冲区最后一个为长度循环
|
||||
this.presentArr[i].isChoose = true;
|
||||
}
|
||||
this.presentArr.forEach(item => {
|
||||
if (item.isChoose) {
|
||||
this.presentZanTime.push(item);
|
||||
}
|
||||
})
|
||||
for (let i = 0; i < this.nextArr.length; i++) { //以缓冲区第一个-1为起始索引,以缓冲区最后一个为长度循环
|
||||
this.nextArr[i].isChoose = false;
|
||||
}
|
||||
this.nextZanTime = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.date-box {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, .7);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.date-con {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 14px 14px 0 0;
|
||||
padding: 20px 0px;
|
||||
max-height: 85%;
|
||||
}
|
||||
|
||||
/* 标头 */
|
||||
.date-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.date-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.date-clear {
|
||||
color: #00A3E0;
|
||||
}
|
||||
|
||||
/* 星期 */
|
||||
.day-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 6px;
|
||||
color: #100B0C;
|
||||
font-size: 12px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.active-day {
|
||||
color: #FF6555;
|
||||
}
|
||||
.all-day {
|
||||
height: 440px;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
/* 当月 */
|
||||
.present-title {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
padding: 8px 0;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.present-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.present-box div {
|
||||
width: 14.26%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.present-box div div{
|
||||
width: 100%;
|
||||
}
|
||||
.past-day {
|
||||
color: #999F9F !important;
|
||||
background-color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.active-num {
|
||||
background-color: #00A3E0;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
</style>
|
19
src/main.js
19
src/main.js
|
@ -1,11 +1,16 @@
|
|||
import { createApp } from 'vue'
|
||||
import router from '@/router'//引入router
|
||||
import App from './App.vue'
|
||||
import { createApp } from 'vue';
|
||||
import router from '@/router';//引入router
|
||||
import ElementPlus from 'element-plus';//引入element-plus
|
||||
// import 'element-plus/lib/theme-chalk/index.css';
|
||||
|
||||
import App from './App.vue';
|
||||
|
||||
// 引入公共样式
|
||||
import '@/assets/css/style.css'
|
||||
import '@/assets/css/animate.min.css'
|
||||
import '@/assets/css/style.css';
|
||||
// 应用动画样式
|
||||
import '@/assets/css/animate.min.css';
|
||||
|
||||
const app = createApp(App)
|
||||
const app = createApp(App);
|
||||
app.use(router);//挂载使用router
|
||||
app.mount('#app')
|
||||
app.use(ElementPlus);//挂载使用ElementPlus
|
||||
app.mount('#app');
|
||||
|
|
|
@ -1,71 +1,99 @@
|
|||
<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;
|
||||
}
|
||||
<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>ADD号码</p>
|
||||
<div class="posr">
|
||||
<input type="number" @input="inputEv" v-model="accountNumber" placeholder="请输入账号">
|
||||
<img v-show="clearShow" @click="clearEv" class="clear-input" src="../assets/clear-input.png" width="16" alt="清空文本信息" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="int">
|
||||
<p>密码</p>
|
||||
<div class="posr">
|
||||
<input :type="switchShow?'password':'text'" v-model="passwordVal" placeholder="请输入密码">
|
||||
<div class="switch-box" :class="switchShow?'':'backF2'">
|
||||
<span>{{switchShow?'显':'隐'}}</span>
|
||||
<div @click="switchEv" :class="switchShow?'':'right-scroll'"></div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
import AuthenticationContext from 'adal-angular';
|
||||
// const authContext = new AuthenticationContext();
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
data() {
|
||||
return {
|
||||
accountNumber: '',
|
||||
passwordVal: '',
|
||||
msg: '',
|
||||
times: 0,
|
||||
switchShow:true,
|
||||
clearShow:false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loginEv() {
|
||||
// this.$authContext.login();
|
||||
// authContext.logOut()
|
||||
if (this.times == 0) {
|
||||
this.times++;
|
||||
if (!this.accountNumber) {
|
||||
this.msg = '请输入ADD号码';
|
||||
} else if (!this.passwordVal) {
|
||||
this.msg = '请输入密码';
|
||||
} else {
|
||||
// window.location.href = "https://u-dzai.51ima.com/vChat?token=77vANnUVBjMj&showChat=true&layout=true"
|
||||
this.$router.push({
|
||||
path: '/session'
|
||||
})
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.times = 0;
|
||||
this.msg = '';
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
switchEv(){//密码显隐切换事件
|
||||
this.switchShow = !this.switchShow;
|
||||
},
|
||||
inputEv(){//输入框监听事件
|
||||
if(this.accountNumber!=''){this.clearShow = true;}
|
||||
},
|
||||
clearEv(){//清空输入框事件
|
||||
this.clearShow = false;
|
||||
this.accountNumber = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
|
|
@ -38,9 +38,7 @@
|
|||
<div class="left">
|
||||
<p class="date"><span>今天</span><span>17:45:52</span></p>
|
||||
<div class="text">
|
||||
<p>
|
||||
在吗
|
||||
</p>
|
||||
<p>在吗</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rit">
|
||||
|
@ -52,10 +50,7 @@
|
|||
<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>
|
||||
<p>我要定11月11日,从成都到北京上午的机票。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rit">
|
||||
|
@ -70,7 +65,32 @@
|
|||
<p class="date"><span>今天</span><span>17:45:52</span></p>
|
||||
<div class="text">
|
||||
<div class="gd">
|
||||
<div></div>
|
||||
<div class="info-box">
|
||||
<div>
|
||||
<div class="clips1">重庆</div>
|
||||
<img src="../assets/icon_plane@3x.png" width="20" height="20">
|
||||
<div class="clips1">上海浦东</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<p>10月21日</p>
|
||||
<span>周四</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li @click="chooseTime(index)" v-for="(item,index) in timeDuan" :key="index"><a
|
||||
:class="activeTime==index?'activeTime':''"
|
||||
href="javascript:;">{{item}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<span @click="chooseChang(index)" :class="activeChang==index?'activeCang':''"
|
||||
v-for="(item,index) in changArr" :key="index">{{item}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<input @click="changeEv" type="radio" :checked="isChecked" id="radio" /><label
|
||||
for="radio">机票+酒店</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button">生产工单</button>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -80,9 +100,7 @@
|
|||
<div class="left">
|
||||
<p class="date"><span>今天</span><span>17:45:52</span></p>
|
||||
<div class="text">
|
||||
<p>
|
||||
转人工
|
||||
</p>
|
||||
<p>转人工</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rit">
|
||||
|
@ -119,39 +137,65 @@
|
|||
<p class="text">请用普通话描述您需求,如:我要定11月11日,从成都到北京上午的机票。</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 时间选择 -->
|
||||
<dateTime></dateTime>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dateTime from '@/components/dateTime.vue';
|
||||
export default {
|
||||
components: {
|
||||
dateTime
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
voice: false,
|
||||
fade:'',
|
||||
showFun:false,
|
||||
times:0,
|
||||
fade: '',
|
||||
showFun: false,
|
||||
times: 0,
|
||||
activeTime: 0,
|
||||
timeDuan: ['上午', '下午', '夜间'],
|
||||
activeChang: 0,
|
||||
changArr: ['头等/商务舱', '经济舱'],
|
||||
isChecked: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
voiceY() {
|
||||
this.voice = !this.voice
|
||||
},
|
||||
funEv(){//右上角功能菜单
|
||||
funEv() { //右上角功能菜单
|
||||
this.times++;
|
||||
this.times%2!=0 ? this.fade = 'fadeIn' : this.fade = 'fadeOut'
|
||||
if(!this.showFun) {
|
||||
this.times % 2 != 0 ? this.fade = 'fadeIn' : this.fade = 'fadeOut'
|
||||
if (!this.showFun) {
|
||||
this.showFun = true;
|
||||
} else {
|
||||
setTimeout(()=>{
|
||||
setTimeout(() => {
|
||||
this.showFun = !this.showFun;
|
||||
},1000)
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
checkOrder(){//查询订单
|
||||
this.$router.push({path:'/qrderQuery',query:''})
|
||||
chooseTime(index) {
|
||||
this.activeTime = index;
|
||||
},
|
||||
goPerson(){//前往个人中心
|
||||
this.$router.push({path:'/personalCenter',query:''})
|
||||
chooseChang(index) {
|
||||
this.activeChang = index;
|
||||
},
|
||||
changeEv() {
|
||||
this.isChecked = !this.isChecked;
|
||||
},
|
||||
checkOrder() { //查询订单
|
||||
this.$router.push({
|
||||
path: '/qrderQuery',
|
||||
query: ''
|
||||
})
|
||||
},
|
||||
goPerson() { //前往个人中心
|
||||
this.$router.push({
|
||||
path: '/personalCenter',
|
||||
query: ''
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue