提交

src/components/FileUploads/index.vue

@@ -0,0 +1,262 @@
+<template>
+  <div class="upload-file">
+    <el-upload
+      multiple
+      :action="uploadFileUrl"
+      :before-upload="handleBeforeUpload"
+      :file-list="fileList"
+      :data="data"
+      :limit="limit"
+      :on-error="handleUploadError"
+      :on-exceed="handleExceed"
+      :on-success="handleUploadSuccess"
+      :show-file-list="false"
+      :headers="headers"
+      class="upload-file-uploader"
+      ref="fileUpload"
+      v-if="!disabled"
+    >
+      <!-- 上传按钮 -->
+      <el-button size="mini" type="primary">上传</el-button>
+      <!-- 上传提示 -->
+      <!-- <div class="el-upload__tip" slot="tip" v-if="showTip">
+        请上传
+        <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+        <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+        的文件
+      </div> -->
+    </el-upload>
+
+    <!-- 文件列表 -->
+    <transition-group ref="uploadFileList" class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+      <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
+        <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
+          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
+        </el-link>
+        <div class="ele-upload-list__item-content-action">
+          <el-link :underline="false" @click="handleDelete(index)" type="danger" v-if="!disabled">删除</el-link>
+        </div>
+      </li>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+import { getToken } from "@/utils/auth"
+import Sortable from 'sortablejs'
+
+export default {
+  name: "FileUpload",
+  props: {
+    // 值
+    value: [String, Object, Array],
+    // 上传接口地址
+    action: {
+      type: String,
+      default: "/common/upload"
+    },
+    // 上传携带的参数
+    data: {
+      type: Object
+    },
+    // 数量限制
+    limit: {
+      type: Number,
+      default: 5
+    },
+    // 大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 5
+    },
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: {
+      type: Array,
+      default: () => ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "pdf","png","jpg"]
+    },
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true
+    },
+    // 禁用组件（仅查看文件）
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 拖动排序
+    drag: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      number: 0,
+      uploadList: [],
+      baseUrl: process.env.VUE_APP_BASE_API,
+      uploadFileUrl: process.env.VUE_APP_BASE_API + this.action, // 上传文件服务器地址
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      fileList: []
+    }
+  },
+  mounted() {
+    if (this.drag && !this.disabled) {
+      this.$nextTick(() => {
+        const element = this.$refs.uploadFileList?.$el || this.$refs.uploadFileList
+        Sortable.create(element, {
+          ghostClass: 'file-upload-darg',
+          onEnd: (evt) => {
+            const movedItem = this.fileList.splice(evt.oldIndex, 1)[0]
+            this.fileList.splice(evt.newIndex, 0, movedItem)
+            this.$emit("input", this.listToString(this.fileList))
+          }
+        })
+      })
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          let temp = 1
+          // 首先将值转为数组
+          const list = Array.isArray(val) ? val : this.value.split(',')
+          // 然后将数组转为对象数组
+          this.fileList = list.map(item => {
+            if (typeof item === "string") {
+              item = { name: item, url: item }
+            }
+            item.uid = item.uid || new Date().getTime() + temp++
+            return item
+          })
+        } else {
+          this.fileList = []
+          return []
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed: {
+    // 是否显示提示
+    showTip() {
+      return this.isShowTip && (this.fileType || this.fileSize)
+    },
+  },
+  methods: {
+    // 上传前校检格式和大小
+    handleBeforeUpload(file) {
+      // 校检文件类型
+      if (this.fileType) {
+        const fileName = file.name.split('.')
+        const fileExt = fileName[fileName.length - 1]
+        const isTypeOk = this.fileType.indexOf(fileExt) >= 0
+        if (!isTypeOk) {
+          this.$modal.msgError(`文件格式不正确，请上传${this.fileType.join("/")}格式文件!`)
+          return false
+        }
+      }
+      // 校检文件名是否包含特殊字符
+      if (file.name.includes(',')) {
+        this.$modal.msgError('文件名不正确，不能包含英文逗号!')
+        return false
+      }
+      // 校检文件大小
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize
+        if (!isLt) {
+          this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`)
+          return false
+        }
+      }
+      this.$modal.loading("正在上传文件，请稍候...")
+      this.number++
+      return true
+    },
+    // 文件个数超出
+    handleExceed() {
+      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`)
+    },
+    // 上传失败
+    handleUploadError(err) {
+      this.$modal.msgError("上传文件失败，请重试")
+      this.$modal.closeLoading()
+    },
+    // 上传成功回调
+    handleUploadSuccess(res, file) {
+      if (res.code === 200) {
+        this.uploadList.push({ name: res.fileName, url: res.fileName })
+        this.uploadedSuccessfully()
+      } else {
+        this.number--
+        this.$modal.closeLoading()
+        this.$modal.msgError(res.msg)
+        this.$refs.fileUpload.handleRemove(file)
+        this.uploadedSuccessfully()
+      }
+    },
+    // 删除文件
+    handleDelete(index) {
+      this.fileList.splice(index, 1)
+      this.$emit("input", this.listToString(this.fileList))
+    },
+    // 上传结束处理
+    uploadedSuccessfully() {
+      if (this.number > 0 && this.uploadList.length === this.number) {
+        this.fileList = this.fileList.concat(this.uploadList)
+        this.uploadList = []
+        this.number = 0
+        this.$emit("input", this.listToString(this.fileList))
+        this.$modal.closeLoading()
+      }
+    },
+    // 获取文件名称
+    getFileName(name) {
+      // 如果是url那么取最后的名字 如果不是直接返回
+      if (name.lastIndexOf("/") > -1) {
+        return name.slice(name.lastIndexOf("/") + 1)
+      } else {
+        return name
+      }
+    },
+    // 对象转成指定字符串分隔
+    listToString(list, separator) {
+      let strs = ""
+      separator = separator || ","
+      for (let i in list) {
+        strs += list[i].url + separator
+      }
+      return strs != '' ? strs.substr(0, strs.length - 1) : ''
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.file-upload-darg {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+.upload-file-uploader {
+  margin-bottom: 5px;
+}
+.upload-file-list .el-upload-list__item {
+  border: 1px solid #e4e7ed;
+  line-height: 2;
+  margin-bottom: 10px;
+  position: relative;
+}
+.upload-file-list .ele-upload-list__item-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: inherit;
+}
+.ele-upload-list__item-content-action .el-link {
+  margin-right: 10px;
+}
+</style>

src/main.js

@@ -0,0 +1,85 @@
+import Vue from 'vue'
+
+import Cookies from 'js-cookie'
+
+import Element from 'element-ui'
+import './assets/styles/element-variables.scss'
+
+import '@/assets/styles/index.scss' // global css
+import '@/assets/styles/ruoyi.scss' // ruoyi css
+import App from './App'
+import store from './store'
+import router from './router'
+import directive from './directive' // directive
+import plugins from './plugins' // plugins
+import { download } from '@/utils/request'
+
+import './assets/icons' // icon
+import './permission' // permission control
+import { getDicts } from "@/api/system/dict/data"
+import { getConfigKey } from "@/api/system/config"
+import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi"
+// 分页组件
+import Pagination from "@/components/Pagination"
+import Paginations from "@/components/Paginations"
+// 自定义表格工具组件
+import RightToolbar from "@/components/RightToolbar"
+// 富文本组件
+import Editor from "@/components/Editor"
+// 文件上传组件
+import FileUpload from "@/components/FileUpload"
+// 图片上传组件
+import ImageUpload from "@/components/ImageUpload"
+// 图片预览组件
+import ImagePreview from "@/components/ImagePreview"
+// 字典标签组件
+import DictTag from '@/components/DictTag'
+// 字典数据组件
+import DictData from '@/components/DictData'
+
+// 全局方法挂载
+Vue.prototype.getDicts = getDicts
+Vue.prototype.getConfigKey = getConfigKey
+Vue.prototype.parseTime = parseTime
+Vue.prototype.resetForm = resetForm
+Vue.prototype.addDateRange = addDateRange
+Vue.prototype.selectDictLabel = selectDictLabel
+Vue.prototype.selectDictLabels = selectDictLabels
+Vue.prototype.download = download
+Vue.prototype.handleTree = handleTree
+
+// 全局组件挂载
+Vue.component('DictTag', DictTag)
+Vue.component('Pagination', Pagination)
+Vue.component('Paginations', Paginations)
+Vue.component('RightToolbar', RightToolbar)
+Vue.component('Editor', Editor)
+Vue.component('FileUpload', FileUpload)
+Vue.component('ImageUpload', ImageUpload)
+Vue.component('ImagePreview', ImagePreview)
+
+Vue.use(directive)
+Vue.use(plugins)
+DictData.install()
+
+/**
+ * If you don't want to use mock-server
+ * you want to use MockJs for mock api
+ * you can execute: mockXHR()
+ *
+ * Currently MockJs will be used in the production environment,
+ * please remove it before going online! ! !
+ */
+
+Vue.use(Element, {
+  size: Cookies.get('size') || 'medium' // set element-ui default size
+})
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  router,
+  store,
+  render: h => h(App)
+})

src/views/zhaoshang/Information/firstInfoForm.vue

@@ -0,0 +1,317 @@
+<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>
+        </div>
+        <div class="rowbox">
+          <el-row  :gutter="22">
+            <el-col :span="24" style="padding-left: 0; margin: 15px 0;">
+				<el-col :span="6">
+				  <div class="xiangw">
+					  <span>项目编号：</span>
+					  <span>ZS221120</span>
+				  </div>
+				</el-col>
+				<el-col :span="6">
+				  <div class="xiangw">
+				  				  <span>投资方：</span>
+				  				  <span>华能新能源科技有限公司​</span>
+				  </div>
+				</el-col>
+			</el-col>
+			<el-col :span="24" style="padding-left: 0; margin-bottom: 7px;">
+				<el-col :span="6">
+				  <div class="xiangw">
+				  				  <span>投资方：</span>
+				  				  <span>2025-03-14</span>
+				  </div>
+				</el-col>
+				<el-col :span="6">
+				 <div class="xiangw">
+				 				  <span>属地政府：</span>
+				 				  <span>新能源智能装备研发制造项目</span>
+				 </div>
+				</el-col>
+				<el-col :span="6">
+				  <div class="xiangw">
+				  				  <span>签约日期：</span>
+				  				  <span>2025-03-14</span>
+				  </div>
+				</el-col>
+			</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>
+        </div>
+        <div class="ftab flexc">
+          <div class="line"></div>投资企业信息
+        </div>
+        <div class="rowbox">
+          <el-row :gutter="22" >
+            <el-col :span="6">
+              <div class="xiangw">
+              				  <span>总投资额：</span>
+              				  <span>2025-03-14</span>
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div class="xiangw">
+              				  <span>固定资产投资额：</span>
+              				  <span>2025-03-14</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row :gutter="22" style="margin-top: 20px; margin-bottom: 20px;">
+            <el-col :span="6">
+              <div class="xiangw">
+              				  <span>企业注册时间：</span>
+              				  <span>2025-03-14</span>
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div class="xiangw">
+              				  <span>固定资产投资额：</span>
+              				  <span>2025-03-14</span>
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div class="xiangw">
+              				  <span>注册资金：</span>
+              				  <span>2025-03-14</span>
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div class="xiangw">
+              				  <span>投资方联系人：</span>
+              				  <span>2025-03-14</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row :gutter="22">
+            <el-col :span="24">
+              <div class="xiangw">
+              				  <span>投资企业背景：</span>
+              				  <span>华能新能源科技有限公司是国内领先的新能源电池研发与生产企业，专注锂电池技术研发与生产，在行业内具有较高的市场占有率和技术优势。</span>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <div class="ftab flexc">
+          <div class="line"></div>用地情况
+        </div>
+        <div class="rowbox">
+          <el-row :gutter="22" style="margin-top: 10px;" >
+            <el-col :span="6">
+              <div class="xiangw">
+              				  <span>供地面积：</span>
+              				  <span>2025-03-14</span>
+              </div>
+            </el-col>
+            <el-col :span="6">
+             <div class="xiangw">
+             				  <span>租赁厂房面积</span>
+             				  <span>2025-03-14</span>
+             </div>
+            </el-col>
+            <el-col :span="6">
+              <div class="xiangw">
+              				  <span>流转土地面积：</span>
+              				  <span>2025-03-14</span>
+              </div>
+            </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">
+             <div class="xiangw">
+             				  <span>流转土地面积：</span>
+             				  <span>2025-03-14</span>
+             </div>
+            </el-col>
+            <el-col :span="6">
+				<div class="xiangw">
+								  <span>亩均收入(万元)：</span>
+								  <span>2025-03-14</span>
+				</div>
+            </el-col>
+            <el-col :span="6">
+				<div class="xiangw">
+								  <span>预计年产值(万元)：</span>
+								  <span>2025-03-14</span>
+				</div>
+            </el-col>
+            <el-col :span="6">
+				<div class="xiangw">
+								  <span>预计利税(万元)：</span>
+								  <span>2025-03-14</span>
+				</div>
+            </el-col>
+            <el-col :span="6" class="magnt">
+				<div class="xiangw">
+								  <span>投资回收周期(年)：</span>
+								  <span>2025-03-14</span>
+				</div>
+            </el-col>
+            <el-col :span="18" class="magnt">
+				<div class="xiangw">
+								  <span>建设内容：</span>
+								  <span>2025-03-14</span>
+				</div>
+            </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>
+        </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 cob">
+					     <div class="imgs">
+					       <img class="imgb" src="@/assets/images/project/upb.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;}
+  }
+}
+.xiangw{
+	// margin-top: 20px;
+	span:nth-child(1){
+		font-family: PingFang SC;
+		font-weight: bold;
+		font-size: 14px;
+		color: #000000;
+	}
+	span:nth-child(2){
+		font-family: PingFang SC;
+		font-weight: 400;
+		font-size: 14px;
+		color: #222838;
+	}
+}
+.magnt{
+	margin-top: 20px;
+}
+</style>

