登录页完成

client/components/icons/demo_fontclass.html

@@ -36,6 +36,18 @@
                     <div class="fontclass">.el-icon-self-album</div>
                 </li>
             
+                <li>
+                <i class="icon selfAllIcon el-icon-self-grade"></i>
+                    <div class="name">Grade</div>
+                    <div class="fontclass">.el-icon-self-grade</div>
+                </li>
+            
+                <li>
+                <i class="icon selfAllIcon el-icon-self-nav"></i>
+                    <div class="name">nav</div>
+                    <div class="fontclass">.el-icon-self-nav</div>
+                </li>
+            
                 <li>
                 <i class="icon selfAllIcon el-icon-self-mima"></i>
                     <div class="name">密码</div>
@@ -48,6 +60,12 @@
                     <div class="fontclass">.el-icon-self-character</div>
                 </li>
             
+                <li>
+                <i class="icon selfAllIcon el-icon-self-xuexi-"></i>
+                    <div class="name">学习</div>
+                    <div class="fontclass">.el-icon-self-xuexi-</div>
+                </li>
+            
                 <li>
                 <i class="icon selfAllIcon el-icon-self-statistic"></i>
                     <div class="name">statistic</div>

client/components/icons/demo_symbol.html

@@ -59,6 +59,22 @@
                     <div class="fontclass">#el-icon-self-album</div>
                 </li>
             
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#el-icon-self-grade"></use>
+                    </svg>
+                    <div class="name">Grade</div>
+                    <div class="fontclass">#el-icon-self-grade</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#el-icon-self-nav"></use>
+                    </svg>
+                    <div class="name">nav</div>
+                    <div class="fontclass">#el-icon-self-nav</div>
+                </li>
+            
                 <li>
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#el-icon-self-mima"></use>
@@ -75,6 +91,14 @@
                     <div class="fontclass">#el-icon-self-character</div>
                 </li>
             
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#el-icon-self-xuexi-"></use>
+                    </svg>
+                    <div class="name">学习</div>
+                    <div class="fontclass">#el-icon-self-xuexi-</div>
+                </li>
+            
                 <li>
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#el-icon-self-statistic"></use>

client/components/icons/demo_unicode.html

@@ -56,6 +56,18 @@
                     <div class="code">&amp;#xe734;</div>
                 </li>
             
+                <li>
+                <i class="icon selfAllIcon">&#xe66c;</i>
+                    <div class="name">Grade</div>
+                    <div class="code">&amp;#xe66c;</div>
+                </li>
+            
+                <li>
+                <i class="icon selfAllIcon">&#xe66b;</i>
+                    <div class="name">nav</div>
+                    <div class="code">&amp;#xe66b;</div>
+                </li>
+            
                 <li>
                 <i class="icon selfAllIcon">&#xe607;</i>
                     <div class="name">密码</div>
@@ -68,6 +80,12 @@
                     <div class="code">&amp;#xe62e;</div>
                 </li>
             
+                <li>
+                <i class="icon selfAllIcon">&#xe609;</i>
+                    <div class="name">学习</div>
+                    <div class="code">&amp;#xe609;</div>
+                </li>
+            
                 <li>
                 <i class="icon selfAllIcon">&#xe601;</i>
                     <div class="name">statistic</div>

