Sun Jul 9 07:49:00 UTC 2023 inscode

src/App.vue

 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+import Dashboard from './components/Dashboard.vue'
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+ <Dashboard></Dashboard>
 </template>
 
 <style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
 </style>

src/components/Dashboard.vue

+<template>
+   <div class="cont">
+    <div class="layout">
+      <div class="das-warpper">
+        <div class="das">
+          <div class="diamond-warpper">
+            <span class="diamond">
+              <span class="triangle-top"></span>
+              <span class="triangle-down"></span>
+            </span>
+          </div>
+          <div
+            class="annular"
+            :style="
+              'background: linear-gradient(90deg, #1c81cf 0%, transparent ' +
+              per +
+              '%);'
+            "
+          ></div>
+          <div class="text-warpper"></div>
+          <div class="text">{{ per }}%</div>
+        </div>
+      </div>
+      <div class="bottom-box">
+        <span class="left-gradient"></span>
+        <span class="title">{{ title }}</span>
+        <span class="right-gradient"></span>
+      </div>
+    </div>
+   </div>
+  </template>
+  <script setup>
+  import { ref, onMounted, watch } from "vue";
+  import { toRefs } from "vue";
+  const props = defineProps({
+    title: {
+      type: String,
+      default: "VIP会议室 - 1",
+    },
+    per: {
+      type: Number,
+      default: 75,
+    },
+  });
+  const { title, per } = toRefs(props);
+  console.log(title.value, per.value);
+  watch(
+    () => per.value,
+    (newVal, oldVal) => {
+      console.log(newVal, oldVal);
+      changeper();
+    }
+  );
+  
+  const changeper = () => {
+    let p = per.value;
+    let deg = (180 * p) / 100 - 90;
+    // 修改annular样式
+    const annular = document.querySelector(".annular");
+    annular.style.background = `linear-gradient(90deg, #1c81cf 0%, transparent ${per}%)`;
+    // 修改diamond - warpper 样式
+    const diamondWarpper = document.querySelector(".diamond-warpper");
+    diamondWarpper.style.transform = `rotateZ(${deg}deg)`;
+  
+    diamondWarpper.style.animation = `run${p} 2s 1`;
+    // 创建新的 keyframes 规则
+    const newKeyFrames = `@keyframes run${p} {
+        from {
+          transform: rotateZ(-90deg);
+        }
+        to {
+          transform: rotateZ(${deg}deg);
+        }
+      }`;
+  
+    // 将原有的 keyframes 规则替换为新的规则
+    const styleSheet = document.styleSheets[0];
+    styleSheet.deleteRule(0);
+    styleSheet.insertRule(newKeyFrames, 0);
+  };
+  </script>
+  <style scoped>
+  .cont{
+  background-color: #0a1b49;
+  color: #fff;
+  width: 160px;
+  height: 110px;
+  }
+  .das-warpper {
+    height: 81px;
+    overflow: hidden;
+  }
+  .das {
+    box-sizing: border-box;
+    position: relative;
+    width: 150px;
+    height: 150px;
+    border: 1px dashed #1a75bf;
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+  }
+  .annular {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 90%;
+      height: 90%;
+      border-radius: 50%;
+  
+      -webkit-mask: radial-gradient(transparent, transparent 60%, #000 60%);
+    }
+  .diamond-warpper {
+      position: absolute;
+      display: inline-block;
+      width: 50%;
+      height: 90%;
+      z-index: 200;
+      transform: rotateZ(45deg);
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      animation: run 2s 1;
+  
+     
+    }
+  .diamond {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        
+      }
+  .triangle-top {
+          width: 0;
+          height: 0;
+          border-left: 4px solid transparent;
+          border-right: 4px solid transparent;
+          border-bottom: 10px solid #00a0e9;
+          margin-bottom: -1px;
+        }
+        .triangle-down {
+          width: 0;
+          height: 0;
+          border-left: 4px solid transparent;
+          border-right: 4px solid transparent;
+          border-top: 10px solid #00a0e9;
+        }
+  .bottom-box {
+    width: 100%;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    bottom: -25px;
+ 
+  }
+  .text-warpper {
+      position: absolute;
+      width: 40%;
+      height: 40%;
+      border-radius: 100%;
+      z-index: 200;
+    }
+    .text {
+      position: absolute;
+      top: 30%;
+      font-size: 30px;
+      font-weight: bold;
+      z-index: 300;
+    }
+  .left-gradient {
+      width: 20px;
+      height: 5px;
+      background: linear-gradient(to left, #1c81cf, transparent);
+    }
+    .right-gradient {
+      width: 20px;
+      height: 5px;
+  
+      background: linear-gradient(to right, #1c81cf, transparent);
+    }
+    .title {
+      border-radius: 5px;
+      font-size: 12px;
+      text-align: center;
+      margin: 0px 4px;
+    }
+  .layout {
+    width: 150px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  </style>
+  
\ No newline at end of file