autumn/jsowell-charger-web
1
0
Fork 0
mirror of https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git synced 2026-06-11 18:59:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

修改样式

Browse Source
This commit is contained in:
JS-LM
2023-06-26 14:29:01 +08:00
parent e10e54ffb2
commit 7c60d8eab6
2 changed files with 126 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
jsowell-ui/src/views/homeIndex/homeIndex.vue
View File

@@ -4,68 +4,62 @@
<hr /> <hr />
<div style="display: flex;justify-content: space-between;flex-wrap: wrap;"> <div style="display: flex;justify-content: space-between;flex-wrap: wrap;">
<div class="box"> <div class="box">
<div>总充电电量(度)</div> <el-image class="box-image"
<div class="box-text">
<b class="box-h1">{{ generalSituation.totalChargingDegree }}</b>
<el-image
style="width: 80px; height: 80px;"
:src="require('@/assets/images/lightning.png')" :src="require('@/assets/images/lightning.png')"
></el-image> />
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalChargingDegree }}</b>
<div>总充电电量(度)</div>
<div class="progress" />
</div> </div>
<div class="progress"></div>
</div> </div>
<div class="box"> <div class="box">
<div>总充电费用(元)</div> <el-image class="box-image"
<div class="box-text"> :src="require('@/assets/images/zongfeiyong.png')" />
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalChargingAmount}}</b> <b class="box-h1">{{ generalSituation.totalChargingAmount}}</b>
<!-- <image src="/assets/images/login-background.jpg"></image> --> <div>总充电费用(元)</div>
<el-image <div class="progress" />
style="width: 80px; height: 80px"
:src="require('@/assets/images/zongfeiyong.png')"
></el-image>
</div> </div>
<div class="progress"></div>
</div> </div>
<div class="box"> <div class="box">
<div>总充电订单数(笔)</div> <el-image
<div class="box-text"> class="box-image"
:src="require('@/assets/images/dingdan.png')" />
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalChargingQuantity}}</b> <b class="box-h1">{{ generalSituation.totalChargingQuantity}}</b>
<el-image <div>总充电订单数(笔)</div>
style="width: 80px; height: 80px" <div class="progress" />
:src="require('@/assets/images/dingdan.png')"
></el-image>
</div> </div>
<div class="progress"></div>
</div> </div>
<div class="box"> <div class="box">
<div>总充电设备数量(座)</div>
<div class="box-text">
<b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>
<el-image <el-image
style="width: 80px; height: 80px" class="box-image"
:src="require('@/assets/images/shebei.png')" :src="require('@/assets/images/shebei.png')" />
></el-image> <div class="flex1">
<b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>
<div>总充电设备数量(座)</div>
<div class="progress" />
</div> </div>
<div class="progress"></div>
</div> </div>
<div class="box" v-hasRole="['admin', 'common']"> <div class="box" v-hasRole="['admin', 'common']">
<div>总客户余额(元)</div>
<div class="box-text">
<b class="box-h1">{{ generalSituation.totalMemberAmount }}</b>
<el-image <el-image
style="width: 80px; height: 80px" class="box-image"
:src="require('@/assets/images/yue.png')" :src="require('@/assets/images/yue.png')"
></el-image> ></el-image>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalMemberAmount }}</b>
<div>总客户余额(元)</div>
<div class="progress" />
</div>
</div> </div>
<div class="progress"></div></div>
<!-- <div class="box">--> <!-- <div class="box">-->
<!-- <div>总服务费金额</div>--> <!-- <div>总服务费金额</div>-->
<!-- <div class="box-text">--> <!-- <div class="box-text">-->
<!-- <b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>--> <!-- <b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>-->
<!-- <i>元</i>--> <!-- <i>元</i>-->
<!-- <el-image--> <!-- <el-image-->
<!-- style="width: 80px; height: 80px"--> <!-- class="box-image"-->
<!-- :src="require('@/assets/images/shebei.png')"--> <!-- :src="require('@/assets/images/shebei.png')"-->
<!-- ></el-image>--> <!-- ></el-image>-->
<!-- </div>--> <!-- </div>-->
@@ -360,16 +354,26 @@ export default {
}; };
</script> </script>
<style> <style lang="scss" scoped>
.box { .box {
display: flex;
height: 100px;
padding: 10px; padding: 10px;
font-size: 18px; /* font-size: 18px; */
color: #ffffff; color: #ffffff;
background-color: #1ab3b3; background-color: #1ab3b3;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 15px 10px -11px #1ab394; box-shadow: 0 15px 10px -11px #1ab394;
margin-right: 24px; margin-right: 24px;
margin-bottom: 20px; margin-bottom: 20px;
.box-image{
width: 60px;
height: 60px;
}
.flex1{
flex: 1;
margin-left: 5px;
}
} }
.box-h1 { .box-h1 {
/* margin-top: -14px; */ /* margin-top: -14px; */
@@ -377,9 +381,10 @@ export default {
} }
.box-text { .box-text {
margin-top: 0px; margin-top: 0px;
} }
.progress { .progress {
border: 3px solid #fff; border: 3px solid #fff;
margin-right: 30%; margin-top: 5px;
} }
</style> </style>

124
jsowell-ui/src/views/pile/merchant/components/walletSummary.vue
View File

@@ -1,57 +1,36 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<div style="display: flex; padding: 10px"> <div class="main">
<!-- <div style="width: 25%"> <div class="main-right">
<h2>钱包汇总</h2> <p class="center">账户余额(元)</p>
<p>运营商：举视新能源</p> <p class="center number">{{adapayMember.acctBalance}}</p>
<p>商家性质：企业</p> <p class="center">注:
<p>开户状态：进件成功</p> <span class="text">账户余额 = 可用余额 + 冻结余额</span>
<p>开户行名称：中国农业银行股份有限公司</p>
<p>收款卡号：46456412</p>
<p>预留手机号：452584</p>
</div> -->
<div class="main" style="flex: 1; align-items: baseline">
<div class="bord"></div>
<div class="card">
<p class="center">账户余额</p>
<div class="center" >
<span class="number">{{adapayMember.acctBalance}}</span>
（元）</div>
<p style="text-align: justify">
账户余额 = 可用余额 + 冻结余额
</p> </p>
</div> </div>
<div class="bord"></div> <div class="main-right">
<div class="card"> <p class="center">可用余额(元)</p>
<p class="center">可用余额</p> <p class="center number">{{adapayMember.avlBalance}}</p>
<div class="center"> <!-- <el-button type="primary" style="margin-left: 25%;" v-if="adapayMember.avlBalance > 0" @click="dialogVisible = true">提现申请</el-button> -->
<span class="number">{{adapayMember.avlBalance}} </span> <!-- <p class="center " v-else>注: -->
（元）</div> <p class="center">注:
<p>该余额大于0时，才可发起取现</p> <span class="text">该余额大于0时，才可发起取现</span>
</p>
</div> </div>
<div class="bord"></div> <div class="main-right">
<div class="card"> <p class="center">冻结金额(元)</p>
<p class="center">冻结余额</p> <p class="center number">{{adapayMember.frzBalance}}</p>
<div class="center" style="margin-top:20px"> <p class="center ">注:
<span class="number">{{adapayMember.frzBalance}}</span> <span class="text">当配置了自动结算功能，在每日发起结算时会将可用余额转为冻结金额。该部分金额不允许取现。</span>
（元）</div> </p>
<p>当配置了自动结算功能，在每日发起结算时会将可用余额转为冻结金额。该部分金额不允许取现。</p>
</div> </div>
<div class="bord"></div> <div class="main-right">
<div class="card"> <p class="center">昨日日终余额(元)</p>
<p class="center">昨日日终余额</p> <p class="center number">{{adapayMember.lastAvlBalance}}</p>
<div class="center" style="margin-top:20px"> <p class="center">注:
<span class="number">{{adapayMember.lastAvlBalance}}</span> <span class="text">一</span>
元 </p>
</div>
<!-- <button>昨</button> -->
</div>
<div class="bord"></div>
<!-- <div class="card">
<p>已提现</p>
<p>165（元）</p>
<p>以成功提现到绑定银行卡的金额汇总</p>
</div> -->
</div> </div>
</div> </div>
<el-tabs <el-tabs
@@ -133,6 +112,28 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="订单流水" name="second">订单流水</el-tab-pane> <el-tab-pane label="订单流水" name="second">订单流水</el-tab-pane>
</el-tabs> </el-tabs>
<el-dialog title="提现申请" :visible.sync="dialogVisible" width="33%" :before-close="handleClose">
温馨提示
<div style="font-size:12px;color:gray">
<p>1.提现将在3个工作日内审核到账,节假日审核顺延</p>
<p>2.部分流量方的充电订单存在账期,需要一定周期后才开始执行清分</p>
<p>3.提现为银行自动付款,根据银行要求会收取手续费,请知悉</p>
<p>4.订单收入包含了第三方的分成收入金额,已自动扣除万车充分成金额</p>
</div>
<p>可提现(元):
<span class="number">{{adapayMember.avlBalance}}</span>
</p>
<p>实际到账(元):
<span class="number">0</span>
</p>
<p>手续费(元):
<span class="number">10.00</span>
</p>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">提交</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
@@ -150,10 +151,18 @@ export default {
//图标，可根据自己的需求匹配 //图标，可根据自己的需求匹配
icon: "el-icon-caret-bottom", icon: "el-icon-caret-bottom",
createTimeRange:'', createTimeRange:'',
adapayMember:{} adapayMember:{},
dialogVisible: false
}; };
}, },
methods: { methods: {
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
},
handleClick(tab, event) { handleClick(tab, event) {
console.log(tab, event); console.log(tab, event);
}, },
@@ -193,10 +202,25 @@ export default {
.center{ .center{
text-align: center; text-align: center;
} }
.text{
font-size: 12px;
color: red;
}
.main { .main {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; // align-items: baseline;
.main-right{
width: 310px;
margin-right: 20px;
border: 1px solid #e6ebf5;
border-radius: 10px;
padding: 10px;
transition: all .2s linear;
}
}
.main-right:hover{
box-shadow: 0 0 5px 3px #999;
} }
.bord { .bord {
position: relative; position: relative;