首页骨架 css样式

src/components/skeletonBox/skeletonBox.vue

@@ -0,0 +1,63 @@
+<template>
+    <div>
+        <el-skeleton style="width: 240px" animated="true">
+            <template #template>
+                <el-skeleton-item variant="image" style="width: 240px; height: 240px" />
+                <div style="padding: 14px">
+                    <el-skeleton-item variant="p" style="width: 50%" />
+                    <div style="
+            display: flex;
+            align-items: center;
+            justify-items: space-between;
+          ">
+                        <el-skeleton-item variant="text" style="margin-right: 16px" />
+                        <el-skeleton-item variant="text" style="width: 30%" />
+                    </div>
+                </div>
+            </template>
+        </el-skeleton>
+    </div>
+</template>
+  
+<script setup>
+
+</script>
+<style scoped>
+img {
+    object-fit: contain;
+}
+
+.dis-f {
+    display: flex;
+}
+
+.jus-x {
+    justify-content: center;
+}
+
+.al-item {
+    align-items: center;
+}
+
+.pos-r {
+    position: relative;
+}
+
+.body-maxWidth {
+    width: 1200px;
+    min-width: 1200px;
+}
+
+.s-w-100 {
+    width: 100%;
+}
+
+.jus-bet {
+    justify-content: space-between;
+}
+
+.mg-t-35 {
+    margin-top: 35px;
+}
+</style>
+