新增首页部分页面

src/views/common/ex-warehouse.vue

@@ -0,0 +1,105 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-11-15 15:17:30
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-11-16 16:59:23
+ * @Description:
+-->
+<template>
+  <div>
+    <div class="mainDiv" style="margin:10px 0 100px">
+    <div class="flexDiv">
+      <div class="wareBox"  :class="[count > Math.round(Math.random()*10)?'enableBox':'disableBox',{active:count===isActive}]" v-for="count in 10" v-bind:key="count">
+        <div class="plat">库位{{ count }}</div>
+      </div>
+    </div>
+    <div class="flexDiv">
+      <div class="wareBox" :class="[count > Math.round(Math.random()*10)?'enableBox':'disableBox',{active:count===isActive}]" v-for="count in 10" v-bind:key="count">
+        <div class="plat">库位{{ count }}</div>
+      </div>
+    </div>
+    </div>
+    <div class="line"></div>
+    <div class="mainDiv" style="margin:100px 0 10px">
+    <div class="flexDiv">
+      <div class="wareBox end-plat" v-for="count in 4" v-bind:key="count">
+        <div class="plat">提升台{{ count }}</div>
+      </div>
+    </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      isActive: ''
+    }
+  },
+  created () {},
+  methods: {}
+}
+</script>
+
+<style scoped>
+.mainDiv{
+  border: 2px solid rgb(145, 174, 255);
+  padding: 20px 0;
+}
+.flexDiv {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-justify-content: space-around;
+  justify-content: space-around;
+}
+/* 边框特效 */
+.wareBox:hover {
+  background: linear-gradient(to left, deepskyblue, deepskyblue) left top
+      no-repeat,
+    linear-gradient(to bottom, deepskyblue, deepskyblue) left top no-repeat,
+    linear-gradient(to left, deepskyblue, deepskyblue) right top no-repeat,
+    linear-gradient(to bottom, deepskyblue, deepskyblue) right top no-repeat,
+    linear-gradient(to left, deepskyblue, deepskyblue) left bottom no-repeat,
+    linear-gradient(to bottom, deepskyblue, deepskyblue) left bottom no-repeat,
+    linear-gradient(to left, deepskyblue, deepskyblue) right bottom no-repeat,
+    linear-gradient(to left, deepskyblue, deepskyblue) right bottom no-repeat;
+  background-size: 5px 30px, 30px 5px;
+  color: black;
+  border-radius: 5px;
+  background-color: rgb(190, 224, 241);
+}
+.wareBox {
+  cursor: pointer;
+  margin: 10px;
+  height: 100px;
+  padding: 10px;
+  line-height: 90px;
+  text-align: center;
+  border: 2px solid #cdcdc5;
+  border-radius: 5px;
+}
+.plat {
+  min-width: 80px;
+}
+.line {
+  margin: 20px 0;
+  height: 2px;
+  background-color: gray;
+  border-left: 200px solid #ddd;
+  border-right: 200px solid #ddd;
+}
+.enableBox{
+  background: rgb(0, 189, 16);
+}
+.disableBox{
+  background: #ddd;
+  cursor: not-allowed;
+}
+.end-plat{
+  background-color: rgb(195, 246, 255);
+}
+.active{
+  border: 2px solid red;
+}
+</style>