项目表

wente

2024-01-12 ac1cf9f57ed1ef031ddd57fa8c6a9fee3f18e158

 web/src/views/modules/project/SoftwareTestOrder-AddOrUpdate.vue

@@ -1,9 +1,9 @@
<template>
  <zt-dialog ref="dialog" column="2" @confirm="formSubmit">
    <el-form ref="form" :inline="true" :model="dataForm" :disabled="dataForm.disabled" label-width="120px"
             class="weiTuoDanAuto">
  <zt-dialog ref="dialog" column="2" @confirm="formSubmit" >
    <el-form ref="form" :inline="true" :model="dataForm" :disabled="dataForm.disabled" label-width="93px"
             class="weiTuoDanAuto" style="padding-top: 0">
      <div class="DManageForm">
        <el-form-item readonly label-width="60px" label="编号:" style="width: 99% ;margin-bottom:-5px">
        <el-form-item readonly label-width="50px" label="编号:" style="width: 99% ;margin-bottom:-5px">
          <span>{{ dataForm.softwareTestOrder.code}}</span>
        </el-form-item>
      </div>
@@ -18,21 +18,17 @@
                委托单位
              </div>
              <div class="DOldForm el-border-left">
                <!-- 单位名称 -->
                <el-form-item class="marginTopAndMarginBottom" label="单位名称" style="width: 49%">
                  <el-input readonly v-model="dataForm.project.entrustUnitName" placeholder="请输入单位名称"></el-input>
                </el-form-item>
                <!-- 联系人 -->
                <el-form-item class="marginTopAndMarginBottom" label="联系人" style="width: 49%">
                  <el-input readonly v-model="dataForm.project.entrustUnitContact"
                            placeholder="请输入联系人"></el-input>
                </el-form-item>
                <!-- 详细地址 -->
                <el-form-item label="详细地址" style="width: 49%">
                  <el-input readonly v-model="dataForm.project.entrustUnitAddress"
                            placeholder="请输入详细地址"></el-input>
                </el-form-item>
                <!-- 联系方式 -->
                <el-form-item label="联系方式" style="width: 49%">
                  <el-input readonly v-model="dataForm.project.entrustUnitContWay"
                            placeholder="请输入联系方式"></el-input>
@@ -44,21 +40,17 @@
                开发单位
              </div>
              <div class="DOldForm el-border-left">
                <!-- 单位名称 -->
                <el-form-item class="marginTopAndMarginBottom" label="单位名称" style="width: 49%">
                  <el-input readonly v-model="dataForm.project.developUnitName" placeholder="请输入单位名称"></el-input>
                </el-form-item>
                <!-- 联系人 -->
                <el-form-item class="marginTopAndMarginBottom" label="联系人" style="width: 49%">
                  <el-input readonly v-model="dataForm.project.developUnitContact"
                            placeholder="请输入联系人"></el-input>
                </el-form-item>
                <!-- 详细地址 -->
                <el-form-item label="详细地址" style="width: 49%">
                  <el-input readonly v-model="dataForm.project.developUnitAddress"
                            placeholder="请输入详细地址"></el-input>
                </el-form-item>
                <!-- 联系方式 -->
                <el-form-item label="联系方式" style="width: 49%">
                  <el-input readonly v-model="dataForm.project.developUnitContWay"
                            placeholder="请输入联系方式"></el-input>
@@ -66,27 +58,20 @@
              </div>
            </div>
            <div class="el-flex el-border-bottom">
              <div class="DWidth-Unt DAlign DHold">
              <div  class="DWidth-Unt DAlign DHold">
                被测件信息
              </div>
              <div class="DOldForm el-border-left">
                <!-- 单位名称 -->
                <el-form-item class="marginTopAndMarginBottom" label="软件名称" style="width: 49%">
                  <el-input readonly v-model="dataForm.project.softwareName" placeholder="请输入软件名称"></el-input>
                </el-form-item>
                <!-- 联系人 -->
                <el-form-item class="marginTopAndMarginBottom" label="软件标识" style="width: 49%">
                  <el-input readonly v-model="dataForm.project.softwareIdentity" placeholder="请输入软件标识"></el-input>
                </el-form-item>
                <!-- 详细地址 -->
                <el-form-item label="密级" style="width: 49%">
                  <zt-dict readonly v-model="dataForm.project.secretClass" placeholder="密级" dict="secret_class"
                           clearable></zt-dict>
                </el-form-item>
                <!--          <zt-form-item label="保密级别" prop="secretClass"  style="width: 25%">-->
                <!--            <zt-dict v-model="datadataForm.secretClass" dict="secret_class" placeholder="保密级别" style="width:200px"></zt-dict>-->
                <!--          </zt-form-item>-->
                <!-- 联系方式 -->
                <el-form-item label="关键等级" style="width: 49%">
                  <zt-dict readonly v-model="dataForm.project.criticalLevel" :radio="true" placeholder="关键等级"
                           clearable dict="critical_level"></zt-dict>
