WindowBird/buddhism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
f34035aebd
buddhism/pages/nearbystores/index.vue

367 lines
8.2 KiB
Vue
Raw Normal View History

寺庙
2025-07-28 10:53:56 +08:00
<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">
login路由修正和h5界面适配
2025-07-30 13:38:33 +08:00
<view class="tubiao-item">
寺庙
2025-07-28 10:53:56 +08:00
<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>
login路由修正和h5界面适配
2025-07-30 13:38:33 +08:00
<view class="tubiao-item">
nearbystores界面修改
2025-07-28 17:28:52 +08:00
<image src="https://api.ccttiot.com/image-1753692152175.png" mode=""></image>
寺庙
2025-07-28 10:53:56 +08:00
</view>
</view>
<!-- 底部 -->
<view class="bot">
nearbystores界面修改
2025-07-28 17:28:52 +08:00
<view class="list">
首页-实现对子模块的路由跳转
2025-07-30 09:42:13 +08:00
<view class="li" @click="navigateToPage('monk')">
nearbystores界面修改
2025-07-28 17:28:52 +08:00
<image :src="NearbyImageEnum().MONK" mode=""></image>
<view class="da">
寺庙高僧
</view>
<view class="xiao">
VENERABLE MONK IN THE TEMPLE
</view>
</view>
首页-实现对子模块的路由跳转
2025-07-30 09:42:13 +08:00
<view class="li" @click="navigateToPage('activity')">
nearbystores界面修改
2025-07-28 17:28:52 +08:00
<image :src="NearbyImageEnum().ACTIVITY" mode=""></image>
<view class="da">
活动预告
</view>
<view class="xiao">
ACTIVITY NOTICE
</view>
</view>
首页-实现对子模块的路由跳转
2025-07-30 09:42:13 +08:00
<view class="li" @click="navigateToPage('news')">
nearbystores界面修改
2025-07-28 17:28:52 +08:00
<image :src="NearbyImageEnum().NEW" mode=""></image>
<view class="da">
新闻动态
</view>
<view class="xiao">
DYNAMICS
</view>
</view>
<view class="li">
</view>
<view class="li">
</view>
</view>
寺庙
2025-07-28 10:53:56 +08:00
<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">
首页-实现对子模块的路由跳转
2025-07-30 09:42:13 +08:00
<view class="li" @click="navigateToPage('walkInto')">
nearbystores界面修改
2025-07-28 17:28:52 +08:00
<image :src="NearbyImageEnum().WALK" mode=""></image>
寺庙
2025-07-28 10:53:56 +08:00
<view class="da">
走进平山
</view>
<view class="xiao">
WALK INTO PINGSHAN
</view>
</view>
首页-实现对子模块的路由跳转
2025-07-30 09:42:13 +08:00
<view class="li" @click="navigateToPage('institutionalStructure')">
nearbystores界面修改
2025-07-28 17:28:52 +08:00
<image :src="NearbyImageEnum().INSTITUTION" mode=""></image>
寺庙
2025-07-28 10:53:56 +08:00
<view class="da">
nearbystores界面修改
2025-07-28 17:28:52 +08:00
寺庙建制
寺庙
2025-07-28 10:53:56 +08:00
</view>
<view class="xiao">
TEMPLE INSTITUTIONAL STRUCTURE
</view>
</view>
首页-实现对子模块的路由跳转
2025-07-30 09:42:13 +08:00
<view class="li" @click="navigateToPage('abbot')">
nearbystores界面修改
2025-07-28 17:28:52 +08:00
<image :src="NearbyImageEnum().ABBOT" mode=""></image>
寺庙
2025-07-28 10:53:56 +08:00
<view class="da">
主持法师
</view>
<view class="xiao">
ABBOT MASTER
</view>
</view>
首页-实现对子模块的路由跳转
2025-07-30 09:42:13 +08:00
<view class="li" @click="navigateToPage('ancient')">
nearbystores界面修改
2025-07-28 17:28:52 +08:00
<image :src="NearbyImageEnum().ANCIENT" mode=""></image>
寺庙
2025-07-28 10:53:56 +08:00
<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>
nearbystores界面修改
2025-07-28 17:28:52 +08:00
import NearbyImageEnum from "../../enum/nearbyEnum";
路由跳转的封装
2025-07-30 10:10:31 +08:00
import { navigateToPage } from "../../utils/router.js";
寺庙
2025-07-28 10:53:56 +08:00
export default {
data() {
return {
marqueeText: '为保障广大善信的出行安全，营造有序、庄严的朝堂之上，不得懈怠神明',
marqueeX: '', // 初始位置，和marquee-wrap宽度一致
timer: null
}
},
mounted() {
this.startMarquee();
},
beforeDestroy() {
clearInterval(this.timer);
},
nearbystores界面修改
2025-07-28 17:28:52 +08:00
methods: {
NearbyImageEnum() {
return NearbyImageEnum
},
寺庙
2025-07-28 10:53:56 +08:00
startMarquee() {
// 估算文字宽度（每个字24rpx，可根据实际字体大小调整）
const textWidth = this.marqueeText.length * 24;
this.timer = setInterval(() => {
this.marqueeX--;
if (this.marqueeX < -textWidth) {
this.marqueeX = 600;
}
}, 16); // 约60帧
首页-实现对子模块的路由跳转
2025-07-30 09:42:13 +08:00
},
路由跳转的封装
2025-07-30 10:10:31 +08:00
// 页面跳转方法 - 使用路由仓库
首页-实现对子模块的路由跳转
2025-07-30 09:42:13 +08:00
navigateToPage(pageType) {
路由跳转的封装
2025-07-30 10:10:31 +08:00
navigateToPage(pageType);
寺庙
2025-07-28 10:53:56 +08:00
}
}
}
</script>
<style lang="scss">
page {
background-color: #fff;
}
login路由修正和h5界面适配
2025-07-30 13:38:33 +08:00
.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 */
}
寺庙
2025-07-28 10:53:56 +08:00
.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;
login路由修正和h5界面适配
2025-07-30 13:38:33 +08:00
/* H5环境下的透明度和触摸优化 */
/* #ifdef H5 */
background: transparent;
pointer-events: none;
/* #endif */
.tubiao-item {
/* #ifdef H5 */
pointer-events: auto;
/* #endif */
}
寺庙
2025-07-28 10:53:56 +08:00
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;
login路由修正和h5界面适配
2025-07-30 13:38:33 +08:00
/* H5环境下的透明度和触摸优化 */
/* #ifdef H5 */
background: transparent;
pointer-events: none;
/* #endif */
寺庙
2025-07-28 10:53:56 +08:00
.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;
}
}
nearbystores界面修改
2025-07-28 17:28:52 +08:00
.bot .list .li image {
width: 56rpx;
height: 56rpx;
}
寺庙
2025-07-28 10:53:56 +08:00
</style>
Reference in New Issue Copy Permalink