jiazhipeng
/
EpicSoul
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of http://123.60.98.226:3000/jiazhipeng/EpicSoul

dev_xrcc
jiazhipeng 4 months ago
parent
4bd640125c c4d03c18c3
commit
4289dd1a1f
6 changed files with 263 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      package-lock.json
  2. 21
      pages.json
  3. 6
      pages/index/readingBody.vue
  4. 8
      subPackages/haveFeeling/detailXiang.vue
  5. 8
      subPackages/haveFeeling/shopDetail.vue
  6. 223
      subPackages/readingBody/index.vue

5
package-lock.json
View File

@ -4,11 +4,6 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"moment": {
"version": "2.30.1",
"resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="
},
"ydui-district": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/ydui-district/-/ydui-district-1.1.0.tgz",

21
pages.json
View File

@ -89,6 +89,27 @@
"style" : {
"navigationBarTitleText" : ""
}
},
{
"path" : "readingBody/index",
"style" : {
"navigationBarTitleText" : "阅读体",
"navigationStyle": "custom"
}
},
{
"path" : "readingBody/index",
"style" : {
"navigationBarTitleText" : "有感商店详情页",
"navigationStyle": "custom"
}
},
{
"path" : "readingBody/index",
"style" : {
"navigationBarTitleText" : "有感商店香",
"navigationStyle": "custom"
}
}
]
}],

6
pages/index/readingBody.vue
View File

@ -1,12 +1,12 @@
<template>
<view class="bg">
<view class="content">
<navigator url="/subPackages/readingBody/index" class="content">
<swiper class="top-banner" :indicator-dots="false" :autoplay="false" v-if="topBanner && topBanner.length > 0">
<swiper-item v-for="(item, index) in topBanner" :key="index" @click.stop="gotoUrlNew(item)">
<swiper-item v-for="(item, index) in topBanner" :key="index" >
<image class="top-banner" :src="showImg(item.head_img)" mode="aspectFill" lazy-load="true"></image>
</swiper-item>
</swiper>
</view>
</navigator>
<CustomTabBar :currentTab="1" />
</view>
</template>

8
subPackages/haveFeeling/detailXiang.vue
View File

@ -0,0 +1,8 @@
<template>
</template>
<script>
</script>
<style>
</style>

8
subPackages/haveFeeling/shopDetail.vue
View File

@ -0,0 +1,8 @@
<template>
</template>
<script>
</script>
<style>
</style>

223
subPackages/readingBody/index.vue
View File

@ -0,0 +1,223 @@
<template>
<view class="bg">
<headerVue />
<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="item.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>
<scroll-view scroll-x="true" show-scrollbar="false">
<view class="category-scroll">
<image v-for="(item,index) in categories" :key="index" :src="item"></image>
</view>
</scroll-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">
<view v-for="(item,index) in readingType" :key="index" @click="changeType(index)">{{item}}</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="item"></image>
</view>
</view>
</template>
<script>
import headerVue from "@/components/header.vue"
export default {
components: {
headerVue
},
data() {
return {
swiperList: [{
img: 'https://static.ticket.sz-trip.com/epicSoul/readingBody/img.png'
},
{
img: 'https://static.ticket.sz-trip.com/epicSoul/readingBody/img.png'
},
{
img: 'https://static.ticket.sz-trip.com/epicSoul/readingBody/img.png'
},
{
img: 'https://static.ticket.sz-trip.com/epicSoul/readingBody/img.png'
}
],
currentIndex: 0,
categories: [
'https://static.ticket.sz-trip.com/epicSoul/readingBody/img1.png',
'https://static.ticket.sz-trip.com/epicSoul/readingBody/img1.png',
'https://static.ticket.sz-trip.com/epicSoul/readingBody/img1.png'
],
readingList: [
'https://static.ticket.sz-trip.com/epicSoul/readingBody/img2.png',
'https://static.ticket.sz-trip.com/epicSoul/readingBody/img2.png',
'https://static.ticket.sz-trip.com/epicSoul/readingBody/img2.png',
'https://static.ticket.sz-trip.com/epicSoul/readingBody/img2.png',
'https://static.ticket.sz-trip.com/epicSoul/readingBody/img2.png',
'https://static.ticket.sz-trip.com/epicSoul/readingBody/img2.png'
],
readingType: ['2025', '2026', '更多'],
readingIndex: 0
}
},
methods: {
onSwiperChange(e) {
this.currentIndex = e.detail.current;
},
changeType(index) {
this.readingIndex = index
console.log(index,this.readingIndex)
}
}
}
</script>
<style lang="scss" scoped>
.bg {
padding-bottom: 200rpx;
}
.top-box {
margin: 60rpx 40rpx 0;
height: 830rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
border-radius: 20rpx;
padding-top: 10rpx;
background-color: #fff;
}
.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;
image {
width: 520rpx;
height: 260rpx;
flex-shrink: 0;
margin-right: 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 55rpx;
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: 0 40rpx 0;
border-radius: 20rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
padding: 35rpx 20rpx 5rpx;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
top: -15rpx;
background-color: #fff;
image {
width: 188rpx;
height: 335rpx;
margin-bottom: 30rpx;
}
}
</style>
Write Preview
Loading…
Cancel
Save