细节优化

src/assets/icons/page/index.js

@@ -4,4 +4,7 @@ import search from './search.svg?inline'
 // 店铺公告
 import volumeFill from './volume-fill.svg?inline'
 
-export { search, volumeFill }
+// 购物车 (加号)
+import plus from './plus.svg?inline'
+
+export { search, volumeFill, plus }

src/assets/icons/page/plus.svg

@@ -0,0 +1 @@
+<svg t="1729791578301" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9748" width="230" height="230"><path d="M449.15639939 449.15639939V9.2511995h125.68720122v439.90519989h439.90519989v125.68720122h-439.90519989v439.90519989h-125.68720122v-439.90519989H9.2511995v-125.68720122h439.90519989z" p-id="9749"></path></svg>

src/utils/utils.less

@@ -95,9 +95,6 @@
 
 /* flex布局 */
 .flex {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -110,23 +107,14 @@
 }
 
 .flex-dir-column {
-  -webkit-box-orient: vertical;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
 }
 
 .flex-x-center {
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
 }
 
 .flex-x-between {
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
 }
 
@@ -135,16 +123,10 @@
 }
 
 .flex-x-end {
-  -webkit-box-pack: end;
-  -ms-flex-pack: end;
-  -webkit-justify-content: flex-end;
   justify-content: flex-end;
 }
 
 .flex-y-center {
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  -ms-flex-align: center;
   align-items: center;
 }
 

src/views/page/modules/editor/Editor.vue

@@ -296,7 +296,7 @@
         </a-tabs>
       </div>
 
-      <!-- 文章 -->
+      <!-- 文章组 -->
       <div v-if="curItem.type == 'article'" class="editor-content">
         <div class="block-box">
           <div class="block-title">文章内容</div>
@@ -378,7 +378,7 @@
         </a-tabs>
       </div>
 
-      <!-- 视频 -->
+      <!-- 视频组 -->
       <div v-if="curItem.type == 'video'" class="editor-content">
         <a-tabs>
           <a-tab-pane key="1" tab="内容设置">
@@ -445,7 +445,7 @@
         </a-tabs>
       </div>
 
-      <!-- 图片 -->
+      <!-- 图片组 -->
       <div v-if="curItem.type == 'image'" class="editor-content">
         <a-tabs>
           <a-tab-pane key="1" tab="内容设置">
@@ -780,7 +780,7 @@
         </a-tabs>
       </div>
 
-      <!-- 导航 -->
+      <!-- 导航组 -->
       <div v-if="curItem.type == 'navBar'" class="editor-content">
         <a-tabs>
           <a-tab-pane key="1" tab="内容设置">
@@ -864,7 +864,7 @@
         </a-tabs>
       </div>
 
-      <!-- 橱窗 -->
+      <!-- 图片橱窗 -->
       <div v-if="curItem.type == 'window'" class="editor-content">
         <a-tabs>
           <a-tab-pane key="1" tab="内容设置">
@@ -949,7 +949,7 @@
         </a-tabs>
       </div>
 
-      <!-- 图片 -->
+      <!-- 热区组 -->
       <div v-if="curItem.type == 'hotZone'" class="editor-content">
         <a-tabs>
           <a-tab-pane key="1" tab="内容设置">
@@ -1225,7 +1225,7 @@
         </a-tabs>
       </div>
 
-      <!-- 网站备案 -->
+      <!-- 备案号 -->
       <div v-if="curItem.type == 'ICPLicense'" class="editor-content">
         <a-tabs>
           <a-tab-pane key="1" tab="内容设置">

src/views/page/modules/phone/Phone.vue

@@ -29,9 +29,10 @@
           :class="{ selected: index === selectedIndex, undrag: inArray(item.type, undragList) }"
           :style="renderItemStyle(item)"
         >
-          <!-- 图片轮播 -->
+          <!-- 轮播图 -->
           <div v-if="item.type == 'banner'" class="diy-banner">
             <img
+              class="image"
               v-for="(dataItem, dataIdx) in item.data"
               :key="`${index}_${dataIdx}_img`"
               v-show="dataIdx <= 1"
