空状态组件

assets/css/frontend/personal.scss

@@ -322,23 +322,7 @@
   min-height: 200px;
 }
 
-.data-empty {
-  margin-top: 100px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding-bottom: 100px;
-  p {
-    margin-top: 24px;
-    text-align: center;
-    font-size: 14px;
 
-    font-weight: 400;
-    color: #828c99;
-    line-height: 21px;
-  }
-}
 
 .loading {
   text-align: center;

components/empty.vue

@@ -1,40 +1,33 @@
 <template>
-<div class="el-empty__image" style="width: 200px;">
-    <svg viewBox="0 0 79 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <defs>
-            <linearGradient id="linearGradient-1-5" x1="38.8503086%" y1="0%" x2="61.1496914%" y2="100%">
-                <stop stop-color="#FCFCFD" offset="0%" />
-                <stop stop-color="#EEEFF3" offset="100%" />
-            </linearGradient>
-            <linearGradient id="linearGradient-2-5" x1="0%" y1="9.5%" x2="100%" y2="90.5%">
-                <stop stop-color="#FCFCFD" offset="0%" />
-                <stop stop-color="#E9EBEF" offset="100%" />
-            </linearGradient>
-            <rect id="path-3-5" x="0" y="0" width="17" height="36" />
-        </defs>
-        <g id="Illustrations" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-            <g id="B-type" transform="translate(-1268.000000, -535.000000)">
-                <g id="Group-2" transform="translate(1268.000000, 535.000000)">
-                    <path id="Oval-Copy-2" d="M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z" fill="#F7F8FC" />
-                    <polygon id="Rectangle-Copy-14" fill="#E5E7E9" transform="translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) " points="13 58 53 58 42 45 2 45" />
-                    <g id="Group-Copy" transform="translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)">
-                        <polygon id="Rectangle-Copy-10" fill="#E5E7E9" transform="translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) " points="2.84078316e-14 3 18 3 23 7 5 7" />
-                        <polygon id="Rectangle-Copy-11" fill="#EDEEF2" points="-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43" />
-                        <rect id="Rectangle-Copy-12" fill="url(#linearGradient-1-5)" transform="translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) " x="38" y="7" width="17" height="36" />
-                        <polygon id="Rectangle-Copy-13" fill="#F8F9FB" transform="translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) " points="24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12" />
-                    </g>
-                    <rect id="Rectangle-Copy-15" fill="url(#linearGradient-2-5)" x="13" y="45" width="40" height="36" />
-                    <g id="Rectangle-Copy-17" transform="translate(53.000000, 45.000000)">
-                        <mask id="mask-4-5" fill="white">
-                            <use xlink:href="#path-3-5" />
-                        </mask>
-                        <use id="Mask" fill="#E0E3E9" transform="translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) " xlink:href="#path-3-5" />
-                        <polygon id="Rectangle-Copy" fill="#D5D7DE" mask="url(#mask-4-5)" transform="translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) " points="7 0 24 0 20 18 -1.70530257e-13 16" />
-                    </g>
-                    <polygon id="Rectangle-Copy-18" fill="#F8F9FB" transform="translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) " points="62 45 79 45 70 58 53 58" />
-                </g>
-            </g>
-        </g>
-    </svg>
+<div class="data-empty">
+    <div class="data-empty-icon" style="width: 200px;">
+
+    </div>
+    <p>暂无内容</p>
 </div>
 </template>
+
+<style lang="scss" scoped>
+.data-empty {
+  margin-top: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 100px;
+  p {
+    // margin-top: 24px;
+    text-align: center;
+    font-size: 14px;
+
+    font-weight: 400;
+    color: #828c99;
+    line-height: 21px;
+  }
+}
+.data-empty-icon{
+  min-height: 149px;
+  background: url('~@/assets/img/frontend/personal/empty_icon.png') no-repeat center center;
+  background-size: 166px 149px;
+}
+</style>

pages/frontend/personal/index.vue

@@ -79,10 +79,9 @@
                     <CourseItem :info="item" v-for="(item) in list" :key="item.id"></CourseItem>
                 </template>
 
-                <div class="data-empty" v-if="list.length == 0 && !pageLoading">
-                    <Empty></Empty>
-                    <p>暂无内容</p>
-                </div>
+
+                 <Empty v-if="list.length == 0 && !pageLoading"></Empty>
+
 
                 <div class="loading" v-if="pageLoading">加载中</div>