ok

pages/demo/index.vue

@@ -30,16 +30,16 @@
     </div>
     <div class="lab">
       <p>图例</p>
-      <div>
-        <div class="block"></div>
+      <div class="item">
+        <div class="block" v-width="60"></div>
         <div class="info fg">为京泸京广服务的动车所</div>
       </div>
-      <div>
-        <div class="block dot"></div>
+      <div class="item">
+        <div class="block dot"  v-width="60"></div>
         <div class="info fg">目前不为京泸京广服务的动车所</div>
       </div>
-      <div>
-        <div class="block line"></div>
+      <div class="item">
+        <div class="block line"  v-width="60"></div>
         <div class="info fg">规划中或在建动车所</div>
       </div>
     </div>
@@ -398,19 +398,19 @@ export default {
     border: 1px solid black;
     right: 100px;
     color: white;
-    padding: 10px 20px;
+    padding: 10px 10px 0 10px;
     >p{
         font-size: 14px;
         font-weight: bold;
         line-height: 40px;
     }
-    > div {
-      display: flex;      
+    .item { 
       .block {
-        display: block;
         height: 40px;
         width: 60px;
         border: 1px solid #ddd;
+        float: left;
+        margin-right: 10px;
       }
       .dot{
           border: 1px dotted #ddd;
@@ -419,7 +419,7 @@ export default {
           border: 1px dashed #ddd;
       }
       .info {
-        padding-left: 10px;
+        padding-left: 20px;
         flex-grow: 1;
       }
       height: 60px;