zhangzl
/
nsgk_mobile
2
0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
移动端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
673 提交
7 分支
79 MiB
 
 
目錄樹: 060df3fcac
分支列表 標籤
${ item.name }
建立分支 ${ searchTerm }
從 '060df3fcac'
${ noResults }
nsgk_mobile/src/views/sunVillage_info/informationDetail.vue

637 line
23 KiB
原始文件 Blame 歷史記錄 

  1.  <template>

  2.      <div class="home_wrapper">

  3.          <div class="header_main">

  4.              查看合同信息

  5.              <div class="return_btn" @click="onClickLeft"></div>

  6.          </div>

  7.        <van-form @submit="onSubmit">

  8.          <div class="list_main">

  9.            <div class="titBox">

  10.              <img src="../../assets/images/sunVillage_info/add_icon_1.png" style="width:22PX;height:22PX;margin-right: 10px;"/>

  11.              <p class="tit">合同信息</p>

  12.            </div>

  13.            <van-field readonly required v-model="form.code" label="合同编码" placeholder="合同编码" input-align="right" :border="false" />

  14.            <van-field readonly required v-model="form.name" label="合同名称" placeholder="合同名称" input-align="right" :border="false" />

  15. 

  16.            <van-field

  17.              readonly

  18.              clickable

  19.              label="合同类型"

  20.              placeholder="请选择"

  21.              v-model="assetType"

  22.              input-align="right"

  23.              right-icon="arrow-down"

  24.              label-width="auto"

  25.              required

  26.              :border="false"

  27.              :rules="[{ required: true , message:'请选择合同类型' }]"

  28.            />

  29.            <van-popup v-model="showAssetType" position="bottom">

  30.              <van-picker

  31.                show-toolbar

  32.                :columns="assetTypeOptions"

  33.                @confirm="onConfirmAssetType"

  34.                @cancel="showAssetType = false"

  35.              />

  36.            </van-popup>

  37. 

  38.            <van-field

  39.              readonly

  40.              clickable

  41.              label="合同来源"

  42.              placeholder="请选择"

  43.              v-model="contractionSource"

  44.              input-align="right"

  45.              right-icon="arrow-down"

  46.              label-width="auto"

  47.              required

  48.              :border="false"

  49.              :rules="[{ required: true , message:'请选择合同来源' }]"

  50.            />

  51.            <van-popup v-model="showContractionSource" position="bottom">

  52.              <van-picker

  53.                show-toolbar

  54.                :columns="contractionSourceOptions"

  55.                @confirm="onConfirmContractionSource"

  56.                @cancel="showContractionSource = false"

  57.              />

  58.            </van-popup>

  59.            <van-field readonly required v-model="form.firstParty" label="合同甲方" placeholder="合同甲方" input-align="right" :border="false" />

  60.            <van-field readonly v-model="form.firstPartyDirector" label="甲方代表" placeholder="甲方代表" input-align="right" :border="false" />

  61.            <van-field readonly v-model="form.firstPartyPhone" label="甲方电话" placeholder="甲方电话" input-align="right" :border="false" />

  62.            <van-field readonly required v-model="form.secondParty" label="合同乙方" placeholder="乙方名称" input-align="right" :border="false" />

  63.            <van-field readonly v-model="form.secondPartyDirector" label="乙方代表" placeholder="乙方代表" input-align="right" :border="false" />

  64.            <van-field readonly v-model="form.secondPartyPhone" label="乙方电话" placeholder="乙方电话" input-align="right" :border="false" />

  65. 

  66.            <van-field readonly v-model="form.secondPartyIdCard" label="乙方身份证号" placeholder="乙方身份证号" input-align="right" :border="false" />

  67. 

  68. 

  69.            <van-field

  70.              readonly

  71.              clickable

  72.              label="签订日期"

  73.              placeholder="请选择"

  74.              v-model="form.buildingTime"

  75.              input-align="right"

  76.              right-icon="arrow-down"

  77.              label-width="auto"

  78.              required

  79.              :border="false"

  80.            />

  81.            <van-popup v-model="showBuildingTime" position="bottom">

  82.              <van-datetime-picker

  83.                v-model="buildingTime"

  84.                type="date"

  85.                title="选择年月日"

  86.                @confirm="onConfirmBuildingTime"

  87.                @cancel="showBuildingTime = false"

  88.              />

  89.            </van-popup>

  90. 

  91.            <van-field

  92.              readonly

  93.              clickable

  94.              label="合同状态"

  95.              placeholder="请选择"

  96.              v-model="contractionStatus"

  97.              input-align="right"

  98.              right-icon="arrow-down"

  99.              label-width="auto"

  100.              required

  101.              :border="false"

  102.              :rules="[{ required: true , message:'请选择合同状态' }]"

  103.            />

  104.            <van-popup v-model="showContractionStatus" position="bottom">

  105.              <van-picker

  106.                show-toolbar

  107.                :columns="contractionStatusOptions"

  108.                @confirm="onConfirmContractionStatus"

  109.                @cancel="showContractionStatus = false"

  110.              />

  111.            </van-popup>

  112.            <van-field readonly v-model="form.remark" label="备注" placeholder="备注" input-align="right" :border="false" />

  113.          </div>

  114. 

  115.          <div class="list_main">

  116.            <div class="titBox">

  117.              <img src="../../assets/images/sunVillage_info/add_icon_1.png" style="width:22PX;height:22PX;margin-right: 10px;"/>

  118.              <p class="tit">合同约定</p>

  119.            </div>

  120.            <van-field

  121.              readonly

  122.              clickable

  123.              label="收付款类型"

  124.              placeholder="请选择"

  125.              v-model="collectionPay"

  126.              input-align="right"

  127.              right-icon="arrow-down"

  128.              label-width="auto"

  129.              required

  130.              :border="false"

  131.              :rules="[{ required: true , message:'请选择收付款类型' }]"

  132.            />

  133.            <van-popup v-model="showCollectionPay" position="bottom">

  134.              <van-picker

  135.                show-toolbar

  136.                :columns="collectionPayOptions"

  137.                @confirm="onConfirmCollectionPay"

  138.                @cancel="showCollectionPay = false"

  139.              />

  140.            </van-popup>

  141. 

  142.            <van-field

  143.              readonly

  144.              clickable

  145.              label="结款方式"

  146.              placeholder="请选择"

  147.              v-model="settleType"

  148.              input-align="right"

  149.              right-icon="arrow-down"

  150.              label-width="auto"

  151.              required

  152.              :border="false"

  153.              :rules="[{ required: true , message:'请选择结款方式' }]"

  154.            />

  155.            <van-popup v-model="showSettleType" position="bottom">

  156.              <van-picker

  157.                show-toolbar

  158.                :columns="settleTypeOptions"

  159.                @confirm="onConfirmSettleType"

  160.                @cancel="showSettleType = false"

  161.              />

  162.            </van-popup>

  163. 

  164.            <van-field

  165.              readonly

  166.              clickable

  167.              label="支付方式"

  168.              placeholder="请选择"

  169.              v-model="contractPaymentType"

  170.              input-align="right"

  171.              right-icon="arrow-down"

  172.              label-width="auto"

  173.              required

  174.              :border="false"

  175.              :rules="[{ required: true , message:'请选择支付方式' }]"

  176.            />

  177.            <van-popup v-model="showContractPaymentType" position="bottom">

  178.              <van-picker

  179.                show-toolbar

  180.                :columns="contractPaymentTypeOptions"

  181.                @confirm="onConfirmContractPaymentType"

  182.                @cancel="showContractPaymentType = false"

  183.              />

  184.            </van-popup>

  185. 

  186.            <van-field readonly v-model="form.contractObject" label="合同标的" placeholder="合同标的" input-align="right" :border="false" />

  187.            <van-field readonly v-model="form.num" label="标的数量" placeholder="标的数量" input-align="right" :border="false" />

  188. 

  189.            <van-field readonly v-model="form.unit" label="计量单位" placeholder="计量单位" input-align="right" :border="false" />

  190. 

  191.            <van-field

  192.              readonly

  193.              clickable

  194.              label="开始日期"

  195.              placeholder="请选择"

  196.              v-model="form.startTime"

  197.              input-align="right"

  198.              right-icon="arrow-down"

  199.              label-width="auto"

  200.              required

  201.              :border="false"

  202.              :rules="[{ required: true , message:'请选择开始日期' }]"

  203.            />

  204.            <van-popup v-model="showStartTime" position="bottom">

  205.              <van-datetime-picker

  206.                v-model="startTime"

  207.                type="date"

  208.                title="选择年月日"

  209.                @confirm="onConfirmStartTime"

  210.                @cancel="showStartTime = false"

  211.              />

  212.            </van-popup>

  213. 

  214.            <van-field

  215.              readonly

  216.              clickable

  217.              label="结束日期"

  218.              placeholder="请选择"

  219.              v-model="form.endTime"

  220.              input-align="right"

  221.              right-icon="arrow-down"

  222.              label-width="auto"

  223.              required

  224.              :border="false"

  225.              :rules="[{ required: true , message:'请选择开始日期' }]"

  226.            />

  227.            <van-popup v-model="showEndTime" position="bottom">

  228.              <van-datetime-picker

  229.                v-model="endTime"

  230.                type="date"

  231.                title="选择年月日"

  232.                @confirm="onConfirmEndTime"

  233.                @cancel="showEndTime = false"

  234.              />

  235.            </van-popup>

  236. 

  237. 

  238.            <van-field readonly v-model="form.contractYears" label="承包年限(年)" placeholder="承包年限(年)" input-align="right" :border="false" />

  239.            <van-field readonly required v-model="form.totalAmount" label="承包价款(元)" placeholder="承包价款(元)" input-align="right" :border="false" />

  240.            <van-field readonly required v-model="form.price" label="折合年均(元)" placeholder="折合年均(元)" input-align="right" :border="false" />

  241. 

  242.            <van-field readonly required v-model="form.receivedAmount" label="已结款(元)" placeholder="已结款(元)" input-align="right" :border="false" />

  243.            <van-field readonly v-model="form.settledAmount" label="下次结款(元)" placeholder="下次结款(元)" input-align="right" :border="false" />

  244. 

  245.          </div>

  246. 

  247.          <div class="list_main">

  248.            <div class="titBox">

  249.              <img src="../../assets/images/sunVillage_info/add_icon_2.png" style="width:22PX;height:22PX;margin-right: 10px;"/>

  250.              <p class="tit">村委情况</p>

  251.            </div>

  252.            <van-field readonly v-model="form.villageHead" label="村负责人" placeholder="村负责人" input-align="right" :border="false" />

  253.            <van-field readonly v-model="form.contractCustodian" label="合同保管人" placeholder="合同保管人" input-align="right" />

  254.            <van-field readonly v-model="form.villageRepsOpinion" label="村民代表意见" placeholder="村民代表意见" input-align="right" :border="false" />

  255. 

  256.            <van-field

  257.              readonly

  258.              clickable

  259.              label="会议时间"

  260.              placeholder="请选择"

  261.              v-model="form.meetingTime"

  262.              input-align="right"

  263.              right-icon="arrow-down"

  264.              label-width="auto"

  265.              :border="false"

  266.            />

  267.            <van-popup v-model="showMeetingTime" position="bottom">

  268.              <van-datetime-picker

  269.                v-model="meetingTime"

  270.                type="date"

  271.                title="选择年月日"

  272.                @confirm="onConfirmMeetingTime"

  273.                @cancel="showMeetingTime = false"

  274.              />

  275.            </van-popup>

  276.          </div>

  277. 

  278.          <div class="list_main">

  279.            <div class="titBox">

  280.              <img src="../../assets/images/sunVillage_info/add_icon_2.png" style="width:22PX;height:22PX;margin-right: 10px;"/>

  281.              <p class="tit">招标信息</p>

  282.            </div>

  283. <!--           <van-field required v-model="form.biddingWay" label="招标方式" placeholder="招标方式" input-align="right" :border="false" />-->

  284.            <van-field readonly v-model="form.itemId" label="项目编号" placeholder="项目编号" input-align="right" />

  285.            <van-field readonly v-model="form.itemName" label="项目名称" placeholder="项目名称" input-align="right" :border="false" />

  286.            <van-field readonly v-model="form.handleName" label="经办人" placeholder="经办人" input-align="right" :border="false" />

  287.            <van-field readonly v-model="form.budget" label="预算金额(元)" placeholder="预算金额(元)" input-align="right" :border="false" />

  288. 

  289.            <van-field

  290.              readonly

  291.              clickable

  292.              label="招标日期"

  293.              placeholder="请选择"

  294.              v-model="form.biddingDate"

  295.              input-align="right"

  296.              right-icon="arrow-down"

  297.              label-width="auto"

  298.              :border="false"

  299.            />

  300.            <van-popup v-model="showBiddingDate" position="bottom">

  301.              <van-datetime-picker

  302.                v-model="biddingDate"

  303.                type="date"

  304.                title="选择年月日"

  305.                @confirm="onConfirmBiddingDate"

  306.                @cancel="showBiddingDate = false"

  307.              />

  308.            </van-popup>

  309. 

  310.            <van-field

  311.              readonly

  312.              clickable

  313.              label="招标类型"

  314.              placeholder="请选择"

  315.              v-model="biddingType"

  316.              input-align="right"

  317.              right-icon="arrow-down"

  318.              label-width="auto"

  319.              :border="false"

  320.            />

  321.            <van-popup v-model="showBiddingType" position="bottom">

  322.              <van-picker

  323.                show-toolbar

  324.                :columns="biddingTypeOptions"

  325.                @confirm="onConfirmBiddingType"

  326.                @cancel="showBiddingType = false"

  327.              />

  328.            </van-popup>

  329.            <van-field readonly v-model="form.winBiddingCompany" label="中标单位" placeholder="中标单位" input-align="right" :border="false" />

  330.            <van-field readonly v-model="form.winBiddingPrice" label="中标金额(元)" placeholder="中标金额(元)" input-align="right" :border="false" />

  331.            <van-field readonly v-model="form.reviewer" label="审核人" placeholder="审核人" input-align="right" :border="false" />

  332. 

  333.            <van-field

  334.              readonly

  335.              clickable

  336.              label="审核时间"

  337.              placeholder="请选择"

  338.              v-model="form.reviewTime"

  339.              input-align="right"

  340.              right-icon="arrow-down"

  341.              label-width="auto"

  342.              :border="false"

  343.            />

  344.            <van-popup v-model="showReviewTime" position="bottom">

  345.              <van-datetime-picker

  346.                v-model="reviewTime"

  347.                type="date"

  348.                title="选择年月日"

  349.                @confirm="onConfirmReviewTime"

  350.                @cancel="showReviewTime = false"

  351.              />

  352.            </van-popup>

  353.          </div>

  354. 

  355. <!--         <div style="margin: 16px;">-->

  356. <!--           <van-button round block type="primary" native-type="submit">-->

  357. <!--             提交-->

  358. <!--           </van-button>-->

  359. <!--         </div>-->

  360.        </van-form>

  361.      </div>

  362.  </template>

  363.  <script>

  364.    import { getInfo } from "@/api/sunVillage_info/fixedAssets";

  365.    export default {

  366.      name: "certificateList",

  367.      data() {

  368.        return {

  369.          applicationList:[],

  370.          applicationListSecond:[],

  371.          assetStatusOptions:[],

  372.          auditStatus:[],

  373.          loading: false,

  374.          finished: false,

  375.          listLength:'0',

  376.          searchInput:'',

  377.          form:{

  378.            assetType:'1',

  379.            contractionSource:'1',

  380.            contractionStatus:'1',

  381.            collectionPay:'1',

  382.            settleType:'1',

  383.            contractPaymentType:'1',

  384.            biddingType:'',

  385.            startTime:this.format(new Date(),'yyyy-MM-dd'),

  386.            endTime:this.format(new Date(),'yyyy-MM-dd'),

  387.            meetingTime:this.format(new Date(),'yyyy-MM-dd'),

  388.            biddingDate:this.format(new Date(),'yyyy-MM-dd'),

  389.            reviewTime:this.format(new Date(),'yyyy-MM-dd'),

  390.            buildingTime:this.format(new Date(),'yyyy-MM-dd'),

  391.          },

  392.          queryParams:{

  393.            pageNum:1,

  394.            pageSize:10,

  395.            orderByColumn:'createTime',

  396.            isAsc:'desc',

  397.            name:'',

  398.          },

  399.          startTime:new Date(),

  400.          endTime:new Date(),

  401.          meetingTime:new Date(),

  402.          biddingDate:new Date(),

  403.          reviewTime:new Date(),

  404.          buildingTime:new Date(),

  405.          //合同类型

  406.          assetType:'农村土地承包合同类',

  407.          showAssetType:false,

  408.          assetTypeOptions:[],

  409.          //合同来源

  410.          contractionSource:'线下合同',

  411.          showContractionSource:false,

  412.          contractionSourceOptions:[],

  413.          //合同状态

  414.          contractionStatus:'正常',

  415.          showContractionStatus:false,

  416.          contractionStatusOptions:[],

  417.          //收付款类型

  418.          collectionPay:'收款',

  419.          showCollectionPay:false,

  420.          collectionPayOptions:[],

  421.          //结款方式

  422.          settleType:'一次性支付',

  423.          showSettleType:false,

  424.          settleTypeOptions:[],

  425.          //支付方式

  426.          contractPaymentType:'现金',

  427.          showContractPaymentType:false,

  428.          contractPaymentTypeOptions:[],

  429.          //支付方式

  430.          biddingType:'',

  431.          showBiddingType:false,

  432.          biddingTypeOptions:[],

  433. 

  434.          showStartTime:false,

  435.          showEndTime:false,

  436.          showMeetingTime:false,

  437.          showBiddingDate:false,

  438.          showReviewTime:false,

  439.          showBuildingTime:false,

  440.        };

  441.      },

  442.      created() {

  443.        this.houseGetDicts("type_of_contract").then((response) => {

  444.          this.assetTypeOptions = response.data;

  445.        });

  446.        this.houseGetDicts("contraction_source").then((response) => {

  447.          this.contractionSourceOptions = response.data;

  448.        });

  449.        this.houseGetDicts("contraction_status").then((response) => {

  450.          this.contractionStatusOptions = response.data;

  451.        });

  452.        this.houseGetDicts("collection_pay").then((response) => {

  453.          this.collectionPayOptions = response.data;

  454.        });

  455.        this.houseGetDicts("settle_type").then((response) => {

  456.          this.settleTypeOptions = response.data;

  457.        });

  458.        this.houseGetDicts("contract_payment_type").then((response) => {

  459.          this.contractPaymentTypeOptions = response.data;

  460.        });

  461.        this.houseGetDicts("bidding_types").then((response) => {

  462.          this.biddingTypeOptions = response.data;

  463.        });

  464.        this.getDetail(this.$route.query.id)

  465.      },

  466.      methods: {

  467.        getDetail(id){

  468.          setTimeout(() => {

  469.            getInfo(id).then(response => {

  470.              this.form = response.data;

  471. 

  472.              this.assetType = this.selectDictLabel(this.assetTypeOptions, response.data.assetType);

  473.              this.contractionSource = this.selectDictLabel(this.contractionSourceOptions, response.data.contractionSource);

  474.              this.contractionStatus = this.selectDictLabel(this.contractionStatusOptions, response.data.contractionStatus);

  475.              this.collectionPay = this.selectDictLabel(this.collectionPayOptions, response.data.collectionPay);

  476.              this.settleType = this.selectDictLabel(this.settleTypeOptions, response.data.settleType);

  477.              this.contractPaymentType = this.selectDictLabel(this.contractPaymentTypeOptions, response.data.contractPaymentType);

  478.              this.biddingType = this.selectDictLabel(this.biddingTypeOptions, response.data.biddingType);

  479.            });

  480.          }, 1000);

  481.        },

  482.        onConfirmAssetType(data){

  483.          this.assetType = data.text;

  484.          this.form.assetType = data.value;

  485.          this.showAssetType = false;

  486.        },

  487.        onConfirmContractionSource(data){

  488.          this.contractionSource = data.text;

  489.          this.form.contractionSource = data.value;

  490.          this.showContractionSource = false;

  491.        },

  492.        onConfirmContractionStatus(data){

  493.          this.contractionStatus = data.text;

  494.          this.form.contractionStatus = data.value;

  495.          this.showContractionStatus = false;

  496.        },

  497.        onConfirmCollectionPay(data){

  498.          this.collectionPay = data.text;

  499.          this.form.collectionPay = data.value;

  500.          this.showCollectionPay = false;

  501.        },

  502.        onConfirmSettleType(data){

  503.          this.settleType = data.text;

  504.          this.form.settleType = data.value;

  505.          this.showSettleType = false;

  506.        },

  507.        onConfirmContractPaymentType(data){

  508.          this.contractPaymentType = data.text;

  509.          this.form.contractPaymentType = data.value;

  510.          this.showContractPaymentType = false;

  511.        },

  512.        onConfirmBiddingType(data){

  513.          this.biddingType = data.text;

  514.          this.form.biddingType = data.value;

  515.          this.showBiddingType = false;

  516.        },

  517.        onConfirmStartTime(data){

  518.          this.form.startTime = this.format(data,'yyyy-MM-dd');

  519.          this.startTime = data;

  520.          this.showStartTime = false;

  521.        },

  522.        onConfirmEndTime(data){

  523.          this.form.endTime = this.format(data,'yyyy-MM-dd');

  524.          this.endTime = data;

  525.          this.showEndTime = false;

  526.        },

  527.        onConfirmMeetingTime(data){

  528.          this.form.meetingTime = this.format(data,'yyyy-MM-dd');

  529.          this.meetingTime = data;

  530.          this.showMeetingTime = false;

  531.        },

  532.        onConfirmBiddingDate(data){

  533.          this.form.biddingDate = this.format(data,'yyyy-MM-dd');

  534.          this.biddingDate = data;

  535.          this.showBiddingDate = false;

  536.        },

  537.        onConfirmReviewTime(data){

  538.          this.form.reviewTime = this.format(data,'yyyy-MM-dd');

  539.          this.reviewTime = data;

  540.          this.showReviewTime = false;

  541.        },

  542.        onConfirmBuildingTime(data){

  543.          this.form.buildingTime = this.format(data,'yyyy-MM-dd');

  544.          this.buildingTime = data;

  545.          this.showBuildingTime = false;

  546.        },

  547.        onSubmit(){

  548.          addInfo(this.form).then((response) => {

  549.            if (response.code == 200){

  550.              this.$notify({ type: 'success', message: '新增成功' });

  551.              setTimeout(function(){

  552.                history.back(-1);

  553.              },2000)

  554.            }

  555.          });

  556.        }

  557.      },

  558.    }

  559.  </script>

  560.  <style scoped lang="scss">

  561.   .home_wrapper{

  562.     background: #e9e9e9;

  563.     min-height: 100vh;

  564.     width: 100vw;

  565.     .header_main {

  566.         height: 116px;

  567.         background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;

  568.         background-size: 100% 100%;

  569.         position: fixed;

  570.         top: 0;

  571.         left: 0;

  572.         width: 100%;

  573.         font-size: 36px;

  574.         line-height: 116px;

  575.         text-align: center;

  576.         color: #fff;

  577.         position: relative;

  578. 

  579.         .return_btn {

  580.             width: 24px;

  581.             height: 43.2px;

  582.             background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;

  583.             background-size: 20px 36px;

  584.             position: absolute;

  585.             left: 38px;

  586.             top: 36px;

  587.         }

  588. 

  589.         .add_btn {

  590.             width: 56.4px;

  591.             height: 40.8px;

  592.             background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;

  593.             background-size: 47px 34px;

  594.             position: absolute;

  595.             right: 38px;

  596.             top: 36px;

  597.         }

  598.     }

  599.     .list_main{

  600.       padding:25px;

  601.       background: #ffffff;

  602.       width: 94%;

  603.       margin: 25px auto 0;

  604.       border-radius: 15PX;

  605.       box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);

  606.     }

  607.     .titBox{

  608.       display: flex;

  609.       align-items: center;

  610.     }

  611.     .tit{

  612.       font-size: 36px;

  613.       font-weight: bold;

  614.     }

  615.     /deep/ .van-cell{

  616.       padding-left: 0!important;

  617.       padding-right: 0!important;

  618.       padding-bottom: 0!important;

  619.     }

  620.     /deep/ .van-field__label{

  621.       padding-left: 10PX;

  622.       width: 8.2em;

  623.     }

  624.     /deep/ .van-cell--required::before{

  625.       left: 0;

  626.     }

  627. 

  628. }

  629. 

  630. 

  631. 

  632. 

  633. 

  634. 

  635. 

  636.  </style>