@@ -98,19 +83,15 @@
                  <el-input v-model="dataForm.softwareTestOrder.programLang" placeholder="请输入编程语言"></el-input>
                </el-form-item>
                <div class="el-flex el-border-top-and-bottom">
                  <div class="DWidth DAlign DHold">
                  <div style="width:88px !important;" class="DWidth DAlign DHold">
                    被测件及其他相关物品清单
                  </div>
                  <div style="width: calc(100% - 120px);padding: 5px">
                    <el-table class="el-software" height="230" border :data="dataForm.measuredList"
                  <div class="table-container" style="width: calc(100% - 120px);padding: 5px">
                    <el-table ref="tableMeasuredList" class="el-software" height="230" border :data="dataForm.measuredList"
                              @cell-click="handleCellClick"
                              stripe>
                      <el-table-column prop="no"  align="center"  width="80" label="序号"/>
                      <el-table-column min-width="300" label="名称">
                        <template slot-scope="scope">
                          <span>{{ (dataForm.project.softwareName||'') + scope.row.name }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="name" min-width="300" label="名称"/>
                      <el-table-column align="center" prop="identify" width="180" label="标识/版本">
                        <template slot-scope="scope">
                          <span v-if="editingCell && editingCell.row === scope.row && editingCell.column.property === scope.column.property">
@@ -125,7 +106,12 @@
                        </template>
                      </el-table-column>
                    </el-table>
                    <div v-if="!dataForm.disabled" class="icon-container" @click="addMeasuredRow()">
                      <!-- 放置固定的图标 -->
                      <i class="el-icon-plus"></i>
                    </div>
                  </div>

                </div>
                <div class="el-flex" style="height: 40px;">
                  <div class="DWidth DAlign DHold">
@@ -149,7 +135,7 @@
                  <div class="el-border-left" style="width: 98%">
                    <el-form-item style="width: 20%;padding-left:5%;margin-bottom: 0">
                      <zt-dict v-model="dataForm.softwareTestOrder.testBasis" :radio="true" dict="test_basis"
                               clearable></zt-dict>
                               clearable  :inputName="dataForm.softwareTestOrder.otherBasis" origin="otherBasis" @getChangeInputData="getChangeInputData"></zt-dict>
                    </el-form-item>
                  </div>
                </div>
@@ -157,7 +143,7 @@
                  <div class="DWidth DAlign DHold">
                    测试类型
                  </div>
                  <div class="el-border-left" style="width: 98%">
                  <div class="el-border-left test-type-line-height" style="width: 98%">
                    <el-form-item  style="width: 40%;padding-left:5%;margin-bottom: 0">
                      <zt-dict-checkbox v-model="dataForm.softwareTestOrder.testType1" column="2" dict="test_type1"
                                        clearable></zt-dict-checkbox>
@@ -174,7 +160,10 @@
                  </div>
                  <div class="el-border-left" style="width: 98%">
                    <el-form-item style="width: 20%;padding-left:5%;margin-bottom: 0">
                      <zt-dict v-model="dataForm.softwareTestOrder.testStandard" :radio="true" dict="test_standard"></zt-dict>
                      <zt-dict  v-model="dataForm.softwareTestOrder.testStandard" :radio="true"
                                origin="otherStandard" @getChangeInputData="getChangeInputData"
                                dict="test_standard" :inputName="dataForm.softwareTestOrder.otherStandard">
                      </zt-dict>
                    </el-form-item>
                  </div>
                </div>
@@ -188,27 +177,41 @@
                    </el-form-item>
                  </div>
                </div>
                <div class="DOldForm">
                  <el-form-item class="marginTopAndMarginBottom" label="开始日期" style="width: 49%">
                    <el-date-picker
                <div class="el-flex el-border-bottom">
                  <div class="DWidth DAlign DHold">
                    开始日期
                  </div>
                  <div class="el-border-left startDate" style="width: 45%;">
                    <el-form-item  style="width: 100%;padding-left:20px;margin:0;">
                      <el-date-picker
                        v-model="dataForm.softwareTestOrder.startDate"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <!-- 联系人 -->
                  <el-form-item class="marginTopAndMarginBottom" label="结束日期" style="width: 49%">
                      </el-date-picker>
                    </el-form-item>
                  </div>
                  <div class="DWidth DAlign DHold">
                    结束日期
                  </div>
                  <div class="el-border-left endDate" style="width: 42%">
                  <el-form-item  style="width: 100%;padding-left:20px;margin:0;">
                    <el-date-picker
                        v-model="dataForm.softwareTestOrder.endDate"
                        type="date"
                        placeholder="选择日期">
                      v-model="dataForm.softwareTestOrder.endDate"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  </div>
                </div>
                <div class="DOldForm el-border-bottom">
                  <el-form-item label="测试场地" style="width: 98%">
                    <el-input v-model="dataForm.softwareTestOrder.testVenue" placeholder="请输入单位名称"></el-input>
                <div class="el-flex el-border-bottom">
                  <div class="DWidth DAlign DHold">
                    测试场地
                  </div>
                  <div class="el-border-left testVenue" style="width: 98%">
                  <el-form-item  style="width: 98%;padding-left:20px;margin:0;">
                    <el-input v-model="dataForm.softwareTestOrder.testVenue" placeholder="请输入测试场地"></el-input>
                  </el-form-item>
                  </div>
                </div>
                <div class="el-flex">
                  <div class="DWidth DAlign DHold">
@@ -217,7 +220,8 @@
                  <div class="el-border-left" style="width: 98%;">
                    <el-form-item label="是否盖CNAS章" label-width="130px" style="padding-left:5%;margin-bottom:0">
                      <zt-dict v-model="dataForm.softwareTestOrder.otherRequire" :radio="true"
                               dict="other_require"></zt-dict>
                               dict="is_or_not"></zt-dict>
                      <span>其他:<el-input class="requireOther" v-model="dataForm.softwareTestOrder.requireOther"></el-input></span>
                    </el-form-item>
                  </div>
                </div>
@@ -229,16 +233,17 @@
              </div>
              <div class="" style="width: 100%;">
                <div class="el-flex " style="height: 40px">
                  <div style="width: 70%">
                    <span>{{ dataForm.write }}</span>
                  <div style="width: 60%">
                    <span>{{ dataForm.softwareTestOrder.entrustSign }}</span>
<!--                    <zt-select v-model="dataForm.softwareTestOrder.entrustSign" url="/sys/userEx/getUsersList" :multiple="true" :clearable="true" placeholder="委托方人员"/>-->
                  </div>
                  <div class="el-flex">
                    <div style="width: 60px;text-align: center">{{ dataForm.year }}</div>
                    年
                    <div style="width: 40px;text-align: center">{{ dataForm.month }}</div>
                    月
                    <div style="width: 40px;text-align: center">{{ dataForm.day }}</div>
                    日
                  <div class="el-flex" style="margin-left: 10%">
                    <el-date-picker
                      v-model="dataForm.softwareTestOrder.entrustSignDate"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
<!--                    {{ dataForm.softwareTestOrder.entrustSignDate | filterTime('YYYY年MM月DD日') }}-->
                  </div>
                </div>
              </div>
@@ -255,32 +260,59 @@
                测试信息
              </div>
              <div class="DOldForm el-border-left">
                <el-form-item class="marginTopAndMarginBottom" label="测试日期" style="width: 49%">
                  <el-date-picker
                      v-model="dataForm.softwareTestOrder.testDate"
                      type="date"
                      placeholder="测试日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item class="marginTopAndMarginBottom" label="交付日期" style="width: 49%">
                  <el-date-picker
                      v-model="dataForm.softwareTestOrder.deliveryDate"
                      type="date"
                      placeholder="交付日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="检测费用" style="width: 98%">
                  <el-input v-model="dataForm.softwareTestOrder.testCost" placeholder="请输入检测费用"></el-input>
                </el-form-item>
                <el-form-item class="el-border-bottom marginTopAndMarginBottom2" label="物品性质" style="width: 100%">
                  <zt-dict v-model="dataForm.softwareTestOrder.articleNature" :radio="true"
                           dict="article_nature"></zt-dict>
                </el-form-item>
                <div class="el-flex el-border-bottom" style="margin-top: -10px;">
                <div class="el-flex el-border-bottom">
                  <div class="DWidth DAlign DHold">
                    测试日期
                  </div>
                  <div class="el-border-left startDate" style="width: 45%;">
                    <el-form-item  style="width: 100%;padding-left:20px;margin:0;">
                      <el-date-picker
                        v-model="dataForm.softwareTestOrder.testDate"
                        type="date"
                        placeholder="选择测试日期">
                      </el-date-picker>
                    </el-form-item>
                  </div>
                  <div class="DWidth DAlign DHold">
                    交付日期
                  </div>
                  <div class="el-border-left endDate" style="width: 42%">
                    <el-form-item  style="width: 100%;padding-left:20px;margin:0;">
                      <el-date-picker
                        v-model="dataForm.softwareTestOrder.deliveryDate"
                        type="date"
                        placeholder="选择交付日期">
                      </el-date-picker>
                    </el-form-item>
                  </div>
                </div>
                <div class="el-flex el-border-bottom">
                  <div class="DWidth DAlign DHold">
                    检测费用
                  </div>
                  <div class="el-border-left testCost" style="width: 98%">
                    <el-form-item  style="width: 98%;padding-left:20px;margin:0;">
                      <el-input v-model="dataForm.softwareTestOrder.testCost" placeholder="请输入检测费用"></el-input>
                    </el-form-item>
                  </div>
                </div>
                <div class="el-flex el-border-bottom">
                  <div class="DWidth DAlign DHold">
                    物品性质
                  </div>
                  <div class="el-border-left" style="width: 98%">
                    <el-form-item  style="width: 20%;padding-left:20px;margin:0;">
                      <zt-dict v-model="dataForm.softwareTestOrder.articleNature" :radio="true"
                               origin="otherNature" @getChangeInputData="getChangeInputData"
                               dict="article_nature" :inputName="dataForm.softwareTestOrder.otherNature"></zt-dict>
                    </el-form-item>
                  </div>
                </div>
                <div class="el-flex el-border-bottom">
                  <div class="DWidth DAlign DHold">
                    样品状态
                  </div>
                  <div class="el-border-left" style="width: 100%;">
                  <div class="el-border-left" style="width: 98%;">
                    <el-form-item label="是否满足测试要求:" label-width="160px" style="margin-bottom: 0">
                      <zt-dict v-model="dataForm.softwareTestOrder.sampleStatus" :radio="true"
                               dict="is_satisfy"></zt-dict>
@@ -288,16 +320,20 @@
                  </div>
                </div>
                <div class="el-flex el-border-top">
                  <div class="DWidth DAlign DHold">
                  <div style="width:88px !important;" class="DWidth DAlign DHold">
                    交付物清单
                  </div>
                  <div style="width: calc(100% - 120px);padding: 5px">
                    <el-table class="el-software" height="100" border :data="dataForm.deliverableList"
                  <div class="table-container" style="width: calc(100% - 120px);padding: 5px">
                    <el-table ref="tableDeliverableList" class="el-software" height="100" border :data="dataForm.deliverableList"
                              stripe>
                      <el-table-column type="index" align="center" width="80" label="序号"/>
                      <el-table-column prop="name" min-width="300" label="名称"></el-table-column>
                      <el-table-column prop="identify" align="center" width="380" label="标识/版本"></el-table-column>
                    </el-table>
                    <div v-if="!dataForm.disabled" class="icon-container" @click="addDeliverableRow()">
                      <!-- 放置固定的图标 -->
                      <i class="el-icon-plus"></i>
                    </div>
                  </div>
                </div>
              </div>
@@ -311,11 +347,9 @@
                              style="width: 98%">
                  <el-input v-model="dataForm.testAgencyInfo.agencyName" placeholder="请输入单位名称"></el-input>
                </el-form-item>
                <!-- 联系人 -->
                <el-form-item class="marginTopAndMarginBottom3" label-width="130px" label="地址" style="width: 98%">
                  <el-input v-model="dataForm.testAgencyInfo.site" placeholder="请输入联系人"></el-input>
                </el-form-item>
                <!-- 详细地址 -->
                <el-form-item class="marginTopAndMarginBottom2" label-width="130px" label="业务联系" style="width: 49%">
                  <el-input v-model="dataForm.testAgencyInfo.businContact" placeholder="请输入详细地址"></el-input>
                </el-form-item>
@@ -350,18 +384,24 @@
              </div>
              <div class="" style="width: 100%;">
                <div class="el-flex" style="height: 40px">
                  <div style="width: 70%">
                    <span>{{ dataForm.write }}</span>
                  <div style="width: 60%">
                    <zt-select v-model="dataForm.softwareTestOrder.contractSign" url="/sys/userEx/getUsersList" placeholder="承托方人员"/>
<!--                    <span>{{ dataForm.contractSign }}</span>-->
                  </div>
                  <div class="el-flex">
                    {{ dataForm.softwareTestOrder.deliveryDate | filterTime('YYYY年MM月DD日') }}
                  <div class="el-flex" style="margin-left: 10%">
<!--                    {{ dataForm.softwareTestOrder.contractSignDate | filterTime('YYYY年MM月DD日') }}-->
                    <el-date-picker
                      v-model="dataForm.softwareTestOrder.contractSignDate"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="el-flex">
        <div class="el-flex el-border-bottom">
          <div class="DPadding3 DAlign DHold">
            说明
          </div>
@@ -378,6 +418,12 @@
            </div>
          </div>
        </div>
        <div class="el-flex order-sc" style="height: 60px">
            <el-form-item class="marginTopAndMarginBottom" style="width: 100%">
              <config-uploader :lineHeight="true" busi-type="test_order" model-name="dataForm" :dataForm="dataForm"
                               v-model="dataForm.files"/>
            </el-form-item>
        </div>
      </div>

    </el-form>
@@ -393,7 +439,8 @@
export default {
  data() {
    return {
      time: '2023-11-13',
      // inputName:'',
      eventIndex:'',
      editingCell:null,
      dataForm: {
        id: null,
@@ -415,6 +462,14 @@
          testCost:'',
          articleNature:'',
          sampleStatus:'',
          entrustSign:'',
          entrustSignDate:'',
          contractSign:'',
          contractSignDate:'',
          otherBasis:'otherBasis',
          otherStandard:'otherStandard',
          requireOther:'requireOther',
          otherNature:'otherNature',
        },
        project: {
          code: '',
@@ -438,7 +493,6 @@
          softwareType: '',
          tenantId: '',
          testLevel: '',

        },
        testAgencyInfo: {
          agencyName:'',
@@ -456,6 +510,19 @@
    }
  },
  methods: {
    // getDictLabel(event,name){
    //   if(name.indexOf("其他")!=-1){
    //     console.log(name,'字典名字q34567')
    //     this.eventIndex = event
    //     this.inputName='q14eeff'
    //   }
    // },
    getChangeInputData(data,ogn){
      // console.log(ogn)
      this.$set(this.dataForm.softwareTestOrder, ogn, data);
      console.log(this.dataForm.softwareTestOrder[ogn]);
      // console.log(this.dataForm.softwareTestOrder[ogn])
    },
    handleCellClick(row, column) {
      this.editingCell = {row, column}
      this.$nextTick(() => {
@@ -487,9 +554,14 @@
          ...res.data
        }
        if(this.dataForm.softwareTestOrder){
          this.dataForm.softwareTestOrder.testType1=this.dataForm.softwareTestOrder.testType1.split(',')
          this.dataForm.softwareTestOrder.testType2=this.dataForm.softwareTestOrder.testType2.split(',')
          console.log(this.dataForm.softwareTestOrder.testType1)
          if(this.dataForm.softwareTestOrder.testType1){
            this.dataForm.softwareTestOrder.testType1=this.dataForm.softwareTestOrder.testType1.split(',')
            console.log(this.dataForm.softwareTestOrder.testType1)
          }
          if(this.dataForm.softwareTestOrder.testType2){
            this.dataForm.softwareTestOrder.testType2=this.dataForm.softwareTestOrder.testType2.split(',')
            console.log(this.dataForm.softwareTestOrder.testType2)
          }
        }
        if(this.dataForm.project === null){
          this.dataForm.project={}
@@ -502,6 +574,21 @@
        }
      }
      // console.log(this.dataForm, "this.dataForm")
      console.log(this.dataForm,"getInfo this.dataForm")
    },
    addDeliverableRow() {
      this.dataForm.deliverableList.push({})
      this.$nextTick(() => {
        const tableBody = this.$refs.tableDeliverableList.$el.querySelector('.el-table__body-wrapper')
        tableBody.scrollTop = tableBody.scrollHeight
      })
    },
    addMeasuredRow() {
      this.dataForm.measuredList.push({})
      this.$nextTick(() => {
        const tableBody = this.$refs.tableMeasuredList.$el.querySelector('.el-table__body-wrapper')
        tableBody.scrollTop = tableBody.scrollHeight
      })
    },
    async print(){
      var params = qs.stringify({
@@ -513,9 +600,13 @@
    },
    // 表单提交
    async formSubmit() {
      console.log(this.dataForm, ' this.dataForm')
      this.dataForm.softwareTestOrder.testType1=this.dataForm.softwareTestOrder.testType1.join(',')
      this.dataForm.softwareTestOrder.testType2=this.dataForm.softwareTestOrder.testType2.join(',')
      console.log(this.dataForm, 'formSubmit this.dataForm')
      if(this.dataForm.softwareTestOrder.testType1){
        this.dataForm.softwareTestOrder.testType1=this.dataForm.softwareTestOrder.testType1.join(',')
      }
      if(this.dataForm.softwareTestOrder.testType2){
        this.dataForm.softwareTestOrder.testType2=this.dataForm.softwareTestOrder.testType2.join(',')
      }
      console.log(this.dataForm.softwareTestOrder.testType1)
      let res = await this.$http[!this.dataForm.id ? 'post' : 'put']('/project/SoftwareTestOrder/', this.dataForm)
      if (res.success) {
@@ -523,8 +614,12 @@
        this.$refs.dialog.close()
        this.$emit('refreshDataList')
      }else{
        this.dataForm.softwareTestOrder.testType1=this.dataForm.softwareTestOrder.testType1.split(',')
        this.dataForm.softwareTestOrder.testType2=this.dataForm.softwareTestOrder.testType2.split(',')
        if(this.dataForm.softwareTestOrder.testType1){
          this.dataForm.softwareTestOrder.testType1=this.dataForm.softwareTestOrder.testType1.split(',')
        }
        if(this.dataForm.softwareTestOrder.testType2){
          this.dataForm.softwareTestOrder.testType2=this.dataForm.softwareTestOrder.testType2.split(',')
        }
      }
    }
  }
@@ -590,7 +685,18 @@
.DOldForm > .el-form-item > .el-form-item__content {
  width: calc(100% - 120px);
}

.startDate > .el-form-item > .el-form-item__content {
  width: 95%;
}
.endDate > .el-form-item > .el-form-item__content {
  width: 95%;
}
.testCost > .el-form-item > .el-form-item__content {
  width: 100%;
}
.testVenue > .el-form-item > .el-form-item__content {
  width: 100%;
}
.el-border-bottom {
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}
@@ -627,4 +733,13 @@
.csjgxx > .el-form-item > .el-form-item__content {
  width: calc(100% - 130px);
}
.order-sc > .el-form-item > .el-form-item__content {
  width:100%;
}
.test-type-line-height>.el-form-item>.el-form-item__content{
  line-height: 30px;
}
.requireOther.el-input{
  position: absolute;
}
</style>