#

whycq

2022-12-12 a61831cae4b9f6d1b20ac16a44a28d995bf9f057

 pages/user/user.vue

@@ -1,180 +1,52 @@
<template>
   <view class="">
      <scroll-view class="scroll-Y">
      <button @click="open">点击</button>
      <y-popup ref="yPopup">
         <!-- <view style="background-color: aqua;width: 100rpx;height: 100rpx;"></view>
         <input type="text" style="background-color: darkgoldenrod;"> -->
         <view class="vv">100</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">66</view>
         <view class="vv">66</view>
         <view class="vv">66</view>
         <view class="vv">66</view>
			
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
			
         <view class="vv">100</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">66</view>
         <view class="vv">66</view>
         <view class="vv">66</view>
         <view class="vv">66</view>
			
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">5</view>
         <view class="vv">100</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">66</view>
         <view class="vv">66</view>
         <view class="vv">66</view>
         <view class="vv">66</view>
			
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">1</view>
         <view class="vv">5</view>
      </y-popup>
      <view class="vv">100</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">66</view>
      <view class="vv">66</view>
      <view class="vv">66</view>
      <view class="vv">66</view>
		
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
		
      <view class="vv">100</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">66</view>
      <view class="vv">66</view>
      <view class="vv">66</view>
      <view class="vv">66</view>
		
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">5</view>
      <view class="vv">100</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">66</view>
      <view class="vv">66</view>
      <view class="vv">66</view>
      <view class="vv">66</view>
		
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">1</view>
      <view class="vv">5</view>
      </scroll-view>
   <view>
      <view class="user">
         <!-- 头像 -->
         <view class="user-avatar">
            <img src="../../static/image/头像.jpg" alt="">
            <!-- <image src="" mode="aspectFit"></image> -->
         </view>
         <!-- 信息 -->
         <view class="user-info">
            <view class="user-name">陈鹏
            </view>
				
         </view>
         <!-- 更多 -->
         <view></view>
      </view>
   </view>
</template>

<script>
   export default {
      data () {
         return {
            scrollY:true
         }
      },
      methods: {
         open() {
            this.$refs.yPopup.open('center')
         }
      }
	
   }
</script>

<style>
   .vv {
      width: 100%;height: 100rpx;
		
   }
   .bb {
      position: fixed;
      top: 0;
      left: 0;
   .user {
      width: 100%;
      height: 100%;
      overflow: hidden;
      height: 200rpx;
      background-color: #f8f8f8;
      display: grid;
      grid-template-columns: 1fr 4fr 1fr;
   }
   .user-avatar {
      height: 200rpx;
      width: 200rpx;
      /* background-color: aquamarine; */
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .user-avatar img {
      height: 100rpx;
      border-radius: 20rpx;
   }
   .user-info {
      height: 200rpx;
      display: grid;
      grid-template-rows: 2fr 2fr;
      align-items: end;
		
      /* background-color: aqua; */
   }
</style>