client/components/icons/iconfont.css

 
 @font-face {font-family: "selfAllIcon";
-  src: url('iconfont.eot?t=1544429223466'); /* IE9*/
-  src: url('iconfont.eot?t=1544429223466#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAn0AAsAAAAAD2wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8d0kmY21hcAAAAYAAAACFAAAB9E8i7fpnbHlmAAACCAAABbUAAAhw2NTM92hlYWQAAAfAAAAALwAAADYTh8NLaGhlYQAAB/AAAAAcAAAAJAfeA4lobXR4AAAIDAAAAA4AAAAgIAAAAGxvY2EAAAgcAAAAEgAAABIK9gjmbWF4cAAACDAAAAAeAAAAIAEaANNuYW1lAAAIUAAAAVIAAAKR7FrMk3Bvc3QAAAmkAAAATwAAAGrX3Q4WeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeMT43YW7438AQw9zA0AAUZgTJAQDhKgwZeJztkcEJwzAMRb8SN4aSQybIBCWnzJNT5sgAPnVKeQz3SzKUQkeIxDPWR7bgC8ADwEheJAHyhsCiUBXXRzxdTzhYL0z2q2jWTS8tda17a/+UnxB/+U0gc/ZEfeB/NnnCHbOfZ6+yuRr4vWM70y2gg9ArsH1pCegq6hrYvuoeIH0AMcQnOwAAAHicjVVdbBRVFL7n3tmZ2dndmd2Z2Zmdtrvb/S8/XejudqaVtChbqk1FEYxIaIUmlFYU4wM/ERssD0qNhgdQImhipIkmxoTE2AcVm0qNTzxrGl7QRzQ+oTHRXT13hyIKCW5m555z7jn3nPudnyEyIX8tsSX2OJFJjLSRHMmTbnKYnCQEypAVTavilmpuxTLFbFFSgfO1opQt+rJAbhD8PRiE3lqxVBRRKQXeIFQtTuZqruduxs1SGXoHwavY1iCgWk4FybRs1LAtr+J6Kajibq2Ie4Pc2rNsFWgnuDtcfF7RO3R8Xsx2dw91d2elYFANBmHkQci7eXzAS2VDYmpPV0iKOOFCSYT3Ln3yU87KU0olGujoEFbmd28PJ8JyeHx6sRFItkM14cTaUtvW9Z0YQkGhOTn99P4PrKET1Q0grNB9a7hXd43KvepngHsd6t7LvarBpXbuMw+/lB9tj1mi056QEglJMiOdP1766H25z2NMls1gebJ3fkUoicFEQiwHGov9L1Rg24QThUxHsYT8lpcby1AdOWvVT9ef2j+/QoiAuVhkV9iWVi4Ok29bOfCBLvmpqBWN7AYQS4hbqYiQbka8JBHxLBUR5WLNQ5nnIn5pcD2UIe1aSNsosi07BRpYNoqQtkSkTQllEk8UniqhDGmxwFUwLa5/CD9jlaqVir5L7nGVkkTfmNuuUqZt+a64J4mSfwH6bFQZMc0R0VBqZTkIphaZUWKBNo2K8iTApCxSrS0QU2YimglBuVxTDPG2flC+v36g+V3cHg4Z6bQRGrbjBlUdI6wfU+QJrCkK6oSsHNPDhqNS43/qwX8qsdkZmaT03pEqpnLvUO9rcCcWsKsVhiDcHa7Wqd0d792KYR0V9fA/igR/FGvsa/YN1tgD5MlWfZWwE1Pgt6Xfo8ipWCitVpZc3qxZUTJRJomYzGrFa3VoAanNvKj44pYBywm7XwPRYstY3thVsHtnqE0LhIZHsf+wF/AdCJuCWMuHhUDIiOggUD3CBCkYkcTOl3Jf/t44L0mG8vBYMAZR5aQk2I48uU8pyBOiDFf8E3a/29+Sb5x95NSCICycmltgAEo40mWu7QxouipLmpdSdClI1a3rpO8Zi715WgX1q5ATDYTefkuj0cuRBBE5GDj3+BIkDllDBsg04nF7nhUyeN8YQpHB28bKYCCbQbRiyGZQ7GV4R1Y5GeOd2Ys6DHU4SmWKoNo+WK6HE7Ba4b3n44ZzDsccWZ1dVGnc6KkD1Huo1VoFSFmNG1YKcKUWrqONBWwblY4ijaUH9WvP9LFAKOIk4vn0+Fb0GhFYSKdrXRozg7FyaUOaCem+iK7DrVF1DU9vHvS9wLmeeuM3/3g456+/8mNTVvMI9wNv9NSbS2xb3olSQdTwPq+qapyBGpL2iLIYCotKf1s6C3q7fquefmBbWZp0kT7Er1Dk04eXUGuiY0XlWnXEJ/2dcDJTzGWyxQH8MlQziA6zm72MFpzR9Q+NJcSomlXk7InxgZ15N87aDQfAMWjZ5Gt3XGs+psWxU+BTbCJYgI3Hyx3rgD4xEDOgau4ah0xX/UOPmzRf803huOE0L2jxuPZn1DSjt+KeZRfYLCmSCiGBXkxtK9ySX+b4jud4XnmE/DrxFHVhtTkkvMB5+sbRse1O8uJzBy8mne1jR18HprcbwvKZs8sC6G1G4wibOzA1x9jc1IG5vbnZqxvdy9NTM5TOTE1fdnuuzuY43LkzywLa5CNRMOjnB7g6GlE6h0G1evUz1oUVmibrST8ZJqTgA9fLMoV4lQNalape1a6W+PczVu3FGAewwLJiEr/VgTsZCb/QMc7EsWDZcNJpXHeSQE83RBc29cwf2nHIxf98zyZwGx+HolFb02BHWNPsaPQdXBKa9rOTTDo04LqNP1BrEX9oiHzjOmjh51GHvwDpm5y+6dMwzJnmF2ENYf8biBxYgQAAAHicY2BkYGAAYhlelVXx/DZfGbhZGEDghon9cgT9v4GFgbkByOVgYAKJAgDq6gicAHicY2BkYGBu+N/AEMPCAAJAkpEBFXAAAEcOAnF4nGNhYGBgwYMBAmAAIQAAAAAAAADGAfgCfAMgA3wDzgQ4AAB4nGNgZGBg4GA4DsQgwATEXEDIwPAfzGcAAB1JAe4AAHicdZDLSsNAFIb/9CYm4EKx63GjoJBeNkLBRSm0dluh+zSdtClJpiTTQje+gQufx6fwBfQp3PubHqFIzTCH73xzzpkhAM7xAQf775J7zw48Znuu4ARKuEp/I1wjd4Xr5AfhBvlR2MUdnoQ9XOCZE5zaKbNbvAo7aOJNuIIzvAtX6T+Fa+Qv4TqajifcIF8Ju5g698Ierp0Xd5DrwOq5mu1UHJosMpl1C51E/SQZM5/oxSYJ8gNzgFOdF7HJVMdvH9iRznT+O7PYLrrWRirKTaqGHK6TxKh1blY6tP7S2nWv1YrE+6FJ+cQBcmgEsIxz/tYZdowxQhhkiMpoWVfwPGHeZ0wwlvMJ7QIbmoBzjtcct1Pan464zBQ68NH+p3ZEm5X1f99ZYMv7u7SWXYo7Z0dKGsrLdTnJ0KzLsxVNSO9jWXat0UOLK/pT75d3p99T3XZbAAB4nG3B0Q6AIAgAQEgt7C/JWLGlbUL1+z302h0M8JnhH+GAASMmHHFCwgy0qpXzlk4m7to2C02exMdy1Vi1ci47dy4uPZuzq7kWgBc/bBPLAA==') format('woff'),
-  url('iconfont.ttf?t=1544429223466') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('iconfont.svg?t=1544429223466#selfAllIcon') format('svg'); /* iOS 4.1- */
+  src: url('iconfont.eot?t=1545290857246'); /* IE9*/
+  src: url('iconfont.eot?t=1545290857246#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
+  url('iconfont.ttf?t=1545290857246') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('iconfont.svg?t=1545290857246#selfAllIcon') format('svg'); /* iOS 4.1- */
 }
 
 .selfAllIcon {
@@ -23,9 +23,15 @@
 
 .el-icon-self-album:before { content: "\e734"; }
 
+.el-icon-self-grade:before { content: "\e66c"; }
+
+.el-icon-self-nav:before { content: "\e66b"; }
+
 .el-icon-self-mima:before { content: "\e607"; }
 
 .el-icon-self-character:before { content: "\e62e"; }
 
+.el-icon-self-xuexi-:before { content: "\e609"; }
+
 .el-icon-self-statistic:before { content: "\e601"; }
 

client/components/icons/iconfont.svg

@@ -32,12 +32,21 @@ Created by iconfont
     <glyph glyph-name="album" unicode="&#59188;" d="M256 448m-64 0a2 2 0 1 0 128 0 2 2 0 1 0-128 0ZM714.688 640 181.312 640C116.64 640 64 587.36 64 522.688l0-405.376C64 52.64 116.64 0 181.312 0l533.376 0C779.36 0 832 52.64 832 117.312L832 522.688C832 587.36 779.36 640 714.688 640zM768 117.312C768 87.904 744.096 64 714.688 64L181.312 64C151.936 64 128 87.904 128 117.312L128 522.688C128 552.064 151.936 576 181.312 576l533.376 0C744.096 576 768 552.064 768 522.688L768 117.312zM842.688 768 256 768C238.336 768 224 753.664 224 736s14.336-32 32-32l586.688 0C872.096 704 896 680.064 896 650.688L896 256c0-17.696 14.304-32 32-32s32 14.304 32 32L960 650.688C960 715.36 907.36 768 842.688 768zM672.64 447.264c-129.056 0-143.936-72.672-152.832-116.096-7.2-35.168-10.4-39.968-28.64-42.88-34.976-5.568-44-0.192-58.912 8.8-15.456 9.312-36.672 22.08-77.952 23.168C227.616 322.88 194.112 172.16 192.704 165.76c-3.712-17.28 7.264-34.304 24.544-38.016 2.272-0.512 4.544-0.704 6.752-0.704 14.752 0 28 10.24 31.264 25.248 0.224 1.056 23.232 104.032 95.488 104.032 0.64 0 1.28 0 1.92-0.032 24.352-0.608 33.632-6.208 46.496-13.984 24.032-14.464 48.352-25.76 102.08-17.184 64.192 10.272 74.432 60.192 81.184 93.216 8.32 40.512 13.312 64.928 90.144 64.928 17.696 0 32 14.336 32 32S690.304 447.264 672.64 447.264z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="grade" unicode="&#58988;" d="M863.721739 341.704348c24.486957 48.973913 28.93913 102.4 28.93913 160.278261C892.66087 706.782609 734.608696 873.73913 527.582609 873.73913 320.556522 873.73913 162.504348 706.782609 162.504348 501.982609c0-57.878261 4.452174-111.304348 28.93913-160.278261L51.2 103.513043c0 0 95.721739-35.617391 193.669565-55.652174 64.556522-73.46087 117.982609-151.373913 117.982609-151.373913l129.113043 247.095652c8.904348 0 20.034783 0 26.713043 0 8.904348 0 20.034783 0 26.713043 0l138.017391-233.73913c0 0 57.878261 64.556522 124.66087 138.017391 97.947826 20.034783 193.669565 55.652174 193.669565 55.652174L863.721739 341.704348 863.721739 341.704348 863.721739 341.704348zM353.947826-7.791304c0 0-46.747826 60.104348-89.043478 102.4-62.330435 17.808696-144.695652 35.617391-144.695652 35.617391L215.930435 294.956522c51.2-66.782609 135.791304-129.113043 220.382609-149.147826L353.947826-7.791304 353.947826-7.791304zM520.904348 185.878261c-80.13913 0-309.426087 48.973913-316.104348 316.104348C198.121739 671.165217 351.721739 831.443478 520.904348 831.443478c169.182609 0 329.46087-162.504348 329.46087-329.46087C852.591304 245.982609 601.043478 185.878261 520.904348 185.878261L520.904348 185.878261zM685.634783-7.791304l-82.365217 151.373913c84.591304 20.034783 182.53913 84.591304 233.73913 151.373913l95.721739-164.730435c0 0-82.365217-17.808696-144.695652-35.617391L685.634783-7.791304 685.634783-7.791304zM527.582609 720.13913c-117.982609 0-213.704348-95.721739-213.704348-213.704348s95.721739-213.704348 213.704348-213.704348c117.982609 0 213.704348 95.721739 213.704348 213.704348S645.565217 720.13913 527.582609 720.13913L527.582609 720.13913 527.582609 720.13913zM534.26087 337.252174c-53.426087 0-169.182609 20.034783-178.086957 178.086957-4.452174 84.591304 95.721739 164.730435 178.086957 164.730435 84.591304 0 162.504348-95.721739 164.730435-178.086957C701.217391 390.678261 587.686957 337.252174 534.26087 337.252174L534.26087 337.252174zM534.26087 337.252174"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="nav" unicode="&#58987;" d="M888.838 576.225l-751.1 0c-23.944 0-43.339 19.553-43.339 43.646l0 40.012c0 24.093 19.395 43.645 43.339 43.645l751.1 0c23.923 0 43.334-19.554 43.334-43.645l0-40.012c-0.001-24.093-19.411-43.646-43.333-43.646l0 0zM888.838 308.491l-751.1 0c-23.944 0-43.339 19.533-43.339 43.64l0 39.998c0 24.115 19.395 43.647 43.339 43.647l751.1 0c23.923 0 43.334-19.533 43.334-43.647l0-39.998c-0.001-24.107-19.411-43.64-43.333-43.64l0 0zM888.838 19.83l-751.1 0c-23.944 0-43.339 19.532-43.339 43.627l0 40.017c0 24.093 19.395 43.641 43.339 43.641l751.1 0c23.923 0 43.334-19.548 43.334-43.641l0-40.017c-0.001-24.094-19.411-43.627-43.333-43.627l0 0z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="mima" unicode="&#58887;" d="M791.366 436.93l-459.174 0.791c-0.186 61.936-16.847 157.926 36.027 216.192 32.142 35.52 86.326 72.068 144.127 72.068 85.395 0 149.246-64.412 180.166-144.126 9.009-22.992 16.936-35.38 36.037-36.037 47.899-1.45 44.986 49.075 36.029 72.067C719.914 732.97 636.118 798.047 512.346 798.047c-84.12 0-130.475-17.265-180.154-72.065-76.009-83.746-72.259-219.151-72.067-288.26l-26.795-0.791c-25.045 0-45.273-20.034-45.273-44.667v-378.249c0-24.774 20.269-44.755 45.273-44.755h557.99c25.009 0 45.273 19.989 45.273 44.755V392.263c0.046 24.678-20.218 44.667-45.227 44.667zM765.68 77.65c0-9.966-3.476-18.514-10.58-25.52-7.045-7.051-15.56-10.58-25.517-10.58H296.362c-9.966 0-18.472 3.478-25.475 10.58-7.051 7.049-10.624 15.553-10.624 25.52V330.365c0 19.878 16.166 36.054 36.098 36.054h433.212c19.932 0 36.107-16.176 36.107-36.054V77.65z"  horiz-adv-x="1024" />
 
     
     <glyph glyph-name="character" unicode="&#58926;" d="M921.087359-94.72000000000003v35.2A410.24 410.24 0 0 1 661.887359 320a307.2 307.2 0 1 1-300.8 0 410.24 410.24 0 0 1-256-380.8v-35.2H101.887359a32 32 0 0 1 32-32 32 32 0 0 1 32 32v34.56a345.6 345.6 0 0 0 691.2 0v-35.2a31.36 31.36 0 0 1 31.36-30.08 32 32 0 0 1 32.64 32zM270.207359 588.8A241.28 241.28 0 1 0 511.487359 347.52 241.28 241.28 0 0 0 270.207359 588.8z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="xuexi-" unicode="&#58889;" d="M996.5 608.9L567.6 827.2c-34.8 17.6-76.4 17.6-111.2 0L27.5 609.6C10.6 601 0 583.9 0 564.8c0-19 10.5-36.2 27.5-44.8l219.8-111.8v-305c0-33.9 18.8-64.4 49-79.7l164.9-83.6c15.9-8.1 33.4-12.1 50.9-12.1s35 4 50.9 12.1l164.9 83.6c30.2 15.3 49 45.9 49 79.7V407.8L901.4 471v-111.9c0-15.2 12.3-27.5 27.5-27.5s27.5 12.3 27.5 27.5V494.4c0 1.5-0.1 2.9-0.3 4.3l40.4 20.5c17 8.6 27.5 25.8 27.5 44.8 0 19.1-10.5 36.3-27.5 44.9zM721.8 103.10000000000002c0-13.1-7.2-24.8-18.9-30.8L538-11.299999999999955c-16.3-8.3-35.8-8.3-52.1 0L321 72.29999999999995c-11.6 5.9-18.9 17.7-18.9 30.8V380.20000000000005l154.2-78.5c17.4-8.8 36.5-13.2 55.6-13.2s38.2 4.4 55.6 13.2l154.2 78.2v-276.8z m-179 247.6c-19.3-9.8-42.3-9.8-61.5 0L60.5 564.8l420.7 213.4c19.3 9.8 42.3 9.8 61.5 0l420.7-214.1-420.6-213.4z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="statistic" unicode="&#58881;" d="M838.33 236.26800000000003c0-33.422-21.592-54.388-54.39-54.388H240.059c-32.796 0-54.388 20.966-54.388 54.388 0 0-0.409 482.507-0.409 516.961h653.477c0-54.85-0.409-516.96-0.409-516.96zM76.892 807.345v-54.389h54.389v-516.689c0-64.45 44.707-108.776 108.776-108.776h163.166L294.447-62.870000000000005l81.909 0.353 108.45 190.006h54.388l108.45-190.006 81.909-0.353-108.777 190.36h163.166c64.069 0 108.776 44.326 108.776 108.776v516.69h54.389v54.39H76.893v-0.001z m271.942-543.883c15.038 0 27.194 12.156 27.194 27.194V399.432c0 15.011-12.156 27.195-27.194 27.195s-27.195-12.183-27.195-27.195v-108.776c0-15.038 12.156-27.194 27.195-27.194z m326.33 0c15.039 0 27.195 12.156 27.195 27.194V535.403c0 15.011-12.156 27.195-27.195 27.195s-27.194-12.183-27.194-27.195v-244.747c0-15.038 12.156-27.194 27.194-27.194z m-163.165 0c15.039 0 27.194 12.156 27.194 27.194v326.33c0 15.011-12.155 27.195-27.194 27.195s-27.194-12.183-27.194-27.195v-326.33c0-15.038 12.155-27.194 27.194-27.194z"  horiz-adv-x="1024" />
 
     

client/components/login/code/code.vue

 <template>
   <el-row type="flex" justify="center">
-    <el-col :xs="24" :sm="24" :md="15" :lg="15" :xl="15">
+    <el-col :xs="24" :sm="18" :md="12" :lg="9" :xl="6">
       <el-form ref="setAccountform" :model="setAccount" :rules="accountRules">
         <el-form-item prop="user">
           <el-input class="self-input" v-model="setAccount.user" type="text" placeholder="手机号" @keyup.enter.native="onSubmitSetAccount">
@@ -8,9 +8,12 @@
         </el-form-item>
         <el-form-item prop="pwd">
           <el-input v-model="setAccount.pwd" type="password" placeholder="短信验证码" @keyup.enter.native="onSubmitSetAccount">
+            <el-button slot="suffix" size="mini" :disabled="isSendCode" @click="sendCode">{{sendBtnText}}</el-button>
           </el-input>
         </el-form-item>
-        <el-button type="primary" class="login-btn" @click="onSubmitSetAccount">登录</el-button>
+        <el-form-item>
+          <el-button type="primary" class="login-btn" @click="onSubmitSetAccount">登录</el-button>
+        </el-form-item>
         <div class="text">
           <span class="code-login">
             <router-link class="router-link-class" active-class="router-link-active-class" :to="{ name: 'normalLogin' }">密码登录</router-link>
@@ -28,26 +31,56 @@
   export default {
     data () {
       return {
+        isSendCode: false, // 是否已发送验证码
+        timeInterval: null, // 定时器，倒计时
+        sendBtnText: '发送验证码', // 按钮 文字
         setAccount: {},
         accountRules: {
           'user': [
-            { required: true, message: '请输入账号', trigger: 'blur' }
+            { required: true, message: '请输入手机号', trigger: 'change' },
+            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确格式的手机号', trigger: 'change' }
           ],
           'pwd': [
-            { required: true, message: '请输入密码', trigger: 'blur' }
+            { required: true, message: '请输入短信验证码', trigger: 'change' }
           ]
         }
       }
     },
     beforeMount () {
     },
+    beforeDestroy () {
+      /* 清空倒计时 */
+      this.clearTime()
+    },
     methods: {
+      /* 发送验证码 */
+      sendCode () {
+        /* 发送验证码不管是否成功，都开始倒计时 */
+        let time = 60
+        this.isSendCode = true
+        this.sendBtnText = '60s后重发'
+        this.timeInterval = setInterval(() => {
+          if (time-- > 0) {
+            this.sendBtnText = time + 's后重发'
+          } else {
+            this.isSendCode = false
+            this.sendBtnText = '发送验证码'
+            clearInterval(this.timeInterval)
+          }
+        }, 1000)
+      },
+      /* 清空倒计时 */
+      clearTime () {
+        this.isSendCode = true
+        this.sendBtnText = '发送验证码'
+        clearInterval(this.timeInterval)
+      },
       onSubmitSetAccount () {
         this.$refs['setAccountform'].validate((valid) => {
           if (valid) {
-            if (this.setAccount.user === 'admin' && this.setAccount.pwd === '123456') {
+            if (this.setAccount.user === 'admin@qq.com' && this.setAccount.pwd === '123456') {
               /* 跳转 */
-              this.$router.push({ path: '/app/news/news-list' })
+              this.$router.push({ path: '/app/my-learn/course' })
             } else {
               this.$message.error('用户名或密码错误')
             }

client/components/login/forget/forget.vue

 <template>
-  <el-steps :active="2" align-center>
+<div>
+  <el-steps :active="stepActive" align-center>
     <el-step title="步骤1"></el-step>
     <el-step title="步骤2"></el-step>
     <el-step title="步骤3"></el-step>
   </el-steps>
+  <div v-if="stepActive === 1" class="step1">
+    <el-form ref="form1" :model="accountSet" :rules="accountRules" @submit.native.prevent>
+      <el-row>
+        <el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18">
+          <el-form-item prop="account">
+            <el-input v-model="accountSet.account" type="text" placeholder="输入注册手机号/邮箱" @keyup.enter.native="onSubmitForm1"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
+          <el-form-item>
+            <el-button type="primary" @click="onSubmitForm1">发送验证码</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="go-back">
+      <router-link class="router-link-class" active-class="router-link-active-class" :to="{ name: 'normalLogin' }">返回登录</router-link>
+    </div>
+  </div>
+  <div v-if="stepActive === 2" class="step2">
+    <div class="txt">
+      验证码已发送至：{{accountSet.account}}
+    </div>
+    <el-form ref="form2" :model="accountSet" :rules="accountRules" @submit.native.prevent>
+      <el-row>
+        <el-col :xs="24" :sm="14" :md="14" :lg="14" :xl="14">
+          <el-form-item label-width="1.2rem" prop="code" :label="(accountSet.type ? '邮箱验证码' : '手机验证码')">
+            <el-input v-model="accountSet.code" type="text" placeholder="输入4位验证码"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10">
+          <el-form-item>
+            <el-button type="primary" :disabled="isSendCode" @click="sendCode">{{sendBtnText}}</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="operate">
+      <el-row>
+        <el-col :span="12">
+          <el-button @click="goPrevStep">上一步</el-button>
+        </el-col>
+        <el-col :span="12">
+          <el-button @click="onSubmitForm2">下一步</el-button>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+  <div v-if="stepActive === 3" class="step3">
+    <el-form ref="form3" :model="accountSet" :rules="accountRules">
+      <el-form-item label-width="1.1rem" prop="newpwd" label="新密码">
+        <el-input v-model="accountSet.newpwd" type="password" placeholder="请输入6-20个字母、数字及标点符号，不可仅数字"></el-input>
+      </el-form-item>
+      <el-form-item label-width="1.1rem" prop="repwd" label="重复新密码">
+        <el-input v-model="accountSet.repwd" type="password" placeholder="请重新输入新密码"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmitForm3">完成</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</div>
 </template>
+
+<script>
+export default {
+  data () {
+    /* 检查账号格式 */
+    let checkAccount = (rule, value, callback) => {
+      if (!/^(1[3-9]\d{9}|\w+@\w+(\.\w+)+)$/.test(value)) {
+        callback(new Error('请输入正确格式的手机号/邮箱'))
+      } else {
+        /* 手机格式 */
+        if (/^(1[3-9]\d{9}$)/.test(value)) {
+          this.accountSet.type = 0
+        }
+        /* 邮箱格式 */
+        if (/^(\w+@\w+(\.\w+)+)/.test(value)) {
+          this.accountSet.type = 1
+        }
+        callback()
+      }
+    }
+    /* 检查密码 */
+    let checkPwd = (rule, value, callback) => {
+      if (value === this.accountSet.newpwd) {
+        callback()
+      } else {
+        callback(new Error('两次输入密码不一致'))
+      }
+    }
+    return {
+      stepActive: 1,
+      isSendCode: false, // 是否已发送验证码
+      timeInterval: null, // 定时器，倒计时
+      sendBtnText: '发送验证码', // 按钮 文字
+      accountSet: {
+        type: 0, // 0：表示手机格式，1：表示邮箱格式
+        account: '',
+        code: ''
+      },
+      accountRules: {
+        'account': [
+          { required: true, message: '请输入注册手机号/邮箱', trigger: 'blur' },
+          { validator: checkAccount, trigger: 'change' }
+        ],
+        'code': [
+          { required: true, message: '请输入4位数字验证码', trigger: 'blur' },
+          { pattern: /^(\d{4})$/, message: '请输入4位数字验证码', trigger: 'change' }
+        ],
+        'newpwd': [
+          { required: true, message: '请输入新密码', trigger: 'blur' },
+          { pattern: /^.*[^\d]+.*$/, message: '请输入6-20个字母、数字及标点符号，不可仅数字', trigger: 'blur' }
+        ],
+        'repwd': [
+          { required: true, message: '请重复输入新密码', trigger: 'blur' },
+          { validator: checkPwd, trigger: 'change' }
+        ]
+      }
+    }
+  },
+  mounted () {
+
+  },
+  beforeDestroy () {
+    /* 清空倒计时 */
+    this.clearTime()
+  },
+  methods: {
+    /* 上一步 */
+    goPrevStep () {
+      this.stepActive -= 1
+      /* 清空 第一步 填写内容 */
+      this.accountSet.account = ''
+      /* 清空倒计时 */
+      this.clearTime()
+    },
+    /* 第一步 提交 */
+    onSubmitForm1 () {
+      this.$refs['form1'].validate((valid) => {
+        if (valid) {
+          /* 跳到第二步 */
+          this.stepActive = 2
+          /* 跳到第二步 并 发送验证码 */
+          this.sendCode()
+        } else {
+          this.$message.error('请检查手机号或邮箱是否输入正确')
+          return false
+        }
+      })
+    },
+    /* 发送验证码 */
+    sendCode () {
+      /* 发送验证码不管是否成功，都开始倒计时 */
+      let time = 60
+      this.isSendCode = true
+      this.sendBtnText = '60s后重发'
+      this.timeInterval = setInterval(() => {
+        if (time-- > 0) {
+          this.sendBtnText = time + 's后重发'
+        } else {
+          this.isSendCode = false
+          this.sendBtnText = '发送验证码'
+          clearInterval(this.timeInterval)
+        }
+      }, 1000)
+    },
+    /* 清空倒计时 */
+    clearTime () {
+      this.isSendCode = true
+      this.sendBtnText = '发送验证码'
+      clearInterval(this.timeInterval)
+    },
+    /* 第二步 提交 */
+    onSubmitForm2 () {
+      this.$refs['form2'].validate((valid) => {
+        if (valid) {
+          /* 跳到第二步 */
+          this.stepActive = 3
+        } else {
+          this.$message.error('请检查验证码是否输入正确！')
+          return false
+        }
+      })
+    },
+    /* 第三步 提交 */
+    onSubmitForm3 () {
+      this.$refs['form3'].validate((valid) => {
+        if (valid) {
+          /* 跳转到 登录 */
+          this.$router.push({ path: '/login/index' })
+        } else {
+          this.$message.error('请检查输入项是否输入正确！')
+          return false
+        }
+      })
+    }
+  }
+}
+</script>

client/components/login/login.css

 .p-con { position: relative; width: 100%; height: 100%; background: #981838; color: #535353; text-align: center; }
 /* 头部 */
 .p-con .hd { position: absolute; top: 0; left: 0; right: 0; background: #ffffff; }
-.p-con .hd img { display: block; margin: 0 auto; padding: 30px 0 10px 0; }
-.p-con .hd .txt { margin: 0 auto; padding: 0 0 20px 0; letter-spacing: 5px; font-size: 32px; font-weight: 700; }
+.p-con .hd img { display: block; margin: 0 auto; padding: 0.3rem 0 0.1rem 0; }
+.p-con .hd .txt { margin: 0 auto; padding: 0 0 0.2rem 0; letter-spacing: 0.05rem; font-size: 0.32rem; font-weight: 700; }
 /* 底部 */
-.p-con .ft { position: fixed; bottom: 0; left: 0; right: 0; padding: 40px 0 10px 0; background: #e5e5e5; }
-.p-con .ft .num { font-size: 14px; line-height: 1.5; }
-.p-con .ft .time { font-size: 14px; line-height: 1.5; }
-.p-con .ft .txt { padding: 10px; color: #898989; font-size: 12px; line-height: 1.5; }
+.p-con .ft { position: fixed; bottom: 0; left: 0; right: 0; padding: 0.4rem 0 0.1rem 0; background: #e5e5e5; }
+.p-con .ft .num { font-size: 0.14rem; line-height: 1.5; }
+.p-con .ft .time { font-size: 0.14rem; line-height: 1.5; }
+.p-con .ft .txt { padding: 0.1rem; color: #898989; font-size: 0.12rem; line-height: 1.5; }
 /* 中间部分 */
-.p-con .bd { position: relative; width: 800px; padding: 145px 0 130px 0; margin: 0 auto; height: 100%; min-height: 600px; box-sizing: border-box; }
+.p-con .bd { position: relative; padding: 1.45rem 0 1.3rem 0; margin: 0 auto; height: 100%; min-height: 6rem; box-sizing: border-box; }
 .p-con .bd .router-link-class { color: #ffffff; text-decoration: none; }
 
 /* normal 登录 */
-.p-con .bd .top50 { position: absolute; top: 50%; width: 100%; transform: translateY(-50%); }
-.p-con .bd .top50 img { display: inline-block; text-align: center; }
-.p-con .bd .top50 .login-btn { margin-top: 20px; background: #ffffff; border-color: #ffffff; color: #000; width: 100%; }
-.p-con .bd .top50 .text { color: #e5e5e5; font-size: 16px; line-height: 1.5; overflow: hidden; }
+.p-con .bd .top50 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
+.p-con .bd .top50 img { display: block; margin: 0 auto; }
+.p-con .bd .top50 .login-btn { margin-top: 0.1rem; background: #ffffff; border-color: #ffffff; color: #000; width: 100%; }
+.p-con .bd .top50 .text { margin-top: -16px; color: #e5e5e5; font-size: 16px; line-height: 1.5; overflow: hidden; }
 .p-con .bd .top50 .text .code-login { float: left; cursor: pointer; }
 .p-con .bd .top50 .text .forget-pwd { float: right; cursor: pointer; }
+
+/* forget 登录 */
+.step1 { font-size: 0.16rem; width: 71%; margin: 0.6rem auto 0 auto; }
+.step1 .go-back { margin-top: 0.2rem; text-align: left; }
+.step2 { width: 71%; margin: 0.6rem auto 0 auto; }
+.step2 .txt { margin-bottom: 0.3rem; font-size: 0.16rem; color: #ffffff; text-align: left; }
+.step2 .el-form-item__label { font-size: 0.16rem; color: #ffffff; }
+.step2 .operate { margin-top: 0.2rem; }
+.step3 { width: 68%; margin: 0.6rem auto 0 auto; }
+.step3 .el-form-item:last-child { margin-bottom: 0; }
+.step3 .el-form-item__label { font-size: 0.16rem; color: #ffffff; text-align: left; }
+
+/* Extra small devices (portrait phones, less than 576px) */
+@media (max-width: 575px) {
+  html { font-size: 80px; }
+  .step3 { width: 90%; }
+}
+
+/* Small devices (landscape phones, 576px and up) */
+@media (min-width: 576px) and (max-width: 767px) {
+  html { font-size: 80px; }
+  .step3 { width: 80%; }
+}
+
+/* Medium devices (tablets, 768px and up) */
+@media (min-width: 768px) and (max-width: 991px) {
+  html { font-size: 80px; }
+}
+
+/* Large devices (desktops, 992px and up) */
+@media (min-width: 992px) and (max-width: 1199px) {
+  html { font-size: 90px; }
+}
+
+/* Extra large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {
+  html { font-size: 100px; }
+}

client/components/login/login.vue

@@ -5,7 +5,7 @@
     <div class="txt">在线学习系统</div>
   </div>
   <div class="bd">
-    <div class="top50">
+    <div class="top50 container">
       <router-view></router-view>
     </div>
   </div>
@@ -18,6 +18,7 @@
 </template>
 
 <style lang="scss" scoped>
+/* 这部分 架构 样式 基于 bootstrap - 4.1.3 栏删格系统 */
   /* 由于压缩后 样式覆盖不上，直接采用 css方式 */
   @import './login.css';
 </style>

client/components/login/normal/normal.vue

 <template>
-  <el-row>
-    <el-col class="hidden-sm-and-down" :md="13" :lg="13" :xl="13">
+  <div class="row">
+    <div class="hidden-xs-only col-md-5 col-lg-6 col-xl-6">
       <img src="../img/login-left-bg.png" alt="左侧-sofia logo">
-    </el-col>
-    <el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
+    </div>
+    <div class="col-12 col-md-7 col-lg-5 col-xl-4">
       <el-form ref="setAccountform" :model="setAccount" :rules="accountRules">
         <el-form-item prop="user">
           <el-input class="self-input" v-model="setAccount.user" type="text" placeholder="手机/邮箱" @keyup.enter.native="onSubmitSetAccount">
@@ -15,7 +15,9 @@
             <i slot="prefix" class="el-input__icon el-icon-self-mima"></i>
           </el-input>
         </el-form-item>
-        <el-button type="primary" class="login-btn" @click="onSubmitSetAccount">登录</el-button>
+        <el-form-item>
+          <el-button type="primary" class="login-btn" @click="onSubmitSetAccount">登录</el-button>
+        </el-form-item>
         <div class="text">
           <span class="code-login">
             <router-link class="router-link-class" active-class="router-link-active-class" :to="{ name: 'codeLogin' }">验证码登录</router-link>
@@ -25,8 +27,8 @@
           </span>
         </div>
       </el-form>
-    </el-col>
-  </el-row>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -36,10 +38,11 @@
         setAccount: {},
         accountRules: {
           'user': [
-            { required: true, message: '请输入账号', trigger: 'blur' }
+            { required: true, message: '请输入账号', trigger: 'change' },
+            { pattern: /^(1[3-9]\d{9}|\w+@\w+(\.\w+)+)$/, message: '请输入正确格式的手机号/邮箱', trigger: 'change' }
           ],
           'pwd': [
-            { required: true, message: '请输入密码', trigger: 'blur' }
+            { required: true, message: '请输入密码', trigger: 'change' }
           ]
         }
       }
@@ -50,9 +53,9 @@
       onSubmitSetAccount () {
         this.$refs['setAccountform'].validate((valid) => {
           if (valid) {
-            if (this.setAccount.user === 'admin' && this.setAccount.pwd === '123456') {
+            if (this.setAccount.user === 'admin@qq.com' && this.setAccount.pwd === '123456') {
               /* 跳转 */
-              this.$router.push({ path: '/app/news/news-list' })
+              this.$router.push({ path: '/app/my-learn/course' })
             } else {
               this.$message.error('用户名或密码错误')
             }

client/project/elearning-node/app.vue

@@ -56,7 +56,7 @@ export default {
 <style lang="scss" scoped>
 .el-header {
   z-index: 1;
-  background: #ffffff;
+  background: #252625;
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
 }
 </style>

client/project/elearning-node/components/errorPage/404.vue → client/project/elearning-node/components/error/404.vue

 <template>
   <div class="err-container">
-    <img class="error-404" src="../../assets/components/errorPage/404.png" alt="页面未找到" />
+    <img class="error-404" src="../../assets/components/error/404.png" alt="页面未找到" />
     <div class="tit">很抱歉，您访问的页面已经断开...</div>
   </div>
 </template>

client/project/elearning-node/components/layout/navigation.vue

@@ -2,39 +2,19 @@
   <div class="menu">
     <div class="nav-left">
       <img class="logo" src="../../assets/img/logo-header.png" alt="logo" />
-      <div class="btn" @click="setStatus">{{name}}</div>
+      <div class="text-title" @click="setStatus">在线学习系统</div>
     </div>
   </div>
 </template>
 
 <script>
-// import {surveyAPI} from '../../../../services'
 export default {
-  data () {
-    // let account = '--';
-    // try {
-    //   account = G.UserInfo.user_info.account
-    // } catch (e) {
-
-    // }
-    return {
-      userName: 'admin',
-      status: false,
-      name: '收起'
-    }
-  },
   methods: {
-    // logout () {
-    //   surveyAPI.logout()
-    //   window.location = '/login.html'
-    // },
     setStatus () {
       if (this.status) {
         this.status = false
-        this.name = '收起'
       } else {
         this.status = true
-        this.name = '展开'
       }
       this.$root.$emit('updateStatus', this.status)
     }
@@ -46,28 +26,23 @@ export default {
 .menu {
   width: 100%;
   height: 100%;
+  color: #ffffff;
   .nav-left {
     float: left;
     position: relative;
-    width: 200px;
     height: 100%;
     img.logo {
       position: absolute;
       top: 50%;
-      height: 70%;
+      height: 37%;
       width: auto;
       transform: translateY(-50%);
     }
-    .btn {
-      float: right;
-      margin-right: 20px;
+    .text-title {
+      float: left;
+      margin-left: 190px;
       line-height: 60px;
-      font-size: 12px;
-      user-select: none;
-      cursor: pointer;
-      &:hover {
-        color: #4A90E2
-      }
+      font-size: 16px;
     }
   }
 }

client/project/elearning-node/components/layout/sidebar.vue

 <template>
 <el-aside :style="[obj.sidebarStyle]">
   <el-menu :default-active="defaultActive" :collapse="obj.status">
-    <el-submenu index="1">
-      <template slot="title"><i class="el-icon-self-new"></i><span slot="title">文章管理</span></template>
-      <el-menu-item index="1-1" @click="goPages('1-1')">添加文章</el-menu-item>
-      <el-menu-item index="1-2" @click="goPages('1-2')">文章列表</el-menu-item>
-    </el-submenu>
-    <el-menu-item index="2" @click="goPages('2')">
-      <i class="el-icon-self-statistic"></i><span slot="title">网站统计</span>
-    </el-menu-item>
-    <el-menu-item index="3" @click="goPages('3')">
-      <i class="el-icon-self-album"></i><span slot="title">内容管理</span>
-    </el-menu-item>
-    <el-menu-item index="4" @click="goPages('4')">
-      <i class="el-icon-self-discover"></i><span slot="title">SEO管理</span>
-    </el-menu-item>
-    <el-menu-item index="99" @click="goPages('99')">
-      <i class="el-icon-self-settings"></i><span slot="title">账号管理</span>
+    <el-menu-item index="0" class="my-account" @click="goUpdatePic">
+      <div class="pic">
+        <template v-if="pic">
+          <img :src="pic" alt="人物头像">
+        </template>
+        <template v-else>
+          <img src="../../assets/img/person-default.jpg" alt="人物头像">
+        </template>
+      </div>
+      <el-button type="text" class="com-txt set-pwd" @click="goSetPwd">修改密码</el-button>
+      <el-button type="text" class="com-txt out-login" @click="goOutLogin">退出登录</el-button>
     </el-menu-item>
+    <template v-for="(item, index) in headerData">
+      <template v-if="item.children">
+        <el-submenu v-bind:key="index" :index="item.index">
+          <template slot="title"><i :class="item.iconClass"></i><span slot="title">{{item.name}}</span></template>
+          <template v-for="(_item, _index) in item.children">
+            <el-menu-item v-bind:key="_index" :index="_item.index" @click="goPages(_item.index)">{{_item.name}}</el-menu-item>
+          </template>
+        </el-submenu>
+      </template>
+      <template v-else>
+        <el-menu-item v-bind:key="index" :index="item.index" @click="goPages(item.index)">
+          <i :class="item.iconClass"></i><span slot="title">{{item.name}}</span>
+        </el-menu-item>
+      </template>
+    </template>
   </el-menu>
   <div class="side-move"
     :style="{left: (obj.isMouseDown ? 0 : (parseInt(obj.sidebarStyle.width)-2+'px')), width: (obj.isMouseDown ? obj.containerStyle.width : '5px')}"
@@ -41,29 +51,55 @@ export default {
     let _path = this.$GlobalVariable.siderbar.defaultPath
     let defaultActive = ''
     switch (_path) {
-      case '/app/news/add-news': defaultActive = '1-1'; break
-      case '/app/news/news-list': defaultActive = '1-2'; break
-      case '/app/website/site-show': defaultActive = '2'; break
-      case '/app/content/content-list': defaultActive = '3'; break
-      case '/app/content/add-carousel': defaultActive = '3'; break
-      case '/app/seo/page-list': defaultActive = '4'; break
-      case '/app/account/set-pwd': defaultActive = '99'; break
+      case '/app/my-learn/course': defaultActive = '1-1'; break
+      case '/app/my-learn/discussion': defaultActive = '1-2'; break
+      case '/app/my-learn/report': defaultActive = '1-3'; break
+      case '/app/my-grade/credit': defaultActive = '2-1'; break
     }
     return {
-      defaultActive: defaultActive
+      pic: '',
+      defaultActive: defaultActive,
+      headerData: [
+        {
+          name: '我的学习',
+          iconClass: 'el-icon-self-xuexi-',
+          index: '1',
+          children: [
+            { name: '我的课程', index: '1-1' },
+            { name: '我的讨论', index: '1-2' },
+            { name: '学习报告', index: '1-3' }
+          ]
+        },
+        {
+          name: '我的成绩',
+          iconClass: 'el-icon-self-grade',
+          index: '2',
+          children: [
+            { name: '我的学分', index: '2-1' }
+          ]
+        }
+      ]
     }
   },
   methods: {
     goPages (str) {
       switch (str) {
-        case '1-1': this.$router.push({ path: '/app/news/add-news' }); break
-        case '1-2': this.$router.push({ path: '/app/news/news-list' }); break
-        case '2': this.$router.push({ path: '/app/website/site-show' }); break
-        case '3': this.$router.push({ path: '/app/content/content-list' }); break
-        case '4': this.$router.push({ path: '/app/seo/page-list' }); break
-        case '99': this.$router.push({ path: '/app/account/set-pwd' }); break
+        case '1-1': this.$router.push({ path: '/app/my-learn/course' }); break
+        case '1-2': this.$router.push({ path: '/app/my-learn/discussion' }); break
+        case '1-3': this.$router.push({ path: '/app/my-learn/report' }); break
+        case '2-1': this.$router.push({ path: '/app/my-grade/credit' }); break
       }
     },
+    goUpdatePic () {
+      this.$router.push({ path: '/app/account/update-pic' })
+    },
+    goSetPwd () {
+      this.$router.push({ path: '/app/account/set-pwd' })
+    },
+    goOutLogin () {
+      /* 清空一下记录，然后调整到登录页 */
+      this.$router.push({ path: '/login/index' })
+    },
     /* 侧边栏 拖拽条按下并移动前 */
     beforeMove (e) {
       this.obj.isMouseDown = true
@@ -95,6 +131,23 @@ export default {
       min-width: auto;
     }
   }
+  .el-menu-item.my-account {
+    height: auto;
+    line-height: 0;
+    padding-top: 20px;
+    overflow: hidden;
+    text-align: center;
+    .pic {
+      margin-bottom: 15px;
+      img {
+        display: block;
+        margin: 0 auto;
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+      }
+    }
+  }
 }
 /* 侧边栏 拖拽条 */
 .side-move {

client/project/elearning-node/components/commonStyle/_com.scss → client/project/elearning-node/components/style/_com.scss

@@ -15,15 +15,17 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+/* 引入bootstrap的栅格系统，重新编译 */
+@import "~bootstrap/scss/bootstrap-grid.scss";
 
-/* 统一字体样式 */
-* {
-  font-family: Microsoft YaHei, PingFang SC, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', Neue Frutiger,Frutiger Next,Frutiger,Myriad Pro,Myriad,San Francisco, Segoe UI, Helvetica Neue, Helvetica, Arial, Verdana, Source Han Sans CN, Lantinghei SC, Hiragino Sans GB, Wenquanyi Micro Hei, sans-serif;
-}
 html {
   height: 100%;
+  font-size: 100px;
 }
 body {
+  font-size: 14px; // 防止html根元素 影响本身DOM元素字体大小继承
+  padding: 0;
+  margin: 0;
   height: 100%;
   width: 100%;
   background: #eee;
@@ -32,33 +34,17 @@ body {
     padding-top: 20px;
   }
 }
-// /* 增加 响应式 排版 */
-// html {
-//   font-size: 100px;
-//   /* 首页、新闻动态两列中间间距，小屏幕去掉 */
-//   .cr-mgr-20 {
-//     margin-right: 0.2rem;
-//   }
-//   .pc-none {
-//     display: none;
-//   }
-// }
-// // Extra small devices (portrait phones, less than 576px)
-// @media (max-width: 575px) {
-// }
-
-// // Small devices (landscape phones, 576px and up)
-// @media (min-width: 576px) and (max-width: 767px) {
-// }
-
-// // Medium devices (tablets, 768px and up)
-// @media (min-width: 768px) and (max-width: 991px) {
-// }
-
-// // Large devices (desktops, 992px and up)
-// @media (min-width: 992px) and (max-width: 1199px) {
-// }
-
-// // Extra large devices (large desktops, 1200px and up)
-// @media (min-width: 1200px) {
-// }
+/* 统一字体样式 */
+* {
+  font-family:
+    "Source Han Sans CN",
+    "PingFang SC",
+    -apple-system,
+    "Microsoft YaHei",
+    "Helvetica",
+    "Arial",
+    Verdana,
+    "Hiragino Sans GB",
+    "Wenquanyi Micro Hei",
+    sans-serif;
+}

client/project/elearning-node/main.js

 import Vue from 'vue' // 引入vue框架
 import Element from 'element-ui' // 引入 element-ui 框架
-import './components/commonStyle/_com.scss' // 定义 element-ui主题色 + 公共样式
+import './components/style/_com.scss' // 定义 element-ui主题色 + 公共样式
 import VueRouter from 'vue-router' // 使用 vue-router
 import createRouter from './router' // router定义
 import Main from './main.vue' // 初始化 vue页面

client/project/elearning-node/pages/account/updatePic.vue

+<template>
+  <div>页面开发中</div>
+</template>

client/project/elearning-node/pages/content/addCarousel.vue

-<template>
-  <el-row>
-    <!-- <el-col class="hidden-sm-and-down" :md="2" :lg="5" :xl="6" style="height: 1px;"></el-col> -->
-    <el-col :xs="24" :sm="24" :md="18" :lg="14" :xl="12">
-      <el-form ref="setCarouselform" label-width="100px" :model="setCarousel" :rules="carouselRules">
-        <el-form-item label="轮播图标题" prop="title">
-          <el-input v-model="setCarousel.title" type="text" placeholder="输入轮播图标题"></el-input>
-        </el-form-item>
-        <el-form-item label="轮播图片" prop="desc">
-          <el-upload action="" ref="uploadwebmasterfile" :auto-upload="false">
-            <el-button slot="trigger" size="medium">上传图片</el-button>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="图片链接" prop="author">
-          <el-input v-model="setCarousel.img_url" type="text" placeholder="请输入图片链接"></el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="onSubmitsetCarousel">保存</el-button>
-        </el-form-item>
-      </el-form>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      setCarousel: {},
-      carouselRules: {
-        'title': [
-          { required: true, message: '请输入轮播图标题', trigger: 'blur' }
-        ],
-        'img_url': [
-          { required: true, message: '请输入图片链接', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  methods: {
-    handleClick (tab, event) { /* console.log(tab, event) */ },
-    onSubmitsetCarousel () {
-      this.$refs['setCarouselform'].validate((valid) => {
-        if (valid) {
-          console.log('submit!')
-        } else {
-          this.$message.error('请检查输入项，确认无误后，重新提交')
-          return false
-        }
-      })
-    }
-  }
-}
-</script>

client/project/elearning-node/pages/content/contentList.vue

-<template>
-  <el-tabs v-model="activeName" @tab-click="handleClick">
-    <el-tab-pane label="轮播图" name="1">
-      <m-page
-        :tableHead="tableHead"
-        :tableData="tableData"
-        :params="params"
-        :objFn="objFn"
-        :tableConfig="tableConfig"
-      >
-        <template slot="self-select-btn">
-          <div class="self-selects">
-            <div class="btns">
-              <el-button type="primary" @click="goAddCarousel">添加轮播图</el-button>
-            </div>
-          </div>
-        </template>
-      </m-page>
-    </el-tab-pane>
-  </el-tabs>
-</template>
-
-<script>
-import mPage from '../../components/module/mPage.vue'
-
-export default {
-  components: { mPage },
-  data () {
-    return {
-      activeName: '1',
-      tableConfig: { border: '', size: '', selection: { has: false, sels: [], width: '50px', fix: 'left', align: '' } },
-      tableHead: [
-        { prop: 'index', label: '排序', minWidth: '80', fix: 'left' },
-        { prop: 'img_url', label: '图片', width: '60px', fix: false },
-        { prop: 'title', label: '轮播图标题', minWidth: '120', fix: false },
-        { prop: 'edit_time', label: '编辑时间', minWidth: '120', fix: false },
-        { prop: 'editor', label: '编辑人', minWidth: '90', fix: false },
-        { prop: 'operate', label: '操作', width: '60px', fix: false, commandArr: [ { command: 'contentlist-edit', name: '编辑' }, { command: 'contentlist-up', name: '上移' }, { command: 'contentlist-down', name: '下移' } ] }
-      ],
-      tableData: [],
-      params: { keywords: '', curPage: 1, pageSize: 10, total: '' },
-      objFn: {
-        paramsFn: (_this) => {
-          return {
-            'keywords': _this.params.keywords,
-            'page_num': _this.params.curPage,
-            'page_size': _this.params.pageSize,
-            'quota_type': 'org_bigscience_stat'
-          }
-        },
-        nameAPI: 'getArticleList',
-        // nameExcel: 'getStatSummaryExcel',
-        nameExcel: 'getExportExcel3_4_14',
-        callback: (_this, data) => {
-          _this.params.total = 1
-          /* 伪造数据 */
-          var fakeData = [
-            { index: '1', img_url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2546678019,1828033960&fm=26&gp=0.jpg', title: '校园类', edit_time: '2018.01.11 12:20:00', editor: '中国平安' },
-            { index: '2', img_url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2546678019,1828033960&fm=26&gp=0.jpg', title: '校园类', edit_time: '2018.01.11 12:20:00', editor: '中国平安' },
-            { index: '3', img_url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2546678019,1828033960&fm=26&gp=0.jpg', title: '校园类', edit_time: '2018.01.11 12:20:00', editor: '中国平安' },
-            { index: '4', img_url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2546678019,1828033960&fm=26&gp=0.jpg', title: '科技类', edit_time: '2018.01.11 12:20:00', editor: '中国平安' },
-            { index: '5', img_url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2546678019,1828033960&fm=26&gp=0.jpg', title: '科技类', edit_time: '2018.01.11 12:20:00', editor: '中国平安' }
-          ]
-          fakeData.forEach((elem, i) => {
-            elem.index = i + 1 + (_this.params.curPage - 1) * _this.params.pageSize
-            _this.tableData.push(elem)
-          })
-        }
-      }
-    }
-  },
-  mounted () {
-    this.VueEvent.$on('command-tablelist', (_obj) => {
-      if (_obj.command === 'contentlist-edit') {
-      }
-      if (_obj.command === 'contentlist-up') {
-      }
-      if (_obj.command === 'contentlist-down') {
-      }
-    })
-  },
-  methods: {
-    handleClick (tab, event) { /* console.log(tab, event) */ },
-    goAddCarousel () {
-      this.$router.push({ path: '/app/content/add-carousel' })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.self-selects {
-  margin: 10px auto 30px auto;
-  overflow: hidden;
-  .btns {
-    float: left;
-  }
-}
-</style>

client/project/elearning-node/pages/myLearn/report.vue

+<template>
+  <div>学术报告在开发中</div>
+</template>

client/project/elearning-node/pages/seo/pageList.vue

-<template>
-<div>
-  <m-page
-    :tableHead="tableHead"
-    :tableData="tableData"
-    :params="params"
-    :objFn="objFn"
-    :tableConfig="tableConfig"
-  >
-</m-page>
-</div>
-</template>
-
-<script>
-import mPage from '../../components/module/mPage.vue'
-
-export default {
-  name: '',
-  components: { mPage },
-  data () {
-    return {
-      tableConfig: { border: '', size: '', selection: { has: false, sels: [], width: '50px', fix: 'left', align: '' } },
-      tableHead: [
-        { prop: 'page_name', label: '页面名称', minWidth: '80', fix: 'left' },
-        { prop: 'title', label: '标题', minWidth: '70', fix: false },
-        { prop: 'keyword', label: '关键词', minWidth: '90', fix: false },
-        { prop: 'detail', label: '描述', minWidth: '170', fix: false },
-        { prop: 'operate', label: '操作', width: '60px', fix: false, commandArr: [ { command: 'pagelist-edit', name: '编辑' } ] }
-      ],
-      tableData: [],
-      params: { keywords: '', curPage: 1, pageSize: 10, total: '' },
-      objFn: {
-        paramsFn: (_this) => {
-          return {
-            'keywords': _this.params.keywords,
-            'page_num': _this.params.curPage,
-            'page_size': _this.params.pageSize,
-            'quota_type': 'org_bigscience_stat'
-          }
-        },
-        nameAPI: 'getArticleList',
-        // nameExcel: 'getStatSummaryExcel',
-        nameExcel: 'getExportExcel3_4_14',
-        callback: (_this, data) => {
-          _this.params.total = 1
-          /* 伪造数据 */
-          var fakeData = [
-            { page_name: '首页', title: '校园类', keyword: '平安,医保,科技...', detail: '平安医保科技公司是...' },
-            { page_name: '关于我们', title: '校园类', keyword: '平安,医保,科技...', detail: '平安医保科技公司是...' },
-            { page_name: '解决方案', title: '校园类', keyword: '平安,医保,科技...', detail: '平安医保科技公司是...' },
-            { page_name: '核心优势', title: '科技类', keyword: '平安,医保,科技...', detail: '平安医保科技公司是...' },
-            { page_name: '城市案例', title: '科技类', keyword: '平安,医保,科技...', detail: '平安医保科技公司是...' }
-          ]
-          fakeData.forEach((elem, i) => {
-            elem.index = i + 1 + (_this.params.curPage - 1) * _this.params.pageSize
-            _this.tableData.push(elem)
-          })
-        }
-      }
-    }
-  },
-  mounted () {
-    this.VueEvent.$on('command-tablelist', (_obj) => {
-      if (_obj.command === 'newslist-edit') {
-      }
-      if (_obj.command === 'newslist-del') {
-      }
-    })
-  },
-  methods: {
-    searchList (val) {
-      this.params.keywords = val
-    },
-    /* 删除选中 */
-    batchRemove () {
-      console.log(this.tableConfig.selection.sels)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.self-selects {
-  margin: 10px auto 30px auto;
-  overflow: hidden;
-  .btns {
-    float: left;
-  }
-  .search-input {
-    float: right;
-    width: 40%;
-  }
-}
-</style>

client/project/elearning-node/router/routes.js

 import App from '../app.vue'
 import container from '../components/layout/container.vue'
-import error404 from '../components/errorPage/404.vue'
 
 export default [
   { path: '/', redirect: '/login' },
@@ -32,42 +31,29 @@ export default [
     path: '/app',
     component: App,
     children: [
-      { path: 'error/404', component: error404 },
+      { path: 'error/404', component: () => import('../components/error/404.vue') },
       {
-        path: 'news',
+        path: 'my-learn',
         component: container,
         children: [
-          { path: 'add-news', component: () => import('../pages/news/addNews.vue') },
-          { path: 'news-list', component: () => import('../pages/news/newsList.vue') }
+          { path: 'course', component: () => import('../pages/myLearn/course.vue') },
+          { path: 'discussion', component: () => import('../pages/myLearn/discussion.vue') },
+          { path: 'report', component: () => import('../pages/myLearn/report.vue') }
         ]
       },
       {
-        path: 'website',
+        path: 'my-grade',
         component: container,
         children: [
-          { path: 'site-show', component: () => import('../pages/website/siteShow.vue') }
-        ]
-      },
-      {
-        path: 'content',
-        component: container,
-        children: [
-          { path: 'content-list', component: () => import('../pages/content/contentList.vue') },
-          { path: 'add-carousel', component: () => import('../pages/content/addCarousel.vue') }
-        ]
-      },
-      {
-        path: 'seo',
-        component: container,
-        children: [
-          { path: 'page-list', component: () => import('../pages/seo/pageList.vue') }
+          { path: 'credit', component: () => import('../pages/myGrade/credit.vue') }
         ]
       },
       {
         path: 'account',
         component: container,
         children: [
-          { path: 'set-pwd', component: () => import('../pages/account/setPwd.vue') }
+          { path: 'set-pwd', component: () => import('../pages/account/setPwd.vue') },
+          { path: 'update-pic', component: () => import('../pages/account/updatePic.vue') }
         ]
       }
     ]
@@ -75,6 +61,5 @@ export default [
   /* App 内未找到页面时 - 指向 */
   { path: '/app/*', redirect: '/app/error/404' },
   /* 如果所有页面都没找到 - 指向 */
-  { path: '*', redirect: '/error/404' },
-  { path: 'error/404', component: error404 }
+  { path: '*', component: () => import('../components/error/404.vue') }
 ]

package-lock.json

@@ -1883,6 +1883,12 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "4.1.3",
+      "resolved": "http://registry.npm.taobao.org/bootstrap/download/bootstrap-4.1.3.tgz",
+      "integrity": "sha1-DrNxryyESOjCEEEdDLgkpkCaEr4=",
+      "dev": true
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "http://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz",

package.json

@@ -38,6 +38,7 @@
     "babel-plugin-transform-vue-jsx": "^3.7.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-stage-2": "^6.24.1",
+    "bootstrap": "^4.1.3",
     "clean-webpack-plugin": "^1.0.0",
     "css-loader": "^1.0.1",
     "cssnano": "^4.1.7",