9.5

package-lock.json

@@ -1195,6 +1195,7 @@
           "resolved": "https://registry.npm.taobao.org/ajv/download/ajv-5.5.2.tgz",
           "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
           "dev": true,
+          "optional": true,
           "requires": {
             "co": "^4.6.0",
             "fast-deep-equal": "^1.0.0",
@@ -1206,7 +1207,8 @@
               "version": "4.6.0",
               "resolved": "http://registry.npm.taobao.org/co/download/co-4.6.0.tgz",
               "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },
@@ -1415,6 +1417,7 @@
               "resolved": "http://registry.npm.taobao.org/levn/download/levn-0.3.0.tgz",
               "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
               "dev": true,
+              "optional": true,
               "requires": {
                 "prelude-ls": "~1.1.2",
                 "type-check": "~0.3.2"
@@ -1549,7 +1552,8 @@
           "version": "1.1.0",
           "resolved": "https://registry.npm.taobao.org/fast-deep-equal/download/fast-deep-equal-1.1.0.tgz?cache=0&sync_timestamp=1562517919182&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffast-deep-equal%2Fdownload%2Ffast-deep-equal-1.1.0.tgz",
           "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "figures": {
           "version": "2.0.0",
@@ -1648,7 +1652,8 @@
               "version": "4.0.8",
               "resolved": "http://registry.npm.taobao.org/rx-lite/download/rx-lite-4.0.8.tgz",
               "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "rx-lite-aggregates": {
               "version": "4.0.8",
@@ -1680,7 +1685,8 @@
           "version": "0.3.1",
           "resolved": "http://registry.npm.taobao.org/json-schema-traverse/download/json-schema-traverse-0.3.1.tgz",
           "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "mute-stream": {
           "version": "0.0.7",
@@ -5481,7 +5487,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5502,12 +5509,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5522,17 +5531,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5649,7 +5661,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5661,6 +5674,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5675,6 +5689,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5682,12 +5697,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5706,6 +5723,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5786,7 +5804,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5798,6 +5817,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5883,7 +5903,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5919,6 +5940,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5938,6 +5960,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5981,12 +6004,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -10220,6 +10245,11 @@
         }
       }
     },
+    "social-share.js": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npm.taobao.org/social-share.js/download/social-share.js-1.0.16.tgz",
+      "integrity": "sha1-H9SpHEbIxoNWcPEUcuyy4pMhUxA="
+    },
     "sockjs": {
       "version": "0.3.19",
       "resolved": "http://registry.npm.taobao.org/sockjs/download/sockjs-0.3.19.tgz",

package.json

@@ -14,8 +14,6 @@
     "scroll-js": "^3.0.0",
     "swiper": "^4.5.0",
     "vue": "^2.6.10",
-    "vue-axios": "^2.1.4",
-    "vue-resource": "^1.5.1",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1"
   },

public/iconfont.css

