首页背景图
This commit is contained in:
shijingjing
@@ -1,32 +1,35 @@
|
|||||||
<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="swiper-content">
|
<div class="container">
|
||||||
<u-swiper :list="swiperList" mode="none" height="240" bg-color="none" @click="handleBannerClick"/>
|
<div class="swiper-content">
|
||||||
</div>
|
<u-swiper :list="swiperList" mode="none" height="240" bg-color="none" @click="handleBannerClick"/>
|
||||||
<div class="grid-content">
|
</div>
|
||||||
<u-grid :col="4" hover-class="text-hover" :border="false">
|
<div class="grid-content">
|
||||||
<u-grid-item v-for="(item, index) in grids" :key="index" :custom-style="{padding:'8px 0'}" bg-color="none"
|
<u-grid :col="4" hover-class="text-hover" :border="false">
|
||||||
class="grid-item" @click="handleClick(item)">
|
<u-grid-item v-for="(item, index) in grids" :key="index" :custom-style="{padding:'8px 0'}" bg-color="none"
|
||||||
<img :src="item.pictureUrl" alt=""/>
|
class="grid-item" @click="handleClick(item)">
|
||||||
<div class="grid-text">{{ item.name }}</div>
|
<img :src="item.pictureUrl" alt=""/>
|
||||||
</u-grid-item>
|
<div class="grid-text">{{ item.name }}</div>
|
||||||
</u-grid>
|
</u-grid-item>
|
||||||
</div>
|
</u-grid>
|
||||||
<div class="notice">
|
</div>
|
||||||
<img :src="`${cdn}/notice-new.png`" alt="">
|
<div class="notice">
|
||||||
<u-notice-bar mode="vertical" color="#4181FF" style="flex: 1;" :volume-icon="false" :is-circular="false"
|
<img :src="`${cdn}/notice-new.png`" alt="">
|
||||||
duration="5000" speed="5000" :list="noticeList" @click="clickNotice"/>
|
<u-notice-bar mode="vertical" color="#4181FF" style="flex: 1;" :volume-icon="false" :is-circular="false"
|
||||||
</div>
|
duration="5000" speed="5000" :list="noticeList" @click="clickNotice"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<img class="card-left" src="https://cdn.cunwuyun.cn/fengdu/img-fengshouyinhang.png" @click="$linkTo('/mods/newFarmerBank/newFarmerBank')" alt="">
|
<img class="card-left" src="https://cdn.cunwuyun.cn/fengdu/img-fengshouyinhang.png" @click="$linkTo('/mods/newFarmerBank/newFarmerBank')" alt="">
|
||||||
<div class="card-right">
|
<div class="card-right">
|
||||||
<img src="https://cdn.cunwuyun.cn/fengdu/img-fengduxinnongren.png" alt="" @click="$linkTo('./mods/newFarmer/newFarmer')">
|
<img src="https://cdn.cunwuyun.cn/fengdu/img-fengduxinnongren.png" alt="" @click="$linkTo('./mods/newFarmer/newFarmer')">
|
||||||
<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>
|
||||||
|
|
||||||
|
<AiLogin ref="login"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<AiLogin ref="login"/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@@ -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,80 +172,85 @@ 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;
|
||||||
.swiper-content {
|
|
||||||
width: 100%;
|
|
||||||
height: 292px;
|
|
||||||
padding: 20px 32px 32px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: #FFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-content {
|
.container{
|
||||||
box-sizing: border-box;
|
background: url('https://cdn.cunwuyun.cn/fengdu/mdpi_img-bg2.png') no-repeat;
|
||||||
background: #FFF;
|
background: 100% auto;
|
||||||
.grid-item {
|
.swiper-content {
|
||||||
img {
|
width: 100%;
|
||||||
width: 108px;
|
height: 292px;
|
||||||
height: 108px;
|
padding: 20px 32px 32px;
|
||||||
object-fit: fill;
|
box-sizing: border-box;
|
||||||
}
|
// background: 'url(https://cdn.cunwuyun.cn/fengdu/img-bg2) no-repeat',;
|
||||||
|
}
|
||||||
|
|
||||||
.grid-text {
|
.grid-content {
|
||||||
font-size: 26px;
|
box-sizing: border-box;
|
||||||
font-weight: 400;
|
background: #FFF;
|
||||||
color: #333333;
|
.grid-item {
|
||||||
line-height: 36px;
|
img {
|
||||||
|
width: 108px;
|
||||||
|
height: 108px;
|
||||||
|
object-fit: fill;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-text {
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .notice {
|
::v-deep .notice {
|
||||||
width: 684px;
|
width: 684px;
|
||||||
height: 88px;
|
height: 88px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
margin: 30px auto 30px;
|
margin: 30px auto 30px;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
|
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
& > img {
|
& > img {
|
||||||
width: 128px;
|
width: 128px;
|
||||||
height: 52px;
|
height: 52px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-news-item {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
.card {
|
||||||
.u-news-item {
|
background: #FFF;
|
||||||
text-overflow: ellipsis;
|
padding: 32px;
|
||||||
overflow: hidden;
|
box-sizing: border-box;
|
||||||
white-space: nowrap;
|
display: flex;
|
||||||
}
|
justify-content: space-between;
|
||||||
}
|
width: 100%;
|
||||||
.card {
|
.card-left {
|
||||||
background: #FFF;
|
width: 322px;
|
||||||
padding: 32px;
|
height: 462px;
|
||||||
box-sizing: border-box;
|
}
|
||||||
display: flex;
|
.card-right {
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
.card-left {
|
|
||||||
width: 322px;
|
|
||||||
height: 462px;
|
|
||||||
}
|
|
||||||
.card-right {
|
|
||||||
width: 334px;
|
|
||||||
height: 462px;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 334px;
|
width: 334px;
|
||||||
height: 216px;
|
height: 462px;
|
||||||
}
|
|
||||||
img:last-child {
|
img {
|
||||||
margin-top: 24px;
|
width: 334px;
|
||||||
|
height: 216px;
|
||||||
|
}
|
||||||
|
img:last-child {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user