123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180 |
- <template>
- <div class="container">
- <div class="head-bg"/>
- <div class="head-body">
- <div class="user-info-body">
- <van-image
- width="46px"
- height="46px"
- fit="cover"
- round
- src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
- />
- <div class="user-info">
- <div class="user-info-name">十里桃花</div>
- <div class="user-info-key-body">
- <span>xxxxXXXXddddBE</span>
- <svg-icon style="width: 24px; height: 24px;" name="copy" />
- </div>
- </div>
- </div>
- <van-row justify="end" class="user-info-row">
- <van-col span="6" >
- <div class="user-bar-icon-box">
- <svg-icon class="user-bar-icon" name="address-book"/>
- <span class="user-info-text">地址薄</span>
- </div>
- </van-col>
- <van-col span="6">
- <div class="user-bar-icon-box">
- <svg-icon class="user-bar-icon" name="bar-url"/>
- <span class="user-info-text">下载链接</span>
- </div>
- </van-col>
- <van-col span="6">
- <div class="user-bar-icon-box">
- <svg-icon class="user-bar-icon" name="wallet"/>
- <span class="user-info-text">钱包管理</span>
- </div>
- </van-col>
- <van-col span="6">
- <div class="user-bar-icon-box">
- <svg-icon class="user-bar-icon" name="id-card"/>
- <span class="user-info-text">个人资料</span>
- </div>
- </van-col>
- </van-row>
- </div>
- <!-- 用户索引栏 -->
- <van-list class="user-bar-list">
- <van-cell
- v-for="(item, index) in vanListConfig"
- :key="index"
- :class="index == vanListConfig.length - 1 ? 'user-bar-list-last' : ''"
- :title="item.title"
- is-link
- @click="evGoPath(item.url)"
- >
- <template #icon>
- <svg-icon class="cell-icon" :name="item.icon" />
- </template>
- </van-cell>
- </van-list>
- </div>
- </template>
- <script setup>
- const vanListConfig = [
- { title: '元宝兑换', icon:"ingot", url: '/' },
- { title: '竞赛', icon:"competition", url: '/' },
- { title: '节点分红', icon:"red-envelope", url: '/' },
- { title: '帮助中心', icon:"help", url: '/' },
- { title: '关于我们', icon:"me", url: '/' },
- { title: '系统设置', icon:"set", url: '/' },
- { title: '管理员设置', icon:"admin-set", url: '/' },
- ]
- const evGoPath = (path)=>{
- console.log(path)
- }
- </script>
- <style lang="less" scoped>
-
- .head-bg {
- height: 197px;
- width: 100%;
- background: linear-gradient(90deg, #71c4ff4d 0%, #6a92ff63 100%);
- filter: blur(54px);
- position: absolute;
- top: 0;
- z-index: -1;
- }
- .head-body {
- width: 100%;
- display: flex;
- flex-direction: column;
-
- .user-info-body {
- flex: 1;
- display: flex;
- padding: 44px 17px 0 17px;
- .user-info {
- margin-left: 17px;
- .user-info-name {
- font-size: 1.1rem;
- font-weight: 500;
- color: #4765dd;
- }
- .user-info-key-body{
- display: flex;
- align-items: center;
- font-weight: 400;
- font-size: 12px;
- color: #4F4F4F;
- span {
- margin-top: 4px;
- margin-right: 4px;
- }
- }
- }
- }
- .user-info-row {
- margin: 27px 17px 0 17px;
- height: 78px;
- min-height: 78px;
- background: #ffffff;
- box-shadow: 0px 4px 8px -2px rgba(25, 75, 137, 0.25);
- border-radius: 17px 17px 17px 17px;
- }
- .user-bar-icon-box{
- height: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- .user-bar-icon{
- width: 25px;
- height: 25px;
- }
- .user-info-text{
- font-weight: 400;
- font-size: 12px;
- color: #000000;
- margin-top: 5px;
- }
- }
- }
- .van-cell{
- height: 42px;
- background: #FFFFFF;
- border-bottom: 1px solid #FFFFFF;
- font-size: 15px ;
- &::after{
- border-bottom: 1px solid #F2F2F2;
- }
- }
- .user-bar-list-last::after{
- border-bottom: 0;
- }
- .user-bar-list{
- margin: 37px 17px 0 17px;
- border-radius: 12px 12px 12px 12px;
- overflow: hidden;
- .cell-icon{
- width: 21px;
- height: 21px;
- margin-right: 4px;
- }
- }
- </style>
|