374 lines
8.5 KiB
Vue
374 lines
8.5 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- 背景图 -->
|
||
<image class="bj" src="https://api.ccttiot.com/smartmeter/img/static/uz3vQk44WkGnJPVjKrw1" mode="aspectFill"></image>
|
||
<!-- 公告 -->
|
||
<view class="announcement">
|
||
<image class="ggimg" src="https://api.ccttiot.com/smartmeter/img/static/uIm0UpcFxyLwYpwCIVcg" mode="" />
|
||
<view class="marquee-wrap">
|
||
<view class="marquee" :style="{ transform: `translateX(${marqueeX}rpx)` }">
|
||
{{ marqueeText }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 右侧图标 -->
|
||
<view class="tubiao">
|
||
<view class="tubiao-item">
|
||
<image v-if="false" src="https://api.ccttiot.com/smartmeter/img/static/uEC23p8oHigfvliOKvkL" mode=""></image>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/u0xTi5R31GxYwd7WxRhy" mode=""></image>
|
||
</view>
|
||
<view class="tubiao-item">
|
||
<image src="https://api.ccttiot.com/image-1753692152175.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<!-- 底部 -->
|
||
<view class="bot">
|
||
<view class="list">
|
||
<view class="li" @click="navigateToPage('monk')">
|
||
<image :src="NearbyImageEnum().MONK" mode=""></image>
|
||
<view class="da">
|
||
寺庙高僧
|
||
</view>
|
||
<view class="xiao">
|
||
VENERABLE MONK IN THE TEMPLE
|
||
</view>
|
||
</view>
|
||
<view class="li" @click="navigateToPage('activity')">
|
||
<image :src="NearbyImageEnum().ACTIVITY" mode=""></image>
|
||
<view class="da">
|
||
活动预告
|
||
</view>
|
||
<view class="xiao">
|
||
ACTIVITY NOTICE
|
||
</view>
|
||
</view>
|
||
<view class="li" @click="navigateToPage('news')">
|
||
<image :src="NearbyImageEnum().NEW" mode=""></image>
|
||
<view class="da">
|
||
新闻动态
|
||
</view>
|
||
<view class="xiao">
|
||
DYNAMICS
|
||
</view>
|
||
</view>
|
||
<view class="li" @click="navigateToPage('future')">
|
||
<image :src="NearbyImageEnum().FUTURE" mode=""></image>
|
||
<view class="da">
|
||
未来规划
|
||
</view>
|
||
<view class="xiao">
|
||
FUTURE PLANNING
|
||
</view>
|
||
</view>
|
||
<view class="li">
|
||
</view>
|
||
</view>
|
||
|
||
<view class="name">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ugNHTwXFgOT8JGofruez" mode=""></image> <text>寺庙开放时间</text> <image src="https://api.ccttiot.com/smartmeter/img/static/ugNHTwXFgOT8JGofruez" mode=""></image>
|
||
</view>
|
||
<view class="time">
|
||
08:00~18:00
|
||
</view>
|
||
<view class="hua">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uyz1LDPTjPqeOzBMjLZ7" mode=""></image>
|
||
</view>
|
||
<view class="list">
|
||
<view class="li" @click="navigateToPage('walkInto')">
|
||
<image :src="NearbyImageEnum().WALK" mode=""></image>
|
||
<view class="da">
|
||
走进平山
|
||
</view>
|
||
<view class="xiao">
|
||
WALK INTO PINGSHAN
|
||
</view>
|
||
</view>
|
||
<view class="li" @click="navigateToPage('institutionalStructure')">
|
||
<image :src="NearbyImageEnum().INSTITUTION" mode=""></image>
|
||
<view class="da">
|
||
寺庙建制
|
||
</view>
|
||
<view class="xiao">
|
||
TEMPLE INSTITUTIONAL STRUCTURE
|
||
</view>
|
||
</view>
|
||
<view class="li" @click="navigateToPage('abbot')">
|
||
<image :src="NearbyImageEnum().ABBOT" mode=""></image>
|
||
<view class="da">
|
||
主持法师
|
||
</view>
|
||
<view class="xiao">
|
||
ABBOT MASTER
|
||
</view>
|
||
</view>
|
||
<view class="li" @click="navigateToPage('ancient')">
|
||
<image :src="NearbyImageEnum().ANCIENT" mode=""></image>
|
||
<view class="da">
|
||
古刹巡礼
|
||
</view>
|
||
<view class="xiao">
|
||
ATOUR OF ANCIENT TEMPLE
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ucPuJT9zaH3VSoWzGwSE" mode=""></image>
|
||
<view class="rixing">
|
||
日行一善
|
||
</view>
|
||
<view class="qifu">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/u9muibj6c472a87zd6tp" mode=""></image>
|
||
<view class="zaixian">
|
||
<view class="da">
|
||
在线祈福
|
||
</view>
|
||
<view class="xiao">
|
||
ONLINE PRAYER
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import NearbyImageEnum from "../../enum/nearbyEnum";
|
||
import { navigateToPage } from "../../utils/router.js";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
marqueeText: '为保障广大善信的出行安全，营造有序、庄严的朝堂之上，不得懈怠神明',
|
||
marqueeX: '', // 初始位置，和marquee-wrap宽度一致
|
||
timer: null
|
||
}
|
||
},
|
||
mounted() {
|
||
this.startMarquee();
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(this.timer);
|
||
},
|
||
methods: {
|
||
NearbyImageEnum() {
|
||
return NearbyImageEnum
|
||
},
|
||
startMarquee() {
|
||
// 估算文字宽度（每个字24rpx，可根据实际字体大小调整）
|
||
const textWidth = this.marqueeText.length * 24;
|
||
this.timer = setInterval(() => {
|
||
this.marqueeX--;
|
||
if (this.marqueeX < -textWidth) {
|
||
this.marqueeX = 600;
|
||
}
|
||
}, 16); // 约60帧
|
||
},
|
||
// 页面跳转方法 - 使用路由仓库
|
||
navigateToPage(pageType) {
|
||
navigateToPage(pageType);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #fff;
|
||
}
|
||
.page {
|
||
/* H5环境下的优化 */
|
||
/* #ifdef H5 */
|
||
position: relative;
|
||
z-index: 1;
|
||
/* #endif */
|
||
}
|
||
.bj{
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
/* H5环境下的背景优化 */
|
||
/* #ifdef H5 */
|
||
object-fit: cover;
|
||
/* #endif */
|
||
}
|
||
.bot{
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 56rpx;
|
||
.bottom{
|
||
margin-top: 64rpx;
|
||
display: flex;
|
||
padding: 0 118rpx;
|
||
box-sizing: border-box;
|
||
image{
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
}
|
||
.rixing{
|
||
width: 206rpx;
|
||
height: 64rpx;
|
||
background: #522510;
|
||
border-radius: 45rpx 45rpx 45rpx 45rpx;
|
||
text-align: center;
|
||
line-height: 64rpx;
|
||
font-weight: 600;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
border-radius: 50rpx;
|
||
margin-left: 26rpx;
|
||
margin-right: 26rpx;
|
||
}
|
||
.qifu{
|
||
width: 194rpx;
|
||
height: 64rpx;
|
||
border-radius: 41rpx 41rpx 41rpx 41rpx;
|
||
border: 1rpx solid #522510;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
image{
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
.zaixian{
|
||
margin-left: 12rpx;
|
||
.da{
|
||
font-size: 24rpx;
|
||
color: #522510;
|
||
font-weight: 600;
|
||
}
|
||
.xiao{
|
||
font-size: 12rpx;
|
||
color: #522510;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.list{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 40rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 20rpx;
|
||
.li{
|
||
width: 150rpx;
|
||
text-align: center;
|
||
image{
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
}
|
||
.da{
|
||
font-size: 24rpx;
|
||
color: #522510;
|
||
margin-top: 8rpx;
|
||
}
|
||
.xiao{
|
||
font-size: 12rpx;
|
||
color: #522510;
|
||
}
|
||
}
|
||
}
|
||
.hua{
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 30rpx;
|
||
image{
|
||
width: 656rpx;
|
||
height: 108rpx;
|
||
}
|
||
}
|
||
.time{
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #522510;
|
||
margin-top: 8rpx;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
.name{
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
justify-content: center;
|
||
text{
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #522510;
|
||
margin-left: 24rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
image{
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
.tubiao{
|
||
width: 100%;
|
||
display: flex;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
justify-content: space-between;
|
||
/* H5环境下的透明度和触摸优化 */
|
||
/* #ifdef H5 */
|
||
background: transparent;
|
||
pointer-events: none;
|
||
/* #endif */
|
||
.tubiao-item {
|
||
/* #ifdef H5 */
|
||
pointer-events: auto;
|
||
/* #endif */
|
||
}
|
||
image{
|
||
width: 82rpx;
|
||
height: 82rpx;
|
||
display: block;
|
||
margin-top: 50rpx;
|
||
}
|
||
}
|
||
.announcement {
|
||
width: 100%;
|
||
margin-top: 184rpx;
|
||
padding: 0 48rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
/* H5环境下的透明度和触摸优化 */
|
||
/* #ifdef H5 */
|
||
background: transparent;
|
||
pointer-events: none;
|
||
/* #endif */
|
||
.ggimg {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 14rpx;
|
||
}
|
||
.marquee-wrap {
|
||
width: 600rpx;
|
||
overflow: hidden;
|
||
position: relative;
|
||
height: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.marquee {
|
||
white-space: nowrap;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
font-size: 24rpx;
|
||
color: #522510;
|
||
}
|
||
}
|
||
.bot .list .li image {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
}
|
||
</style> |