<template name="skeleton">
  <view class="sk-container">
    <view class="ctr ctr data-v-1cf27b2a data-v-1cf27b2a">
      <view class="list list data-v-1cf27b2a data-v-1cf27b2a">
        <view class="order-item order-item data-v-1cf27b2a data-v-1cf27b2a">
          <view class="top top flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
            <view class="type flex-l data-v-1cf27b2a sk-transparent sk-text-14-2857-11 sk-text"></view>
            <view class="price flex-r important-color data-v-1cf27b2a sk-transparent sk-text-14-2857-661 sk-text"></view>
          </view>
          <view class="content content flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
            <view class="left left data-v-1cf27b2a data-v-1cf27b2a">
              <view class="address-name flex-l data-v-1cf27b2a sk-transparent sk-text-15-9091-8 sk-text">安徽省蚌埠市禹会区钓鱼台街道迎河路</view>
              <view class="address flex-l data-v-1cf27b2a sk-transparent sk-text-18-1818-59 sk-text">安徽省蚌埠市禹会区</view>
              <view class="time-ctr time-ctr flex-l flex-l data-v-1cf27b2a data-v-1cf27b2a">
                <view is="components/me-icon/me-icon" class="data-v-1cf27b2a data-v-1cf27b2a">
                  <view class="flex-c icon--flex-c data-v-f0c409e8 icon--data-v-f0c409e8">
                    <text class="me-icon icon--me-icon data-v-f0c409e8 icon--data-v-f0c409e8 icon-time icon--icon-time sk-pseudo sk-pseudo-circle" style="color: var(--themeColor); font-size: 20px; line-height: 20px;"></text>
                  </view>
                </view>
                <text style="line-height: 60rpx;" class="time data-v-1cf27b2a sk-transparent sk-text-18-1818-121 sk-text">周日 25年3月23日 14:30</text>
              </view>
            </view>
            <view class="right right data-v-1cf27b2a data-v-1cf27b2a">
              <view class="icon-ctr icon-ctr flex-c flex-c data-v-1cf27b2a data-v-1cf27b2a">
                <view is="components/me-icon/me-icon" class="data-v-1cf27b2a data-v-1cf27b2a">
                  <view class="flex-c icon--flex-c data-v-f0c409e8 icon--data-v-f0c409e8">
                    <text class="me-icon icon--me-icon data-v-f0c409e8 icon--data-v-f0c409e8 icon-navigation icon--icon-navigation sk-pseudo sk-pseudo-circle" style="color: var(--descriptionColor); font-size: 30px; line-height: 30px;"></text>
                  </view>
                </view>
              </view>
              <view class="distance flex-c data-v-1cf27b2a sk-transparent sk-text-18-1818-876 sk-text">7.54公里</view>
            </view>
          </view>
          <view class="discount flex-l data-v-1cf27b2a sk-transparent sk-text-14-2857-318 sk-text">已支付定金：123.00元抵扣200元</view>
          <view class="btn-ctr btn-ctr flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
            <view is="components/me-button/me-button" class="data-v-1cf27b2a data-v-1cf27b2a">
              <view class="btn-container button--btn-container data-v-c61a7656 button--data-v-c61a7656" style="width:230px;margin-top:0;margin-bottom:0">
                <view class="data-v-c61a7656 button--data-v-c61a7656 flex-c button--flex-c btn button--btn" style="background-color:var(--auxiliaryBgColor);color:#FFFFFF">
                  <view class="icon button--icon data-v-c61a7656 button--data-v-c61a7656">
                    <view is="components/me-icon/me-icon" class="data-v-c61a7656 button--data-v-c61a7656">
                      <view class="flex-c icon--flex-c data-v-f0c409e8 icon--data-v-f0c409e8">
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view is="components/me-button/me-button" class="data-v-1cf27b2a data-v-1cf27b2a">
              <view class="btn-container button--btn-container data-v-c61a7656 button--data-v-c61a7656" style="width:83px;margin-top:0;margin-bottom:0">
                <view class="data-v-c61a7656 button--data-v-c61a7656 flex-c button--flex-c btn button--btn" style="background-color:var(--auxiliaryBgColor);color:var(--titleColor)">
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="order-item order-item data-v-1cf27b2a data-v-1cf27b2a">
          <view class="top top flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
            <view class="type flex-l data-v-1cf27b2a sk-transparent sk-text-14-2857-11 sk-text"></view>
            <view class="price flex-r important-color data-v-1cf27b2a sk-transparent sk-text-14-2857-661 sk-text"></view>
          </view>
          <view class="content content flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
            <view class="left left data-v-1cf27b2a data-v-1cf27b2a">
              <view class="address-name flex-l data-v-1cf27b2a sk-transparent sk-text-15-9091-8 sk-text">安徽省蚌埠市禹会区钓鱼台街道迎河路</view>
              <view class="address flex-l data-v-1cf27b2a sk-transparent sk-text-18-1818-59 sk-text">安徽省蚌埠市禹会区</view>
              <view class="time-ctr time-ctr flex-l flex-l data-v-1cf27b2a data-v-1cf27b2a">
                <view is="components/me-icon/me-icon" class="data-v-1cf27b2a data-v-1cf27b2a">
                  <view class="flex-c icon--flex-c data-v-f0c409e8 icon--data-v-f0c409e8">
                    <text class="me-icon icon--me-icon data-v-f0c409e8 icon--data-v-f0c409e8 icon-time icon--icon-time sk-pseudo sk-pseudo-circle" style="color: var(--themeColor); font-size: 20px; line-height: 20px;"></text>
                  </view>
                </view>
                <text style="line-height: 60rpx;" class="time data-v-1cf27b2a sk-transparent sk-text-18-1818-121 sk-text">周日 25年3月23日 14:30</text>
              </view>
            </view>
            <view class="right right data-v-1cf27b2a data-v-1cf27b2a">
              <view class="icon-ctr icon-ctr flex-c flex-c data-v-1cf27b2a data-v-1cf27b2a">
                <view is="components/me-icon/me-icon" class="data-v-1cf27b2a data-v-1cf27b2a">
                  <view class="flex-c icon--flex-c data-v-f0c409e8 icon--data-v-f0c409e8">
                    <text class="me-icon icon--me-icon data-v-f0c409e8 icon--data-v-f0c409e8 icon-navigation icon--icon-navigation sk-pseudo sk-pseudo-circle" style="color: var(--descriptionColor); font-size: 30px; line-height: 30px;"></text>
                  </view>
                </view>
              </view>
              <view class="distance flex-c data-v-1cf27b2a sk-transparent sk-text-18-1818-876 sk-text">7.54公里</view>
            </view>
          </view>
          <view class="discount flex-l data-v-1cf27b2a sk-transparent sk-text-14-2857-318 sk-text">已支付定金：123.00元抵扣200元</view>
          <view class="btn-ctr btn-ctr flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
            <view is="components/me-button/me-button" class="data-v-1cf27b2a data-v-1cf27b2a">
              <view class="btn-container button--btn-container data-v-c61a7656 button--data-v-c61a7656" style="width:230px;margin-top:0;margin-bottom:0">
                <view class="data-v-c61a7656 button--data-v-c61a7656 flex-c button--flex-c btn button--btn" style="background-color:var(--auxiliaryBgColor);color:#FFFFFF">
                  <view class="icon button--icon data-v-c61a7656 button--data-v-c61a7656">
                    <view is="components/me-icon/me-icon" class="data-v-c61a7656 button--data-v-c61a7656">
                      <view class="flex-c icon--flex-c data-v-f0c409e8 icon--data-v-f0c409e8">
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view is="components/me-button/me-button" class="data-v-1cf27b2a data-v-1cf27b2a">
              <view class="btn-container button--btn-container data-v-c61a7656 button--data-v-c61a7656" style="width:83px;margin-top:0;margin-bottom:0">
                <view class="data-v-c61a7656 button--data-v-c61a7656 flex-c button--flex-c btn button--btn" style="background-color:var(--auxiliaryBgColor);color:var(--titleColor)">
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="order-item order-item data-v-1cf27b2a data-v-1cf27b2a">
          <view class="top top flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
            <view class="type flex-l data-v-1cf27b2a sk-transparent sk-text-14-2857-955 sk-text">灶台维修</view>
            <view class="price flex-r important-color data-v-1cf27b2a sk-transparent sk-text-14-2857-608 sk-text"></view>
          </view>
          <view style="min-height: auto" class="content content flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
            <view class="left left data-v-1cf27b2a data-v-1cf27b2a">
              <view class="address-name flex-l data-v-1cf27b2a sk-transparent sk-text-15-9091-504 sk-text">安徽省蚌埠市禹会区钓鱼台街道迎河路</view>
            </view>
            <view class="right right data-v-1cf27b2a data-v-1cf27b2a">
              <view class="icon-ctr icon-ctr flex-c flex-c data-v-1cf27b2a data-v-1cf27b2a">
                <view is="components/me-icon/me-icon" class="data-v-1cf27b2a data-v-1cf27b2a">
                  <view class="flex-c icon--flex-c data-v-f0c409e8 icon--data-v-f0c409e8">
                    <text class="me-icon icon--me-icon data-v-f0c409e8 icon--data-v-f0c409e8 icon-navigation icon--icon-navigation sk-pseudo sk-pseudo-circle" style="color: var(--descriptionColor); font-size: 30px; line-height: 30px;"></text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