@@ -59,7 +60,7 @@
               :key="`${index}_${dataIdx}`"
               :style="{ padding: `${item.style.paddingTop}px ${item.style.paddingLeft}px 0` }"
             >
-              <img :src="dataItm.imgUrl" />
+              <img class="image" :src="dataItm.imgUrl" />
             </div>
           </div>
 
@@ -81,7 +82,7 @@
                 :style="{ padding: `${item.style.paddingTop}px ${item.style.paddingLeft}px` }"
               >
                 <div class="item-image">
-                  <img :src="window.imgUrl" />
+                  <img class="image" :src="window.imgUrl" />
                 </div>
               </li>
             </ul>
@@ -90,7 +91,7 @@
                 class="display-left"
                 :style="{ padding: `${item.style.paddingTop}px ${item.style.paddingLeft}px` }"
               >
-                <img :src="item.data[0].imgUrl" />
+                <img class="image" :src="item.data[0].imgUrl" />
               </div>
               <div class="display-right">
                 <div
@@ -98,7 +99,7 @@
                   class="display-right1"
                   :style="{ padding: `${item.style.paddingTop}px ${item.style.paddingLeft}px` }"
                 >
-                  <img :src="item.data[1].imgUrl" />
+                  <img class="image" :src="item.data[1].imgUrl" />
                 </div>
                 <div class="display-right2">
                   <div
@@ -106,21 +107,21 @@
                     class="left"
                     :style="{ padding: `${item.style.paddingTop}px ${item.style.paddingLeft}px` }"
                   >
-                    <img :src="item.data[2].imgUrl" />
+                    <img class="image" :src="item.data[2].imgUrl" />
                   </div>
                   <div
                     v-if="item.data.length >= 4"
                     class="right"
                     :style="{ padding: `${item.style.paddingTop}px ${item.style.paddingLeft}px` }"
                   >
-                    <img :src="item.data[3].imgUrl" />
+                    <img class="image" :src="item.data[3].imgUrl" />
                   </div>
                 </div>
               </div>
             </div>
           </div>
 
-          <!-- 图片组 -->
+          <!-- 热区组 -->
           <div
             v-else-if="item.type == 'hotZone'"
             class="diy-hotZone"
@@ -130,7 +131,7 @@
               class="item-image"
               :style="{ padding: `${item.style.paddingTop}px ${item.style.paddingLeft}px 0` }"
             >
-              <img :src="item.data.imgUrl" />
+              <img class="image" :src="item.data.imgUrl" />
             </div>
           </div>
 
@@ -167,7 +168,7 @@
                   </div>
                 </div>
                 <div class="article-item__image">
-                  <img :src="dataItm.image" alt />
+                  <img class="image" :src="dataItm.image" alt />
                 </div>
               </template>
               <!-- 大图模式 -->
@@ -176,7 +177,7 @@
                   <span class="article-title">{{ dataItm.title }}</span>
                 </div>
                 <div class="article-item__image">
-                  <img :src="dataItm.image" />
+                  <img class="image" :src="dataItm.image" />
                 </div>
                 <div class="article-item__footer">
                   <span class="article-views">{{ dataItm.views_num }}次浏览</span>
@@ -186,7 +187,11 @@
           </div>
 
           <!-- 搜索栏 -->
-          <div v-else-if="item.type == 'search'" class="diy-search">
+          <div
+            v-else-if="item.type == 'search'"
+            class="diy-search"
+            :class="{ sticky: item.params.sticky }"
+          >
             <div class="inner" :class="item.style.searchStyle">
               <div class="search-input" :style="{ textAlign: item.style.textAlign }">
                 <a-icon class="search-icon" :component="PageIcon.search" />
@@ -227,7 +232,7 @@
                 :key="`${index}_${dataIdx}`"
               >
                 <div class="item-image">
-                  <img :src="dataItm.imgUrl" />
+                  <img class="image" :src="dataItm.imgUrl" />
                 </div>
                 <p class="item-text oneline-hide">{{ dataItm.text }}</p>
               </li>
@@ -238,11 +243,7 @@
           <div
             v-else-if="item.type == 'goods'"
             class="diy-goods"
