Skip to content

杨炀 / ztx_wx_admin

Go to a project
Toggle navigation
Toggle navigation pinning
198a047a by 杨炀
Options

add:登录

1 parent a7520530
Inline Side-by-side
Showing 21 changed files with 152 additions and 39 deletions
pages.json
......@@ -241,19 +241,17 @@
"enablePullDownRefresh": false
}
}, {
"path": "pages/index/login",
"style": {
"navigationBarTitleText": "登录",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/index/login",
"style" :
{
"navigationBarTitleText": "登录",
"enablePullDownRefresh": false
}
}
],
],
"globalStyle": {
"navigationStyle": "default",
"navigationStyle": "custom",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "中跆协-工作台"
}
......
pages/index/index.vue
......@@ -112,7 +112,12 @@
onShow(() => {
if (app.globalData.isLogin) {
init();
} else {
} else {
let path = '/pages/index/login';
uni.navigateTo({
url: path
});
app.firstLoadCallback = () => {
init();
};
......@@ -224,30 +229,6 @@
phoneNumber: venue.value.venueTelno
});
}
function gogo() {
//拉起导航软件
proxy._mapContext.openMapApp({
latitude: parseFloat(latitude.value),
longitude: parseFloat(longitude.value),
destination: venue.value.venueAddress, //目标地址详情
success() {
console.log('success');
},
fail() {
console.log('fail');
uni.showToast({
title: '请安装导航软件',
icon: 'none',
duration: 2000
});
},
complete() {
console.log('complete');
}
});
}
function closeMaptypeList() {
this.showH5maptype = false;
}
......
pages/index/login.vue
<template>
<view>
登录
<view class="page-bg">
<image class="ren1" src="@/static/login/ren1.png"/>
<!-- 登录 -->
<view class="retop">
<image class="logotop" src="@/static/login/logo@2x.png"></image>
<view class="loginbox">
<view class="loginNav">
<view class="n1" :class="isActive==0?'active':''" @click="changeActive(0)">密码登录</view>
<view class="n2" :class="isActive==1?'active':''" @click="changeActive(1)">短信登录</view>
</view>
<!-- 密码登录 -->
<view class="formbox">
<form v-if="isActive==0">
<view class="round-input-item">
<image class="icon" src="@/static/login/tag01@2x.png"></image>
<input placeholder="账号"/>
</view>
<view class="round-input-item">
<image class="icon" src="@/static/login/tag02@2x.png"></image>
<input placeholder="密码"/>
</view>
<view class="round-input-item">
<image class="icon" src="@/static/login/tag03@2x.png"></image>
<input placeholder="图形验证码"/>
<image/>
</view>
</form>
<!-- 短信登录 -->
<form v-if="isActive==1">
<view class="round-input-item">
<image class="icon" src="@/static/login/tag01@2x.png"></image>
<input placeholder="请输入手机号"/>
</view>
<view class="round-input-item">
<image class="icon" src="@/static/login/tag02@2x.png"></image>
<input placeholder="图形验证码"/>
<image/>
</view>
<view class="round-input-item">
<image class="icon" src="@/static/login/tag04@2x.png"></image>
<input placeholder="短信验证码"/>
<text>获取验证码</text>
</view>
</form>
<view class="flex-item">
<view class="member" @click="changeAgree(isRember)">
<image v-if="isRember" src="@/static/login/xz_dwn@2x.png"/>
<image v-else src="@/static/login/xz@2x.png"/>
记住密码
</view>
<view class="text-red">忘记密码</view>
</view>
<view class="center-item">
<button class="btn-red">登录</button>
</view>
<view class="center-item">
<text class="text-red">没有账号，去注册</text>
</view>
</view>
</view>
</view>
<image class="ren2" src="@/static/login/ren2.png"/>
<view class="fixedagree">
<image @click="changeAgree(agree)" v-if="agree" src="@/static/login/xz_dwn@2x.png"></image>
<image v-else src="@/static/login/xz2@2x.png"></image>
<view>登录即代表您同意<text>《用户协议》</text><text>《隐私策略》</text></view>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
const isActive = ref(0)
const agree = ref(false)
const isRember = ref(true)
function changeActive(n){
isActive.value = n
}
function changeAgree(item){
item = !item
}
</script>
<style>
<style scoped lang="scss">
.logotop{width: 510rpx;height: 215rpx;margin:5vh auto 40rpx;display: block;}
.ren1{width: 300rpx;height: 560rpx;position: absolute;right: 0;top: 0;}
.ren2{width: 456rpx;height:600rpx;position: relative;top: 20rpx;}
.retop{position: relative;z-index: 1;}
.page-bg{background: url('@/static/login/bg.png') no-repeat center;
background-size: cover;
height: 100vh;overflow: hidden;position: relative;
}
.loginbox{
.loginNav{width: 700rpx;margin:0 auto -53rpx;height: 133rpx;overflow: hidden;position: relative;
view{text-align: center;height: 133rpx;box-sizing: border-box;padding: 26rpx 0 0;}
.n1{background: url('@/static/login/tab1.png') no-repeat top left;background-size:contain;opacity: 0.7;
width: 407rpx;position: absolute;left: 0;}
.n2{background: url('@/static/login/tab2.png') no-repeat top right;background-size:contain;opacity: 0.7;
width: 399rpx;position: absolute;right: 0;}
.active{color: #AD181F;opacity: 1;
&::after{content: '';position: absolute;width: 25rpx;height: 4rpx;background: #AD181F;border-radius: 2rpx;
left: 0;right: 0;margin: auto;bottom: 50rpx;
}
}
}
}
.formbox{background: #fff;width: 700rpx;padding: 50rpx;margin: auto;border-radius: 20rpx;}
.flex-item{display: flex;justify-content: space-between;margin:30rpx 0;
font-size: 28rpx;
image{width: 30rpx;height: 30rpx;margin-right:16rpx;}
}
.member{color: #4C5359;display: flex;align-items: center;}
.center-item{text-align: center;margin: 30rpx 0 0;font-size: 30rpx;
.btn-red{border-radius: 40rpx;width: 600rpx;line-height: 80rpx;font-size: 36rpx;}
}
.btn-red{background: #AD181F;color: #fff;}
.text-red{color: #AD181F;}
.round-input-item{overflow: hidden;background: RGBA(247, 247, 248, 1);border-radius: 40rpx;
padding: 0 0 0 30rpx;
height: 80rpx;margin-bottom: 30rpx;display: flex;align-items: center;
image{width: 180rpx;height: 80rpx;
&.icon{width: 30rpx;height: 30rpx;margin-right:16rpx;}
}
input{border-left: 1rpx solid RGBA(214, 216, 219, 1);padding: 0 0 0 20rpx;font-size: 30rpx;
}
input::-webkit-input-placeholder{color:RGBA(158, 166, 174, 1);font-size: 30rpx;}
input::placeholder{color:RGBA(158, 166, 174, 1);font-size: 30rpx;}
input::-moz-placeholder{color:RGBA(158, 166, 174, 1);font-size: 30rpx;}
text{font-size: 28rpx;color: #014A9F;}
}
.fixedagree{position: fixed;bottom: 5vh;color: rgba(255, 255, 255, 0.7);display: flex;
font-size: 24rpx;width: 100vw;justify-content: center;
image{width: 40rpx;height: 40rpx;margin-right: 20rpx;}
}
</style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!