扣回统计页面增加

src/components/gradient-card/index.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="hc-gradient-card-box">
+        <div class="flex radius hc-gradient-card" :class="'bg-' + bgColor + '-gradient'">
+            <div class="hc-card-dot hc-card-dot1" :class="'bg-' + bgColor + '-gradient'"/>
+            <div class="hc-card-dot hc-card-dot2" :class="'bg-' + bgColor + '-gradient'"/>
+            <div class="hc-card-dot hc-card-dot3" :class="'bg-' + bgColor + '-gradient'"/>
+            <div class="hc-card-main">
+                <slot></slot>
+            </div>
+        </div>
+        <div class="hc-gradient-card-bg" :class="'bg-' + bgColor"/>
+    </div>
+</template>
+
+<script setup>
+import {ref, watch} from "vue"
+
+//初始
+const props = defineProps({
+    color: {
+        type: String,
+        default: 'blue'
+    }
+})
+
+const bgColor = ref(props.color)
+
+//监听
+watch(() => [
+    props.color,
+], ([color]) => {
+    bgColor.value = color
+})
+</script>
+
+<style lang="scss" scoped>
+@import "./style.scss";
+</style>

src/components/gradient-card/style.scss

@@ -0,0 +1,79 @@
+.hc-gradient-card-box {
+    position: relative;
+    .hc-gradient-card {
+        position: relative;
+        z-index: 2;
+        border-radius: 6px;
+        overflow: hidden;
+        .hc-card-main {
+            position: relative;
+            flex: 1;
+            z-index: 3;
+        }
+    }
+    .hc-gradient-card-bg {
+        position: relative;
+        z-index: 2;
+        text-shadow: 2px 3px 5px rgba(0,0,0,.1);
+    }
+    .hc-card-dot {
+        position: absolute;
+        z-index: 1;
+        border-radius: 50%;
+        transition: all 0.6s cubic-bezier(.08,.82,.17,1);
+        opacity: .3;
+        &.hc-card-dot1 {
+            width: 200px;
+            height: 200px;
+            left: 0;
+            top: auto;
+            right: auto;
+            bottom: -150px;
+            filter: hue-rotate(30deg)  brightness(160%);
+        }
+        &.hc-card-dot2 {
+            left: -40px;
+            top: auto;
+            right: auto;
+            bottom: -10px;
+            width: 150px;
+            height: 150px;
+            filter: brightness(80%);
+        }
+        &.hc-card-dot3 {
+            top: -60px;
+            right: -60px;
+            opacity: 0.6;
+            width: 120px;
+            height: 120px;
+            filter: brightness(120%);
+        }
+    }
+    .hc-gradient-card-bg {
+        position: absolute;
+        z-index: 0;
+        width: calc(100% - 20px);
+        height: 15px;
+        bottom: -7px;
+        left: 0;
+        right: 0;
+        margin: auto;
+        border-radius: 5px;
+        // filter: blur(10px);
+        opacity: 0.2;
+    }
+    &:hover {
+        .hc-card-dot1 {
+            transform: translateX(-50px) translatey(-180px);
+            filter:  hue-rotate(-30deg) brightness(80%);
+        }
+        .hc-card-dot2 {
+            transform: translateX(150px) translatey(0px);
+            filter: brightness(120%);
+        }
+        .hc-card-dot3 {
+            filter: brightness(80%);
+            transform: translateX(-150px) translatey(120px);
+        }
+    }
+}

src/components/index.js

@@ -9,10 +9,12 @@ import HcTitle from './hc-title/hc-title.vue'
 import HcSearchInput from './search-input/search-input.vue'
 import HcTasksUser from './hc-tasks-user/index.vue'
 import HcViewReport from './view-report/view-report.vue'
