flying-monkey/pages/workOrder/payReturnVisit.vue

<template>
    <view class="content">
         <statusNav navBarTitle="工单回访"></statusNav>
        <view class="hint">
            客户服务，重在回访仔细倾听，以服务质量求发展
        </view>
        <view class="payReturnVisit-from">
            <view class="payReturnVisit-input">
                <view class="title">
                    <text>联</text>
                    <text>系</text>
                    <text>人</text>
                </view>
                <input class="input" placeholder="请填写联系人称呼" type="text" value="" />
            </view>
            <view class="payReturnVisit-input">
                <view class="title">
                    联系电话
                </view>
                <input class="input" placeholder="请输入手机号码" type="text" value="" />
            </view>
            <view class="payReturnVisit-input">
                <view class="title">
                    <text>微</text>
                    <text>信</text>
                    <text>号</text>
                </view>
                <input class="input" placeholder="请输入微信号码" type="text" value="" />
            </view>
            
            <view class="payReturnVisit-textarea">
                <view class="title">
                    回访内容
                </view>
                <textarea class="textarea" value="" placeholder="请输入回访内容" />
            </view>
            <view class="payReturnVisit-input">
                <view class="title">
                    客服电话
                </view>
                <input class="input" placeholder="400-765-9876" type="text" value="" />
            </view>
            <view class="payReturnVisit-input">
                <view class="title">
                回访时间
                </view>
                <input class="input" placeholder="2022/02/13 14:18:00" type="text" value="" />
            </view>
        </view>
  <button class="submit-button" type="default">确认发送</button>

    </view>
</template>

<script>
    import statusNav from '../../components/status-nav.vue';
    
    export default {
        components: {
            statusNav,
        
        },
        data() {
            return {

            }
        },
        methods: {

        }
    }
</script>

<style>
    .content{
        padding-top: 80rpx;
    }
    .hint {
        color: #358ff0;
        font-size: 24rpx;
        padding: 25rpx 30rpx;
    }
   .submit-button {
        width: 686rpx;
        border-radius: 50rpx;
        height: 90rpx;
        background-color: #02A2ea;
        line-height: 90rpx;
        color: #FFFFFF;
        margin-top: 60rpx;
        text-align: center;
        font-size: 30rpx;
    }
    .payReturnVisit-input {
        background-color: #FFFFFF;
        height: 103rpx;
        display: flex;
        align-items: center;
        width: 700rpx;
        border-bottom: 2rpx solid  #f4f4f4;
        margin: auto;
    }

    .payReturnVisit-input .title {
        display: flex;
        justify-content: space-between;
        font-size: 30rpx;
        font-weight: bold;
        width: 120rpx;
        color: #333333;
        margin-right: 40rpx;


    }

    .payReturnVisit-input .input {
        flex: 1;
        font-size: 30rpx;
        margin-top: 2rpx;
    }
    .payReturnVisit-from{
        background-color: #FFFFFF;
    }
    .payReturnVisit-textarea{
        width: 700rpx;
        border-bottom: 2rpx solid  #f4f4f4;
        margin: auto;
        padding-bottom: 30rpx;
    }
    .payReturnVisit-textarea .title{
        padding: 30rpx 0rpx;
        font-size: 30rpx;
          font-weight: bold;
    }
     .payReturnVisit-textarea .textarea{
         width: 100%;
         height: 200rpx;
         background-color: #F5F5F5;
         border-radius: 10rpx;
         padding: 20rpx;
         box-sizing: border-box;
     }
</style>