up

src/views/project/componens/info6.vue

@@ -6,9 +6,9 @@
     @change="change"
     @save="save"
   >
-    <el-form class="mt-20">
-      <div class="mt-20 ml-10">
-        <span class="title">年份:</span>
+    <el-form>
+      <div class="ml-10 text-left">
+        <span class="title full-width">年份:</span>
         <el-select v-model="selectYear" @change="changeYear">
           <el-option
             v-for="item in years"
@@ -41,7 +41,7 @@
             </th>
           </tr>
           <tr>
-            <th>累计投资</th>
+            <th style="width: 100px">累计投资</th>
             <th v-for="item in month">
               <el-input
                 class="th-input"
@@ -224,7 +224,6 @@ th {
   border: none;
 }
 
-
 :deep(.el-input__wrapper) {
   border: none;
   border-radius: revert;

src/views/project/componens/info7.vue

@@ -7,212 +7,221 @@
     @save="save"
   >
     <el-form class="mt-20" :disabled="disabled">
-      <div class="body_title">入库信息</div>
-      <!--    入库信息    -->
-      <div class="flex flex-center">
-        <el-form-item class="flex-child-average">
-          <div class="flex flex-center">
-            <span class="title">是否入库:</span>
-            <el-select
-              v-model="form.is_storage"
-              placeholder="是否入库"
-              style="width: 100%"
-            >
-              <el-option
-                v-for="item in yesOrNo"
-                :key="item.label"
-                :label="item.label"
-                :value="item.value"
+      <div class="body_title bold">入库信息</div>
+      <div class="flex flex-center flex-justify-start">
+        <!--    入库信息 1   -->
+        <div class="flex flex-col">
+          <el-form-item>
+            <div class="flex flex-center">
+              <span class="title">是否入库:</span>
+              <el-select
+                v-model="form.is_storage"
+                placeholder="是否入库"
+                class="wd"
+              >
+                <el-option
+                  v-for="item in yesOrNo"
+                  :key="item.label"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+          </el-form-item>
+          <el-form-item>
+            <div class="flex flex-center">
+              <span class="title">项目代码:</span>
+              <el-input
+                v-model="form.project_code"
+                placeholder="项目代码"
+                class="wd"
+              ></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item>
+            <div class="flex flex-center">
+              <span class="title">可研批复号:</span>
+              <el-input
+                v-model="form.available_approval_id"
+                placeholder="可研批复号"
+                class="wd"
+              ></el-input>
+            </div>
+          </el-form-item>
+        </div>
+        <!--    入库信息 2   -->
+        <div class="flex flex-col ml-20">
+          <el-form-item>
+            <div class="flex flex-center">
+              <span class="title1">计划入库时间:</span>
+              <el-date-picker
+                v-model="form.plan_storage_time"
+                type="date"
+                placeholder="计划入库时间"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                style="width: 260px"
               />
-            </el-select>
-          </div>
-        </el-form-item>
-        <el-form-item class="flex-child-average">
-          <div class="flex flex-center">
-            <span class="title">计划入库时间:</span>
-            <el-date-picker
-              v-model="form.plan_storage_time"
-              type="date"
-              placeholder="计划入库时间"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              style="width: 100%"
-            />
-          </div>
-        </el-form-item>
-        <el-form-item class="flex-child-average">
-          <div class="flex flex-center">
-            <span class="title">实际入库时间:</span>
-            <el-date-picker
-              v-model="form.storage_time"
-              type="date"
-              placeholder="实际入库时间"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              style="width: 100%"
-              @change="changeStorageTime"
-            />
-          </div>
-        </el-form-item>
+            </div>
+          </el-form-item>
+          <el-form-item>
+            <div class="flex flex-center">
+              <span class="title1">监管平台代码:</span>
+              <el-input
+                v-model="form.regulatory_platform_code"
+                placeholder="监管平台代码"
+                class="wd"
+              ></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item>
+            <div class="flex flex-center">
+              <span class="title1">可研批复时间:</span>
+              <el-date-picker
+                style="width: 260px"
+                v-model="form.available_approval_date"
+                type="date"
+                placeholder="可研批复时间"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+              />
+            </div>
+          </el-form-item>
+        </div>
+        <!--    入库信息 3   -->
+        <div class="flex flex-col ml-20">
+          <el-form-item>
+            <div class="flex flex-center">
+              <span class="title2">实际入库时间:</span>
+              <el-date-picker
+                v-model="form.storage_time"
+                type="date"
+                placeholder="实际入库时间"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                style="width: 100%"
+                @change="changeStorageTime"
+              />
+            </div>
+          </el-form-item>
+          <el-form-item>
+            <div class="flex flex-center">
+              <span class="title2">是否纳入省集中开工:</span>
+              <div class="full-width">
+                <el-select
+                  v-model="form.is_provincial_level_construction"
+                  placeholder="是否纳入省集中开工"
+                  class="full-width"
+                >
+                  <el-option
+                    v-for="item in yesOrNo"
+                    :key="item.label"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </div>
+            </div>
+          </el-form-item>
+          <el-form-item>
+            <div class="flex flex-center">
+              <span class="title2 nowrap">是否纳入省重点项目:</span>
+              <div class="full-width">
+                <el-select v-model="form.is_provincial_key" style="width: 100%">
+                  <el-option
+                    v-for="item in yesOrNo"
+                    :key="item.label"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </div>
+            </div>
+          </el-form-item>
+        </div>
       </div>
 
-      <!--      <div class="flex flex-justify-center green-bg">-->
-      <!--        <el-form-item class="flex-child-average">-->
-      <!--          <div class="flex flex-center">-->
-      <!--            <span class="title">项目代码:</span>-->
-      <!--            <el-input v-model="form.project_code"></el-input>-->
-      <!--          </div>-->
-      <!--        </el-form-item>-->
-      <!--        <el-form-item class="flex-child-average">-->
-      <!--          <div class="flex flex-center">-->
-      <!--            <span class="title">监管平台代码:</span>-->
-      <!--            <el-input v-model="form.regulatory_platform_code"></el-input>-->
-      <!--          </div>-->
-      <!--        </el-form-item>-->
-      <!--        <el-form-item class="flex-child-average">-->
-      <!--          <div class="flex flex-center">-->
-      <!--            <span class="title">是否纳入省重点项目:</span>-->
-      <!--            <div class="full-width">-->
-      <!--              <el-select-->
-      <!--                v-model="form.is_provincial_key"-->
-      <!--                placeholder="是否纳入省重点项目"-->
-      <!--                class="full-width"-->
-      <!--              >-->
-      <!--                <el-option-->
-      <!--                  v-for="item in yesOrNo"-->
-      <!--                  :key="item.label"-->
-      <!--                  :label="item.label"-->
-      <!--                  :value="item.value"-->
-      <!--                />-->
-      <!--              </el-select>-->
-      <!--            </div>-->
-      <!--          </div>-->
-      <!--        </el-form-item>-->
-      <!--      </div>-->
-
-      <!--      <div class="flex flex-justify-center">-->
-      <!--        <el-form-item class="flex-child-average">-->
-      <!--          <div class="flex flex-center">-->
-      <!--            <span class="title">可研批复号:</span>-->
-      <!--            <el-input v-model="form.available_approval_id"></el-input>-->
-      <!--          </div>-->
-      <!--        </el-form-item>-->
-      <!--        <el-form-item class="flex-child-average">-->
-      <!--          <div class="flex flex-center">-->
-      <!--            <span class="title">可研批复时间:</span>-->
-      <!--            <el-date-picker-->
-      <!--              v-model="form.available_approval_date"-->
-      <!--              type="date"-->
-      <!--              style="width: 100%"-->
-      <!--              placeholder="可研批复时间"-->
-      <!--              format="YYYY-MM-DD"-->
-      <!--              value-format="YYYY-MM-DD"-->
-      <!--            />-->
-      <!--          </div>-->
-      <!--        </el-form-item>-->
-      <!--        <el-form-item class="flex-child-average">-->
-      <!--          <div class="flex flex-center">-->
-      <!--            <span class="title">是否纳入省集中开工:</span>-->
-      <!--            <div class="full-width">-->
-      <!--              <el-select-->
-      <!--                v-model="form.is_provincial_level_construction"-->
-      <!--                placeholder="是否纳入省集中开工"-->
-      <!--                class="full-width"-->
-      <!--              >-->
-      <!--                <el-option-->
-      <!--                  v-for="item in yesOrNo"-->
-      <!--                  :key="item.label"-->
-      <!--                  :label="item.label"-->
-      <!--                  :value="item.value"-->
-      <!--                />-->
-      <!--              </el-select>-->
-      <!--            </div>-->
-      <!--          </div>-->
-      <!--        </el-form-item>-->
-      <!--      </div>-->
-
-      <!--      &lt;!&ndash;    开工信息    &ndash;&gt;-->
-      <!--      <div class="body_title start">开工信息</div>-->
-      <!--      <div class="flex flex-justify-center">-->
-      <!--        <el-form-item class="flex-child-average">-->
-      <!--          <div class="flex flex-center">-->
-      <!--            <span class="title">是否开工:</span>-->
-      <!--            <div class="full-width">-->
-      <!--              <el-select-->
-      <!--                v-model="form.is_start"-->
-      <!--                placeholder="是否开工"-->
-      <!--                class="full-width"-->
-      <!--              >-->
-      <!--                <el-option-->
-      <!--                  v-for="item in yesOrNo"-->
-      <!--                  :key="item.label"-->
-      <!--                  :label="item.label"-->
-      <!--                  :value="item.value"-->
-      <!--                />-->
-      <!--              </el-select>-->
-      <!--            </div>-->
-      <!--          </div>-->
-      <!--        </el-form-item>-->
-      <!--        <el-form-item class="flex-child-average">-->
-      <!--          <div class="flex flex-center">-->
-      <!--            <span class="title">计划开工时间:</span>-->
-      <!--            <el-date-picker-->
-      <!--              v-model="form.plan_commencement_time"-->
-      <!--              type="date"-->
-      <!--              style="width: 100%"-->
-      <!--              placeholder="计划开工时间"-->
-      <!--              format="YYYY-MM-DD"-->
-      <!--              value-format="YYYY-MM-DD"-->
-      <!--            />-->
-      <!--          </div>-->
-      <!--        </el-form-item>-->
-      <!--        <el-form-item class="flex-child-average">-->
-      <!--          <div class="flex flex-center">-->
-      <!--            <span class="title">实际开工时间:</span>-->
-      <!--            <el-date-picker-->
-      <!--              v-model="form.start_time"-->
-      <!--              type="date"-->
-      <!--              style="width: 100%"-->
-      <!--              placeholder="实际开工时间"-->
-      <!--              format="YYYY-MM-DD"-->
-      <!--              value-format="YYYY-MM-DD"-->
-      <!--              @change="changeStartTime"-->
-      <!--            />-->
-      <!--          </div>-->
-      <!--        </el-form-item>-->
-      <!--      </div>-->
-      <!--      <div class="flex flex-justify-center">-->
-      <!--        <el-form-item class="flex-child-average">-->
-      <!--          <div class="flex flex-center">-->
-      <!--            <span class="title">计划竣工时间:</span>-->
-      <!--            <el-date-picker-->
-      <!--              v-model="form.plan_completion_time"-->
-      <!--              type="date"-->
-      <!--              style="width: 100%"-->
-      <!--              placeholder="计划竣工时间"-->
-      <!--              format="YYYY-MM-DD"-->
-      <!--              value-format="YYYY-MM-DD"-->
-      <!--            />-->
-      <!--          </div>-->
-      <!--        </el-form-item>-->
-      <!--        <el-form-item class="flex-child-average">-->
-      <!--          <div class="flex flex-center">-->
-      <!--            <span class="title">实际竣工时间:</span>-->
-      <!--            <el-date-picker-->
-      <!--              v-model="form.completion_time"-->
-      <!--              type="date"-->
-      <!--              style="width: 100%"-->
-      <!--              placeholder="实际竣工时间"-->
-      <!--              format="YYYY-MM-DD"-->
-      <!--              value-format="YYYY-MM-DD"-->
-      <!--              @change="changeCompletionTime"-->
-      <!--            />-->
-      <!--          </div>-->
-      <!--        </el-form-item>-->
-      <!--        <el-form-item class="flex-child-average">-->
-      <!--          <div class="flex flex-center"></div>-->
-      <!--        </el-form-item>-->
-      <!--      </div>-->
+      <!--    开工信息    -->
+      <div class="body_title bold">开工信息</div>
+      <div class="flex flex-center flex-justify-start">
+        <div class="flex flex-col">
+          <el-form-item>
+            <div class="flex flex-center">
+              <span class="title">是否开工:</span>
+              <el-select
+                v-model="form.is_start"
+                placeholder="是否开工"
+                class="wd"
+              >
+                <el-option
+                  v-for="item in yesOrNo"
+                  :key="item.label"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+          </el-form-item>
+          <el-form-item>
+            <div class="flex flex-center">
+              <span class="title">计划竣工时间:</span>
+              <el-date-picker
+                v-model="form.plan_completion_time"
+                type="date"
+                style="width: 260px"
+                placeholder="计划竣工时间"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+              />
+            </div>
+          </el-form-item>
+        </div>
+        <div class="flex flex-col ml-20">
+          <el-form-item>
+            <div class="flex flex-center">
+              <span class="title">计划开工时间:</span>
+              <el-date-picker
+                v-model="form.plan_commencement_time"
+                type="date"
+                style="width: 260px"
+                placeholder="计划开工时间"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+              />
+            </div>
+          </el-form-item>
+          <el-form-item>
+            <div class="flex flex-center">
+              <span class="title">实际竣工时间:</span>
+              <el-date-picker
+                v-model="form.completion_time"
+                type="date"
+                style="width: 260px"
+                placeholder="实际竣工时间"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                @change="changeCompletionTime"
+              />
+            </div>
+          </el-form-item>
+        </div>
+        <div class="flex flex-col ml-20" style="margin-bottom: 46px">
+          <el-form-item>
+            <div class="flex flex-center">
+              <span class="title2">实际开工时间:</span>
+              <el-date-picker
+                v-model="form.start_time"
+                type="date"
+                style="width: 100%"
+                placeholder="实际开工时间"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                @change="changeStartTime"
+              />
+            </div>
+          </el-form-item>
+        </div>
+      </div>
     </el-form>
   </wt-card>
 </template>
@@ -343,17 +352,30 @@ export default {
   text-align: left;
 }
 
-.start {
-  margin-top: 20px;
+.title {
+  width: 110px;
+  text-align: right;
+  margin-right: 10px;
 }
 
-.title {
-  width: 150px;
-  margin-right: 15px;
+.title1 {
+  width: 110px;
+  text-align: right;
+  margin-right: 10px;
+}
+
+.title2 {
+  width: 200px;
+  text-align: right;
+  margin-right: 10px;
 }
 
 .title-textarea {
   width: 85px;
   text-align: left;
 }
+
+.wd {
+  width: 260px;
+}
 </style>