From 9f839497a88dd645d0418e03c7e068e059686070 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B2=B3=E4=BD=B3=E9=91=AB?= <yuejx@dongwu-inc.com>
Date: Tue, 27 Sep 2022 18:14:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=9B=B4=E6=96=B0=E5=85=B6=E4=BB=96?=
 =?UTF-8?q?=E6=B4=BB=E5=8A=A8=E9=A1=B5=E9=9D=A2=E5=92=8C=E8=B7=AF=E5=BE=84?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/image/activities/bg.png      | Bin 0 -> 2238 bytes
 src/assets/image/activities/no.png      | Bin 0 -> 454 bytes
 src/assets/image/activities/trumpet.png | Bin 0 -> 806 bytes
 src/assets/image/activities/yes.png     | Bin 0 -> 347 bytes
 src/assets/image/pathmap/personal.png   | Bin 0 -> 528 bytes
 src/assets/image/pathmap/photo.png      | Bin 0 -> 6001 bytes
 src/assets/image/pathmap/study.png      | Bin 0 -> 521 bytes
 src/views/activities/activities.vue     | 274 +++++++++++++++
 src/views/pathmap/pathmap.vue           | 436 ++++++++++++++++++++++++
 9 files changed, 710 insertions(+)
 create mode 100644 src/assets/image/activities/bg.png
 create mode 100644 src/assets/image/activities/no.png
 create mode 100644 src/assets/image/activities/trumpet.png
 create mode 100644 src/assets/image/activities/yes.png
 create mode 100644 src/assets/image/pathmap/personal.png
 create mode 100644 src/assets/image/pathmap/photo.png
 create mode 100644 src/assets/image/pathmap/study.png
 create mode 100644 src/views/activities/activities.vue
 create mode 100644 src/views/pathmap/pathmap.vue

diff --git a/src/assets/image/activities/bg.png b/src/assets/image/activities/bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..4d5f89371799213c00228c48338a0749159091f4
GIT binary patch
literal 2238
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
M07*qoM6N<$f&z;c*#H0l

literal 0
HcmV?d00001

