feat: 添加app二维码

assets/scss/util.scss

@@ -107,4 +107,9 @@ $baseFontSize: 100 !default;
   display: -webkit-box;
   -webkit-line-clamp: $line;
   -webkit-box-orient: vertical;
+}
+
+/*可点击文字hover*/
+.hover-text:hover {
+  color: #FF875B;
 }

layouts/module/header/HeaderInfoBar.vue

@@ -51,7 +51,7 @@
             @click="onJumpPersonalPage('message')"
           >
             <img src="~/assets/img/layout/icon-message.png" />
-            <span>消息</span>
+            <span class="hover-text">消息</span>
             <div v-if="messageCount > 0" class="wrap-content-message__tip">
               {{ messageCount }}
             </div>
@@ -63,13 +63,28 @@
           @click="onJumpPersonalPage('order/list')"
         >
           <img src="~/assets/img/layout/icon-order.png" />
-          <span>我的订单</span>
+          <span class="hover-text">我的订单</span>
         </div>
         <div class="header-wrap-content--line"></div>
-        <div class="header-wrap-content__common flex flex-middle">
-          <img src="~/assets/img/layout/icon-phone.png" />
-          <span>下载app</span>
-        </div>
+        <!-- 下载app -->
+        <el-popover
+          popper-class="header-info-bar__popover"
+          placement="bottom"
+          width="230"
+          trigger="hover"
+        >
+          <div
+            slot="reference"
+            class="header-wrap-content__common flex flex-middle"
+          >
+            <img src="~/assets/img/layout/icon-phone.png" />
+            <span class="hover-text">下载app</span>
+          </div>
+          <div class="info-bar-popover__qrcode">
+            <img src="~/assets/img/common/app-qrcode.png" />
+            <span>扫一扫上方二维码 下载APP</span>
+          </div>
+        </el-popover>
       </div>
     </div>
   </div>
@@ -139,7 +154,7 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .header-info-bar__dropdown {
   width: 200px;
   margin-top: 0 !important;
@@ -177,6 +192,21 @@ export default {
     border-radius: 0px 0px 0px 0px;
   }
 }
+.header-info-bar__popover {
+  .info-bar-popover__qrcode {
+    font-size: 14px;
+    color: #666666;
+    text-align: center;
+    img {
+      width: 186px;
+      height: 186px;
+      margin-bottom: 15px;
+    }
+  }
+  .popper__arrow {
+    display: none !important;
+  }
+}
 </style>
 <style lang="scss" scoped>
 .info-bar-header {

pages/index/module/Pick.vue

@@ -81,12 +81,12 @@
         <strong>新品上架</strong>
         <img src="~/assets/img/common/icon-jump.png" />
       </div>
-      <div
-        @click="onJumpGoodsDetal(newGoodsOne.id)"
-        class="home-pick-new__products flex"
-      >
+      <div class="home-pick-new__products flex">
         <!-- 左侧商品 -->
-        <div class="pick-new-products__left">
+        <div
+          @click="onJumpGoodsDetal(newGoodsOne.id)"
+          class="pick-new-products__left"
+        >
           <img
             :src="newGoodsOne.mainPicture"
             class="new-products-left__cover"