第一次上传

.svn/pristine/f0/f0fec5c01ee4befbe2f785883fa8984274e82593.svn-base

@@ -0,0 +1,133 @@
+<template>
+  <view class="skeleton-shop-card-horizontal">
+    <!-- 图片骨架 -->
+    <view class="skeleton-image"></view>
+
+    <!-- 信息骨架 -->
+    <view class="skeleton-info">
+      <!-- 标题骨架 -->
+      <view class="skeleton-title"></view>
+
+      <!-- 信息行骨架 -->
+      <view class="skeleton-info-row">
+        <view class="skeleton-rating"></view>
+        <view class="skeleton-text"></view>
+        <view class="skeleton-text"></view>
+      </view>
+
+      <!-- 右侧信息骨架 -->
+      <view class="skeleton-info-row-right">
+        <view class="skeleton-text-short"></view>
+        <view class="skeleton-text-short"></view>
+      </view>
+
+      <!-- 标签骨架 -->
+      <view class="skeleton-tags">
+        <view class="skeleton-tag"></view>
+        <view class="skeleton-tag"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.skeleton-shop-card-horizontal {
+  background: #FFFFFF;
+  border: 1px solid #E0E0E0;
+  border-radius: 8rpx;
+  padding: 12rpx;
+  margin-bottom: 10rpx;
+  display: flex;
+  gap: 12rpx;
+}
+
+.skeleton-image {
+  width: 100px;
+  height: 100px;
+  border-radius: 6rpx;
+  flex-shrink: 0;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s ease-in-out infinite;
+}
+
+.skeleton-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6rpx;
+}
+
+.skeleton-title {
+  height: 32rpx;
+  width: 180rpx;
+  border-radius: 4rpx;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s ease-in-out infinite;
+}
+
+.skeleton-info-row {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.skeleton-rating {
+  width: 80rpx;
+  height: 28rpx;
+  border-radius: 4rpx;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s ease-in-out infinite;
+}
+
+.skeleton-text {
+  width: 80rpx;
+  height: 24rpx;
+  border-radius: 4rpx;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s ease-in-out infinite;
+}
+
+.skeleton-info-row-right {
+  display: flex;
+  gap: 12rpx;
+}
+
+.skeleton-text-short {
+  width: 100rpx;
+  height: 24rpx;
+  border-radius: 4rpx;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s ease-in-out infinite;
+}
+
+.skeleton-tags {
+  display: flex;
+  gap: 8rpx;
+}
+
+.skeleton-tag {
+  width: 100rpx;
+  height: 32rpx;
+  border-radius: 4rpx;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s ease-in-out infinite;
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+</style>