<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="">
				<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="">
				<image src="https://api.ccttiot.com/image-1753692152175.png" mode=""></image>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bot">
      <view class="list">
        <view class="li">
          <image :src="NearbyImageEnum().MONK" mode=""></image>
          <view class="da">
            寺庙高僧
          </view>
          <view class="xiao">
            VENERABLE MONK IN THE TEMPLE
          </view>
        </view>
        <view class="li">
          <image :src="NearbyImageEnum().ACTIVITY" mode=""></image>
          <view class="da">
            活动预告
          </view>
          <view class="xiao">
            ACTIVITY NOTICE
          </view>
        </view>
        <view class="li">
          <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>

			<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">
					<image :src="NearbyImageEnum().WALK" mode=""></image>
					<view class="da">
						走进平山
					</view>
					<view class="xiao">
						WALK INTO PINGSHAN
					</view>
				</view>
				<view class="li">
					<image :src="NearbyImageEnum().INSTITUTION" mode=""></image>
					<view class="da">
						寺庙建制
					</view>
					<view class="xiao">
						TEMPLE INSTITUTIONAL STRUCTURE
					</view>
				</view>
				<view class="li">
					<image :src="NearbyImageEnum().ABBOT" mode=""></image>
					<view class="da">
						主持法师
					</view>
					<view class="xiao">
						ABBOT MASTER
					</view>
				</view>
				<view class="li">
					<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";
	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帧
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.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;
		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;
		.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;
		}
	}
    .bj{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.bot .list .li image {
  width: 56rpx;
  height: 56rpx;
}
</style>