Auto Commit

src/components/Dashboard.vue

@@ -17,7 +17,7 @@
           "
         ></div>
         <div class="text-warpper"></div>
-        <div class="text">{{ per }}%</div>
+        <div class="text">{{ per }}</div>
       </div>
     </div>
     <div class="bottom-box">
@@ -39,11 +39,11 @@ const props = defineProps({
   },
   per: {
     type: Number,
-    default: 75,
+    default: 66.66,
   },
   fontSize: {
     type: Number,
-    default: 12,
+    default: 20,
   },
 });
 const { title, per } = toRefs(props);
@@ -58,7 +58,7 @@ watch(
 onMounted(() => {
   changeper();
 });
-let ran = ref(Math.floor(Math.random() * 100) + per.value);
+let ran = ref(Math.floor(Math.random() * 100));
 const changeper = () => {
   let p = per.value;
   let deg = (180 * p) / 100 - 90;
@@ -81,15 +81,15 @@ const changeper = () => {
 </script>
 <style lang="css" scoped>
 .das-warpper {
-  height: 75px;
+  height: 160px;
   overflow: hidden;
 }
 
 .das {
   box-sizing: border-box;
   position: relative;
-  width: 130px;
-  height: 130px;
+  width: 330px;
+  height: 330px;
   border: 1px dashed #1a75bf;
   border-radius: 100%;
   display: flex;
@@ -152,8 +152,8 @@ const changeper = () => {
 
 .das .text {
   position: absolute;
-  top: 30%;
-  font-size: 30px;
+  top: 20%;
+  font-size: 50px;
   font-weight: bold;
   z-index: 300;
 }
@@ -163,36 +163,40 @@ const changeper = () => {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-top: 3px;
+  /* margin-top: 3px; */
+  position: relative;
+  top: -20px;
+ 
 }
 
 .bottom-box .left-gradient {
-  width: 20px;
-  height: 5px;
+  width: 50px;
+  height: 10px;
   background: linear-gradient(to left, #1c81cf, transparent);
 }
 
 .bottom-box .right-gradient {
-  width: 20px;
-  height: 5px;
+  width: 50px;
+  height: 10px;
   background: linear-gradient(to right, #1c81cf, transparent);
 }
 
 .bottom-box .title {
   border-radius: 5px;
-  font-size: 12px;
   text-align: center;
   margin: 0px 4px;
+  font-size: 22px;
 }
 
 .layout {
   background-color: #032468;
   color: #fff;
-  width: 150px;
+  /* width: 150px; */
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding: 20px;
 }
 
 </style>