From 12af499546e5e716f9ca52de12dfd606b3861188 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: Thu, 29 Sep 2022 18:05:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2,=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E8=B7=AF=E5=BE=84=E5=9B=BE=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/image/pathmap/btn.png            |  Bin 0 -> 208 bytes
 src/assets/image/pathmap/close.png          |  Bin 0 -> 270 bytes
 src/assets/image/pathmap/firstclass.png     |  Bin 0 -> 8126 bytes
 src/assets/image/pathmap/secondclass.png    |  Bin 0 -> 7283 bytes
 src/views/activities/ActivitiesPage.vue     |   10 +-
 src/views/pathmap/PathmapPage.vue           | 1463 +++++--------------
 src/views/projectdetails/projectDetails.vue |  567 +++++++
 7 files changed, 958 insertions(+), 1082 deletions(-)
 create mode 100644 src/assets/image/pathmap/btn.png
 create mode 100644 src/assets/image/pathmap/close.png
 create mode 100644 src/assets/image/pathmap/firstclass.png
 create mode 100644 src/assets/image/pathmap/secondclass.png
 create mode 100644 src/views/projectdetails/projectDetails.vue

diff --git a/src/assets/image/pathmap/btn.png b/src/assets/image/pathmap/btn.png
new file mode 100644
index 0000000000000000000000000000000000000000..428cdabaa37efddaff409946c702dd952db1ad29
GIT binary patch
literal 208
zcmeAS@N?(olHy`uVBq!ia0vp^>_E)M!3HGx`C7_=6k~CayA#8@b22Z1oGwon#}J8d
z+fy6491|JZ9)AC=DVa0Hmwl;@*ly3AaxY8RcF(k)a5418R9{KI7-q32|4T&P|Jvgf
z)ZZ+@!0Q~@cw+Wy*L8l+x)*SU{7CJoSUJ0r*{9)`{KGcO6{f{OTAR5Hn6hTHAGLE^
zruDAu)k3D?1RaY=ozJb;;&r@&zB?_DSN{HL=H0^8&)FBx*4}bHO8ynlRScf4elF{r
G5}E*Jv`y^*

literal 0
HcmV?d00001

diff --git a/src/assets/image/pathmap/close.png b/src/assets/image/pathmap/close.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c69414b35181f5aba3cf8b76c3affb1cee201b1
GIT binary patch
literal 270
zcmV+p0rCEcP)<h;3K|Lk000e1NJLTq000UA000UI1^@s6jWW-@00001b5ch_0Itp)
z=>Px#$Vo&&R47wz(6LGbQ4odUZ+rz?AIVBYR1n#_7(}rU#CHgSl}4iOMMaPlV&#Kr
zWp`yayOLn0ob%6N&WVye;3twZE2caeTeA_RaU-1KC6dEMwq#ehz;m=hX-tI?UL!f^
zceldHu<O81$QmTf@P(1$BWhc%{s;ChGht_b=`(7ZgV8dWO*^OgyhXDA4=mX=&RZwp
z8+(fZhcH9(StPst8~4JI@D!CQN;bx&;yr5HOZ7DFgk!~|1+yZeR;?_&(bly73%-Ix
U0Enz%^8f$<07*qoM6N<$f+N*&djJ3c

literal 0
HcmV?d00001

diff --git a/src/assets/image/pathmap/firstclass.png b/src/assets/image/pathmap/firstclass.png
new file mode 100644
index 0000000000000000000000000000000000000000..adffed8cbb41d26c2d351ac83826a56d1ceb62d2
GIT binary patch
literal 8126
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
Y0mYZQZOgFPpa1{>07*qoM6N<$g5U$)9RL6T

literal 0
HcmV?d00001

diff --git a/src/assets/image/pathmap/secondclass.png b/src/assets/image/pathmap/secondclass.png
new file mode 100644
index 0000000000000000000000000000000000000000..1047a2193acec6b31851f85a4f7f3c0f911303ff
GIT binary patch
literal 7283
zcmV-(9E{_MP)<h;3K|Lk000e1NJLTq002q=001ip1^@s6-*_I500001b5ch_0Itp)
z=>Py6ElET{RA@ten+JGY)tQFhTc&76&5~SXxyjhZ1>4|mf(u|nC?<g=lz<^D2@paE
zp`^lQ6C7HSCmX=*LLelB;H8-Wrehp8z_?1bWm|6Q)zYX<zh$3u?!7Z3V^+^2>(0!b
zd(QdJ_kVvmzm?~nd$ZvEcembHd$|7A{rejy8zzdP@RdKdZKH>S1j>pr4Ffxo#!4Ar
z7+8h{mJNvClYiWY+Nb*L{~Is&vz&>^OXsy>pZvb}9r3>RnKQ2K-fN3FijU-c+&S5x
z%4-{2F_}1_yl(25lb^rjTZ{i&dEggMUH`;W|9GUYFEzrpbdCQ9C2vRz8@(`uzoZB&
zZD1$USZPy&C4jOGQ;zM;Ur`mX07HE9)IiDIIq4(srP!S8g1t)@B(d7eK)C>&eC+{~
z1x`NS&dx}|o1cvq44{T|%de{4x88R71In2*Z~UUFdf#kS%Tq1O`qE^*$9goAc#DZE
zie#2n6b40gKoCHg7Pgsvj%|teE$p;`;<D*vs7^)T%stu7mIyifm;;i-DHmh+NjdjO
zEF{Y<6jd8UT>+8epyjYl%vA;7kbJa|U%pQD#;xg7$5t!Byrlz)cp|JQs$+952-)d;
z1@*oAbPX*pfEM&i@Wk6<00~&i#7d<zOd4zi+2?x8cJ0VDksL;dXSx$oB!dJt;!1JN
z$2GBxrDe8POa`r}0BuMi$;MX6Yyqp7r=}~IrYXUaSYqKDQh*u`f|0^ZrLYod0-73C
z6!q+sV&iir>Fk(iwqLfwllMMrE~=)2reUj!99Xi-W2k&kE|26A9Y8Yw=IV*dTH9fY
z*g(bEdWTKI)V$jT1-$p=+m6aO`lDc(X@*^K9wTqKh=V`+Bgw`#6jhbL_<SmcumWLz
zLVNRr=*9V1=`^I%n298|xHhb`qN!g?feX|iVt&~mvdi-pn7t?SnV4)wGqRt%Bsj^m
zb4?{Xct-Dqg{z9h+aXWx3{(d*9H6ou$a$uNr6Sp#KWh@BZvGa1pEuF`;`1nIsN%V{
zBN3KuOZ5nhD3%~w@q`4(N~9b)vF)z{Di@^O$$48P$?Hzr)r~<E5wmo6`Xn75v=<p(
z4SrWT0&Fx@B@pxzk0%|LOO5iV<bf>4ao!g*at*_EXaeLk#plhT^qc2lwDwW|=+jt+
z&6vt^I$FC)rBWz96@O_dw%@`|Br)R&M>0}|BO|scfI8<Z88t{dGHY>Z?@Z6-c=o*<
zF&X5ka`n}bw^K>DV~e>$uIeh5B}CU_iZE?4-e91d*UqmnE4e?aLjD<(82RnXD7<7E
z1MhXv{HK@bZ?0y@m=gM1A{faeS|~tp^eBvIw`7wvxl{@a(`B7By<DJj*^?uP9+7g%
zKghETW?;q?PIBufgOgRQobS7Aa&1kn*kh41q?)7b!u&iTcjj(d3S&b)Lb}SKl*yvU
zet=Org<c~-VDA8JP4%?B`B(I!H0iDZ%tVZ$S@Q``noif&b(sCVSOO>!BU+}^SsQ73
z9#EbFc(#(GAI|n<oU(I~jbFSFXpl}hz9qvdftl(q%5fN9ZIhmvxxQNpbOtzF?<}70
znz!fuEL){A?B}t$!&rZ~n?HA@x%S0-X*DZ2cF<xf-5fk{f}?M|fiJ(0baxcJFppsu
z+<;b4M%U+W5kI;c#V}D7Tbd;TEUdJmYl~8NUN55=p6&=lEJlqgqoF>6^lYBDvLWEt
z&~%MNBI&wZ6-5;uMBFE07RQ^2-@?Km!JwbcjsYp8j-EK<i1<x-wM>wlu`Cr;g5dxq
zzau@MI}iES*&gwkX{pQ~RmgwND&zONPq3*g&UJselNMzphnsB5`a3AwdWa2Mw_*5t
zFnXed&lpF=x9=d)8l`93M*8=Bh$iG-fn-u>qX5cGE4sSK)hK7;gCb`|Asn_?wdx1l
zb=Tu4ir?K`RX*V2i)T?#m`6u@59cg8ONwqV=ws8Sy=>W3BZatpWHGjtX2y(47A>B|
z>eXve6p;X^v^4dSOc@Lv8s_S2mdNkBejUGG=b5KJbO6t2QWhvj+Xc%#&{ZkYBj-<K
z%7RH8tUE!+hP_<%-?!6Zm2;#niDL9qwDAb7+c(i^^++(vE?Y)^#S#YUn=v9CM2~JD
z*;p^P#x&EpKrPOSxeORBDn^yCaN$(Blc5mYd+$v=_~3I`mMWv%x8B+Yiovsg{t0is
zwSh<^%Kg9mcivvNfvHm`vUA5Fo__j$Dl12D!;Q-*A5lU<K^}RbAg!(4k~t?jBmCvL
zk7;a*Fk@x~s~-G!p8wlA6m(S8;Kx5+$?|1C!$^y`$Td^JATL(R1e~gfxlv37ZAdZ0
zu3tvU6?2GgYNPducli1vD@eBHvA0DfFuM@z?W6R)_d1>F2qlw8Q~s;(6aCmG*3f~k
z+)r%p7J7DlBw`$?QBtQIMlDI9IB}E^O<@L?TsoVpt~#IHyK4yq6u$f2Z}HUXSELDj
z{p;uOZ&&_=B}?XT=MTTdrp-IqTV2O}KlwHf-2WsiZ}<j>Ya3Yo)I0Kd7hgP`3znaa
zs%gCc{s#W-ii>D&?%<2<``GYFEp2TB%$q-s-~awLR;_v-Rn<`xlgFR<DQBH|8>xf<
zCr3AhtxCXh%u$%SsxjgA%Lpu-k8f%j@qb3>ez%5E*Hlp2o}i^SL@ciWYi}35JKvzE
z>kvg}O=j}yyBT<~jR7OU2!9lN>sGc`eTs=lxdc#dc%W-bB%?gfB7(4$E0;2B)<m9s
z@->PIeLVHluetvE`%zV!7yt1v%a`BE9d}&Ivh(NB+t<&}fBraY);z*5fAJLOESkyu
z`P2F7PoANwx|TmbbC1lGHBINh!6VF^F@^3(FYWDJtX;c}nwlm~KfR2*@4lLvntCbt
zf<ZH9p3V<{_&AA}F1$e2^NG(Dp?~5&RX#VM>qK=Q_uhXAonuaCPv;P#ok?sf4nd84
zp8|T2$mY0+iHNptr+fQ*_$QBN>F@7g{HxU@N;L|5dpQ2-UOs8BC)V4GX{4lu$v8^a
zmbyR*PKnUo<ofHDaN$J@So6{cgu^-yJa9X|`1uoZXCM0Qot(4iyUdw0nP2_tR=)UR
zA5TC1GVj0tKdf7~l{IVr$+OR{;_}OXNmElBTem*LJ@>4}wtX^P@cDF1k=_6Y4>mAi
zLOIKp&1B@rVd%P#PuA~X*|Iq#l7?j7U!UJVM@Jl02#OSP2Oyzw!pjANLGto^bS4#^
zyKOdhX&GztCUd-^2&FSdqRzlSJWT$yFazs*VTeVvx`D{M>#-_)T=4T7S@h=Tq|1G1
zUHyE%<0xCS0eb6NNycI*iXp&qfKn92$@N6AW?5Ww&DXg4n&tfKU%T-86>hoZTdaQa
z6*<uxR$k1KrMGd(C12yNyRK!!h8-L`*2I-po=;m_7rS=tW66?*TyxED2?i8C`uM+C
zwCKlx?hN4uPeOzZ)8KpGyMXD_$FXJW9=`Y8D|qsW*SP57`K({Rom+1GCO^LG8EW=*
zA_7n8A~SK5a40H1zaKpmpf3skv+@ked_i8HFq1vg$71j4A$~ALa8y18=M<6H8^tb4
z68*TB)aM<TBVtUydOGKQv<v?To5t2O8+X=myd*;6cn9f$0Tj|A#mNQA^?J6&)M=xb
zG;s`v4>u7C*{pu*7kuYCt5EQ>aN!jG_QHEyeDOTy%$X$DURgPcUAy*6k9Xa5m+-<1
z@AL4(uQGq$M1J$&&0Kovuch|nf+RM@G!1@u=S371<?+&*_xSq@5Ayh*US-yti9EIX
zHJ<y+FS+OL=cuk~M-!om)Fv;$6oIFch%0#k(kYvj4_wA+T_$^irR-Z!iCxu8y3R%~
z3K2RhMCy0~D}R9KCo%H;MW{m+0>f0sY^^6WGRn~wi`t#Fq)Y0sI(o5UF_Gp8@}w1?
zE=*4_DjOsDd>Xo@5l^ILc<|1<e`LwxJ5iN@3<vu92DtqPVu1xzj4Wl!)Joobb0bry
zR1ydVq?>=@$+x)T@^esCja92&m0BX)yc<19_8MlIJAZT$XP-TlPd}^Xrtf@%haY*7
zZ(n;ZAFtoe%{Q;$rtkb0)m3d7pk#)r2v4Y@xFW8EeHby5nJ?YN=vIx^BT;%548^QT
zVnuZ9cA!jDV{IrJz&x%}IDG{EF+m27^$>l#1OMp>jQ%ujpYB1)tHJ7z$;4R3QI?rj
ze7<wtfHMn}Q><`k9thg}{tvhFgWI1(Q~lEO3BkYY8*@p-(^QNqqp%=EI-SC@bT)6P
z=7J06P*rt=>C?xvapOL!s~aU?B1g;3A5F_->A6!l^Q_ZoYwc#@q%o{p_c`aEH<QN3
z6HJ~mhQB=b5zS2lu0{!S6Z6vKUlpgU6Bs!ZO(|vU6IWB#snT*}0Bce{dAkNMOr6M%
z1OdH^xK=>;ynO5<J~<zKqJrs5(fYe4f(vwl={Vgxj}jQ$Mc<(VSjnU;xhNuqITcV&
zGULQ7q9{0P)&#b1Ka8sAPDR<a$;;D8BvKR)DUexyX=x$t?Y;E$#u+xW2!BAs@AuKv
z)QxF6l?ErV&E|E&yXEHx@cA|3@f1ZxVS0OGgu;H}(KLlcAtI3&>9m(A2quaAM-%lp
z^l(1@@{trwIvsz!oTBefqO`7$mVOg^RvBlmujQ~^Mn_YEY3&Et(?62@m18jW7$iF)
zSS4vf(}&RhXfuI1DvA-qI+AAig+qxP+`&MkiP+&oVyrI%C4g|a<)sN(4v2`_DFf%0
zMLcaorY7=xZeh)<L3zorFqM;wHeM!>Q&@F^N?}%BZs?Y9o!m~;m_%x$F?{KKv~e>C
z4jBsjLBF7o;)ZTIMGA7+2rm3!H}6HqVw4&z-@KK#j#r{CuOM|GMpBCi*Tt}rMYO#W
z#U5><=r)0_JjyQ}g_(}f-`B>8^=s*GZ#e~{WW+0~f4U5|4AXH_4mN`NIi!$DmT=XM
zJIiGGLPO+2owdsHu&htJOwGaBNkMYcXD|PCLI9c9xgzf5hax*r(0zU;-+l$^=(!}@
z4b0vBSY;Z)o+$l=3cf3cvuyJ|-s~HRf4s#dA8+Q3x@q{oQ%P)V1TEb`g&CzJ6{n_Y
zI0K;&dBr-RK#<VsA(=N0^t95o^<{e74(0;o%B(6DX)$l^L=uTOk=_^+Do0_MCYr9(
zb)uKOd+V7tZH&z2gjR@zcG$2I$re#9^!s!+ZQhTns`&kag-}{n$grWsnZ#ElyOBsg
zd#f9mapqWxhvZ9h@_uw(<M{DT8XH71?gf}mR4#y0b)8}Jr%*U+0Y-EPS|ksnGlkV_
zkO&+2R+O^5x`sFVN8%r6u;Q~Vywf?Kv40#(!yc2$s(sAqZRA*sMYVDUv0y2oa+N@d
zkF;3#(MI|^_mXVeiD~xbdOgqW3UZ|R-S2K=^OhY_BhH*Tk+hL!@!~mb+_;-(o_?3>
zu3O6DC9^nkq>)f4$k3t1ghC-YJG+=Xxsv<tdz#Ushsg-PzduG#&j4e_3}^iKky6`Q
zTO%B(spFsj+|Hwq-9TSol<w{Umw`5?jUP!>brWm;u@y}h$#}MU;GDjRvV%hSw9ypK
zT1Y57362}2x-HVG1#|LPUbmmOViowtrC71&b2j$Q=kgyZyqp-z+@0GPexip@6BV3D
zm!sqb2~PIOGI6}Eh2{-!kV-b7GJq}0EKYbJay^IE!lO-{I-EcL@h)C{^&=V@I_T^;
z!OSx!aQEFe@z6uh^YY7Em@|7EPdsrCe}48gCQm+%p+gHPDJkK|k$RRcoy#rX`yEBa
z`K(&?UAAqj;lmHU;N0`(P&uxGXe>q~GQi*d`XRe_*Rk%M|6uc`J=8aJIFYwya`xFX
zXlsx2*duSC>+T7UXUo#G6{%C<(<&+Y+ERk%aO_$O!&0!zd?Zba1?`8}NEzw~gZZ_`
zs7+4drum)xsedBlt!AQjn20(Aqb*6eJcKqnK(aMSynP?-yI;mK6DW!$LWGln5|O#d
zoj<yiOD|nSPftH@y}5~GD#`5GQ<yk$tc=!QeRV6thJ|_NnV<3Ov#&9B>}aM=9ZOMB
zG4=H=ELd;`H{SRV+qc*9_S>s?@x>2lsBh!94}G66w$+kKr&zXZ7I)n7B)fJV=k0a>
zA(`3U9+5y9hRMvC6RD|b=ds7uqH6)S%IgWdC=Y`_FOLZ;ufZ&y3=MIN+9c|fFiJ&`
z{vG`ct?#6xLMIWiDLi43P(qwh-bb}nhQCC}gdgKXFGl1rrL#w2#q#Mse2i$@c9OAL
z6kDV(hEur9GRl!`p-<Obb2c~Md^s(x9c<oQ#lnSWQC+>C=B75TzWO2_e|#<F<t040
z>NehccN0B5QHBjKX7uQh96Q>`)M*pA_ukd)+<A<*-~J72Uiy%hmJV*Y^$PyAp^E;2
z0j|65LVo+(m-zhi!>n8PpX}JapXQb>X?g;vdGn^x*wn|PkE})49iZe<lyndRC<UKC
zz__bcVERr&YYt*Z4778LuymDpLm%<&Dg2cN@oF7Q(NTjozG53yXlvReb)uU@*CEo0
zD)K9bVn>VVZ#sl&w1bk8XM#53)LZ6yOR~A1ZDU#%bLWlW4}Z9a^`Cq}Z|?x1P$8xf
zBN0zfK4Lg8{Czz=Jw2@X-{0`ubD|LEW8S=}%$<7%9qlJ*YwPB*-@QU(V>_?E{%f{w
zsiNk<Q7*syJdPY`rJ<pfZ+>$zk36!5&pxYV-MU}1Yu6!~8aw5IfH;&CK-Jerc<j-&
zXqsbs-hqM_nOmkp(dpv}k6B1?paLskppG7bkpwFgBXtN;{R7Y+CS0ze<OfBpN~&Xk
zSZ5Q-o&y+(qu6$z(*~f5_$=X;b!0Lu!E&kx>XMX=?Q=pF1zWYa@rDbz`q~TSLbrZe
zjb&O~dBu6u9dBm$?nAux@)jz`m-45_@8aW+w$atyLveAKuYY|pO^vM_s%_wvS2i<h
zR4G6G$@R3ick|K5pD}CJ6iQ2n@ad;jEL}Q_haOr(Rn>9cd1n=S_SDLvo~A0K4TCvz
zrf~G=2_Aj)bu?8-sAG0s2;u~uDpOZpidis^z76%n^O^_@t%SZ3)PRm&9H6h}1j*hA
zBWKz8O2-jDIzadF1H`)bVw)W@mvfJ|B`~&Zk`V7%?g@-M%@v0Wi&ChHPYw9d^86^l
z0Oy}Qjj7Yd6AlHaYwYA;&2etI`BDxYtYgcTy|gw*Sg~Rrvt~@-(7~gU0iu3>-uY+K
z(%jDBBaM9Y(N3u|`Qb2C)rT<6lq~j5o;;3i+xAK4@bE+b%l`fKy#L-qy#K*x96Q$H
z78p#HES^J8Pl`t#7I~uI4X&Jn1p$)C^+fGz=53deuAEK()-HN>eSx7`_zEk?D;!TC
zoKM%GIuf0`2vwx;6^<r(w1;SaEw&YNm?MKc5yuJ979a^zGab-8M#&0iaA``<5Bq#2
zg{Ywb`25^))nW?s^VxT}k&0nO3@a<4qP#?=8GQqBKHOAALvt626A`+a8@cbU>tymc
zcFZX0(L^Y4@W63iU;8PsSel__VeYu&8w@Ea=CxNhQeWT7efM3<CmVM0$}9ikg}?ob
zblN1+)9>n}&8UhpHf`F^Gtaz_sye3UoVK{pzl>xRv`~=3`IE_?JRh1vM2|EPZ?8qo
zFGRNj^tBu$SgsQqdm545RhY3}Y2HpLLztC&03rawt!T>kU3ST1YAdaTCR~;B6@-17
zEU1~%R!5W+%ABn~mSF6NAry$D*A(3#sth8#qj4hr3CDZ~qEr^=VMOC7Vl2hk>4AYb
zjZNKh;l;&yEL}Q-9Xo1iYU+{;95c2|=7igK9A?F(bE!GdNKcO_l!@@bX6W!D>HZHM
zXhsnw8b{6D6PPSmw&_Im{)#ffW2X_SoQ+jy5NoL=+9sIOO4;%i6co?K*!=-@HJjYi
zB-u@pWs+o77ATS4I3T(}70$jXWm}d{oQg_869apBifIuD_~nD6v6TEPQwm*0)iqSV
z4>T1!o+8oGi5VGikB@S9-$`G@;>AwNw8U#2a_jWYk=EcW(021YakqCp7^v*Az3_(O
zG+EVj^r1rupS}Q}Zvv_2UX0`ciY{Nu1S7<#w!N%b`-)QscMj8B^Ai090vEB<GVOOo
z-0hbV8Wld{+bPnP55Xqcfg--(^f<|EUo1}c4!PH=3zR6B={kx4E#SjWTcnygN%!<S
zQFP|O)GKS|7FgUamE7FgYku=GOSj3wxy6g0oNHZIF~s~tlAgKW>8ue1Q2c)U!^bh=
ztQA;x8S&vhuE?vyZjbO<^$}u?dr8LnWg29Ob&FU@lEZ0$6CgNbaUUp5FK_&nDGbwL
zlxaz(2*gd%q>yR(bL-V|zD`w9<X^U~%Mz{P(<Qq^qgbN89kX8urRSltDRmZ?LFEVc
zZTA2)2PiKU&zuxX8Q1U!ba@`=B+OnDnS1mu4_`&l8s(fH-cB?;mzL@T3zCO8p%u_k
zP)OHjFA-^}Lh}V&bCa=>qgk@S#WA}a9ZM_0kt<TRVfbXnoLlsl{X?P=O!Q>R!+$4q
zkQya|K24Qo=m4dGPeW*&8Vq8^lcXBjuu>+9ce4DY*1<1>_m!=kZlLLGnlKh|@}i19
zHMeid1xjM?ctmk&83tn(&ZO|1i;3(nA+HVkjUM8WTH+@@CY=z$t$P$E2hR$-1DeMu
z`8TcjOD;&+f>B~*sZWj#2q1*rOM7-*vTznMjuB=jPtAqtDGr--pZu!^0~nn>Bs-mS
z#Osdp*pz8vaoc!20(}`Mmvt@x*=`nh4Q_49IhM~Y271@dL5Y7z0m0#C6S61L)3lys
zv{pvlUU#A63fx~;yK+Ht>t$(0%Re`z7`9KMD1ebB>hx%4+wWXrxy(X!8zo%566F^>
z^9%T7#WUK_4#~7@J)S<DqCF^wT&HAJ1}|5GT<_=f9Jmz^&m(3k3{KHZ>Wu6T5shO$
zY%}5ZbvfIX(IH34-Kv=T9Z&8ZwxyN4{AJN(A|CRneUiR9lW|wzh_qvda(x0Y;R$^j
zNMYAe0zPzcD$+ARx+CJoEIB~scDQ5)bI-8c@?b7t8MX-1mjysC1{&P>>X==&MJT%t
zr{&Ev%q%#r-;+aU&CHpJ^V<2y6eaDrGGoTds=a$_&QJ(?eLaJ)`m*f0TH%_6EdL5|
z7oFEauL3?9-3!Z1Hi{G>gX_tA;Jj88e5!^xXb?p|XQwlUnkhSH*)yo~)n&a$%dFXD
zwDsgsy)iO%RTmhi44VbX-48{HTT`b@KB(M(|LX5O{`lWl4fGpj;CEV>1{cLoxxn1D
zh!YKAj-Ie1(xHG)mN3j%!ev#?;&Yg!sTzd^VPf$(3E{~G0rh2mdxXkHU7l^`Zt39d
z&CJzp=gW5NxSwP^oC}mRA`yNVRygeIz3rB(S1Hdw|3>lKZ-0JE?ct+09js}ZU|EXz
zac6icH=avs?>5CbSP+`!(@^|A*-mXmlNh}NCjm8h@nQtO&qqr9&j-<TdP<;j=HXoq
z3Q%+A>-vvOe3daJcU+II8T4|*ToT;tYqXd+ab)B4Gfsc${N;21^naIFNn?F#rqcib
N002ovPDHLkV1j5tOrHP%

literal 0
HcmV?d00001

diff --git a/src/views/activities/ActivitiesPage.vue b/src/views/activities/ActivitiesPage.vue
index 19bf2c3..9ce7bdd 100644
--- a/src/views/activities/ActivitiesPage.vue
+++ b/src/views/activities/ActivitiesPage.vue
@@ -77,14 +77,10 @@ export default {
   components: {
     TitleHead,
   },
-  setup() {
+  setup() {   
+    
+  },
 
-  },
-  data(){
-    return {
-      showBox: false,
-    };
-  },
 }; 
 </script>
 
diff --git a/src/views/pathmap/PathmapPage.vue b/src/views/pathmap/PathmapPage.vue
index 69b4027..85942d3 100644
--- a/src/views/pathmap/PathmapPage.vue
+++ b/src/views/pathmap/PathmapPage.vue
@@ -1,817 +1,197 @@
 <template>
   <div class="pathmap">
-    <TitleHead text="中级产品经理"></TitleHead>
-    <div class="main">
-      <div class="title">
-        <div class="course">
-          <div style="width: 100%">
-            <el-tabs v-model="activeName" @tab-click="handleClick" tab-position="top" >
-              <el-tab-pane label="课程公告" name="first">
-                <div class="work">
-                  <div class="question">
-                    请各位选课的同学提前阅读本课程的“教学大纲与计划”
-                    “课程考核要求”与“学习要求”，并按给定的中学化学教学主题分好小组<br />
-                    每位同学在网上学习的活动轨迹都会自动被系统记录,将作为大家个人线上参与的评价依据；<br />
-                    请大家务必在规定的时间内提交作业，否则会被系统自动记录为“迟交”或“未交”，则会影响线上参与的平时成绩；
-                  </div>
-                </div>
-              </el-tab-pane>
-              <el-tab-pane label="共享文档" name="second" >
-                <div
-                  v-for="(el, index) in enclosure"
-                  :key="el.id"
-                  class="enclosure"
-                  :style="{
-                    'border-bottom':
-                      index === enclosure.length - 1
-                        ? null
-                        : '0px solid rgba(56, 125, 247, 0.2)',
-                  }"
-                >
-                  <div class="enclosureL">
-                    <img style="width: 19.5px; height: 22px" :src="el.img" />
-                    <div style="margin-left: 15px">{{ el.name }}</div>
-                  </div>
-                  <div class="download">
-                    <img
-                      style="width: 13px; height: 12px"
-                      src="../../assets/image/faceteach/download.png"
-                    />
-                    <div style="margin-left: 2.5px">下载</div>
-                  </div>
-                </div>
-              </el-tab-pane>
-            </el-tabs>
-          </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="course1">
-        <div class="course1_box">
-          <div class="course1_first">
-            <div class="text8">序：产品经理从初级到中级</div>
+  <div class="main">
+    <div class="up">
+     <div class="notice">
+      <span class="text">请各位选课的同学提前阅读本课程的“教学大纲与计划请各位选课的同学提前阅读本课程的“教学大纲与计划</span> <span class="close"></span>
+     </div>
+     <div class="content">
+      <div class="title">中级产品经理</div>
+      <div class="text2">课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介简介课程简介</div>
+     </div>
+    </div>
+    <div class="down">
+     <div class="project_title">项目内容</div>
+     <div class="project_first">
+        <div class="course1_first">
+            <div class="text8">序：管理者如何持续找到发力点</div>
             <div class="course1_right">
               <div class="circular"></div>
               <div class="text9">进行中</div>
+              <div class="btn1"></div>
+            </div>
+        </div>
+        <div class="course_content">
+          <div class="study1">
+            <div class="firstclass"></div>
+            <div class="firstprogress">
+              <span class="firsttext">BOE端到端体系 - 第七章</span>
+              <span class="secondtext">70%</span>
+              <div class="progressbox">
+                <div class="progressboxpart"></div>
+              </div>
             </div>
           </div>
-          <div class="course1_second">
-            <div class="course1_part">
-              <span class="text6">当前进度</span>
-              <span class="text7">70%</span>
-            </div>
-            <div class="progress2">
-              <div class="progress2_part"></div>
-            </div>
-          </div>
-          <div class="course1_threed">
-            <div class="explain_up">人工智能启蒙讲解（上）</div>
-            <div class="explain_up_part">
-              <div class="tag4">#通用力</div>
-              <div class="tag2">#前沿趋势</div>
-              <div class="tag1">必修</div>
-              <div class="tag3">在线</div>
-              <button class="btn1">去上课</button>
-            </div>
-          </div>
-          <div class="course1_fourth">
-            <div class="course1_part">
-              <span class="text6">当前进度</span>
-              <span class="text7">0%</span>
-            </div>
-            <div class="progress3">
-              <div class="progress3_part"></div>
-            </div>
-          </div>
-          <div class="course1_fifth">
-            <div class="explain_down">人工智能启蒙讲解（下）</div>
-            <div class="explain_down_part">
-              <div class="tag4">#通用力</div>
-              <div class="tag2">#前沿趋势</div>
-              <div class="tag1">必修</div>
-              <div class="tag3">考试</div>
-              <div class="status"></div>
-            </div>
-          </div>
-          <div class="course2_first">
-            <div class="text8">第一讲：中级产品经理的思考逻辑</div>
-            <div class="course2_right">
-              <div class="circular"></div>
-              <div class="text9">未开始</div>
-            </div>
-          </div>
-          <div class="course2_second">
-            <div class="explain_down">
-              趣味课前小测 - MBTI测试：你适合做哪个方向？
-            </div>
-            <div class="explain_down_part">
-              <div class="tag1">选修</div>
-              <div class="tag3">测评</div>
-              <div class="status"></div>
-            </div>
-          </div>
-          <div class="course2_threed">
-            <div class="explain_down">
-              建立中级产品经理思考逻辑：脱离初级产品的必要条件
-            </div>
-            <div class="explain_down_part">
-              <div class="tag1">必修</div>
-              <div class="tag3">外部链接</div>
-              <div class="status"></div>
-            </div>
-          </div>
-          <div class="course3_first">
-            <div class="text8">第二讲：模块化产品展示</div>
-            <div class="course2_right">
-              <div class="circular"></div>
-              <div class="text9">未开始</div>
-            </div>
-          </div>
-          <div class="course2_threed">
-            <div class="explain_down">
-              模块化产品展示相关案例与展示：如何自由组合你的思考？
-            </div>
-            <div class="explain_down_part">
-              <div class="tag1">必修</div>
-              <div class="tag3">测评</div>
-              <div class="status"></div>
-            </div>
-          </div>
-          <div class="course2_threed">
-            <div class="explain_down">社交产品如何做好模块化处理？</div>
-            <div class="explain_down_part">
-              <div class="tag1">必修</div>
-              <div class="tag3">测评</div>
-              <div class="status"></div>
-            </div>
-          </div>
-          <div class="course2_second">
-            <div class="explain_down">
-              微信与Telegram哪个平台的功能模块化做的最好？
-            </div>
-            <div class="explain_down_part">
-              <div class="tag1">选修</div>
-              <div class="tag3">测评</div>
-              <div class="status"></div>
+          <div class="study2">
+            <div class="secondclass"></div>
+            <div class="secondprogress">
+              <span class="firsttext">中级产品经理项目 - 产品经理…</span>
+              <span class="secondtext">52%</span>
+              <div class="progressbox">
+                <div class="progressboxpart"></div>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+     </div>
+     <div class="project_second">
+        <div class="course1_first">
+            <div class="text8">第一讲：业务起航的支点 - 你的风格</div>
+            <div class="course1_right">
+              <div class="circular"></div>
+              <div class="text9">进行中</div>
+              <div class="btn1"></div>
+            </div>
+        </div>
+        <div class="secondcontent">
+          <div class="question">
+            <div class="issue">趣味课前小测 - MBTI测试：你适合做哪个方向？</div>
+            <div class="tag1">选修</div>
+            <div class="tag2">测评</div>
+          </div>
+          <div class="question">
+            <div class="issue">社交产品如何做好模块化处理？</div>
+            <div class="tag3">必修</div>
+            <div class="tag2">作业</div>
+          </div>
+          <div class="question">
+            <div class="issue">社交产品如何做好模块化处理？</div>
+            <div class="tag3">必修</div>
+            <div class="tag2">讨论</div>
+          </div>
+        </div>
+     </div>
     </div>
   </div>
+
+  </div>
 </template>
 
 <script>
-import { reactive, toRefs } from "vue";
-import TitleHead from "@/components/TitleHead.vue";
-export default {
-  name: "PathmapPage",
-  components: {
-    TitleHead,
-  },
-  setup() {
-    const state = reactive({
-      activeName: "second",
-      enclosure: [
-        {
-          id: 1,
-          name: "项目参考文档.doc",
-          img: require("../../assets/image/file/word.png"),
-        },
-        {
-          id: 2,
-          name: "人工智能启蒙讲解讲义.pptx",
-          img: require("../../assets/image/file/ppt.png"),
-        },
-        {
-          id: 3,
-          name: "中级产品经理必备工具.pdf",
-          img: require("../../assets/image/file/pdf.png"),
-        },
-        {
-          id: 4,
-          name: "Python学习入门讲义.zip",
-          img: require("../../assets/image/file/zip.png"),
-        },
-        {
-          id: 5,
-          name: "Axure RP10更新内容.md",
-          img: require("../../assets/image/file/md.png"),
-        },
-      ],
-    });
-    const handleClick = (tab, event) => {
-      console.log(tab, event);
-    };
-    return {
-      ...toRefs(state),
-      handleClick,
-    };
-  },
-};
+
 </script>
 
 <style lang="scss">
 .pathmap {
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   .main {
-    width: 100%;
+    width:100%;
     display: flex;
-    flex-flow: column;
-    justify-content: center;
-    align-items: center;
-    margin-top: -14.5px;
-    .course1 {
-      width: 90%;
-      height: 830px;
-      margin-top: 10px;
-      margin-bottom: 27.5px;
-      border-radius: 4px;
-      background-color: rgba(255, 255, 255, 1);
+    flex-direction: column;
+    //justify-content: center;
+    .up {
+     width: 100%;
+     height: 162px;
+     display: flex;
+     flex-direction: column;
+     align-items: center;
+     //justify-content: center;
+     background-color: rgba(255, 255, 255, 1);
+     .notice {
+      background-color: rgba(255, 251, 238, 1);
+      width: 100%;
+      height: 25px;
       display: flex;
-      justify-content: center;
-      .course1_box {
+      jusyift-content: center;
+      //position: relative;
+      .text {
+        //display: flex;
+        height: 25px;
+        //position: absolute;
+        color: rgba(255, 158, 0, 1);
+        padding: 6px 41px 6.5px 15.5px;
+        font-size: 12px;
+        //line-height: 24px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .close {
         display: flex;
-        flex-direction: column;
-        justify-content: content;
-        width: 90%;
-        margin-top: 18.5px;
-        //background-color: pink;
-        .course3_first {
-          width: 105%;
-          margin-left: -7px;
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 9.5px;
+        height: 9.5px;
+        background-image: url(../../assets/image/pathmap/close.png);
+        margin-top: 10px;
+        margin-right: 16px;
+        margin-bottom: 8px;
+      }
+     }
+     .content {
+      width: 90%;
+      display: flex;
+      flex-direction: column;
+      .title {
+        margin-top: 15.5px;
+        font-size: 14px;
+        font-weight: 700;
+        line-height: 21.6px;
+        color: rgba(4, 36, 60, 1);
+      }
+      .text2 {
+        display: flex;
+        margin-top: 10px;
+        margin-bottom: 22.5px;
+        font-size: 13px;
+        color: rgba(51, 51, 48, 1);
+        line-height: 24px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+     }
+    }
+    .down {
+     width: 100%;
+     margin-top: 11.5px;
+     //height: 529px;
+     display: flex;
+     flex-direction: column;
+     align-items: center;
+     //justify-content: center;
+     background-color: rgba(255, 255, 255, 1);
+     .project_title {
+      width:100%;
+      display: flex;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 12px;
+      color: rgba(13, 35, 58, 1);
+      padding: 17px 0 17px 36.5px;
+      border-bottom: 0.5px solid rgba(241, 242, 243, 1);
+     }
+     .project_first {
+      width: 90%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 18px;
+      .course1_first {
+          width: 100%;
           height: 35px;
           display: flex;
           justify-content: content;
-          margin-top: 18.5px;
+          border-radius: 10px;
           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: 600;
-            color: #333330;
-          }
-          .course2_right {
-            display: flex;
-            position: relative;
-            width: 60px;
-            height: 13.5px;
-            margin-top: 15px;
-            // margin-right: 10.5px;
-            .circular {
-              position: absolute;
-              top: 1px;
-              left: 1px;
-              width: 8.5px;
-              height: 8.5px;
-              border-radius: 7px;
-              border: 1px solid #666666;
-            }
-            .text9 {
-              display: flex;
-              justify-content: content;
-              position: absolute;
-              width: 40px;
-              height: 13.5px;
-              top: 0;
-              left: 20px;
-              line-height: 13.5px;
-              color: #666666;
-              font-size: 13px;
-              font-weight: 600;
-            }
-          }
-        }
-        .course2_threed {
-          display: flex;
-          position: relative;
-          margin-top: 12px;
-          width: 100%;
-          height: 68.8px;
-          .explain_down {
-            position: absolute;
-            display: flex;
-            width: 100%;
-            height: 12.5px;
-            color: #333330;
-            font-size: 13px;
-            font-weight: 400;
-            line-height: 24px;
-          }
-          .explain_down_part {
-            position: absolute;
-            width: 100%;
-            height: 52.3px;
-            margin-top: 16.5px;
-            .tag1 {
-              position: absolute;
-              left: 0;
-              bottom: 0;
-              width: 64px;
-              height: 20.8px;
-              border: 1px solid #51c6e6;
-              border-radius: 2px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              font-size: 14px;
-              font-weight: 500;
-              color: #51c6e6;
-            }
-            .tag3 {
-              position: absolute;
-              left: 73.5px;
-              bottom: 0;
-              height: 20.8px;
-              border: 1px solid #7f96ed;
-              border-radius: 2px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              font-size: 14px;
-              font-weight: 500;
-              color: #7f96ed;
-              padding-left: 19px;
-              padding-right: 19px;
-            }
-            .status {
-              position: absolute;
-              top: 5px;
-              right: 11.5px;
-              width: 49.5px;
-              height: 49px;
-              background-image: url(../../assets/image/pathmap/nostart.png);
-            }
-          }
-        }
-        .course2_second {
-          display: flex;
-          position: relative;
-          margin-top: 12px;
-          width: 100%;
-          height: 68.8px;
-          .explain_down {
-            position: absolute;
-            display: flex;
-            width: 100%;
-            height: 12.5px;
-            color: #333330;
-            font-size: 13px;
-            font-weight: 400;
-            line-height: 24px;
-          }
-          .explain_down_part {
-            position: absolute;
-            width: 100%;
-            height: 52.3px;
-            margin-top: 16.5px;
-            .tag1 {
-              position: absolute;
-              left: 0;
-              bottom: 0;
-              width: 64px;
-              height: 20.8px;
-              border: 1px solid #cd7fed;
-              border-radius: 2px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              font-size: 14px;
-              font-weight: 500;
-              color: #cd7fed;
-            }
-            .tag3 {
-              position: absolute;
-              left: 73.5px;
-              bottom: 0;
-              height: 20.8px;
-              border: 1px solid #7f96ed;
-              border-radius: 2px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              font-size: 14px;
-              font-weight: 500;
-              color: #7f96ed;
-              padding-left: 19px;
-              padding-right: 19px;
-            }
-            .status {
-              position: absolute;
-              top: 5px;
-              right: 11.5px;
-              width: 49.5px;
-              height: 49px;
-              background-image: url(../../assets/image/pathmap/nostart.png);
-            }
-          }
-        }
-        .course2_first {
-          width: 105%;
-          margin-left: -7px;
-          height: 35px;
-          display: flex;
-          justify-content: content;
-          margin-top: 18.5px;
-          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: 600;
-            color: #333330;
-          }
-          .course2_right {
-            display: flex;
-            position: relative;
-            width: 60px;
-            height: 13.5px;
-            margin-top: 15px;
-            // margin-right: 10.5px;
-            .circular {
-              position: absolute;
-              top: 1px;
-              left: 1px;
-              width: 8.5px;
-              height: 8.5px;
-              border-radius: 7px;
-              border: 1px solid #666666;
-            }
-            .text9 {
-              display: flex;
-              justify-content: content;
-              position: absolute;
-              width: 40px;
-              height: 13.5px;
-              top: 0;
-              left: 20px;
-              line-height: 13.5px;
-              color: #666666;
-              font-size: 13px;
-              font-weight: 600;
-            }
-          }
-        }
-        .course1_fifth {
-          display: flex;
-          position: relative;
-          margin-top: 12px;
-          width: 100%;
-          height: 68.8px;
-          .explain_down {
-            position: absolute;
-            width: 100%;
-            height: 12.5px;
-            color: #333330;
-            font-size: 13px;
-            font-weight: 400;
-            line-height: 12.5px;
-          }
-          .explain_down_part {
-            position: absolute;
-            width: 100%;
-            height: 52.3px;
-            margin-top: 16.5px;
-            .tag4 {
-              position: absolute;
-              top: 0;
-              left: 0;
-              padding-left: 7.5px;
-              //padding-right: 12px;
-              height: 15.8px;
-              border: 1px solid rgba(255, 185, 109, 1);
-              border-radius: 2px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              font-size: 12px;
-              font-weight: 500;
-              color: rgba(255, 185, 109, 1);
-            }
-            .tag2 {
-              position: absolute;
-              top: 0;
-              left: 69px;
-              padding-left: 7.5px;
-              padding-right: 6.5px;
-              width: 62px;
-              height: 15.8px;
-              border: 1px solid rgba(255, 185, 109, 1);
-              border-radius: 2px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              font-size: 12px;
-              font-weight: 500;
-              color: rgba(255, 185, 109, 1);
-            }
-            .tag1 {
-              position: absolute;
-              left: 0;
-              bottom: 0;
-              width: 64px;
-              height: 20.8px;
-              border: 1px solid #51c6e6;
-              border-radius: 2px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              font-size: 14px;
-              font-weight: 500;
-              color: #51c6e6;
-            }
-            .tag3 {
-              position: absolute;
-              left: 73.5px;
-              bottom: 0;
-              height: 20.8px;
-              border: 1px solid #7f96ed;
-              border-radius: 2px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              font-size: 14px;
-              font-weight: 500;
-              color: #7f96ed;
-              padding-left: 19px;
-              padding-right: 19px;
-            }
-            .status {
-              position: absolute;
-              top: 5px;
-              right: 11.5px;
-              width: 49.5px;
-              height: 49px;
-              background-image: url(../../assets/image/pathmap/nostart.png);
-            }
-          }
-        }
-        .course1_fourth {
-          display: flex;
-          position: relative;
-          margin-top: 11.5px;
-          width: 100%;
-          height: 29px;
-          .course1_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: #277aff;
-            }
-          }
-          .progress3 {
-            position: absolute;
-            width: 100%;
-            height: 6.4px;
-            margin-top: 20px;
-            background-color: #e8f1fe;
-            border-radius: 2px;
-            .progress3_part {
-              width: 0%;
-              height: 6.4px;
-              border-radius: 2px;
-              background: linear-gradient(
-                -180deg,
-                rgba(36, 120, 255, 1),
-                rgba(80, 147, 255, 1)
-              );
-            }
-          }
-        }
-        .course1_threed {
-          display: flex;
-          position: relative;
-          margin-top: 12px;
-          width: 100%;
-          height: 68.8px;
-          .explain_up {
-            position: absolute;
-            width: 100%;
-            height: 12.5px;
-            color: #333330;
-            font-size: 13px;
-            font-weight: 400;
-            line-height: 12.5px;
-          }
-          .explain_up_part {
-            position: absolute;
-            width: 100%;
-            height: 52.3px;
-            margin-top: 16.5px;
-            .tag4 {
-              position: absolute;
-              top: 0;
-              left: 0;
-              padding-left: 7.5px;
-              //padding-right: 12px;
-              height: 15.8px;
-              border: 1px solid rgba(255, 185, 109, 1);
-              border-radius: 2px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              font-size: 12px;
-              font-weight: 500;
-              color: rgba(255, 185, 109, 1);
-            }
-            .tag2 {
-              position: absolute;
-              top: 0;
-              left: 69px;
-              padding-left: 7.5px;
-              padding-right: 6.5px;
-              width: 62px;
-              height: 15.8px;
-              border: 1px solid rgba(255, 185, 109, 1);
-              border-radius: 2px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              font-size: 12px;
-              font-weight: 500;
-              color: rgba(255, 185, 109, 1);
-            }
-            .tag1 {
-              position: absolute;
-              left: 0;
-              bottom: 0;
-              width: 64px;
-              height: 20.8px;
-              border: 1px solid #51c6e6;
-              border-radius: 2px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              font-size: 14px;
-              font-weight: 500;
-              color: #51c6e6;
-            }
-            .tag3 {
-              position: absolute;
-              left: 73.5px;
-              bottom: 0;
-              height: 20.8px;
-              border: 1px solid #7f96ed;
-              border-radius: 2px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              font-size: 14px;
-              font-weight: 500;
-              color: #7f96ed;
-              padding-left: 19px;
-              //padding-right: 25px;
-            }
-            .btn1 {
-              position: absolute;
-              top: 2px;
-              right: 2px;
-              width: 73px;
-              height: 28px;
-              font-size: 13px;
-              line-height: 28px;
-              color: #ffffff;
-              font-weight: 400;
-              border: 0.5px solid #2478ff;
-              border-radius: 2px;
-              background-color: #2478ff;
-            }
-          }
-        }
-        .course1_second {
-          display: flex;
-          position: relative;
-          margin-top: 11.5px;
-          width: 100%;
-          height: 29px;
-          .course1_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: #277aff;
-            }
-          }
-          .progress2 {
-            position: absolute;
-            width: 100%;
-            height: 6.4px;
-            margin-top: 20px;
-            background-color: #e8f1fe;
-            border-radius: 2px;
-            .progress2_part {
-              width: 70%;
-              height: 6.4px;
-              border-radius: 2px;
-              background: linear-gradient(
-                -180deg,
-                rgba(36, 120, 255, 1),
-                rgba(80, 147, 255, 1)
-              );
-            }
-          }
-        }
-        .course1_first {
-          width: 105%;
-          margin-left: -7px;
-          height: 35px;
-          display: flex;
-          justify-content: content;
-          background-color: #f9f9f9;
-          .text8 {
-            display: flex;
-            flex: 1;
-            margin-top: 11px;
-            margin-left: 10.5px;
+            margin-left: 20px;
             margin-bottom: 10.5px;
             height: 13.5px;
             font-size: 14px;
@@ -828,7 +208,7 @@ export default {
             .circular {
               position: absolute;
               top: 1px;
-              left: 1px;
+              right: 63px;
               width: 8.5px;
               height: 8.5px;
               border-radius: 7px;
@@ -841,333 +221,266 @@ export default {
               width: 40px;
               height: 13.5px;
               top: 0;
-              left: 20px;
+              //left: 20px;
+              right: 18.5px;
               line-height: 13.5px;
               color: #0060ff;
               font-size: 13px;
               font-weight: 600;
             }
+            .btn1 {
+              width: 7px;
+              height: 6px;
+              position: absolute;
+              top: 3px;
+              right: 6px;
+              background-image: url(../../assets/image/pathmap/btn.png);
+            }
           }
-        }
       }
-    }
-    .title {
-      width: 90%;
-      height: 272px;
-      border-radius: 4px;
-      background-color: rgba(255, 255, 255, 1);
-      display: flex;
-      justify-content: center;
-      .course {
+      .course_content {
         width: 90%;
-        // padding-bottom: 15px;
-        border-radius: 4px;
-        background: #ffffff;
-        margin-top: 10px;
         display: flex;
         flex-direction: column;
-        align-items: center;
-        .el-tabs__nav {
-          width: 90%;
-          margin-left: 5%;
+        justify-content: center;
+        margin-top: 26.5px;
+        .study1 {
           display: flex;
-          justify-content: left;
-        }
-        .el-tabs__item {
-          height: 50px;
-          padding: 0px;
-          font-size: 14px;
-          font-weight: 500;
-          line-height: 21px;
-          padding-top: 15px;
-          margin-right: 70px;
-        }
-        .el-tabs__nav-wrap::after {
-          background-color: rgba(56, 125, 247, 0.2);
-        }
-        .el-tabs__header {
-          margin: 0;
-        }
-        .enclosure {
-          width: 90%;
-          margin-left: 5%;
-          height: 40px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          .enclosureL {
+          //justify-content: center;
+          width: 100%;
+          margin-bottom: 15px;
+          .firstclass {
             display: flex;
-            align-items: center;
-            font-size: 13px;
-            font-weight: 400;
-            color: #677d86;
-            line-height: 19px;
+            width: 74px;
+            height: 43px;
+            background-image: url(../../assets/image/pathmap/firstclass.png)
           }
-          .download {
+          .firstprogress {
             display: flex;
-            align-items: center;
-            font-size: 13px;
-            font-weight: 400;
-            color: #2478ff;
-            line-height: 19px;
+            flex: 1;
+            position: relative;
+            margin-left: 9.5px;
+            .firsttext {
+              position: absolute;
+              //top: 6px;
+              display: flex;
+              font-size: 13px;
+              line-height: 30.29px;
+              color: rgba(110, 123, 132, 1);
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+            }
+            .secondtext {
+              position: absolute;
+              //top: 6px;
+              right: 0;
+              font-size: 12px;
+              line-height: 30.29px;
+              color: rgba(39, 122, 255, 1);
+            }
+            .progressbox {
+              width: 100%;
+              position: absolute;
+              display: flex;
+              height: 6.4px;
+              bottom: 4px;
+              background-color: rgba(232, 241, 254, 1);
+              border-radius:2px;
+              .progressboxpart {
+                width: 70%;
+                height: 6.4px;
+                border-radius: 2px;
+                background: linear-gradient(
+                -180deg,
+                rgba(36, 120, 255, 1),
+                rgba(80, 147, 255, 1)
+              ); 
+              }
+            }
           }
         }
-        .work {
-          // margin-left: 51px;
-          // margin-right: 40px;
-          padding-bottom: 20px;
-          width: 90%;
-          margin-left: 5%;
+        .study2 {
           display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          margin-top: 17.5px;
-        }
-        .work .question {
-          font-size: 13px;
-          font-weight: 400;
-          color: #333330;
-          line-height: 21.5px;
+          width: 100%;
+          margin-bottom: 15px;
+          .secondclass {
+            width: 74px;
+            height: 43px;
+            background-image: url(../../assets/image/pathmap/secondclass.png)
+          }
+          .secondprogress {
+            display: flex;
+            flex: 1;
+            position: relative;
+            margin-left: 9.5px;
+            .firsttext {
+              position: absolute;
+              //top: 6px;
+              display: flex;
+              font-size: 13px;
+              line-height: 30.29px;
+              color: rgba(110, 123, 132, 1);
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+            }
+            .secondtext {
+              position: absolute;
+              //top: 6px;
+              right: 0;
+              font-size: 12px;
+              line-height: 30.29px;
+              color: rgba(39, 122, 255, 1);
+            }
+            .progressbox {
+              width: 100%;
+              position: absolute;
+              display: flex;
+              height: 6.4px;
+              bottom: 4px;
+              background-color: rgba(232, 241, 254, 1);
+              border-radius:2px;
+              .progressboxpart {
+                width: 52%;
+                height: 6.4px;
+                border-radius: 2px;
+                background: linear-gradient(
+                -180deg,
+                rgba(36, 120, 255, 1),
+                rgba(80, 147, 255, 1)
+              ); 
+              }
+            }
+          }
         }
       }
-    }
-  }
-  .messaeg {
-    width: 90%;
-    height: 314px;
-    background-color: rgba(255, 255, 255, 1);
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
-    .mani {
+     }
+     .project_second {
       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 {
+      align-items:center;
+      margin-top: 10.5px;
+      .course1_first {
+          width: 100%;
+          height: 35px;
           display: flex;
-          flex-direction: column;
-          margin-left: 11.5px;
-          .text1 {
+          justify-content: content;
+          border-radius: 10px;
+          background-color: #f9f9f9;
+          .text8 {
+            display: flex;
+            flex: 1;
+            margin-top: 11px;
+            margin-left: 20px;
+            margin-bottom: 10.5px;
             height: 13.5px;
             font-size: 14px;
-            font-weight: 700;
-            color: #394145;
-            line-height: 21.6px;
+            font-weight: 600;
+            color: #333330;
           }
-          .text2 {
-            height: 13px;
-            margin-top: 12px;
+          .course1_right {
+            display: flex;
+            position: relative;
+            width: 60px;
+            height: 13.5px;
+            margin-top: 15px;
+            // margin-right: 10.5px;
+            .circular {
+              position: absolute;
+              top: 1px;
+              right: 63px;
+              width: 8.5px;
+              height: 8.5px;
+              border-radius: 7px;
+              border: 1px solid #0060ff;
+            }
+            .text9 {
+              display: flex;
+              justify-content: content;
+              position: absolute;
+              width: 40px;
+              height: 13.5px;
+              top: 0;
+              //left: 20px;
+              right: 18.5px;
+              line-height: 13.5px;
+              color: #0060ff;
+              font-size: 13px;
+              font-weight: 600;
+            }
+            .btn1 {
+              width: 7px;
+              height: 6px;
+              position: absolute;
+              top: 3px;
+              right: 6px;
+              background-image: url(../../assets/image/pathmap/btn.png);
+            }
+          }
+      }
+      .secondcontent {
+        width: 90%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-top: 10px;
+        .question {
+          width: 100%;
+          display: flex;
+          position: relative;
+          height: 72px;
+          border-bottom: 0.5px solid rgba(241, 242, 243, 1);
+          .issue {
+            width: 100%;
+            display: flex;
             font-size: 13px;
-            color: #394145;
-            line-height: 21.6px;
+            line-height: 30.29px;
+            color: rgba(110, 123, 132, 1);
           }
-        }
-      }
-    }
-    .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;
-        color: #2478ff;
-        font-weight: 400;
-        border: 0.5px solid #2478ff;
-        border-radius: 2px;
-        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 {
+          .tag1 {
             position: absolute;
-            right: 0;
-            width: 25px;
-            height: 9.5px;
-            font-size: 12px;
-            // line-height: 30.29px;
-            color: #277aff;
+            left: 0;
+            bottom: 14.5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 13px;
+            color: rgba(203, 128, 231, 1);
+            border: 0.5px solid rgba(203, 128, 231, 1);
+            line-height: 19.2px;
+            //padding: 0 10px;
           }
-        }
-
-        .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 {
+          .tag2 {
             position: absolute;
-            right: 0;
-            width: 25px;
-            height: 9.5px;
-            font-size: 12px;
-            // line-height: 30.29px;
-            color: #ee6661;
+            left: 92px;
+            bottom: 14.5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 13px;
+            color: rgba(136, 157, 238, 1);
+            border: 0.5px solid rgba(136, 157, 238, 1);
+            line-height: 19.2px;
+            //padding: 0 10px;
           }
-        }
-        .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)
-            );
+          .tag3 {
+            position: absolute;
+            left: 0;
+            bottom: 14.5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 13px;
+            color: rgba(104, 206, 234, 1);
+            border: 0.5px solid rgba(104, 206, 234, 1);
+            line-height: 19.2px;
+            //padding: 0 10px;
           }
         }
       }
+     }
     }
   }
 }
diff --git a/src/views/projectdetails/projectDetails.vue b/src/views/projectdetails/projectDetails.vue
new file mode 100644
index 0000000..4b69d5a
--- /dev/null
+++ b/src/views/projectdetails/projectDetails.vue
@@ -0,0 +1,567 @@
+<template>
+  <div class="projectdetails">
+  <div class="main">
+    <div class="up">
+     <div class="notice">
+      <span class="text">请各位选课的同学提前阅读本课程的“教学大纲与计划请各位选课的同学提前阅读本课程的“教学大纲与计划</span> <span class="close"></span>
+     </div>
+     <div class="content">
+      <div class="title">中级产品经理</div>
+      <div class="text2">课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介简介课程简介</div>
+     </div>
+    </div>
+    <div class="down">
+     <div class="project_title">项目内容</div>
+     <div class="project_first">
+        <div class="course1_first">
+            <div class="text8">序：管理者如何持续找到发力点</div>
+            <div class="course1_right">
+              <div class="circular"></div>
+              <div class="text9">进行中</div>
+              <div class="btn1"></div>
+            </div>
+        </div>
+        <div class="course_content">
+          <div class="study1">
+            <div class="firstclass"></div>
+            <div class="firstprogress">
+              <span class="firsttext">BOE端到端体系 - 第七章</span>
+              <span class="secondtext">70%</span>
+              <div class="progressbox">
+                <div class="progressboxpart"></div>
+              </div>
+            </div>
+          </div>
+          <div class="study2">
+            <div class="secondclass"></div>
+            <div class="secondprogress">
+              <span class="firsttext">中级产品经理项目 - 产品经理…</span>
+              <span class="secondtext">52%</span>
+              <div class="progressbox">
+                <div class="progressboxpart"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+     </div>
+     <div class="project_second">
+        <div class="course1_first">
+            <div class="text8">第一讲：业务起航的支点 - 你的风格</div>
+            <div class="course1_right">
+              <div class="circular"></div>
+              <div class="text9">进行中</div>
+              <div class="btn1"></div>
+            </div>
+        </div>
+        <div class="secondcontent">
+          <div class="question">
+            <div class="issue">趣味课前小测 - MBTI测试：你适合做哪个方向？</div>
+            <div class="tag1">选修</div>
+            <div class="tag2">测评</div>
+          </div>
+          <div class="question">
+            <div class="issue">社交产品如何做好模块化处理？</div>
+            <div class="tag3">必修</div>
+            <div class="tag2">作业</div>
+          </div>
+        </div>
+     </div>
+    </div>
+    <div class="last">
+        <div class="project_title">数据排行</div>
+        <div class="ranking">
+            <div class="rankingbox">
+                <div class="ranknumber">
+                 <div class="describe">积分</div>
+                 <div class="number">12</div>
+                 <div class="describe_part">名</div>
+                </div>
+                <div class="ranknumber">
+                 <div class="describe">完成度</div>
+                 <div class="number">21</div>
+                 <div class="describe_part">名</div>
+                </div>
+            </div>
+        </div>
+    </div>
+  </div>
+
+  </div>
+</template>
+
+<script>
+
+</script>
+
+<style lang="scss">
+.projectdetails {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .main {
+    width:100%;
+    display: flex;
+    flex-direction: column;
+    //justify-content: center;
+    .up {
+     width: 100%;
+     height: 162px;
+     display: flex;
+     flex-direction: column;
+     align-items: center;
+     //justify-content: center;
+     background-color: rgba(255, 255, 255, 1);
+     .notice {
+      background-color: rgba(255, 251, 238, 1);
+      width: 100%;
+      height: 25px;
+      display: flex;
+      jusyift-content: center;
+      //position: relative;
+      .text {
+        //display: flex;
+        height: 25px;
+        //position: absolute;
+        color: rgba(255, 158, 0, 1);
+        padding: 6px 41px 6.5px 15.5px;
+        font-size: 12px;
+        //line-height: 24px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .close {
+        display: flex;
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 9.5px;
+        height: 9.5px;
+        background-image: url(../../assets/image/pathmap/close.png);
+        margin-top: 10px;
+        margin-right: 16px;
+        margin-bottom: 8px;
+      }
+     }
+     .content {
+      width: 90%;
+      display: flex;
+      flex-direction: column;
+      .title {
+        margin-top: 15.5px;
+        font-size: 14px;
+        font-weight: 700;
+        line-height: 21.6px;
+        color: rgba(4, 36, 60, 1);
+      }
+      .text2 {
+        display: flex;
+        margin-top: 10px;
+        margin-bottom: 22.5px;
+        font-size: 13px;
+        color: rgba(51, 51, 48, 1);
+        line-height: 24px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+     }
+    }
+    .down {
+     width: 100%;
+     margin-top: 11.5px;
+     //height: 529px;
+     display: flex;
+     flex-direction: column;
+     align-items: center;
+     //justify-content: center;
+     background-color: rgba(255, 255, 255, 1);
+     .project_title {
+      width:100%;
+      display: flex;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 12px;
+      color: rgba(13, 35, 58, 1);
+      padding: 17px 0 17px 36.5px;
+      border-bottom: 0.5px solid rgba(241, 242, 243, 1);
+     }
+     .project_first {
+      width: 90%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 18px;
+      .course1_first {
+          width: 100%;
+          height: 35px;
+          display: flex;
+          justify-content: content;
+          border-radius: 10px;
+          background-color: #f9f9f9;
+          .text8 {
+            display: flex;
+            flex: 1;
+            margin-top: 11px;
+            margin-left: 20px;
+            margin-bottom: 10.5px;
+            height: 13.5px;
+            font-size: 14px;
+            font-weight: 600;
+            color: #333330;
+          }
+          .course1_right {
+            display: flex;
+            position: relative;
+            width: 60px;
+            height: 13.5px;
+            margin-top: 15px;
+            // margin-right: 10.5px;
+            .circular {
+              position: absolute;
+              top: 1px;
+              right: 63px;
+              width: 8.5px;
+              height: 8.5px;
+              border-radius: 7px;
+              border: 1px solid #0060ff;
+            }
+            .text9 {
+              display: flex;
+              justify-content: content;
+              position: absolute;
+              width: 40px;
+              height: 13.5px;
+              top: 0;
+              //left: 20px;
+              right: 18.5px;
+              line-height: 13.5px;
+              color: #0060ff;
+              font-size: 13px;
+              font-weight: 600;
+            }
+            .btn1 {
+              width: 7px;
+              height: 6px;
+              position: absolute;
+              top: 3px;
+              right: 6px;
+              background-image: url(../../assets/image/pathmap/btn.png);
+            }
+          }
+      }
+      .course_content {
+        width: 90%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-top: 26.5px;
+        .study1 {
+          display: flex;
+          //justify-content: center;
+          width: 100%;
+          margin-bottom: 15px;
+          .firstclass {
+            display: flex;
+            width: 74px;
+            height: 43px;
+            background-image: url(../../assets/image/pathmap/firstclass.png)
+          }
+          .firstprogress {
+            display: flex;
+            flex: 1;
+            position: relative;
+            margin-left: 9.5px;
+            .firsttext {
+              position: absolute;
+              //top: 6px;
+              display: flex;
+              font-size: 13px;
+              line-height: 30.29px;
+              color: rgba(110, 123, 132, 1);
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+            }
+            .secondtext {
+              position: absolute;
+              //top: 6px;
+              right: 0;
+              font-size: 12px;
+              line-height: 30.29px;
+              color: rgba(39, 122, 255, 1);
+            }
+            .progressbox {
+              width: 100%;
+              position: absolute;
+              display: flex;
+              height: 6.4px;
+              bottom: 4px;
+              background-color: rgba(232, 241, 254, 1);
+              border-radius:2px;
+              .progressboxpart {
+                width: 70%;
+                height: 6.4px;
+                border-radius: 2px;
+                background: linear-gradient(
+                -180deg,
+                rgba(36, 120, 255, 1),
+                rgba(80, 147, 255, 1)
+              ); 
+              }
+            }
+          }
+        }
+        .study2 {
+          display: flex;
+          width: 100%;
+          margin-bottom: 15px;
+          .secondclass {
+            width: 74px;
+            height: 43px;
+            background-image: url(../../assets/image/pathmap/secondclass.png)
+          }
+          .secondprogress {
+            display: flex;
+            flex: 1;
+            position: relative;
+            margin-left: 9.5px;
+            .firsttext {
+              position: absolute;
+              //top: 6px;
+              display: flex;
+              font-size: 13px;
+              line-height: 30.29px;
+              color: rgba(110, 123, 132, 1);
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+            }
+            .secondtext {
+              position: absolute;
+              //top: 6px;
+              right: 0;
+              font-size: 12px;
+              line-height: 30.29px;
+              color: rgba(39, 122, 255, 1);
+            }
+            .progressbox {
+              width: 100%;
+              position: absolute;
+              display: flex;
+              height: 6.4px;
+              bottom: 4px;
+              background-color: rgba(232, 241, 254, 1);
+              border-radius:2px;
+              .progressboxpart {
+                width: 52%;
+                height: 6.4px;
+                border-radius: 2px;
+                background: linear-gradient(
+                -180deg,
+                rgba(36, 120, 255, 1),
+                rgba(80, 147, 255, 1)
+              ); 
+              }
+            }
+          }
+        }
+      }
+     }
+     .project_second {
+      width: 90%;
+      display: flex;
+      flex-direction: column;
+      align-items:center;
+      margin-top: 10.5px;
+      .course1_first {
+          width: 100%;
+          height: 35px;
+          display: flex;
+          justify-content: content;
+          border-radius: 10px;
+          background-color: #f9f9f9;
+          .text8 {
+            display: flex;
+            flex: 1;
+            margin-top: 11px;
+            margin-left: 20px;
+            margin-bottom: 10.5px;
+            height: 13.5px;
+            font-size: 14px;
+            font-weight: 600;
+            color: #333330;
+          }
+          .course1_right {
+            display: flex;
+            position: relative;
+            width: 60px;
+            height: 13.5px;
+            margin-top: 15px;
+            // margin-right: 10.5px;
+            .circular {
+              position: absolute;
+              top: 1px;
+              right: 63px;
+              width: 8.5px;
+              height: 8.5px;
+              border-radius: 7px;
+              border: 1px solid #0060ff;
+            }
+            .text9 {
+              display: flex;
+              justify-content: content;
+              position: absolute;
+              width: 40px;
+              height: 13.5px;
+              top: 0;
+              //left: 20px;
+              right: 18.5px;
+              line-height: 13.5px;
+              color: #0060ff;
+              font-size: 13px;
+              font-weight: 600;
+            }
+            .btn1 {
+              width: 7px;
+              height: 6px;
+              position: absolute;
+              top: 3px;
+              right: 6px;
+              background-image: url(../../assets/image/pathmap/btn.png);
+            }
+          }
+      }
+      .secondcontent {
+        width: 90%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-top: 10px;
+        .question {
+          width: 100%;
+          display: flex;
+          position: relative;
+          height: 72px;
+          border-bottom: 0.5px solid rgba(241, 242, 243, 1);
+          .issue {
+            width: 100%;
+            display: flex;
+            font-size: 13px;
+            line-height: 30.29px;
+            color: rgba(110, 123, 132, 1);
+          }
+          .tag1 {
+            position: absolute;
+            left: 0;
+            bottom: 14.5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 13px;
+            color: rgba(203, 128, 231, 1);
+            border: 0.5px solid rgba(203, 128, 231, 1);
+            line-height: 19.2px;
+            //padding: 0 10px;
+          }
+          .tag2 {
+            position: absolute;
+            left: 92px;
+            bottom: 14.5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 13px;
+            color: rgba(136, 157, 238, 1);
+            border: 0.5px solid rgba(136, 157, 238, 1);
+            line-height: 19.2px;
+            //padding: 0 10px;
+          }
+          .tag3 {
+            position: absolute;
+            left: 0;
+            bottom: 14.5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 13px;
+            color: rgba(104, 206, 234, 1);
+            border: 0.5px solid rgba(104, 206, 234, 1);
+            line-height: 19.2px;
+            //padding: 0 10px;
+          }
+        }
+      }
+     }
+    }
+    .last {
+        width: 100%;
+        margin-top: 11.5px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: rgba(255, 255, 255, 1);
+        .project_title {
+            width:100%;
+            display: flex;
+            font-size: 16px;
+            font-weight: 500;
+            line-height: 12px;
+            color: rgba(13, 35, 58, 1);
+            padding: 17px 0 17px 36.5px;
+            border-bottom: 0.5px solid rgba(241, 242, 243, 1);
+        }
+        .ranking {
+            width: 90%;
+            display: flex;
+            justify-content: center;
+            margin-top: 14px;
+            border-radius: 10px;
+            background-color: rgba(242, 245, 247, 1);
+            margin-bottom: 13.5px;
+            .rankingbox {
+                width: 90%;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                .ranknumber {
+                    width: 100%;
+                    height: 50px;
+                    display: flex;
+                    position: relative;
+                    align-items: center;
+                    border-bottom: 0.5px solid rgba(223, 223, 223, 1);
+                    .describe {
+                        display: flex;
+                        position: absolute;
+                        font-size: 14px;
+                        font-weight: 500;
+                        line-height: 24px;
+                        color: rgba(51, 51, 48, 1);
+                    }
+                    .number {
+                        display: flex;
+                        position:absolute;
+                        right: 23.5px;
+                        font-size: 21px;
+                        font-weight:bold;
+                        line-height: 24px;
+                        color: rgba(0, 96, 255, 1)
+                        
+                    }
+                    .describe_part {
+                        display: flex;
+                        position: absolute;
+                        right: 0;
+                        font-size: 14px;
+                        font-weight: 500;
+                        line-height: 24px;
+                        color: rgba(51, 51, 48, 1);
+                    }
+                }
+            }
+        }
+    }
+  }
+}
+</style>