diff --git a/src/assets/image/activities/no.png b/src/assets/image/activities/no.png
new file mode 100644
index 0000000000000000000000000000000000000000..86b9f64c18f6ab8cc1d127e3d0c86f393a5e0002
GIT binary patch
literal 454
zcmV;%0XhDOP)<h;3K|Lk000e1NJLTq000dD000dL1^@s6a_i)L00001b5ch_0Itp)
z=>Px$fJsC_R47w@k~>ITVGxDCx%)`rZ6ZDh8l$B}Is>*V%Gv}%x`1s^EK)?!Xqp94
z3yT$W6$=X$L@X0Xlh#*aW06#*HiaZ03c<VUf8^i0iyB?08<_LpoH1_BlA2Iy09*#F
z88`*oCrGX_#4j-UbBi%D7A{{AxLKeB2ySrs!#`j%B$D$CS}_I{E?#4{3WT?mZ!blp
zNlwyJMqW>N6zzhwQx>m`r>pK2KfpP%tg%>p51K^;FPb3J5-@k@hy>3<7=9j*`|kMX
zDr8O@9`p(H(zCYK!B&5Q?PIb0!?E6%VCT0O-*=R%4y0qF5FKE2#d$zm2wT|%PeWt#
z$T7Ybt5zceBCqrn)cZfEEi^Wc920jze?4dt^buiYd)e61@=wQF@4fcE7=?>Y%(fBr
zK8T){fPC#BBBVD~F1An_!8DCXJrKDN>zt(C#tr0@rZF1BY_vwf5n_|G)H^=d>2+;6
w1w1ZwlhiOMgINRE8FJr%6_V-C{)N286*wrStd;_f-v9sr07*qoM6N<$f{Q1-&j0`b

literal 0
HcmV?d00001

diff --git a/src/assets/image/activities/trumpet.png b/src/assets/image/activities/trumpet.png
new file mode 100644
index 0000000000000000000000000000000000000000..1f8434cfc53c89e33e7be350b6ff6b9634c0cbe8
GIT binary patch
literal 806
zcmV+>1KIqEP)<h;3K|Lk000e1NJLTq000sI000jN1^@s6>4u*Y00001b5ch_0Itp)
z=>Px%;7LS5R5(w4lwW9-br{D#-`{)QR<p*@)fQ{fj#H?MqS6@aFNHxX)IwV)H#_Eq
zVe7^?O{NzvC={deqC#C(5ZUl3jy2NFia@#uTsNi=vF(`KB5CP#JDu%4@B74Apb<x(
z>*x9K<@-F}M_i+7Hdy)fah{W-6Bx}$tR35_(NZHS$>}s#H_bhscm>C^z@LIdkmva`
zyL4pbSn_s4Eem4$?(3TUXNrt}L7nC}MU44a;${|j#;X?5DnSJA7z}$NGyMnae*Z*=
zSDsBa2=Aa7KhK2W#-oYutnNr#BIeP8Xe`c|QH`iI<IBj=mEF!SiFO`P#IcBpm+pT3
z<sam0hWw2w2X7f<Cd-0NTC~~TM6?;4mXSBd1V-1;UmRzzf}-HM4r^fA`l}x4X}zuS
zz!Mg^^MOr%;4A*V$yS82XH>u0_6n92LSCHCacW+ULiRJ||LffxC}#szjeRXO4}DQ@
z#J1tWjTULrNg0feB4{__DFRjvy{o}e=GUdI!4m^va3OX7*5r@TOyvPHMkL-d(-C0@
zFM}*%_3%!exEd(tGca?G)V&`s9njgkK6SEqgxVzQl`(il5v&^8acxDj!G+Y4jx{Hl
zjUS4PZ@{`8u0O)|T=pn3nuq`9B$b48s_=i0Y})#(AO5PP=E40>VzK5>Q7aMEPU@0u
zy%x3GHXLn{aa=HEFkwdb$OwaE6wYleZ4HX(FR%S+?c(H)xJAA~3%>R6KL^zl%{FP_
z8@5;;TLpIlW=19Ay5b$>13ntBU@VbispoMlcaGHfKJ_dgUtaFQo3=}=$83v#v9L#A
zs!mgWLjm8F&4F%pkd}BFaWORBcE*@Idh+L4H@aJgS7e(Xmy7K~);C#J*z$c<W~y}7
zHkiM#g2xo&HH=3Qr-A!|OT6&ghw5wkwW-4Q=PzO2)QR3(dM{nc+EqS4?Iv4L=CcMz
kyI{PKCz;))Y^nBt0J=X;+_&NI^8f$<07*qoM6N<$g4h6zfB*mh

literal 0
HcmV?d00001

diff --git a/src/assets/image/activities/yes.png b/src/assets/image/activities/yes.png
new file mode 100644
index 0000000000000000000000000000000000000000..570406b10450e343eb87eeab6cf9ebd1902fbcd7
GIT binary patch
literal 347
zcmV-h0i^zkP)<h;3K|Lk000e1NJLTq000dD000dL1^@s6a_i)L00001b5ch_0Itp)
z=>Px$6-h)vR47xOlDkR+K@^7ne`eRqmV#g_DEI(k6N{*5Z>0!6fQ8}{2-@0fE5vKB
zmXgLs1Y1$T2M{bblC0;KS=f*)8&Id3%lXbX=gbiOgClQObtly!jf4C!viUW&)&!s;
zl*MG|{d^|MT!X-DDN%@i%p%)tPi{Pivm6RQ+;R6H#>zl<Eqr!js|7GXOkOV^sti@e
zbb5U*)Ue>CyFms6&YUy>aw)`olZ(N!PhhVKGN93NZaXo%Ay5l30uGqGTpW?y3L8co
z!Zhs29SJ9?ce{ynO=-SJD(Se-B<Ly4+RLLpUTOL0whVMl<(dL$-d3GOr@e;4l-E?%
tJqa0!XkhpL`%ZbnKmUlHYy9f({Qy<bmFX``<;nm6002ovPDHLkV1l$^l=}bx

literal 0
HcmV?d00001

diff --git a/src/assets/image/pathmap/personal.png b/src/assets/image/pathmap/personal.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a0af84af480af174760fedc978dcac9bf34e3c2
GIT binary patch
literal 528
zcmV+r0`L8aP)<h;3K|Lk000e1NJLTq000pH000jN1^@s60<k0!00001b5ch_0Itp)
z=>Px$%1J~)R5(wSlRapYQ5c1v_a>1l4$?_z6ELlygP@Dz4<Zp%P?~foXwpUenMBi}
zMiEgQ;tv!Q)ImXqrYQ<S8Wpj#iXaGrAVP~uqJwl0Y${0d9r+p?N(q|W@p8_?dG9^1
zF`z(Cl&l$hfgtT1qwIMMTlBOJJI6hVXJ*W{!vMAmW~?`(%fQgoRqI#^=r14ITC2HT
z&gnbVxkrUHg&&JGzE?)N4l&YGS8VxWL86=-K{f<f{a)WZ=VHaK+{Xpog10Fo{&jGh
zd3qt~_OE3#nU3F`>zxIjBE2g_@_Sl>B)+81;>ga0+{($-qZQv2FQu*-I#~$k8)N@F
zNonw?p}RFzH$RR%c=H$X1lTwc9_wx`$*06Bf-9ymt4exq&;=F~T$l)tUHUJiuQbr>
z6uOVu4#4wYR7i#eL9?E8u^1U2@j*?;IZ#Tj4Z=%dX6T$(nH?{#EB^EieV-3*vOwUx
zK|kn5A)HS)g~Us#*9KcKMv<nQ6;E))u<jb{|8O(6)2~P4i#MD|#w7Qu<;IH1_qTFy
z>yR_b&Np^R*;;`$8rzf6F*EK+JZyJ&1iK9?#&LzBom_XYPwi~6=ChV1PW=HG#^1kU
S7rc!C0000<MNUMnLSTaGxaqwB

literal 0
HcmV?d00001

diff --git a/src/assets/image/pathmap/photo.png b/src/assets/image/pathmap/photo.png
new file mode 100644
index 0000000000000000000000000000000000000000..8a486d08435a74271755d68164de27cd4280ab0f
GIT binary patch
literal 6001
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

literal 0
HcmV?d00001

diff --git a/src/assets/image/pathmap/study.png b/src/assets/image/pathmap/study.png
new file mode 100644
index 0000000000000000000000000000000000000000..37087134839fec9978e8e3a6160c6aff1c411089
GIT binary patch
literal 521
zcmV+k0`~ohP)<h;3K|Lk000e1NJLTq000mG000jN1^@s6?Q>5r00001b5ch_0Itp)
z=>Px$!%0LzR5(wS(>rKWaTLe#@42aB5shFGQPU7|9Yhd>qA1cTh=|~$xU{K*uI=QM
z1Q#Dm97GX=g9r|>S*pgzRF@8l_$Usx4q`x3tAj#KhgMC!Ke>fo<4uJ4pZ>%7e>ms-
z&oMWntl+G{a{ll9#K>7PqaQ#8c+%>76FnFS!GyUPNpP#2vr|VZeO(cpjZ2W{QLDy3
zjgHyaLOt%LH7(=wuNCYGfUSf5dB-9z8?(^eQf&D6UqD9RB`%dO+L-{@HaJj{S?S)U
zLJ-^g@x<c26uWKpKr*ezX6%*dv1D2^W~^D2ct!ls6`BDP`9EkqB&b><t!@X3QTIi(
z^WfE$&44%83f~$^Gv+-w8Kl-*NgZvqgnG;`VK>H&=;mh~od@#knr4tMd<bV?FfWH8
zANXQM$5IcnYfm#Wd!MfM?G$J4EWZ0^55!EvFEksb@GrP&y_OO8#J&L7GBj|#4SO!*
zX|*=Je|2Pi%CX2z4?TJi8$KMGgPP!cIcFC_lbGsOo8CU$Q2dIpV^jToQ?Yj=<2GIk
z0h5UKxdnFkfWHgx5u>f{0>&<2r(n|Dtj^()#aPxd;0Fr7jLW|PT13y*j?^?r00000
LNkvXXu0mjfl$GxA

literal 0
HcmV?d00001

diff --git a/src/views/activities/activities.vue b/src/views/activities/activities.vue
new file mode 100644
index 0000000..4a4fb01
--- /dev/null
+++ b/src/views/activities/activities.vue
@@ -0,0 +1,274 @@
+<template>
+  <div class="activities">
+    <TitleHead text="【其他活动】管理者进阶腾飞班 - 专属线下活动"></TitleHead>
+     <div class="message">
+          <div class="yes"></div>
+          <div class="textmessage">签到成功</div>
+          <div class="no"></div>
+    </div>
+    <div class="main">
+      <div class="title">
+        <div class="titlemain">
+          <div class="timeposition">
+            <div class="time">
+              <img
+                style="width: 13px; height: 14.5px; margin-right: 5.5px"
+                src="../../assets/image/faceteach/time.png"
+              />
+              <div style="font-size: 12px; color: rgba(110, 123, 132, 1)">
+                2022-07-20 20:00-21:00
+              </div>
+            </div>
+            <div class="time" style="margin-top: 9px">
+              <img
+                style="width: 13px; height: 15px; margin-right: 5.5px"
+                src="../../assets/image/faceteach/position.png"
+              />
+              <div style="font-size: 12px; color: rgba(110, 123, 132, 1)">
+                大族广场
+              </div>
+            </div>
+          </div>
+          <div class="titlebtn">签到</div>
+        </div>
+      </div>
+    </div> 
+    <div class="notice">
+        <div class="noticebox">
+        <div class="mani">
+          <div class="lefttitle">
+            <div class="img"></div>
+            <div class="rightmain">
+              <div class="talk">活动公告</div>
+              <div class="box"></div>
+            </div>
+          </div>
+          <div class="content">
+            为拓宽人民群众的表达途径、畅听民意，及时了解和解决人民群众反映强烈的公共法律服务问题，我局将在浈江区公共法律服务中心开展领导干部接待活动，<br>现将2022年8月的活动安排公告如下：<br> 一、接待时间 <br>工作日上午9:00-12:00。 <br>二、接待地点 <br>浈江区公共法律服务中心（浈江区新韶镇乐土路3号曲仁田螺冲党群服务中心一楼）。<br>三、接待受理范围 <br>（一）听取人民群众对公共法律服务工作的批评和意见建议。 <br>（二）解答或接收公共法律服务相关业务咨询。
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="details">
+      <div class="teachbox">
+        <div class="teachmani">
+          <div class="lefttitle">
+            <div class="img"></div>
+            <div class="rightmain">
+              <div class="talk">活动详情</div>
+              <div class="box"></div>
+            </div>
+          </div>
+         <div class="content">
+            写字楼介绍<br>大族广场写字楼采用国际顶级硬件设施，美国OTIS电梯、麦克维尔中央空调、高端安防系统等商务空间新标准匹配项目在亦庄地标综合体的形象。写字楼空间设计由亚洲著名的室内空间设计大师之一梁景华设计，写字楼群由六栋(T1—T6)呈舰队排列的5A写字楼构成形成独特的舰队造型。<br>购物中心介绍<br>大族广场Mall&More位于北京经济技术开发区核心商圈荣华路，由荷兰鹿特丹缤纷市场设计师HANS VAN DA LEN 主持设计,秉持自然与未来和谐共生理念,倡导乐活有机、绿色环保的生活方式,传递生活美学。<br>大族广场Mall&More汇集众多知名优质品牌,7FRESH生 鲜超市、CGV星聚汇影城、中信书店、源力悦体等,集 购物、餐饮、娱乐、文化于一体,丰富的业态品类为消费 者提供城市生活的第三空间感受。<br>大族广场Mall&More以人为本,不断提升服务水平,升级 消费购物体验,致力于营造更加舒适的购物环境与空间打造有温度的品牌。同时根据春夏秋冬四季策划丰富多样的大型主题活动；为会员设置专属的沙龙活动，打造专属会员日等,与顾客近距离产生情感上的互动与链接为城市人们提供自由、放松、愉悦的社交空间与精神的栖息地。
+         </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+// import { reactive, toRefs } from "vue";
+import TitleHead from "@/components/TitleHead.vue";
+export default {
+  name: "BallotPage",
+  components: {
+    TitleHead,
+  },
+  setup() {},
+};
+</script>
+
+<style lang="scss">
+.activities {
+  width: 100%;
+  .main {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: -14.5px;
+    .title {
+      width: 90%;
+      height: 74px;
+      border-radius: 4px;
+      background-color: rgba(255, 255, 255, 1);
+      display: flex;
+      justify-content: center;
+      .titlemain {
+        width: 90%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .timeposition {
+          .time {
+            display: flex;
+            align-items: center;
+          }
+        }
+        .titlebtn {
+          width: 83px;
+          height: 33px;
+          background: #2478ff;
+          box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+          border-radius: 2px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 14px;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 12px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+.message {
+        display: flex;
+        position: absolute;
+        top: 194px;
+        left: 80.5px;
+        width: 234px;
+        height: 64px;
+        z-index: 1;
+        background-image: url(../../assets/image/activities/bg.png);
+        .textmessage {
+          margin-top: 18px;
+          margin-left: 46px;
+          color: #333330;
+          font-size: 13px;
+          font-weight: 700;
+        }
+        .yes {
+          width: 13px;
+          height: 13px;
+          margin-top: 19px;
+          margin-left: 32px;
+          background-image: url(../../assets/image/activities/yes.png);
+        }
+        .no {
+          width: 13px;
+          height: 13px;
+          margin-top: 19px;
+          margin-left: 50px;
+          background-image: url(../../assets/image/activities/no.png);
+        }
+}
+.notice {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    .noticebox {
+      width: 90%;
+      background: linear-gradient(
+        180deg,
+       rgba(36, 120, 255, 0.15) 0%,
+        white 20%
+      );
+      border-radius: 4px;
+      position: relative;
+      
+      .mani {
+        margin-left: 20.5px;
+        margin-top: 20px;
+        line-height: 24px;
+
+        .lefttitle {
+          display: flex;
+          position: relative;
+          width: 90px;
+          .img {
+            width: 18px;
+            height: 15px;
+            margin-top: 4px;
+            background-image: url(../../assets/image/activities/trumpet.png);
+          }
+          .rightmain {
+            margin-left: 7.5px;
+            .talk {
+              font-size: 14px;
+              font-weight: bold;
+              color: #333;
+              position: absolute;
+              z-index: 999;
+            }
+            .box {
+              position: absolute;
+              width: 62.5px;
+              height: 10px;
+              right: 6px;
+              bottom: -4px;
+              background: #cccfff;
+            }
+          }
+        }
+        .content {
+          color: #333330;
+          font-size: 13px;
+          line-height: 24px;
+          font-weight: 400;
+          margin: 18.5px 12px 24.5px 0;
+        }
+      }
+    }
+  }
+  .details {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    .teachbox {
+      width: 90%;
+      // height: 200px;
+      background: #fff;
+      border-radius: 4px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      .teachmani {
+        width: 90%;
+        margin-top: 20px;
+        .lefttitle {
+          display: flex;
+          position: relative;
+          width: 90px;
+          .img {
+            width: 18px;
+            height: 15px;
+            margin-top: 4px;
+            background-image: url(../../assets/image/activities/trumpet.png);
+          }
+          .rightmain {
+            margin-left: 7.5px;
+            .talk {
+              font-size: 14px;
+              font-weight: bold;
+              color: #333;
+              position: absolute;
+              z-index: 999;
+            }
+            .box {
+              position: absolute;
+              width: 62.5px;
+              height: 10px;
+              right: 6px;
+              bottom: -4px;
+              background: #cccfff;
+            }
+          }
+        }
+        .content {
+          color: #333330;
+          font-size: 13px;
+          line-height: 24px;
+          font-weight: 400;
+          margin: 18.5px 0 29.5px 0;
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/pathmap/pathmap.vue b/src/views/pathmap/pathmap.vue
new file mode 100644
index 0000000..2d0bbbc
--- /dev/null
+++ b/src/views/pathmap/pathmap.vue
@@ -0,0 +1,436 @@
+<template>
+  <div class="pathmap">
+    <TitleHead text="中级产品经理"></TitleHead>
+    <div class="main">
+      <div class="title">
+        <div class="box">
+          <div class="nav">
+            <span class="announcement">课程公告</span>
+            <span class="share">共享文档</span>
+          </div>
+          <div class="content">
+            请各位选课的同学提前阅读本课程的“教学大纲与计划”“课程考核要求”与“学习要求”，并按给定的中学化学教学主题分好小组 <br>每位同学在网上学习的活动轨迹都会自动被系统记录，将作为大家个人线上参与的评价依据；<br>请大家务必在规定的时间内提交作业，否则会被系统自动记录为“迟交”或“未交”，则会影响线上参与的平时成绩；
+          </div>
+        </div>       
+      </div> 
+        <div class="messaeg">
+           <div class="mani">
+        <div class="uptitle">
+            <div class="img"></div>
+            <div class="rightmain">
+              <div class="talk">个人信息</div>
+              <div class="box"></div>
+            </div>
+          </div>
+          <div class="information">
+            <div class="photo"></div>
+            <div class="description">
+              <span class="text1">乐晓琪（显示事业）</span>
+              <span class="text2">真正的陪伴经得起坎坷，经得起平淡。</span>
+            </div>
+          </div>
+          <div class="downtitle">
+            <div class="img"></div>
+            <div class="rightmain">
+              <div class="talk">学习进度</div>
+              <div class="box"></div>
+            </div>
+          </div>
+          <div class="speed">
+            <span class="text3">上次学到：启航班 - 领导寄语</span>
+            <button class="btn">去上课</button>
+          </div>
+          <div class="progress">
+            <div class="total">
+              <div class="total_part">
+                <span class="text4">总进度</span> <span class="text5">32%</span>
+              </div>             
+              <div class="progress">
+                <div class="progress_part"></div>
+              </div>
+            </div>
+            <div class="compulsory">
+              <div class="compulsory_part">
+                <span class="text6">必修进度</span> <span class="text7">10%</span>
+              </div>             
+              <div class="progress1">
+                <div class="progress1_part"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        </div> 
+      <div class="course">
+        <div class="course_box">
+          <div class="course_first">
+            <span class="text8">序：产品经理从初级到中级</span>
+            <span class="text9"><span class="circular"></span>进行中</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+// import { reactive, toRefs } from "vue";
+import TitleHead from "@/components/TitleHead.vue";
+export default {
+  name: "BallotPage",
+  components: {
+    TitleHead,
+  },
+  setup() {},
+};
+</script>
+
+<style lang="scss">
+  .pathmap {
+    width: 100%;
+    .main {
+      width: 100%;
+      display: flex;
+      flex-flow: column;
+      justify-content: center;
+      align-items: center;
+      margin-top: -14.5px;
+      .course {
+        width: 90%;
+        height: 903px;
+        margin-top: 10px;
+        border-radius: 4px;
+        background-color: rgba(255, 255, 255, 1);
+        display: flex;
+        justify-content: center;
+        .course_box {
+          display: flex;
+          justify-content: center;
+          width: 90%;
+          margin-top: 18.5px;
+          background-color: pink;
+          .course_first {
+            width: 100%;
+            height: 35px;
+            display: flex;
+            justify-content: content;
+            background-color: #F9F9F9;
+            .text8 {
+              display: flex;
+              flex: 1;
+              margin-top: 11px;
+              margin-left: 10.5px;
+              margin-bottom: 10.5px;
+              height: 13.5px;
+              font-size: 14px;
+              font-weight: 500;
+              color: #333330;
+            }
+            .text9 {
+              margin-top: 11px;
+              margin-left: 77.5px;
+              color: #0060FF;
+              font-size:13px;
+              font-weight: 400;
+              .circular {
+                
+                border: 1px solid #0060FF;
+                border-radius: 25%;
+              }
+            }
+          }
+        }
+      }
+      .title {
+        width: 90%;
+        height: 272px;
+        border-radius: 4px;
+        background-color: rgba(255, 255, 255, 1);
+        display: flex;
+        justify-content: center;
+        .box {
+          width: 90%;
+          display: flex;
+          justify-content: center;
+          flex-wrap:wrap;
+          overflow-y: auto;
+          .nav {
+              width: 100%;
+              height: 49.5px;
+              display: flex;
+              .announcement {              
+                color: #2478FF;
+                font-size: 14px;
+                line-height: 21.6px;
+                font-weight: 700;
+                margin-top: 18.5px;
+                border-bottom: 1px solid #2478FF;
+              }
+              .share {
+                color: #394145;
+                font-size: 13px;
+                line-height: 21.6px;
+                margin-top: 19px;
+                margin-left: 70px;
+
+              }
+          }
+          .content {
+                  width: 100%;
+                  height: 180.5px;
+                  display: flex;
+                  justify-content: center;
+                  color: #333330;
+                  font-size:13px;
+                  line-height: 24px;
+            }
+          }     
+        }
+      
+      } 
+      .messaeg {
+        width: 90%;
+        height: 314px;
+        background-color: rgba(255, 255, 255, 1);
+        display: flex;
+        justify-content: center;
+        margin-top: 10px; 
+        .mani {
+        width: 90%;
+        display: flex;
+        flex-direction: column;
+        justify-content: content;
+        margin-left: 20.5px;
+        margin-top: 23px; 
+                .downtitle {
+          display: flex;
+          position: relative;
+          width: 90px;
+          margin-top: 21.5px;
+          .img {
+            width: 15.5px;
+            height: 14.5px;
+            margin-top: 3px;
+            background-image: url(../../assets/image/pathmap/study.png);
+          }
+          .rightmain {
+            margin-left: 7.5px;
+            .talk {
+              font-size: 14px;
+              font-weight: bold;
+              color: #333;
+              position: absolute;
+              z-index: 999;
+            }
+            .box {
+              position: absolute;
+              width: 62.5px;
+              height: 10px;
+              right: 6px;
+              bottom: -4px;
+              background: #ccdfff;
+            }
+          }
+        }
+                .uptitle {
+          display: flex;
+          position: relative;
+          width: 90px;
+          .img {
+            width: 17px;
+            height: 15px;
+            margin-top: 3px;
+            background-image: url(../../assets/image/pathmap/personal.png);
+          }
+          .rightmain {
+            margin-left: 7.5px;
+            .talk {
+              font-size: 14px;
+              font-weight: bold;
+              color: #333;
+              position: absolute;
+              z-index: 999;
+            }
+            .box {
+              position: absolute;
+              width: 62.5px;
+              height: 10px;
+              right: 6px;
+              bottom: -4px;
+              background: #ccdfff;
+            }
+          }
+        }      
+         .information {
+        width: 100%;
+        height: 50px;
+        margin-top: 24px;
+        display: flex;
+        justify-content: content;
+        .photo {
+          width: 50px;
+          height: 50px;
+          background-image: url(../../assets/image/pathmap/photo.png)
+        }
+        .description {
+          display:flex;
+          flex-direction: column;
+          margin-left: 11.5px;
+          .text1 {
+            height: 13.5px;
+            font-size: 14px;
+            font-weight: 700;
+            color: #394145;
+            line-height: 21.6px;
+
+          }
+          .text2 {
+            height: 13px;
+            margin-top: 12px;
+            font-size: 13px;
+            color: #394145;
+            line-height: 21.6px;
+          }
+        
+      }
+      }
+     
+      
+      }
+      .speed {
+        width: 100%;
+        margin-top:11px;
+        display: flex;
+        justify-content: content;
+        .text3 {
+          display: flex;
+          flex:1;
+          margin-top: 4.5px;
+          font-size: 13px;
+          font-weight: 500;
+          line-height: 24px;
+          color: #677D86;
+          text-overflow: elipsis;
+        }
+        .btn {                  
+          width: 73px;
+          height: 28px;
+          font-size: 13px;
+          line-height: 28px;
+          margin-rihgt: 21px;
+          color: #2478FF;
+          font-weight: 400;
+          border: 0.5px solid #2478FF;
+          background-color: #FFFFFF;
+        }
+      }
+      .progress {
+        display:flex;
+        flex-direction: column;
+        margin-top: 15px;
+        width: 100%;
+        height: 74px;
+        .total {
+          display: flex;
+          position: relative;
+          width: 100%;
+          height: 29px;
+        .total_part {
+            position: absolute;
+            top: 0;
+            left: 0;
+            margin-bottom: 10px;
+            width: 100%;
+            height: 12.5px;
+          .text4 {          
+           width: 38.5px;
+            height: 12.5px;
+            font-size: 12px;
+            // line-height: 30.29px;
+            color: #677D86;
+          }
+          .text5 {
+            position: absolute;
+            right: 0;           
+            width: 25px;
+             height: 9.5px;
+            font-size: 12px;
+            // line-height: 30.29px;
+            color: #277AFF;
+          }
+        }
+        
+          .progress {
+            position: absolute;
+            width: 100%;
+            height: 6.4px;
+            margin-top: 20px;
+            background-color: #E8F1FE;
+            border-radius: 2px;
+            .progress_part {
+              width: 32%;
+              height: 6.4px;
+              border-radius: 2px;
+              background: linear-gradient(
+                -180deg,
+              rgba(36, 120, 255, 1),
+               rgba(80, 147, 255, 1)               
+              );
+            }
+          }
+        }
+        .compulsory{
+          display: flex;
+          position: relative;
+          width: 100%;
+          height: 29px;
+          margin-top: 16px;
+          .compulsory_part {
+            position: absolute;
+            top: 0;
+            left: 0;
+            margin-bottom: 10px;
+            width: 100%;
+            height: 12.5px;
+          .text6 {          
+           width: 38.5px;
+            height: 12.5px;
+            font-size: 12px;
+            // line-height: 30.29px;
+            color: #677D86;
+          }
+          .text7 {
+            position: absolute;
+            right: 0;           
+            width: 25px;
+             height: 9.5px;
+            font-size: 12px;
+            // line-height: 30.29px;
+            color: #EE6661;
+          }
+        }
+          .progress1 {
+            position: absolute;
+            width: 100%;
+            height: 6.4px;
+            margin-top: 20px;
+            background-color: #E8F1FE;
+            border-radius: 2px;
+            .progress1_part {
+              width: 10%;
+              height: 6.4px;
+              border-radius: 2px;
+              background: linear-gradient(
+                -180deg,
+              rgba(238, 98, 94, 1),
+               rgba(238, 164, 161, 1)               
+              );
+            }
+          }
+        }
+      }
+      } 
+     
+  }
+ 
+</style>