二维码生成

themes/yilia/source-src/css/article-inner.scss

@@ -85,11 +85,11 @@
     margin-top: 10px;
   }
   p code,li code{
-    padding: 1px 3px;
+    padding: 3px 4px;
     margin: 0 3px;
-    background: #ddd;
-    border: 1px solid #ccc;
-    font-family: Menlo,Monaco,"Andale Mono","lucida console","Courier New",monospace;
+    background: #f5ecee;
+    color: #c7254e;
+    font-family: Menlo,Monaco,"Andale Mono","lucida console","Courier New","Microsoft YaHei";
     word-wrap: break-word;
     font-size: 14px;
   }

themes/yilia/source-src/css/share.scss

@@ -73,8 +73,8 @@
 
     .close {
         position: absolute;
-        right: 15px;
-        top: 15px;
+        right: 10px;
+        top: 10px;
         color: rgba(0, 0, 0, .2);
         font-size: 16px;
         line-height: 20px;

themes/yilia/source-src/js/share.js

@@ -1,5 +1,6 @@
 import addClass from 'dom101/add-class'
 import removeClass from 'dom101/remove-class'
+import QRious from 'qrious'
 
 function generate(url, opts) {
   var url = url.replace(/<%-sUrl%>/g, encodeURIComponent(opts.sUrl))
@@ -10,9 +11,17 @@ function generate(url, opts) {
   window.open(url);
 }
 
+var qrcodeInit = false
 function showWX() {
   let $wx = document.querySelector('.js-wx-box')
   let $mask = document.querySelector('.mask')
+  if(!qrcodeInit) {
+    new QRious({
+      element: document.querySelector('.qrcode-canvas'),
+      value: location.href
+    });
+    qrcodeInit = true
+  }
   addClass($wx, 'in')
   addClass($wx, 'ready')
   addClass($mask, 'in')
@@ -68,8 +77,8 @@ let init = function() {
       })
     }
   })
-  document.querySelector('.mask').onclick = hideWX
-  document.querySelector('.js-modal-close').onclick = hideWX
+  document.querySelector('.mask').addEventListener('click', hideWX)
+  document.querySelector('.js-modal-close').addEventListener('click', hideWX)
 }
 
 export default { init }