From 7d8746753578d9d98e06f7e976e5def48cd45ace Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=99=93=E9=B8=BD?= <lixg@dongwu-inc.com>
Date: Thu, 15 Sep 2022 09:07:55 +0800
Subject: [PATCH] =?UTF-8?q?style:=E5=90=88=E5=B9=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/image/pathdetails/circle.png | Bin 0 -> 295 bytes
 src/assets/scss/common.scss             |  42 +++++++++
 src/components/index.js                 |   4 +
 src/components/tag/CompulsoryTag.vue    |  27 ++++++
 src/components/tag/OnLine.vue           |   0
 src/views/roadmap/PathDetails.vue       | 109 ++++++++++++++++++++++++
 6 files changed, 182 insertions(+)
 create mode 100644 src/assets/image/pathdetails/circle.png
 create mode 100644 src/components/index.js
 create mode 100644 src/components/tag/CompulsoryTag.vue
 create mode 100644 src/components/tag/OnLine.vue

diff --git a/src/assets/image/pathdetails/circle.png b/src/assets/image/pathdetails/circle.png
new file mode 100644
index 0000000000000000000000000000000000000000..41283924955c747eb0783a0d23ffe9fa415c455c
GIT binary patch
literal 295
zcmV+?0oeYDP)<h;3K|Lk000e1NJLTq000XB000XJ1^@s6sjPP<00001b5ch_0Itp)
z=>Px#;Ymb6R47xG(Z4POP!z}U&()-Yu(AjPlRwWP_SUG4#51svPCNpVCOTHl;xz~p
zi%!gfXwn?HO{<Y6#F=hRzUOz&{r!?b?ZkqvJ#1nQ&$v=>te&1SmU?U@HgJLI@8RL&
z6=mn?I;q4WZZLzEQ1kA=q-A3cgfjBLdQy#3VOO}+NTm_wO5}~Xf0C8km{+i-p6*8A
z?O2iIemldTD0(xll{zDEDT=0KrZZFys~YM4cjdosu12%>$>eO{#%<rWrmmU^k3K9Z
tIK<Y_jeq(4Gr|3Sg0pz(CwMeS@C#F>RMA4d#d81v002ovPDHLkV1jwQhtU84

literal 0
HcmV?d00001

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>