🚀 demo 个人中心

src/views/system/user/account/center/Application.vue

@@ -6,8 +6,11 @@
           <ListItem>
             <Card :hoverable="true" :class="`${prefixCls}__card`">
               <div :class="`${prefixCls}__card-title`">
-                <Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
-                {{ item.title }}
+                <Icon v-if="item.icon"
+                      class="icon"
+                      :icon="item.icon"
+                      :color="item.color"
+                />{{ item.title }}
               </div>
               <div :class="`${prefixCls}__card-num`">
                 活跃用户：<span>{{ item.active }}</span> 万
@@ -15,9 +18,8 @@
               <div :class="`${prefixCls}__card-num`">
                 新增用户：<span>{{ item.new }}</span>
               </div>
-              <Icon
+              <Icon v-if="item.download"
                     :class="`${prefixCls}__card-download`"
-                v-if="item.download"
                     :icon="item.download"
               />
             </Card>

src/views/system/user/account/center/Project.vue

@@ -22,7 +22,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { List, Card, Row, Col } from 'ant-design-vue';
-  import demoImg from '/@/assets/images/demo.png';
+  import demoImg from '/@/assets/images/illustration.svg';
   import { projectList } from './data';
 
   export default defineComponent({

src/views/system/user/account/center/index.vue

@@ -5,7 +5,7 @@
         <a-row>
           <a-col :span="8">
             <div :class="`${prefixCls}-top__avatar`">
-              <img width="70" :src="avatar" />
+              <img width="70" :src="avatar">
               <span>Vben</span>
               <div>海纳百川，有容乃大</div>
             </div>
@@ -14,7 +14,7 @@
             <div :class="`${prefixCls}-top__detail`">
               <template v-for="detail in details" :key="detail.title">
                 <p>
-                  <Icon :icon="detail.icon" />
+                  <Icon :icon="detail.icon"/>
                   {{ detail.title }}
                 </p>
               </template>
@@ -34,7 +34,7 @@
       <a-col :span="8" :class="`${prefixCls}-col`">
         <CollapseContainer :class="`${prefixCls}-top__team`" title="团队" :canExpan="false">
           <div v-for="(team, index) in teams" :key="index" :class="`${prefixCls}-top__team-item`">
-            <Icon :icon="team.icon" :color="team.color" />
+            <Icon :icon="team.icon" :color="team.color"/>
             <span>{{ team.title }}</span>
           </div>
         </CollapseContainer>
@@ -44,7 +44,7 @@
       <Tabs>
         <template v-for="item in achieveList" :key="item.key">
           <TabPane :tab="item.name">
-            <component :is="item.component" />
+            <component :is="item.component"/>
           </TabPane>
         </template>
       </Tabs>