<template>
  <view class="m-2">
    <u-card margin="0" :show-head="false" :show-foot="false" border-radius="25" :style="{ height: isShrink ? '96rpx' : '300rpx' }">
      <!-- <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' }">
          <view class="u-col-between p-0 u-skeleton">
            <view class="u-line-2 u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆222</view>
          </view>
        </scroll-view>
      </view>
    </u-card>
    <!-- <u-skeleton :animation="true" :loading="true" bgcolor="#fff"></u-skeleton> -->
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'Global',
  data() {
    return {};
  },
  computed: mapState('home', ['isShrink']),
};
</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;
}
</style>
