Merge branch 'dev/v1.1.15_yf' of jianyu/web into feature/v1.1.15

apps/bigmember_pc/src/components/zhima/report-guide-banner.vue

@@ -97,9 +97,8 @@ const buyerReportId = ref('')
 const competitorReportId = ref({})
 const discountMsg = ref('')
 const reportBtnList = ref([])
-const bubbleLeft = ref('10px')
 const bubbleTimer = ref(null)
-const bubbleText = ref('')
+const currentBubbleIndex = ref(0)
 const packageInfo = toRef({})
 
 const entNameList = computed(() => {
@@ -302,23 +301,12 @@ const startBubbleAnimation = () => {
   const btnLen = reportBtnList.value.length
   if (btnLen === 0) return
   nextTick(() => {
-    const btnRefs = that.$refs.reportBtn
-    let currentIndex = 0
     if (bubbleTimer.value) clearInterval(bubbleTimer.value)
-    if (btnLen === 1) {
-      bubbleLeft.value = '10px'
-      bubbleText.value = reportBtnList.value[0].marketText
+    if (btnLen.length === 1) {
+      currentBubbleIndex.value = 0
     } else {
-      bubbleText.value = reportBtnList.value[0].marketText
       bubbleTimer.value = setInterval(() => {
-        currentIndex = (currentIndex + 1) % btnLen
-        const btn = btnRefs[currentIndex]
-        if (btn) {
-          bubbleLeft.value = btn?.offsetLeft - 10 + 'px'
-          setTimeout(() => {
-            bubbleText.value = reportBtnList.value[currentIndex].marketText
-          }, 300)
-        }
+        currentBubbleIndex.value = (currentBubbleIndex.value + 1) % btnLen
       }, 2500)
     }
   })
@@ -408,21 +396,25 @@ onUnmounted(() => {
               <span>{{ ent }}</span>
             </li>
           </ul>
-          <button
-            class="flex flex-items-center report-btn"
-            slot="reference"
-            @click="handleDownload(item, index)"
-            :ref="'reportBtn'"
-          >
-            <span>{{ item.text }}</span>
-            <i class="j-icon j-icon-base icon-img-download"></i>
-            <i class="j-icon j-icon-base icon-img-download-white"></i>
-          </button>
+          <div class="btn-container" slot="reference">
+            <button
+              class="flex flex-items-center report-btn"
+              @click="handleDownload(item, index)"
+              :ref="'reportBtn'"
+            >
+              <span>{{ item.text }}</span>
+              <i class="j-icon j-icon-base icon-img-download"></i>
+              <i class="j-icon j-icon-base icon-img-download-white"></i>
+            </button>
+            <div
+              class="bubble-box"
+              :class="{ visible: currentBubbleIndex === index }"
+            >
+              {{ item.marketText }}
+            </div>
+          </div>
         </el-popover>
       </div>
-      <div v-show="bubbleText" class="bubble" :style="{ left: bubbleLeft }">
-        {{ bubbleText }}
-      </div>
     </div>
   </div>
 </template>
@@ -473,6 +465,27 @@ onUnmounted(() => {
   .banner-right {
     position: relative;
   }
+  .btn-container {
+    position: relative;
+  }
+  .bubble-box {
+    position: absolute;
+    top: -14px;
+    left: 10px;
+    background: linear-gradient(101.8deg, #2abed1 0%, #0a6cff 100%);
+    padding: 1px 8px;
+    border-radius: 8px 2px 8px 2px;
+    font-size: 12px;
+    line-height: 18px;
+    color: #fff;
+    opacity: 0;
+    transform: translateY(10px);
+    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    &.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
   .report-btn {
     margin-left: 20px;
     padding: 3px 20px;

apps/bigmember_pc/src/views/reportDownload/record.vue

@@ -309,7 +309,7 @@
               </div>
               <div>
                 <span>获取方式：</span>
-                <span>{{scope.row.acquisition_method | formatGetWay}}</span>
+                <span>{{ scope.row.acquisition_method | formatGetWay }}</span>
               </div>
             </div>
             <!-- 业主采购、企业中标分析报告-->
@@ -678,9 +678,9 @@ export default {
       return result
     },
     formatGetWay(value) {
-      if(value === 0) {
+      if (value === 0) {
         return '付费购买'
-      } else if(value > 0){
+      } else if (value > 0) {
         return '会员获取-免费下载'
       } else if (value < 0) {
         return '会员获取-付费购买'
@@ -959,6 +959,7 @@ export default {
 $char_color: #1d1d1d;
 .in-app {
   .report-download-record {
+    min-width: 1240px;
     padding: 24px;
   }
 }
@@ -995,7 +996,7 @@ $char_color: #1d1d1d;
   }
   .balance-box {
     margin: 24px 0 16px;
-    padding: 12px 24px 32px;
+    padding: 12px 22px 32px;
     .card-row {
       display: flex;
       //grid-template-columns: 1fr 1fr 1fr;
@@ -1053,6 +1054,7 @@ $char_color: #1d1d1d;
           font-size: 16px;
           line-height: 24px;
           color: #1d1d1d;
+          white-space: nowrap;
         }
         .zhi-ma-desc {
           font-size: 12px;
@@ -1078,6 +1080,7 @@ $char_color: #1d1d1d;
           line-height: 18px;
           border-radius: 8px 4px 8px 2px;
           font-weight: 700;
+          white-space: nowrap;
           .vip-icon {
             font-style: italic;
           }