页面搭建

src/assets/styles/index.scss

@@ -4,7 +4,7 @@
 @import './element-ui.scss';
 @import './sidebar.scss';
 @import './btn.scss';
-
+@import "./style.scss";
 body {
   height: 100%;
   -moz-osx-font-smoothing: grayscale;

src/assets/styles/style.scss

@@ -0,0 +1,7 @@
+.flexc{display: flex;align-items: center;}
+.flexcc{display: flex;align-items: center;justify-content: center;}
+.flex1{flex: 1;}
+.flex0{flex: 0 0 auto;}
+.plr15{padding: 0 15px;}
+.mt22{margin-top: 22px;}
+.pt7{padding-top: 7px;}

src/layout/components/AppMain.vue

@@ -51,6 +51,7 @@ export default {
   width: 100%;
   position: relative;
   overflow: hidden;
+  background: #F7F8FC;
 }
 
 .app-main:has(.copyright) {

src/views/project/add.vue

@@ -0,0 +1,161 @@
+<template>
+  <div>
+
+    <div class="addbox">
+      <!-- 步骤条 -->
+      <div class="steps">
+        <div class="step" :class="{'finish':active>idx+1,'act':active==idx+1}" v-for="(ite,idx) in step" :key="idx" >
+          <div class="tit flexc"><span>{{idx+1}}</span>{{ite.tit}}
+            <div class="line"></div>
+
+          </div>
+          <div class="list" v-for="(aite,aidx) in ite.desc" :key="aidx">
+            <span class="cir"></span>{{aite.tit}}
+          </div>
+        </div>
+      </div>
+      <!-- 标签页 -->
+      <div class="tabs">
+        <!-- <div class="flex1" style="overflow: hidden;"> -->
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+              <el-tab-pane name="first">
+                <div slot="label" class="tab flexc">
+                  <img class="tabimg" v-if="activeName=='first'" src="@/assets/images/project/taba_.png"/>
+                  <img class="tabimg" v-else src="@/assets/images/project/taba.png"/>
+                  <span>签约环节(6)
+                  </span>
+                </div>
+                <first-info-form ref="firstInfo" :info="info"></first-info-form>
+              </el-tab-pane>
+              <el-tab-pane  name="second">
+                <div slot="label" class="tab flexc">
+                  <img class="tabimg" v-if="activeName=='second'" src="@/assets/images/project/tabb_.png"/>
+                  <img class="tabimg" v-else src="@/assets/images/project/tabb.png"/>
+                  <span>开工环节(2)
+                  </span>
+                </div>
+                <second-info-form ref="secondInfo" :info="info"></second-info-form>
+              </el-tab-pane>
+              <el-tab-pane  name="third">
+                <div slot="label" class="tab flexc">
+                  <img class="tabcimg" v-if="activeName=='third'" src="@/assets/images/project/tabc_.png"/>
+                  <img class="tabcimg" v-else src="@/assets/images/project/tabc.png"/>
+                  <span>建设环节(5)
+                  </span>
+                </div>
+                <third-info-form ref="thirdInfo" :info="info"></third-info-form>
+                </el-tab-pane>
+              <el-tab-pane  name="fourth">
+                <div slot="label" class="tab flexc">
+                  <img class="tabdimg" v-if="activeName=='fourth'" src="@/assets/images/project/tabd_.png"/>
+                  <img class="tabdimg" v-else src="@/assets/images/project/tabd.png"/>
+                  <span>投产环节(2)
+                  </span>
+                </div>
+                <fourth-info-form ref="fourthInfo" :info="info"></fourth-info-form>
+                </el-tab-pane>
+            </el-tabs>
+
+            <div class="btns flexcc">
+              <el-button type="success" size="small">审核</el-button>
+            </div>
+        <!-- </div> -->
+
+
+      </div>
+      <div class="flexcc pt7">
+          <el-button type="primary" plain>暂存</el-button>
+           <el-button type="primary" style="margin-left: 26px;">提交</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import firstInfoForm from "./firstInfoForm"
+  import secondInfoForm from "./secondInfoForm"
+  import thirdInfoForm from "./thirdInfoForm"
+  import fourthInfoForm from "./fourthInfoForm"
+  export default{
+    components:{
+      firstInfoForm,secondInfoForm,thirdInfoForm,fourthInfoForm
+    },
+    data() {
+      return{
+        active:2,
+        step:[
+          {tit:'立项',desc:[{tit:'新建'},{tit:'审核'}]},
+          {tit:'签约',desc:[{tit:'签约双方信息'},{tit:'签约项目信息'},{tit:'附件上传'}]},
+          {tit:'开工',desc:[{tit:'开工前相关手续办理'},{tit:'开工信息'},{tit:'附件上传'}]},
+          {tit:'建设',desc:[{tit:'建设信息'},{tit:'附件上传'}]},
+          {tit:'投产',desc:[{tit:'投产信息'},{tit:'附件上传'}]},
+          {tit:'完成',desc:[{tit:'提交'},{tit:'审核'}]},
+        ],
+        activeName:'first',
+        // 表详细信息
+        info: {}
+      }
+    },
+    methods:{
+      handleClick(){
+
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+::v-deep {
+  .el-button{padding: 8px 14px;font-size: 14px;}
+  .tabs{width: 100%;
+    .el-button--small{background-color: #00A854;}
+
+    .el-tabs__item{padding-right: 0;color: #666666;line-height: 45px;height: 45px;padding-left: 0;}
+    .el-tabs__active-bar{background: #2777D0;}
+    .is-active{color: #2777D0;font-weight: bold;}
+  }
+
+}
+.flex{display: flex;}
+.flexc{display: flex;align-items: center;}
+.flex1{flex: 1;}
+.addbox{padding: 14px 12px 25px;
+  .steps{background: #FFFFFF;border-radius: 4px;padding: 30px 60px 24px 85px;display: flex;
+    .step{flex-basis: 50%;position: relative;
+      &.finish,&.act{
+        .tit{color: #3D455B;
+          span{background: #1890FF;color: #FFFFFF;border: none;}
+
+        }
+      }
+      &.finish{
+         .line{background-color: #1890FF !important;}
+         .list{
+           .cir{background: #00A854;}
+         }
+      }
+      &:last-child{
+        .line{display: none !important;}
+      }
+      .tit{font-weight: bold;font-size: 16px;color: #666666;margin-bottom: 10px;
+        span{width: 24px;height: 24px;background: #FFFFFF;border-radius: 50%;border: 1px solid #DADADA;font-weight: bold;display: flex;align-items: center;justify-content: center;flex: 0 0 auto;
+font-size: 14px;color: #AAAAAA;margin-right: 12px;}
+        .line{height: 2px;margin-left: 18px;margin-right: 18px;flex: 1;
+
+background: #E6E6E6;}
+      }
+    }
+    .list{font-weight: 500;font-size: 12px;color: #9B9B9B;line-height: 24px;padding-left: 8px;
+      .cir{width: 8px;height: 8px;background: #BFBFBF;border-radius: 50%;display: inline-block;margin-right: 8px;}
+    }
+  }
+}
+.tabs{position: relative;
+  .tab{padding: 0 21px;}
+  .tabimg{width: 14px;height: 14px;margin-right: 8px;}
+  .tabcimg{width: 13px;height: 13px;margin-right: 9px;}
+  .tabdimg{width: 14px;height: 15px;margin-right: 8px;}
+  .btns{height: 45px;border-bottom: 2px solid #dfe4ed;box-sizing: border-box;position: absolute;right: 0;top: 0;
+  }
+}
+</style>

src/views/project/firstInfoForm.vue

@@ -0,0 +1,290 @@
+<template>
+  <div>
+    <el-form ref="basicInfoForm" label-position="top" :model="info" :rules="rules" label-width="150px">
+      <div class="fomebox">
+        <div class="ftop flexc">
+          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
+          <div class="flex1 tit">签约双方信息</div>
+          <el-button type="primary" plain>保存</el-button>
+        </div>
+        <div class="rowbox">
+          <el-row  :gutter="22">
+            <el-col :span="6">
+              <el-form-item label="项目编号" prop="tableName">
+                <el-input disabled placeholder="内容提交后自动生成" v-model="info.tableName" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="18">
+              <el-form-item label="项目名称" prop="tableComment">
+                <el-input placeholder="输入项目名称" v-model="info.tableComment" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="投资方" prop="className">
+                <el-input placeholder="输入投资方名称" v-model="info.className" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="属地政府" prop="functionAuthor">
+                <el-input placeholder="输入属地政府名称" v-model="info.functionAuthor" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="签约日期" prop="remark">
+                <el-date-picker
+                      v-model="value1"
+                      type="date"
+                      placeholder="年 / 月 / 日">
+                    </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <div class="fomebox">
+        <div class="ftop flexc">
+          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
+          <div class="flex1 tit">签约项目信息</div>
+          <el-button type="primary" plain>保存</el-button>
+        </div>
+        <div class="ftab flexc">
+          <div class="line"></div>投资企业信息
+        </div>
+        <div class="rowbox">
+          <el-row :gutter="22">
+            <el-col :span="6">
+              <el-form-item label="总投资额(万元)" prop="tableName">
+                <el-input placeholder="输入总投资额" v-model="info.tableName" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="固定资产投资额(万元)" prop="tableComment">
+                <el-input placeholder="输入固定资产投资额" v-model="info.tableComment" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="22">
+            <el-col :span="6">
+              <el-form-item label="企业注册时间" prop="remark">
+                <el-date-picker
+                      v-model="value1"
+                      type="date"
+                      placeholder="年 / 月 / 日">
+                    </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="注册资金(万元)" prop="tableComment">
+                <el-input placeholder="输入注册资金" v-model="info.tableComment" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="投资方联系人" prop="tableComment">
+                <el-input placeholder="输入投资方联系人姓名" v-model="info.tableComment" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="投资方联系方式" prop="tableComment">
+                <el-input placeholder="输入投资方联系方式" v-model="info.tableComment" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="22">
+            <el-col :span="24">
+              <el-form-item label="投资企业背景" prop="tableComment">
+                <el-input type="textarea" placeholder="输入投资企业背景…" v-model="info.tableComment"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+        <div class="ftab flexc">
+          <div class="line"></div>用地情况
+        </div>
+        <div class="rowbox">
+          <el-row :gutter="22">
+            <el-col :span="6">
+              <el-form-item label="供地面积(亩)" prop="tableName">
+                <el-input placeholder="输入供地面积" v-model="info.tableName" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="租赁厂房面积(平)" prop="tableComment">
+                <el-input placeholder="输入租赁厂房面积" v-model="info.tableComment" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="流转土地面积(亩)" prop="tableComment">
+                <el-input placeholder="输入流转土地面积" v-model="info.tableComment" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+        <div class="ftab flexc">
+          <div class="line"></div>其他信息
+        </div>
+        <div class="rowbox">
+          <el-row :gutter="22">
+            <el-col :span="6">
+              <el-form-item label="亩均投资强度(万元 / 亩)" prop="tableName">
+                <el-input placeholder="输入亩均投资强度" v-model="info.tableName" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="亩均收入(万元)" prop="tableComment">
+                <el-input placeholder="输入亩均收入" v-model="info.tableComment" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="预计年产值(万元)" prop="tableComment">
+                <el-input placeholder="输入预计年产值" v-model="info.tableComment" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="预计利税(万元)" prop="tableComment">
+                <el-input placeholder="输入预计利税" v-model="info.tableComment" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="投资回收周期(年)" prop="tableComment">
+                <el-input placeholder="输入投资回收周期" v-model="info.tableComment" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="18">
+              <el-form-item label="建设内容" prop="tableComment">
+                <el-select v-model="value" placeholder="选择建设内容">
+                    <el-option
+                      v-for="item in options"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value">
+                    </el-option>
+                  </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <div class="fomebox">
+        <div class="ftop flexc">
+          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
+          <div class="flex1 tit">上传附件</div>
+          <el-button type="primary" plain>保存</el-button>
+        </div>
+        <div class="rowbox">
+            <el-table  :data="tableData" border style="width: 100%;margin-bottom: 15px;">
+                <el-table-column align="center" prop="fjlx" label="附件类型"  width="20%"> </el-table-column>
+                <el-table-column align="center" prop="name" label="文件名称"  width="20%"> </el-table-column>
+                <el-table-column align="center" prop="dx" label="附件大小"  width="15%"> </el-table-column>
+                <el-table-column align="center" prop="time" label="上传时间"  width="15%"> </el-table-column>
+                <el-table-column align="center" label="操作" width="30%">
+                  <template slot-scope="scope">
+                   <div class="flexcc">
+                     <div class="btna flexc coa">
+                       <div class="imgs">
+                         <img class="imga" src="@/assets/images/project/upa.png"/>
+                       </div>上传
+                     </div>
+                     <div class="btna flexc cob">
+                       <div class="imgs">
+                         <img class="imgb" src="@/assets/images/project/upb.png"/>
+                       </div>预览
+                     </div>
+                     <div class="btna flexc coc">
+                       <div class="imgs">
+                         <img class="imga" src="@/assets/images/project/upc.png"/>
+                       </div>下载
+                     </div>
+                     <div class="btna flexc cod">
+                       <div class="imgs">
+                         <img class="imgc" src="@/assets/images/project/upd.png"/>
+                       </div>删除
+                     </div>
+                   </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+        </div>
+      </div>
+    </el-form>
+  </div>
+
+</template>
+
+<script>
+export default {
+  props: {
+    info: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      value:'',
+      value1:'',
+      options: [{
+                value: '选项1',
+                label: '黄金糕'
+              }, {
+                value: '选项2',
+                label: '双皮奶'
+              }],
+      tableData: [{
+                fjlx: '项目可行性研究报告',
+                name: '项目可行性研究报告.pdf',
+                dx: '11.8 MB',
+                time: '2025-06-16 16:57',
+      }],
+      rules: {
+        // tableName: [
+        //   { required: true, message: "请输入表名称", trigger: "blur" }
+        // ],
+        // tableComment: [
+        //   { required: true, message: "请输入表描述", trigger: "blur" }
+        // ],
+        // className: [
+        //   { required: true, message: "请输入实体类名称", trigger: "blur" }
+        // ],
+        // functionAuthor: [
+        //   { required: true, message: "请输入作者", trigger: "blur" }
+        // ]
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep {
+  .fomebox{
+    .el-button--primary{font-size: 14px;padding: 8px 14px;}
+    .el-form-item__label{padding-bottom: 0;line-height: 38px;}
+    .el-form-item{margin-bottom: 15px;}
+    .el-input__inner{height: 40px;line-height: 40px;}
+    .el-date-editor.el-input{width: 100%;}
+    .el-select{width: 100%;}
+    table{width: 100% !important;}
+   }
+}
+.fomebox{background: #FFFFFF;margin-bottom: 15px;border-radius: 4px;
+  .ftop{padding: 10px 17px 10px 16px;border-bottom: 1px solid #E6E6E6;
+    .timg{width: 20px;height: 20px;margin-right: 13px;}
+    .tit{font-weight: bold;font-size: 16px;color: #222838;}
+  }
+  .rowbox{padding: 10px 15px 9px;}
+  .ftab{font-weight: bold;font-size: 14px;color: #2777D0;padding: 24px 16px 7px;
+    .line{width: 6px;margin-right: 9px;height: 20px;background: #2777D0;}
+  }
+  .btna{font-weight: 500;font-size: 14px;padding: 0 13px;
+    .imgs{width: 15px;height: 15px;display: flex;align-items: center;justify-content: center;margin-right: 7px;
+      .imga{width: 13px;height: 14px;}
+      .imgb{width: 14px;height: 14px;}
+      .imgc{width: 15px;height: 15px;}
+      .imgd{width: 13px;height: 14px;}
+    }
+    &.coa{color: #1890FF;}
+    &.cob{color: #FE7F0E;}
+    &.coc{color: #00A854;}
+    &.cod{color: #F25858;}
+  }
+}
+</style>

src/views/project/fourthInfoForm.vue

@@ -0,0 +1,177 @@
+<template>
+  <div>
+    <el-form ref="basicInfoForm" label-position="top" :model="info" :rules="rules" label-width="150px">
+      <div class="fomebox">
+        <div class="ftop flexc">
+          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
+          <div class="flex1 tit">投产信息</div>
+          <el-button type="primary" plain>保存</el-button>
+        </div>
+        <div class="rowbox">
+          <el-row  :gutter="22">
+            <el-col :span="6">
+              <el-form-item label="投产时间" prop="remark">
+                <el-date-picker
+                      v-model="value1"
+                      type="date"
+                      placeholder="年 / 月 / 日">
+                    </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="入规时间" prop="remark">
+                <el-date-picker
+                      v-model="value1"
+                      type="date"
+                      placeholder="年 / 月 / 日">
+                    </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="本年度累计产值(万元)" prop="tableName">
+                <el-input  placeholder="请输入本年度累计产值" v-model="info.tableName" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="18">
+              <el-form-item label="本会计年度实缴税收(万元)" prop="tableComment">
+                <el-input placeholder="请输入本会计年度实缴税收" v-model="info.tableComment" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="累计用电(万千瓦时)" prop="className">
+                <el-input placeholder="请输入累计用电" v-model="info.className" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="万元产值能耗(吨/万元)" prop="functionAuthor">
+                <el-input placeholder="请输入万元产值能耗" v-model="info.functionAuthor" />
+              </el-form-item>
+            </el-col>
+            
+          </el-row>
+        </div>
+      </div>
+      <div class="fomebox">
+        <div class="ftop flexc">
+          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
+          <div class="flex1 tit">上传附件</div>
+          <el-button type="primary" plain>保存</el-button>
+        </div>
+        <div class="rowbox">
+            <el-table  :data="tableData" border style="width: 100%;margin-bottom: 15px;">
+                <el-table-column align="center" prop="fjlx" label="附件类型"  width="20%"> </el-table-column>
+                <el-table-column align="center" prop="name" label="文件名称"  width="20%"> </el-table-column>
+                <el-table-column align="center" prop="dx" label="附件大小"  width="15%"> </el-table-column>
+                <el-table-column align="center" prop="time" label="上传时间"  width="15%"> </el-table-column>
+                <el-table-column align="center" label="操作" width="30%">
+                  <template slot-scope="scope">
+                   <div class="flexcc">
+                     <div class="btna flexc coa">
+                       <div class="imgs">
+                         <img class="imga" src="@/assets/images/project/upa.png"/>
+                       </div>上传
+                     </div>
+                     <div class="btna flexc cob">
+                       <div class="imgs">
+                         <img class="imgb" src="@/assets/images/project/upb.png"/>
+                       </div>预览
+                     </div>
+                     <div class="btna flexc coc">
+                       <div class="imgs">
+                         <img class="imga" src="@/assets/images/project/upc.png"/>
+                       </div>下载
+                     </div>
+                     <div class="btna flexc cod">
+                       <div class="imgs">
+                         <img class="imgc" src="@/assets/images/project/upd.png"/>
+                       </div>删除
+                     </div>
+                   </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+        </div>
+      </div>
+    </el-form>
+  </div>
+
+</template>
+
+<script>
+export default {
+  props: {
+    info: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      value:'',
+      value1:'',
+      options: [{
+                value: '选项1',
+                label: '黄金糕'
+              }, {
+                value: '选项2',
+                label: '双皮奶'
+              }],
+      tableData: [{
+                fjlx: '项目可行性研究报告',
+                name: '项目可行性研究报告.pdf',
+                dx: '11.8 MB',
+                time: '2025-06-16 16:57',
+      }],
+      rules: {
+        // tableName: [
+        //   { required: true, message: "请输入表名称", trigger: "blur" }
+        // ],
+        // tableComment: [
+        //   { required: true, message: "请输入表描述", trigger: "blur" }
+        // ],
+        // className: [
+        //   { required: true, message: "请输入实体类名称", trigger: "blur" }
+        // ],
+        // functionAuthor: [
+        //   { required: true, message: "请输入作者", trigger: "blur" }
+        // ]
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep {
+  .fomebox{
+    .el-button--primary{font-size: 14px;padding: 8px 14px;}
+    .el-form-item__label{padding-bottom: 0;line-height: 38px;}
+    .el-form-item{margin-bottom: 15px;}
+    .el-input__inner{height: 40px;line-height: 40px;}
+    .el-date-editor.el-input{width: 100%;}
+    .el-select{width: 100%;}
+    table{width: 100% !important;}
+   }
+}
+.fomebox{background: #FFFFFF;margin-bottom: 15px;border-radius: 4px;
+  .ftop{padding: 10px 17px 10px 16px;border-bottom: 1px solid #E6E6E6;
+    .timg{width: 20px;height: 20px;margin-right: 13px;}
+    .tit{font-weight: bold;font-size: 16px;color: #222838;}
+  }
+  .rowbox{padding: 10px 15px 9px;}
+  .ftab{font-weight: bold;font-size: 14px;color: #2777D0;padding: 24px 16px 7px;
+    .line{width: 6px;margin-right: 9px;height: 20px;background: #2777D0;}
+  }
+  .btna{font-weight: 500;font-size: 14px;padding: 0 13px;
+    .imgs{width: 15px;height: 15px;display: flex;align-items: center;justify-content: center;margin-right: 7px;
+      .imga{width: 13px;height: 14px;}
+      .imgb{width: 14px;height: 14px;}
+      .imgc{width: 15px;height: 15px;}
+      .imgd{width: 13px;height: 14px;}
+    }
+    &.coa{color: #1890FF;}
+    &.cob{color: #FE7F0E;}
+    &.coc{color: #00A854;}
+    &.cod{color: #F25858;}
+  }
+}
+</style>

src/views/project/list.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <!-- 步骤条 -->
+
+  </div>
+</template>
+
+<script>
+  export default{
+    data() {
+      return{
+
+      }
+    },
+    methods:{
+
+    }
+  }
+</script>
+
+<style lang="scss">
+</style>

src/views/project/secondInfoForm.vue

@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <el-form ref="basicInfoForm" label-position="top" :model="info" :rules="rules" label-width="150px">
+      <div class="fomebox">
+        <div class="ftop flexc">
+          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
+          <div class="flex1 tit">开工前相关手续办理情况</div>
+          <el-button type="primary" plain>保存</el-button>
+        </div>
+        <div class="rowbox">
+          <el-row  :gutter="22">
+            <el-col :span="6">
+              <el-form-item label="建设用地规划许可证取得时间" prop="remark">
+                <el-date-picker
+                      v-model="value1"
+                      type="date"
+                      placeholder="年 / 月 / 日">
+                    </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="土地摘牌时间" prop="remark">
+                <el-date-picker
+                      v-model="value1"
+                      type="date"
+                      placeholder="年 / 月 / 日">
+                    </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="环评批复时间" prop="remark">
+                <el-date-picker
+                      v-model="value1"
+                      type="date"
+                      placeholder="年 / 月 / 日">
+                    </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <div class="fomebox">
+        <div class="ftop flexc">
+          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
+          <div class="flex1 tit">开工信息</div>
+          <el-button type="primary" plain>保存</el-button>
+        </div>
+        <div class="rowbox">
+          <el-row  :gutter="22">
+            <el-col :span="6">
+              <el-form-item label="施工许可证办理时间" prop="remark">
+                <el-date-picker
+                      v-model="value1"
+                      type="date"
+                      placeholder="年 / 月 / 日">
+                    </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="开工时间" prop="remark">
+                <el-date-picker
+                      v-model="value1"
+                      type="date"
+                      placeholder="年 / 月 / 日">
+                    </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <div class="fomebox">
+        <div class="ftop flexc">
+          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
+          <div class="flex1 tit">上传附件</div>
+          <el-button type="primary" plain>保存</el-button>
+        </div>
+        <div class="rowbox">
+            <el-table  :data="tableData" border style="width: 100%;margin-bottom: 15px;">
+                <el-table-column align="center" prop="fjlx" label="附件类型"  width="20%"> </el-table-column>
+                <el-table-column align="center" prop="name" label="文件名称"  width="20%"> </el-table-column>
+                <el-table-column align="center" prop="dx" label="附件大小"  width="15%"> </el-table-column>
+                <el-table-column align="center" prop="time" label="上传时间"  width="15%"> </el-table-column>
+                <el-table-column align="center" label="操作" width="30%">
+                  <template slot-scope="scope">
+                   <div class="flexcc">
+                     <div class="btna flexc coa">
+                       <div class="imgs">
+                         <img class="imga" src="@/assets/images/project/upa.png"/>
+                       </div>上传
+                     </div>
+                     <div class="btna flexc cob">
+                       <div class="imgs">
+                         <img class="imgb" src="@/assets/images/project/upb.png"/>
+                       </div>预览
+                     </div>
+                     <div class="btna flexc coc">
+                       <div class="imgs">
+                         <img class="imga" src="@/assets/images/project/upc.png"/>
+                       </div>下载
+                     </div>
+                     <div class="btna flexc cod">
+                       <div class="imgs">
+                         <img class="imgc" src="@/assets/images/project/upd.png"/>
+                       </div>删除
+                     </div>
+                   </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+        </div>
+      </div>
+    </el-form>
+  </div>
+
+</template>
+
+<script>
+export default {
+  props: {
+    info: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      value:'',
+      value1:'',
+      options: [{
+                value: '选项1',
+                label: '黄金糕'
+              }, {
+                value: '选项2',
+                label: '双皮奶'
+              }],
+      tableData: [{
+                fjlx: '项目可行性研究报告',
+                name: '项目可行性研究报告.pdf',
+                dx: '11.8 MB',
+                time: '2025-06-16 16:57',
+      }],
+      rules: {
+        // tableName: [
+        //   { required: true, message: "请输入表名称", trigger: "blur" }
+        // ],
+        // tableComment: [
+        //   { required: true, message: "请输入表描述", trigger: "blur" }
+        // ],
+        // className: [
+        //   { required: true, message: "请输入实体类名称", trigger: "blur" }
+        // ],
+        // functionAuthor: [
+        //   { required: true, message: "请输入作者", trigger: "blur" }
+        // ]
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep {
+  .fomebox{
+    .el-button--primary{font-size: 14px;padding: 8px 14px;}
+    .el-form-item__label{padding-bottom: 0;line-height: 38px;}
+    .el-form-item{margin-bottom: 15px;}
+    .el-input__inner{height: 40px;line-height: 40px;}
+    .el-date-editor.el-input{width: 100%;}
+    .el-select{width: 100%;}
+    table{width: 100% !important;}
+   }
+}
+.fomebox{background: #FFFFFF;margin-bottom: 15px;border-radius: 4px;
+  .ftop{padding: 10px 17px 10px 16px;border-bottom: 1px solid #E6E6E6;
+    .timg{width: 20px;height: 20px;margin-right: 13px;}
+    .tit{font-weight: bold;font-size: 16px;color: #222838;}
+  }
+  .rowbox{padding: 10px 15px 9px;}
+  .ftab{font-weight: bold;font-size: 14px;color: #2777D0;padding: 24px 16px 7px;
+    .line{width: 6px;margin-right: 9px;height: 20px;background: #2777D0;}
+  }
+  .btna{font-weight: 500;font-size: 14px;padding: 0 13px;
+    .imgs{width: 15px;height: 15px;display: flex;align-items: center;justify-content: center;margin-right: 7px;
+      .imga{width: 13px;height: 14px;}
+      .imgb{width: 14px;height: 14px;}
+      .imgc{width: 15px;height: 15px;}
+      .imgd{width: 13px;height: 14px;}
+    }
+    &.coa{color: #1890FF;}
+    &.cob{color: #FE7F0E;}
+    &.coc{color: #00A854;}
+    &.cod{color: #F25858;}
+  }
+}
+</style>

src/views/project/thirdInfoForm.vue

@@ -0,0 +1,250 @@
+<template>
+  <div>
+    <el-form ref="basicInfoForm" label-position="top" :model="info" :rules="rules" label-width="150px">
+      <div class="fomebox">
+        <div class="ftop flexc">
+          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
+          <div class="flex1 tit">建设信息</div>
+          <el-button type="primary" plain>保存</el-button>
+        </div>
+        <div class="rowbox">
+          <el-row  :gutter="22">
+            <el-col :span="6">
+              <el-form-item label="竣工时间" prop="remark">
+                <el-date-picker
+                      v-model="value1"
+                      type="date"
+                      placeholder="年 / 月 / 日">
+                    </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="入统时间" prop="remark">
+                <el-date-picker
+                      v-model="value1"
+                      type="date"
+                      placeholder="年 / 月 / 日">
+                    </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="土地出让金总额(万元)" prop="tableName">
+                <el-input placeholder="请输入土地出让金总额" v-model="info.tableName" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="18">
+              <el-form-item label="厂房投入金额(万元)" prop="tableComment">
+                <el-input placeholder="请输入厂房投入金额" v-model="info.tableComment" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="设备清单金额(万元)" prop="className">
+                <el-input placeholder="请输入设备清单金额" v-model="info.className" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="发票金额(万元)" prop="functionAuthor">
+                <el-input placeholder="请输入发票金额" v-model="info.functionAuthor" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="设备合同金额(万元)" prop="functionAuthor">
+                <el-input placeholder="请输入设备合同金额" v-model="info.functionAuthor" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <div class="fomebox">
+        <div class="ftop flexc">
+          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
+          <div class="flex1 tit">建设进度跟踪</div>
+          <el-button type="primary" plain>保存</el-button>
+        </div>
+        <div class="rowbox">
+          <el-row :gutter="22">
+            <el-col :span="6">
+              <el-form-item label="建设周期" prop="remark">
+                <el-input v-model="input" placeholder="请输入建设周期">
+                  <span slot="suffix" class="txt">月</span>
+                  <i slot="suffix" class="el-input__icon el-icon-arrow-down"></i>
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+        <div class="ftab flexc" style="padding-top: 0;">
+          <div class="line"></div>每月项目建设进展情况
+          <div class="flex1"></div>
+          <el-button type="success" class="upbox" plain>
+            <img src="@/assets/images/project/upe.png"/>
+            上传建设进度
+          </el-button>
+        </div>
+        <div class="rowbox" style="width: 100%;overflow: hidden;">
+            <el-table height="213"  :data="tableData" border style="width: 100%;margin-bottom: 15px;">
+                <el-table-column align="center" prop="fjlx" label="建设进展情况"  width="200"> </el-table-column>
+                <el-table-column align="center" prop="name" label="存在的问题"  width="200"> </el-table-column>
+                <el-table-column align="center" prop="dx" label="建设照片"  width="200"> </el-table-column>
+                <el-table-column align="center" prop="time" label="上传时间"  width="200"> </el-table-column>
+                <el-table-column align="center" label="操作" width="500">
+                  <template slot-scope="scope">
+                   <div class="flexcc">
+                     <div class="btna flexc coa">
+                       <div class="imgs">
+                         <img class="imga" src="@/assets/images/project/upa.png"/>
+                       </div>上传
+                     </div>
+                     <div class="btna flexc cob">
+                       <div class="imgs">
+                         <img class="imgb" src="@/assets/images/project/upb.png"/>
+                       </div>预览
+                     </div>
+                     <div class="btna flexc coc">
+                       <div class="imgs">
+                         <img class="imga" src="@/assets/images/project/upc.png"/>
+                       </div>下载
+                     </div>
+                     <div class="btna flexc cod">
+                       <div class="imgs">
+                         <img class="imgc" src="@/assets/images/project/upd.png"/>
+                       </div>删除
+                     </div>
+                   </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+        </div>
+      </div>
+
+      <div class="fomebox">
+        <div class="ftop flexc">
+          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
+          <div class="flex1 tit">上传附件</div>
+          <el-button type="primary" plain>保存</el-button>
+        </div>
+        <div class="rowbox">
+            <el-table  :data="tableData" border style="width: 100%;margin-bottom: 15px;">
+                <el-table-column align="center" prop="fjlx" label="附件类型"  width="20%"> </el-table-column>
+                <el-table-column align="center" prop="name" label="文件名称"  width="20%"> </el-table-column>
+                <el-table-column align="center" prop="dx" label="附件大小"  width="15%"> </el-table-column>
+                <el-table-column align="center" prop="time" label="上传时间"  width="15%"> </el-table-column>
+                <el-table-column align="center" label="操作" width="30%">
+                  <template slot-scope="scope">
+                   <div class="flexcc">
+                     <div class="btna flexc coa">
+                       <div class="imgs">
+                         <img class="imga" src="@/assets/images/project/upa.png"/>
+                       </div>上传
+                     </div>
+                     <div class="btna flexc cob">
+                       <div class="imgs">
+                         <img class="imgb" src="@/assets/images/project/upb.png"/>
+                       </div>预览
+                     </div>
+                     <div class="btna flexc coc">
+                       <div class="imgs">
+                         <img class="imga" src="@/assets/images/project/upc.png"/>
+                       </div>下载
+                     </div>
+                     <div class="btna flexc cod">
+                       <div class="imgs">
+                         <img class="imgc" src="@/assets/images/project/upd.png"/>
+                       </div>删除
+                     </div>
+                   </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+        </div>
+      </div>
+    </el-form>
+  </div>
+
+</template>
+
+<script>
+export default {
+  props: {
+    info: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      value:'',
+      value1:'',
+      options: [{
+                value: '选项1',
+                label: '黄金糕'
+              }, {
+                value: '选项2',
+                label: '双皮奶'
+              }],
+      tableData: [{
+                fjlx: '项目可行性研究报告',
+                name: '项目可行性研究报告.pdf',
+                dx: '11.8 MB',
+                time: '2025-06-16 16:57',
+      }],
+      rules: {
+        // tableName: [
+        //   { required: true, message: "请输入表名称", trigger: "blur" }
+        // ],
+        // tableComment: [
+        //   { required: true, message: "请输入表描述", trigger: "blur" }
+        // ],
+        // className: [
+        //   { required: true, message: "请输入实体类名称", trigger: "blur" }
+        // ],
+        // functionAuthor: [
+        //   { required: true, message: "请输入作者", trigger: "blur" }
+        // ]
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep {
+  .fomebox{
+    .el-button--primary{font-size: 14px;padding: 8px 14px;}
+    .el-form-item__label{padding-bottom: 0;line-height: 38px;}
+    .el-form-item{margin-bottom: 15px;}
+    .el-input__inner{height: 40px;line-height: 40px;}
+    .el-date-editor.el-input{width: 100%;}
+    .el-select{width: 100%;}
+    table{width: 100% !important;}
+    .upbox{padding:8px 12px;
+      img{width: 12px;height: 12px;margin-right: 2px;}
+      color: #00A854;
+    }
+   }
+}
+.fomebox{background: #FFFFFF;margin-bottom: 15px;border-radius: 4px;
+  .ftop{padding: 10px 17px 10px 16px;border-bottom: 1px solid #E6E6E6;
+    .timg{width: 20px;height: 20px;margin-right: 13px;}
+    .tit{font-weight: bold;font-size: 16px;color: #222838;}
+  }
+  .rowbox{padding: 10px 15px 9px;}
+  .ftab{font-weight: bold;font-size: 14px;color: #2777D0;padding: 24px 16px 7px;
+    .line{width: 6px;margin-right: 9px;height: 20px;background: #2777D0;}
+  }
+  .txt{font-weight: 500;padding-right: 34px;
+font-size: 14px;
+color: #666666;}
+  .btna{font-weight: 500;font-size: 14px;padding: 0 13px;
+    .imgs{width: 15px;height: 15px;display: flex;align-items: center;justify-content: center;margin-right: 7px;
+      .imga{width: 13px;height: 14px;}
+      .imgb{width: 14px;height: 14px;}
+      .imgc{width: 15px;height: 15px;}
+      .imgd{width: 13px;height: 14px;}
+    }
+    &.coa{color: #1890FF;}
+    &.cob{color: #FE7F0E;}
+    &.coc{color: #00A854;}
+    &.cod{color: #F25858;}
+  }
+}
+</style>