新建财务中心页面

jsowell-ui/src/views/financial/components/cleanFinancical.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="app-container">清分财务</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

jsowell-ui/src/views/financial/components/virtualFinance.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10">
+  <el-col :span="12">
+    <div class="public">
+      <div class="bgc headTitle">虚拟充值用户充电收入</div>
+      <div class="headBox">
+        <div class="conten">
+          <div> <i class="el-icon-user" style="font-size:30px"></i></div>
+          <div class="content-title">
+            <span>运营商:</span>
+            <span style="margin-left: 80px;font-size: 15px;">贵州省怀仁市新能源科技有限公司</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-col>
+  <el-col :span="12">
+    <div class="public">
+      <div class="bgc1 headTitle">充电收入汇总</div>
+       <div class="headBox">
+         <div class="conten">
+            <div> <i class="el-icon-coin" style="font-size:30px"></i></div>
+            <div class="content-title">
+              <span style="font-size:37px">132156元</span>
+            </div>
+         </div>
+      </div>
+    </div>
+  </el-col>
+    </el-row>
+    <div></div>
+   <div class="search">
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
+        <el-row :gutter="20">
+          <el-col :span="6">
+             <el-form-item label="流水单号">
+    <el-input v-model="formInline.user" placeholder="请输入流水单号"></el-input>
+              </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="充电单号">
+    <el-input v-model="formInline.user" placeholder="请输入充电单号"></el-input>
+              </el-form-item>
+          </el-col>
+           <el-col :span="6">
+            <el-form-item label="充电用户">
+    <el-input v-model="formInline.user" placeholder="请输入充电用户"></el-input>
+              </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item>
+    <el-button type="primary" @click="onSubmit">查询</el-button>
+  </el-form-item>
+          </el-col>
+        </el-row>
+        <div v-if="buttonBoolean">
+           <el-form-item label="流水时间">
+    <el-input v-model="formInline.user" placeholder="请输入流水单号"></el-input>
+              </el-form-item>
+        </div>
+    </el-form>
+     <div class="search-arrow"
+                @click="showOrHide()"
+                
+        
+                >
+                <span>{{ showOrHideText }}</span>
+                <i :class="icon"></i></div>
+            </div>
+   </div>
+  </div>
+</template>
+
+<script>
+export default {
+   data() {
+      return {
+          showOrHideText: "显示更多查询条件",
+            buttonBoolean: false,
+            //图标，可根据自己的需求匹配
+            icon: "el-icon-caret-bottom",
+        formInline: {
+          user: '',
+          region: ''
+        }
+      }
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!');
+      },
+       showOrHide() {
+            if (this.buttonBoolean) {
+                this.icon = "el-icon-caret-bottom";
+                this.showOrHideText = "显示更多查询条件";
+                this.buttonBoolean = !this.buttonBoolean;
+            } else {
+                this.icon = "el-icon-caret-top";
+                this.showOrHideText = "收起";
+                this.buttonBoolean = !this.buttonBoolean;
+            }
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.public{
+  background: #f6f7f8;
+    border: 1px solid #ebebf0;
+}
+.bgc{
+  background: linear-gradient(90deg,#38cebf,#1fabcd)
+}
+.bgc1{
+  background: linear-gradient(90deg,#ff8564,#fe6ca0)
+}
+.headTitle{
+  height: 40px;
+  padding-left: 24px;
+  line-height: 40px;
+  color: #fff;
+}
+.content-l{
+  height: 60px;
+}
+.headBox{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  min-height: 145px;
+  padding: 15px 0;
+  line-height: 113px;
+}
+.conten{
+  display: flex;
+  align-items: center;
+}
+.headBox-r{
+  width: 100%;
+  min-height: 145px;
+  padding: 15px 50px;
+}
+.content-title{
+  margin-left: 50px;
+}
+.search{
+  position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: auto;
+    padding: 20px 30px 0;
+    margin-bottom: 12px;
+    margin-top: 10px;
+    background-color: #f6f7f8;
+    border: 1px solid #ebebf0;
+}
+.search-arrow{
+  position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 28px;
+    overflow: hidden;
+    text-align: center;
+    line-height: 28px;
+    background-color:#edf4ff;
+    color: #4d8cfd;
+}
+.demo-form-inline{
+  margin-bottom: 28px;
+}
+
+  // border-color: white;
+  //                   background-color: white;
+  //                   font-size: x-small;
+  //                   color: #50bfff;
+  //                   padding: 1px 2px;
+  //                   margin-left: 40%;
+  //                   margin-top: 0px;
+  //                   margin-bottom: 15px;
+</style>