简约风格的用户信息输入框和分享按钮
<view class='content'>
<view class='input-box'>
<input type='text' placeholder='请输入姓名' v-model='name' class='input'>
</view>
<view class='input-box'>
<input type='text' placeholder='请输入年龄' v-model='age' class='input'>
</view>
<view class='input-box'>
<input type='text' placeholder='请输入地址' v-model='address' class='input'>
</view>
<button type='default' @click='onShare()' class='share-btn'>点击分享</button>
</view>
<style>
.content {
max-width: 500px;
border-radius: 10px;
padding: 20px;
}
.input-box {
display: flex;
align-items: center;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
}
.input {
flex: 1;
border: none;
outline: none;
font-size: 16px;
}
.share-btn {
background-color: #f00;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px;
font-size: 16px;
cursor: pointer;
}
</style>
原文地址: https://www.cveoy.top/t/topic/n6fH 著作权归作者所有。请勿转载和采集!