|
|
@@ -13,7 +13,22 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="account-list">
|
|
|
- <div class="account-not">已绑定0个账号</div>
|
|
|
+ <div class="account-title">已绑定0个账号</div>
|
|
|
+ <div class="account-box">
|
|
|
+ <div class="account-info" v-for="i in 3" :key="i">
|
|
|
+ <van-image
|
|
|
+ width="44"
|
|
|
+ height="44"
|
|
|
+ fit="cover"
|
|
|
+ radius="4"
|
|
|
+ src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
|
|
|
+ />
|
|
|
+ <div class="account-right">
|
|
|
+ <div class="text1">奶盖</div>
|
|
|
+ <div class="text2">营地ID:7873837378</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<div class="bottom">
|
|
|
@@ -86,16 +101,26 @@ export default {
|
|
|
}
|
|
|
|
|
|
.account-list {
|
|
|
- padding: 20px 0;
|
|
|
+ margin-top: 20px;
|
|
|
+ background: #25283d;
|
|
|
|
|
|
- .account-not {
|
|
|
+ .account-title {
|
|
|
height: 56px;
|
|
|
- background: #25283d;
|
|
|
border-radius: 4px;
|
|
|
line-height: 56px;
|
|
|
text-align: center;
|
|
|
font-size: 14px;
|
|
|
color: #ffffff;
|
|
|
+ position: relative;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 16px;
|
|
|
+ right: 16px;
|
|
|
+ height: 1px;
|
|
|
+ background: #313346;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -109,4 +134,26 @@ export default {
|
|
|
background-color: @bg;
|
|
|
z-index: 20;
|
|
|
}
|
|
|
+.account-info {
|
|
|
+ .flex();
|
|
|
+ padding: 10px 16px;
|
|
|
+ .account-right {
|
|
|
+ flex-grow: 1;
|
|
|
+ margin-left: 10px;
|
|
|
+ .text1 {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #6a6d83;
|
|
|
+ line-height: 17px;
|
|
|
+ margin-top: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.account-box {
|
|
|
+ padding: 10px 0;
|
|
|
+}
|
|
|
</style>
|
