tall-mui-3-project/src/components/Globals/Globals.vue

<template>
  <view class="m-2">
    <u-card
      class="u-skeleton"
      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="p-0 u-col-between u-skeleton">
            <view class="u-line-2 u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="mt-2 u-line-2 u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="mt-2 u-line-2 u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="mt-2 u-line-2 u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="mt-2 u-line-2 u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="mt-2 u-line-2 u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="mt-2 u-line-2 u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="mt-2 u-line-2 u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="mt-2 u-line-2 u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="mt-2 u-line-2 u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="mt-2 u-line-2 u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view>
            <view class="mt-2 u-line-2 u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆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';
export default {
  name: 'Global',
  data() {
    return { loading: true };
  },

  mounted() {
    setTimeout(() => (this.loading = false), 5000);
  },
  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>