162 lines
3.5 KiB
Vue
162 lines
3.5 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="维修申报" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
|
||
height='38'></u-navbar>
|
||
<view class="box">
|
||
<view class="jijian">
|
||
<text>寄件地址：</text> <textarea value="" placeholder="请输入寄件地址" />
|
||
</view>
|
||
<view class="froms">
|
||
<view class="name">
|
||
<text>姓名：</text> <input type="text" placeholder="请输入姓名"/>
|
||
</view>
|
||
<view class="pwd">
|
||
<text>电话：</text> <input type="text" placeholder="请输入电话"/>
|
||
</view>
|
||
<view class="weixiu">
|
||
<text>维修原因：</text> <textarea value="" placeholder="请备注原因" />
|
||
</view>
|
||
</view>
|
||
|
||
<button>提交</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%);
|
||
}
|
||
|
||
.page {
|
||
width: 750rpx;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
.box{
|
||
button{
|
||
width: 584rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
font-weight: 500;
|
||
font-size: 40rpx;
|
||
color: #FFFFFF;
|
||
background: linear-gradient( 270deg, #54DAA1 0%, #19CD82 100%);
|
||
border-radius: 54rpx 54rpx 54rpx 54rpx;
|
||
margin: auto;
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 432rpx;
|
||
}
|
||
padding-top: 30rpx;
|
||
width: 750rpx;
|
||
height: 1440rpx;
|
||
background: #F4F5F7;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
.froms{
|
||
width: 680rpx;
|
||
height: 558rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
margin: auto;
|
||
margin-top: 34rpx;
|
||
padding: 44rpx;
|
||
box-sizing: border-box;
|
||
.name{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 30rpx;
|
||
input{
|
||
width: 446rpx;
|
||
height: 50rpx;
|
||
background: #F0F0F0;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
padding: 10rpx 20rpx;
|
||
box-sizing: border-box;
|
||
font-size: 24rpx;
|
||
color: #979797;
|
||
}
|
||
text{
|
||
margin-top: 5rpx;
|
||
}
|
||
}
|
||
.pwd{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 30rpx;
|
||
text{
|
||
margin-top: 5rpx;
|
||
}
|
||
input{
|
||
width: 446rpx;
|
||
height: 50rpx;
|
||
background: #F0F0F0;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
padding: 10rpx 20rpx;
|
||
box-sizing: border-box;
|
||
font-size: 24rpx;
|
||
color: #979797;
|
||
}
|
||
}
|
||
.weixiu{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 30rpx;
|
||
text{
|
||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
textarea{
|
||
width: 446rpx;
|
||
height: 158rpx;
|
||
background: #F0F0F0;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
padding: 10rpx 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
.jijian{
|
||
width: 680rpx;
|
||
height: 230rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
margin: auto;
|
||
padding: 42rpx 44rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
text{
|
||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
textarea{
|
||
width: 446rpx;
|
||
height: 158rpx;
|
||
background: #F0F0F0;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
padding: 10rpx 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |