银行卡界面优化显示

KyleBing · Dec 29, 2023 · d436dc0 · d436dc0
1 parent 48d05d7
commit d436dc0
Show file tree

Hide file tree

Showing 11 changed files with 1,523 additions and 1,276 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### v8.49 `2023-12-28`
 - 所有人可见：用户的日记数量统计
 - 登录输入邮箱之后显示该用户的头像
+- 银行卡界面优化显示
 
 ### v8.48 `2023-12-19`
 - 根据过往账单内容进行账单项目提示输入

diff --git a/design_files/银行图标.ai b/design_files/银行图标.ai
diff --git a/package.json b/package.json
@@ -23,7 +23,6 @@
     "clipboard": "^2.0.11",
     "core-js": "^3.26.1",
     "echarts": "^5.3.2",
-    "filemanager-webpack-plugin": "^8.0.0",
     "floating-vue": "^2.0.0-beta.20",
     "js-calendar-converter": "^0.0.6",
     "marked": "^4.2.4",
@@ -43,7 +42,8 @@
     "fiber": "^1.0.4",
     "sass": "^1.56.2",
     "sass-loader": "^13.2.0",
-    "vue-template-compiler": "^2.7.14"
+    "vue-template-compiler": "^2.7.14",
+    "filemanager-webpack-plugin": "^8.0.0"
   },
   "postcss": {
     "plugins": {

diff --git a/src/assets/img/SvgIcons.js b/src/assets/img/SvgIcons.js
@@ -120,6 +120,9 @@ export default {
         招商银行: require('./bankicon/招商银行.svg'),
         民生银行: require('./bankicon/民生银行.svg'),
         浦发银行: require('./bankicon/浦发银行.svg'),
+        广发银行: require('./bankicon/广发银行.svg'),
+        北京银行: require('./bankicon/北京银行.svg'),
+        交通银行: require('./bankicon/交通银行.svg'),
         银行: require('./bankicon/银行.svg'),
     }
 }
diff --git a/src/assets/img/bankicon/交通银行.svg b/src/assets/img/bankicon/交通银行.svg
diff --git a/src/assets/img/bankicon/北京银行.svg b/src/assets/img/bankicon/北京银行.svg
diff --git a/src/assets/img/bankicon/广发银行.svg b/src/assets/img/bankicon/广发银行.svg
diff --git a/src/assets/img/bankicon/银行.svg b/src/assets/img/bankicon/银行.svg
diff --git a/src/page/bankCard/BankCard.vue b/src/page/bankCard/BankCard.vue
@@ -1,9 +1,9 @@
 <template>
-    <div :class="['bankcard', getCardBgName(card.cardName)]">
+    <div :class="['bankcard', getBankInfo(card.cardName).bgColorClass]">
         <div class="bankcard-index">{{index + 1}}</div>
         <div class="bankcard-upper">
             <div class="bankcard-logo">
-                <img :src="getBankcardIcon(card.cardName)" alt="BankCard Icon">
+                <img :src="getBankInfo(card.cardName).icon" alt="BankCard Icon">
             </div>
             <div class="bankcard-main-info">
                 <div class="bankcard-title">
@@ -41,64 +41,52 @@ export default {
         index: 0
     },
     computed: {
-        mapCardBg(){
+        mapBankInfo(){
             let tempMap = new Map()
-            tempMap.set('招商', 'bank-bg-white')
-            tempMap.set('农行', 'bank-bg-green')
-            tempMap.set('工商', 'bank-bg-red')
-            tempMap.set('建行', 'bank-bg-blue')
-            return tempMap
-        },
-        mapBankIcon(){
-            let tempMap = new Map()
-            tempMap.set('中信银行', svgIcons.bank.中信银行)
-            tempMap.set('农业银行', svgIcons.bank.农业银行)
-            tempMap.set('工商银行', svgIcons.bank.工商银行)
-            tempMap.set('中国银行', svgIcons.bank.中国银行)
-            tempMap.set('建设银行', svgIcons.bank.建设银行)
-            tempMap.set('招商银行', svgIcons.bank.招商银行)
-            tempMap.set('民生银行', svgIcons.bank.民生银行)
-            tempMap.set('浦发银行', svgIcons.bank.浦发银行)
-            tempMap.set('银行', svgIcons.bank.银行)
+            tempMap.set('中信银行', {icon: svgIcons.bank.中信银行, bgColorClass: 'bank-bg-white'})
+            tempMap.set('农业银行', {icon: svgIcons.bank.农业银行, bgColorClass: 'bank-bg-green'})
+            tempMap.set('工商银行', {icon: svgIcons.bank.工商银行, bgColorClass: 'bank-bg-red'})
+            tempMap.set('中国银行', {icon: svgIcons.bank.中国银行, bgColorClass: 'bank-bg-white'})
+            tempMap.set('建设银行', {icon: svgIcons.bank.建设银行, bgColorClass: 'bank-bg-blue'})
+            tempMap.set('招商银行', {icon: svgIcons.bank.招商银行, bgColorClass: 'bank-bg-zhaoshang'})
+            tempMap.set('民生银行', {icon: svgIcons.bank.民生银行, bgColorClass: 'bank-bg-white'})
+            tempMap.set('浦发银行', {icon: svgIcons.bank.浦发银行, bgColorClass: 'bank-bg-white'})
+            tempMap.set('广发银行', {icon: svgIcons.bank.广发银行, bgColorClass: 'bank-bg-white'})
+            tempMap.set('北京银行', {icon: svgIcons.bank.北京银行, bgColorClass: 'bank-bg-white'})
+            tempMap.set('交通银行', {icon: svgIcons.bank.交通银行, bgColorClass: 'bank-bg-jiaotong'})
+            tempMap.set('银行',     {icon: svgIcons.bank.银行, bgColorClass: 'bank-bg-white'})
             return tempMap
         },
 
     },
     methods: {
-        getBankcardIcon(cardName){
+        getBankInfo(cardName){
             if (/招商/g.test(cardName)){
-                return this.mapBankIcon.get('招商银行')
+                return this.mapBankInfo.get('招商银行')
             } else if (/农行|农业/g.test(cardName)) {
-                return this.mapBankIcon.get('农业银行')
+                return this.mapBankInfo.get('农业银行')
             } else if (/中信/g.test(cardName)) {
-                return this.mapBankIcon.get('中信银行')
+                return this.mapBankInfo.get('中信银行')
             } else if (/工商/g.test(cardName)) {
-                return this.mapBankIcon.get('工商银行')
+                return this.mapBankInfo.get('工商银行')
             } else if (/建行|建设银行/g.test(cardName)) {
-                return this.mapBankIcon.get('建设银行')
+                return this.mapBankInfo.get('建设银行')
             } else if (/中行|中国银行/g.test(cardName)) {
-                return this.mapBankIcon.get('中国银行')
+                return this.mapBankInfo.get('中国银行')
             } else if (/招行|招商银行/g.test(cardName)) {
-                return this.mapBankIcon.get('招商银行')
+                return this.mapBankInfo.get('招商银行')
             } else if (/民生|民生银行/g.test(cardName)) {
-                return this.mapBankIcon.get('民生银行')
+                return this.mapBankInfo.get('民生银行')
             } else if (/浦发|浦发银行/g.test(cardName)) {
-                return this.mapBankIcon.get('浦发银行')
-            } else {
-                return this.mapBankIcon.get('银行')
-            }
-        },
-        getCardBgName(cardName){
-            if (/招商/g.test(cardName)){
-                return this.mapCardBg.get('招商')
-            } else if (/农行|农业/g.test(cardName)) {
-                return this.mapCardBg.get('农行')
-            } else if (/工商/g.test(cardName)) {
-                return this.mapCardBg.get('工商')
-            } else if (/建行|建设银行/g.test(cardName)) {
-                return this.mapCardBg.get('建行')
+                return this.mapBankInfo.get('浦发银行')
+            } else if (/广发|广发银行/g.test(cardName)) {
+                return this.mapBankInfo.get('广发银行')
+            } else if (/北京|北京银行/g.test(cardName)) {
+                return this.mapBankInfo.get('北京银行')
+            } else if (/交通|交通银行/g.test(cardName)) {
+                return this.mapBankInfo.get('交通银行')
             } else {
-                return 'bank-bg-white'
+                return this.mapBankInfo.get('银行')
             }
         },
     },

diff --git a/src/page/bankCard/BankCardList.vue b/src/page/bankCard/BankCardList.vue
@@ -77,14 +77,20 @@ export default {
                 {
                     cardName: '建设银行',
                     cardNo: '6226 2216 3456 0955',
-                    cardType: '储蓄卡',
-                    cardInitBank: '山东济南'
+                    cardType: '信用卡',
+                    extraInfos: [
+                        {key: '地址', value: '山东济南'},
+                        {key: '开户行', value: '山东济南财富广场分行'},
+                    ]
                 },
                 {
                     cardName: '中国银行',
                     cardNo: '4567 2216 3456 0955',
                     cardType: '储蓄卡',
-                    cardInitBank: '山东济南'
+                    extraInfos: [
+                        {key: '地址', value: '山东济南'},
+                        {key: '开户行', value: '山东济南财富广场分行'}
+                    ]
                 },
             ],
 
@@ -168,8 +174,7 @@ export default {
         },
         processCardInfo(allCardString){
             // card list
-            let tempStrArray = allCardString.split('\n\n')
-
+            let tempStrArray = allCardString.split('\n\n').filter(item => item.length > 0)
             // card item
             tempStrArray.forEach(cardStr => {
                 let cardMap = new Map(

diff --git a/src/page/bankCard/bank-card.scss b/src/page/bankCard/bank-card.scss
@@ -1,53 +1,62 @@
-$bank-card-gap: 20px;
+$bank-card-gap: 30px;
 $card-bgs: (
-        "green" : (#24b73d, #33c891),   // 农业
-        "red"   : (#ff6c6c, #ff8c8c),   // 工商
-        "blue"  : (#007ee0, #2e92ff),   // 建行
-        "white" : (#abab97, #dadada),   // 招商
+        "green"      : (#24b73d, #33c891),   // 农业
+        "red"        : (#ff7575, #fd9898),   // 工商
+        "blue"       : (#209bfa, #93ddee),   // 建行
+        "white"      : (#abab97, #dadada),   // 招商
+        "zhaoshang"  : (#a2d96d, #69adff, #c060fc, #e8b28c),   // 招商
+        "jiaotong"   : (#86bafd, #64e89a ),   // 交通
 );
 
 @each $name, $colors in $card-bgs {
   .bank-bg-#{$name}{
-    background: linear-gradient(-15deg,$colors);
+    background: linear-gradient(-15deg, $colors);
   }
 }
 
 .bankcard{
   display: flex;
   flex-flow: column nowrap;
-  border-top: 1px solid transparentize(white, 0.7);
+  border-top: 1px solid transparentize(white, 0.5);
+  border-left: 1px solid transparentize(white, 0.5);
   overflow: hidden;
   @include border-radius($radius-pc);
   width: 430px;
   min-height: 200px;
   color: $text-title;
-  @include box-shadow(1px 2px 3px transparentize(black, 0.8));
   position: relative;
+  @include box-shadow(3px 3px 0px transparentize(black, 0.5));
   background-color: transparentize(white, 0.4);
   margin-bottom: $bank-card-gap;
   margin-right: $bank-card-gap;
+  @include transition(all 0.3s);
   &:hover{
+    //transform: translateX();
+    @include transform(translateY(-5px) translateX(-1px));
+
+    @include transition(all 0.2s);
+    @include box-shadow(15px 15px 0px transparentize(black, 0.5));
     .bankcard-index {
+      color: white;
       opacity: 1;
     }
     .bankcard-no{
 
     }
   }
   .bankcard-index {
+    color: black;
     font-family: Monaco;
     font-size: $fz-small;
     position: absolute;
     top: 8px;
-    right: 10px;
-    color: black;
+    right: 12px;
     opacity: 0.5;
   }
   .bankcard-note{
     flex-shrink: 0;
     font-size: 12px;
-    text-shadow: -1px -1px 1px transparentize(white, 0.5),
-    1px 1px 0 transparentize(black, 0.7);
+    text-shadow: -1px -1px 1px transparentize(white, 0.5), 1px 1px 0 transparentize(black, 0.7);
   }
   .copy-btn{
     position: absolute;