-            :style="{
-              background: item.style.background, 
-              padding: `${item.style.paddingY}px ${item.style.paddingX}px`, 
-              overflow: item.style.display === 'slide' ? 'hidden' : 'unset' 
-            }"
+            :style="{ background: item.style.background, padding: `${item.style.paddingY}px ${item.style.paddingX}px` }"
           >
             <div
               class="goods-list"
@@ -259,21 +260,18 @@
                 <template v-if="item.style.column == 1">
                   <div class="flex">
                     <!-- 商品图片 -->
-                    <div class="goods-item_left">
+                    <div class="goods-item-left">
                       <img class="image" :src="dataItm.goods_image" />
                     </div>
-                    <div class="goods-item_right">
+                    <div class="goods-item-right">
                       <div class="goods-info">
                         <div
                           v-if="inArray('goodsName', item.style.show)"
                           class="goods-name twoline-hide"
                         >{{ dataItm.goods_name }}</div>
-                        <div
-                          v-if="inArray('sellingPoint', item.style.show)"
-                          class="goods-selling oneline-hide"
-                        >
+                        <div v-if="inArray('sellingPoint', item.style.show)" class="goods-selling">
                           <span
-                            class="selling"
+                            class="selling oneline-hide"
                             :style="{ color: item.style.sellingColor }"
                           >{{ dataItm.selling_point }}</span>
                         </div>
@@ -307,7 +305,7 @@
                               class="btn-cart"
                               :style="{ background: item.style.btnCartColor, color: item.style.btnFontColor }"
                             >
-                              <a-icon class="cart-icon" type="plus" />
+                              <a-icon class="cart-icon" :component="PageIcon.plus" />
                             </div>
                           </div>
                         </div>
@@ -325,12 +323,9 @@
                       v-if="inArray('goodsName', item.style.show)"
                       class="goods-name twoline-hide"
                     >{{ dataItm.goods_name }}</div>
-                    <div
-                      v-if="inArray('sellingPoint', item.style.show)"
-                      class="goods-selling oneline-hide"
-                    >
+                    <div v-if="inArray('sellingPoint', item.style.show)" class="goods-selling">
                       <span
-                        class="selling"
+                        class="selling oneline-hide"
                         :style="{ color: item.style.sellingColor }"
                       >{{ dataItm.selling_point }}</span>
                     </div>
@@ -364,7 +359,7 @@
                           class="btn-cart"
                           :style="{ background: item.style.btnCartColor, color: item.style.btnFontColor }"
                         >
-                          <a-icon class="cart-icon" type="plus" />
+                          <a-icon class="cart-icon" :component="PageIcon.plus" />
                         </div>
                       </div>
                     </div>
@@ -490,7 +485,7 @@
             :style="{ padding: `${item.style.paddingTop}px 0`, background: item.style.background }"
           >
             <div class="special-left">
-              <img :src="item.params.image" alt />
+              <img class="image" :src="item.params.image" alt />
             </div>
             <div class="special-content" :class="[`display_${item.params.display}`]">
               <ul class="special-content-list">

src/views/page/modules/phone/style.less

@@ -78,11 +78,17 @@ dl {
       color: #337ab7;
     }
 
