diff --git a/src/assets/companyFile/avatar.png b/src/assets/companyFile/avatar.png
new file mode 100644
index 0000000..c18d08f
Binary files /dev/null and b/src/assets/companyFile/avatar.png differ
diff --git a/src/assets/companyFile/course_01.png b/src/assets/companyFile/course_01.png
new file mode 100644
index 0000000..1e9c06d
Binary files /dev/null and b/src/assets/companyFile/course_01.png differ
diff --git a/src/utils/request.js b/src/utils/request.js
index 690ca1f..552561c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -4,9 +4,9 @@ import vm from "../main";
 import { getToken } from '@/utils/auth'
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 const request = axios.create({
-  baseURL: 'http://172.18.113.50:8080/zhapi',
+  //baseURL: 'http://172.18.113.50:8080/zhapi',
   //baseURL: 'http://192.168.0.188:8888/zhapi',
-  //baseURL: `http://${window.location.host}/zhapi`,
+  baseURL: `http://${window.location.host}/zhapi`,
   timeout: 50000,
   headers: { 'content-type': 'application/json' },
 })
diff --git a/src/views/closeLoopDispose/components/myCourse.vue b/src/views/closeLoopDispose/components/myCourse.vue
new file mode 100644
index 0000000..5e9680b
--- /dev/null
+++ b/src/views/closeLoopDispose/components/myCourse.vue
@@ -0,0 +1,463 @@
+<template>
+  <!-- 我的流程 -->
+  <div>
+    <div class="course_body">
+      <div class="search_top">
+        <div class="btn">
+          <el-button @click="search_data">搜索</el-button>
+          <el-button @click="reset">重置</el-button>
+        </div>
+        <el-form :model="search" class="search_top_form">
+          <el-form-item label="流程状态">
+            <el-select v-model="search.course_select" @change="change_course">
+              <el-option
+                v-for="item in course_list"
+                :key="item.value"
+                :label="item.label"
+                :value="item.label"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="创建时间">
+            <el-date-picker
+              v-model="search.course_time"
+              type="datetimerange"
+              :picker-options="pickerOptions"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="关键字">
+            <el-input
+              v-model="search.word"
+              placeholder="请选择关键词"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="search_table">
+        <el-table
+          :data="table_data"
+          :header-cell-style="table_header"
+          :cell-style="{ background: 'revert', 'text-align': 'center' }"
+        >
+          <el-table-column prop="course_name" label="流程名称" width="420">
+          </el-table-column>
+          <el-table-column prop="create_time" label="创建时间" width="280">
+          </el-table-column>
+          <el-table-column prop="course_type" label="流程类型" width="280">
+          </el-table-column>
+          <el-table-column prop="course_status" label="流程状态" width="220">
+            <template slot-scope="scope">
+              <div :style="{ color: styleChange(scope.row.course_status) }">
+                {{ scope.row.course_status }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="tips" label="当前节点" width="220">
+          </el-table-column>
+          <el-table-column prop="person" label="未操作者" width="280">
+          </el-table-column>
+          <el-table-column prop="operation" label="操作">
+            <template slot-scope="scope">
+              <el-button
+                size="small"
+                class="operation"
+                @click="check_details(scope.row)"
+                >详情
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页 -->
+        <div class="table_pagination">
+          <el-pagination
+            :background="true"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :page-sizes="[5, 10]"
+            :pager-count="5"
+            :page-size="pageSize"
+            :current-page="pageNum"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "MyCourse",
+  data() {
+    return {
+      search: {
+        course_select: "待审核",
+        course_num: "1", // 表格查询待定入参
+        course_time: [this.get_today(), this.get_tomorrow()],
+        word: "",
+      },
+      course_list: [
+        { label: "待审核", value: "1" },
+        { label: "通过", value: "2" },
+        { label: "驳回", value: "3" },
+        { label: "处置中", value: "4" },
+      ],
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      table_data: [
+        {
+          course_name: "宁波市北越石化有限公司-核酸检测率-异常处置",
+          create_time: "2023-06-06 12:53:30",
+          course_type: "防疫安全",
+          course_status: "进行中",
+          tips: "治安大队",
+          person: "王伟、李勋勋",
+        },
+        {
+          course_name: "宁波市北越石化有限公司-核酸检测率-异常处置",
+          create_time: "2023-06-06 12:53:30",
+          course_type: "防疫安全",
+          course_status: "处置成功",
+          tips: "治安大队",
+          person: "王伟、李勋勋",
+        },
+        {
+          course_name: "宁波市北越石化有限公司-核酸检测率-异常处置",
+          create_time: "2023-06-06 12:53:30",
+          course_type: "防疫安全",
+          course_status: "处置失败",
+          tips: "治安大队",
+          person: "王伟、李勋勋",
+        },
+      ],
+      pageSize: 10,
+      pageNum: 1,
+      total: 0,
+    };
+  },
+  created() {},
+  methods: {
+    change_course(val) {
+      this.search.course_num = this.course_list.find((item) => {
+        item.label === val;
+      }).value;
+    },
+    // 查询
+    search_data() {
+      console.log("this.search.course_time", this.search.course_time);
+      let param = {
+        startTime:
+          this.search.course_time == null
+            ? ""
+            : this.dateConversion(this.search.course_time[0]),
+        endTime:
+          this.search.course_time == null
+            ? ""
+            : this.dateConversion(this.search.course_time[1]),
+      };
+      console.log("param", param);
+    },
+    // 重置查询
+    reset() {
+      this.search.course_select = "待审核";
+      this.search.course_num = "1";
+      this.search.course_time = [this.get_today(), this.get_tomorrow()];
+      this.search.word = "";
+      this.search_data();
+    },
+    // 详情点击跳转
+    check_details(val) {
+      console.log(val);
+      this.$emit("change_to_detail");
+    },
+    // 转换时间格式
+    dateConversion(value) {
+      let date = new Date(value);
+      let y = date.getFullYear();
+      let m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      let d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      let h = date.getHours();
+      h = h < 10 ? "0" + h : h;
+      let M = date.getMinutes();
+      M = M < 10 ? "0" + M : M;
+      let s = date.getSeconds();
+      s = s < 10 ? "0" + s : s;
+      let dateTime = y + "-" + m + "-" + d + " " + h + ":" + M + ":" + s;
+      return dateTime;
+    },
+    // 获取当前时间
+    get_today() {
+      let date = new Date();
+      let y = date.getFullYear();
+      let m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      let d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      let dateTime =
+        y + "-" + m + "-" + d + " " + "00" + ":" + "00" + ":" + "00";
+      return dateTime;
+    },
+    // 获取明天时间
+    get_tomorrow() {
+      let date = new Date();
+      let y = date.getFullYear();
+      let m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      let d = date.getDate() + 1;
+      d = d < 10 ? "0" + d : d;
+      let dateTime =
+        y + "-" + m + "-" + d + " " + "00" + ":" + "00" + ":" + "00";
+      return dateTime;
+    },
+    // 表头样式
+    table_header({ row, rowIndex }) {
+      console.log(row);
+      console.log(rowIndex);
+      return {
+        "text-align": "center", // 表头文字居中
+        color: "#fff",
+        border: "0.1px solid #3b4f5c",
+      };
+    },
+    // 跟后端返回判断流程状态颜色
+    styleChange(val) {
+      switch (val) {
+        case "进行中":
+          return "#3eba75";
+        // case "yellow":
+        //   return "#FDA722";
+        case "处置成功":
+          return "#2eb9ef";
+        case "处置失败":
+          return "#e55b5b";
+      }
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.pageNum = 1;
+      this.pageSize = val;
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.pageNum = val;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.el-table {
+  //   width: 96vw;
+  height: 60vh;
+  background: rgba(0, 0, 0, 0);
+  border: 0.1px solid #3f5564;
+  thead {
+    color: #fff;
+    font-weight: 500;
+    border: 0.1px solid #3f5564;
+    background: linear-gradient(
+      to right,
+      #284f49,
+      #2f6363 5%,
+      #233b38 80%
+    ) !important;
+
+    & th {
+      background-color: transparent;
+    }
+
+    & tr {
+      background-color: transparent;
+    }
+  }
+  tr {
+    color: #fff;
+    background: rgba(0, 0, 0, 0);
+  }
+}
+/deep/ .el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+  border: 0.1px solid #3f5564;
+}
+/deep/.el-button.operation {
+  background-color: #182527;
+  border: 0px;
+  color: #2fabdc;
+}
+
+/deep/.el-button.operation:hover,
+.el-button.operation:focus {
+  background-color: #182527;
+  border: 0px;
+  color: #2fabdc;
+  text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+}
+.course_body {
+  height: 72vh;
+  //   border: 0.1px solid #2f6363;
+  .search_top {
+    width: 96vw;
+    height: 5vh;
+    // border: 0.1px solid #2f6363;
+    display: flex;
+    flex-direction: row-reverse;
+    /deep/.el-form {
+      display: flex;
+      .el-form-item {
+        display: flex;
+        margin-left: 0.5vw;
+        .el-date-editor--daterange.el-input__inner {
+          width: 440px;
+        }
+      }
+      .el-form-item__label {
+        text-align: center;
+        color: #fff;
+      }
+      .el-form-item__content {
+        .el-input__inner {
+          // width: 300px;
+          border-radius: 0px;
+          border: 1px solid #3d505e;
+          // border: 0.5px dashed;
+          background: #283436;
+          color: #fff;
+        }
+
+        /* 查询框点击颜色变化 */
+        .el-input__inner:focus,
+        .el-input__inner:hover {
+          border-color: #1b3736;
+        }
+        .el-range-input {
+          color: #fff;
+          background: #283436;
+        }
+      }
+    }
+    /deep/.el-range-separator {
+      color: #fff;
+      width: 10%;
+    }
+    /deep/.el-input__icon.el-range__close-icon {
+      display: none;
+    }
+    .btn {
+      margin-left: 8px;
+      margin-right: 2px;
+    }
+    .el-button {
+      width: 70px;
+      height: 4.1vh;
+      border: 1px solid #4a6072;
+      color: #fff;
+      border-radius: 0px !important;
+      background: #323f43;
+    }
+    .el-button:focus,
+    .el-button:hover {
+      color: #34e1b3;
+      border: 2px solid #137868;
+      background: url("~@/assets/companyFile/2121.png") no-repeat !important;
+      background-size: 100% 100% !important;
+    }
+  }
+  .search_table {
+    width: 96vw;
+    height: 67vh;
+    // border: 0.1px solid #2f6363;
+  }
+}
+.table_pagination {
+  width: 96vw;
+  height: 5vh;
+  /deep/.el-input--suffix .el-input__inner {
+    color: #fff;
+    border: 0.1px solid #277f79;
+    border-radius: 0px;
+    background: rgba(0, 0, 0, 0);
+    width: 5vw;
+    // height: 2.6vh;
+    // line-height: 2.6vh;
+  }
+  /deep/.el-input__icon {
+    color: #fff;
+    line-height: 2.6vh;
+    height: 2.6vh;
+  }
+  /deep/.el-pagination {
+    margin-left: 65%;
+    margin-top: 2vh;
+    .el-pagination__total {
+      color: #fff;
+    }
+    .el-input__inner {
+      border-radius: 0px;
+      border: 0.1px solid #277f79;
+      background: #3c4b4a;
+      color: #fff;
+    }
+    .btn-prev {
+      border-radius: 0px;
+      border: 0.1px solid #277f79;
+      background: #3c4b4a;
+      color: #fff;
+    }
+    ul {
+      li {
+        border: 0.1px solid #277f79;
+        background: #3c4b4a;
+        color: #fff;
+      }
+    }
+    .btn-next {
+      border: 0.1px solid #277f79;
+      border-radius: 0px;
+      background: #3c4b4a;
+      color: #fff;
+    }
+    .el-pager {
+      li {
+        border: 0.1px solid #34a6a6;
+        background: #3c4b4a !important;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/closeLoopDispose/components/myCourseDetail.vue b/src/views/closeLoopDispose/components/myCourseDetail.vue
new file mode 100644
index 0000000..f09e9b8
--- /dev/null
+++ b/src/views/closeLoopDispose/components/myCourseDetail.vue
@@ -0,0 +1,72 @@
+<template>
+  <!-- 我的流程详情 -->
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="表单信息" name="first">
+        <MyCourseDetailForm ref="myCourseDetailForm"></MyCourseDetailForm>
+      </el-tab-pane>
+      <el-tab-pane label="流程图" name="second">流程图</el-tab-pane>
+      <el-tab-pane label="流转记录" name="third">流转记录</el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+import MyCourseDetailForm from "./myCourseDetailForm";
+export default {
+  name: "MyCourseDetail",
+  components:{
+    MyCourseDetailForm
+  },
+  data() {
+    return {
+      activeName: "first",
+    };
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.el-tabs__active-bar.is-top {
+  display: none;
+  background: #33cccc;
+}
+/deep/.el-tabs__nav-wrap::after {
+  height: 1px;
+  background: #5b748c;
+}
+/deep/.el-tabs__item.is-top {
+  color: #fff;
+  font-size: 17px;
+  padding-left: 20px !important;
+  padding-right: 20px;
+  //   margin-right: 20px;
+}
+/deep/.el-tabs__item.is-top.is-active {
+  padding-left: 20px;
+  padding-right: 20px;
+  color: #fff;
+  font-size: 17px;
+  border-bottom: 4px solid #33cccc;
+  text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0),
+    #3a5856,
+    #3b746c
+  ) !important;
+}
+/deep/.el-tabs__item.is-top:focus,
+.el-tabs__item.is-top:hover {
+  padding-left: 20px;
+  padding-right: 20px;
+  color: #fff;
+  font-size: 17px;
+  border-bottom: 4px solid #33cccc;
+  text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0),
+    #3a5856,
+    #3b746c
+  ) !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/closeLoopDispose/components/myCourseDetailForm.vue b/src/views/closeLoopDispose/components/myCourseDetailForm.vue
new file mode 100644
index 0000000..d058fee
--- /dev/null
+++ b/src/views/closeLoopDispose/components/myCourseDetailForm.vue
@@ -0,0 +1,320 @@
+<template>
+  <!-- 处置详情的表单信息 -->
+  <div>
+    <div class="basic_message">
+      <div class="basic_message_title">基本信息</div>
+      <div class="basic_message_body">
+        <div class="basic_message_text_one">
+          <div class="basic_message_text">流程名称:</div>
+          <div class="basic_message_text">流程类型:</div>
+          <div class="basic_message_text">预警时间:</div>
+          <div class="basic_message_text">预警等级:</div>
+        </div>
+        <!-- 此列为数据展示 -->
+        <div class="basic_message_value_one">
+          <div class="basic_message_value">
+            宁波市北越石化有限公司-核酸检测率-异常处置
+          </div>
+          <div class="basic_message_value">防疫安全</div>
+          <div class="basic_message_value">2023-06-06 12:53:30</div>
+          <div class="basic_message_value">二级</div>
+        </div>
+        <div class="basic_message_text_two">
+          <div class="basic_message_text">企业名称:</div>
+          <div class="basic_message_text">流程状态:</div>
+          <div class="basic_message_text">预警指标:</div>
+        </div>
+        <!-- 此列为数据展示 -->
+        <div class="basic_message_value_two">
+          <div class="basic_message_value_tag">宁波市北越石化有限公司</div>
+          <div class="basic_message_value">进行中</div>
+          <div class="basic_message_value">核算检测率</div>
+        </div>
+      </div>
+    </div>
+    <div class="course_idea">
+      <div class="course_idea_title">流转意见</div>
+      <div class="course_idea_body">
+        <!-- 遍历展示人员信息 -->
+        <div
+          v-for="item in course_list"
+          :key="item.id"
+          class="course_idea_person"
+        >
+          <div class="course_idea_person_img">
+            <el-image :src="item.personUrl">
+              <div slot="error" class="image-slot">
+                <img src="../../../assets/companyFile/avatar.png" alt="" />
+              </div>
+            </el-image>
+            <div class="course_idea_person_information">
+              <div class="course_idea_person_name">{{ item.name }}</div>
+              <div class="course_idea_person_team">{{ item.team }}</div>
+            </div>
+          </div>
+          <div class="course_idea_person_text">
+            <!-- 第一行，处理意见 -->
+            <div class="dispose_idea">
+              <div class="course_text">处理意见:</div>
+              <div class="course_value">{{ item.course_value }}</div>
+            </div>
+            <!-- 第二行，附件 按需显示或者隐藏 -->
+            <div v-if="attachment_show" class="attachment">
+              <div class="course_text">附件:</div>
+              <!-- 此处后面会改为下载图片链接 -->
+              <div class="course_value">{{ item.attachment_value }}</div>
+            </div>
+            <!-- 第三行，抄送人 -->
+            <div class="send_person">
+              <div class="course_text">抄送人:</div>
+              <div class="course_value">{{ item.send_person }}</div>
+            </div>
+            <!-- 第四行，时间 -->
+            <div class="course_time">
+              <div class="course_text">时间:</div>
+              <div class="course_value">{{ item.course_time }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      attachment_show: true, // 附件 按需显示或者隐藏
+      course_list: [
+        {
+          id: "1",
+          personUrl: "../../../assets/companyFile/avatar.png",
+          name: "吴沁",
+          team: "技侦大队",
+          course_value:
+            "2022年8月20日0时32分,我队接到预警称浙江浙江鑫甬生物化工股份有限公司存在运输车辆频繁违章情况。接报后值班民警于立即到达现场,经现场了解到:危化品运输车(浙B2M50R)为外来租赁货车,司机王某(身份证号:42109119880717****)疑似前科重点人员。目前司机已经带回所以便进一步调查。2022年8月20日0时32分,我队接到预警称浙江浙江鑫甬生物化工股份有限公司存在运输车辆频繁违章情况。接报后值班民警于立即到达现场,经现场了解到:危化品运输车(浙B2M50R)为外来租赁货车,司机王某(身份证号:42109119880717****)疑似前科重点人员。目前司机已经带回所以便进一步调查。",
+          attachment_value: "20220820现场处置照片.jpg",
+          send_person: "蔡坤、黄毅、李丹丹、张强强",
+          course_time: "2022-11-13  12:10:08",
+        },
+        {
+          id: "2",
+          personUrl: "../../../assets/companyFile/avatar.png",
+          name: "吴沁",
+          team: "技侦大队",
+          course_value:
+            "2022年8月26日12时许,经过分析,我队决定对浙江浙江鑫甬生物化工股份有限公司的外来租赁危化品运输车(浙B2M50R)司机王某(身份证号:42109119880717****）做出吊销货车驾照处罚，立即执行。",
+        },
+        {
+          id: "3",
+          personUrl: "../../../assets/companyFile/avatar.png",
+          name: "吴沁",
+          team: "技侦大队",
+          course_value:
+            "2022年8月26日12时许,经过分析,我队决定对浙江浙江鑫甬生物化工股份有限公司的外来租赁危化品运输车(浙B2M50R)司机王某(身份证号:42109119880717****）做出吊销货车驾照处罚，立即执行。",
+        },
+        {
+          id: "4",
+          personUrl: "../../../assets/companyFile/avatar.png",
+          name: "吴沁",
+          team: "技侦大队",
+          course_value:
+            "2022年8月20日0时32分,我队接到预警称浙江浙江鑫甬生物化工股份有限公司存在运输车辆频繁违章情况。接报后值班民警于立即到达现场,经现场了解到:危化品运输车(浙B2M50R)为外来租赁货车,司机王某(身份证号:42109119880717****)疑似前科重点人员。目前司机已经带回所以便进一步调查。2022年8月20日0时32分,我队接到预警称浙江浙江鑫甬生物化工股份有限公司存在运输车辆频繁违章情况。接报后值班民警于立即到达现场,经现场了解到:危化品运输车(浙B2M50R)为外来租赁货车,司机王某(身份证号:42109119880717****)疑似前科重点人员。目前司机已经带回所以便进一步调查。",
+          attachment_value: "20220820现场处置照片.jpg",
+          send_person: "蔡坤、黄毅、李丹丹、张强强",
+          course_time: "2022-11-13  12:10:08",
+        },
+      ],
+    };
+  },
+};
+</script>
+<style lang="less" scoped>
+.basic_message {
+  width: 95.9vw;
+  height: 22vh;
+  border: 0.1px solid #3f5564;
+  //   background: url("~@/assets/companyFile/course_01.png") no-repeat !important;
+  //   background-size: 100% 100% !important;
+  .basic_message_title {
+    width: 94vw;
+    height: 4vh;
+    margin-left: 1vw;
+    border-bottom: 0.1px solid #3f5564;
+    line-height: 4vh;
+    color: #fff;
+    text-shadow: 0 0 9px #ff8b4e;
+  }
+  .basic_message_body {
+    width: 94vw;
+    height: 16vh;
+    margin-top: 0.5vh;
+    margin-left: 1vw;
+    // border: 0.1px solid #3f5564;
+    display: flex;
+    .basic_message_text_one,
+    .basic_message_text_two {
+      width: 5vw;
+      height: 16vh;
+      // background: #ff8b4e;
+      display: flex;
+      flex-direction: column;
+      .basic_message_text {
+        width: 5vw;
+        height: 4vh;
+        line-height: 4vh;
+        color: rgb(230, 207, 207);
+        text-align: right;
+      }
+    }
+    .basic_message_value_one {
+      width: 30vw;
+      height: 16vh;
+      //   background: #ff8b4e;
+      display: flex;
+      flex-direction: column;
+      .basic_message_value {
+        width: 30vw;
+        height: 4vh;
+        line-height: 4vh;
+        color: #fff;
+        text-align: left;
+      }
+    }
+    .basic_message_value_two {
+      width: 52vw;
+      height: 16vh;
+      //   background: #ff8b4e;
+      display: flex;
+      flex-direction: column;
+      .basic_message_value_tag {
+        // background: #ff8b4e;
+        width: 52vw;
+        height: 4vh;
+        line-height: 4vh;
+        color: #409eff;
+      }
+      .basic_message_value {
+        width: 52vw;
+        height: 4vh;
+        line-height: 4vh;
+        color: #fff;
+        text-align: left;
+      }
+    }
+  }
+}
+.course_idea {
+  width: 95.9vw;
+  height: 47vh;
+  margin-top: 2vh;
+  border: 0.1px solid #3f5564;
+  .course_idea_title {
+    width: 94vw;
+    height: 4vh;
+    margin-left: 1vw;
+    border-bottom: 0.1px solid #3f5564;
+    line-height: 4vh;
+    color: #fff;
+    text-shadow: 0 0 9px #ff8b4e;
+  }
+}
+.course_idea_body {
+  width: 95.9vw;
+  height: 42vh;
+  overflow-y: scroll;
+}
+.course_idea_body::-webkit-scrollbar {
+  display: none;
+  width: 6px;
+  background-color: #5e666a;
+  border-radius: 4px;
+}
+
+.course_idea_body::-webkit-scrollbar-thumb {
+  display: none;
+  width: 5px;
+  background-color: #3c4b4a;
+  border-radius: 4px;
+}
+/deep/.el-descriptions__header {
+  margin-bottom: 0px;
+  text-shadow: 0 0 9px #ff8b4e;
+  height: 6vh;
+  line-height: 6vh;
+  color: #fff;
+}
+/deep/.el-descriptions__title {
+  margin-left: 10px;
+}
+/deep/.el-descriptions__body {
+  color: #fff;
+  background: rgba(0, 0, 0, 0);
+}
+/deep/.el-descriptions-item.el-descriptions-item__cell {
+  width: 50%;
+}
+/* 个人信息不固定高度，给个人信息自由展示空间 */
+.course_idea_person {
+  width: 94vw;
+  border: 0.1px solid #3f5564;
+  background: rgba(209, 199, 199, 0.1);
+  margin-top: 1vh;
+  margin-left: 1vw;
+  display: flex;
+  .course_idea_person_img {
+    width: 10vw;
+    height: 7vh;
+    margin-left: 1.5vw;
+    // border: 0.1px solid #3f5564;
+    display: flex;
+    .el-image {
+      margin-top: 0.5vh;
+      width: 2.7vw;
+      height: 5vh;
+      img {
+        width: 2.7vw;
+        height: 5vh;
+      }
+    }
+    .course_idea_person_information {
+      margin-left: 1vw;
+      display: flex;
+      flex-direction: column;
+      .course_idea_person_name {
+        // color: rgb(230, 207, 207);
+        color: #fff;
+        font-weight: 600;
+        height: 3vh;
+        line-height: 3vh;
+      }
+      .course_idea_person_team {
+        color: rgb(230, 207, 207);
+        font-size: 14px;
+        height: 3vh;
+        line-height: 3vh;
+      }
+    }
+  }
+  .course_idea_person_text {
+    width: 75vw;
+    margin-left: 1vw;
+    // border: 0.1px solid #3f5564;
+    .dispose_idea,
+    .attachment,
+    .send_person,
+    .course_time {
+      display: flex;
+    }
+    .course_text {
+      width: 4vw;
+      color: rgb(230, 207, 207);
+    }
+    .course_value {
+      width: 65vw;
+      color: #fff;
+      text-align: left;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/closeLoopDispose/index.vue b/src/views/closeLoopDispose/index.vue
index fc23d9a..8e1449b 100644
--- a/src/views/closeLoopDispose/index.vue
+++ b/src/views/closeLoopDispose/index.vue
@@ -4,24 +4,56 @@
     <div class="topZS"></div>
     <div class="bottomZS"></div>
     <div slot="header" class="clearfix">
-      <span>闭环处置</span>
+      <el-breadcrumb class="head_title" separator-class="el-icon-arrow-right">
+        <!-- 负责头部展示的面包屑, 不和内部tab标签同名 -->
+        <el-breadcrumb-item @click.native="back_home_page"
+          >闭环处置</el-breadcrumb-item
+        >
+        <el-breadcrumb-item v-if="is_flag === '1'">处置详情</el-breadcrumb-item>
+      </el-breadcrumb>
     </div>
-    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-      <el-tab-pane label="我的流程" name="first">我的流程</el-tab-pane>
-      <el-tab-pane label="代办任务" name="second">代办任务</el-tab-pane>
+    <el-tabs v-if="is_flag === '0'" v-model="activeName">
+      <el-tab-pane label="我的流程" name="first">
+        <MyCourse
+          ref="myCourse"
+          @change_to_detail="change_to_detail"
+        ></MyCourse>
+      </el-tab-pane>
+      <el-tab-pane label="代办任务(7)" name="second">代办任务</el-tab-pane>
       <el-tab-pane label="已办任务" name="third">已办任务</el-tab-pane>
       <el-tab-pane label="抄送我的" name="fourth">抄送我的</el-tab-pane>
     </el-tabs>
+    <MyCourseDetail
+      ref="myCourseDetail"
+      v-else-if="is_flag === '1'"
+    ></MyCourseDetail>
   </el-card>
 </template>
 <script>
+import MyCourse from "./components/myCourse";
+import MyCourseDetail from "./components/myCourseDetail";
 export default {
   name: "CloseLoopDispose",
+  components: {
+    MyCourse,
+    MyCourseDetail,
+  },
   data() {
     return {
       activeName: "first",
+      is_flag: "0", // 面包屑显示 tab对应详情页显示
     };
   },
+  methods: {
+    // 我的流程子组件触发，点击使之切换到详情页面
+    change_to_detail() {
+      this.is_flag = "1";
+    },
+    // 点击回归首页
+    back_home_page() {
+      this.is_flag = "0";
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -38,27 +70,65 @@ export default {
 }
 /* card统一样式 */
 /deep/.el-card__header {
-  border-bottom: 1px solid #a1a1a1 !important;
+  margin-top: 1vh;
+  border-bottom: 1px solid #5b748c !important;
   .clearfix {
-    span {
+    .head_title {
+      height: 2vh;
+      line-height: 2vh;
       font-size: 17px;
       font-weight: 400;
-      color: #fff;
+      color: #fff !important;
       text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
     }
   }
 }
+/deep/.el-breadcrumb__inner {
+  color: #fff !important;
+  cursor: pointer;
+}
 /deep/.el-tabs__active-bar.is-top {
+  display: none;
   background: #33cccc;
 }
+/deep/.el-tabs__nav-wrap::after {
+  height: 1px;
+  background: #5b748c;
+}
 /deep/.el-tabs__item.is-top {
   color: #fff;
   font-size: 17px;
+  padding-left: 20px !important;
+  padding-right: 20px;
+  //   margin-right: 20px;
+}
+/deep/.el-tabs__item.is-top.is-active {
+  padding-left: 20px;
+  padding-right: 20px;
+  color: #fff;
+  font-size: 17px;
+  border-bottom: 4px solid #33cccc;
+  text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0),
+    #3a5856,
+    #3b746c
+  ) !important;
 }
 /deep/.el-tabs__item.is-top:focus,
 .el-tabs__item.is-top:hover {
+  padding-left: 20px;
+  padding-right: 20px;
   color: #fff;
   font-size: 17px;
-  background: linear-gradient(to bottom, #284f49, #2f6363, #233b38) !important;
+  border-bottom: 4px solid #33cccc;
+  text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0),
+    #3a5856,
+    #3b746c
+  ) !important;
 }
 </style>
\ No newline at end of file