首页背景图

This commit is contained in:
shijingjing
2023-03-20 11:11:00 +08:00
parent 27c23f77e5
commit 6bcd9c870a
3 changed files with 120 additions and 98 deletions

View File

@@ -1,6 +1,7 @@
<template> <template>
<div class="page"> <div class="page">
<u-navbar :is-back="false" title="首页" title-color="#000" title-width="300" title-size="32" :background="backgroundNavbar" :title-bold="true"></u-navbar> <u-navbar :is-back="false" title="首页" title-color="#000" title-width="300" title-size="32" :background="backgroundNavbar" :title-bold="true"></u-navbar>
<div class="container">
<div class="swiper-content"> <div class="swiper-content">
<u-swiper :list="swiperList" mode="none" height="240" bg-color="none" @click="handleBannerClick"/> <u-swiper :list="swiperList" mode="none" height="240" bg-color="none" @click="handleBannerClick"/>
</div> </div>
@@ -26,8 +27,10 @@
<img src="https://cdn.cunwuyun.cn/fengdu/ic-jiaoyuhuzhu.png" alt="" @click="$linkTo('./mods/helpEachOther/helpEachOther')"> <img src="https://cdn.cunwuyun.cn/fengdu/ic-jiaoyuhuzhu.png" alt="" @click="$linkTo('./mods/helpEachOther/helpEachOther')">
</div> </div>
</div> </div>
<AiLogin ref="login"/> <AiLogin ref="login"/>
</div> </div>
</div>
</template> </template>
<script> <script>
import {mapActions, mapState} from 'vuex' import {mapActions, mapState} from 'vuex'
@@ -45,7 +48,8 @@ export default {
notices: [], notices: [],
search: {areaId: ''}, search: {areaId: ''},
backgroundNavbar: { backgroundNavbar: {
background: '#FFF' background: 'url(https://cdn.cunwuyun.cn/fengdu/mdpi_img-bg1.png) no-repeat',
backgroundSize: '100% auto',
} }
} }
}, },
@@ -168,14 +172,18 @@ export default {
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
// background-color: #F3F6F9; // background-color: #F3F6F9;
// background: url('./img/img-bg2.png') no-repeat; // background: url('https://cdn.cunwuyun.cn/fengdu/mdpi_img-bg2.png') no-repeat;
position: relative; position: relative;
.container{
background: url('https://cdn.cunwuyun.cn/fengdu/mdpi_img-bg2.png') no-repeat;
background: 100% auto;
.swiper-content { .swiper-content {
width: 100%; width: 100%;
height: 292px; height: 292px;
padding: 20px 32px 32px; padding: 20px 32px 32px;
box-sizing: border-box; box-sizing: border-box;
background: #FFF; // background: 'url(https://cdn.cunwuyun.cn/fengdu/img-bg2) no-repeat',;
} }
.grid-content { .grid-content {
@@ -245,5 +253,6 @@ export default {
} }
} }
} }
}
} }
</style> </style>

View File

@@ -4,14 +4,15 @@
:background="backgroundNavbar" :title-bold="true"></u-navbar> :background="backgroundNavbar" :title-bold="true"></u-navbar>
<div class="card"> <div class="card">
<div class="myself"> <div class="myself">
<img class="avatar" src="https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png" alt=""> <img class="avatar" :src="user.avatarUrl" alt="" v-if="user.avatarUrl">
<img class="avatar" src="https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png" alt="" v-else>
<div class="info"> <div class="info">
<div class="name">百里守约</div> <div class="name">{{ user.nickName }}</div>
<div class="area">百地社区</div> <div class="area">{{ user.areaName }}</div>
</div> </div>
</div> </div>
<div class="qr"> <div class="qr">
<img src="https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png" alt=""> <img :src="qrCode" alt="">
</div> </div>
<div class="my-qr">我的丰收码</div> <div class="my-qr">我的丰收码</div>
@@ -24,6 +25,7 @@
</template> </template>
<script> <script>
import { mapState } from 'vuex'
export default { export default {
name: "AppHarvestQR", name: "AppHarvestQR",
appName: '丰收码', appName: '丰收码',
@@ -32,14 +34,25 @@ export default {
return { return {
backgroundNavbar: { backgroundNavbar: {
background: '#FFF' background: '#FFF'
} },
qrCode: '',
} }
}, },
methods: { methods: {
getQrCode() {
this.$instance.post('/app/appwechatuserqujing/queryMyQrCode').then(res=> {
if(res?.data) {
this.qrCode = res.data
}
})
}
}, },
onShow() { computed: {
...mapState(['user'])
}, },
onLoad() {
this.getQrCode()
}
} }
</script> </script>
@@ -51,7 +64,6 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
background: #FFF;
border-radius: 16px; border-radius: 16px;
.myself { .myself {

View File

@@ -19,6 +19,7 @@
</div> </div>
<div class="jionGroup"> <div class="jionGroup">
<!-- <cell bind:startmessage='startmessage' bind:completemessage="completemessage" url='url' /> -->
<div>加入群聊</div> <div>加入群聊</div>
</div> </div>