<template>
  <view class="m-2">
    <u-card :show-foot="false" :show-head="false" :style="{ height: isShrink ? '96rpx' : '300rpx' }" border-radius="25" margin="0">
      <!-- <u-card margin="0" :show-head="false" :show-foot="false" border-radius="25" style="height: 300rpx"> -->
      <view slot="body">
        <scroll-view :scrollY="true" :style="{ height: isShrink ? '40rpx' : '240rpx' }">
          <skeleton :banner="false" :loading="loading" :row="4" animate class="u-line-2 mt-2 skeleton"></skeleton>
          <view class="u-col-between p-0" v-if="!loading">
            <view class="u-line-2">瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆222</view>
          </view>
        </scroll-view>
      </view>
    </u-card>

    <!-- 骨架屏 -->
    <u-skeleton :animation="true" :loading="loading" bg-color="#fff"></u-skeleton>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import Skeleton from '@/components/Skeleton/Skeleton';

export default {
  name: 'Global',
  components: { Skeleton },
  data() {
    return { loading: true };
  },
  computed: mapState('home', ['isShrink']),
  mounted() {
    setTimeout(() => {
      this.loading = false;
      console.log('this.loading: ', this.loading);
    }, 5000);
  },
};
</script>

<style scoped lang="scss">
.u-card-wrap {
  background-color: $u-bg-color;
  padding: 1px;
}

.u-body-item {
  font-size: 32rpx;
  color: #333;
  padding: 20rpx 10rpx;
}

.u-body-item image {
  width: 120rpx;
  flex: 0 0 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-left: 12rpx;
}

.skeleton:first-child {
  margin-top: 0 !important;
}
</style>
