Auto Commit

package.json

@@ -12,6 +12,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",
+    "sass": "^1.63.6",
+    "sass-loader": "^13.3.2",
     "vite": "^3.0.1"
   }
 }

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 class="layout">
+    <div class="das-warpper">
+      <div class="das">
+        <div class="diamond-warpper" :id="'war' + ran">
+          <span class="diamond">
+            <span class="triangle-top"></span>
+            <span class="triangle-down"></span>
+          </span>
         </div>
-      </div>
-      <div class="bottom-box">
-        <span class="left-gradient"></span>
-        <span class="title">{{ title }}</span>
-        <span class="right-gradient"></span>
+        <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>
-  </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;
+    <div class="bottom-box">
+      <span class="left-gradient"></span>
+      <span :style="'font-size: ' + fontSize + 'px;'" class="title">{{
+        title
+      }}</span>
+      <span class="right-gradient"></span>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted, watch } from "vue";
+import { toRefs } from "vue";
+const props = defineProps({
+  title: {
+    type: String,
+    default: "仪表盘",
+  },
+  per: {
+    type: Number,
+    default: 75,
+  },
+  fontSize: {
+    type: Number,
+    default: 12,
+  },
+});
+const { title, per } = toRefs(props);
+console.log(title.value, per.value);
+watch(
+  () => per.value,
+  (newVal, oldVal) => {
+    console.log(newVal, oldVal);
+    changeper();
   }
-  .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;
-        
+);
+onMounted(() => {
+  changeper();
+});
+let ran = ref(Math.floor(Math.random() * 100) + per.value);
+const changeper = () => {
+  let p = per.value;
+  let deg = (180 * p) / 100 - 90;
+  const newKeyFrames = `@keyframes run${ran.value} {
+      from {
+        transform: rotateZ(-90deg);
       }
-  .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
+      to {
+        transform: rotateZ(${deg}deg);
+      }
+    }`;
+  // // 将原有的 keyframes 规则替换为新的规则
+  const styleSheet = document.styleSheets[0];
+  // styleSheet.deleteRule(0);
+  styleSheet.insertRule(newKeyFrames, 0);
+  const diamondWarpper = document.getElementById("war" + ran.value);
+  diamondWarpper.style = `transform:rotateZ(${deg}deg);animation : run${ran.value} 2s 1;`;
+  // diamondWarpper.style.animation = `run${ran} 2s 2`;
+};
+</script>
+<style lang="css" scoped>
+.das-warpper {
+  height: 75px;
+  overflow: hidden;
+}
+
+.das {
+  box-sizing: border-box;
+  position: relative;
+  width: 130px;
+  height: 130px;
+  border: 1px dashed #1a75bf;
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.das .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%);
+}
+
+.das .diamond-warpper {
+  position: absolute;
+  display: inline-block;
+  width: 50%;
+  height: 90%;
+  z-index: 200;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.das .diamond-warpper .diamond {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.das .diamond-warpper .diamond .triangle-top {
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 10px solid #00a0e9;
+  margin-bottom: -1px;
+}
+
+.das .diamond-warpper .diamond .triangle-down {
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 10px solid #00a0e9;
+}
+
+.das .text-warpper {
+  position: absolute;
+  width: 40%;
+  height: 40%;
+  border-radius: 100%;
+  z-index: 200;
+}
+
+.das .text {
+  position: absolute;
+  top: 30%;
+  font-size: 30px;
+  font-weight: bold;
+  z-index: 300;
+}
+
+.bottom-box {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 3px;
+}
+
+.bottom-box .left-gradient {
+  width: 20px;
+  height: 5px;
+  background: linear-gradient(to left, #1c81cf, transparent);
+}
+
+.bottom-box .right-gradient {
+  width: 20px;
+  height: 5px;
+  background: linear-gradient(to right, #1c81cf, transparent);
+}
+
+.bottom-box .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>