|
|
|
<template>
|
|
|
|
<view class="bg">
|
|
|
|
<headerVue :type="'article'" />
|
|
|
|
|
|
|
|
<view class="start-swiper" v-show="isShow && startSwiper && startSwiper.length > 0" @click="this.isShow = false">
|
|
|
|
<swiper class="start-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="500"
|
|
|
|
@change="onSwiperChange">
|
|
|
|
<swiper-item v-for="(item, index) in startSwiper" :key="index">
|
|
|
|
<image :src="showImg(item.head_img)" mode="aspectFill"></image>
|
|
|
|
</swiper-item>
|
|
|
|
</swiper>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<!-- <view class="top-box">
|
|
|
|
<swiper class="carousel-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="500"
|
|
|
|
@change="onSwiperChange">
|
|
|
|
<swiper-item v-for="(item, index) in swiperList" :key="index">
|
|
|
|
<image :src="showImg(item.head_img)" mode=""></image>
|
|
|
|
</swiper-item>
|
|
|
|
</swiper>
|
|
|
|
<view class="exhibit-issue">issue/0{{ currentIndex + 1 }}</view>
|
|
|
|
底部指示点
|
|
|
|
<view class="custom-indicators">
|
|
|
|
<view v-for="(_, index) in swiperList" :key="index"
|
|
|
|
:class="['indicator-dot', {'active': index === currentIndex}]"></view>
|
|
|
|
</view>
|
|
|
|
</view> -->
|
|
|
|
|
|
|
|
<uni-swiper-dot class="uni-swiper-dot-box" :info="swiperList" :current="current" :mode="mode"
|
|
|
|
:dots-styles="dotsStyles" field="content">
|
|
|
|
<swiper class="swiper-box" @change="change" :current="swiperDotIndex" :style="{height : swiperHeight + 'px'}">
|
|
|
|
<swiper-item v-for="(item, index) in swiperList" :key="index" @click="gotoUrlNew(item)">
|
|
|
|
<image :src="showImg(item.head_img)" mode="widthFix" :id="`swiper-item-${index}`"></image>
|
|
|
|
</swiper-item>
|
|
|
|
</swiper>
|
|
|
|
</uni-swiper-dot>
|
|
|
|
|
|
|
|
<!-- <swiper class="category-scroll">
|
|
|
|
<swiper-item v-for="(item, index) in categories" :key="index" @click="gotoUrlNew(item)">
|
|
|
|
<image :src="showImg(item.head_img)" mode="aspectFill"></image>
|
|
|
|
</swiper-item>
|
|
|
|
</swiper> -->
|
|
|
|
|
|
|
|
<!-- <view class="category-scroll" v-if="categories && categories.length > 0">
|
|
|
|
<video src="https://static.ticket.sz-trip.com/epicSoul/category.mp4" :poster="showImg(categories[0].head_img)" objectFit="cover"></video>
|
|
|
|
</view> -->
|
|
|
|
|
|
|
|
<view class="category-scroll">
|
|
|
|
<video src="https://static.ticket.sz-trip.com/epicSoul/categorys.mp4" objectFit="cover"></video>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<view class="title-box">
|
|
|
|
阅读合集
|
|
|
|
<image src="https://static.ticket.sz-trip.com/epicSoul/readingBody/titleSpan.png" mode=""></image>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<view class="reading-title flex-between" v-if="false">
|
|
|
|
<!-- <view v-for="(item,index) in readingType" :key="index" @click="changeType(index)">{{item.title}}</view>
|
|
|
|
<span :style="{left: readingIndex == 0 ? '32rpx' : (readingIndex == 1 ? '245rpx' : '448rpx')}"></span> -->
|
|
|
|
</view>
|
|
|
|
<view class="reading-box">
|
|
|
|
<image v-for="(item,index) in readingList" :key="index" :src="showImg(item.image)" @click="gotoUrlNew(item)"></image>
|
|
|
|
<image :src="showImg('/uploads/20250903/1aadd1b9a4c94ff0aa6b3f880a725b50.png')" @click="gotoUrlNew({jump_type:2,front_model:{mini:'/xqk/home/home'}})"></image>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<CustomTabBar :currentTab="1" />
|
|
|
|
<MusicControl />
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import headerVue from "@/components/header.vue";
|
|
|
|
import CustomTabBar from '@/components/CustomTabBar.vue';
|
|
|
|
import MusicControl from '@/components/MusicControl.vue';
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
headerVue,
|
|
|
|
CustomTabBar,
|
|
|
|
MusicControl
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
swiperList: [],
|
|
|
|
current: 0,
|
|
|
|
swiperDotIndex: 0,
|
|
|
|
swiperHeight: 524,
|
|
|
|
mode: 'round',
|
|
|
|
dotsStyles: {
|
|
|
|
selectedBackgroundColor: 'rgb(133, 133, 133)',
|
|
|
|
selectedBorder: 'none',
|
|
|
|
backgroundColor: 'rgba(150, 150, 150, 0.5)',
|
|
|
|
border: 'none'
|
|
|
|
},
|
|
|
|
currentIndex: 0,
|
|
|
|
categories: [],
|
|
|
|
readingList: [],
|
|
|
|
readingType: [{title: '2025', id: 3}, {title: '2026', id: 6}, {title: '全部', id: ''},],
|
|
|
|
readingIndex: 0,
|
|
|
|
startSwiper: [],
|
|
|
|
isShow: true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onReady() {
|
|
|
|
this.sendRequest()
|
|
|
|
},
|
|
|
|
onShow() {
|
|
|
|
const app = getApp();
|
|
|
|
if(app.globalData.musicSrc != 'https://static.ticket.sz-trip.com/epicSoul/EpicSouls.mp3') {
|
|
|
|
app.updateMusicSrc('https://static.ticket.sz-trip.com/epicSoul/EpicSouls.mp3');
|
|
|
|
app.initBackgroundMusic(); // 初始化背景音乐
|
|
|
|
uni.$bgMusic.play(); // 播放音乐
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
sendRequest() {
|
|
|
|
this.Post({
|
|
|
|
type_id: 3,
|
|
|
|
position: 2,
|
|
|
|
}, '/api/adv/getAdv').then(res => {
|
|
|
|
if(res.data) {
|
|
|
|
this.swiperList = res.data;
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.change({detail: {current: 0}})
|
|
|
|
})
|
|
|
|
},500)
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
this.Post({
|
|
|
|
type_id: 3,
|
|
|
|
position: 1,
|
|
|
|
}, '/api/adv/getAdv').then(res => {
|
|
|
|
if(res.data) {
|
|
|
|
this.categories = res.data;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
this.Post({
|
|
|
|
type_id: 3,
|
|
|
|
position: 4,
|
|
|
|
}, '/api/adv/getAdv').then(res => {
|
|
|
|
if(res.data) {
|
|
|
|
this.startSwiper = res.data;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
this.getList()
|
|
|
|
},
|
|
|
|
// 全部阅读 文章
|
|
|
|
getList() {
|
|
|
|
this.Post({
|
|
|
|
type_id: this.readingType[this.readingIndex].id,
|
|
|
|
offset: 0,
|
|
|
|
limit: 1
|
|
|
|
}, '/api/article/getArticleByType').then(res => {
|
|
|
|
if(res.data) {
|
|
|
|
this.readingList = res.data
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
change(e) {
|
|
|
|
this.current = e.detail.current
|
|
|
|
let element = '#swiper-item-' + e.detail.current
|
|
|
|
let query = uni.createSelectorQuery().in(this)
|
|
|
|
query.select(element).boundingClientRect()
|
|
|
|
query.exec((res) => {
|
|
|
|
if (res && res[0]) {
|
|
|
|
this.swiperHeight = res[0].height
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
onSwiperChange(e) {
|
|
|
|
this.currentIndex = e.detail.current;
|
|
|
|
},
|
|
|
|
changeType(index) {
|
|
|
|
this.readingIndex = index
|
|
|
|
this.getList()
|
|
|
|
},
|
|
|
|
viewDetail(item) {
|
|
|
|
if (item.url) {
|
|
|
|
uni.navigateTo({
|
|
|
|
url:"/subPackages/webPage/webPage?url="+encodeURIComponent(item.url)
|
|
|
|
})
|
|
|
|
return
|
|
|
|
}
|
|
|
|
uni.navigateTo({
|
|
|
|
url:'/subPackages/letter/detail?id='+item.id
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.bg {
|
|
|
|
padding-bottom: 200rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.swiper-box, .top-box {
|
|
|
|
margin: 60rpx 25rpx 0;
|
|
|
|
height: 830rpx;
|
|
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
|
|
|
border-radius: 20rpx;
|
|
|
|
overflow: hidden;
|
|
|
|
// padding-top: 10rpx;
|
|
|
|
// background-color: #fff;
|
|
|
|
|
|
|
|
image {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.carousel-swiper {
|
|
|
|
width: 582.13rpx;
|
|
|
|
height: 706.24rpx;
|
|
|
|
margin: -40rpx auto 0;
|
|
|
|
|
|
|
|
image {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.exhibit-issue {
|
|
|
|
font-family: serif;
|
|
|
|
font-size: 28rpx;
|
|
|
|
color: #999;
|
|
|
|
font-style: italic;
|
|
|
|
padding: 40rpx 30rpx 0 0;
|
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
|
|
|
|
.custom-indicators {
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
gap: 8rpx;
|
|
|
|
margin-top: 40rpx;
|
|
|
|
|
|
|
|
.indicator-dot {
|
|
|
|
width: 8rpx;
|
|
|
|
height: 8rpx;
|
|
|
|
border-radius: 4rpx;
|
|
|
|
background-color: rgba(150, 150, 150, 0.5);
|
|
|
|
transition: all 0.3s;
|
|
|
|
}
|
|
|
|
|
|
|
|
.indicator-dot.active {
|
|
|
|
width: 20rpx;
|
|
|
|
background-color: rgb(133, 133, 133);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.category-scroll {
|
|
|
|
// padding: 40rpx 0 0 40rpx;
|
|
|
|
// display: flex;
|
|
|
|
height: 393rpx;
|
|
|
|
margin: 50rpx 25rpx 0;
|
|
|
|
|
|
|
|
image {
|
|
|
|
width: 100%;
|
|
|
|
height: 393rpx;
|
|
|
|
flex-shrink: 0;
|
|
|
|
// margin-right: 20rpx;
|
|
|
|
border-radius: 20rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
video {
|
|
|
|
width: 100%;
|
|
|
|
height: 393rpx;
|
|
|
|
border-radius: 20rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.title-box {
|
|
|
|
font-size: 36rpx;
|
|
|
|
font-weight: 500;
|
|
|
|
margin-top: 40rpx;
|
|
|
|
padding-left: 60rpx;
|
|
|
|
|
|
|
|
image {
|
|
|
|
width: 185.85rpx;
|
|
|
|
height: 20.98rpx;
|
|
|
|
margin-left: 21rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.reading-title {
|
|
|
|
margin: 60rpx auto 0;
|
|
|
|
width: 585rpx;
|
|
|
|
height: 30rpx;
|
|
|
|
border-radius: 15rpx;
|
|
|
|
background-color: rgba(46, 220, 78, .8);
|
|
|
|
font-weight: bold;
|
|
|
|
font-size: 28rpx;
|
|
|
|
color: #000000;
|
|
|
|
padding: 0 40rpx;
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
view {
|
|
|
|
position: absolute;
|
|
|
|
z-index: 20;
|
|
|
|
bottom: 15rpx;
|
|
|
|
}
|
|
|
|
&>view:nth-child(2) {
|
|
|
|
left: 268rpx;
|
|
|
|
}
|
|
|
|
&>view:nth-child(3) {
|
|
|
|
right: 55rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
span {
|
|
|
|
width: 111rpx;
|
|
|
|
height: 100%;
|
|
|
|
background-color: rgb(9, 154, 60);
|
|
|
|
border-radius: 15rpx;
|
|
|
|
position: absolute;
|
|
|
|
left: 32rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.reading-box {
|
|
|
|
margin: 20rpx 25rpx 0;
|
|
|
|
border-radius: 20rpx;
|
|
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
|
|
|
padding: 35rpx 10rpx 5rpx;
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-around;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
position: relative;
|
|
|
|
// top: -15rpx;
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
image {
|
|
|
|
width: 212rpx;
|
|
|
|
height: 376rpx;
|
|
|
|
margin-bottom: 30rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.start-swiper {
|
|
|
|
width: 100vw;
|
|
|
|
height: calc(100vh - 123rpx);
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
z-index: 100;
|
|
|
|
|
|
|
|
image {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|