搞搞搞

.favorites.json

@@ -0,0 +1,11 @@
+[
+    {
+        "type": "Directory",
+        "name": "d:\\projects\\三维文物模型展示页面\\4dageModelVue\\src\\assets\\images",
+        "parent_id": null,
+        "fsPath": "d:\\projects\\三维文物模型展示页面\\4dageModelVue\\src\\assets\\images",
+        "workspaceRoot": null,
+        "workspacePath": null,
+        "id": "5BhlU2anxRwFrYGt"
+    }
+]

public/index.html

@@ -12,6 +12,9 @@
     <script>
       new VConsole()
     </script> -->
+
+    <link rel="stylesheet" href="./social-share/css/share.min.css">
+    <script src="./social-share/js/social-share.min.js"></script>
     
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
@@ -24,6 +27,5 @@
     <script>
       document.title = gConfigInfo.title
     </script>
-    
   </body>
 </html>

public/social-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/directives/v-click-outside.js

@@ -1,12 +1,12 @@
 export default {
-  install(Vue) {
-    Vue.directive('click-outside', {
-      bind(el, binding) {
+  install(app) {
+    app.directive('click-outside', {
+      mounted(el, binding) {
         function documentHandler(e) {
           if (el.contains(e.target)) {
             return false
           }
-          if (binding.expression) {
+          if (binding.value) {
             binding.value(e)
           }
         }
@@ -27,7 +27,7 @@ export default {
           })
         }
       },
-      unbind(el, binding) {
+      unmounted(el, binding) {
         document.removeEventListener('click', el.__vueClickOutside__, {
           capture: binding.modifiers.capture
         })

src/main.js

@@ -46,6 +46,8 @@ if (uaInfo.browser && uaInfo.browser.name === 'Safari') {
 if (uaInfo.device.type === 'mobile') {
   app.config.globalProperties.$isMobile = true
   document.body.classList.add('mobile')
+} else {
+  app.config.globalProperties.$isMobile = false
 }
 
 // // 处理resize事件

src/views/RelicDetail.vue

@@ -99,12 +99,24 @@
           draggable="false"
         >
       </button>
-      <button class="share">
+      <button
+        v-click-outside.click="onClickOutsideShare"
+        class="share"
+        @click="isShowShareMenu = !isShowShareMenu"
+      >
         <img
           :src="require(`@/assets/images/btn-share-${isDarkTheme ? 'dark' : 'light'}.png`)"
           alt=""
           draggable="false"
         >
+        <div
+          class="inner-menu social-share"
+          data-sites="weibo, wechat, qq"
+          :style="{
+            height: isShowShareMenu ? '154px' : '100%',
+            opacity: isShowShareMenu ? '1' : '0',
+          }"
+        />
       </button>
     </menu>
 
@@ -156,6 +168,7 @@ export default {
       isShowHelp: false,
       title: this.$gConfigInfo.objInfo[this.$route.query.m],
       detail: this.$gConfigTxt.txtObj[this.$route.query.m],
+      isShowShareMenu: false,
     }
   },
   computed: {
@@ -198,6 +211,11 @@ export default {
     })
     document.addEventListener('model-loaded', this.onModelLoad)
   },
+  mounted() {
+    setTimeout(() => {
+      window.socialShare('.social-share')
+    }, 1000)
+  },
   beforeUnmount() {
     const fdageUIElem = document.querySelector('#fdageUI')
     if (fdageUIElem && fdageUIElem.parentNode) {
@@ -236,6 +254,9 @@ export default {
         }
       })
     }, 1000),
+    onClickOutsideShare() {
+      this.isShowShareMenu = false
+    }
   },
 }
 </script>
@@ -327,6 +348,31 @@ export default {
         height: 100%;
       }
     }
+    > button.share {
+      position: relative;
+      > .inner-menu {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        bottom: 0;
+        border-radius: calc(32px / 2);
+        transition: all 0.2s;
+        z-index: -1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-evenly;
+        padding-bottom: 34px;
+        background-color: #444;
+        > button {
+          width: 27px;
+          height: 27px;
+          background-size: cover;
+          background-repeat: no-repeat;
+          background-position: center center;
+        }
+      }
+    }
   }
 
   > button.jump {
@@ -465,6 +511,9 @@ export default {
         > img {
         }
       }
+      > button.share {
+        display: none;
+      }
     }
 
     > button.jump {
@@ -505,13 +554,6 @@ export default {
     padding: 0 27px 0 1px !important;
   }
 
-  .el-switch.is-checked .el-switch__core .el-switch__inner {
-    padding: 0 0px 0 21px !important;
-  }
-  .el-switch .el-switch__core .el-switch__inner {
-    padding: 0 21px 0 1px !important;
-  }
-
   .el-switch .el-switch__core .el-switch__action {
     z-index: -1;
     background-color: #000 !important;
@@ -526,8 +568,57 @@ export default {
   .el-switch.is-checked .el-switch__core .el-switch__inner .is-icon {
     color: #000 !important;
   }
+  .mobile .el-switch.is-checked .el-switch__core .el-switch__inner {
+    padding: 0 0px 0 21px !important;
+  }
+  .mobile .el-switch .el-switch__core .el-switch__inner {
+    padding: 0 21px 0 1px !important;
+  }
   .mobile .el-switch.is-checked .el-switch__core .el-switch__inner .is-icon {
     transform: rotate(-90deg);
   }
+
+  .social-share .social-share-icon {
+    width: 27px !important;
+    height: 27px !important;
+    border: none !important;
+    background-size: cover !important;
+    background-repeat: no-repeat !important;
+    background-position: center center !important;
+    transition: initial !important;
+  }
+  .social-share .icon-weibo:before {
+    display: none !important;
+  }
+  .social-share .icon-wechat:before {
+    display: none !important;
+  }
+  .social-share .icon-qq:before {
+    display: none !important;
+  }
+  .social-share .icon-weibo {
+    background-image: url(@/assets/images/btn-share-weibo-normal.png) !important;
+    background-color: initial !important;
+  }
+  .social-share .icon-wechat {
+    background-image: url(@/assets/images/btn-share-weixin-normal.png) !important;
+    background-color: initial !important;
+  }
+  .social-share .icon-qq {
+    background-image: url(@/assets/images/btn-share-qq-normal.png) !important;
+    background-color: initial !important;
+  }
+  .social-share .icon-weibo:hover {
+    background-image: url(@/assets/images/btn-share-weibo-active.png) !important;
+    background-color: initial !important;
+  }
+  .social-share .icon-wechat:hover {
+    background-image: url(@/assets/images/btn-share-weixin-active.png) !important;
+    background-color: initial !important;
+  }
+  .social-share .icon-qq:hover {
+    background-image: url(@/assets/images/btn-share-qq-active.png) !important;
+    background-color: initial !important;
+  }
 }
 </style>