diff --git a/src/assets/image/pathdetails/circle.png b/src/assets/image/pathdetails/circle.png
new file mode 100644
index 0000000..4128392
Binary files /dev/null and b/src/assets/image/pathdetails/circle.png differ
diff --git a/src/assets/scss/common.scss b/src/assets/scss/common.scss
index 6007b26..3dd6f2f 100644
--- a/src/assets/scss/common.scss
+++ b/src/assets/scss/common.scss
@@ -5,3 +5,45 @@ body {
 	 padding: 0;
     // overflow-y: auto;
 }
+//标签tag样式-----------------------------------------------------------------
+// 必修
+.tag1{
+	width: 80px;
+	height: 26px;
+	background: linear-gradient(90deg, #84aad2 0%, #a4c5e9 100%);
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 14px;
+	font-weight: 500;
+	color: #ffffff;
+}
+// 在线
+.tag2{
+	width: 78px;
+	height: 24px;
+	border: 1px solid #85AAD2;
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 14px;
+	font-weight: 500;
+	color: #85AAD2;
+}
+// 标签
+.tag3{
+	width: 78px;
+	height: 24px;
+	border: 1px solid rgba(255, 185, 109, 1);
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 14px;
+	font-weight: 500;
+	color: rgba(255, 185, 109, 1);
+}
+
+//标签tag样式-----------------------------------------------------------------
\ No newline at end of file
diff --git a/src/components/index.js b/src/components/index.js
new file mode 100644
index 0000000..6030d19
--- /dev/null
+++ b/src/components/index.js
@@ -0,0 +1,4 @@
+import CompulsoryTag from './tag/CompulsoryTag.vue'
+export {
+	CompulsoryTag
+}
\ No newline at end of file
diff --git a/src/components/tag/CompulsoryTag.vue b/src/components/tag/CompulsoryTag.vue
new file mode 100644
index 0000000..a11c176
--- /dev/null
+++ b/src/components/tag/CompulsoryTag.vue
@@ -0,0 +1,27 @@
+<!-- 必修标签 -->
+<template>
+  <div class="compulsoryTag">
+    <div class="btn">必修</div>
+  </div>
+</template>
+<script>
+export default {
+  name: "CompulsoryTag",
+};
+</script>
+<style scoped lang="scss">
+.compulsoryTag {
+  .btn {
+    width: 80px;
+    height: 26px;
+    background: linear-gradient(90deg, #84aad2 0%, #a4c5e9 100%);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: 500;
+    color: #ffffff;
+  }
+}
+</style>
diff --git a/src/components/tag/OnLine.vue b/src/components/tag/OnLine.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/roadmap/PathDetails.vue b/src/views/roadmap/PathDetails.vue
index e69de29..2017e0e 100644
--- a/src/views/roadmap/PathDetails.vue
+++ b/src/views/roadmap/PathDetails.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="pathdetails">
+    <!-- 面包屑导航 -->
+    <div class="crumb">
+      <div>产品经理学习路径图</div>
+      <div style="margin-left: 6px; margin-right: 6px">/</div>
+      <div style="font-weight: 700">路径图详情</div>
+    </div>
+    <!-- 面包屑导航 -->
+    <div class="pdname">中级产品经理</div>
+    <!-- 详细信息 -->
+    <div class="detailinfo">
+      <div class="detailL">
+        <div class="title">
+          <div class="titleL">序：产品经理从初级到中级</div>
+          <div class="titleR">
+            <img src="../../assets/image/pathdetails/circle.png" />
+            <div class="titleRT">进行中</div>
+          </div>
+        </div>
+        <div class="tag1">必修</div>
+        <div class="tag2">在线</div>
+        <div class="tag3">#通用力</div>
+      </div>
+      <div class="detailR"></div>
+    </div>
+    <!-- 详细信息 -->
+  </div>
+</template>
+
+<script>
+import { reactive, toRefs } from "vue";
+export default {
+  name: "PathDetails",
+  setup() {
+    const state = reactive({});
+    const handleClick = (tab, event) => {
+      console.log(tab, event);
+    };
+    return {
+      ...toRefs(state),
+      handleClick,
+    };
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss">
+.pathdetails {
+  .crumb {
+    color: #fff;
+    display: flex;
+    font-size: 14px;
+    line-height: 24px;
+  }
+  .pdname {
+    font-size: 20px;
+    font-weight: 800;
+    color: #ffffff;
+    margin-top: 17px;
+  }
+  .detailinfo {
+    width: 100%;
+    margin-top: 24px;
+    display: flex;
+    .detailL {
+      flex: 1;
+      margin-right: 20px;
+      background: #ffffff;
+      border-radius: 8px;
+      padding-left: 45px;
+      padding-right: 45px;
+      padding-top: 23px;
+      .title {
+        height: 50px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: rgba(249, 249, 249, 1);
+        margin-top: 27px;
+        .titleL {
+          font-size: 16px;
+          font-weight: 800;
+          color: #333333;
+          margin-left: 27px;
+        }
+        .titleR {
+          display: flex;
+          align-items: center;
+        }
+        .titleR .titleRT {
+          font-size: 16px;
+          font-weight: 800;
+          color: #0060ff;
+          margin-right: 73px;
+          margin-left: 2px;
+        }
+      }
+    }
+    .detailR {
+      width: 434px;
+      min-height: 557px;
+      background-color: rgba(255, 255, 255, 1);
+      border-radius: 8px;
+    }
+  }
+}
+</style>