269 lines
6.6 KiB
Vue
269 lines
6.6 KiB
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" :custom-back="btnfh">
|
||
</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="145rpx" next-margin="145rpx" circular :duration="300" @change="onChange">
|
||
<swiper-item class="swiper-item" 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, 50)" :key="ci">{{ ch }}</text>
|
||
</view>
|
||
<view class="badge">
|
||
<text class="badge-char" v-for="(ch,ci) in splitText(item.badge, 10)" :key="ci">{{ ch }}</text>
|
||
</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: [],
|
||
fanhui:''
|
||
}
|
||
},
|
||
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(option) {
|
||
this.getlist()
|
||
if(option && option.fanhui){
|
||
this.fanhui = option.fanhui
|
||
}
|
||
},
|
||
// 分享到好友（会话）
|
||
onShareAppMessage: function() {
|
||
return {
|
||
title: '玩转福鼎',
|
||
path: '/page_user/wenhua/index?fanhui=1'
|
||
}
|
||
},
|
||
// 分享到朋友圈
|
||
onShareTimeline: function() {
|
||
return {
|
||
title: '玩转福鼎',
|
||
query: '',
|
||
path: '/page_user/wenhua/index?fanhui=1'
|
||
}
|
||
},
|
||
methods: {
|
||
btnfh(){
|
||
if(this.fanhui == 1){
|
||
uni.reLaunch({
|
||
url:'/pages/index/index'
|
||
})
|
||
}else{
|
||
uni.navigateBack()
|
||
}
|
||
},
|
||
// 请求文化列表
|
||
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, maxLength = null){
|
||
if(!str) return []
|
||
const text = String(str)
|
||
// 如果指定了最大长度，则截取并添加省略号
|
||
if(maxLength && text.length > maxLength) {
|
||
return Array.from(text.substring(0, maxLength) + '…')
|
||
}
|
||
return Array.from(text)
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
width: 100%;
|
||
}
|
||
.swiper-item{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.card{
|
||
width: 434rpx;
|
||
height: 702rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
perspective: 1200rpx;
|
||
transition: transform .35s ease, opacity .35s ease;
|
||
position: relative;
|
||
margin: 0 auto;
|
||
}
|
||
.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;
|
||
width: 70rpx;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
overflow: hidden;
|
||
}
|
||
.badge-char{
|
||
display: inline-block;
|
||
line-height: 28rpx;
|
||
height: 28rpx;
|
||
font-size: 22rpx;
|
||
color: #6b4b1d;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
.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> |