303 lines
8.2 KiB
Vue
303 lines
8.2 KiB
Vue
<template>
|
|
<view class="content">
|
|
<statusNav returnColor="#c2c2c2" 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>
|