flying-monkey/pages/workOrder/payReturnVisit.vue

<template>
    <view class="content">
        <statusNav navBarTitle="工单回访"></statusNav>
        <container-subgroup-two>
            <view slot="content" style="margin: -25rpx -30rpx 0rpx;">
                   <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>
                        </container-subgroup-two>

    </view>
</template>

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

            }
        },
        methods: {

        }
    }
</script>

<style>


    .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>