首页样式

src/views/home/components/ModelBox.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class='model-box' :style='{width: width + "px", height: height + "px"}'>
+    <div>
+      <img :src="icon" alt="" width='24' height='24' class='icon'>
+      <span class='model-title'>{{title}}</span>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+<script>
+import img1 from './../assets/img/1-1.png';
+import img2 from './../assets/img/1-2.png';
+import img3 from './../assets/img/1-3.png';
+import img4 from './../assets/img/2-1.png';
+import img5 from './../assets/img/2-2.png';
+import img6 from './../assets/img/3-1.png';
+export default {
+  name: 'ModelBox',
+  props: {
+    name: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      title: '',
+      icon:'',
+      width: 618,
+      height: 322
+    }
+  },
+  mounted () {
+    this.getTitle()
+  },
+  methods: {
+    getTitle () {
+      switch (this.name) {
+        case '1-1':
+          this.title = '工段损耗汇总'
+          this.icon = img1
+          break;
+        case '1-2':
+          this.title = '设备报警'
+          this.icon = img2
+          break;
+        case '1-3':
+          this.title = '托数统计'
+          this.icon = img3
+          break;
+        case '2-1':
+          this.title = '工段投入和产出'
+          this.icon = img4
+          break;
+        case '3-1':
+          this.title = '产线加工成品率'
+          this.icon = img6
+          break;
+        default:
+          this.title = '产线投入和产出'
+          this.icon = img5
+          this.width = 1253
+          this.height = 660
+      }
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+.model-box {
+  background: #FFFFFF;
+  border-radius: 8px;
+  border: 1px solid #FFFFFF;
+  padding: 14px 16px;
+  .icon {
+    vertical-align: bottom;
+    margin-right: 5px;
+  }
+  .model-title{
+    font-size: 20px;
+    color: #000000;
+    line-height: 24px;
+  }
+}
+</style>