roamfuding-xcx/page_user/wenhua/index.vue

<template>
	<view class="page">
		<u-navbar title=" " :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='36' id="navbar">
		</u-navbar>
		<image class="bj" src="https://api.ccttiot.com/smartmeter/img/static/uIVYivl2dWJoqdXhCYHQ" mode=""></image>
       <view class="title">
       	    名俗文化
       </view>
       <view class="carousel">
        	<swiper class="swiper" :current="current" previous-margin="140rpx" next-margin="150rpx" circular :duration="300" @change="onChange">
        		<swiper-item style="padding-left: 14rpx;" v-for="(item, index) in cards" :key="index">
        			<view class="card" :class="indexClassMap[index]">
        				<view class="card-inner">
        					<view class="card-header">
        						<view class="desc">
        							<text class="vchar" v-for="(ch,ci) in splitText(item.text)" :key="ci">{{ ch }}</text>
        						</view>
 							<view class="badge">{{ item.badge }}</view>
        					</view>
        					<image class="cover" :src="item.image" mode="aspectFill"></image>
        				</view>
 					<image class="img" src="https://api.ccttiot.com/smartmeter/img/static/uRHdVmKn2XOQoXZvFeu9" mode=""></image>
        			</view>
        		</swiper-item>
        	</swiper>
        	<view class="dots">
        		<view v-for="(d, i) in cards" :key="i" class="dot" :class="{ active: i === current }"></view>
        	</view>
       </view>
        <view class="anniu" @click="btnxq">
        	<image src="https://api.ccttiot.com/smartmeter/img/static/uK2BMmungMGE9Rieux2e" mode=""></image>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: " ",
                },
                current: 0,
                cards: []
			}
		},
		computed: {
			indexClassMap(){
				const len = this.cards.length || 0
				const map = {}
				for(let i=0;i<len;i++){
					if(i === this.current){ map[i] = 'is-center'; continue }
					if(i === (this.current - 1 + len) % len){ map[i] = 'is-left'; continue }
					if(i === (this.current + 1) % len){ map[i] = 'is-right'; continue }
					map[i] = 'is-back'
				}
				return map
			}
		},
		onLoad() {
           this.getlist()
		},
		methods: {
			// 请求文化列表
			getlist(){
				this.$u.get(`/app/article/list?pageNum=1&pageSize=999&type=2`).then((res) => {
					if(res.code == 200){
						res.rows.forEach(item =>{
							this.cards.push({
								badge:item.title,
								text:item.description,
								image:item.picture,
								id:item.id,
								type:item.type
							})
						})
					}
				})
			},
			// 点击进入详情
			btnxq(){
				uni.navigateTo({
					url:'/page_user/wenhua/wenhuaxq?id=' + this.cards[this.current].id
				})
			},
			onChange(e){
				this.current = e.detail.current
			},
			splitText(str){
				if(!str) return []
				return Array.from(String(str))
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
	.anniu{
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 208rpx;
		image{
			width: 330rpx;
			height: 94rpx;
		}
	}
 	.img{
 		width: 474rpx;
 		height: 724rpx;
 		position: absolute;
 		top: 0;
 		left: 50%;
		transform: translateX(-50%);
 		z-index: -1;
 	}
	.bj{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
    .title{
		width: 100%;
		text-align: center;
		margin-top: 32rpx;
		font-weight: 600;
		font-size: 48rpx;
		color: #664608;
	}

  /* 3D 轮播 */
  .carousel{
    margin-top: 40rpx;
  }
  .swiper{
    height: 720rpx;
	margin-top: 86rpx;
  }
  .card{
    width: 434rpx;
    height: 702rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200rpx;
    transition: transform .35s ease, opacity .35s ease;
	position: relative;
  }
  .card-inner{
    width: 434rpx;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .card-header{
    padding: 20rpx 26rpx;
	padding-top: 50rpx;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  /* 竖排描述：从右往左，逐字换列 */
  .desc{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    direction: rtl;
    height: 360rpx; /* 可按需要调整每列字数：高度 / 行高 ≈ 每列字数 */
    width: 300rpx;
    overflow: hidden;
  }
  .vchar{
    display: inline-block;
    line-height: 36rpx;
    height: 36rpx;
    font-size: 26rpx;
    color: #6b4b1d;
    letter-spacing: 2rpx;
  }
  .badge{
    padding: 12rpx 16rpx;
    border: 2rpx solid #b79d6b;
    color: #6b4b1d;
    border-radius: 8rpx;
    margin-left: 20rpx;
    font-weight: 600;
    max-height: 100%;
	width: 70rpx;
	text-align: center;
  }
  .cover{
    width: 424rpx;
    height: 246rpx;
    margin-left: 6rpx;
    margin-bottom: 2rpx;
  }
  /* 3D位移与缩放 */
  .card.is-center{ transform: translateZ(0) scale(1); opacity: 1; }
  .card.is-left{ transform: translateX(-36rpx) scale(.88) rotateY(8deg); opacity: .8; }
  .card.is-right{ transform: translateX(36rpx) scale(.88) rotateY(-8deg); opacity: .8; }
  .card.is-back{ transform: scale(.8); opacity: .6; }

  .dots{ margin-top: 22rpx; display: flex; justify-content: center; gap: 14rpx; }
  .dot{ width: 14rpx; height: 14rpx; background: #b8a88a; border-radius: 50%; opacity: .6; }
  .dot.active{ width: 18rpx; height: 18rpx; background: #6b4b1d; opacity: 1; border-radius: 50%; }
</style>