src/views/zhaoshang/Information/fourthInfoForm.vue

@@ -0,0 +1,191 @@
+<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>
+        </div>
+        <div class="rowbox">
+          <el-row  :gutter="22">
+            <el-col :span="6"  class="magnt">
+				<div class="xiangw">
+								  <span>投产时间：</span>
+								  <span>2025-03-14</span>
+				</div>
+            </el-col>
+            <el-col :span="6" class="magnt">
+				<div class="xiangw">
+								  <span>入规时间：</span>
+								  <span>2025-03-14</span>
+				</div>
+            </el-col>
+            <el-col :span="24" style="padding-left: 0;" class=" mbstb">
+				<el-col :span="6" class="magnt">
+					<div class="xiangw">
+									  <span>本年度累计产值(万元)：</span>
+									  <span>2025-03-14</span>
+					</div>
+				</el-col>
+				<el-col :span="6" class="magnt">
+					<div class="xiangw">
+									  <span>本会计年度实缴税收(万元)：</span>
+									  <span>2025-03-14</span>
+					</div>
+				</el-col>
+				<el-col :span="6" class="magnt">
+					<div class="xiangw">
+									  <span>累计用电(万千瓦时)：</span>
+									  <span>2025-03-14</span>
+					</div>
+				</el-col>
+				<el-col :span="6" class="magnt">
+					<div class="xiangw">
+									  <span>万元产值能耗(吨/万元)：</span>
+									  <span>2025-03-14</span>
+					</div>
+				</el-col>
+			</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>
+        </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 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;}
+  }
+}
+.xiangw{
+	// margin-top: 20px;
+	span:nth-child(1){
+		font-family: PingFang SC;
+		font-weight: bold;
+		font-size: 14px;
+		color: #000000;
+	}
+	span:nth-child(2){
+		font-family: PingFang SC;
+		font-weight: 400;
+		font-size: 14px;
+		color: #222838;
+	}
+}
+.magnt{
+	margin-top: 10px;
+}
+.mbstb{
+	margin-bottom: 10px;
+}
+</style>

