Skip to content

C
CFFP-HB
Commit f4d72d20 by zeyang
Options

微信图标被挤压的问题

parent 4613f5fe
Showing with 105 additions and 103 deletions
myPackageA/videoProject/login.vue
<template>
<view class="loginContent">
<view class="loginLogBox">
<view class="log">
<image src="../../static/videoProject/logo.png" mode="widthFix"></image>
</view>
<view class="title">
您好，欢迎登录！
</view>
</view>
<view class="loginInputBox">
<view class="loginInputLine" style="margin-bottom: 40rpx;">
<view class="phoneImage">
<image src="../../static/videoProject/phone.png" mode="widthFix"></image>
<view class="loginContainer">
<view class="loginLogBox">
<view class="log">
<image src="../../static/videoProject/logo.png" mode="widthFix"></image>
</view>
<view class="title">
您好，欢迎登录！
</view>
<input v-model="mobile" maxlength="11" type="number" placeholder="请输入手机号">
</view>
<view class="codeBox">
<view class="loginInputLine">
<view class="codeImage">
<image src="../../static/videoProject/code.png" mode="widthFix"></image>
<view class="loginInputBox">
<view class="loginInputLine" style="margin-bottom: 40rpx;">
<view class="phoneImage">
<image src="../../static/videoProject/phone.png" mode="widthFix"></image>
</view>
<input v-model="code" maxlength="6" type="number" placeholder="请输入验证码">
<input :adjust-position="false" v-model="mobile" maxlength="11" type="number" placeholder="请输入手机号">
</view>
<view class="code" @click="c_sendCode">
{{sendCodeHtml}}
<view class="codeBox">
<view class="loginInputLine">
<view class="codeImage">
<image src="../../static/videoProject/code.png" mode="widthFix"></image>
</view>
<input :adjust-position="false" v-model="code" maxlength="6" type="number" placeholder="请输入验证码">
</view>
<view class="code" @click="c_sendCode">
{{sendCodeHtml}}
</view>
</view>
</view>
</view>
<view class="loginButtonBox" @click="loginVerification">
<view>
登录
<view class="loginButtonBox" @click="loginVerification">
<view>
登录
</view>
</view>
</view>
<view class="wxLoginBox" @click="getWeChatCode">
......@@ -190,96 +192,95 @@
padding: 0rpx 50rpx;
background: linear-gradient(rgba(232, 207, 181, 1) 0%, rgba(242, 240, 237, 1) 60%);
position: relative;
.wxLoginBox {
position: absolute;
bottom: 12vh;
text-align: center;
left: 42vw;
.wxIconBox {
padding-bottom: 40rpx;
}
.wxLoginLabel {
color: rgba(102, 102, 102, 1);
font-size: 34rpx;
letter-spacing: 1rpx;
}
}
.loginLogBox {
padding-top: 10vh;
.log {
width: 20vw;
margin-bottom: 1vh;
margin-left: 2vw;
}
.title {
font-size: 40rpx;
color: #000;
font-weight: 600;
}
}
.loginInputBox {
margin: 5vh 0;
.loginInputLine {
display: flex;
align-items: center;
background: rgba(244, 246, 248, 1);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
padding: 20rpx 40rpx;
border-radius: 5rpx;
.phoneImage {
width: 55rpx;
margin-bottom: -6rpx;
margin-right: 10rpx;
.loginContainer{
.loginLogBox {
padding-top: 10vh;
.log {
width: 20vw;
margin-bottom: 1vh;
margin-left: 2vw;
}
.title {
font-size: 40rpx;
color: #000;
font-weight: 600;
}
}
.codeBox {
display: flex;
align-items: center;
justify-content: space-between;
.loginInputBox {
margin: 5vh 0;
.loginInputLine {
width: 300rpx;
display: flex;
.codeImage {
width: 95rpx;
margin-bottom: -10rpx;
align-items: center;
background: rgba(244, 246, 248, 1);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
padding: 20rpx 40rpx;
border-radius: 5rpx;
.phoneImage {
width: 55rpx;
margin-bottom: -6rpx;
margin-right: 10rpx;
}
}
.codeBox {
display: flex;
align-items: center;
justify-content: space-between;
.loginInputLine {
width: 300rpx;
display: flex;
.codeImage {
width: 90rpx;
margin-bottom: -10rpx;
margin-right: 10rpx;
}
}
}
.code {
color: #fff;
padding: 30rpx 0;
border-radius: 2px;
background: linear-gradient(90deg, rgba(235, 196, 155, 1) 0%, rgba(209, 158, 103, 1) 100%);
box-shadow: 0px 5px 13px rgba(209, 158, 104, 0.3);
flex-grow: 0.7;
text-align: center;
}
}
.code {
color: #fff;
padding: 30rpx 0;
border-radius: 2px;
background: linear-gradient(90deg, rgba(235, 196, 155, 1) 0%, rgba(209, 158, 103, 1) 100%);
box-shadow: 0px 5px 13px rgba(209, 158, 104, 0.3);
flex-grow: 0.7;
text-align: center;
.loginButtonBox {
view {
font-size: 38rpx;
color: #fff;
border-radius: 200rpx;
padding: 35rpx 0;
text-align: center;
background: linear-gradient(90deg, rgba(235, 196, 155, 1) 0%, rgba(209, 158, 103, 1) 100%);
box-shadow: 0px 5px 13px rgba(209, 158, 104, 0.3);
}
}
}
.loginButtonBox {
view {
font-size: 38rpx;
color: #fff;
border-radius: 200rpx;
padding: 35rpx 0;
text-align: center;
background: linear-gradient(90deg, rgba(235, 196, 155, 1) 0%, rgba(209, 158, 103, 1) 100%);
box-shadow: 0px 5px 13px rgba(209, 158, 104, 0.3);
.wxLoginBox {
margin-top: 200rpx;
text-align: center;
.wxIconBox {
padding-bottom: 40rpx;
}
.wxLoginLabel {
color: rgba(102, 102, 102, 1);
font-size: 34rpx;
letter-spacing: 1rpx;
}
}
}
</style>
\ No newline at end of file
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