146 lines
3.6 KiB
Vue
146 lines
3.6 KiB
Vue
<template>
|
||
<div class="AppMy">
|
||
<u-navbar title-color="#000" title-width="300" title-size="32" :title-bold="true" :background="backgroundNavbar" :is-back="false"></u-navbar>
|
||
<div class="my-bg"></div>
|
||
<div class="my-content">
|
||
<div class="user-info">
|
||
<div class="user-left">
|
||
<img src="./img/header-bg.png" alt="" class="user-img">
|
||
</div>
|
||
<div class="user-right">
|
||
<p>张总</p>
|
||
<div>党委书记</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="app-list">
|
||
<div class="item">
|
||
<div class="item-left">
|
||
<img src="./img/icon1.png" alt="" class="icon-img">应用1
|
||
</div>
|
||
<div class="item-right">
|
||
<img src="./img/right-icon.png" alt="" class="right-img">
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-left">
|
||
<img src="./img/icon2.png" alt="" class="icon-img">应用2
|
||
</div>
|
||
<div class="item-right">
|
||
<img src="./img/right-icon.png" alt="" class="right-img">
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {mapActions, mapState} from 'vuex'
|
||
|
||
export default {
|
||
name: 'AppDialogue',
|
||
appName: 'Copilot小助理（个人中心）',
|
||
customNavigation: true,
|
||
|
||
data() {
|
||
return {
|
||
backgroundNavbar: {
|
||
background: 'url(https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/header-bg.jpeg) no-repeat',
|
||
backgroundSize: 'cover',
|
||
},
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
...mapState(['user', 'token']),
|
||
},
|
||
|
||
onLoad() {
|
||
|
||
},
|
||
|
||
methods: {
|
||
...mapActions(['autoLogin']),
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.AppMy {
|
||
.my-bg {
|
||
width: 100%;
|
||
height: 420px;
|
||
background-image: url("https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/content-top-bg.png");
|
||
position: fixed;
|
||
top: 184px;
|
||
left: 0;
|
||
z-index: 1;
|
||
background-size: 100vw;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.my-content {
|
||
.user-info {
|
||
display: flex;
|
||
padding: 76px 0 56px 48px;
|
||
.user-left {
|
||
.user-img {
|
||
display: inline-block;
|
||
width: 96px;
|
||
height: 96px;
|
||
border: 4px solid #FFF;
|
||
border-radius: 50%;
|
||
margin-right: 26px;
|
||
}
|
||
}
|
||
.user-right {
|
||
padding-top: 4px;
|
||
p {
|
||
height: 48px;
|
||
font-family: PingFangSC-SNaNpxibold;
|
||
font-weight: 600;
|
||
font-size: 34px;
|
||
color: #333;
|
||
margin-bottom: 4px;
|
||
}
|
||
div {
|
||
height: 36px;
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 26px;
|
||
color: #8A929F;
|
||
}
|
||
}
|
||
}
|
||
.app-list {
|
||
width: calc(100% - 64px);
|
||
margin: 0 0 0 32px;
|
||
padding: 20px 32px;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
border-radius: 16px;
|
||
.item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 26px 0 28px 0;
|
||
.item-left {
|
||
line-height: 40px;
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 30px;
|
||
color: #222;
|
||
.icon-img {
|
||
width: 40px;
|
||
height: 40px;
|
||
margin-right: 24px;
|
||
vertical-align: bottom;
|
||
}
|
||
}
|
||
.item-right {
|
||
.right-img {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|