src/views/zhaoshang/Information/index.vue

@@ -0,0 +1,155 @@
+<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> -->
+
+
+      </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/zhaoshang/Information/secondInfoForm.vue

@@ -0,0 +1,195 @@
+<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>
+        </div>
+        <div class="rowbox">
+          <el-row  :gutter="22">
+            <el-col :span="24" style="padding-left: 0;" class="magnt mbstb">
+				<el-col :span="6">
+					<div class="xiangw">
+									  <span>土地摘牌时间：</span>
+									  <span>2025-03-14</span>
+					</div>
+				</el-col>
+				<el-col :span="6">
+					<div class="xiangw">
+									  <span>环评批复时间：</span>
+									  <span>2025-03-14</span>
+					</div>
+				</el-col>
+				<el-col :span="8" >
+					<div class="xiangw">
+									  <span>建设用地规划许可证取得时间：</span>
+									  <span>2025-03-14</span>
+					</div>
+				</el-col>
+			</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>
+        </div>
+        <div class="rowbox">
+          <el-row  :gutter="22" class="magnt mbstb" >
+            <el-col :span="6">
+				<div class="xiangw">
+								  <span>施工许可证办理时间：</span>
+								  <span>2025-03-14</span>
+				</div>
+            
+            </el-col>
+            <el-col :span="6">
+				<div class="xiangw">
+								  <span>开工时间：</span>
+								  <span>2025-03-14</span>
+				</div>
+            </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>
+        </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 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;}
+  }
+}
+.xiangw{
+	// margin-top: 20px;
+	span:nth-child(1){
+		font-family: PingFang SC;
+		font-weight: bold;
+		font-size: 14px;
+		color: #000000;
+	}
+	span:nth-child(2){
+		font-family: PingFang SC;
+		font-weight: 400;
+		font-size: 14px;
+		color: #222838;
+	}
+}
+.magnt{
+	margin-top: 10px;
+}
+.mbstb{
+	margin-bottom: 10px;
+}
+</style>

