更新代码

2025-04-14 19:48:42 +08:00
parent 49cfd7e64f
commit 8b786df36a
73 changed files with 1988 additions and 4488 deletions
--- a/src/views/backOfficeSystem/IntelligentControl/warningControl/components/ryCount.vue
+++ b/src/views/backOfficeSystem/IntelligentControl/warningControl/components/ryCount.vue
@ -0,0 +1,142 @@
+<template>
+  <div class="carCnt_bottom relative flex align-center">
+    <div class="bottom-item-left">
+      <div class="imgIcon"></div>
+      <div class="leftImg">
+        <div class="sirxle"></div>
+      </div>
+    </div>
+    <ul class="bottom-item-right noScollLine">
+      <li class="itemChild" v-for="item in dataObj.countList" :key="item">
+        <div class="label">
+          <span class="imgicon mr10" :style="{ background: item.color }"></span>
+          {{ item.label }}
+        </div>
+        <div class="num">{{ item.num }}</div>
+        <div class="per" :style="{ color: item.color }">{{ item.persont }}</div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, reactive,defineProps, onUnmounted } from "vue";
+const dataObj = reactive({
+  btns:['今日','本周','自定义'],//按钮
+  head:{num:0,hb:0,tb:0},
+  countList:[
+    {color:'#F57100',label:'刑事重点人员',num:0,persont:'0%'},
+    {color:'#FFD15C',label:'禁毒重点人员',num:0,persont:'0%'},
+    {color:'#0072FF',label:'治安重点人员',num:0,persont:'0%'},
+    {color:'#00FFFF',label:'经侦重点人员',num:0,persont:'0%'},
+    {color:'#09FF66',label:'其他',num:0,persont:'0%'},
+  ]
+})
+</script>
+
+<style lang="scss" scoped>
+@mixin textColor($color1, $color2) {
+  background-image: linear-gradient(0deg, $color1 0%, $color2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+@mixin beforeText($width, $height, $left: 0, $top: 0) {
+  position: absolute;
+  content: "";
+  left: $left;
+  top: $top;
+  height: $height;
+  width: $width;
+}
+.carCnt_bottom {
+  height: 100%;
+  position: relative;
+  background: rgba(0,29,75,0.6);
+  border-radius: 0 0 4px 4px;
+  .bottom-item-left {
+    width: 120px;
+    height: 120px;
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    .imgIcon {
+      position: absolute;
+      left: 39px;
+      top: 40px;
+      width: 42px;
+      height: 40px;
+      background: url("~@/assets/images/imgIcon1.png") no-repeat center center;
+      background-size: 100% 100%;
+      border-radius: 50%;
+      animation: spin 10s infinite linear;
+    }
+    .leftImg {
+      width: 100%;
+      height: 100%;
+      &::before {
+        position: absolute;
+        content: "";
+        left: 0;
+        top: 0;
+        width: 120px;
+        height: 120px;
+        background: url("~@/assets/images/sircleOut.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+        animation: revoleCrile 10s infinite linear;
+      }
+      .sirxle {
+        position: absolute;
+        width: 91px;
+        height: 91px;
+        left: 15px;
+        top: 15px;
+        background: url("~@/assets/images/sircleIn.png") no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+  .bottom-item-right {
+    width: calc(100% - 150px);
+    height: 100%;
+    overflow: hidden;
+    overflow-y: auto;
+    margin-left: 30px;
+    position: absolute;
+    left: 116px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    .itemChild {
+      display: flex;
+      align-items: center;
+      height: 26px;
+      border-bottom: 1px dashed #0072ff;
+    }
+    .label {
+      width: 60%;
+      .imgicon {
+        display: inline-block;
+        width: 13px;
+        height: 6px;
+        border-radius: 2px;
+        transform: rotate(-3deg) skew(5deg, 5deg);
+      }
+    }
+    .num {
+      width: 20%;
+    }
+    .per {
+      width: 20%;
+    }
+  }
+}
+@keyframes spin {
+  to {
+    transform: rotate((1turn));
+  }
+}
+</style>