askbot-dragon 0.6.23 → 0.6.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "askbot-dragon",
-  "version": "0.6.23",
+  "version": "0.6.27",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/public/index.html

@@ -7,7 +7,7 @@
       <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <link href="//at.alicdn.com/t/font_1566110_eump2lzv89s.css"/>
+    <link rel="stylesheet"  href="//at.alicdn.com/t/font_1566110_eump2lzv89s.css"/>
     <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
     <script src="https://static.guoranbot.com/ckeditor5-build-classic/0.3.7/build/ckeditor.js"></script>
     <style>

package/src/App.vue

@@ -15,7 +15,8 @@ export default {
 }
 </script>
 
-<style>
+<style lang="less">
+@import "assets/less/converSationContainer/common.less";
 /*#app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

package/src/assets/js/script.js

@@ -0,0 +1,37 @@
+const displays = document.querySelectorAll('.note-display');
+const transitionDuration = 900;
+function displasss(){
+    displays.forEach(display => {
+        let note = parseFloat(display.dataset.note);
+        let [int, dec] = display.dataset.note.split('.');
+        [int, dec] = [Number(int), Number(dec)];
+        strokeTransition(display, note);
+        increaseNumber(display, int, 'int');
+        increaseNumber(display, dec, 'dec');
+    })
+}
+
+function strokeTransition(display, note) {
+       let progress = display.querySelector('.circle__progress--fill');
+       let radius = progress.r.baseVal.value;
+       let circumference = 2 * Math.PI * radius;
+       let offset = circumference * (10 - note) / 10;
+       progress.style.setProperty('--initialStroke', circumference);
+       progress.style.setProperty('--transitionDuration', `${transitionDuration}ms`);
+
+       setTimeout(() => progress.style.strokeDashoffset = offset, 100);
+     }
+function increaseNumber(display, number, className) {
+    let element = display.querySelector(`.percent__${className}`),
+        decPoint = className === 'int' ? '.' : '',
+        interval = transitionDuration / number,
+        counter = 0;
+
+    let increaseInterval = setInterval(() => {
+        if (counter === number) { window.clearInterval(increaseInterval); }
+
+        element.textContent = counter + decPoint;
+        counter++;
+    }, interval);
+}
+export {displasss}