flying-monkey/pages/appreciationServe/appreciationServe.vue

<template>
    <view class="content">
        <statusNav navBarTitle="增值服务"></statusNav>
        <container-subgroup-two>
            <view slot="content" style="margin: 0 -30rpx;">
                <view class="select-type">
                    <view class="text">选择类型</view>
                    <view class="type">
                        <view class="li" @click="typeIndexFun(index)" :class="index==typeIndex?'on':''"
                            v-for="(item,index) in typeData">
                            {{item.title}}
                        </view>
                    </view>
                </view>
                <view class="appreciationServe-from">
                    <view class="li">
                        <view class="title">
                            <text class="cor">*</text>产品名称
                        </view>
                        <input class="input" type="text" value="全彩LED显示屏" />
                    </view>
                    <view class="li">
                        <view class="title">
                            <text class="cor">*</text>规格型号
                        </view>
                        <input class="input" type="text" value="P2.5" />
                    </view>

                    <view class="li">
                        <view class="title">产品品牌</view>
                        <input class="input" type="text" value="" placeholder="请输入品牌" />
                    </view>
                    <view class="li">
                        <view class="title">
                            <text class="cor">*</text>产品尺寸
                        </view>

                        <input class="input" type="text" value="宽:38.5m x 高14.5m" />
                    </view>
                </view>
                <view class="supplementTitle">补充信息</view>
                <view class="supplement-from">
                    <view class="li">
                        <view class="title">
                            <text class="cor">*</text>联系人
                        </view>
                        <input type="text" class="input" value="王富贵" />
                    </view>
                    <view class="li">
                        <view class="">
                            <text class="cor">*</text>联系电话
                        </view>
                        <input type="text" class="input" value="18256666666" />
                    </view>
                    <view class="li">
                        <view class="">
                            <text class="cor">*</text>预约时间
                        </view>
                        <input type="text" class="input" value="2022-02-16" />
                    </view>



                    <view class="li-textarea">
                        <view class="title">*详细地址</view>
                        <textarea class="textarea" value="湖南省株洲市荷塘区红旗中路456号五矿二十三冶综合楼" placeholder="" />
                    </view>

                    <view class="scene-img">
                        <view class="title">现场图片</view>
                        <view class="img-content">
                            <image class="img" src="../../static/del/img003.png" mode=""></image>
                            <image class="img" src="../../static/del/img003.png" mode=""></image>
                        </view>
                        <view class="iocn-content">
                            <image class="icon" src="../../static/iocn/jia.png" mode=""></image>
                        </view>
                    </view>
                </view>
                <button class="submit-button" type="default">确认提交</button>

            </view>
          </container-subgroup-two>
           
    </view>
    </view>
 
</template>

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

        },
        data() {
            return {
                typeIndex: 0,
                typeData: [{
                        title: '巡检',
                        state: false
                    },
                    {
                        title: '保养',
                        state: false
                    },
                    {
                        title: '移屏',
                        state: false
                    },
                    {
                        title: '拆屏',
                        state: false
                    },
                ]
            }
        },
        onLoad(op) {
            if (op.index != undefined) this.typeIndex = op.index;
        },
        methods: {
            typeIndexFun(index) {
                this.typeIndex = index
            }
        }
    }
</script>

<style>
    .content {}

    .cor {
        color: #FF0000;
    }

    .select-type {
        display: flex;
        margin-top: 10rpx;
        height: 80rpx;
        background-color: #FFFFFF;
        align-items: center;
        padding: 0rpx 28rpx;
    }

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

    .select-type .text {
        font-size: 28rpx;
        color: #333333;
        margin-right: 34rpx;
    }

    .select-type .type {
        display: flex;
    }

    .select-type .type .li {
        width: 106rpx;
        line-height: 44rpx;
        text-align: center;
        height: 44rpx;
        color: #bbbbbb;
        border-radius: 50rpx;
        font-size: 24rpx;
        border: solid 2rpx #99999b;
        margin-right: 20rpx;
    }

    .select-type .type .on {
        background-color: #0051ff;
        border: none;
        color: #FFFFFF;
        box-shadow: 2rpx 2px 10rpx rgba(0, 81, 255, 0.5);
    }

    .appreciationServe-from {
        padding: 0rpx 25rpx;
        background-color: #FFFFFF;
        margin-top: 10rpx;
    }

    .appreciationServe-from .li {
        display: flex;
        height: 80rpx;

        align-items: center;

    }

    .appreciationServe-from .li .title {
        font-size: 26rpx;
        color: #333333;
        margin-right: 28rpx;
        width: 118rpx;
        text-align: right;
    }


    .appreciationServe-from .li .input {
        font-size: 26rpx;
        color: #333333;
        flex: 1;
    }

    .supplementTitle {
        padding: 20rpx 25rpx;
        font-size: 26rpx;

        color: #333333;
    }

    .supplement-from {
        background-color: #FFFFFF;
        padding: 0rpx 25rpx;
    }

    .supplement-from .li {
        display: flex;
        align-items: center;

        height: 80rpx;
        font-size: 27rpx;
        border-bottom: 2rpx solid #f5f5f7;
        line-height: 27rpx;
        justify-content: space-between;
        color: #333333;
    }

    .supplement-from .li .input {
        text-align: right;
        font-size: 24rpx
    }

    .supplement-from .li-textarea {
        font-size: 27rpx;
        line-height: 27rpx;
        justify-content: space-between;
        color: #333333;
        padding-bottom: 13rpx;
    }

    .supplement-from .li-textarea .title {
        padding-top: 26rpx;
        padding-bottom: 17rpx;
    }

    .supplement-from .li-textarea .textarea {
        width: 100%;
        height: 127rpx;
        background-color: #F5F5F5;
        box-sizing: border-box;
        padding: 20rpx;
        font-size: 24rpx
    }

    .scene-img {
        display: flex;
        margin-top: 27rpx;
        padding-bottom: 30rpx;
    }

    .scene-img .title {
        margin-right: 28rpx;
        font-size: 26rpx;
        color: #333333;
    }

    .scene-img .img-content .img {
        width: 170rpx;
        height: 130rpx;
        margin-right: 10rpx;
    }

    .scene-img .iocn-content {
        width: 135rpx;
        height: 135rpx;
        background-color: #DCDCDC;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .scene-img .iocn-content .icon {

        width: 62rpx;
        height: 62rpx;

    }
</style>