diff --git a/front/src/assets/assignCase/assignCase_click.png b/front/src/assets/assignCase/assignCase_click.png
new file mode 100644
index 00000000..b5e62fd9
Binary files /dev/null and b/front/src/assets/assignCase/assignCase_click.png differ
diff --git a/front/src/assets/assignCase/assignCase_roadebg.png b/front/src/assets/assignCase/assignCase_roadebg.png
new file mode 100644
index 00000000..6bc96039
Binary files /dev/null and b/front/src/assets/assignCase/assignCase_roadebg.png differ
diff --git a/front/src/views/assignCase/components/AssignCaseDetailPage.vue b/front/src/views/assignCase/components/AssignCaseDetailPage.vue
new file mode 100644
index 00000000..2675190c
--- /dev/null
+++ b/front/src/views/assignCase/components/AssignCaseDetailPage.vue
@@ -0,0 +1,268 @@
+<!--
+ * @Author: hisense.zhangfeihu
+ * @Date: 2022-06-13 10:22:27
+ * @LastEditors: hisense.zhangfeihu
+ * @LastEditTime: 2022-06-13 14:31:19
+ * @Description: 赋能案例-详情页
+-->
+<template>
+  <div class="assign-case-detail-page">
+    <!--详情页头部-->
+    <div class="assign-case-detail-page-header">
+      <div class="assign-case-detail-page-header-son">
+        <div class="assign-case-detail-page-header-son-left"></div>
+        <div class="assign-case-detail-page-header-son-right">
+          <div class="assign-case-detail-page-header-son-right-title">
+            {{ dataFrom.name }}
+          </div>
+          <div class="assign-case-detail-page-header-son-right-click">
+            <span>点击查看</span>
+            <span></span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="assign-case-detail-page-content">
+      <div class="assign-case-detail-page-content-son">
+        <div class="assign-case-detail-page-content-left">
+          <div
+            class="assign-case-detail-page-content-left-border"
+            id="assign-case-detail-page-content-left-border-id"
+          >
+            <div
+              v-for="(item, index) in dataFrom.content"
+              :key="index"
+              @click="tabSwitch(item, index)"
+              :class="
+                tabName == item.title
+                  ? 'assign-case-detail-page-content-left-border-click'
+                  : ''
+              "
+            >
+              {{ item.title }}
+            </div>
+          </div>
+        </div>
+        <div class="assign-case-detail-page-content-center">
+          <div
+            class="assign-case-detail-page-content-center-card"
+            v-for="(item, index) in dataFrom.content"
+            :key="index"
+            :id="'assign-case-detail-page-content-center-card' + index"
+          >
+            <div class="assign-case-detail-page-content-center-card-title">
+              {{ item.title }}
+            </div>
+            <div
+              class="assign-case-detail-page-content-center-card-description"
+            >
+              {{ item.description }}
+              <p v-if="item.descriptions">{{ item.descriptions }}</p>
+            </div>
+          </div>
+        </div>
+        <div class="assign-case-detail-page-content-right">
+          <div class="assign-case-detail-page-content-right-card">
+            <div class="assign-case-detail-page-content-right-card-title">
+              <span></span>
+              <span>其他案例</span>
+            </div>
+            <div class="assign-case-detail-page-content-right-card-content">
+              <p>{{ dataFrom.else.name }}</p>
+              <p>{{ dataFrom.else.time }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  let dataFrom = ref({
+    name: '道路保洁监管场景',
+    content: [
+      {
+        title: '案例背景',
+        description:
+          '融合市生态环境局出租车走航大气检测数据、城管局渣土车及环卫作业数据、住建局建筑工地数据、城市云脑视频监控等数据，结合时空大数据分析、预测预警分析等手段，对全市道路污染重点路段进行线索分析、作业辅导',
+      },
+      {
+        title: '业务挑战',
+        description:
+          '目前城市道路污染情况缺少主动发现手段，对渣土车及污染投诉事件，缺乏可参考线索等辅助执法手段',
+      },
+      {
+        title: '解决方案',
+        description:
+          '当道路发生污染(PM10数值>200)时，触发道路污染事件，并通过时空算法模型智能分析污染线索，如建筑工地扬尘外溢、渣土车遗撒、环卫作业问题等。',
+        descriptions:
+          '系统实现预警事件与地图图层数据关联展示，当用户点击预警事件后，中间地图也会展示预警事件发生时段内的污染路段名称、污染状态，以及路段周边的工地、渣土车、环卫车轨迹及监控摄像头位置。同时屏幕右侧显示对应的工地、渣土车、摄像头列表信息。',
+      },
+      {
+        title: '案例成效',
+        description:
+          '实现城市运行智能监测，自动告警预警问题路段。为城管局渣土车执法提供线索，也可以快速定位疑似问题工地和渣土车。',
+        descriptions:
+          '根据道路污染情况，对环卫作业进行调度部署、辅助决策，实现环卫作业调度智能化。',
+      },
+    ],
+    else: {
+      name: '文明创城案例',
+      time: '2022-01-01 12:00',
+    },
+  })
+  let tabName = ref('案例背景')
+  const tabSwitch = (item, index) => {
+    tabName.value = item.title
+    if (index != 0) {
+      let top =
+        document.querySelector(
+          '#assign-case-detail-page-content-center-card' + index
+        ).offsetTop -
+        document.querySelector(
+          '#assign-case-detail-page-content-center-card' + (index - 1)
+        ).offsetHeight
+      let view = document.getElementById(
+        'assign-case-detail-page-content-left-border-id'
+      )
+      view.style.top =
+        document.querySelector(
+          '#assign-case-detail-page-content-center-card' + (index - 1)
+        ).offsetHeight + 'px'
+      console.log('view.style.top', view.style.top)
+      document.documentElement.scrollTop = top
+      document.body.scrollTop = top
+    } else {
+      let top = 0
+      let view = document.getElementById(
+        'assign-case-detail-page-content-left-border-id'
+      )
+      document.documentElement.scrollTop = top
+      document.body.scrollTop = top
+      view.style.top = '490px'
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .assign-case-detail-page {
+    position: relative;
+    top: 64px;
+    .assign-case-detail-page-header {
+      height: 370px;
+      background: url('~@/assets/assignCase/assignCase_bg2.png') no-repeat;
+      background-position: center;
+      background-size: cover;
+      padding-top: 120px;
+      .assign-case-detail-page-header-son {
+        width: 900px;
+        height: 250px;
+        border-radius: 10px;
+        background: #fff;
+        margin: auto;
+        box-shadow: 5px 5px 20px #f2f3fb;
+        display: flex;
+        align-items: center;
+        padding: 20px;
+        .assign-case-detail-page-header-son-left {
+          height: 200px;
+          width: 290px;
+          background: url('~@/assets/assignCase/assignCase_roadebg.png')
+            no-repeat;
+          background-position: center;
+          background-size: cover;
+          margin-right: 30px;
+        }
+        .assign-case-detail-page-header-son-right {
+          .assign-case-detail-page-header-son-right-title {
+            color: #000000;
+            font-size: 36px;
+            line-height: 36px;
+            margin-bottom: 40px;
+          }
+          .assign-case-detail-page-header-son-right-click {
+            color: #526aff;
+            font-size: 20px;
+            line-height: 20px;
+            cursor: pointer;
+            span {
+              display: inline-block;
+            }
+            span:first-child {
+              margin-right: 10px;
+            }
+            span:last-child {
+              width: 20px;
+              height: 10px;
+              background: url('~@/assets/assignCase/assignCase_click.png')
+                no-repeat;
+              background-position: center;
+              background-size: cover;
+            }
+          }
+        }
+      }
+    }
+    .assign-case-detail-page-content {
+      padding-top: 60px;
+      display: flex;
+      justify-content: center;
+      .assign-case-detail-page-content-son {
+        width: 1300px;
+        display: flex;
+      }
+      .assign-case-detail-page-content-left {
+        width: 167px;
+        .assign-case-detail-page-content-left-border {
+          border-right: 1px #e5e5e5 solid;
+          padding-top: 5px;
+          padding-bottom: 5px;
+          position: fixed;
+          top: 490px;
+          div {
+            height: 30px;
+            padding-right: 70px;
+            margin-bottom: 30px;
+            font-size: 24px;
+            color: #666666;
+            line-height: 30px;
+            cursor: pointer;
+          }
+          div:last-child {
+            margin-bottom: 0px;
+          }
+          .assign-case-detail-page-content-left-border-click {
+            padding-right: 66px;
+            border-right: 4px #526aff solid;
+            color: #526aff;
+          }
+        }
+      }
+      .assign-case-detail-page-content-center {
+        width: 845px;
+        padding: 0 40px 100px 35px;
+        .assign-case-detail-page-content-center-card {
+          margin-bottom: 60px;
+          .assign-case-detail-page-content-center-card-title {
+            font-size: 28px;
+            color: #000000;
+            font-weight: bold;
+            line-height: 28px;
+            margin-bottom: 35px;
+          }
+          .assign-case-detail-page-content-center-card-description {
+            color: #333333;
+            font-size: 20px;
+            line-height: 34px;
+          }
+        }
+      }
+      .assign-case-detail-page-content-right {
+        width: 270px;
+        border: 1px red solid;
+      }
+    }
+  }
+</style>