fix: modify some style

varletjs · Feb 6, 2021 · ee7be71 · ee7be71
1 parent e282a91
commit ee7be71
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 25 deletions.
diff --git a/packages/varlet-cli/site/mobile/App.vue b/packages/varlet-cli/site/mobile/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="position: relative">
     <header>{{ componentName }}</header>
     <div class="router-view__block">
       <router-view />
@@ -41,18 +41,20 @@ body {
 }
 
 header {
-  position: relative;
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: center;
   background-color: #fff;
   font-weight: 500;
   font-size: 18px;
-  margin-top: 52px;
+  height: 80px;
+  position: fixed;
+  z-index: 1;
+  width: 100%;
 }
 
 .router-view__block {
-  padding: 0 15px 30px;
+  padding: 80px 15px 30px;
 }
 
 * {

diff --git a/packages/varlet-cli/site/pc/App.vue b/packages/varlet-cli/site/pc/App.vue
@@ -78,7 +78,7 @@ export default defineComponent({
       const componentName = pathArr[pathArr.length - 1]
       this.$router.push(`/${this.language}/${componentName}`)
     },
-    changeRoute(item) {
+    changeRoute(item: any) {
       this.$router.push(`/${this.language}/${item.doc}`)
     },
   },

diff --git a/packages/varlet-ui/src/pull-refresh/example/index.vue b/packages/varlet-ui/src/pull-refresh/example/index.vue
@@ -1,9 +1,9 @@
 <template>
-	<var-pull-refresh @refresh="refresh" v-model="isRefresh" success-duration="2000">
-		<ul class="pull-refresh__example">
-			<li v-for="(item, index) in data" :key="index">{{ item + ' ' + (index + 1) }}</li>
-		</ul>
-	</var-pull-refresh>
+  <var-pull-refresh @refresh="refresh" v-model="isRefresh" success-duration="2000">
+    <ul class="pull-refresh__example">
+      <li v-for="(item, index) in data" :key="index">{{ item + ' ' + (index + 1) }}</li>
+    </ul>
+  </var-pull-refresh>
 </template>
 
 <script>
@@ -40,20 +40,24 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
+.var-pull-refresh {
+  margin-top: 18px;
+}
+
 .pull-refresh__example {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-
-	li {
-		min-height: 40px;
-		line-height: 40px;
-		padding: 0 16px;
-		border-bottom: 1px solid #ccc;
-
-		&:first-child {
-			border-top: 1px solid #ccc;
-		}
-	}
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    min-height: 40px;
+    line-height: 40px;
+    padding: 0 16px;
+    border-bottom: 1px solid #ccc;
+
+    &:first-child {
+      border-top: 1px solid #ccc;
+    }
+  }
 }
 </style>