升级到 Vue3 & 重构 login 页面
This commit is contained in:
skywt2003
parent
b62e2500be
commit
0e2f35a021
File diff suppressed because it is too large
Load Diff
17
package.json
17
package.json
|
|
@ -7,25 +7,24 @@
|
|||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nutui/nutui": "^3.1.20",
|
||||
"axios": "0.19.0",
|
||||
"core-js": "^2.6.5",
|
||||
"core-js": "^3.22.7",
|
||||
"exif-js": "^2.3.0",
|
||||
"image-conversion": "^1.1.9",
|
||||
"mockjs": "^1.1.0",
|
||||
"normalize.css": "7.0.0",
|
||||
"qrcodejs2": "^0.0.2",
|
||||
"vant": "^2.1.1",
|
||||
"vue": "^2.6.10",
|
||||
"vue-router": "^3.0.3",
|
||||
"vant": "^3.4.9",
|
||||
"vue": "^3.2.36",
|
||||
"vue-router": "^4.0.15",
|
||||
"weixin-js-sdk": "^1.4.0-test"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.11.0",
|
||||
"@vue/cli-service": "^3.11.0",
|
||||
"babel-plugin-import": "^1.11.0",
|
||||
"@vue/cli-plugin-babel": "^5.0.4",
|
||||
"@vue/cli-service": "^5.0.4",
|
||||
"babel-plugin-import": "^1.13.5",
|
||||
"stylus": "^0.54.5",
|
||||
"stylus-loader": "^3.0.2",
|
||||
"vue-template-compiler": "^2.6.10"
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
39
src/main.js
39
src/main.js
|
|
@ -1,37 +1,20 @@
|
|||
import Vue from 'vue'
|
||||
import { createApp } from 'vue'
|
||||
import { createWebHistory } from 'vue-router'
|
||||
import createRouter from './router'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import 'normalize.css/normalize.css' // 重置、初始化css样式的库
|
||||
import '@/permission' // 挂载路由后添加路由拦截器（守卫 ）
|
||||
|
||||
// import NutUI from "@nutui/nutui";
|
||||
// import "@nutui/nutui/dist/style.css";
|
||||
// Vue.use(NutUI)
|
||||
|
||||
import Loading from 'globalComponents/Loading'
|
||||
import Toast from 'globalComponents/Toast'
|
||||
Vue.use(Toast) //启用全局提示组件
|
||||
Vue.use(Loading) //使用全局loading组件
|
||||
|
||||
/**
|
||||
* 如果需要bus总线模式
|
||||
* this.$bus.$data.xxx = xxx
|
||||
* this.$bus.emit('change',data)
|
||||
* this.$bus.$on('change',data => console.log(data))
|
||||
* this.$bus.$off('change')
|
||||
*/
|
||||
// import bus from './bus'
|
||||
// Vue.use(bus) //使用BUS总线模式，实现组件间任意传值
|
||||
|
||||
Vue.config.productionTip = false //生产模式下关闭vue在控制台的提示
|
||||
// import Loading from 'globalComponents/Loading'
|
||||
// import Toast from 'globalComponents/Toast'
|
||||
// Vue.use(Toast) //启用全局提示组件
|
||||
// Vue.use(Loading) //使用全局loading组件
|
||||
|
||||
if (process.env.NODE_ENV == 'development'){
|
||||
require('./mock/index.js');
|
||||
}
|
||||
|
||||
const vm = new Vue({
|
||||
router,
|
||||
render: h => h(App),
|
||||
}).$mount('#app')
|
||||
|
||||
export default vm
|
||||
export const vm = createApp(App)
|
||||
const router = createRouter(createWebHistory())
|
||||
vm.use(router)
|
||||
vm.mount('#app')
|
||||
|
|
@ -3,9 +3,9 @@ import getPageTitle from 'utils/getPageTitle'
|
|||
import { Checkrunner } from 'api/home'
|
||||
|
||||
|
||||
import Vue from 'vue';
|
||||
import { vm } from '@/main.js'
|
||||
import { Toast } from 'vant';
|
||||
Vue.use(Toast);
|
||||
// Vue.use(Toast);
|
||||
|
||||
|
||||
|
||||
|
|
@ -42,6 +42,6 @@ Vue.use(Toast);
|
|||
|
||||
|
||||
//跳转完成后
|
||||
router.afterEach(() => {
|
||||
//to do something
|
||||
})
|
||||
// router.afterEach(() => {
|
||||
// //to do something
|
||||
// })
|
||||
|
|
|
|||
|
|
@ -1,45 +1,45 @@
|
|||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Home from './views/home'
|
||||
import { createRouter } from 'vue-router'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
redirect:'/login'
|
||||
},
|
||||
{
|
||||
path:'/login',
|
||||
name:'Login',
|
||||
component:() => import('./views/login'),
|
||||
meta:{ title:'登陆' }
|
||||
},
|
||||
{
|
||||
path:'/home',
|
||||
name:'Home',
|
||||
component:() => import('./views/home'),
|
||||
meta:{ title:'人脸注册' }
|
||||
},
|
||||
{
|
||||
path:'/photos',
|
||||
name:'Photos',
|
||||
component:() => import('./views/photos'),
|
||||
meta:{ title:'' }
|
||||
},
|
||||
// {
|
||||
// path:'/QRCode',
|
||||
// name:'QRCode',
|
||||
// component:() => import('./views/QRCode'),
|
||||
// meta:{ title:'身份二维码' }
|
||||
// },
|
||||
// {
|
||||
// path:'/admin',
|
||||
// name:'Admin',
|
||||
// component:() => import('./views/admin'),
|
||||
// meta:{ title:'物资发放' }
|
||||
// },
|
||||
]
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
redirect:'/login'
|
||||
},
|
||||
{
|
||||
path:'/login',
|
||||
name:'Login',
|
||||
component:() => import('./views/login'),
|
||||
meta:{ title:'登陆' }
|
||||
},
|
||||
{
|
||||
path:'/home',
|
||||
name:'Home',
|
||||
component:() => import('./views/home'),
|
||||
meta:{ title:'人脸注册' }
|
||||
},
|
||||
{
|
||||
path:'/photos',
|
||||
name:'Photos',
|
||||
component:() => import('./views/photos'),
|
||||
meta:{ title:'' }
|
||||
},
|
||||
// {
|
||||
// path:'/QRCode',
|
||||
// name:'QRCode',
|
||||
// component:() => import('./views/QRCode'),
|
||||
// meta:{ title:'身份二维码' }
|
||||
// },
|
||||
// {
|
||||
// path:'/admin',
|
||||
// name:'Admin',
|
||||
// component:() => import('./views/admin'),
|
||||
// meta:{ title:'物资发放' }
|
||||
// },
|
||||
]
|
||||
})
|
||||
export default function (history) {
|
||||
return createRouter({
|
||||
history,
|
||||
routes
|
||||
})
|
||||
}
|
||||
|
|
@ -25,18 +25,11 @@ hint()
|
|||
.home-wrap
|
||||
overflow hidden
|
||||
height: 100vh
|
||||
width: 100%
|
||||
.bottom-img
|
||||
position absolute
|
||||
bottom 0px
|
||||
width 100%
|
||||
left 0
|
||||
.hint
|
||||
width 100%
|
||||
box-sizing border-box
|
||||
position absolute
|
||||
text-indent 2em
|
||||
z-index 9999
|
||||
padding 10px
|
||||
background rgba(255,255,255,0.3)
|
||||
backdrop-filter: blur(30)
|
||||
|
|
@ -47,49 +40,36 @@ hint()
|
|||
.background-wrap
|
||||
position: fixed
|
||||
z-index: -1
|
||||
// .background-image
|
||||
.top-brand-wrap
|
||||
color: white
|
||||
text-align: center
|
||||
margin-top: 15vh
|
||||
.info-card
|
||||
position relative
|
||||
// z-index 999
|
||||
width 90%
|
||||
box-shadow: 0 4px 10px #00000012
|
||||
-webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,.07)
|
||||
// background rgba(255, 255, 255, 0.7)
|
||||
// backdrop-filter: blur(20px)
|
||||
// -webkit-backdrop-filter: blur(20px)
|
||||
background white
|
||||
margin 0 auto
|
||||
margin-top 10vh
|
||||
z-index 500
|
||||
padding-bottom 30px
|
||||
padding-top 30px
|
||||
.form
|
||||
margin 10vh auto auto auto
|
||||
.van-form
|
||||
width 100%
|
||||
padding 30px
|
||||
box-sizing border-box
|
||||
position relative
|
||||
// z-index 999
|
||||
.van-cell
|
||||
height: 48px
|
||||
background: transparent
|
||||
>>>input
|
||||
height 48px
|
||||
// >>>field__body
|
||||
.button
|
||||
background linear-gradient(135deg,#fa2c19 0%,#fa6419 100%)
|
||||
.van-cell-group
|
||||
margin: 30px auto
|
||||
.van-cell
|
||||
background: transparent
|
||||
.van-button
|
||||
background linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)
|
||||
box-shadow: 0 4px 10px rgba(250, 74, 25, 0.5)
|
||||
color white
|
||||
padding 10px
|
||||
width 85%
|
||||
text-align center
|
||||
border-radius 25px
|
||||
border: 1px solid transparent
|
||||
margin-bottom: 20px
|
||||
.register
|
||||
background linear-gradient(135deg,rgb(255,158,13) 0%,rgb(255,167,13) 45%,rgb(255,182,13) 83%,rgb(255,190,13) 100%)
|
||||
background: linear-gradient(135deg, rgb(255,158,13) 0%, rgb(255,167,13) 45%, rgb(255,182,13) 83%, rgb(255,190,13) 100%)
|
||||
box-shadow: 0 4px 10px rgba(255, 167, 13, 0.5)
|
||||
.flex-container
|
||||
display flex
|
||||
flex-direction column
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import axios from 'axios'
|
||||
import router from '@/router'
|
||||
import vm from '@/main.js'
|
||||
import { vm } from '@/main.js'
|
||||
import { globalSuccessToast } from '@/settings'
|
||||
|
||||
const service = axios.create({
|
||||
|
|
|
|||
|
|
@ -3,36 +3,26 @@
|
|||
<div class="background-wrap">
|
||||
<img class="background-image" src="@/assets/image/track.jpg" />
|
||||
</div>
|
||||
<!-- <div class="top-bgimg-wrap">
|
||||
<img class="top-img" src="@/assets/image/bgimg-top.png"/>
|
||||
<div class="logo-wrap">
|
||||
<img class="yidong-img" src="@/assets/image/yidong.png"/>
|
||||
<img class="fiveG-img" src="@/assets/image/5g.png"/>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="top-brand-wrap">
|
||||
<h1 class="title">5G 赛道</h1>
|
||||
</div>
|
||||
<div class="info-card flex-container">
|
||||
<van-form class="form">
|
||||
<van-form>
|
||||
<van-cell-group inset>
|
||||
<van-field required v-model="formData.Name" name="姓名" label="姓名" clearable placeholder="请输入姓名" />
|
||||
<van-field required type='number' v-model="formData.Phone" name="姓名" label="姓名" clearable placeholder="请输入手机号" />
|
||||
<van-field required type='number' v-model="formData.Phone" name="手机号" label="手机号" clearable placeholder="请输入手机号" />
|
||||
</van-cell-group>
|
||||
<van-row gutter="20">
|
||||
<van-col span="12"> <van-button type="primary" block round @click="onLogin">登录</van-button> </van-col>
|
||||
<van-col span="12"> <van-button type="primary" class="register" block round @click="onRegister">注册</van-button> </van-col>
|
||||
</van-row>
|
||||
</van-form>
|
||||
<div class="button register" @click="onRegister">注册</div>
|
||||
<div class="button" @click="onLogin">登陆</div>
|
||||
</div>
|
||||
<!-- <div class="hint">
|
||||
已使用“5G赛道”小程序完成人脸注册的用户，请直接输入注册时的姓名和手机号码，登陆并领取照片。
|
||||
</div> -->
|
||||
<!-- <img class="bottom-img" src="@/assets/image/bgimg-bottom.png" alt=""> -->
|
||||
<!-- <van-image-preview v-model="showPreview" :images="images"> </van-image-preview> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Field, Toast, CellGroup, Dialog } from 'vant';
|
||||
import { Form, Field, Toast, CellGroup, Dialog, Button, Col, Row } from 'vant'
|
||||
import { Login } from 'api/home'
|
||||
|
||||
import imgs1 from '@/assets/image/imgs-01.jpg'
|
||||
|
|
@ -41,8 +31,14 @@ import imgs2 from '@/assets/image/imgs-02.jpg'
|
|||
export default {
|
||||
name:'Home',
|
||||
components:{
|
||||
[Form.name]:Form,
|
||||
[Field.name]:Field,
|
||||
[Toast.name]:Toast,
|
||||
[CellGroup.name]:CellGroup,
|
||||
[Dialog.name]:Dialog,
|
||||
[Button.name]:Button,
|
||||
[Col.name]:Col,
|
||||
[Row.name]:Row
|
||||
},
|
||||
activated(){
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue