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