@@ -1,10 +1,10 @@
 @font-face {font-family: "iconfont";
-  src: url('iconfont.eot?t=1567077690040'); /* IE9 */
-  src: url('iconfont.eot?t=1567077690040#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVQAAsAAAAACnwAAAUCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqIGIY9ATYCJAMUCwwABCAFhG0HSRvKCFGUTk6C7IvC2FgafadT2Zw4+5fiRr7QwWjyj6Owb/nwv6l/rkCoOzMjmanQBFISp3Si6cQyMfsS8cz9mX+9/k1QBrcDcOAJBoYd7a9/e02anUOCPphAhXRo30gmKis8/9mRWBRKim2RtvaYvLc7ujRN9QSsjp3FpZXNpbVirQCGAty1fm9WqvA/0APau7/qP8LraiAb+ML1QADEo1hDpFuPfsMggcPejQAgPsOtQirowTvoBJJKbDiWg6yCAIkuoQ8ArIy+n/yNJkkAhcBg7ztou7vQ6W1/RFnke8S4gADRfFYA4kkAA9AQwAFiNtp9WCJvGKH4pp/j6ASIhwQK+pvtt/TfmvwR/f6dTHoiPN75gwcwUHAQgIiwUSJSOyn4lRN5GDDgt3QMKPBbEww48EdUfF+QgMr4mYrIUIAsA2pNRJ6cIJ1mEYrsR1DSjHuvRry9ajI0psKqYex36MZpqIJO6FWsunV2yFLcf3A9p+1fPSexHtM3bgTY9dRv6jsBukjW+gWTqaN3Ervx+Dwfuva8DHdRXftkKTlRzgbYSzo6jB2y9I1bKV1zVy4t0a4N3YRpxtSxICeZmz6LVj+Hf77svdm8vru/i27lmNdHZuqoxbVu6VwVWvUNlfP1YHZvjM5WykriT1Yhs72bc89sCdkxoyoPceKXBiGVyU2IOjOqazENueuV8Y7NdOqXX5HKzy1LiNJu+2Pve270sXOh8tplv3gxrPJle7P7yusaX18j6iq/olx59LWoSVVhfIdOj/vltzxRIBGTry39P+2/27ZqpkaY98u/H6+ks9OV0HQ2pPhRzdrDH7Frd6Vai7r67UYvQf19wZo0Fq19qjugu6Vt0dmZbIe/JN676x4G7cXfme7OewlfI67atPM1CWnUbaYyrvXgcGXge//rHEcumsGzkDMxR+r0um/i7I5dunSLDP/f1oR9DwvslOpocHZlSW5a7ibFDvLFsWaJIigcoF3sqCg2wcORO0WxQenCHTFtUGxQNfGOUN1WkoSkWCKS7iQhMaboirROekxIl1ePeECV18SSUo7GrqYk7clrtN4Rq4E8bbwzXSoZh98hGQs1wAfNY5TkTv542tXY0c/DNzZl6m1HWbsWddW+fdW6Lbps3+L89vbOLSfV7de3jtqifWPjVYfjk2gkQic1rTd60PjxY8eG6o1hhSeIVKq05SRHYlVV4kQHpgKA79kJ+h8AMJ3+LLGxXazY+YqN+LRuw4KFWasnprSrkhK+wCNvl79qHXm/46AhfOSUIIs+myJiDzcktkHgWr0n1AoFLIIEvM7ij2HNJ9Kd7tM8pixzJgkkZGVAYUMRMEioSeTUhiAgAc1AhISOEI8Gep6cgAwmBsLjANS3gAFBqiNAkYwrwJDqIZFTP4KAbP+CiNQYxGNEGedMQO2M+K6mplqaSy6dJhvOYEB3TVZ8XDpEc1f4VDMviRgjNLPcCMmNFUc51VMLaOYcB5RPdjexLF3WzaBf7sFupvl8QTlkBj2a01LKLCvUxm7Xm15IcQb9iEdXJo3KonGRlZpGZnAKCtCD4Zb4ytcPoXGr4KMyOxrq3CNoTOWM8WWNKRwEYk8UIDXcS3W5ydyasDCqk+licZCfrAdaNT4nHiQLNW/y0DhZFGUjoiFt2HGQTkXK+rj/MRb9MZra5xQIJYxwIhARNpehBsoqVNHtLQ2UGqJTNVxqgE1nOgAAAA==') format('woff2'),
-  url('iconfont.woff?t=1567077690040') format('woff'),
-  url('iconfont.ttf?t=1567077690040') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1567077690040#iconfont') format('svg'); /* iOS 4.1- */
+  src: url('iconfont.eot?t=1567597909190'); /* IE9 */
+  src: url('iconfont.eot?t=1567597909190#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAdoAAsAAAAADcQAAAccAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDVAqOJIsOATYCJAMcCxAABCAFhG0HWhtWCyMR5oSuTvbPw9hYeXg2IpFAJhqvxqqDLpceNf42dSTuc3+PW/Z+EvA1SsiqsCaObMU9VIy7agSpiiA15Tr01CGAv3f3p+6sLEp4LIzTRwFusNQ2B7i3ppo1YAARCvSCoZOvtvSH/i0v+WS5KwEC7g6OpX5ag+V927tk1ZoiuQKoNaLBNnzQTWxg9HOegezarXowCc8DBEAqVBI0rGnSgBiBVyPUrYcP7Q9ihwURQUbEemHAtSmgEwiI46XYXQBYof08+kNGJAbACBLgz20L1YOg7CXyeBLaQ+ulIEBanAsAbjcB4ACSABAAbQI9U+CGKknTSIN+A6EBgJwYhniJXApXhivns9HjwaHgA4hc+JcHIEAQwmEA5QCNnMF2qYUDKJX4QABcCj4ggCtDEq3NAR/g4LORBzA+ePmUakRKqzeAIIAtqPUGPC6JTrS0XiaGlcEqL28v+WJ5iDwkMqnEnwr2RbcGqkZLHQ4dcjr1MrtdCzZbn6M29UPt9lhOuVVtDeI51XlH1AZnrtNevi+kO7d9+1alreOxs/WBvfycrYgxkSw5xMBtZ5SIZkmZkdcvY8ysTG9CyMBJtTyvNKukDAOTA6vnShhWBjyf48PG3nboHjsy1m8OogwbKGsiT+0gDcU0mQMOpbOMUiP+EaZLxY/yt1FGSs/zJHkqP+ZYDEuSHCLZvWo1Y95G8dSFK4Ekd7og9nYDt1WpoYxSTnW64/x+ilHqeatKdTgjcP9+FXc0eqt6p5rZ64+UJnvIIbvWbq8/lm3krZzqeH+HS+f8Rm//pLV97MNx1IZAi62O2UpZ16t229rO2mA4RP1SvP68xuaI3Ky/w2mP2GTTHbfZ7NnHnKkbHGUMo+IonmdZ7uCt2y3WHdvMQ/c7shDTA6XUjluXNvmjenbyFNrg0FiOR/ulEL+NNHNI9uus6ycOZumdy1RDBjHLdhuooUM4wx4jOXgob9xFK2dKjz4MhnWPsmUnnoSh9Y+76J1S6bLdCBn2DO7CdsFX1N7cQcnYbVBnLXbhvAMZnPx+MmP9qeILhXdkRju5EGhb0QSbTUPbiwcPveCMmjvnL7MV+Qeed4SVlB/A3W7iQLkYdn85gDswX7rWPchvfGXA6YXC9ieHNy5Y/6FeE1cw6Kf+6sObssLXZd1mRU840jK57tis8fyhFhGjkc/9snWxcnWyaAh3e+BsklThsD6Se2kvJSB9rETSl3MipK/wu1IkeSkl95cmnqd3+e0eh8btFiPxrnmx43b5WCWINiu9jobFGYZprSVlD5qm5B6ZqhB6X1r2q9/3twojIGo88t/vXl1QSBQp1Qq8I/T+kjXn3gorq1MiVkbMe3ylzjtha2WkH4bFHuPL+Nxhi0/unJDoVhSeOpIXG3X1/YnqlC2IWL0gLUp3Ohqh5KpZKb3y28cbxrzZ5qSSZJDVeeBD4EJKXOZsbJ9TWlFRRWs/rM2Q3Ia9hkjwzH1GhIcTzwQhRLLC6nHxIf0Hq//48/cmSthgWNyeW1NSvn+d3jsRb9/YcxjMx9dOQmWk+6cP7cKJxUNyBne2S9oFE4uGxA7qbDwzvS4ioi6oYvRXLZEqV3j5g+it5QsbotesUVfMOmXt/ucuS/dB2vftASaYd6DSvcq+avO5ryH+GPNnPtzy1XcP+3FPpWFd2mcDrKqe+k4DcTvid/XAJZC4S01Z6u/nb0pJ5VVLdOPSFE6dBtOSNI/ahI+D/zLkZptCcEPo13azLUJ4QxApCvMCr4scvM5eIL88zb3BkeSbAoUqUhMCG37Ixcvn4M2LPl6bAwJdN4QRUPll9ynEYdl050S27mDo2oqxicMjRdlJF28e/Dz4P5k67XrasKIcdf/Gxv7qnIp1xwni+rry3H7qpsa4/jnF6cMdJYf7YTSN9cuM797Wu3fPnuPie+CO+9J0fyy3X5r8t9/kfdNgDAAAz8VEuLgCwPMXfgT7HgAAD9iHL/1dshEP9T1x3WV+HFiodOhbFP0mlp36K56x17Vah4dOAT8AXKtaSCy9qKUJRxFfOa8S/SYFkiQhXWQxiFMYAKkwC+BiDii8Ls5OKjqHiJEWYERCACcWjSSwSSAgkwVCYqUglaj2ZpluJsChVAIACRYSQHwdAIy3C4DzdQ9JYF+BgMp3IOQb4fDNzkeHe+4do91Z0Ch6sH9Ajrsg2nWn1z8wjo0Ru1yjfKAMFIc8ydz5O3YoRVwwfMdCNUAQbuFGXoZNw9ALV+g0KVX7U5qGoAsTx+1k50wgQxVOD1h/gsRhnTC32nm+/wFFo4YhESN+BD8gMaDNg1wiS4C8a7pEIzaldfAtKih1BSD1F6wFbtSFGiHDQB98VAU5KlFmSPVOUjpeSKpJqte183kDAFL8u0VhCEcEEiAhEiExrEZXGl17Ml05mqU9SZZX0di3s7Ryhrzp5v+SeTIB') format('woff2'),
+  url('iconfont.woff?t=1567597909190') format('woff'),
+  url('iconfont.ttf?t=1567597909190') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1567597909190#iconfont') format('svg'); /* iOS 4.1- */
 }
 
 .iconfont {

public/index.html

@@ -1,19 +1,29 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns:wb="http://open.weibo.com/wb">
   <head>
+     
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    
+    <script src="https://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <link rel="stylesheet" type="text/css"media="screen and (max-device-width: 400px)"href="tinyScreen.css" />
-    <script src="./static/js/jquery.min.js"></script>
+    <link rel="stylesheet" type="text/css"media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
+    <link rel="stylesheet" href="/share/css/share.min.css">
+
+    <script>
+      if (navigator.userAgent.toLocaleLowerCase().match(/msie|trident/)) {
+        alert('暂不支持您的浏览器(模式), 推荐使用 Chrome 或者 Firefox')
+      }
+    </script>
+
+    <script src="/static/js/jquery.min.js"></script><html xmlns:wb="http://open.weibo.com/wb">
     <!-- <script src="./until/jquery-1.8.3.min.js"></script> -->
-    <script src="./bootstrap/js/bootstrap.min.js"></script>
-    <script src="./swiper/dist/js/swiper.min.js"></script>
-    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
-    <link rel="stylesheet" href="./swiper/dist/css/swiper.min.css">
-    <link rel="stylesheet" href="./iconfont.css">
+    <script src="/bootstrap/js/bootstrap.min.js"></script>
+    <script src="/swiper/dist/js/swiper.min.js"></script>
+    <script src="/share/js/social-share.min.js"></script>
+    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="/swiper/dist/css/swiper.min.css">
+    <link rel="stylesheet" href="/iconfont.css">
     <title>foyo</title>
   </head>
   <body>

public/share/css/share.min.css

@@ -0,0 +1 @@
+@font-face{font-family:"socialshare";src:url("../fonts/iconfont.eot");src:url("../fonts/iconfont.eot?#iefix") format("embedded-opentype"),url("../fonts/iconfont.woff") format("woff"),url("../fonts/iconfont.ttf") format("truetype"),url("../fonts/iconfont.svg#iconfont") format("svg")}.social-share{font-family:"socialshare" !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale}.social-share *{font-family:"socialshare" !important}.social-share .icon-tencent:before{content:"\f07a"}.social-share .icon-qq:before{content:"\f11a"}.social-share .icon-weibo:before{content:"\f12a"}.social-share .icon-wechat:before{content:"\f09a"}.social-share .icon-douban:before{content:"\f10a"}.social-share .icon-heart:before{content:"\f20a"}.social-share .icon-like:before{content:"\f00a"}.social-share .icon-qzone:before{content:"\f08a"}.social-share .icon-linkedin:before{content:"\f01a"}.social-share .icon-diandian:before{content:"\f05a"}.social-share .icon-facebook:before{content:"\f03a"}.social-share .icon-google:before{content:"\f04a"}.social-share .icon-twitter:before{content:"\f06a"}.social-share a{position:relative;text-decoration:none;margin:4px;display:inline-block;outline:none}.social-share .social-share-icon{position:relative;display:inline-block;width:32px;height:32px;font-size:20px;border-radius:50%;line-height:32px;border:1px solid #666;color:#666;text-align:center;vertical-align:middle;transition:background 0.6s ease-out 0s}.social-share .social-share-icon:hover{background:#666;color:#fff}.social-share .icon-weibo{color:#ff763b;border-color:#ff763b}.social-share .icon-weibo:hover{background:#ff763b}.social-share .icon-tencent{color:#56b6e7;border-color:#56b6e7}.social-share .icon-tencent:hover{background:#56b6e7}.social-share .icon-qq{color:#56b6e7;border-color:#56b6e7}.social-share .icon-qq:hover{background:#56b6e7}.social-share .icon-qzone{color:#FDBE3D;border-color:#FDBE3D}.social-share .icon-qzone:hover{background:#FDBE3D}.social-share .icon-douban{color:#33b045;border-color:#33b045}.social-share .icon-douban:hover{background:#33b045}.social-share .icon-linkedin{color:#0077B5;border-color:#0077B5}.social-share .icon-linkedin:hover{background:#0077B5}.social-share .icon-facebook{color:#44619D;border-color:#44619D}.social-share .icon-facebook:hover{background:#44619D}.social-share .icon-google{color:#db4437;border-color:#db4437}.social-share .icon-google:hover{background:#db4437}.social-share .icon-twitter{color:#55acee;border-color:#55acee}.social-share .icon-twitter:hover{background:#55acee}.social-share .icon-diandian{color:#307DCA;border-color:#307DCA}.social-share .icon-diandian:hover{background:#307DCA}.social-share .icon-wechat{position:relative;color:#7bc549;border-color:#7bc549}.social-share .icon-wechat:hover{background:#7bc549}.social-share .icon-wechat .wechat-qrcode{display:none;border:1px solid #eee;position:absolute;z-index:9;top:-205px;left:-84px;width:200px;height:192px;color:#666;font-size:12px;text-align:center;background-color:#fff;box-shadow:0 2px 10px #aaa;transition:all 200ms;-webkit-tansition:all 350ms;-moz-transition:all 350ms}.social-share .icon-wechat .wechat-qrcode.bottom{top:40px;left:-84px}.social-share .icon-wechat .wechat-qrcode.bottom:after{display:none}.social-share .icon-wechat .wechat-qrcode h4{font-weight:normal;height:26px;line-height:26px;font-size:12px;background-color:#f3f3f3;margin:0;padding:0;color:#777}.social-share .icon-wechat .wechat-qrcode .qrcode{width:105px;margin:10px auto}.social-share .icon-wechat .wechat-qrcode .qrcode table{margin:0 !important}.social-share .icon-wechat .wechat-qrcode .help p{font-weight:normal;line-height:16px;padding:0;margin:0}.social-share .icon-wechat .wechat-qrcode:after{content:'';position:absolute;left:50%;margin-left:-6px;bottom:-13px;width:0;height:0;border-width:8px 6px 6px 6px;border-style:solid;border-color:#fff transparent transparent transparent}.social-share .icon-wechat:hover .wechat-qrcode{display:block}

public/share/fonts/iconfont.svg

@@ -0,0 +1,88 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+Created by FontForge 20120731 at Sat Nov 28 22:48:50 2015
+ By Ads
+</metadata>
+<defs>
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face 
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    panose-1="2 0 6 3 0 0 0 0 0 0"
+    ascent="896"
+    descent="-128"
+    x-height="792"
+    bbox="-0.097561 -77 1024.92 839"
+    underline-thickness="50"
+    underline-position="-100"
+    unicode-range="U+0078-F20A"
+  />
+<missing-glyph horiz-adv-x="374" 
+d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
+    <glyph glyph-name=".notdef" horiz-adv-x="374" 
+d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
+    <glyph glyph-name=".null" horiz-adv-x="0" 
+ />
+    <glyph glyph-name="nonmarkingreturn" horiz-adv-x="341" 
+ />
+    <glyph glyph-name="x" unicode="x" horiz-adv-x="1001" 
+d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
+t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
+t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
+    <glyph glyph-name="uniF00A" unicode="&#xf00a;" 
+d="M911 512l-334 1q19 79 23 116q4 45 -3 76q-11 47 -34 90q-6 12 -17 18.5t-24 6.5h-65q-13 0 -23.5 -6.5t-17 -17t-6.5 -23.5v-35v-32v-26q0 -10 -1 -11q-12 -26 -26.5 -52t-29.5 -51.5t-32 -49.5q-6 -9 -11.5 -17t-11.5 -16t-12.5 -16t-13.5 -15q-13 -14 -13 -32v-411
+q0 -19 13 -33q28 -28 73 -28q323 1 440 1q13 0 24 6t17 17l119 203q6 11 9 22.5t3 23.5l1 244q0 13 -6.5 24t-17 17t-23.5 6zM155 445h-42q-13 0 -24 -6t-17 -17t-6 -24v-403q0 -19 13.5 -33t33.5 -14h42q13 0 23.5 6.5t17 17t6.5 23.5v403q0 20 -14 33.5t-33 13.5z" />
+    <glyph glyph-name="uniF01A" unicode="&#xf01a;" 
+d="M260 740q0 -41 -29.5 -69.5t-76.5 -28.5q-45 0 -74 28.5t-29 69.5q0 43 29 71t76 28t74.5 -28t29.5 -71zM57 -69v633h197v-633h-197zM371 361q0 89 -4 203h170l10 -88h4q61 103 194 103q103 0 165.5 -69t62.5 -204v-375h-197v351q0 137 -100 137q-72 0 -101 -74
+q-6 -12 -6 -49v-365h-198v430z" />
+    <glyph glyph-name="uniF03A" unicode="&#xf03a;" 
+d="M751 815v-142h-84q-46 0 -62 -19t-16 -58v-101h157l-21 -158h-136v-407h-164v407h-136v158h136v117q0 100 56 154.5t148 54.5q79 0 122 -6z" />
+    <glyph glyph-name="uniF04A" unicode="&#xf04a;" 
+d="M629 830h-245q-37 0 -69 -4t-71.5 -19t-71.5 -41q-37 -31 -56.5 -72.5t-19.5 -82.5q0 -46 22.5 -87t68.5 -68t106 -27h7h8q2 0 7.5 0.5t7.5 1t8 0.5q-1 -1 -2 -4t-1.5 -4t-1.5 -4l-2 -5q0 -1 -1 -3.5t-1.5 -4.5t-1 -4.5t-0.5 -5t-0.5 -5t-0.5 -5.5q0 -17 6.5 -33
+t11.5 -23t18 -23q-18 -1 -26.5 -1.5t-29 -2.5t-33.5 -4.5t-34 -6.5t-36.5 -9t-34 -12.5t-33.5 -16.5q-48 -28 -69.5 -66.5t-21.5 -75.5q0 -69 66.5 -117.5t188.5 -48.5q74 0 134.5 19t98.5 50.5t58.5 70t20.5 80.5q0 19 -3.5 36t-11.5 32t-15 26.5t-21 24.5t-23 21t-26 22
+l-43 32q-9 8 -14 12.5t-10.5 15.5t-5.5 22.5t6 23t11 17t16 16.5q24 18 37.5 30.5t30 33t24 45.5t7.5 56t-8.5 57.5t-24 46.5t-25.5 30t-26 22h74zM524 120q0 -36 -19.5 -64t-59.5 -44.5t-95 -16.5q-94 0 -151.5 39.5t-57.5 102.5q0 83 102 119q57 19 125 19h6h4
+q3 0 4.5 -0.5t3.5 -0.5h5q2 0 4 -1q75 -51 102 -81t27 -72zM429 494q-33 -33 -80 -33q-36 0 -66 21t-47 53.5t-26 67t-9 65.5q0 54 26 86q14 17 36.5 27.5t46.5 10.5q46 0 81.5 -37t51.5 -84.5t16 -92.5v-10q0 -4 -1 -10.5t-2 -12.5t-3.5 -13t-5.5 -13.5t-7.5 -13
+t-10.5 -11.5zM865 653v118h-59v-118h-119v-58h119v-118h59v118h118v58h-118z" />
+    <glyph glyph-name="uniF05A" unicode="&#xf05a;" 
+d="M540 185h370v370h-369l-1 85h285v114h-285v85h-142v-284h-256v-370h199v-258zM284 279v175h484v-175h-484zM853 100q-17 0 -33 -6.5t-27.5 -18t-18 -27.5t-6.5 -33.5t6.5 -33.5t18 -27.5t27.5 -18.5t33 -7q35 0 60 25.5t25 61t-25 60.5t-60 25zM597.5 100
+q-35.5 0 -60.5 -25t-25 -60.5t25 -61t60.5 -25.5t60 25.5t24.5 61t-24.5 60.5t-60 25zM171 100q-14 0 -27 -4t-23.5 -12t-18.5 -18.5t-12 -24t-4 -27.5q0 -35 24.5 -60.5t60 -25.5t60.5 25.5t25 60.5q0 18 -7 34t-18 27.5t-27 18t-33 6.5z" />
+    <glyph glyph-name="uniF06A" unicode="&#xf06a;" horiz-adv-x="1025" 
+d="M1024 702q-58 -26 -121 -34q33 20 57 50t36 67q-63 -37 -134 -51q-62 66 -153 66q-57 0 -105.5 -28t-76.5 -76.5t-28 -105.5q0 -8 0.5 -16t2 -16t2.5 -16q-129 7 -241.5 65t-191.5 155q-13 -24 -20.5 -51t-7.5 -55q0 -36 11.5 -69t32.5 -60t49 -46q-50 2 -95 26v-2
+q0 -76 48 -134t121 -72q-27 -8 -56 -8q-5 0 -10 1h-10q-5 1 -9.5 1.5t-9.5 1.5q20 -63 74 -103.5t122 -42.5q-36 -28 -77.5 -48t-88 -31t-95.5 -11q-25 0 -50 3q147 -94 322 -94q112 0 210 35.5t168 95t120.5 136.5t75 161.5t24.5 169.5q0 14 -1 27q8 5 15.5 11t14.5 12
+l14 14q7 6 13.5 12.5t13 14t12 14.5t11.5 15t11 16z" />
+    <glyph glyph-name="uniF07A" unicode="&#xf07a;" 
+d="M435 826q-94 -21 -163.5 -85.5t-98.5 -155.5t-8 -186q7 -34 21 -66q4 -9 12.5 -15t18 -7t18.5 3q15 6 20.5 20.5t-0.5 28.5q-11 25 -17 53q-17 74 6 146t78 123t129.5 67.5t145.5 -6.5t121.5 -78.5t67 -130t-6 -146.5t-77.5 -123t-130 -67q-44 -10 -89 -5q-15 1 -27 -9
+t-13.5 -25t8.5 -27.5t25 -13.5q56 -6 112 7q94 20 164 85t98.5 155.5t8 185t-84.5 164.5t-154.5 99t-184.5 9zM542 339q57 13 88 62t18 106q-8 37 -33 64.5t-60.5 39t-72.5 3.5q-57 -13 -88 -62t-19 -106q5 -21 16 -41q-70 -81 -105 -197t-16 -239q2 -16 14.5 -25t28.5 -7
+q1 1 2 1q14 3 22.5 15.5t6.5 26.5q-17 105 12.5 204.5t88.5 168.5q46 -25 97 -14z" />
+    <glyph glyph-name="uniF08A" unicode="&#xf08a;" 
+d="M767 277q-9 -8 -11 -13.5t0 -16.5l4 -24q-183 2 -297 18q-6 2 0 5l289 201q11 7 -1 9q-7 1 -19 3t-21 3l-9 1q-90 11 -190 11q-170 0 -303 -30h8q225 0 374 -23q7 -2 0 -6l-289 -206l-5 -4q-2 -4 5 -5q45 -6 94 -9q59 -4 116 -4q176 0 312 32l5 1q-19 -15 -63 -30
+l42 -226q2 -12 -1.5 -19t-11 -7.5t-18.5 4.5l-241 140q-24 15 -49 -1l-240 -139q-16 -9 -25 -2.5t-5 24.5l53 284q3 9 1.5 14t-8.5 12l-210 193q-9 8 -10.5 16t4.5 13t18 6l268 30q15 2 21 5.5t12 14.5l126 262q9 17 20.5 17t19.5 -17l118 -262q5 -13 11 -17t21 -6l277 -27
+q18 -2 21.5 -12t-9.5 -23z" />
+    <glyph glyph-name="uniF09A" unicode="&#xf09a;" 
+d="M704 547q-87 0 -163 -38t-120 -103q-22 -32 -33.5 -67t-11.5 -73q0 -41 14 -78h-18q-64 0 -124 18l-124 -56l30 102q-64 43 -101 105t-37 134q0 124 104.5 213t251.5 89q128 0 227 -70t122 -176h-17zM218 557q8 -7 17 -10.5t19 -3.5q22 0 36.5 14.5t14.5 35.5q0 11 -4 20
+t-11 16q-2 2 -4 3l-4 4l-4 2l-4 2l-4 2h-6l-4 2h-6q-21 0 -36 -15q-7 -7 -10.5 -16t-3.5 -20q0 -7 1.5 -13.5t5 -12t7.5 -10.5zM1008 266q0 -126 -116 -204l23 -87l-105 49q-50 -16 -106 -16q-124 0 -213 75.5t-89 182.5q0 70 40.5 129t110.5 93q23 11 47.5 18.5t50.5 11.5
+t53 4q126 0 215 -75t89 -181zM526.5 629.5q-14.5 14.5 -35 14.5t-34.5 -15q-7 -7 -11 -16t-4 -19q0 -20 14.5 -34.5t35 -14.5t35.5 14q7 8 10.5 16.5t3.5 18.5q0 21 -14.5 35.5zM603 312q9 0 16.5 3.5t13.5 9.5q13 13 13 29q0 8 -3.5 15.5t-9.5 13.5q-12 13 -30 13
+q-6 0 -11 -1.5t-10 -4.5t-9 -7q-13 -13 -13 -28q0 -12 6 -21.5t16 -15.5q5 -3 10 -4.5t11 -1.5zM775 323q12 -13 30.5 -13t31.5 13q3 3 5 6.5t4 7.5t2.5 8t0.5 8q0 6 -1.5 11t-4 10t-6.5 9q-13 13 -31.5 13t-30.5 -13q-5 -4 -7.5 -9t-4 -10t-1.5 -11q0 -9 3 -16.5t10 -13.5z
+" />
+    <glyph glyph-name="uniF10A" unicode="&#xf10a;" 
+d="M138 773h746v-84h-746v84zM820 273v328h-617v-328h617zM292 517h439v-160h-439v160zM686 83q41 63 76 143l-90 33q-35 -97 -81 -176h-156q-39 103 -88 176l-83 -33q51 -77 83 -143h-230v-83h789v83h-220z" />
+    <glyph glyph-name="uniF11A" unicode="&#xf11a;" 
+d="M911 223q-5 31 -17 61t-25.5 50.5t-26.5 37t-21 24.5l-8 9q5 44 -2.5 73t-17.5 36l-10 8q-2 62 -18.5 112.5t-39.5 81.5t-54 53.5t-57 32.5t-54 15.5t-38.5 6t-17.5 0.5q-6 0 -16.5 -0.5t-39 -6t-54 -15.5t-57 -32.5t-54.5 -53.5t-39.5 -81.5t-17.5 -112.5q-2 -1 -4.5 -3
+t-9.5 -10t-10.5 -20.5t-7 -34t0.5 -49.5l-9 -9q-5 -5 -19.5 -23.5t-26.5 -38t-24.5 -50t-17.5 -61.5q-1 -4 -1 -10t1 -22t3.5 -28t9 -21t15.5 -8t25 17t37 50q23 -62 64 -117q-3 -1 -8 -3.5t-17.5 -10t-21.5 -17t-16 -26t-5 -34.5q0 -2 0.5 -4.5t3 -10t8 -14t17.5 -14.5
+t28 -13.5t42.5 -9t58.5 -2.5q13 1 32.5 4t59.5 17t55 36h30q31 -44 141 -56l6 -1q45 -1 78 5.5t47.5 15.5t23 21.5t9 17.5t0.5 8q2 18 -4.5 34t-16.5 26t-20.5 17.5t-18.5 10.5l-8 3q9 11 17 23.5t14 23.5l12 22q6 11 9.5 19.5t6.5 15t4 9.5l1 4q21 -34 37 -50t25.5 -17
+t15.5 8t8.5 21t3.5 28t1 23v9v0z" />
+    <glyph glyph-name="uniF12A" unicode="&#xf12a;" horiz-adv-x="1026" 
+d="M0 242q0 65 40 140t113 147q96 97 195.5 134.5t140.5 -3.5q36 -36 11 -119q-2 -9 0 -12t5 -4t8 0t8 2l3 1q80 34 141.5 34t87.5 -35q25 -35 0 -101q-1 -8 -3 -11t3 -7.5t7 -5.5t9 -3q33 -10 59.5 -26.5t45 -47t19.5 -66.5q0 -39 -20.5 -79t-62.5 -79t-96 -66.5t-129 -48
+t-155 -17.5t-157.5 19.5t-137 52.5t-98.5 87t-37 114zM104 201q5 -55 51 -97t118.5 -62t156.5 -12q128 13 211 80.5t76 151.5q-5 54 -50 96t-120 62.5t-157 12.5q-127 -13 -211 -80.5t-75 -151.5zM237 151q-24 52 3 106q27 53 86.5 80t120.5 10q63 -16 90.5 -67.5
+t1.5 -109.5t-90.5 -85t-127.5 -7q-62 19 -84 73zM283 166q5 -21 24.5 -30t43 -1t35.5 28q11 18 6 38.5t-25 28.5q-20 9 -42.5 0.5t-33.5 -25.5q-13 -20 -8 -39zM403 247q-10 -19 8 -27q8 -2 16 1t12 10q6 8 2.5 16t-10.5 10q-7 3 -16 0t-12 -10zM666 746q-3 16 5 30.5
+t25 16.5q70 14 139.5 -6.5t118.5 -76.5q50 -56 65 -128.5t-8 -137.5q-5 -16 -19.5 -23t-30 -2t-22.5 19.5t-3 29.5q16 47 6 98t-46 90q-36 40 -85 54.5t-98 5.5q-17 -3 -30 6t-17 24zM699 616q-3 15 5.5 26t20.5 14q35 8 68.5 -2.5t57.5 -37t31 -62.5t-3 -68
+q-5 -12 -17.5 -19t-25.5 -2t-20 17.5t-2 25.5q11 36 -13.5 62.5t-61.5 20.5q-13 -3 -25 4t-15 21z" />
+    <glyph glyph-name="uniF20A" unicode="&#xf20a;" 
+d="M945 677q-23 37 -54.5 64t-68.5 42.5t-79 18.5q-148 7 -228 -101l-1 2q-1 1 -2 1q0 -3 -3 -3q-80 108 -228 101q-60 -3 -113 -36t-89 -89q-26 -41 -36 -89.5t-5 -99t25 -102.5t54 -98q53 -69 89 -110q122 -134 282 -240l21 -15h6l21 15q78 52 150 113t132 127
+q11 13 24 28.5t22.5 28t22 28t20.5 25.5q69 94 79.5 200.5t-41.5 188.5z" />
+  </font>
+</defs></svg>

src/components/Business.vue

@@ -106,17 +106,17 @@ export default {
   components: {},
 
   mounted () {
-    new Swiper("#swiper2", {
-      // loop: true,
-      slidesPerView: 4,
-      spaceBetween: 60,
-      // slidesOffsetBefore: 100,
-      // slidesOffsetAfter: 100,
-      navigation: {
-        nextEl: ".swiper-button-next",
-        prevEl: ".swiper-button-prev"
-      }
-    });
+    // new Swiper("#swiper2", {
+    //   // loop: true,
+    //   slidesPerView: 4,
+    //   spaceBetween: 60,
+    //   // slidesOffsetBefore: 100,
+    //   // slidesOffsetAfter: 100,
+    //   navigation: {
+    //     nextEl: ".swiper-button-next",
+    //     prevEl: ".swiper-button-prev"
+    //   }
+    // });
   },
   created () {
 

src/components/CaseCard.vue

@@ -24,7 +24,7 @@ export default {
   .case-card {
     width: 100%;
     padding: 0;
-
+  
     .image {
       bottom: 0;
       width: 100%;
@@ -33,7 +33,7 @@ export default {
       padding-bottom: 66%;
       background-size: 100% 100% !important;
     }
-
+ 
     .body {
       padding: 1.5rem;
       text-align: left;
@@ -45,12 +45,14 @@ export default {
         font-size: 3rem;
         color: #000;
         line-height: 1.2em;
+        
       }
-
+ text-decoration: none !important;
       .caption {
         font-size: 2.4rem;
         color: #727171;
         line-height: 1.2em;
+        
       }
     }
   }

src/components/Share.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="social-share" data-initialized="true">
+    <a href="#" class="social-share-icon icon-wechat">
+      <img src="../assets/image/case2/微信icon.png" class="share" alt />
+    </a>
+    <a href="#" class="social-share-icon icon-weibo">
+      <img src="../assets/image/case2/微博icon.png" class="share" alt />
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Share',
+  props: [
+    'config',
+  ],
+  data () {
+    return {
+      defautlOpt: {
+        url                 : '', // 网址，默认使用 window.location.href
+        source              : '', // 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
+        title               : '', // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
+        origin              : '', // 分享 @ 相关 twitter 账号
+        description         : '', // 描述, 默认读取head标签：<meta name="description" content="PHP弱类型的实现原理分析" />
+        image               : '', // 图片, 默认取网页中第一个img标签
+        sites               : ['weibo','wechat'], // 启用的站点
+        // disabled            : ['qzone', 'qq', 'douban', 'google', 'facebook', 'twitter'], // 禁用的站点
+        wechatQrcodeTitle   : '微信扫一扫：分享', // 微信二维码提示文字
+        wechatQrcodeHelper  : '<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>'
+      }
+    }
+  },
+  watch: {
+    config: {
+      handler(nw) {
+        this.initShare(nw || {})
+      },
+      immediate: true,
+      deep: true,
+    }
+  },
+  mounted () {
+    this.initShare(this.config || {})
+  },
+
+  methods: {
+    initShare (config = {}) {
+      const options = {
+        ...this.defautlOpt,
+        ...config,
+      }
+
+      window.console.log(options)
+
+      window.socialShare(this.$el, options)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/config/api.js

@@ -20,7 +20,12 @@ const apis = {
     get: {
       url: `${commPrefix}/case/:id`,
       method: 'get',
-    }
+    },
+
+    like: {
+      url: `${commPrefix}/like/case/:id`,
+      method: 'post',
+    },
   },
   caseType: {
     list: {

src/main.js

@@ -4,14 +4,7 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import 'element-ui/lib/theme-chalk/index.css'
-import axios from "axios"
-import VueAxios from 'vue-axios'
-// import VueResource from 'vue-resource'
 
-Vue.use(VueAxios, axios);
-// Vue.use(VueResource)
-
-Vue.prototype.$axios = axios;
 Vue.config.productionTip = false
 
 Vue.use(ElementUI)

src/router.js

@@ -6,7 +6,6 @@ Vue.use(Router)
 
 export default new Router({
   mode: 'history',
-  base: process.env.BASE_URL,
   routes: [
     {
       path: '/',
@@ -46,7 +45,7 @@ export default new Router({
       component: () => import(/* webpackChunkName: "Contact" */ './views/Contact.vue')
     },
     {
-      path: '/details',
+      path: '/details/:id',
       name: 'details',
       // route level code-splitting
       // this generates a separate chunk (about.[hash].js) for this route

src/views/Case.vue

@@ -161,6 +161,12 @@ export default {
 
 <style scoped>
 
+
+.btn-link{
+  outline: none;
+  text-decoration: none;
+}
+
 .casecard{
  
   width: 100%;

src/views/Details.vue

@@ -15,52 +15,51 @@
 
       <div class="border-top" v-html="current.content"></div>
 
-      <div class="row" style="margin:0">
+      <div class="row zan-share" style="margin-left :0; margin-right:0">
         <div class="col-xs-6 col-md-6" style="padding 0;">
-          <div class="pull-left">
+          <div class="pull-left" @click="postLike">
             <span role="button" class="iconfont icon-zan"></span>
-            <span>赞 | {{current.likeNum}}</span>
+            <span>赞 | {{current.likeNum || 0}}</span>
           </div>
         </div>
         <div class="col-xs-6 col-md-6" style="padding 0;">
           <div class="pull-right">
             分享：
-            <a class="btn-default" href="#" role="button">
+            <share :config="shareConfig"/>
+       <!-- <wb:share-button addition="number" type="button"></wb:share-button> -->
+            <!-- <share :config="config"></share> -->
+            <!-- <a class="btn-default" href="#" role="button">
               <img src="../assets/image/case2/微信icon.png" class="share" alt />
-            </a>
-            <a class="btn-default" href="#" role="button">
+            </a>-->
+            <!-- <a class="btn-default" href="#" role="button">
               <img src="../assets/image/case2/微博icon.png" class="share" alt />
-            </a>
+            </a> -->
           </div>
         </div>
       </div>
     </div>
     <div class="contanier center-block next-prev">
-      <div class="row case-2">
+      <div class="row case-2" style="margin-left :0; margin-right:0">
         <div class="col-xs-4 col-md-4 case-3">
-          <div class="btn1 btn-link pull-left case-3 button-hover prev-page" v-if="brothers.length">
-            <router-link :to="{name: 'details', params: { id: brothers[0].id }}">
-              上一个案例
-            </router-link>
+          <div class="btn1 btn-link pull-left case-3 button-hover prev-page" v-if="brothers[0].id">
+            <router-link :to="{name: 'details', params: { id: brothers[0].id }}" class="btn1">上一个案例</router-link>
           </div>
         </div>
         <div class="col-xs-4 col-md-4 case-3">
           <button type="button" class="btn btn-default button-hover" @click="() => $router.go(-1)">返回</button>
         </div>
         <div class="col-xs-4 col-md-4 case-3">
-          <div class="btn1 btn-link pull-right case-3 button-hover next-page" v-if="brothers.length > 1">
-            <router-link :to="{name: 'details', params: { id: brothers[1].id }}">
-              下一个案例
-            </router-link>
+          <div class="btn1 btn-link pull-right case-3 button-hover next-page" v-if="brothers[1].id">
+            <router-link :to="{name: 'details', params: { id: brothers[1].id }}" class="btn1">下一个案例</router-link>
           </div>
         </div>
       </div>
     </div>
 
-    <div class="center-block" style="width: 80%">
+    <div class="center-block st5" style>
       <h2>更多好案例</h2>
 
-      <div class="row home-case" style="padding:0;width: 100%;">
+      <div class="row home-case" style="padding:0;width: 100%;margin-left :0; margin-right:0">
         <div class="col-xs-6 col-md-3 home-case" style="margin:0" v-for="(item,index) in recommends" :key="index">
           <router-link :to="{name: 'details', params: { id: item.id }}">
             <div class="st4" :style="{background: `url(${item.caseCoverImg})`}">
@@ -80,48 +79,118 @@
 import request from '../../utils/request'
 import apis from '../config/api';
 
+
+
+
+
 export default {
   name: 'CaseDetails',
 
   data () {
     return {
       detail: {},
+      // config: {
+      //   // url: '', // 网址，默认使用 window.location.href
+      //   // source: '', // 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
+      //   // title: '', // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
+      //   // description: '', // 描述, 默认读取head标签：<meta name="description" content="PHP弱类型的实现原理分析" />
+      //   image: '', // 图片, 默认取网页中第一个img标签
+      //   sites: ['weibo', 'wechat'], // 启用的站点
+      //   // disabled: ['google', 'facebook', 'twitter'], // 禁用的站点
+      //   wechatQrcodeTitle: '微信扫一扫：分享', // 微信二维码提示文字
+      //   wechatQrcodeHelper: '<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>'
+      // }
     }
+
   },
   computed: {
-    cover() {
+    shareConfig () {
+      return {
+        url: window.location.href,
+        title: this.current.caseTitle,
+        description: this.current.caseSummary
+      }
+    },
+    cover () {
       return this.detail.cover || {}
     },
-    current() {
+    current () {
       return this.detail.current || {}
     },
-    brothers() {
-      return this.detail.brothers || []
+    brothers () {
+      let b = this.detail.brothers
+      if (!b || !b.length) {
+        b = [{}, {}]
+      } else if (b.length === 1) {
+        if (b[0].id > this.$route.params.id) {
+          b = [{}].concat(b)
+        } else {
+          b.push({})
+        }
+      }
+
+      return b
     },
-    recommends() {
+    recommends () {
       return (this.detail.recommends || []).slice(0, 4)
     },
   },
   components: {
-
+    share: () => import('../components/Share'),
   },
   created () {
-    this.getDetail()
+
+// var $config = {
+//     title               : '234',
+//     description         : '123',
+//     sites: ['weibo', 'wechat'], // 启用的站点
+//     wechatQrcodeTitle   : "微信扫一扫：分享", // 微信二维码提示文字
+//     wechatQrcodeHelper  : '<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>',
+// };
+
+// socialShare('.social-share-cs', $config);
+
+
+
+    this.getDetail(this.$route.params.id)
   },
-  beforeRouteUpdate () {
-    // this.getDetail()
+  beforeRouteUpdate (to, from, next) {
+    this.getDetail(to.params.id)
+    next()
   },
   methods: {
-    getDetail () {
-      const id = this.$route.query.id;
-
+    getDetail (id) {
       request({
         ...apis.case.get,
         urlData: { id },
       }).then(res => {
         this.detail = res || {}
       })
-    }
+    },
+
+    postLike () {
+      const id = this.$route.params.id;
+
+      request({
+        ...apis.case.like,
+        urlData: { id },
+      }).then(res => {
+        this.detail = {
+          ...this.detail,
+          current: {
+            ...this.current,
+            likeNum: res || 0,
+          }
+        }
+
+        this.$message({
+          message: res == this.current.likeNum ? '已赞' : '赞 +1',
+          type: res == this.current.likeNum ? 'warning' : 'success'
+        });
+      })
+    },
+
+    
 
   },
 
@@ -152,7 +221,7 @@ export default {
     p {
       font-size: 2.4rem;
       color: #3e3a39;
-      img{
+      img {
         width: 192px;
         height: 55px;
       }
@@ -162,6 +231,9 @@ export default {
 
       border-top: 1px solid #aaa;
     }
+    .zan-share {
+      margin-top: 80px;
+    }
   }
   .button-hover:hover {
     color: #e03723;
@@ -196,6 +268,9 @@ export default {
     margin-top: 64px;
     margin-bottom: 30px;
   }
+  .st5 {
+    width: 80%;
+  }
 }
 
 @media (max-width: 992px) {
@@ -226,15 +301,12 @@ export default {
   .st {
     h1 {
       font-size: 2rem;
-      // img {
-      //   width: 192px;
-      //   height: 95px;
-      // }
     }
     p {
       font-size: 1.4rem;
       img {
-        width: 35%;
+        width: 100px;
+        height: 30px;
       }
     }
     .border-top {
@@ -242,26 +314,44 @@ export default {
 
       border-top: 1px solid #aaa;
     }
+    .zan-share {
+      margin-top: 30px;
+    }
   }
 
   .next-prev {
+    margin: 0;
     width: 100%;
+    padding-top: 30px;
     padding-bottom: 20px;
     border-bottom: 1px solid #aaa;
     .case2 {
-      margin: 0;
+      margin: 0 !important;
       .case3 {
       }
     }
   }
-  h2{
+  h2 {
     font-size: 2rem;
   }
 
-  .share{
+  .share {
     width: 10vw;
-   
-    
+  }
+  .home-case {
+    padding: 0;
+  }
+  .st4 {
+    width: 100%;
+
+    padding-bottom: 100%;
+    background-size: 100% 100% !important;
+    position: relative;
+
+    margin: 0;
+  }
+  .st4 .casetitle {
+    display: none;
   }
 }
 </style>
@@ -303,19 +393,6 @@ export default {
     margin: 0;
     padding: 0;
   }
-  /* .btn {
-    font-size: 24px;
-    margin-top: 88px;
-    padding: 12px 150px;
-    border-radius: 0px;
-    color: #000;
-    background-color: #fff;
-    border: 1px solid #aaaaaa;
-  }
-  .btn:hover {
-    color: #e03723;
-    border: 1px solid #e03723;
-  } */
 
   .home-case {
     padding: 0;
@@ -355,4 +432,14 @@ export default {
     width: 100%;
   }
 }
+
+</style>
+
+<style lang="less" scoped>
+
+.icon-nobefore {
+ &::before {
+   content: '' !important;
+ } 
+}
 </style>

src/views/Dynamic.vue

@@ -160,6 +160,12 @@ export default {
 </script>
 
 <style scoped>
+
+.btn-link{
+  outline: none;
+  text-decoration: none;
+}
+
 .border-bottom {
   /* display: none; */
   border-bottom: 1px solid #bfbfbf;

src/views/Home.vue

@@ -123,7 +123,7 @@
     <div class="contanier home-case top-case">
       <div class="row home-case" style="padding:0;width: 100%;">
         <div class="col-xs-6 col-md-3 home-case" v-for="(item,index) in caselist" :key="index">
-          <router-link :to="{ name: 'details', query: { id: item.id , type: item.type , taCaseTypeId: item.taCaseTypeId}}">
+          <router-link :to="{ name: 'details', params: { id: item.id }}">
             <div class="st4" :style="{background: `url(${item.caseCoverImg})`}">
               <div class="casetitle">
                 <p>{{item.caseTitle}}</p>
@@ -161,7 +161,7 @@
         <div class="contanier st top-news">
           <div class="row">
             <div class="col-xs-6 col-md-6 home-news-hover home-news" v-for="(item,index) in dynamiclist" :key="index">
-              <router-link :to="{ name: 'details', query: { id: item.id }}">
+              <router-link :to="{ name: 'details', params: { id: item.id }}">
                 <div :style="{background: `url(${item.caseCoverImg})`}" class="home-dynamic"></div>
                 <h3 class="text-left" style>{{item.caseTitle}}</h3>
               </router-link>