173 lines
3.8 KiB
Plaintext
173 lines
3.8 KiB
Plaintext
<style lang="less">
|
|
|
|
|
|
.header-image {
|
|
width: 100%;
|
|
height: 200px;
|
|
z-index: -1;
|
|
position: absolute;
|
|
top: 0;
|
|
|
|
}
|
|
|
|
.user-banner {
|
|
margin-top: 180px;
|
|
border-top: 1px solid #F2F3F5;
|
|
border-top-right-radius: 20px;
|
|
border-top-left-radius: 20px;
|
|
text-align: left;
|
|
background-color: #eeeeee;
|
|
height: 20px;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.menu-desc {
|
|
border: #cccccc 1px solid;
|
|
border-radius: 20px;
|
|
width: 250rpx;
|
|
height: 60px;
|
|
box-shadow: 4px 4px 10px #cccccc;
|
|
background-image: url("https://img.yzcdn.cn/vant/cat.jpeg");
|
|
padding: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.menu-desc-text {
|
|
margin-top: 5px;
|
|
font-size: 14px;
|
|
color: coral;
|
|
|
|
}
|
|
|
|
.grid-item {
|
|
background-color: #eeeeee;
|
|
}
|
|
|
|
.column-record-item {
|
|
border: transparent 1px solid;
|
|
border-radius: 20px;
|
|
box-shadow: 4px 4px 10px #cccccc;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.column-record-item-text {
|
|
font-size: 20px;
|
|
|
|
margin: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
|
|
</style>
|
|
<template>
|
|
|
|
<div>
|
|
<image class="header-image" :src="imageDefine.HOME_TITLE_IMAGE" />
|
|
<div class="user-banner" />
|
|
|
|
<view style="margin: 10px;display: flex;flex-direction: column;">
|
|
<van-row>
|
|
<van-col offset="1" span="4">
|
|
<van-image round width="80rpx" height="80rpx" :src="user.userInfo.avatar" />
|
|
</van-col>
|
|
<van-col offset="1" span="10">
|
|
<div class="fxc" style="display: flex;flex-direction: column;">
|
|
<span>{{user.userInfo.nickName}}</span>
|
|
<span>{{user.company}}</span>
|
|
</div>
|
|
</van-col>
|
|
<van-col offset="1" span="6">
|
|
<van-button round type="info">查看会籍</van-button>
|
|
</van-col>
|
|
</van-row>
|
|
|
|
|
|
<van-row style="margin-top: 20px;">
|
|
<van-col offset="1" span="11">
|
|
<div class="menu-desc fxc">
|
|
<span>润德庄园</span>
|
|
<span class="menu-desc-text">万亩有机生态园</span>
|
|
</div>
|
|
</van-col>
|
|
<van-col offset="1" span="11">
|
|
<div class="menu-desc fxc">
|
|
<span>了解产品</span>
|
|
<span class="menu-desc-text">新年有机新品</span>
|
|
</div>
|
|
</van-col>
|
|
</van-row>
|
|
|
|
|
|
<van-grid column-num="4" border="{{ false }}" style="margin-top: 15px;">
|
|
<van-grid-item use-slot v-for=" (item, index) in navDefine.HOME_MENU_LIST">
|
|
|
|
<van-image round width="120rpx" height="120rpx" :src="item.icon" />
|
|
<span>{{item.name}} </span>
|
|
</van-grid-item>
|
|
</van-grid>
|
|
|
|
|
|
<van-image width="100%" height="60px" :src="navDefine.HOME_BANNER.image" style="margin-top: 15px;" />
|
|
|
|
<span v-if="columnRecord.length > 0" style="margin:15px 0;font-weight: bold;">热门专题</span>
|
|
|
|
<div class="column-record-item" v-for="(item, index) in columnRecord">
|
|
<van-image width="100%" height="60px" :src="item.image" />
|
|
<div class="column-record-item-text">
|
|
<span>{{item.title}} </span>
|
|
<span style="font-size: 12px;font-weight: normal;">{{item.createTime}} </span>
|
|
</div>
|
|
|
|
</div>
|
|
</view>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import wepy from '@wepy/core'
|
|
import store from '@/store'
|
|
import { mapActions, mapState } from '@wepy/x'
|
|
|
|
wepy.component({
|
|
store,
|
|
hooks: {},
|
|
data: {
|
|
columnRecord: [
|
|
{
|
|
title: '标题标题标题标题标题',
|
|
createTime: '2000-11-11',
|
|
image: 'https://www.xiao4r.com/xiao4rstatic/img/doctor.png'
|
|
}
|
|
]
|
|
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
'imageDefine': state => state.imageDefine,
|
|
'user': state => state.user,
|
|
'navDefine': state => state.navDefine
|
|
})
|
|
},
|
|
|
|
methods: {},
|
|
|
|
ready() {
|
|
|
|
}
|
|
})
|
|
</script>
|
|
<config>
|
|
{
|
|
navigationBarTitleText: ''
|
|
}
|
|
</config>
|