<div class="sds-container" style="background-color:white">
  <div style="width:1200px;color:#000;margin:0 auto;padding-top:20px;padding-bottom:30px;min-height:1000px">
    <div class="tm-body-breadcrumb" style="margin-bottom: 15px;"><span @click="tiaozhuan()"
        style="cursor: pointer;">首页</span> <i class="el-icon-arrow-right"></i>
      <span style="font-weight:600;">服务详情页</span>
    </div>
    <div class="sds-img">
      <img :src="serviceItem.picUrl" alt="" style="width:100%;height:100%">
    </div>
    <div class="sds-info">
      <h3>{{serviceItem.itemName}}</h3>
      <h5>{{serviceItem.shortDesc}}</h5>
      <div class="sds-t">
        <span style="color:#999;font-size:12px;margin:12px">服务费：</span> <b
          style="color:#ff5135;font-size:18px">&yen;&nbsp;{{serviceItem.serviceCharge?serviceItem.serviceCharge.toFixed(2):0}}</b>
        <span style="color:#999;font-size:12px;margin:12px;margin-left:40px">官费：</span> <b
          style="color:#ff5135;font-size:18px">&yen;&nbsp;{{serviceItem.publicExpense?serviceItem.publicExpense.toFixed(2):0}}</b>
      </div>
      <div style="margin-top:20px;font-size: 12px;color: rgb(153, 153, 153);margin-left: 11px;">
        数量：<el-input-number v-model="num" @change="handleChange" :min="1" label="描述文字"></el-input-number>
      </div>
      <div style="height:30px;line-height:60px">
        <span style="color:#999;font-size:12px;margin:12px">费用总计：</span> <b
          style="color:#ff5135;font-size:18px">&yen;&nbsp;{{serviceItem.price?serviceItem.price.toFixed(2):0}}</b>
      </div>
      <div class="sds-operate">
        <!-- <span class="sds-op2" @click="showneed()">提交需求</span> -->
        <span class="sds-op1" @click="sdsOp2()">立即购买</span>
      </div>
      <p>服务承诺：全流程服务 全程公开透明</p>
    </div>
    <div style="clear: both"></div>
    <div class="sds-main-t">
    </div>
    <div class="sds-productdetails">
      <h3><span>产品详情</span><i></i></h3>
      <!-- <div style="height:400px;background-color: #e1e1e1;margin:10px">
            </div> -->
      <img v-if="serviceItem.mobileContentImg" :src="serviceItem.mobileContentImg" alt="" style="margin-top:10px">
      <img v-if="serviceItem.mobileContentImg1" :src="serviceItem.mobileContentImg1" alt="">
      <img v-if="serviceItem.mobileContentImg2" :src="serviceItem.mobileContentImg2" alt="">
      <img v-if="serviceItem.mobileContentImg3" :src="serviceItem.mobileContentImg3" alt="">
      <img v-if="serviceItem.mobileContentImg4" :src="serviceItem.mobileContentImg4" alt="">
      <img v-if="serviceItem.mobileContentImg5" :src="serviceItem.mobileContentImg5" alt="">
      <img v-if="serviceItem.mobileContentImg6" :src="serviceItem.mobileContentImg6" alt="">
    </div>
  </div>

  <el-dialog title="提交需求" :visible.sync="dialogFormVisible" center width="600px">
    <el-form :model="form" ref="form" :rules="rules" style="margin-left:40px">
      <div style="color:#606266;font-size:14px;font-weight:400;line-height:12px;margin-bottom:30px;margin-left:12px">
        服务需求：{{serviceItem.itemName}}</div>
      <el-form-item label="您的名字：" prop="name">
        <el-input v-model="form.name" autocomplete="off" placeholder="请输入您的名字" style="width:360px"></el-input>
      </el-form-item>
      <el-form-item label="联系方式：" prop="mobile">
        <el-input v-model="form.mobile" autocomplete="off" placeholder="请输入您的电话" style="width:360px"></el-input>
      </el-form-item>
      <el-form-item label="所属城市：" prop="city" style="margin-left:12px">
        <el-cascader style="width:360px" expand-trigger="hover" :options="bigtype" v-model="form.city"
          placeholder="请选择所属城市">
        </el-cascader>
      </el-form-item>
      <el-form-item label="需求详情：" prop="notes" style="margin-left:12px">
        <el-input v-model="form.notes" type="textarea" :rows="3" autocomplete="off" placeholder="请输入您的详细内容"
          style="width:360px"></el-input>
      </el-form-item>
      <el-form-item>
        <div style="width:100%;font-size:12px;color:#B2B2B2;margin-left:12px;font-family:Microsoft YaHei">
          <i class="el-icon-info"></i>
          提交需求后，我们专业代理人会及时与您联系，为您服务，请保持电话畅通。
        </div>
      </el-form-item>
      <el-form-item>
        <div style="width:100%;text-align:center;font-family:Microsoft YaHei">
          <el-button type="primary" @click="submitneed">提交</el-button>
          <el-button @click="dialogFormVisible=false">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>

</div>