fix: 店铺详情折行\搜索内容重叠问题修复

src/components/HeadBar/HeadBar.scss

@@ -33,10 +33,14 @@
       position: relative;
       background: #ffffff;
       flex: 0 0 56px;
+      line-height: 16px;
       box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
       border-radius: 8px;
       align-items: center;
+      padding-right: 17px;
+      justify-content: space-between;
       .floorname {
+        flex: 0 0 46px;
         width: 46px;
         font-family: DINPro;
         font-style: normal;
@@ -47,8 +51,7 @@
         color: #333333;
       }
       .format {
-        position: absolute;
-        right: 17px;
+        white-space: nowrap;
         font-family: PingFang SC;
         font-style: normal;
         font-weight: normal;

src/components/Popup/Popup.js

@@ -26,7 +26,7 @@ const Popup = ({
           onClick={() => closePopup()}
         ></img>
         <div className="r1">
-          <div style={{ flex: 1 }}>
+          <div style={{ overflow: "hidden" }}>
             <div className="popupname">{shop.name}</div>
             <div className="popupdesc">
               <span> {shop.shopFormat ? shop.shopFormat : " "}</span>

src/components/Popup/Popup.scss

@@ -27,7 +27,6 @@
       z-index: 10;
     }
     .r1 {
-      display: flex;
       width: 100%;
       padding: 14px 20px 0 14px;
       height: 110px;
@@ -51,6 +50,9 @@
         color: #323337;
         margin-top: 10px;
         margin-bottom: 10px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .popupdesc {

src/js/helpers/data-helper.js

@@ -147,6 +147,7 @@ const getMallInfo = async () => {
       intro: true,
       formatColor: iot.color,
       floorOrder,
+      floorName: iot.floor,
     })),
   }));
   shopInfo.forEach(({ shopList }) =>

src/pages/Index/Index.scss

@@ -153,7 +153,7 @@ body {
   }
   .hud {
     position: absolute;
-    z-index: 3000;
+    z-index: 10001;
     top: 0;
     left: 0;
     width: 100vw;

src/pages/Shops/Shops.scss

@@ -79,10 +79,14 @@
       position: relative;
       background: #ffffff;
       flex: 0 0 56px;
+      line-height: 16px;
       box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
       border-radius: 8px;
       align-items: center;
+      padding-right: 17px;
+      justify-content: space-between;
       .floorname {
+        flex: 0 0 46px;
         width: 46px;
         font-family: DINPro;
         font-style: normal;
@@ -93,8 +97,7 @@
         color: #333333;
       }
       .format {
-        position: absolute;
-        right: 17px;
+        white-space: nowrap;
         font-family: PingFang SC;
         font-style: normal;
         font-weight: normal;