+import HcGradientCard from './gradient-card/index.vue'
 
 
 //注册全局组件
 export const setupComponents = (App) => {
+    App.component('HcGradientCard', HcGradientCard)
     App.component('HcTooltip', HcTooltip)
     App.component('HcTipItem', HcTipItem)
     App.component('HcChoiceUser', HcChoiceUser)
@@ -24,4 +26,6 @@ export const setupComponents = (App) => {
     App.component('HcSearchInput', HcSearchInput)
     App.component('HcTasksUser', HcTasksUser)
     App.component('HcViewReport', HcViewReport)
+
+
 }

src/router/modules/base.js

@@ -356,7 +356,7 @@ export default [
                     {
                         path: '/debit-pay/deduction-ledger/deductstatic',
                         name: 'debit-pay-deduction-ledger-deductstatic',
-                        meta: { title: '资料关联台账' },
+                        meta: { title: '扣回统计' },
                         component: () => import('~src/views/debit-pay/ledgers/deductstatic.vue'),
                     },
                  

src/styles/app/main.scss

@@ -55,3 +55,71 @@ embed {
 .hc_tree_card_border {
     border-right: 1px dotted #EEEEEE;
 }
+.bg-purple1 {
+    background-color: rgb(184, 122, 253);
+}
+.bg-purple1-gradient {
+    background: linear-gradient(90.99deg, rgba(98,113,252,1) 0.63%,rgba(115,115,252,1) 19%,rgba(152,119,253,1) 35.04%,rgba(163,121,253,1) 51.28%,rgba(178,122,253,1) 73.03%,rgba(184,122,253,1) 97.29%);
+    color: white;
+}
+
+.bg-blue1 {
+    background-color: rgba(109,131,251,1);
+}
+.bg-blue1-gradient {
+    background: linear-gradient(90.99deg, rgba(62,162,246,1) 0.63%,rgba(74,154,247,1) 20.93%,rgba(71,155,247,1) 37.36%,rgba(87,145,249,1) 53.8%,rgba(101,136,250,1) 73.03%,rgba(109,131,251,1) 97.29%);
+    color: white;
+}
+
+.bg-blue2 {
+    background-color: rgba(109,131,251,1);
+}
+.bg-blue2-gradient {
+    background: linear-gradient(90.99deg, rgba(62,162,246,1) 0.63%,rgba(74,154,247,1) 20.93%,rgba(71,155,247,1) 37.36%,rgba(87,145,249,1) 53.8%,rgba(101,136,250,1) 73.03%,rgba(109,131,251,1) 97.29%);
+    color: white;
+}
+
+.bg-red1 {
+    background-color: rgba(239,148,100,1);
+}
+.bg-red1-gradient {
+    background: linear-gradient(90.99deg, rgba(234,100,110,1) 0.63%,rgba(235,111,110,1) 19%,rgba(236,121,108,1) 35.04%,rgba(237,134,104,1) 51.28%,rgba(238,141,101,1) 73.13%,rgba(239,148,100,1) 97.29%);
+    color: white;
+}
+
+.bg-green1 {
+    background-color: rgba(111,210,165,1);
+}
+.bg-green1-gradient {
+    background: linear-gradient(90.99deg, rgba(74,199,214,1) 0.63%,rgba(84,202,203,1) 19%,rgba(92,205,189,1) 35.04%,rgba(101,207,180,1) 51.28%,rgba(103,208,178,1) 73.03%,rgba(111,210,165,1) 97.29%);
+    color: white;
+}
+.bg-green2 {
+    background-color:#9AF20E;
+}
+.bg-green2-gradient {
+    background: linear-gradient(90.99deg, rgb(12, 218, 29) 0.63%,rgb(37, 216, 102) 19%,rgb(73, 236, 136) 35.04%,rgb(102, 240, 93) 51.28%,rgb(22, 225, 49) 73.03%,rgb(33, 226, 75) 97.29%);
+    color: white;
+}
+.bg-pink1 {
+    background-color: rgba(239,148,100,1);
+}
+.bg-pink1-gradient {
+    background: linear-gradient(90.99deg, rgba(234,100,110,1) 0.63%,rgba(235,111,110,1) 19%,rgba(236,121,108,1) 35.04%,rgba(237,134,104,1) 51.28%,rgba(238,141,101,1) 73.13%,rgba(239,148,100,1) 97.29%);
+    color: white;
+}
+.bg-yellow1 {
+    background-color: rgba(223,226,100,1);
+}
+.bg-yellow1-gradient {
+    background: linear-gradient(90.99deg, rgba(223,226,100) 0.63%,rgb(223,226,100) 19%,rgb(223,226,100,1) 35.04%,rgb(2223,226,100,1) 51.28%,rgb(223,226,100) 73.13%,rgb(223,226,100) 97.29%);
+    color: white;
+}
+.bg-orange1 {
+    background-color: rgba(242,162,8,1);
+}
+.bg-orange1-gradient {
+    background: linear-gradient(90.99deg, rgb(242,162,8) 0.63%,rgb(242,162,8) 19%,rgb(234, 162, 68) 35.04%,rgb(242,162,8) 51.28%,rgb(242,162,8) 73.13%,rgb(242,162,8) 97.29%);
+    color: white;
+}
+

src/views/debit-pay/ledgers/deductstatic.vue

@@ -1,6 +1,96 @@
 <!--  -->
 <template>
-    <div>扣回统计</div>
+    <hc-new-card>
+        <div class="hc-main-row">
+            <div class="title_box">
+                目前所有已计量但未补全资料的计量金额统计
+            </div>
+            <el-row :gutter="14">
+                <el-col :span="8">
+                    <hc-gradient-card color="purple1">
+                        <div class="hc-card-item-sub">
+                            <div class="item-sub-title">
+                                ￥50000
+                            </div>
+                            <div class="item-sub-num">
+                                <span class="num">总金额</span>
+                            </div>
+                        </div>
+                    </hc-gradient-card>
+                </el-col>
+                <el-col :span="8">
+                    <HcGradientCard color="orange1">
+                        <div class="hc-card-item-sub">
+                            <div class="item-sub-title">
+                                ￥50000
+                            </div>
+                            <div class="item-sub-num">
+                                <span class="num">距离截止日期还剩</span>
+                                <span class="fon-lg">1</span>
+                                <span class="num">天</span>
+                            </div>
+                        </div>
+                    </HcGradientCard>
+                </el-col>
+                <el-col :span="8">
+                    <HcGradientCard color="yellow1">
+                        <div class="hc-card-item-sub">
+                            <div class="item-sub-title">
+                                ￥50000
+                            </div>
+                            <div class="item-sub-num">
+                                <span class="num">距离截止日期还剩</span>
+                                <span class="fon-lg">10</span>
+                                <span class="num">天</span>
+                            </div>
+                        </div>
+                    </HcGradientCard>
+                </el-col>
+            </el-row>
+            <el-row :gutter="14" class="mt-10">
+                <el-col :span="8">
+                    <hc-gradient-card color="green2">
+                        <div class="hc-card-item-sub">
+                            <div class="item-sub-title">
+                                ￥50000
+                            </div>
+                            <div class="item-sub-num">
+                                <span class="num">距离截止日期还剩</span>
+                                <span class="fon-lg">30</span>
+                                <span class="num">天</span>
+                            </div>
+                        </div>
+                    </hc-gradient-card>
+                </el-col>
+                <el-col :span="8">
+                    <HcGradientCard color="blue2">
+                        <div class="hc-card-item-sub">
+                            <div class="item-sub-title">
+                                ￥50000
+                            </div>
+                            <div class="item-sub-num">
+                                <span class="num">距离截止日期还剩</span>
+                                <span class="fon-lg">60</span>
+                                <span class="num">天</span>
+                            </div>
+                        </div>
+                    </HcGradientCard>
+                </el-col>
+                <el-col :span="8">
+                    <HcGradientCard color="red1">
+                        <div class="hc-card-item-sub">
+                            <div class="item-sub-title">
+                                ￥50000
+                            </div>
+                            <div class="item-sub-num">
+                                <span class="num">已超过截止日期</span>
+                            </div>
+                        </div>
+                    </HcGradientCard>
+                </el-col>
+            </el-row>
+        </div>
+    </hc-new-card>
 </template>
 
 <script setup>
@@ -8,4 +98,46 @@ import { ref, watch } from 'vue'
 </script>
 
 <style lang='scss' scoped>
+.hc-main-row {
+    height: 100%;
+}
+.title_box{
+    width: 100%;
+    height: 100px;
+    background-color:#6799D9 ;
+    border-radius: 25px;
+    text-align: center;
+    color: white;
+    font-weight: bolder;
+    line-height: 100px;
+    margin-bottom: 30px;
+    font-size: 50px;
+}
+.hc-card-item-sub {
+ 
+    position: relative;
+    padding: 20px;
+    .item-sub-title {
+        font-size: 45px;
+        font-weight: bold;
+    }
+    .item-sub-num {
+        height: 50px;
+        position: relative;
+        margin-top: 40px;
+        text-align: left;
+        .num {
+            font-size: 30px;
+            font-weight: bold;
+        }
+        .text {
+            margin-left: 5px;
+            font-size: 25px;
+            color: inherit;
+        }
+    }
+}
+.fon-lg{
+    font-size: 50px;
+}
 </style>