src/views/zhaoshang/Information/thirdInfoForm.vue

@@ -0,0 +1,260 @@
+<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>
+        </div>
+        <div class="rowbox">
+          <el-row  :gutter="22">
+            <el-col :span="24" style="padding-left: 0;">
+				<el-col :span="6" class="magnt">
+					<div class="xiangw" >
+									  <span>竣工时间：</span>
+									  <span>2025-03-14</span>
+					</div>
+				 
+				</el-col>
+				<el-col :span="6" class="magnt">
+					<div class="xiangw">
+									  <span>入统时间：</span>
+									  <span>2025-03-14</span>
+					</div>
+				  
+				</el-col>
+				<el-col :span="6" class="magnt">
+					<div class="xiangw">
+									  <span>发票金额(万元)：</span>
+									  <span>2025-03-14</span>
+					</div>
+				</el-col>
+				
+			</el-col>
+            <el-col :span="24" style="padding-left: 0;" class="magnt mbstb">
+				<el-col :span="6">
+					<div class="xiangw">
+									  <span>厂房投入金额(万元)：</span>
+									  <span>2025-03-14</span>
+					</div>
+				</el-col>
+				<el-col :span="6">
+					<div class="xiangw">
+									  <span>设备清单金额(万元)：</span>
+									  <span>2025-03-14</span>
+					</div>
+				</el-col>
+				<el-col :span="6" >
+					<div class="xiangw">
+									  <span>土地出让金总额(万元)：</span>
+									  <span>2025-03-14</span>
+					</div>
+				</el-col>
+				
+				<el-col :span="6">
+					<div class="xiangw">
+									  <span>设备合同金额(万元)：</span>
+									  <span>2025-03-14</span>
+					</div>
+				</el-col>
+			</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>
+        </div>
+        <div class="rowbox">
+          <el-row :gutter="22">
+            <el-col :span="6" class="magnt mbstb">
+				<div class="xiangw">
+								  <span>建设周期：</span>
+								  <span>2025-03-14</span>
+				</div>
+            </el-col>
+          </el-row>
+        </div>
+        <div class="ftab flexc" style="padding-top: 0;">
+          <div class="line"></div>每月项目建设进展情况
+          <div class="flex1"></div>
+        </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="300">
+                  <template slot-scope="scope">
+                   <div class="flexcc">
+                     
+                     <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>
+        </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 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;}
+  }
+}
+.xiangw{
+	// margin-top: 20px;
+	span:nth-child(1){
+		font-family: PingFang SC;
+		font-weight: bold;
+		font-size: 14px;
+		color: #000000;
+	}
+	span:nth-child(2){
+		font-family: PingFang SC;
+		font-weight: 400;
+		font-size: 14px;
+		color: #222838;
+	}
+}
+.magnt{
+	margin-top: 10px;
+}
+.mbstb{
+	margin-bottom: 10px;
+}
+</style>