tangxinyue
/
alipay-emulator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

通话和银行卡优化

This commit is contained in:
小李 2026-06-04 14:10:28 +08:00
parent a47cc2a9cd
commit 0616283418
7 changed files with 1687 additions and 1626 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
pages/call-log/detail/callDetail.vue
View File

@ -16,7 +16,7 @@
, height:data.headerHeight+'px'}"> , height:data.headerHeight+'px'}">
<view v-if="data.info.avatar" style="height:400rpx;"></view> <view v-if="data.info.avatar" style="height:400rpx;"></view>
<image v-if="data.info.avatar" :src="data.info.avatar" mode="aspectFill" <image v-if="data.info.avatar" :src="data.info.avatar" mode="aspectFill"
style="width:100%;position: absolute;bottom: 0;left: 0;z-index:0;" :style="{height:data.headerHeight+'rpx'}"></image> style="width:100%;position: absolute;bottom: 0;left: 0;z-index:0;" :style="{height:data.headerHeight+'px'}"></image>
<view class="status" :style="{height:$systemInfo.statusBarHeight+'px'}"> </view> <view class="status" :style="{height:$systemInfo.statusBarHeight+'px'}"> </view>
<view class="flexcontainer" @click="openEditModalDetail()"> <view class="flexcontainer" @click="openEditModalDetail()">
<image @click.stop="back()" class="group_48089" src="/static/image/call/detail/iosBack.png" :style="{position: 'fixed', <image @click.stop="back()" class="group_48089" src="/static/image/call/detail/iosBack.png" :style="{position: 'fixed',
@ -30,7 +30,7 @@
:style="{opacity:data.info.avatar?0:1,transform: `scale(${data.avatarScale}) translateY(${data.avatarY}px)`}" /> :style="{opacity:data.info.avatar?0:1,transform: `scale(${data.avatarScale}) translateY(${data.avatarY}px)`}" />
</view> </view>
<text class="text_1" v-if="!data.info.avatar" :style="{opacity:data.scale}"> {{data.info.address}} </text> <text class="text_1" v-if="!data.info.avatar" :style="{opacity:data.scale}"> {{data.info.address}} </text>
<text class="text_2" :style="{transform: `scale(${data.textScale}) translateY(${data.text2Y}px)`}">{{data.info.name||formatString(data.info.phone)}} </text> <text class="text_2" :style="{transform: `scale(${data.info.avatar?1:data.textScale}) translateY(${data.text2Y}px)`}">{{data.info.name||formatString(data.info.phone)}} </text>
<view class="flexcontainer_1" :style="{transform: `translateY(${data.contentY}px)`}"> <view class="flexcontainer_1" :style="{transform: `translateY(${data.contentY}px)`}">
<view class="group_48123" :style="{'background-color': `rgba(128,131,146,${data.info.avatar?0.5:1})`}"> <view class="group_48123" :style="{'background-color': `rgba(128,131,146,${data.info.avatar?0.5:1})`}">
@ -768,6 +768,7 @@
data.index = Number(option.index) data.index = Number(option.index)
let listArr = uni.getStorageSync('callLog') let listArr = uni.getStorageSync('callLog')
data.info = listArr[data.index] data.info = listArr[data.index]
data.info.avatar='/static/logo.png'
data.list = data.info.list || data.list data.list = data.info.list || data.list
console.log(data.info) console.log(data.info)
data.headerHeight=data.info.avatar?519:325 data.headerHeight=data.info.avatar?519:325
@ -783,9 +784,9 @@
const y = e.scrollTop; const y = e.scrollTop;
const max = 200; const max = 200;
let p = Math.min(y / max, 1); let p = Math.min(y / max, 1);
data.contentY = -p * 90; data.contentY = -p * (data.info.avatar?70:90);
data.avatarY = -p * 0; data.avatarY = -p * 0;
data.text2Y = -p * 130; data.text2Y = -p * (data.info.avatar?70:130);
data.avatarScale = 1 - p * 0.55; // 1 → 0.6 textScale data.avatarScale = 1 - p * 0.55; // 1 → 0.6 textScale
data.textScale = 1 - p * 0.5; // 1 → 0.6 data.textScale = 1 - p * 0.5; // 1 → 0.6

12
pages/other/bank/gsyh.vue
View File

@ -9,7 +9,7 @@
<view class="group_45764" v-if="!selectedImage" :style="{'padding-top':$systemInfo.statusBarHeight+'px'}"> <view class="group_45764" v-if="!selectedImage" :style="{'padding-top':$systemInfo.statusBarHeight+'px'}">
<view class="rectangle_23284"> <view class="rectangle_23284">
<view class="flexcontainer"> <view class="flexcontainer">
<view class="group_8"> <view class="group_8" @click="back">
<image class="frame" src="/static/image/other/bank/gsyh/back.png" /> <image class="frame" src="/static/image/other/bank/gsyh/back.png" />
</view> </view>
<view class="group_7"> <view class="group_7">
@ -40,7 +40,8 @@
<text class="text_2">{{data.form.cardType}}</text> <text class="text_2">{{data.form.cardType}}</text>
<view class="text_3"> <view class="text_3">
{{maskCardNumber(data.form.cardNumber)}} {{maskCardNumber(data.form.cardNumber)}}
<text style="color:#3E82BD;margin-left: 52rpx;" @click="data.isShow=true">查看</text> <view
style="color:#3E82BD;margin-left: 52rpx;text-align: center;font-size: 22rpx; width: 52rpx;height: 32rpx;background: #F3F6FB;border-radius: 2px 2px 2px 2px;" @click="data.isShow=true">查看</view>
</view> </view>
</view> </view>
</view> </view>
@ -381,7 +382,9 @@ onMounted(() => {
} }
// #endif // #endif
}); });
function back(){
uni.navigateBack()
}
function loadCache() { function loadCache() {
const cache = uni.getStorageSync(CACHE_KEY); const cache = uni.getStorageSync(CACHE_KEY);
if (cache) { if (cache) {
@ -758,6 +761,7 @@ function onNumberInput(field, value) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 22rpx; margin-left: 22rpx;
width: calc(100% - 130rpx);
} }
.text_2 { .text_2 {
@ -768,6 +772,8 @@ function onNumberInput(field, value) {
.text_3 { .text_3 {
font-size: 26rpx; font-size: 26rpx;
color: #333333; color: #333333;
display: flex;
flex-direction: row;
} }
.group_48162 { .group_48162 {

114
pages/other/bank/jsyh.vue
View File

@ -7,9 +7,12 @@
</liu-drag-button> </liu-drag-button>
</view> </view>
<view class="group_45764"> <view class="group_45764">
<view class="flexcontainer_1" :style="{'padding-top':$systemInfo.statusBarHeight+'px','backgroundColor':data.navbar.bgColor}"> <!-- ,'backgroundColor':data.navbar.bgColor -->
<view class="flexcontainer_box" v-if="!selectedImage">
<view :style="{'height':$systemInfo.statusBarHeight+'px','width':'100%'}"></view>
<view class="flexcontainer_1">
<view class="group_8"> <view class="group_8">
<view class="rectangle_18503"> <view class="rectangle_18503" @click="back">
<image class="frame" src="/static/image/other/bank/jsyh/back.png" /> <image class="frame" src="/static/image/other/bank/jsyh/back.png" />
</view> </view>
</view> </view>
@ -21,6 +24,7 @@
</view> </view>
</view> </view>
</view> </view>
</view>
<view class="" :style="{height:$systemInfo.statusBarHeight*2+96+'rpx'}"> <view class="" :style="{height:$systemInfo.statusBarHeight*2+96+'rpx'}">
</view> </view>
@ -33,23 +37,32 @@
</view> </view>
</view> </view>
<view class="flexcontainer_3"> <view class="flexcontainer_3">
<text class="text_2"> {{data.form.bankName}}（{{data.form.cardNumber.substring(data.form.cardNumber.length-4)}}） </text> <text class="text_2">
{{data.form.bankName}}（{{data.form.cardNumber.substring(data.form.cardNumber.length-4)}}） </text>
<view class="flexcontainer_4"> <view class="flexcontainer_4">
<image class="group_13982" src="/static/image/other/bank/jsyh/editor.png" /> <image class="group_13982" src="/static/image/other/bank/jsyh/editor.png" />
<image class="group_48197" src="/static/image/other/bank/jsyh/zc.png" /><text class="text_3"> 修改别名 </text> <!-- <image class="group_48197" src="/static/image/other/bank/jsyh/zc.png" /> -->
<view class="group_48197">
正常
</view>
<text class="text_3"> 修改别名
</text>
</view> </view>
</view> </view>
<text class="text_4" @click.stop="data.isShow=true"> 查看卡号 </text> <text class="text_4" @click.stop="data.isShow=true"> 查看卡号 </text>
</view> </view>
<text class="text_5"> 卡片类型：{{data.form.cardType}} </text><text class="text_6"> 账户类别：{{data.form.accountType}} </text> <text class="text_5"> 卡片类型：{{data.form.cardType}} </text><text class="text_6"> 账户类别：{{data.form.accountType}}
</text>
<view class="flexcontainer_5"> <view class="flexcontainer_5">
<view class="flexcontainer_6"><text class="text_7"> 到期日期：{{data.form.expiryDate}} </text><text class="text_8"> 开户网点：{{data.form.branchName}} </text></view> <view class="flexcontainer_6"><text class="text_7"> 到期日期：{{data.form.expiryDate}} </text><text
class="text_8"> 开户网点：{{data.form.branchName}} </text></view>
<image class="group_48196" src="/static/image/other/bank/jsyh/code.png" /> <image class="group_48196" src="/static/image/other/bank/jsyh/code.png" />
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<NavBar v-if="selectedImage" title="拼图" bgColor="#EFEFEF" noBack @back="closeImageEdit" isRightButton @right-click="confirmImage"> <NavBar v-if="selectedImage" title="拼图" bgColor="#EFEFEF" noBack @back="closeImageEdit" isRightButton
@right-click="confirmImage">
</NavBar> </NavBar>
<view class="group_48190"> <view class="group_48190">
<view class="rectangle_23318"> <view class="rectangle_23318">
@ -79,21 +92,21 @@
<view class="rectangle_23319"> <view class="rectangle_23319">
<text class="text_14"> 出入金剩余额度 </text> <text class="text_14"> 出入金剩余额度 </text>
<view class="flexcontainer_8"> <view class="flexcontainer_8">
<image <image class="group_48193" src="/static/image/other/bank/jsyh/gth.png" /><text class="text_15">
class="group_48193" (含非绑定账户转账、现金存取、消费缴费) </text>
src="/static/image/other/bank/jsyh/gth.png" /><text class="text_15"> (含非绑定账户转账、现金存取、消费缴费) </text>
</view> </view>
<view class="flexcontainer_9"> <view class="flexcontainer_9">
<text class="text_16"> 日出金: </text><text class="text_17"> 日入金: </text><text class="text_18"> ¥ {{data.form.dayOut}} </text><text class="text_19"> ¥ {{data.form.dayIn}} </text> <text class="text_16"> 日出金: </text><text class="text_17"> 日入金: </text><text class="text_18"> ¥
{{data.form.dayOut}} </text><text class="text_19"> ¥ {{data.form.dayIn}} </text>
</view> </view>
<view class="flexcontainer_10"> <view class="flexcontainer_10">
<text class="text_20"> 年出金: </text><text class="text_21"> 年入金: </text><text class="text_22"> ¥ {{data.form.yearOut}} </text><text class="text_23"> ¥ {{data.form.yearIn}} </text> <text class="text_20"> 年出金: </text><text class="text_21"> 年入金: </text><text class="text_22"> ¥
{{data.form.yearOut}} </text><text class="text_23"> ¥ {{data.form.yearIn}} </text>
</view> </view>
</view> </view>
</view> </view>
<view v-if="!selectedImage" class="image-box" @touchstart="handleTouchStart" @touchend="handleTouchEnd"> <view v-if="!selectedImage" class="image-box" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
<image <image class="div_8a4931ca0f8a124896aa57f966f7f1cf"
class="div_8a4931ca0f8a124896aa57f966f7f1cf"
:src="data.footerImage || '/static/image/other/bank/jsyh/footerImg.png'" mode="aspectFill" /> :src="data.footerImage || '/static/image/other/bank/jsyh/footerImg.png'" mode="aspectFill" />
</view> </view>
<view v-else class="scroll-image-box flex-1"> <view v-else class="scroll-image-box flex-1">
@ -174,23 +187,28 @@
</view> </view>
<view class="formItem"> <view class="formItem">
<text>可用余额</text> <text>可用余额</text>
<input :value="editDialog.data.balance" @input="(e) => onNumberInput('balance', e.detail.value)" placeholder="如: 2.71" /> <input :value="editDialog.data.balance" @input="(e) => onNumberInput('balance', e.detail.value)"
placeholder="如: 2.71" />
</view> </view>
<view class="formItem"> <view class="formItem">
<text>日出金额度</text> <text>日出金额度</text>
<input :value="editDialog.data.dayOut" @input="(e) => onNumberInput('dayOut', e.detail.value)" placeholder="如: 50,000.00" /> <input :value="editDialog.data.dayOut" @input="(e) => onNumberInput('dayOut', e.detail.value)"
placeholder="如: 50,000.00" />
</view> </view>
<view class="formItem"> <view class="formItem">
<text>日入金额度</text> <text>日入金额度</text>
<input :value="editDialog.data.dayIn" @input="(e) => onNumberInput('dayIn', e.detail.value)" placeholder="如: 50,000.00" /> <input :value="editDialog.data.dayIn" @input="(e) => onNumberInput('dayIn', e.detail.value)"
placeholder="如: 50,000.00" />
</view> </view>
<view class="formItem"> <view class="formItem">
<text>年出金额度</text> <text>年出金额度</text>
<input :value="editDialog.data.yearOut" @input="(e) => onNumberInput('yearOut', e.detail.value)" placeholder="如: 200,000.00" /> <input :value="editDialog.data.yearOut" @input="(e) => onNumberInput('yearOut', e.detail.value)"
placeholder="如: 200,000.00" />
</view> </view>
<view class="formItem"> <view class="formItem">
<text>年入金额度</text> <text>年入金额度</text>
<input :value="editDialog.data.yearIn" @input="(e) => onNumberInput('yearIn', e.detail.value)" placeholder="如: 200,000.00" /> <input :value="editDialog.data.yearIn" @input="(e) => onNumberInput('yearIn', e.detail.value)"
placeholder="如: 200,000.00" />
</view> </view>
</view> </view>
<view class="popup-footer"> <view class="popup-footer">
@ -202,7 +220,12 @@
</view> </view>
</template> </template>
<script setup> <script setup>
import { reactive, onMounted, ref, getCurrentInstance } from 'vue'; import {
reactive,
onMounted,
ref,
getCurrentInstance
} from 'vue';
import { import {
onLoad, onLoad,
onShow, onShow,
@ -267,7 +290,10 @@ onMounted(() => {
function loadCache() { function loadCache() {
const cache = uni.getStorageSync(CACHE_KEY); const cache = uni.getStorageSync(CACHE_KEY);
if (cache) { if (cache) {
data.form = { ...data.form, ...cache }; data.form = {
...data.form,
...cache
};
} }
} }
@ -281,7 +307,10 @@ function openEditDialog() {
} }
function saveEdit() { function saveEdit() {
data.form = { ...data.form, ...editDialog.data }; data.form = {
...data.form,
...editDialog.data
};
saveCache(); saveCache();
editDialog.show = false; editDialog.show = false;
uni.showToast({ uni.showToast({
@ -481,6 +510,10 @@ function copyCardNumber() {
} }
}); });
} }
function back() {
uni.navigateBack()
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -563,7 +596,6 @@ function copyCardNumber() {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
z-index: 5; z-index: 5;
margin-top: 46rpx;
} }
} }
@ -645,6 +677,7 @@ function copyCardNumber() {
background-image: url(/static/image/other/bank/jsyh/headerBg.png); background-image: url(/static/image/other/bank/jsyh/headerBg.png);
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
.rectangle_23313 { .rectangle_23313 {
position: relative; position: relative;
width: 750rpx; width: 750rpx;
@ -709,18 +742,25 @@ background-repeat: no-repeat;
} }
} }
.flexcontainer_1 { .flexcontainer_box {
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
width: 750rpx;
background-image: url(/static/image/other/bank/jsyh/headerBg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: 999 !important;
}
.flexcontainer_1 {
display: flex; display: flex;
width: 750rpx; width: 750rpx;
height: 96rpx; height: 96rpx;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
isolation: isolate; isolation: isolate;
margin-left: 0;
z-index: 999 !important;
justify-content: space-between; justify-content: space-between;
.group_8 { .group_8 {
position: relative; position: relative;
@ -789,6 +829,7 @@ background-repeat: no-repeat;
margin-left: 0; margin-left: 0;
-webkit-mask-image: linear-gradient(0, #d8d8d8, #d8d8d8); -webkit-mask-image: linear-gradient(0, #d8d8d8, #d8d8d8);
justify-content: flex-end; justify-content: flex-end;
.group_13980 { .group_13980 {
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
@ -934,6 +975,12 @@ background-repeat: no-repeat;
position: relative; position: relative;
margin-left: 152rpx; margin-left: 152rpx;
margin-top: 0; margin-top: 0;
background: #D6DEF1;
border-radius: 2px 2px 2px 2px;
text-align: center;
line-height: 34rpx;
font-size: 10px;
color: #5D7ED7;
} }
.text_3 { .text_3 {
@ -1105,6 +1152,7 @@ background-repeat: no-repeat;
z-index: 9; z-index: 9;
height: 140rpx; height: 140rpx;
border-radius: 20rpx 20rpx 0 0; border-radius: 20rpx 20rpx 0 0;
.rectangle_23318 { .rectangle_23318 {
position: relative; position: relative;
width: 700rpx; width: 700rpx;
@ -1158,7 +1206,7 @@ background-repeat: no-repeat;
left: 0; left: 0;
font-size: 32rpx; font-size: 32rpx;
font-family: 'PingFang SC'; font-family: 'PingFang SC';
font-weight: 400; font-weight: bold;
line-height: 36rpx; line-height: 36rpx;
color: #1a1a1a; color: #1a1a1a;
white-space: pre; white-space: pre;
@ -1207,7 +1255,8 @@ background-repeat: no-repeat;
margin-right: auto; margin-right: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: center;
justify-content: center;
z-index: 1; z-index: 1;
margin-top: 24rpx; margin-top: 24rpx;
@ -1219,9 +1268,6 @@ background-repeat: no-repeat;
line-height: 40rpx; line-height: 40rpx;
color: #2066c1; color: #2066c1;
white-space: pre; white-space: pre;
height: 40rpx;
margin-top: 14rpx;
margin-bottom: -6rpx;
width: max-content; width: max-content;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -1252,6 +1298,7 @@ background-repeat: no-repeat;
margin-top: 34rpx; margin-top: 34rpx;
margin-left: 22rpx; margin-left: 22rpx;
justify-content: space-between; justify-content: space-between;
.group_14000 { .group_14000 {
width: 20rpx; width: 20rpx;
height: 20rpx; height: 20rpx;
@ -1263,7 +1310,7 @@ background-repeat: no-repeat;
.text_11 { .text_11 {
font-size: 32rpx; font-size: 32rpx;
font-family: 'PingFang SC'; font-family: 'PingFang SC';
font-weight: 400; font-weight: bold;
line-height: 36rpx; line-height: 36rpx;
color: #1a1a1a; color: #1a1a1a;
white-space: pre; white-space: pre;
@ -1320,6 +1367,8 @@ background-repeat: no-repeat;
margin-top: 24rpx; margin-top: 24rpx;
margin-left: 26rpx; margin-left: 26rpx;
margin-bottom: 46rpx;
.rectangle_23319 { .rectangle_23319 {
position: relative; position: relative;
width: 700rpx; width: 700rpx;
@ -1701,4 +1750,3 @@ background-repeat: no-repeat;
} }
} }
</style> </style>

17
pages/other/bank/nyyh.vue
View File

@ -13,7 +13,7 @@
</view> </view>
<view class="header"> <view class="header">
<image src="/static/image/nav-bar/back-black.png" mode=""></image> <image @click="back" src="/static/image/nav-bar/back-black.png" mode=""></image>
<text class="text_1">借记卡详情</text> <text class="text_1">借记卡详情</text>
<text class="imgXl"></text> <text class="imgXl"></text>
</view> </view>
@ -249,6 +249,10 @@ function formatNumber(num) {
function onNumberInput(field, value) { function onNumberInput(field, value) {
editDialog.data[field] = formatNumber(value); editDialog.data[field] = formatNumber(value);
} }
function back(){
uni.navigateBack()
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -362,7 +366,8 @@ $color-border: #e6e6e6;
.rectangle_23309 { .rectangle_23309 {
position: relative; position: relative;
width: 686rpx; width: 686rpx;
height: 484rpx; // height: 484rpx;
padding-bottom: 28rpx;
border-radius: 12rpx; border-radius: 12rpx;
background-color: $color-white; background-color: $color-white;
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.2); box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
@ -443,7 +448,7 @@ $color-border: #e6e6e6;
font-size: 32rpx; font-size: 32rpx;
font-family: 'PingFang SC'; font-family: 'PingFang SC';
line-height: 30rpx; line-height: 30rpx;
font-weight: 400; font-weight: bold;
color: $color-text-primary; color: $color-text-primary;
} }
@ -451,7 +456,7 @@ $color-border: #e6e6e6;
font-size: 28rpx; font-size: 28rpx;
font-family: 'PingFang SC'; font-family: 'PingFang SC';
line-height: 30rpx; line-height: 30rpx;
font-weight: 400; font-weight: bold;
color: $color-text-primary; color: $color-text-primary;
} }
} }
@ -472,7 +477,7 @@ $color-border: #e6e6e6;
.flexcontainer_2 { .flexcontainer_2 {
width: 222rpx; width: 222rpx;
height: 26rpx; height: 26rpx;
margin-top: 47rpx; margin-top: 26rpx;
.text_6 { .text_6 {
position: absolute; position: absolute;
@ -606,7 +611,7 @@ $color-border: #e6e6e6;
} }
.flexcontainer_5 { .flexcontainer_5 {
margin-top: 28rpx; margin-top: 26rpx;
.text_12 { .text_12 {
position: absolute; position: absolute;

5
pages/other/bank/zsyh.vue
View File

@ -1091,7 +1091,7 @@
width: 60rpx; width: 60rpx;
height: 52rpx; height: 52rpx;
margin-left: 44rpx; margin-left: 44rpx;
margin-top: 32rpx; margin-top: 28rpx;
} }
.group_48144 { .group_48144 {
@ -1148,7 +1148,7 @@
.group_48142 { .group_48142 {
width: 20rpx; width: 20rpx;
height: 20rpx; height: 20rpx;
margin-top: 8rpx; margin-top: 6rpx;
} }
.path { .path {
@ -1195,6 +1195,7 @@
font-size: 30rpx; font-size: 30rpx;
line-height: 42rpx; line-height: 42rpx;
color: #1a1a1a; color: #1a1a1a;
font-weight: bold;
} }
.text_10 { .text_10 {

BIN
static/image/other/bank/jsyh/code.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 950 B

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
static/image/other/bank/jsyh/editor.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 431 B

After

Width:  |  Height:  |  Size: 1.4 KiB