Merge branch 'master' of http://git.huaml.com/zhh/front-end

hdApp/src/pagesPurchase/ghsProduct.vue

@@ -2,7 +2,7 @@
 <template>
 	<view class="billing_box_bg">
 <!--		<app-tabs :tabs="tabs" :currentTab="tabIndex" @change="change" itemWidth="33.3%" />-->
-    <view class="c_header">
+    <view class="c_header" :class="myClass">
       <view class="header_inside">
         <image :src="pageInfo.avatar"></image>
         <view class="shop_info">
@@ -30,7 +30,7 @@
 				<view style="height: 240rpx"></view>
 				<view class="switchover-unit" @tap="isSmallCount = !isSmallCount">{{isSmallCount?'支':'扎'}}</view>
 			</scroll-view>
-			<scroll-view scroll-y class="right-box" :scroll-into-view="scrollClassId">
+			<scroll-view scroll-y class="right-box" :scroll-into-view="scrollClassId" @scroll="rightScroll">
 				<!--内容部分 start -->
 				<block v-if="!$util.isEmpty(filterProductInfo)">
 					<view
@@ -158,7 +158,8 @@ export default {
 			showSubmitModel: false,
 			notOpenShop:false,
 			hdShopAdminId:0,
-      pageInfo: {}
+      pageInfo: {},
+      myClass: ''
 		};
 	},
 	computed: {
@@ -209,6 +210,13 @@ export default {
 				}).catch(err => {})
 			}
 		},
+    rightScroll(e) {
+      if(e.detail.scrollTop > 20) {
+        this.myClass = 'fadeOut'
+      } else {
+        this.myClass = 'fadeIn'
+      }
+    },
 		//自定义数量
 		customNum(info) {
 			this.isModel = true;
@@ -313,7 +321,7 @@ export default {
 	display: flex;
 	flex-direction: column;
   .c_header{
-    height: 240upx;
+    // height: 240upx;
     width: 100vw;
     padding: 0 15upx;
     box-sizing: border-box;
@@ -354,7 +362,7 @@ export default {
         }
       }
       &>.iconfont{
-        font-size: 40upx;
+        font-size: 60upx;
         position: absolute;
         right: 30upx;
         top: 50%;
@@ -466,5 +474,46 @@ export default {
 	.PxClass-box{
 		width: 100%;
 	}
+  .fadeOut{
+    height: 0;
+    overflow: hidden;
+    animation-name: fadeOutFrames;
+    animation-duration:.9s;
+  }
+  .fadeIn{
+    height: 240upx;
+    overflow: hidden;
+    animation-name: fadeInFrames;
+    animation-duration:.9s;
+  }
+  /*关键帧*/
+  @keyframes fadeOutFrames {
+    0%{
+        opacity: 1;
+        transform:translateY(0);
+        height: 240rpx;
+    }
+    100% {
+        opacity: 0;
+        transform:translateY(-240upx);
+        height: 0rpx;
+        overflow: hidden;
+    }
+  }
+  /*关键帧*/
+@keyframes fadeInFrames {
+    0%{
+        opacity: 0;
+        transform:translateY(0);
+        height: 0;
+    }
+    100% {
+        opacity: 1;
+        // transform:translateY(240upx);
+        height: 240rpx;
+    }
+  }
 }
+
+
 </style>