首页样式

src/components/common/Tool.vue

@@ -77,16 +77,18 @@ export default class Tool extends Vue {
 }
 
 .title {
-  margin: 4% auto 5% 0%;
-  font-size: 18px;
-  color: #FFFFFF;
-  border-width: 0px;
-  white-space: nowrap;
-  text-transform: none;
-  width: 100%;
-  height: 100%;
-  text-align: center;
+
+    margin: 1% auto 1% 0;
+    font-size: 18px;
+    color: #fff;
+    border-width: 0;
+    white-space: nowrap;
+    text-transform: none;
+    width: 100%;
+    height: 35%;
+    text-align: center;
 }
+
 .icon{
     width: 32px;
     height: 32px;

src/views/main/Main.vue

@@ -8,12 +8,9 @@
 -->
 
 <template>
-  <div class="d-page d-flex flex-column" style="background-color: linear-gradient(to bottom, #0B54E0, #ffffff); padding-bottom:20px;">
-
-      <scroller-view v-calculate-height pulldown="true" pullup="true" :height="10000"  class="product"  >
-
-            <div class="rarle">
-      <tools-bar :title="tatleName" style="width: 100%; height: calc(25vh)">
+  <div class="d-page d-flex flex-column" style="background-color: linear-gradient(to bottom, #0B54E0 50px , #ffffff); padding-bottom:20px;">
+    <div class="rarle">
+      <tools-bar :title="tatleName" style="width: 100%; height: calc(16vh)">
       </tools-bar>
     </div>
     <div class="roolsolt">
@@ -25,19 +22,11 @@
           background: #ecf9ff;
           width: 90%;
           height: 34px;
-          margin: 2% auto;
-          border-radius: 10px;
          
-      
-        
+          border-radius: 10px;
+          position: absolute;
+          top: 14vh;
           left: 5%;
-            position: absolute;
-  top: 22vh;
-
-
-  display: flex;
-
-
         "
       >
         <van-col
@@ -349,6 +338,7 @@
 
 
       </div>
+      <scroller-view v-calculate-height pulldown="true" pullup="true" :height="10000"  class="product"  >
         <div
           v-for="(item, index) in productList"
           :key="index"
@@ -368,6 +358,7 @@
 
       </scroller-view>
     </div>
+
 </template>
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
@@ -447,11 +438,17 @@ export default class Main extends Vue {
 		};
 
 
-    
-      created(){
+//  created(){
   
-      document.addEventListener('touchmove', event => {    event.preventDefault()  }, { passive: false })
+//       document.addEventListener('touchmove', event => {    event.preventDefault()  }, { passive: false });
+//   }
+
+ activated(){
+
+    document.addEventListener('touchmove', event => {    event.preventDefault()  }, { passive: false });
   }
+     
+
 
 
   //测试
@@ -766,20 +763,7 @@ export default class Main extends Vue {
   }
 
    onClick(index:any) {
-    if(index==0){
-      this.tabsList[index].status=this.tabsList[index].status === 1?0:1;
-      this.tabsList[1].status=0;
-      this.tabsList[2].status=0;
-    }else if(index==1) {
-      this.tabsList[index].status=this.tabsList[index].status === 1?0:1;
-      this.tabsList[0].status=0;
-      this.tabsList[2].status=0;
-    }else {
-      this.tabsList[index].status=this.tabsList[index].status === 1?0:1;
-      this.tabsList[1].status=0;
-      this.tabsList[0].status=0;
-    }
-
+     this.tabsList[index].status=this.tabsList[index].status === 1?0:1
      // Toast(this.tabsList[index].status===1?"升序":"降序");
     }
 }
@@ -806,9 +790,15 @@ export default class Main extends Vue {
 }
 .prudect {
   line-height: 100%;
-  padding-top: 20px;
-  padding-bottom: 10px;
+  padding-top: 16px;
 }
+.van-row--align-center {
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    height: 33px;
+}
+