@import '../../components/me-icon/me-icon.css';

@font-face {
  font-family: me-icon;
  src: url('../../components/me-icon/me-icon.ttf');
}
.ctr {
  padding: 0 32rpx;
  box-sizing: border-box;
  .btn-container {
    .icon {
      margin-right: 8rpx;
    }

    .btn {
      width: 100%;
      height: 96rpx;
      border-radius: 16rpx;
      font-size: 30rpx;
      line-height: 112rpx;
      text-align: center;
      .text {
        height: 96rpx;
        line-height: 96rpx;
      }
    }
    .btn-active {
      color: #FFFFFF;
    }
    .btn-default {
      color: var(--descriptionColor);
    }

    .wireframe-btn {
      .btn {
        border: 1px solid var(--contentBgColor);
        box-sizing: border-box;
      }
    }
  }
  .me-icon {
    font-family: me-icon;
    text-decoration: none;
    text-align: center;
  }
  .me-top {
    .capsule {
      .icon-ctr {
        width: 60rpx;
        height: 60rpx;
        border: 1px solid #E9F1FE;
        border-radius: 50%;
        position: absolute;
        left: 0;
        .icon {
          width: 80%;
          height: 80%;
          border-radius: 50%;
        }
      }
      .title {
        font-weight: 500;
        font-size: 32rpx;
        color: var(--titleColor);
      }
    }
  }
  .fixed-top {
    position: fixed;
    top: 0;
    background-color: var(--pageBgColor);
    width: 686rpx;
  }
  .refresh {
    width: 108rpx;
    height: 108rpx;
    background: var(--themeColor);
    border-radius: 50%;
    position: fixed;
    bottom: 64rpx;
    right: 32rpx;
  }

  .rotate {
    animation: spin 0.5s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
  }
  .order-item {
    .discount {
      padding: 0!important;
    }
  }

  .me-top .capsule .icon-ctr {
    border: 1px solid var(--auxiliaryBgColor)!important;
  }
}
</style>
<style>
.sk-transparent {
  color: transparent !important;
}
.sk-text-14-2857-544 {
  background-image: linear-gradient(transparent 14.2857%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)85.7143%, transparent 0%) !important;
  background-size: 100% 44.8000rpx;
  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-11 {
  background-image: linear-gradient(transparent 14.2857%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)85.7143%, transparent 0%) !important;
  position: relative !important;
}
.sk-text-14-2857-661 {
  background-image: linear-gradient(transparent 14.2857%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)85.7143%, transparent 0%) !important;
  position: relative !important;
}
.sk-text-15-9091-8 {
  background: linear-gradient(transparent 15.9091%, var(--auxiliaryBgColor) 0%, var(--auxiliaryBgColor) 84.0909%, transparent 0%) !important;

  position: relative !important;
}
.sk-text-18-1818-59 {
  background-image: linear-gradient(transparent 18.1818%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)81.8182%, transparent 0%) !important;

  position: relative !important;
}
.sk-text-18-1818-876 {
  background-image: linear-gradient(transparent 18.1818%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)81.8182%, transparent 0%) !important;

  position: relative !important;
}
.sk-text-14-2857-318 {
  background-image: linear-gradient(transparent 14.2857%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)85.7143%, transparent 0%) !important;
  background-size: 100% 39.2000rpx;
  position: relative !important;
}
.sk-text-34-3750-426 {
  background-image: linear-gradient(transparent 34.3750%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)65.6250%, transparent 0%) !important;
  background-size: 100% 96.0000rpx;
  position: relative !important;
}
.sk-text-34-3750-763 {
  background-image: linear-gradient(transparent 34.3750%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)65.6250%, transparent 0%) !important;
  background-size: 100% 96.0000rpx;
  position: relative !important;
}
.sk-text-14-2857-151 {
  background-image: linear-gradient(transparent 14.2857%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)85.7143%, transparent 0%) !important;
  position: relative !important;
}
.sk-text-14-2857-853 {
  background-image: linear-gradient(transparent 14.2857%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)85.7143%, transparent 0%) !important;
  position: relative !important;
}
.sk-text-15-9091-270 {
  background-image: linear-gradient(transparent 15.9091%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)84.0909%, transparent 0%) !important;

  position: relative !important;
}
.sk-text-18-1818-826 {
  background-image: linear-gradient(transparent 18.1818%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)81.8182%, transparent 0%) !important;

  position: relative !important;
}
.sk-text-18-1818-121 {
  background-image: linear-gradient(transparent 18.1818%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)81.8182%, transparent 0%) !important;

  position: relative !important;
}
.sk-text-18-1818-983 {
  background-image: linear-gradient(transparent 18.1818%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)81.8182%, transparent 0%) !important;

  position: relative !important;
}
.sk-text-14-2857-100 {
  background-image: linear-gradient(transparent 14.2857%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)85.7143%, transparent 0%) !important;
  background-size: 100% 39.2000rpx;
  position: relative !important;
}
.sk-text-34-3750-322 {
  background-image: linear-gradient(transparent 34.3750%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)65.6250%, transparent 0%) !important;
  background-size: 100% 96.0000rpx;
  position: relative !important;
}
.sk-text-34-3750-439 {
  background-image: linear-gradient(transparent 34.3750%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)65.6250%, transparent 0%) !important;
  background-size: 100% 96.0000rpx;
  position: relative !important;
}
.sk-text-14-2857-955 {
  background-image: linear-gradient(transparent 14.2857%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)85.7143%, transparent 0%) !important;
  position: relative !important;
}
.sk-text-14-2857-608 {
  background-image: linear-gradient(transparent 14.2857%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)85.7143%, transparent 0%) !important;
  position: relative !important;
}
.sk-text-15-9091-504 {
  background-image: linear-gradient(transparent 15.9091%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)84.0909%, transparent 0%) !important;
  position: relative !important;
}
.sk-image {
  background: var(--auxiliaryBgColor) !important;
}
.sk-pseudo::before, .sk-pseudo::after {
  background: var(--auxiliaryBgColor) !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>
<script setup lang="ts">
</script>
