up

src/components/LxHeader/Item.vue

@@ -0,0 +1,53 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      if (icon.includes('el-icon')) {
+        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
+      }
+      else if(icon.includes("viewicon")){
+          let _icon=icon.split("/")[1];
+          vnodes.push(<Icon type={_icon} class='sub-el-icon' size="18" />)
+      }
+      else if(icon.includes("iconfont")){
+          let _icon=icon.split("/")[1]+" iconfont";
+          vnodes.push(<Icon custom={_icon} class='sub-el-icon' size="18" />)
+      }
+      else {
+        vnodes.push(<svg-icon icon-class={icon}/>)
+      }
+    }else {
+        var _icon="el-icon-menu";
+        vnodes.push(<i class={[_icon, 'sub-el-icon']} />)
+      }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
+
+<style scoped>
+.sub-el-icon {
+  color: currentColor;
+  width: 1em;
+  height: 1em;
+}
+</style>

src/components/LxHeader/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="v-header">
     <div class="v-left-text">
-      <Icon size="20" :type="icon" />
+      <item :icon="iconImg" />
-      <span>{{text}}</span>
+      <span style="margin-left: 3px;">{{title}}</span>
     </div>
     <div class="content">
       <slot name="content"></slot>
@@ -16,7 +16,11 @@
   </div>
 </template>
 <script>
+  import Item from './Item'
   export default {
+    components: {
+      Item
+    },
     props: {
       icon: {
         type: String,
@@ -26,6 +30,17 @@
         type: String,
         default: "未定义名称"
       }
+    },
+    computed: {
+      title() {
+        return this.$route.meta.title;
+      },
+      iconImg() {
+        return this.$route.meta.icon;
+
+      }
+
+
     }
   };
 </script>

src/views/dashboard/index.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="app-container">
-    <div>当前登录人：{{user.name}}</div>
+    <div style="display: flex;justify-content: space-between;align-items: center;">
+      <span>当前登录人：{{user.name}}
+      </span>
+
+      <el-button type="primary">统计设置</el-button>
+    </div>
 
 
     <el-card class="box-card" style="margin: 20px 0;">
@@ -12,15 +17,18 @@
       <router-link :to="`/statisticalReport/budgetProgress`">
         <div class="progress-card">
           <div class="progress-card-item">
-            <div class="progress-card-item__num">{{moneyFormat(statistic.progress ? statistic.progress.money_total_1 : 0)}}</div>
+            <div class="progress-card-item__num">
+              {{moneyFormat(statistic.progress ? statistic.progress.money_total_1 : 0)}}</div>
             <div class="progress-card-item__label">年初预算合计金额</div>
           </div>
           <div class="progress-card-item">
-            <div class="progress-card-item__num">{{moneyFormat(statistic.progress ? statistic.progress.money_total_2 : 0)}}</div>
+            <div class="progress-card-item__num">
+              {{moneyFormat(statistic.progress ? statistic.progress.money_total_2 : 0)}}</div>
             <div class="progress-card-item__label">调整后预算合计金额</div>
           </div>
           <div class="progress-card-item">
-            <div class="progress-card-item__num">{{moneyFormat(statistic.progress? statistic.progress.use_money_total : 0)}}</div>
+            <div class="progress-card-item__num">
+              {{moneyFormat(statistic.progress? statistic.progress.use_money_total : 0)}}</div>
             <div class="progress-card-item__label">已支付金额</div>
           </div>
           <div class="progress-card-item">
@@ -208,7 +216,7 @@
               return ( < div >
                 <el-progress percentage = {
                   Number(per)
-                } > < /el-progress> </div >
+                }> </el-progress> </div >
               )
             }
           },
@@ -270,7 +278,7 @@
               return ( < div >
                 <el-progress percentage = {
                   Number(per)
-                } > < /el-progress> </div >
+                }> </el-progress> </div >
               )
             }
           },
@@ -480,7 +488,6 @@
   }
 </style>
 <style lang="scss" scoped>
-
   .ivu-btn {
     margin-right: 10px;
   }