-    // diy-搜索
+    // 搜索栏
     .diy-search {
       background: #f1f1f2;
       padding: 10px 10px;
 
+      &.sticky {
+        // position: sticky;  // 后台无需该效果
+        top: 0;
+        z-index: 100;
+      }
+
       .inner {
         height: 30px;
         background: #fff;
@@ -111,7 +117,7 @@ dl {
       }
     }
 
-    // diy-轮播图
+    // 轮播图
     .diy-banner {
       display: block;
       margin: 0;
@@ -119,11 +125,11 @@ dl {
       height: auto;
       overflow: hidden;
 
-      //position: relative;
-      img {
+      .image {
         display: none;
         width: 100%;
 
+        // 后台仅显示第一个
         &:first-child {
           display: block;
         }
@@ -181,13 +187,13 @@ dl {
       height: auto;
       overflow: hidden;
 
-      img {
+      .image {
         display: block;
         width: 100%;
       }
     }
 
-    // diy-按钮组
+    // 导航组
     .diy-navBar {
       .item-nav {
         float: left;
@@ -198,7 +204,7 @@ dl {
           text-align: center;
           margin-bottom: 4px;
 
-          img {
+          .image {
             height: 44px;
             width: 44px;
           }
@@ -221,7 +227,7 @@ dl {
 
     }
 
-    // diy-辅助线
+    // 辅助线
     .diy-guide {
       .line {
         height: 0;
@@ -229,7 +235,7 @@ dl {
       }
     }
 
-    // diy-视频组
+    // 视频组
     .diy-video {
       video {
         display: block;
@@ -238,7 +244,7 @@ dl {
       }
     }
 
-    // diy-文章组
+    // 文章组
     .diy-article {
       background: #f7f7f7;
 
@@ -256,7 +262,7 @@ dl {
           color: #333;
         }
 
-        &__image image {
+        &__image .image {
           display: block;
         }
 
@@ -281,7 +287,7 @@ dl {
             min-height: 36px;
           }
 
-          .article-item__image img {
+          .article-item__image .image {
             display: block;
             width: 120px;
           }
@@ -292,7 +298,7 @@ dl {
           .article-item__image {
             margin-top: 12.5px;
 
-            img {
+            .image {
               display: block;
               width: 100%;
             }
@@ -308,7 +314,7 @@ dl {
       .special-left {
         padding: 5px 10px;
 
-        img {
+        .image {
           display: block;
           width: 70px;
         }
@@ -342,7 +348,7 @@ dl {
     // diy-图片橱窗
     .diy-window {
 
-      .item-image img {
+      .item-image .image {
         display: block;
         width: 100%;
       }
@@ -376,7 +382,7 @@ dl {
         padding-bottom: 50%;
         position: relative;
 
-        img {
+        .image {
           width: 100%;
           height: 100%;
           object-fit: cover;
@@ -432,7 +438,7 @@ dl {
       }
     }
 
-    // diy-热区组
+    // 热区组
     .diy-hotZone {
       display: block;
       margin: 0;
@@ -440,16 +446,18 @@ dl {
       height: auto;
       overflow: hidden;
 
-      img {
+      .image {
         display: block;
         width: 100%;
       }
     }
 
-    // diy-商品组
+    // 商品组
     .diy-goods {
+      // 解决 margin-bottom: -10px 导致的容器异常
       display: flex;
       flex-direction: column;
+      // overflow: hidden;
 
       .goods-list {
         margin-bottom: -10px;
@@ -512,7 +520,7 @@ dl {
           }
 
           // 商品图片
-          .goods-item_left {
+          .goods-item-left {
             background: #fff;
             margin-right: 10px;
 
@@ -523,9 +531,10 @@ dl {
             }
           }
 
-          .goods-item_right {
+          .goods-item-right {
             position: relative;
             flex: 1;
+            width: 0; // 解决文字超出无法隐藏
           }
 
         }
@@ -597,10 +606,12 @@ dl {
               font-size: 13px;
               color: #000;
               margin-bottom: 4px;
-              height: 34px;
+              min-height: 34px; // 用户端
+              line-height: 1.3; // 用户端
             }
 
             .goods-selling {
+              display: flex; // 解决文字超出无法隐藏
               font-size: 12px;
               margin-bottom: 4px;
             }
@@ -669,7 +680,7 @@ dl {
                 border-radius: 50%;
 
                 .cart-icon {
-                  font-size: 13px;
+                  font-size: 10px;
                 }
               }
 
@@ -774,7 +785,7 @@ dl {
         .item-cont-avatar {
           margin-right: 10px;
 
-          img {
+          .image {
             display: block;
             width: 42px;
             height: 42px;
@@ -812,7 +823,7 @@ dl {
 
     }
 
-    // diy-头条快报
+    // 头条快报
     .diy-special {
       display: flex;
       align-items: center;
@@ -821,7 +832,7 @@ dl {
       .special-left {
         padding: 5px 10px;
 
-        img {
+        .image {
           display: block;
           width: 70px;
         }
@@ -852,7 +863,7 @@ dl {
       }
     }
 
-    // diy-优惠券组
+    // 优惠券组
     .diy-coupon {
       overflow: hidden;