topnuomi
/
xx-applets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化表单组件

This commit is contained in:
TOP糯米 2023-02-16 14:14:00 +08:00
parent 75071c015a
commit 12bd5e3724
2 changed files with 88 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/App.vue
View File

@ -106,4 +106,71 @@ export default {
}
}
}
// 输入表单
.form-container {
width: 710rpx;
background-color: #fff;
margin: 20rpx auto 0 auto;
.input-item {
width: 100%;
height: 105rpx;
border-bottom: 2rpx solid #e8e7e7;
display: flex;
align-items: center;
padding: 0 30rpx;
box-sizing: border-box;
line-height: 30rpx;
.title-box {
width: 150rpx;
font-size: 30rpx;
line-height: 30rpx;
color: #2d2d2d;
}
// input
.input-box {
width: 500rpx;
position: relative;
padding: 25rpx 0;
}
.input {
font-size: 28rpx;
}
// checkbox
.checkbox {
display: flex;
}
.checkbox-item {
width: 116rpx;
height: 50rpx;
background: rgba(139, 155, 235, 0);
box-sizing: border-box;
border: 1px solid #c9c9c9;
text-align: center;
margin-right: 15rpx;
font-size: 28rpx;
color: #2d2d2d;
line-height: 48rpx;
}
.checkbox-item.active {
border: 1px solid #8b9beb;
background: rgba(139, 155, 235, 0.33);
color: #8194f2;
}
}
}
.save-form-btn {
width: 100%;
margin-top: 58rpx;
.btn {
width: 570rpx;
height: 98rpx;
background: #8b9beb;
border-radius: 49rpx;
margin: 0 auto;
font-size: 36rpx;
text-align: center;
line-height: 98rpx;
color: #ffffff;
}
}
</style>

112
src/pages/address/edit.vue
View File

@ -12,7 +12,7 @@
<view class="form-container">
<view class="input-item">
<view class="title-box">
<text class="title">服务地址</text>
<text>服务地址</text>
</view>
<view class="input-box map" @click="chooseLocation">
<view
@ -26,7 +26,7 @@
</view>
<view class="input-item">
<view class="title-box">
<text class="title">门牌号</text>
<text>门牌号</text>
</view>
<view class="input-box">
<input
@ -39,7 +39,7 @@
</view>
<view class="input-item">
<view class="title-box">
<text class="title">联系人</text>
<text>联系人</text>
</view>
<view class="input-box">
<input
@ -52,30 +52,30 @@
</view>
<view class="input-item">
<view class="title-box">
<text class="title">性别</text>
<text>性别</text>
</view>
<view class="input-box">
<view class="gender-select">
<view class="checkbox">
<view
class="item"
class="checkbox-item"
:class="[gender == 1 ? 'active' : '']"
@click="gender = 1"
>
<text class="text">先生</text>
<text>先生</text>
</view>
<view
class="item"
class="checkbox-item"
:class="[gender == 2 ? 'active' : '']"
@click="gender = 2"
>
<text class="text">女士</text>
<text>女士</text>
</view>
</view>
</view>
</view>
<view class="input-item">
<view class="title-box">
<text class="title">手机号码</text>
<text>手机号码</text>
</view>
<view class="input-box">
<input
@ -87,15 +87,15 @@
</view>
</view>
<view class="input-item default-address">
<view class="default-box">
<text class="title">设为默认地址</text>
<view class="title-box">
<text>设为默认地址</text>
</view>
<view class="default-icon-box" @click="isDefault = !isDefault">
<view class="input-box" @click="isDefault = !isDefault">
<widget-switch :open="isDefault" />
</view>
</view>
</view>
<view class="save-btn-box">
<view class="save-form-btn">
<view class="btn" @click="save">保存</view>
</view>
</app-layout>
@ -155,46 +155,15 @@ export default {
</script>
<style lang="less" scoped>
.form-container {
width: 710rpx;
background-color: #fff;
margin: 20rpx auto 0 auto;
}
.input-item {
width: 100%;
height: 105rpx;
border-bottom: 2rpx solid #e8e7e7;
display: flex;
align-items: center;
padding: 0 30rpx;
box-sizing: border-box;
line-height: 30rpx;
.default-box,
.title-box {
line-height: 0;
.title {
font-size: 30rpx;
line-height: 30rpx;
color: #2d2d2d;
}
}
.title-box {
width: 150rpx;
}
.input-box {
width: 500rpx;
position: relative;
padding: 25rpx 0;
.input {
font-size: 28rpx;
}
}
.default-box {
width: 180rpx;
}
}
.input-item.default-address {
justify-content: space-between;
.title-box {
width: 180rpx;
flex-shrink: 0;
}
.input-box {
width: auto;
}
}
.input-box.map {
.address-text {
@ -214,43 +183,4 @@ export default {
color: #8194f2;
}
}
.gender-select {
display: flex;
.item {
width: 116rpx;
height: 50rpx;
background: rgba(139, 155, 235, 0);
box-sizing: border-box;
border: 1px solid #c9c9c9;
text-align: center;
margin-right: 15rpx;
.text {
font-size: 28rpx;
color: #2d2d2d;
line-height: 48rpx;
}
}
.item.active {
border: 1px solid #8b9beb;
background: rgba(139, 155, 235, 0.33);
.text {
color: #8194f2;
}
}
}
.save-btn-box {
width: 100%;
margin-top: 58rpx;
.btn {
width: 570rpx;
height: 98rpx;
background: #8b9beb;
border-radius: 49rpx;
margin: 0 auto;
font-size: 36rpx;
text-align: center;
line-height: 98rpx;
color: #ffffff;
}
}
</style>