智能货架前端页面

src/views/intelligentShelves/components/Tip.vue

@@ -1,6 +1,8 @@
 <template>
-    <div class="tip-box">
-        <div class="bian"></div>
+    <div class="body">
+        <div class="circle"><span class="circle__el"></span></div>
+        <div class="circle"><span class="circle__el circle__el_two"></span></div>
+        <div class="circle"><span class="circle__el circle__el_three"></span></div>
     </div>
 </template>
 
@@ -8,30 +10,58 @@
 </script>
 
 <style scoped>
-.tip-box {
-    width: 300px;
-    height: 80px;
-    background: #fff;
-    position: absolute;
-    right: 151px;
-    top: 16px;
+:root {
+    --main-color: #039BE5;
+    --circle-color: #eee;
+    --size-to: 38px;
 }
-
-.bian {
+.body {
     width: 38px;
     height: 38px;
-    border-radius: 50%;
-    background-image: repeating-radial-gradient(#CDA1B9, #BAA0A6, #909C7F, #4F657A, #E7E7E7);
-    animation: masked-animation 2s infinite linear;
+    position: relative;
 }
 
-@keyframes masked-animation {
+.circle {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    z-index: 10000;
+}
+
+.circle__el {
+    width: 0;
+    height: 0;
+    background: transparent;
+    border: 5px solid #eee;
+    border-radius: 50%;
+    animation: ripple 1.5s ease-out infinite;
+}
+
+.circle__el_two {
+    animation-delay: 0.5s;
+}
+
+.circle__el_three {
+    animation-delay: 1s;
+}
+
+@keyframes ripple {
     0% {
-        transform: scale(0.2);
+        /* box-shadow: 0 0 0 0 rgba(135, 1, 13, 0.3), 0 0 0 1em rgba(135, 1, 13, 0.3), 0 0 0 3em rgba(135, 1, 13, 0.3), 0 0 0 5em rgba(135, 1, 13, 0.3); */
     }
 
     100% {
-        transform: scale(1);
+        width: 38px;
+        height: 38px;
+        box-shadow: 0 0 15px #eee;
+        opacity: 0;
     }
 }
 </style>

src/views/intelligentShelves/components/TipBox.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="tip-box">
+        <div class="item">
+            <div class="bg kong"></div>
+            <div>空位</div>
+        </div>
+        <div class="item">
+            <div class="bg sensor"></div>
+            <div>正常</div>
+        </div>
+        <div class="item">
+            <div class="bg sensor_y"></div>
+            <div>异常</div>
+        </div>
+        <div class="item">
+            <div class="bg integrator"></div>
+            <div>正常</div>
+        </div>
+        <div class="item ">
+            <div class="bg integrator_y"></div>
+            <div>异常</div>
+        </div>
+        <div class="item">
+            <Tip />
+            <div>库存变动</div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import Tip from "./Tip.vue"
+</script>
+
+<style scoped>
+.tip-box {
+    width: 300px;
+    height: 80px;
+    position: absolute;
+    right: 151px;
+    top: 16px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.item {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.bg {
+    width: 38px;
+    height: 38px;  
+    background-size: 38px;
+    background-repeat: no-repeat;
+}
+.kong {    
+    background-color: #9CACBB;  
+}
+.sensor {
+    background-image: url(./../../../assets/img/sensor.svg);
+}
+.sensor_y {
+    background-image: url(./../../../assets/img/sensor_y.svg);
+}
+.integrator {
+    background-image: url(./../../../assets/img/integrator.svg);
+}
+
+.integrator_y {
+    background-image: url(./../../../assets/img/integrator_y.svg);
+}
+
+</style>

src/views/intelligentShelves/index.vue

@@ -31,7 +31,7 @@
         <ShelfPanel :config="panelConfig"></ShelfPanel>
       </div>
     </div>
-      <Tip ></Tip>
+      <TipBox ></TipBox>
   </div>
 </template>
 
@@ -40,7 +40,7 @@ import {ref} from "vue";
 import header2 from "@/components/headerBox/header2.vue";
 import ShelfPanel from "./components/ShelfPanel.vue";
 import CenterPanel from "./components/CenterPanel.vue";
-import Tip from "./components/Tip.vue";
+import TipBox from "./components/TipBox.vue";
 import { useI18n } from 'vue-i18n'
 let { t } = useI18n();