<template name="skeleton">
  <view class="sk-container">
    <view class="container">
      <view class="user-section">
        <image class="bg sk-image" />
        <view class="user-info-box">
          <view class="user-info" data-event-opts="tap,loginPopupFn">
            <view class="portrait-box">
              <image class="portrait sk-image" />
            </view>
            <view class="info-box">
              <view class="username">
                <view class="sk-transparent sk-text-14-2857-897 sk-text">176</view>
                <view class="middle sk-transparent sk-text-14-2857-993 sk-text">****</view>
                <view class="sk-transparent sk-text-14-2857-413 sk-text">8468</view>
              </view>
            </view>
          </view>
          <view class="user-config" data-event-opts="tap,navTo,/subPackages/common/set/set">
            <image class="config sk-image" />
          </view>
        </view>
      </view>
      <view class="cover-container">
        <view class="main-list">
          <view class="card-box card-box-top">
            <view class="card-title" style="border: none;">
              <text class="sk-transparent sk-text-33-3333-534 sk-text">我的订单</text>
              <view class="card-info sk-transparent" />
            </view>
            <view class="card-main">
              <view class="order-section">
                <view class="order-item">
                  <image class="paid-order sk-image" />
                  <text class="sk-transparent sk-text-14-2857-804 sk-text">待付款</text>
                </view>
                <view class="order-item">
                  <image class="goods-order sk-image" />
                  <text class="sk-transparent sk-text-14-2857-866 sk-text">待收货</text>
                </view>
                <view class="order-item">
                  <image class="completed-order sk-image" />
                  <text class="sk-transparent sk-text-14-2857-785 sk-text">已完成</text>
                </view>
                <view class="order-item">
                  <image class="service-order sk-image" />
                  <text class="sk-transparent sk-text-14-2857-290 sk-text">退款/售后</text>
                </view>
              </view>
            </view>
          </view>
          <view class="card-box">
            <view class="card-title" style="border: none;">
              <text class="sk-transparent sk-text-33-3333-510 sk-text">综合应用服务</text>
            </view>
            <view class="card-main">
              <view class="order-section">
                <view class="order-item">
                  <image class="paid-order sk-image" />
                  <text class="sk-transparent sk-text-14-2857-282 sk-text">关注微信</text>
                </view>
                <view class="order-item">
                  <image class="goods-order sk-image" />
                  <text class="sk-transparent sk-text-14-2857-405 sk-text">在线客服</text>
                </view>
                <view class="order-item">
                  <image class="completed-order sk-image" />
                  <text class="sk-transparent sk-text-14-2857-287 sk-text">我的地址</text>
                </view>
                <view class="order-item">
                  <text />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.sk-transparent {
  color: transparent !important;
}
.sk-text-14-2857-897 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 47.6rpx;
  position: relative !important;
}
.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}
.sk-text-14-2857-993 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 47.6rpx;
  position: relative !important;
}
.sk-text-14-2857-413 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 47.6rpx;
  position: relative !important;
}
.sk-text-33-3333-534 {
  background-image: linear-gradient(
    transparent 33.3333%,
    #eeeeee 0%,
    #eeeeee 66.6667%,
    transparent 0%
  ) !important;
  background-size: 100% 84rpx;
  position: relative !important;
}
.sk-text-14-2857-804 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: relative !important;
}
.sk-text-14-2857-866 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: relative !important;
}
.sk-text-14-2857-785 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: relative !important;
}
.sk-text-14-2857-290 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: relative !important;
}
.sk-text-33-3333-510 {
  background-image: linear-gradient(
    transparent 33.3333%,
    #eeeeee 0%,
    #eeeeee 66.6667%,
    transparent 0%
  ) !important;
  background-size: 100% 84rpx;
  position: relative !important;
}
.sk-text-14-2857-282 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: relative !important;
}
.sk-text-14-2857-405 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: relative !important;
}
.sk-text-14-2857-287 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: relative !important;
}
.sk-button {
  color: #efefef !important;
  background: #efefef !important;
  border: none !important;
  box-shadow: none !important;
}
.sk-image {
  background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
  background: #efefef !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
  border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
  border-radius: 50% !important;
}
.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
</style>
