feat(cli/site): 修改手机样式自适应高度

affects: @varlet/cli, @varlet/ui
varletjs · Apr 17, 2021 · 37029e2 · 37029e2
1 parent 6d711c7
commit 37029e2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 29 deletions.
diff --git a/packages/varlet-cli/site/pc/App.vue b/packages/varlet-cli/site/pc/App.vue
@@ -51,14 +51,11 @@
       <div class="varlet-site-code" :ref="code">
         <router-view />
       </div>
-      <div class="varlet-site-mobile">
+      <div class="varlet-site-mobile var-elevation--3">
         <div class="varlet-site-empty"></div>
         <div class="varlet-site-mobile-content">
           <iframe :src="`./mobile.html#/${componentName}?language=${language}&platform=pc&path=${path}`"></iframe>
         </div>
-        <div class="varlet-site-mobile-image">
-          <img src="./assets/images/mobile.png" />
-        </div>
       </div>
     </div>
   </div>
@@ -314,19 +311,18 @@ iframe {
 
   &-site {
     &-mobile {
-      flex: 0 0 432px;
-      transform: scale(0.88) translateZ(0);
+      flex: 0 0 325px;
       position: relative;
-      height: 863px;
+      height: calc(100vh - 100px);
       align-self: center;
+      margin-left: 30px;
+      margin-right: 38px;
+      overflow: hidden;
+      border-radius: 8px;
 
       &-content {
-        height: 780px;
-        position: absolute;
-        z-index: -2;
-        top: 57px;
-        width: calc(100% - 57px);
-        margin-left: 28px;
+        width: 100%;
+        height: 100%;
       }
 
       &-image {
@@ -342,18 +338,6 @@ iframe {
       }
     }
 
-    @media screen and (max-width: 1280px) {
-      &-mobile {
-        transform: scale(0.66) translateZ(0);
-      }
-    }
-
-    @media screen and (min-width: 1281px) and (max-width: 1600px) {
-      &-mobile {
-        transform: scale(0.7) translateZ(0);
-      }
-    }
-
     &-empty {
       height: 34px;
       width: calc(100% - 40px);

diff --git a/packages/varlet-ui/src/styles/example/index.vue b/packages/varlet-ui/src/styles/example/index.vue
@@ -28,16 +28,16 @@ export default {
 .list {
   display: flex;
   flex-wrap: wrap;
-  padding: 6px;
+  padding: 2vw;
 
   &__item {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100px;
-    height: 100px;
+    width: 25vw;
+    height: 25vw;
     color: #888;
-    margin: 6px;
+    margin: 2vw;
   }
 }
 </style>