|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div class="wallet">
|
|
|
<el-col :span="24">
|
|
|
<div class="head-account">
|
|
|
<div class="balance">
|
|
@@ -244,278 +244,288 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.head-account {
|
|
|
- display: flex;
|
|
|
- .balance {
|
|
|
- border-radius: 5px;
|
|
|
- background-image: url(../../../static/image/wallet1.png);
|
|
|
- background-size: 100% 100%;
|
|
|
- width: 618px;
|
|
|
- height: 168px;
|
|
|
- padding-left: 25px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-bottom: 42px;
|
|
|
- cursor: pointer;
|
|
|
- .balance_name {
|
|
|
- font-size: 14px;
|
|
|
- line-height: 22px;
|
|
|
- font-weight: 400;
|
|
|
- color: #ffffff;
|
|
|
- padding-top: 24px;
|
|
|
- }
|
|
|
- .balance_price {
|
|
|
- font-size: 42px;
|
|
|
- line-height: 59px;
|
|
|
- font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
- margin: 8px 0;
|
|
|
- }
|
|
|
- .balance_sign {
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- color: #ffffff;
|
|
|
- opacity: 0.8;
|
|
|
- line-height: 17px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- img {
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- margin-right: 4px;
|
|
|
+.wallet {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ .head-account {
|
|
|
+ display: flex;
|
|
|
+ .balance {
|
|
|
+ border-radius: 5px;
|
|
|
+ background-image: url(../../../static/image/wallet1.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 618px;
|
|
|
+ height: 168px;
|
|
|
+ padding-left: 25px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 42px;
|
|
|
+ cursor: pointer;
|
|
|
+ .balance_name {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ padding-top: 24px;
|
|
|
+ }
|
|
|
+ .balance_price {
|
|
|
+ font-size: 42px;
|
|
|
+ line-height: 59px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ margin: 8px 0;
|
|
|
+ }
|
|
|
+ .balance_sign {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ opacity: 0.8;
|
|
|
+ line-height: 17px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ .coupon {
|
|
|
+ width: 298px;
|
|
|
+ height: 168px;
|
|
|
+ background-image: url(../../../static/image/wallet2.png);
|
|
|
+ }
|
|
|
}
|
|
|
- .coupon {
|
|
|
- width: 298px;
|
|
|
- height: 168px;
|
|
|
- background-image: url(../../../static/image/wallet2.png);
|
|
|
- }
|
|
|
-}
|
|
|
-.wallet-content {
|
|
|
- padding-left: 15px;
|
|
|
-}
|
|
|
-.recharge_title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
-}
|
|
|
-.recharge_color {
|
|
|
- width: 160px;
|
|
|
- background: #fc7200;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-.agreement {
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- color: #fc7200;
|
|
|
- margin-top: 10px;
|
|
|
- span {
|
|
|
- color: #3662a1;
|
|
|
- cursor: pointer;
|
|
|
+ .wallet-content {
|
|
|
+ padding-left: 15px;
|
|
|
}
|
|
|
-}
|
|
|
-.recharge_list /deep/ .el-input__inner {
|
|
|
- padding: 0 15px;
|
|
|
- height: 36px;
|
|
|
- border: none !important;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-.recharge_list {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- margin-top: 24px;
|
|
|
- margin-bottom: 10px;
|
|
|
- .item {
|
|
|
- position: relative;
|
|
|
- width: 200px;
|
|
|
- height: 40px;
|
|
|
- border: 1px solid #e6e6e6;
|
|
|
- color: #333333;
|
|
|
+ .recharge_title {
|
|
|
font-size: 16px;
|
|
|
font-weight: 500;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border-radius: 3px;
|
|
|
- margin: 0 15px 15px 0;
|
|
|
- cursor: pointer;
|
|
|
- .img {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- margin-right: 6px;
|
|
|
- }
|
|
|
- .choose {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- }
|
|
|
+ color: #333333;
|
|
|
}
|
|
|
- .item_ac {
|
|
|
- border-color: #fc7200;
|
|
|
+ .recharge_color {
|
|
|
+ width: 160px;
|
|
|
+ background: #fc7200;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .agreement {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
color: #fc7200;
|
|
|
+ margin-top: 10px;
|
|
|
+ span {
|
|
|
+ color: #3662a1;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-.recharge_list_m {
|
|
|
- .item {
|
|
|
- width: 90px;
|
|
|
+ .recharge_list /deep/ .el-input__inner {
|
|
|
+ padding: 0 15px;
|
|
|
height: 36px;
|
|
|
- margin: 0 24px 15px 0;
|
|
|
- position: relative;
|
|
|
- .item_tips {
|
|
|
- height: 19px;
|
|
|
- position: absolute;
|
|
|
- right: -22px;
|
|
|
- top: -28px;
|
|
|
- padding: 5px;
|
|
|
- background-image: url("../../../static/image/recharge.png");
|
|
|
- background-position: center;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: contain;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 100;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
+ border: none !important;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
-}
|
|
|
-.recharge_coupon {
|
|
|
- width: 100%;
|
|
|
- background: #fef2e9;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 3px 10px;
|
|
|
- margin-bottom: 42px;
|
|
|
- .recharge_coupon_top {
|
|
|
+ .recharge_list /deep/ input::placeholder {
|
|
|
+ font-size: 14px !important;
|
|
|
+ }
|
|
|
+ .recharge_list {
|
|
|
+ width: 100%;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- align-items: center;
|
|
|
- img {
|
|
|
- width: 28px;
|
|
|
- height: 30px;
|
|
|
- }
|
|
|
- .recharge_coupon_top_left {
|
|
|
- padding: 0 10px 0 8px;
|
|
|
+ margin-top: 24px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ position: relative;
|
|
|
+ width: 200px;
|
|
|
+ height: 40px;
|
|
|
+ border: 1px solid #e6e6e6;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- font-size: 16px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #fc7200;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin: 0 15px 15px 0;
|
|
|
+ cursor: pointer;
|
|
|
+ .img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ .choose {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
}
|
|
|
- .recharge_coupon_top_right {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- align-items: flex-end;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
+ .item_ac {
|
|
|
+ border-color: #fc7200;
|
|
|
color: #fc7200;
|
|
|
- padding-top: 2px;
|
|
|
- div {
|
|
|
- margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .recharge_list_m {
|
|
|
+ .item {
|
|
|
+ width: 90px;
|
|
|
+ height: 36px;
|
|
|
+ margin: 0 24px 15px 0;
|
|
|
+ position: relative;
|
|
|
+ .item_tips {
|
|
|
+ height: 19px;
|
|
|
+ position: absolute;
|
|
|
+ right: -22px;
|
|
|
+ top: -28px;
|
|
|
+ padding: 5px;
|
|
|
+ background-image: url("../../../static/image/recharge.png");
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 100;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .recharge_coupon_bottom {
|
|
|
- margin: 15px 17px;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- .recharge_coupon_bottom_item {
|
|
|
- width: 410px;
|
|
|
- height: 72px;
|
|
|
+ .recharge_coupon {
|
|
|
+ width: 880px;
|
|
|
+ background: #fef2e9;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 3px 10px;
|
|
|
+ margin-bottom: 42px;
|
|
|
+ .recharge_coupon_top {
|
|
|
display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- margin-bottom: 10px;
|
|
|
- margin-right: 24px;
|
|
|
- .recharge_coupon_bottom_left {
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 28px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ .recharge_coupon_top_left {
|
|
|
+ padding: 0 10px 0 8px;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
align-items: center;
|
|
|
- width: 110px;
|
|
|
- margin-top: 10px auto;
|
|
|
- text-align: center;
|
|
|
- border-radius: 8px;
|
|
|
- background-color: #fff;
|
|
|
- padding: 10px 0;
|
|
|
- .recharge_coupon_bottom_left_num {
|
|
|
- span {
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 20px;
|
|
|
- margin-left: 2px;
|
|
|
- color: #ec1414;
|
|
|
- }
|
|
|
- .num {
|
|
|
- font-size: 26px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #ec1414;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .recharge_coupon_bottom_sub {
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 20px;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fc7200;
|
|
|
}
|
|
|
- .recharge_coupon_bottom_middle {
|
|
|
+ .recharge_coupon_top_right {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: flex-end;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #fc7200;
|
|
|
+ padding-top: 2px;
|
|
|
div {
|
|
|
- height: 100%;
|
|
|
- padding: 10px 0;
|
|
|
- height: 55px;
|
|
|
- border-right: 1px dashed #ec1414;
|
|
|
- box-sizing: border-box;
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
}
|
|
|
- .recharge_coupon_bottom_right {
|
|
|
- border-radius: 8px;
|
|
|
- background-color: #fff;
|
|
|
- flex: 1;
|
|
|
- position: relative;
|
|
|
- padding: 10px;
|
|
|
+ }
|
|
|
+ .recharge_coupon_bottom {
|
|
|
+ margin: 15px 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .recharge_coupon_bottom_item {
|
|
|
+ width: 410px;
|
|
|
+ height: 72px;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .recharge_coupon_bottom_date {
|
|
|
- font-size: 18px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 25px;
|
|
|
- color: #333333;
|
|
|
- div:last-child {
|
|
|
- height: 20px;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ // margin-right: 24px;
|
|
|
+ .recharge_coupon_bottom_left {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 110px;
|
|
|
+ margin-top: 10px auto;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10px 0;
|
|
|
+ .recharge_coupon_bottom_left_num {
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-left: 2px;
|
|
|
+ color: #ec1414;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ font-size: 26px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ec1414;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .recharge_coupon_bottom_sub {
|
|
|
font-size: 14px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
line-height: 20px;
|
|
|
- color: #999999;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .recharge_coupon_bottom_middle {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ div {
|
|
|
+ height: 100%;
|
|
|
+ padding: 10px 0;
|
|
|
+ height: 55px;
|
|
|
+ border-right: 1px dashed #ec1414;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
- .recharge_coupon_bottom_number {
|
|
|
+ .recharge_coupon_bottom_right {
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: #fff;
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
+ padding: 10px;
|
|
|
display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- span {
|
|
|
- width: 63px;
|
|
|
- height: 22px;
|
|
|
- line-height: 22px;
|
|
|
- border: 1px solid #ec1414;
|
|
|
- border-radius: 18px;
|
|
|
- text-align: center;
|
|
|
- font-size: 12px;
|
|
|
+ .recharge_coupon_bottom_date {
|
|
|
+ font-size: 18px;
|
|
|
font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #ec1414;
|
|
|
- cursor: pointer;
|
|
|
- &:hover {
|
|
|
- background-color: #ec1414;
|
|
|
- color: #ffffff;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 25px;
|
|
|
+ color: #333333;
|
|
|
+ div:last-child {
|
|
|
+ height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .recharge_coupon_bottom_number {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ width: 63px;
|
|
|
+ height: 22px;
|
|
|
+ line-height: 22px;
|
|
|
+ border: 1px solid #ec1414;
|
|
|
+ border-radius: 18px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ec1414;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ background-color: #ec1414;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|