flying-monkey/pages/appreciationServe/appreciationServe.vue

<template>
    <view class="content">
        <statusNav navBarTitle="增值服务"></statusNav>
        <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/微信图片_20220113152400.png" mode=""></image> 
                      <image class="img" src="../../static/del/微信图片_20220113152400.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>
</template>

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

        },
        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 {
        padding-top: 80rpx;
        padding-bottom: 80rpx;
    }
   .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>