Unit页面基本算完成了,虚线用canvas画的

.babelrc

@@ -8,5 +8,15 @@
     }],
     "stage-2"
   ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"]
+  "plugins": [
+    "transform-vue-jsx",
+    "transform-runtime",
+    [
+      "import",
+      {
+        "libraryName": "iview",
+        "libraryDirectory": "src/components"
+      }
+    ]
+  ]
 }

package.json

@@ -10,13 +10,15 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "iview": "^2.14.2",
     "vue": "^2.5.2"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
     "babel-core": "^6.22.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-loader": "^7.1.1",
+    "babel-plugin-import": "^1.7.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",

src/App.vue

@@ -1,22 +1,20 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
-    <HelloWorld  @click="aa"/>
+    <!-- <img src="./assets/logo.png">
+    <HelloWorld/> -->
+    <Unit/>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld'
+// import HelloWorld from './components/HelloWorld'
+import Unit from "./components/Unit";
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
-  },
-  methods: {
-    aa() {
-      alert("aaa");
-    }
+    // HelloWorld,
+    Unit
   }
 }
 </script>

src/assets/css/global.scss

@@ -1,9 +1,8 @@
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-
-}
+// #app {
+//   font-family: 'Avenir', Helvetica, Arial, sans-serif;
+//   -webkit-font-smoothing: antialiased;
+//   -moz-osx-font-smoothing: grayscale;
+//   text-align: center;
+//   color: #2c3e50;
+//   margin-top: 60px;
+// }

src/assets/css/unit.scss

@@ -0,0 +1,155 @@
+body{
+	background-color: #d8eee7;
+}
+.unit-page{
+	max-width: 800px;
+	max-height: 600px;
+	padding-top: 50px;
+	margin: 0 auto;
+	position: relative;
+}
+.tab-box{
+    width: 62.5%;
+    margin: 0 auto;
+}
+.tab-btn{
+	text-align: center;
+	height: 40px;
+	line-height: 40px;
+	font-size: 16px;
+	font-weight: 700;
+	background-color: #fff;
+	border: 1px solid #c4cfce;
+	border-radius: 5px;
+	box-shadow: -2px 2px 2px #c4cfce;
+}
+.tab-btn:hover{
+	cursor: pointer;
+}
+.tab-btn.active{
+	color: #fff;
+	background-color: #5f7c8e;
+}
+.main-box{
+	margin-top: 56px;
+}
+.right-img-box{
+	width: 327px;
+	height: 413px;
+	float: right;
+  position: relative;
+	background-image: url("../assets/unitRightBox.png");
+}
+.left-tag{
+	width: 92px;
+	height: 28px;
+	line-height: 28px;
+	padding-left: 10px;
+	color: #fff;
+	font-size: 14px;
+	font-weight: 700;
+	background-image: url("../assets/unitLeftTag.png");
+}
+.bunker-box{
+	width: 60px;
+	text-align: center;
+	font-size: 14px;
+	// height: 100px;
+	// background-color: red;
+}
+.color-box-out{
+	width: 40px;
+	height: 67px;
+	position: relative;
+	margin: 0 auto;;
+	overflow: hidden;
+}
+.color-box-out .color-box{
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: -1;
+	background-color: #fff;
+}
+.color-box-out .color-box.flex{
+	flex-direction: row-reverse;
+}
+.color-box-out .color-box .color{
+	width: 100%;
+}
+.color-box-out .color-box .color-0{
+	height: 20%;
+}
+.color-box-out .color-box .color-1{
+	background-color: #ef9520;
+	height: 40%;
+}
+.color-box-out .color-box .color-2{
+	background-color: #0ff;
+	height: 40%;
+}
+.middle{
+	margin-bottom: 5px;
+}
+.bunker-box.coal-type{
+	line-height: 1.6;
+}
+.lower{
+	// padding-bottom: 40px;
+}
+.coal-bunker-number{
+	position: absolute;
+	left: 50%;
+	top: 40%;
+	transform: translate(-50%,-50%);
+	font-size: 15px;
+	font-weight: 700;
+	color: #fff;
+	text-shadow: 0px 0px 5px #000;
+}
+.right-img-col{
+	margin-top: 90px;
+	font-size: 12px;
+	color: #88989c;
+}
+.right-img-col.one{
+	margin-left: 20px;
+}
+.right-img-col.two{
+	margin-right: 5px;
+}
+.right-img-col .stove{
+	width: 66px;
+	height: 34px;
+	line-height: 34px;
+	text-align: center;
+	color: #fff;
+	font-size: 16px;
+	margin: 0 auto;
+	background-color: #24b7da;
+	// border: 1px solid #18b0d2;
+	border: 1px solid #0b9cbc;
+	border-radius: 50%;
+	position: relative;
+	left: -15px;
+}
+.right-img-col .stove-txt{
+	position: relative;
+	left: -15px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 1.6;
+	color: #24b7da;
+	margin-bottom: 20px;
+}
+.canvas-father{
+	position: relative;
+}
+.canvas-belt{
+	position: absolute;
+	z-index: 1;
+	bottom: 0;
+}
+.canvas-father{
+	padding-bottom: 30px;
+}

src/components/HelloWorld.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="hello" @click="$emit('click')">
+  <div class="hello">
     <h1>{{ msg }}</h1>
     <h2>Essential Links</h2>
     <ul>
@@ -90,12 +90,6 @@ export default {
     return {
       msg: 'Welcome to Your Vue.js App'
     }
-  },
-  methods: {
-    bb() {
-      console.log("aa");
-      
-    }
   }
 }
 </script>