xcx

package-lock.json

@@ -1949,6 +1949,11 @@
         }
       }
     },
+    "base64-arraybuffer": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
+      "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg="
+    },
     "base64-js": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
@@ -2579,9 +2584,9 @@
       "dev": true
     },
     "chromedriver": {
-      "version": "2.44.0",
-      "resolved": "https://registry.npmjs.org/chromedriver/-/chromedriver-2.44.0.tgz",
-      "integrity": "sha512-/lDFxpSc3mJG/+RF657qDVa3XbfwG8+X2x0Y3kVkvZe6u6aZg+zTMHeGoQziUQGPaDQ9sj8sFYv4duv/AS6y7A==",
+      "version": "2.45.0",
+      "resolved": "https://registry.npmjs.org/chromedriver/-/chromedriver-2.45.0.tgz",
+      "integrity": "sha512-Qwmcr+2mU3INeR6mVsQ8gO00vZpL8ZeTJLclX44C0dcs88jrSDgckPqbG+qkVX+m2L/aOPnF0lYgPdOiOiLt5w==",
       "dev": true,
       "requires": {
         "del": "3.0.0",
@@ -3234,6 +3239,14 @@
       "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
       "dev": true
     },
+    "css-line-break": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.0.1.tgz",
+      "integrity": "sha1-GfIGOjPpX7KDG4ZEbAuAwYivRQo=",
+      "requires": {
+        "base64-arraybuffer": "0.1.5"
+      }
+    },
     "css-loader": {
       "version": "0.28.11",
       "resolved": "http://registry.npmjs.org/css-loader/-/css-loader-0.28.11.tgz",
@@ -6339,6 +6352,14 @@
         }
       }
     },
+    "html2canvas": {
+      "version": "1.0.0-alpha.12",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-alpha.12.tgz",
+      "integrity": "sha1-OxmS48mz9WBjw1/WIElPN+uohRM=",
+      "requires": {
+        "css-line-break": "1.0.1"
+      }
+    },
     "htmlparser2": {
       "version": "3.3.0",
       "resolved": "http://registry.npmjs.org/htmlparser2/-/htmlparser2-3.3.0.tgz",
@@ -15412,6 +15433,12 @@
       "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
       "dev": true
     },
+    "weixin-jsapi": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/weixin-jsapi/-/weixin-jsapi-1.1.0.tgz",
+      "integrity": "sha1-UalaIiTFnR2PAv3bxt5S2hazRLM=",
+      "dev": true
+    },
     "whatwg-encoding": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "html2canvas": "^1.0.0-alpha.12",
     "mescroll.js": "^1.3.8",
     "vant": "^1.4.5",
     "vue": "^2.5.2",
@@ -38,7 +39,7 @@
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.22.0",
     "chalk": "^2.0.1",
-    "chromedriver": "^2.27.2",
+    "chromedriver": "^2.45.0",
     "copy-webpack-plugin": "^4.0.1",
     "cross-spawn": "^5.0.1",
     "css-loader": "^0.28.0",

src/App.vue

