xs-common-plugins 1.2.4 → 1.2.6

package/src/components/home/TabLayout.vue

@@ -1,88 +1,88 @@
-<template>
-  <div class="tab-layout">
-    <div class="title">
-      <span class="iconfont icon-dianpuguanli" />
-      <span>{{ layoutItem.title }}</span>
-    </div>
-    <el-card class="box-card">
-      <el-tabs type="border-card">
-        <el-tab-pane v-for="(cellItem,pageIdx) in layoutItem.pages" :key="pageIdx">
-          <span slot="label">
-            <i class="el-icon-date" />
-            {{ cellItem.title }}
-          </span>
-          <component
-            :is="cellItem.id"
-            :layout-item="cellItem"
-            :root-data="rootData"
-            :root-meta="rootMeta"
-            :cur-data="rootData[cellItem.dataId]"
-            :cur-meta="rootMeta[cellItem.dataId]"
-          />
-        </el-tab-pane>
-      </el-tabs>
-    </el-card>
-  </div>
-</template>
-
-<script>
-import CountTo from 'vue-count-to'
-import Panel from './Panel'
-import TabLayout from './TabLayout'
-import TableList from './TableList'
-
-export default {
-  components: {
-    CountTo,
-    Panel,
-    TabLayout,
-    TableList
-  },
-  props: {
-    layoutItem: Object,
-    rootData: Object,
-    rootMeta: Object,
-    curData: Array,
-    curMeta: Object
-  },
-  methods: {
-    handleSetLineChartData(type) {
-      this.$emit('handleSetLineChartData', type)
-    }
-  }
-}
-</script>
-
-<style lang="scss" >
-.tab-layout {
-  position: relative;
-
-  .title {
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 99;
-    height: 39px;
-    display: flex;
-    align-items: center;
-    padding-left: 16px;
-
-    > span:last-child {
-      margin-left: 6px;
-      display: inline-block;
-      color: #333;
-    }
-  }
-
-  .el-tabs__nav {
-    float: right;
-  }
-  .el-card__body {
-    padding: 0;
-  }
-
-  .el-tabs--border-card {
-    border: 0;
-  }
-}
-</style>
+<template>
+  <div class="tab-layout">
+    <div class="title">
+      <span class="iconfont icon-dianpuguanli" />
+      <span>{{ layoutItem.title }}</span>
+    </div>
+    <el-card class="box-card">
+      <el-tabs type="border-card">
+        <el-tab-pane v-for="(cellItem,pageIdx) in layoutItem.pages" :key="pageIdx">
+          <span slot="label">
+            <i class="el-icon-date" />
+            {{ cellItem.title }}
+          </span>
+          <component
+            :is="cellItem.id"
+            :layout-item="cellItem"
+            :root-data="rootData"
+            :root-meta="rootMeta"
+            :cur-data="rootData[cellItem.dataId]"
+            :cur-meta="rootMeta[cellItem.dataId]"
+          />
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+import Panel from './Panel'
+import TabLayout from './TabLayout'
+import TableList from './TableList'
+
+export default {
+  components: {
+    CountTo,
+    Panel,
+    TabLayout,
+    TableList
+  },
+  props: {
+    layoutItem: Object,
+    rootData: Object,
+    rootMeta: Object,
+    curData: Array,
+    curMeta: Object
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.$emit('handleSetLineChartData', type)
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+.tab-layout {
+  position: relative;
+
+  .title {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 99;
+    height: 39px;
+    display: flex;
+    align-items: center;
+    padding-left: 16px;
+
+    > span:last-child {
+      margin-left: 6px;
+      display: inline-block;
+      color: #333;
+    }
+  }
+
+  .el-tabs__nav {
+    float: right;
+  }
+  .el-card__body {
+    padding: 0;
+  }
+
+  .el-tabs--border-card {
+    border: 0;
+  }
+}
+</style>

package/src/components/home/TableList.vue

@@ -1,158 +1,158 @@
-<template>
-  <div class="card-panel">
-    <div class="card-panel-icon-wrapper icon-people">
-      <span :class="['icon iconfont card-panel-icon',layoutItem.icon]" />
-    </div>
-
-    <div class="card-panel-description">
-      <template>
-        <el-table
-          v-if="typeof(rootMeta[layoutItem.dataId])!=='undefined'"
-          :data="curData"
-          size="mini"
-          stripe
-          border
-          style="width: 100%"
-        >
-          <el-table-column
-            v-for="(fld,idx) in curMeta.fields"
-            :key="idx"
-            :label="fld.title"
-            header-align="center"
-            align="center"
-          >
-            <template slot-scope="scope">{{ scope.row[fld.name] }}</template>
-          </el-table-column>
-        </el-table>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-import CountTo from "vue-count-to";
-
-export default {
-  components: {
-    CountTo
-  },
-  props: {
-    layoutItem: Object,
-    rootData: Object,
-    rootMeta: Object,
-    curData: Array,
-    curMeta: Object
-  },
-  methods: {}
-};
-</script>
-
-<style lang="scss" scoped>
-.panel-group {
-  margin-top: 18px;
-
-  .card-panel-col {
-    margin-bottom: 32px;
-  }
-
-  .card-panel {
-    height: 108px;
-    cursor: pointer;
-    font-size: 12px;
-    position: relative;
-    overflow: hidden;
-    color: #666;
-    background: #fff;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
-    border-color: rgba(0, 0, 0, 0.05);
-
-    &:hover {
-      .card-panel-icon-wrapper {
-        color: #fff;
-      }
-
-      .icon-people {
-        background: #40c9c6;
-      }
-
-      .icon-message {
-        background: #36a3f7;
-      }
-
-      .icon-money {
-        background: #f4516c;
-      }
-
-      .icon-shopping {
-        background: #34bfa3;
-      }
-    }
-
-    .icon-people {
-      color: #40c9c6;
-    }
-
-    .icon-message {
-      color: #36a3f7;
-    }
-
-    .icon-money {
-      color: #f4516c;
-    }
-
-    .icon-shopping {
-      color: #34bfa3;
-    }
-
-    .card-panel-icon-wrapper {
-      float: left;
-      margin: 14px 0 0 14px;
-      padding: 16px;
-      transition: all 0.38s ease-out;
-      border-radius: 6px;
-    }
-
-    .card-panel-icon {
-      float: left;
-      font-size: 48px;
-    }
-
-    .card-panel-description {
-      float: right;
-      font-weight: bold;
-      margin: 26px;
-      margin-left: 0px;
-
-      .card-panel-text {
-        line-height: 18px;
-        color: rgba(0, 0, 0, 0.45);
-        font-size: 16px;
-        margin-bottom: 12px;
-      }
-
-      .card-panel-num {
-        font-size: 20px;
-      }
-    }
-  }
-}
-
-@media (max-width: 550px) {
-  .card-panel-description {
-    display: none;
-  }
-
-  .card-panel-icon-wrapper {
-    float: none !important;
-    width: 100%;
-    height: 100%;
-    margin: 0 !important;
-
-    .svg-icon {
-      display: block;
-      margin: 14px auto !important;
-      float: none !important;
-    }
-  }
-}
-</style>
+<template>
+  <div class="card-panel">
+    <div class="card-panel-icon-wrapper icon-people">
+      <span :class="['icon iconfont card-panel-icon',layoutItem.icon]" />
+    </div>
+
+    <div class="card-panel-description">
+      <template>
+        <el-table
+          v-if="typeof(rootMeta[layoutItem.dataId])!=='undefined'"
+          :data="curData"
+          size="mini"
+          stripe
+          border
+          style="width: 100%"
+        >
+          <el-table-column
+            v-for="(fld,idx) in curMeta.fields"
+            :key="idx"
+            :label="fld.title"
+            header-align="center"
+            align="center"
+          >
+            <template slot-scope="scope">{{ scope.row[fld.name] }}</template>
+          </el-table-column>
+        </el-table>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import CountTo from "vue-count-to";
+
+export default {
+  components: {
+    CountTo
+  },
+  props: {
+    layoutItem: Object,
+    rootData: Object,
+    rootMeta: Object,
+    curData: Array,
+    curMeta: Object
+  },
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 18px;
+
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
+    border-color: rgba(0, 0, 0, 0.05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3;
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3;
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width: 550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>