首页样式调整

front-vue/src/assets/styles/huyi.scss

@@ -292,3 +292,8 @@ font-size: 13px;
     border: 1px solid #000000 !important;
 }
 
+.zap-line{
+	width: 100%;
+	height: 0;
+	border-bottom: 1px solid #F4F5F6;
+}

front-vue/src/components/HomeStatistics/index.vue

@@ -0,0 +1,109 @@
+<template>
+<div>
+    <div class="zap-home-statistics__top">
+        <el-row class="zap-home-statistics__wrap" type="flex" align="middle" justify="space-between">
+            <el-row type="flex" align="middle">
+                <img v-if="type === 'rongxin'" class="zap-home-statistics__icon" src="../../assets/images/components/homeStatistics/icon_rongxin.png" alt="">
+                <img v-else class="zap-home-statistics__icon" src="../../assets/images/components/homeStatistics/icon_rongzheng.png" alt="">
+                <span class="zap-home-statistics__title">{{title}}</span>
+            </el-row>
+            <div class="zap-home-statistics__filter">
+                <span v-for="item in options" :key="item.label" class="zap-home-statistics__option" :class="label === item.label ? 'zap-home-statistics__option--active' : ''" @click="clickHandler(item)">{{item.label}}</span>
+            </div>
+        </el-row>
+        <img v-if="type === 'rongxin'" class="zap-home-statistics__img" src="../../assets/images/components/homeStatistics/rongxin_bg.png" alt="">
+        <img v-else class="zap-home-statistics__img" src="../../assets/images/components/homeStatistics/rongzheng_bg.png" alt="">
+    </div>
+    <div class="zap-home-statistics__content">
+        <slot></slot>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    name: "HomeStatistic",
+    props: {
+        type: String,
+        title: String,
+        options: {
+            type: Array,
+            default () {
+                return []
+            }
+        }
+    },
+    data () {
+        return {
+            label: ''
+        }
+    },
+    methods: {
+        clickHandler (item) {
+            this.label = item.label
+            this.$emit('change', item.value)
+        }
+    },
+    watch: {
+        options: {
+            immediate: true,
+            handler () {
+                this.label = this.options[0]?.label
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.zap-home-statistics__top {
+    position: relative;
+}
+
+.zap-home-statistics__wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.zap-home-statistics__icon {
+    width: 42px;
+    height: 42px;
+    margin-left: 20px;
+}
+
+.zap-home-statistics__title {
+    margin-left: 16px;
+    font-size: 16px;
+    color: #ffffff;
+}
+
+.zap-home-statistics__img {
+    width: 100%;
+}
+.zap-home-statistics__filter{
+    
+}
+.zap-home-statistics__option{
+    width: 53px;
+    margin-right: 14px;
+    padding: 5px 14px;
+    line-height: 1;
+    font-size: 14px;
+    color: #ffffff;
+    border-radius: 4px;
+    cursor: pointer;
+    &::nth-last-child(1){
+        margin-right: 0;
+    }
+}
+.zap-home-statistics__option--active{
+    color: #4280F2;
+    background-color: #ffffff;
+}
+.zap-home-statistics__content{
+    background-color: #ffffff;
+}
+</style>

front-vue/src/views/service/financeRecord/detailFinanceRecord.vue

@@ -66,7 +66,7 @@
         </template>
     </el-row>
     <div class="zap-title">融信凭证</div>
-    <el-row class="zap-form">
+    <el-row class="zap-form pb20">
         <zap-bill 
         :open="openName"
         :openNum="openCode"