Procházet zdrojové kódy

优化:首页客服组件样式

萤火科技 před 4 roky
rodič
revize
ece8cfa10e

+ 4 - 4
src/views/page/modules/editor/Editor.vue

@@ -336,20 +336,20 @@
               <div class="block-item">
                 <span class="label">底边距</span>
                 <div class="item-slider">
-                  <a-slider v-model="curItem.style.bottom" :min="0" :max="100" />
+                  <a-slider v-model="curItem.style.bottom" :min="0" :max="50" />
                   <span class="unit-text">
                     <span>{{ curItem.style.bottom }}</span>
-                    <span>%</span>
+                    <span>像素</span>
                   </span>
                 </div>
               </div>
               <div class="block-item">
                 <span class="label">右边距</span>
                 <div class="item-slider">
-                  <a-slider v-model="curItem.style.right" :min="0" :max="100" />
+                  <a-slider v-model="curItem.style.right" :min="0" :max="50" />
                   <span class="unit-text">
                     <span>{{ curItem.style.right }}</span>
-                    <span>%</span>
+                    <span>像素</span>
                   </span>
                 </div>
               </div>

+ 1 - 1
src/views/page/modules/phone/Phone.vue

@@ -341,7 +341,7 @@
             :style="{ opacity: item.style.opacity / 100 }"
           >
             <div class="service-icon">
-              <img :src="item.params.image" alt />
+              <img class="image" :src="item.params.image" alt />
             </div>
           </div>
 

+ 3 - 1
src/views/page/modules/phone/style.less

@@ -694,10 +694,12 @@ dl {
       .service-icon {
         padding: 5px;
 
-        img {
+        .image {
           display: block;
           width: 45px;
           height: 45px;
+          border-radius: 50%;
+          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         }
       }
     }