zhaoshangyinzi/ruoyi-ui/src/views/management/roduction/index.vue

<template>
  <div class="app-conta">
    <el-row :gutter="10" class="mb8 roiyy">
      <el-col :span="1.5" v-if="setrd % 2 == 1">
        <el-button
          type="primary"
          @click="submitForm"
          v-hasPermi="['bmProject:project:examine']"
          >提交</el-button
        >
       <!-- <el-button
          type="primary"
          @click="submitForm"
          v-hasPermi="['bmProject:project:add']"
          >保存</el-button
        > -->
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          @click="cancel"
          >取消</el-button
        >
      </el-col>
      <el-col :span="1.5" :offset="16" v-if="setrd % 2 == 1&&setrd>2">
        <el-button
          type="danger"
          @click="backProBtn"
          v-hasPermi="['bmProject:project:back']"
          >撤销审核</el-button
        >
      </el-col>
      <el-col :span="1.5" :offset="18" v-if="setrd % 2 == 0">
        <el-button
          type="danger"
          @click="applyBtn"
          style="background: #00B034;color: #FFF;border: none;"
          v-hasPermi="['bmProject:project:pass']"
          >审核</el-button
        >
        <el-button
          type="danger"
          @click="backBtn"
          style="background: #3FBCEF;color: #FFF;border: none;"
          v-hasPermi="['bmProject:project:reject']"
          >驳回</el-button
        >
      </el-col>
    </el-row>

    <div class="nauer">
      <!-- 投产项目 -->
      <div>
        <div class="nstruction">
          <!-- 内容 -->
          <div class="namjeu">
            <el-form
              :model="form"
              :rules="rules"
              ref="form"
              :inline="true"
              label-width="135px"
              label-position="center"
              class="manager_form bhyeksu"
            >
              <el-form-item label=" 已完成投资额:" prop="totInvestment">
                <el-input
                  v-model="form.totInvestment"
                  placeholder="请输入已完成投资额"
                  clearable
                  size="small"
                  :disabled = "disfal"
                  style="width: 335px"
                />
              </el-form-item>
              <el-form-item label="设备投资额度:" prop="macInvestment">
                <el-input
                  v-model="form.macInvestment"
                  placeholder="请输入设备投资额度"
                  clearable
                  :disabled = "disfal"
                  size="small"
                  style="width: 335px"
                />
              </el-form-item>
              <el-form-item label="投产时间:" prop="productDate">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  :disabled = "disfal"
                  v-model="form.productDate"
                  style="width: 335px"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="投产图片:" prop="productPhoto" class="maget_ty" :rules="[{ required: true, message: '请上传投产图片', trigger: 'blur' }]" >
                <div class="bgteu " style="width: 618px">
                  <div class="">
                    <el-upload
                      :action="defaultSettings.urls + process+'/common/upload'"
                      list-type="picture-card"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :on-success="handleOnsuccess"
                      :before-upload="beforeAvatarUpload"
                      :file-list="productPhotoList"
                       :disabled = "disfal"
                    >
                      <div style="display: flex; justify-content: flex-start; flex-direction: column; flex: 1;">
                        <i slot="default" class="el-icon-plus" style="width:100px;height: 100px; line-height: 100px; background-color: #f5f5f5; border-radius: 6px;"> </i>
                        <div slot="tip" class="el-upload__tip" style="line-height: 24px;">只能上传jpg/png文件，且不超过500kb</div>
                      </div>
                      <!-- <el-button slot="trigger" size="small" type="primary"
                        >选取文件</el-button
                      >
                      <el-button
                        style="margin-left: 10px"
                        size="small"
                        type="primary"
                        @click="submitUpload"
                        >上传到服务器</el-button
                      > -->
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="设备订购合同:" prop="orderContractPhoto" class="maget_ty" :rules="[{ required: true, message: '请上传设备订购合同', trigger: 'blur' }]">
                <div class="bgteu fre" style="width: 618px">
                  <div class="">
                    <el-upload
                      :action="defaultSettings.urls + process+'/common/upload'"
                      :on-preview="handlePictureCardPreview"
                      :before-upload="beforeAvatarUpload"
                      :on-remove="handleRemove3"
                      :on-success="handleOnsuccess3"
                      :file-list="orderContractPhotoList"
                       :disabled = "disfal"
                    >
                      <div style="display: flex; justify-content: flex-start; flex-direction: column; flex: 1;">
                        <i slot="default" class="el-icon-plus" style="width:100px;height: 100px; line-height: 100px; background-color: #f5f5f5; border-radius: 6px;"> </i>
                        <div slot="tip" class="el-upload__tip" style="line-height: 24px;">只能上传word/pdf格式，大小不超过10M(合同须盖章)</div>
                      </div>
                      <!-- <el-button slot="trigger" size="small" type="primary"
                        >选取文件</el-button
                      >
                      <el-button
                        style="margin-left: 10px"
                        size="small"
                        type="primary"
                        @click="submitUpload"
                        >上传到服务器</el-button
                      > -->
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="到资清单:" prop="arrivalListPhoto" class="maget_ty" :rules="[{ required: true, message: '请上传到资清单', trigger: 'blur' }]">
                <div class="bgteu fre" style="width: 618px">
                  <div class="">
                    <el-upload
                      :action="defaultSettings.urls + process+'/common/upload'"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove2"
                      :on-success="handleOnsuccess2"
                      :file-list="arrivalListPhotoList"
                      :before-upload="beforeAvatarUpload"
                       :disabled = "disfal"
                    >
                      <div style="display: flex; justify-content: flex-start; flex-direction: column; flex: 1;">
                        <i slot="default" class="el-icon-plus" style="width:100px;height: 100px; line-height: 100px; background-color: #f5f5f5; border-radius: 6px;"> </i>
                        <div slot="tip" class="el-upload__tip" style="line-height: 24px;">只能上传word/pdf格式，大小不超过10M</div>
                      </div>
                      <!-- <el-button slot="trigger" size="small" type="primary"
                        >选取文件</el-button
                      >
                      <el-button
                        style="margin-left: 10px"
                        size="small"
                        type="primary"
                        @click="submitUpload"
                        >上传到服务器</el-button
                      > -->
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="入规截图:" prop="entryPhoto" class="maget_ty">
                <div class="bgteu " style="width: 618px">
                  <div class="">
                    <el-upload
                      :action="defaultSettings.urls + process+'/common/upload'"
                      list-type="picture-card"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove4"
                      :on-success="handleOnsuccess4"
                      :before-upload="beforeAvatarUpload"
                      :file-list="orderContractPhotoLists"
                       :disabled = "disfal"
                    >
                      <div style="display: flex; justify-content: flex-start; flex-direction: column; flex: 1;">
                        <i slot="default" class="el-icon-plus" style="width:100px;height: 100px; line-height: 100px; background-color: #f5f5f5; border-radius: 6px;"> </i>
                        <div slot="tip" class="el-upload__tip" style="line-height: 24px;">只能上传jpg/png文件，且不超过500kb</div>
                      </div>
                      <!-- <el-button slot="trigger" size="small" type="primary"
                        >选取文件</el-button
                      >
                      <el-button
                        style="margin-left: 10px"
                        size="small"
                        type="primary"
                        @click="submitUpload"
                        >上传到服务器</el-button
                      > -->
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                  </div>
                </div>
              </el-form-item>
              <el-form-item> </el-form-item>
              <el-form-item label=" 项目入规(限):" prop="isOk">
                <el-select
                  v-model="form.isOk"
                  placeholder="项目入规(限)"
                  clearable
                  size="small"
                  :disabled = "disfal"
                  style="width: 235px"
                >
                  <el-option
                    v-for="dict in typeOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="项目入规时间:" prop="okDate">
                <el-date-picker
                  type="date"
                  :disabled = "disfal"
                  placeholder="选择项目入规时间"
                  v-model="form.okDate"
                  style="width: 235px"
                ></el-date-picker>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="dialogVisible">

      <img width="100%" :src="dialogImageUrl" alt="" v-if="ndheuos">
      <a :href="dialogImageUrl" target="view_window" v-if="!ndheuos"> {{dialogImagename}} <span style="color: red; margin-left: 10px;">点击查看/下载</span> </a>

    </el-dialog>
  </div>
