wenfp/temple-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

对接接口

Browse Source
This commit is contained in:
wenfp
2021-11-03 21:02:22 +08:00
parent 411ecf4c05
commit c5c2f661a0
71 changed files with 5436 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/home.vue
+163 -20
View File
@@ -3,33 +3,106 @@
<van-nav-bar title="自在福田" style="background: #BF9330; color: white" />
<van-search v-model="value" placeholder="寺院、主持、监寺" />
<div class="container">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item>
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
</van-swipe-item>
<van-swipe-item>
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
</van-swipe-item>
<van-swipe-item>
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
</van-swipe-item>
<van-swipe-item>
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
</van-swipe-item>
</van-swipe>
<van-grid>
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
<div class="swiper">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item>
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
</van-swipe-item>
<van-swipe-item>
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
</van-swipe-item>
<van-swipe-item>
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
</van-swipe-item>
<van-swipe-item>
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
</van-swipe-item>
</van-swipe>
</div>
<van-grid :border="false">
<van-grid-item icon="photo-o" text="佛前供灯" />
<van-grid-item icon="photo-o" text="日行一善" />
<van-grid-item icon="photo-o" text="祈福" />
<van-grid-item icon="photo-o" text="放生修福" />
<van-grid-item icon="photo-o" text="供养三宝" />
<van-grid-item icon="photo-o" text="供奉排位" />
<van-grid-item icon="photo-o" text="捐建寺院" />
<van-grid-item icon="photo-o" text="功德箱" />
</van-grid>
<van-notice-bar
border
left-icon="https://img2.baidu.com/it/u=2192265457,2884791613&fm=26&fmt=auto"
:scrollable="false"
mode="closeable"
text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
/>
</div>
<div class="divider"></div>
<div class="panel">
<div class="panel-head">
<span class="title">功德无量</span>
<span class="external">更多</span>
</div>
<div class="panel-body">
<div class="merit-group">
<div class="merit">
<img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
<p class="title">为佛像贴金身，菩萨菩萨</p>
</div>
<div class="merit">
<img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
<p class="title">为佛像贴金身，菩萨菩萨</p>
</div>
<div class="merit">
<img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
<p class="title">为佛像贴金身，菩萨菩萨</p>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div class="panel">
<div class="panel-head">
<span class="title">进展状态</span>
<span class="external">更多</span>
</div>
<div class="panel-body">
<div class="process-more">
<span>查看更多进展状态</span>
<i class="iconfont icon-arrow-right"></i>
</div>
</div>
<div class="divider"></div>
<div class="merit-rank-container">
<div class="head">
<span class="title">感恩功德</span>
<div class="list">
<span class="current">实时</span>
<span>月榜</span>
<span>总榜</span>
</div>
</div>
<div class="body">
<user-merit></user-merit>
<user-merit></user-merit>
<user-merit></user-merit>
<user-merit></user-merit>
<user-merit></user-merit>
<user-merit></user-merit>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
value: ''
}
}
}
</script>
@@ -37,8 +110,38 @@ export default {
.van-nav-bar__title{
color: white;
}
.merit-rank-container{
.head{
padding: .53rem .4rem;
padding-bottom: .13rem;
display: flex;
justify-content: space-between;
.title{
font-size: .43rem;
color: #222222;
}
.list{
display: flex;
span{
font-size: .37rem;
color: #999999;
display: inline-block;
margin-left: .4rem;
border-bottom: .03rem solid transparent;
padding-bottom: .13rem;
}
span.current{
color: #222;
border-bottom-color: rgb(168, 28, 28);
}
}
}
}
.container{
padding: .4rem;
padding-bottom: .53rem;
.my-swipe .van-swipe-item {
color: #fff;
font-size: 20px;
@@ -50,5 +153,45 @@ export default {
border-radius: .16rem;
}
}
.swiper{
margin-bottom: .4rem;
}
.van-notice-bar{
border: 1px solid #E6B759;
border-radius: .16rem;
}
}
.merit{
width: 3.39rem;
height: 3.39rem;
display: inline-block;
position: relative;
border-radius: .16rem;
vertical-align: top;
overflow: hidden;
& ~ .merit{
margin-left: .4rem;
}
img{
width: 100%;
height: 100%;
}
.title{
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: .91rem;
background: rgba(0,0,0,0.7);
color: white;
line-height: .91rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .37rem;
padding: 0 .11rem;
}
}
</style>