@@ -13,12 +13,12 @@ export default {
   name: 'App',
   data () {
     return {
-      showPage: false,
+      showPage: true,
       code: ''
     }
   },
   created () {
-    this.init()
+    // this.init()
     this.getAppId().then(() => {
       console.log(this.appid)
     })

src/pages/home/index.vue

@@ -1,38 +1,39 @@
 <template>
-  <div class="mainPage">
+  <div class="mainPage" id="canvasPage">
     <div class="imgArr" :hidden="true">
       <img
         v-for="item in imgTotal"
         :key="item"
-        :src="'https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/icon-' + item + '.png'"
+        :src="'http://wx.jinchengjiaye.com/h5-2019/static/images/icon-' + item + '.png'"
         @load="imgLoad"
         alt
       >
     </div>
     <div class="subPage" v-if="showPage">
       <img
-        src="https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/icon-12.png"
+        src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-12.png"
         style="z-index: 3;"
         class="centerLabel cover"
         alt
       >
       <img
-        src="https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/icon-10.png"
+        src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-10.png"
         class="icon10"
         style="position: absolute;left:9vw;top:3.7vh;z-index:100;width: 31.2vw;"
+        v-if="imgSrc === null"
         :class="{'active': currentPage !== 0}"
         alt
       >
-      <div class="page1" :class="{'show': currentPage === 1}">
+      <div class="page1" :class="{'show': currentPage === 1 && imgSrc === null}">
         <img
-          src="https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/icon-3.png"
+          src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-3.png"
           class="icon3"
           style="position: absolute;left:0;top:0;z-index:2;width: 87.5vw;"
           :class="{'active': currentPage === 1}"
           alt
         >
         <img
-          src="https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/icon-4.png"
+          src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-4.png"
           class="icon4"
           style="position: absolute;right:0;bottom:0;z-index:2;width: 77vw;"
           :class="{'active': currentPage === 1}"
@@ -40,7 +41,7 @@
         >
         <div class="centerLabel" style="z-index: 3">
           <img
-            src="https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/icon-11.png"
+            src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-11.png"
             class="icon11"
             style="width: 36.5vw;"
             :class="{'active': currentPage === 1}"
@@ -51,7 +52,7 @@
             style="overflow: visible;position: relative;-webkit-transform-style: preserve-3d !important;transform-style: preserve-3d !important;"
           >
             <img
-              src="https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/icon-2.png"
+              src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-2.png"
               class="icon2"
               style="width:68vw;transform: translateY(.2rem);-webkit-transform: translateY(.2rem);"
               :class="{'active': currentPage === 1}"
@@ -61,14 +62,14 @@
             <div class="circle circle2 centerLabel" :class="{'active': currentPage === 1}"></div>
           </div>
           <img
-            src="https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/icon-13.png"
+            src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-13.png"
             class="icon13"
             style="width:56vw;display:inline-block;margin-top: .4rem;"
             :class="{'active': currentPage === 1}"
             alt
           >
           <img
-            src="https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/icon-1.png"
+            src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-1.png"
             class="icon1"
             style="width: 35.7vw;margin-top: .2rem;"
             :class="{'active': currentPage === 1}"
@@ -77,154 +78,121 @@
           >
         </div>
       </div>
-      <div class="page2" :class="{'show': currentPage === 2}">
+      <div class="page2" :class="{'show': currentPage === 2 && imgSrc === null}">
         <img
-          src="https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/icon-7.png"
+          src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-7.png"
           class="icon7"
           style="position: absolute;left:0;top:0;z-index:2;width: 100vw;"
           :class="{'active': currentPage === 2}"
           alt
         >
         <img
-          src="https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/icon-6.png"
+          src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-6.png"
           class="icon6"
           style="position: absolute;right:0;bottom:0;z-index:2;width: 100vw;"
           :class="{'active': currentPage === 2}"
           alt
         >
         <img
-          src="https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/icon-5.png"
+          src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-5.png"
           class="icon5"
           style="position: absolute;right:9vw;bottom:3.5vh;z-index:11;width: 43.7vw;"
           :class="{'active': currentPage === 2}"
           alt
         >
+        <div class="nextStep" v-if="userSelectFlag.length" @click="nextStep">
+          <span>下一步</span>
+        </div>
         <div class="centerLabel">
           <img
-            src="https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/icon-13.png"
+            src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-13.png"
             class="icon13"
             style="width:66vw;display:inline-block;margin-top: .4rem;"
             :class="{'active': currentPage === 2}"
             alt
           >
           <div class="content">
-            <span class="flagItem flagItem1" :class="{'active': currentPage === 2}">努力的目标</span>
-            <span class="flagItem flagItem2" :class="{'active': currentPage === 2}">努力的目标</span>
-            <span class="flagItem flagItem3" :class="{'active': currentPage === 2}">努力的目标</span>
-            <span class="flagItem flagItem4" :class="{'active': currentPage === 2}">努力的目标</span>
-            <span class="flagItem flagItem5" :class="{'active': currentPage === 2}">努力的目标</span>
-            <span class="flagItem flagItem6" :class="{'active': currentPage === 2}">努力的目标</span>
-            <span class="flagItem flagItem7" :class="{'active': currentPage === 2}">努力的目标</span>
-            <span class="flagItem flagItem8" :class="{'active': currentPage === 2}">努力的目标</span>
-            <span class="flagItem flagItem9" :class="{'active': currentPage === 2}">努力的目标</span>
-            <span class="flagItem flagItem10" :class="{'active': currentPage === 2}">努力的目标</span>
+            <span
+              v-for="(item, index) in selectFlag"
+              :key="index"
+              class="flagItem"
+              :class="{'active': currentPage === 2, [`flagItem${index+1}`]: true, 'selected': item.select}"
+              @click="selectFlagItem(item, index)"
+            >{{item.value}}</span>
           </div>
         </div>
       </div>
-      <div class="page3" :hidden="currentPage !== 3">
-        <img
-          src="https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/icon-8.png"
-          class="icon8"
-          style="position: absolute;left:0;bottom:0;z-index:2;width: 100vw;"
-          alt
-        >
-        <img
-          src="https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/icon-9.png"
-          class="icon9"
-          style="position: absolute;left:0;bottom:0;z-index:3;width: 100vw;"
-          alt
-        >
-        <div class="centerLabel">
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-        </div>
-      </div>
-      <div class="page4" :hidden="currentPage !== 4">
+      <div class="page3" :class="{'show': currentPage === 3 && imgSrc === null}">
         <img
-          src="https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/icon-8.png"
+          src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-8.png"
           class="icon8"
           style="position: absolute;left:0;bottom:0;z-index:2;width: 100vw;"
           alt
         >
         <img
-          src="https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/icon-9.png"
+          src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-9.png"
           class="icon9"
           style="position: absolute;left:0;bottom:0;z-index:3;width: 100vw;"
           alt
         >
-        <div class="centerLabel">
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-          <span></span>
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-        </div>
-      </div>
-      <div class="page5" :hidden="currentPage !== 5">
-        <img
-          src="https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/icon-8.png"
-          class="icon8"
-          style="position: absolute;left:0;bottom:0;z-index:2;width: 100vw;"
-          alt
-        >
-        <img
-          src="https://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/20181229-images/icon-9.png"
-          class="icon9"
-          style="position: absolute;left:0;bottom:0;z-index:3;width: 100vw;"
-          alt
-        >
-        <div class="userIcon">
+        <div class="userIcon" style="z-index: 20;">
           <a>
             <img :src="userIcon" class="centerLabel cover" alt>
           </a>
         </div>
-        <div class="centerLabel">
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
+        <div class="centerLabel" style="z-index: 20">
+          <img
+            src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-15.png"
+            width="100%"
+            alt
+          >
           <span></span>
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
-          <span>亲爱的你，新年好</span>
+          <img
+            src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-16.png"
+            v-if="showEndTextIndex === 0"
+            width="100%"
+            alt
+          >
+          <img
+            src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-17.png"
+            v-if="showEndTextIndex === 1"
+            width="100%"
+            alt
+          >
+          <img
+            src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-18.png"
+            v-if="showEndTextIndex === 2"
+            width="100%"
+            alt
+          >
         </div>
         <div class="bottomText">
           <div class="qrCode">
             <a>
-              <img :src="qrCode" class="centerLabel cover" alt>
+              <img src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-19.png" class="centerLabel cover" alt>
             </a>
           </div>
           <span>长按二维码</span>
           <span>祝福你的2019</span>
         </div>
       </div>
+      <div class="page4" :class="{'show': currentPage === 4 && imgSrc !== null}">
+        <img :src="imgSrc" width="100%" class="cover" alt>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import html2canvas from 'html2canvas'
+import musicPlay from '../../util/music'
 export default {
   name: '',
   data () {
     return {
       showPage: false,
       imgNum: 0,
-      imgTotal: 18,
+      imgTotal: 19,
       currentPage: 0,
       userIcon: '',
       qrCode: '',
@@ -255,7 +223,11 @@ export default {
         '实现财务自由',
         '方案一次过',
         '男（女）神回复我信息'
-      ]
+      ],
+      selectFlag: [],
+      userSelectFlag: [],
+      showEndTextIndex: Math.floor(Math.random() * 3),
+      imgSrc: null
     }
   },
   computed: {
@@ -263,12 +235,40 @@ export default {
   components: {
   },
   created () {
+    '*********'.split('*').forEach(x => {
+      while (true) {
+        const inx = Math.floor(Math.random() * this.flagList.length)
+        const res = this.flagList[inx]
+        if (this.selectFlag.indexOf(res) === -1) {
+          this.selectFlag.push({
+            select: false,
+            value: res
+          })
+          break
+        }
+      }
+    })
   },
   mounted () {
     this.$nextTick(() => {
+      musicPlay('http://wx.jinchengjiaye.com/h5-2019/static/images/Thomas%20Greenberg.mp3')
     })
   },
   methods: {
+    nextStep () { // 下一步
+      this.currentPage = this.userSelectFlag.length ? 3 : 2
+      window.setTimeout(() => {
+        this.convert2canvas(document.getElementById('canvasPage')).then((res) => {
+          this.imgSrc = res
+          this.currentPage = 4
+        })
+      }, 300)
+    },
+    selectFlagItem (item, index) {
+      document.getElementsByClassName('flagItem')[index].style = 'transition: all .3s ease;-webkit-transition: all .3s ease;'
+      item.select = true
+      this.userSelectFlag.push(item)
+    },
     imgLoad () { // 图片加载进度存储
       this.imgNum += 1
       if (this.imgNum === this.imgTotal) {
@@ -280,6 +280,33 @@ export default {
     },
     returnImgNum () { // 图片加载进度读取
       return Math.floor((this.imgNum / this.imgTotal) * 100)
+    },
+    convert2canvas (dom) {
+      return new Promise((resolve, reject) => {
+        var shareContent = dom
+        var width = shareContent.offsetWidth // 获取dom 宽度
+        var height = shareContent.offsetHeight // 获取dom 高度
+        var canvas = document.createElement('canvas') // 创建一个canvas节点
+        var scale = 1 // 定义任意放大倍数 支持小数
+        canvas.width = width * scale // 定义canvas 宽度 * 缩放
+        canvas.height = height * scale // 定义canvas高度 *缩放
+        canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale
+        var opts = {
+          scale: scale, // 添加的scale 参数
+          canvas: canvas, // 自定义 canvas
+          width: width, // dom 原始宽度
+          height: height,
+          useCORS: true // 【重要】开启跨域配置
+        }
+        html2canvas(shareContent, opts).then(function (canvas) {
+          var context = canvas.getContext('2d') // 【重要】关闭抗锯齿
+          context.mozImageSmoothingEnabled = false
+          context.webkitImageSmoothingEnabled = false
+          context.msImageSmoothingEnabled = false
+          context.imageSmoothingEnabled = false
+          resolve(canvas.toDataURL('image/jpeg'))
+        })
+      })
     }
   }
 }

src/pages/home/page.scss

@@ -59,6 +59,23 @@
         }
       }
       &.page2{
+        .nextStep{
+          padding: .02rem;
+          border: 2px solid #fff;
+          position: absolute;
+          right: 12vw;
+          bottom: 4.5vh;
+          z-index: 200;
+          display: inline-block;
+          span{
+            background: #de7ba2;
+            color: #fff;
+            font-size: .18rem;
+            display: inline-block;
+            line-height: .3rem;
+            padding: 0 .1rem;
+          }
+        }
         >.centerLabel{
           width: 100%;
           z-index: 11;
@@ -80,6 +97,7 @@
               display: inline-block;
               position: absolute;
               padding: 0 .1rem;
+              white-space: nowrap;
               z-index: 11;
               &:nth-child(2n){
                 transform: translateX(-1rem);
@@ -117,12 +135,15 @@
               background: #5bcff1;
               border-radius: .1rem;
               overflow: visible;
+              &.selected{
+                opacity: 0;
+              }
               &::after{
                 content: '';
                 border-color: #5bcff1 transparent transparent transparent;
                 border-width: .15rem;
                 bottom: -.24rem;
-                right: 50%;
+                right: 30%;
                 -webkit-transform: rotateY(60deg) rotateZ(-20deg);
                 transform: rotateY(60deg) rotateZ(-20deg);
               }
@@ -136,12 +157,15 @@
               background: #f8b551;
               border-radius: .1rem;
               overflow: visible;
+              &.selected{
+                opacity: 0;
+              }
               &::after{
                 content: '';
                 border-color: #f8b551 transparent transparent transparent;
                 border-width: .15rem;
                 bottom: -.24rem;
-                left: 50%;
+                left: 30%;
                 -webkit-transform: rotateY(60deg) rotateZ(20deg);
                 transform: rotateY(60deg) rotateZ(20deg);
               }
@@ -155,12 +179,15 @@
               background: #de7ba2;
               border-radius: .1rem;
               overflow: visible;
+              &.selected{
+                opacity: 0;
+              }
               &::after{
                 content: '';
                 border-color: #de7ba2 transparent transparent transparent;
                 border-width: .15rem;
                 bottom: -.24rem;
-                left: 50%;
+                left: 30%;
                 -webkit-transform: rotateY(60deg) rotateZ(-20deg);
                 transform: rotateY(60deg) rotateZ(-20deg);
               }
@@ -174,12 +201,15 @@
               background: #fdc17a;
               border-radius: .1rem;
               overflow: visible;
+              &.selected{
+                opacity: 0;
+              }
               &::after{
                 content: '';
                 border-color: #fdc17a transparent transparent transparent;
                 border-width: .15rem;
                 bottom: -.24rem;
-                right: 50%;
+                right: 30%;
                 -webkit-transform: rotateY(60deg) rotateZ(20deg);
                 transform: rotateY(60deg) rotateZ(20deg);
               }
@@ -193,12 +223,15 @@
               background: #f8b551;
               border-radius: .1rem;
               overflow: visible;
+              &.selected{
+                opacity: 0;
+              }
               &::after{
                 content: '';
                 border-color: #f8b551 transparent transparent transparent;
                 border-width: .15rem;
                 bottom: -.24rem;
-                left: 60%;
+                left: 30%;
                 -webkit-transform: rotateY(60deg) rotateZ(-20deg);
                 transform: rotateY(60deg) rotateZ(-20deg);
               }
@@ -212,12 +245,15 @@
               background: #f8b551;
               border-radius: .1rem;
               overflow: visible;
+              &.selected{
+                opacity: 0;
+              }
               &::after{
                 content: '';
                 border-color: #f8b551 transparent transparent transparent;
                 border-width: .15rem;
                 bottom: -.24rem;
-                left: 50%;
+                left: 30%;
                 -webkit-transform: rotateY(60deg) rotateZ(20deg);
                 transform: rotateY(60deg) rotateZ(20deg);
               }
@@ -233,12 +269,15 @@
               overflow: visible;
               transform: translateX(-50%);
               -webkit-transform: translateX(-50%);
+              &.selected{
+                opacity: 0;
+              }
               &::after{
                 content: '';
                 border-color: #a57dd1 transparent transparent transparent;
                 border-width: .15rem;
                 bottom: -.24rem;
-                left: 60%;
+                left: 30%;
                 -webkit-transform: rotateY(60deg) rotateZ(-20deg);
                 transform: rotateY(60deg) rotateZ(-20deg);
               }
@@ -252,12 +291,15 @@
               background: #f8b551;
               border-radius: .1rem;
               overflow: visible;
+              &.selected{
+                opacity: 0;
+              }
               &::after{
                 content: '';
                 border-color: #f8b551 transparent transparent transparent;
                 border-width: .15rem;
                 bottom: -.24rem;
-                left: 60%;
+                left: 30%;
                 -webkit-transform: rotateY(60deg) rotateZ(-20deg);
                 transform: rotateY(60deg) rotateZ(-20deg);
               }
@@ -271,12 +313,15 @@
               background: #fdc17a;
               border-radius: .1rem;
               overflow: visible;
+              &.selected{
+                opacity: 0;
+              }
               &::after{
                 content: '';
                 border-color: #fdc17a transparent transparent transparent;
                 border-width: .15rem;
                 bottom: -.24rem;
-                left: 60%;
+                left: 30%;
                 -webkit-transform: rotateY(60deg) rotateZ(-20deg);
                 transform: rotateY(60deg) rotateZ(-20deg);
               }
@@ -290,12 +335,15 @@
               background: #f8b551;
               border-radius: .1rem;
               overflow: visible;
+              &.selected{
+                opacity: 0;
+              }
               &::after{
                 content: '';
                 border-color: #f8b551 transparent transparent transparent;
                 border-width: .15rem;
                 bottom: -.24rem;
-                left: 50%;
+                left: 30%;
                 -webkit-transform: rotateY(60deg) rotateZ(20deg);
                 transform: rotateY(60deg) rotateZ(20deg);
               }

src/util/music.js

@@ -0,0 +1,51 @@
+/* eslint-disable */
+export default function musicPlay (src) {
+  var className = 'play'
+  var trigger = 'ontouchend' in document ? 'touchstart' : 'click'
+  var $musci = document.createElement('div')
+  var $audio = document.createElement('audio')
+
+  function start () {
+    document.removeEventListener(trigger, start, false)
+    if (!$audio.paused) return
+    $audio.play()
+  }
+
+  function toggle () {
+    if (!$audio.paused) return $audio.pause()
+
+    $audio.currentTime = 0
+    $audio.play()
+  }
+
+  function play (e) {
+    $musci.classList.add(className)
+  }
+
+  function pause (e) {
+    $musci.classList.remove(className)
+  }
+
+  $musci.className = 'music-icon'
+  $musci.classList.add('paused')
+  $audio.src = src
+  $audio.id = "audio"
+  $audio.loop = true
+  $audio.volume = 0.5
+  document.body.appendChild($musci)
+  document.body.appendChild($audio)
+
+  $audio.addEventListener('play', play, false)
+  $audio.addEventListener('pause', pause, false)
+  $audio.addEventListener('ended', pause, false)
+  $musci.addEventListener('click', toggle, false)
+  try {
+    $audio.play()
+  } catch (err) {
+  }
+  document.addEventListener("WeixinJSBridgeReady", function () {
+    $audio.play()
+  }, false)
+
+  document.addEventListener(trigger, start, false)
+}