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> </style>

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

@ -12,7 +12,7 @@
<view class="form-container"> <view class="form-container">
<view class="input-item"> <view class="input-item">
<view class="title-box"> <view class="title-box">
<text class="title">服务地址</text> <text>服务地址</text>
</view> </view>
<view class="input-box map" @click="chooseLocation"> <view class="input-box map" @click="chooseLocation">
<view <view
@ -26,7 +26,7 @@
</view> </view>
<view class="input-item"> <view class="input-item">
<view class="title-box"> <view class="title-box">
<text class="title">门牌号</text> <text>门牌号</text>
</view> </view>
<view class="input-box"> <view class="input-box">
<input <input
@ -39,7 +39,7 @@
</view> </view>
<view class="input-item"> <view class="input-item">
<view class="title-box"> <view class="title-box">
<text class="title">联系人</text> <text>联系人</text>
</view> </view>
<view class="input-box"> <view class="input-box">
<input <input
@ -52,30 +52,30 @@
</view> </view>
<view class="input-item"> <view class="input-item">
<view class="title-box"> <view class="title-box">
<text class="title">性别</text> <text>性别</text>
</view> </view>
<view class="input-box"> <view class="input-box">
<view class="gender-select"> <view class="checkbox">
<view <view
class="item" class="checkbox-item"
:class="[gender == 1 ? 'active' : '']" :class="[gender == 1 ? 'active' : '']"
@click="gender = 1" @click="gender = 1"
> >
<text class="text">先生</text> <text>先生</text>
</view> </view>
<view <view
class="item" class="checkbox-item"
:class="[gender == 2 ? 'active' : '']" :class="[gender == 2 ? 'active' : '']"
@click="gender = 2" @click="gender = 2"
> >
<text class="text">女士</text> <text>女士</text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="input-item"> <view class="input-item">
<view class="title-box"> <view class="title-box">
<text class="title">手机号码</text> <text>手机号码</text>
</view> </view>
<view class="input-box"> <view class="input-box">
<input <input
@ -87,15 +87,15 @@
</view> </view>
</view> </view>
<view class="input-item default-address"> <view class="input-item default-address">
<view class="default-box"> <view class="title-box">
<text class="title">设为默认地址</text> <text>设为默认地址</text>
</view> </view>
<view class="default-icon-box" @click="isDefault = !isDefault"> <view class="input-box" @click="isDefault = !isDefault">
<widget-switch :open="isDefault" /> <widget-switch :open="isDefault" />
</view> </view>
</view> </view>
</view> </view>
<view class="save-btn-box"> <view class="save-form-btn">
<view class="btn" @click="save">保存</view> <view class="btn" @click="save">保存</view>
</view> </view>
</app-layout> </app-layout>
@ -155,46 +155,15 @@ export default {
</script> </script>
<style lang="less" scoped> <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 { .input-item.default-address {
justify-content: space-between; justify-content: space-between;
.title-box {
width: 180rpx;
flex-shrink: 0;
}
.input-box {
width: auto;
}
} }
.input-box.map { .input-box.map {
.address-text { .address-text {
@ -214,43 +183,4 @@ export default {
color: #8194f2; 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> </style>