</template>

<script>
import {
  listProduct,
  getProduct,
  delProduct,
  addProduct,
  updateProduct,
  exportProduct,
} from "@/api/production/production.js";
import {
  addConfigbout,
} from "@/api/system/config";
import { setExamine, setReject,setBack } from "@/api/projectInfo/info.js";
  const defaultSettings = require("@/settings.js");
export default {
  name: "production",
  data() {
    return {
      disfal:false,
      process: process.env.VUE_APP_BASE_API,
      defaultSettings,
      //父级项目id
      bmProjectId: -1,
      scrop: { projectStatus: 2 },

      //图片
      disabled: false,
      dialogVisible: false,
      dialogImageUrl: false,
      dialogImagename:'',

      productPhotoList: [],
      arrivalListPhotoList: [],
      orderContractPhotoList: [],
      orderContractPhotoLists:[],
      ndheuos:false,

      //数据字典
      typeOptions: {},
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        totInvestment: [
          { required: true, message: "请输入已完成投资额", trigger: "blur" },
        ],
        macInvestment: [
          { required: true, message: "请输入设备投资额度", trigger: "blur" },
        ],
        productDate: [
          { required: true, message: "请选择投产时间", trigger: "blur" },
        ],
        isOk:[{
          required: true, message: "请填写信息", trigger: "blur"
        }]
      },
    };
  },
  created() {
    var that = this;

    that.bmProjectId = that.$route.query.setid;
    that.form.bmProjectId = that.$route.query.setid;
    that.setrd = that.$route.query.setrd;
    if(that.setrd != 7){
      this.disfal  = true
    }else{
      this.disfal  = false
    }
    that.getDicts("sys_yes_no").then((response) => {
      that.typeOptions = response.data;
    });
    getProduct(that.bmProjectId).then((response) => {
      if (response.data) {
        that.form = response.data;
        //  投产图片
        if (that.form.productPhoto.length > 0) {

          this.productPhotoList = JSON.parse(that.form.productPhoto);
        }
        //  到资清单
        if (that.form.arrivalListPhoto.length > 0) {
          this.arrivalListPhotoList = JSON.parse(that.form.arrivalListPhoto);
        }
        //  设备订购合同
        if (that.form.orderContractPhoto.length > 0) {
          this.orderContractPhotoList = JSON.parse(that.form.orderContractPhoto);
        }
        //入规截图
        if (that.form.entryPhoto.length > 0) {
          this.orderContractPhotoLists = JSON.parse(that.form.entryPhoto);
        }
      }
    });
  },
  methods: {
    backProBtn(){
		var that = this
		this.$confirm("是否确认撤销审核", "提醒", {
		    confirmButtonText: "确定",
		    cancelButtonText: "取消",
		    type: "warning",
		  })
		  .then(function() {

		    return setBack({
		      code: 4,
		      bmProjectId: that.form.bmProjectId,
		    });
		  })
		  .then(() => {
		    this.msgSuccess("撤销成功");
		    setTimeout(res => {
		      this.$router.go(-1)
		    }, 1000)
		  });

    },
    reset() {
      var that = this;
      that.form = {
        id: this.form.id,
        bmProjectId: this.form.bmProjectId,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        isDel: null,
        totInvestment: null,
        macInvestment: null,
        productDate: null,
        productPhoto: null,
        isOk: null,
        okDate: null,
      };
      this.productPhotoList = [];
      this.arrivalListPhotoList = [];
      this.orderContractPhotoList = [];
      this.orderContractPhotoLists= []
    },
    //上传图片
    handleSuccpermit(response, file, fileList) {
      console.log(file.response.url);
    },

    //提交
    submitBtn() {
      var that = this;
      setExamine({
            code: 1,
            bmProjectId: that.bmProjectId,
          }).then((res) => {
        if(res.code == 200){
          this.$router.go(-1);
          this.msgSuccess("提交成功");
        }
      })
      // this.$confirm("是否确认提交", "提醒", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(function () {
      //      // that.msgSuccess("请点击暂存按钮,返回上级页面进行提交");
      //     return setExamine({
      //       code: 1,
      //       bmProjectId: that.bmProjectId,
      //     });
      //   })
      //   .then(() => {
      //     this.$router.go(-1);
      //     // this.getList();
      //     this.msgSuccess("提交成功");
      //   });
    },

    /** 暂存按钮 */
    submitForm() {
      var tmp = [];
      if (this.productPhotoList.length == 0) {
        this.msgError("请先选择投产图片");
        return;
      }
      if (this.arrivalListPhotoList.length == 0) {
        this.msgError("请先选择到资清单图片");
        return;
      }
      if (this.orderContractPhotoList.length == 0) {
        this.msgError("请先选择设备订购合同图片");
        return;
      }
      if (this.form.totInvestment == null) {
        this.msgError("请输入已完成投资额");
        return;
      }
      if (this.form.macInvestment == null) {
        this.msgError("请输入设备投资额度");
        return;
      }
      if (this.form.productDate == null) {
        this.msgError("请选择投产时间");
        return;
      }
      if (this.form.isOk == null) {
        this.msgError("请填写信息");
        return;
      }
      this.productPhotoList.forEach((item, index) => {
        var obj = {};
        obj.name = item.response.fileName;
        obj.uid = item.uid;
        obj.url = item.response.url;
        tmp[index] = obj;
      });
      this.form.productPhoto = JSON.stringify(tmp);

      this.arrivalListPhotoList.forEach((item, index) => {
        var obj = {};
        obj.name = item.response.fileName;
        obj.uid = item.uid;
        obj.url = item.response.url;
        tmp[index] = obj;
      });
      this.form.arrivalListPhoto = JSON.stringify(tmp);

      this.orderContractPhotoList.forEach((item, index) => {
        var obj = {};
        obj.name = item.response.fileName;
        obj.uid = item.uid;
        obj.url = item.response.url;
        tmp[index] = obj;
      });
      this.form.orderContractPhoto = JSON.stringify(tmp);
      this.orderContractPhotoLists.forEach((item, index) => {
        var obj = {};
        obj.name = item.response.fileName;
        obj.uid = item.uid;
        obj.url = item.response.url;
        tmp[index] = obj;
      });
      this.form.entryPhoto = JSON.stringify(tmp);


      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateProduct(this.form).then((response) => {
              this.msgSuccess("操作成功");
              this.submitBtn()
              // this.$router.go(-1)
            });
          } else {
            addProduct(this.form).then((response) => {
              this.msgSuccess("操作成功");
              this.submitBtn()
              // this.$router.go(-1)
            });
          }
        }
      });
    },

    submitUpload() {
      this.$refs.upload.submit();
    },
    submitCtionte(){
      this.submitForm()
    },
    handleOnsuccess(response, file, fileList) {
      this.productPhotoList = fileList;
    },
    handleRemove(file, fileList) {
      this.productPhotoList = fileList;
    },
    handleOnsuccess2(response, file, fileList) {
      this.arrivalListPhotoList = fileList;
    },
    handleRemove2(file, fileList) {
      this.arrivalListPhotoList = fileList;
    },
    handleOnsuccess3(response, file, fileList) {
      this.orderContractPhotoList = fileList;
    },
    handleOnsuccess4(response, file, fileList){
     this.orderContractPhotoLists = fileList;
    },
    handleRemove3(file, fileList) {
      this.orderContractPhotoList = fileList;
    },
    handleRemove4(file, fileList) {
      this.orderContractPhotoLists = fileList;
    },
    handlePictureCardPreview(file) {
      if(file.response !== undefined){
        this.dialogImageUrl = file.response.url;
        this.dialogVisible = true;
        this.dialogImagename = file.name
      }else{
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
        this.dialogImagename = file.name
      }
    },
    handleDownload(file) {
      console.log(file);
    },

    /** 查询参数列表 */
    getList() {
      this.loading = true;
      listConfig(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.configList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    // // 参数系统内置字典翻译
    // typeFormat(row, column) {
    //   return this.selectDictLabel(this.typeOptions, row.configType);
    // },

    //审核
    applyBtn() {
      var that = this;
      this.$confirm("是否确认审核", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return addConfigbout({
            code: 3,
            bmProjectId: that.bmProjectId,
          });
        })
        .then(() => {
          this.$router.go(-1);
          this.getList();
          this.msgSuccess("审核成功");
        });
    },
    beforeAvatarUpload(file) {
      console.log(file.type);
        const isJPG =
          file.type === "image/jpeg" ||
          file.type === "image/png" ||
          file.type === "image/jpg";
        const isPNG = file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 10;
        this.ndheuos = isJPG
        console.log(this.ndheuos,76)
        // if (!isJPG) {
        //   this.$message.error("图片只能是 JPG 格式! 或者 PNG 格式!");
        // }
        // if(!isPNG){
        //   this.$message.error('图片只能是 JPG 格式! 或者 PNG 格式!');
        // }
        if (!isLt2M) {
          this.$message.error("文件大小不能超过 10MB!");
        }
        return  isLt2M;
      // },
    },
    //驳回
    backBtn() {
      var that = this;
      this.$prompt("请输入驳回意见", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(({ value }) => {
            return setReject({
              code: 2,
              bmProjectId: that.bmProjectId,
              remark:value
            });
           })
          .then(() => {
            this.$router.go(-1);
            this.getList();
            this.msgSuccess("驳回成功");
          });
    },

    // 取消按钮
    cancel() {
      this.$router.go(-1);
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加参数";
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.configId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 修改按钮操作 */
    handleUpdate() {},
    //tab
    tabClid(index) {
      this.tab = index;
      // this.$router.push('/tab');
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss">
.buiy {
  // width: 75px !important;
  // height: 30px !important;
  // line-height: 30px !important;
}
.ijeut {
  display: flex;
  height: 78px;
  align-items: center;
}

.burert {
  .el-upload--picture-card {
    height: 78px;
    line-height: 78px;
    width: 80px;
    vertical-align: center;
    border: 0 !important;
    background-color: #fff;
  }
  .el-upload-list--picture-card .el-upload-list__item {
    height: 78px !important;
    width: 78px !important;
  }
}

.manager_form {
  .manager_lab {
    .el-form-item__label {
      width: 145px !important;
    }
  }
  .maneg_lar {
    position: relative;
    .el-form-item__label {
      width: 134px !important;
    }
    span {
      position: absolute;
      left: -95%;
    }
  }
  .manager_labtwo {
    .el-form-item__label {
      width: 244px !important;
    }
  }
  // .manager_labthre {
  //   // .el-form-item{
  //   .el-form-item__label {
  //     width: 130px !important;
  //   }
  //   margin-right: 40px !important;
  //   // }
  // }
  .ieuyr {
    .el-textarea__inner {
      height: 80px !important;
    }
  }
  // .mage_ter {
  //   .el-form-item__label {
  //     width: 543px !important;
  //   }
  // }
  .maget_ty {
    .el-form-item__label {
      width: 135px !important;
    }
  }
  .forieu {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    width: 480px;
    height: 100px !important;
    position: relative;

    .bure {
      display: flex;
      // position: absolute;
      // height: 100%;
      // right: 20px;
      // top: 50%;
      // transform: translateY(-50%);
      padding: 10px 0;
    }
    .burert {
      display: flex;
      position: absolute;
      height: 100%;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.lage_div {
  padding-left: 15px;
  display: flex;
  align-items: center;
  margin-bottom: 22px;
  .el-form-item {
    margin-bottom: 0 !important;
  }
}
.app-conta {
  .header {
    padding-left: 22px;
    height: 45px;
    line-height: 40px;
    background-color: #f1f1f1;
    font-size: 18px;
    color: #343434;
    margin-bottom: 40px;
  }
  .nauer {
    .nuae_wtu {
      display: flex;
      justify-content: center;
      align-content: center;
      .naue_one {
        width: 30%;
        p {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #343434;
        }
        .naue_name {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #0669b2;
          margin-bottom: 30px;
        }
      }
      .naue_two {
        flex: 1;
        padding-top: 20px;
        // display: flex;
        // align-items: center;
        // justify-content: center;
      }
    }
    //tab
    // .naue_tab {
    //   border-bottom: 1px solid #cdcdcd;
    //   display: flex;
    //   margin-top: 30px;
    //   padding: 0 10px;
    //   margin-bottom: 30px;
    //   p {
    //     font-size: 16px;
    //     font-family: PingFang SC;
    //     font-weight: 700;
    //     color: #fff;
    //     padding: 11px 15px;
    //     margin: 10px;
    //   }
    //   .p {
    //     border-bottom: 2px solid #1c84c6;
    //     margin-bottom: -1px;
    //   }
    // }
    .mation {
      .enterprise {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #1c84c6;
        margin-top: 25px;
        margin-bottom: 20px;
      }
      .enterprise_tw {
        i {
          margin-right: 5px;
        }
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #666666;
      }
    }
  }
  .nvestor {
    margin-bottom: 10px;
    p {
      margin: 0;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #343434;
      height: 24px;
      line-height: 24px;
      border-left: 3px solid #1c84c6;
      padding-left: 13px;
      i {
        color: red;
      }
    }
  }
  .souu {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #343434;
    margin-left: 5px;
  }
}
//在建项目
.nstruction {
  display: flex;
  align-items: center;
  .nstruction_nav {
    display: flex;
    align-items: center;
    p:nth-child(1) {
      margin-right: 10px;
      span {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #343434;
      }
      span:nth-child(1) {
        color: #df0024;
      }
    }
    p:nth-child(2) {
      width: 233px;
      height: 30px;
      line-height: 30px;
      border: 1px solid #cdcdcd;
      border-radius: 3px;
      padding-left: 14px;
    }
  }
  .nstruction_navne {
    margin-left: 50px;
    display: flex;
    align-items: center;
    p:nth-child(1) {
      margin-right: 10px;
      span {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #343434;
      }
      span:nth-child(1) {
        color: #df0024;
      }
    }
    p:nth-child(2) {
      width: 233px;
      height: 30px;
      line-height: 30px;
      border: 1px solid #cdcdcd;
      border-radius: 3px;
      padding-left: 14px;
    }
  }
}
.kaieu {
  padding-left: 60px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 800;
  color: #343434;
}
.kaieu_tw {
  padding-left: 60px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}
.bgteu{
   border: 1px solid #dcdfe6;
      border-radius: 4px;
      padding: 10px ;
}
</style>