提交

components/CustomTabBar.vue

@@ -96,6 +96,6 @@ export default {
 
 
 .tab-item text {
-    font-size: 24rpx;
+    font-size: 36rpx;
 }
 </style>

components/MusicControl.vue

@@ -0,0 +1,87 @@
+<template>
+  <view class="music-control" @click="toggleMusic">
+    <text class="music-text" :class="{ 'rotating': isPlaying }">
+      {{ isPlaying ? '🎵' : '🔇' }}
+    </text>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'MusicControl',
+  data() {
+    return {
+      isPlaying: false
+    }
+  },
+  mounted() {
+    // 组件挂载时同步音乐状态
+    this.syncMusicState();
+    
+    // 添加定时器，每秒同步一次状态
+    this.timer = setInterval(() => {
+      this.syncMusicState();
+    }, 1000);
+  },
+  beforeUnmount() {
+    // 组件卸载前清除定时器
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+  },
+  methods: {
+    syncMusicState() {
+      const app = getApp();
+      if (app && app.globalData) {
+        this.isPlaying = app.globalData.isMusicPlaying;
+      }
+    },
+    
+    toggleMusic() {
+      const app = getApp();
+      if (!app || !app.globalData || !app.globalData.bgMusic) {
+        console.error('背景音乐未初始化');
+        return;
+      }
+      
+      const bgMusic = app.globalData.bgMusic;
+      
+      // 直接基于当前组件的状态切换
+      if (this.isPlaying) {
+        bgMusic.pause();
+      } else {
+        bgMusic.play();
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.music-control {
+  position: fixed;
+  right: 30rpx;
+  bottom: 30rpx;
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+}
+
+.music-text {
+  font-size: 40rpx;
+}
+
+.rotating {
+  animation: rotate 3s linear infinite;
+}
+
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+</style>

components/ShareGuide.vue

@@ -0,0 +1,97 @@
+<template>
+    <view v-if="visible" class="share-guide-mask" @click="closeGuide">
+        <view class="guide-content">
+            <image class="guide-arrow" :src="arrowImage" mode=""></image>
+            <view v-for="(text, index) in textArray" :key="index" class="guide-text">
+                {{ text }}
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            type: Boolean,
+            default: false
+        },
+        text: {
+            type: [String, Array],
+            default: '点击右上角"..."选择"分享到朋友圈"'
+        },
+        arrowImage: {
+            type: String,
+            default: '/static/share-arrow.png'
+        }
+    },
+    computed: {
+        visible: {
+            get() {
+                return this.value;
+            },
+            set(val) {
+                this.$emit('input', val);
+            }
+        },
+        textArray() {
+            if (Array.isArray(this.text)) {
+                return this.text;
+            }
+            return [this.text];
+        }
+    },
+    methods: {
+        closeGuide() {
+            this.visible = false;
+            this.$emit('close');
+        }
+    }
+}
+</script>
+
+<style scoped>
+.share-guide-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 9999;
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+}
+
+.guide-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 100rpx;
+    padding-right: 60rpx;
+}
+
+.guide-arrow {
+    width: 100rpx;
+    height: 160rpx;
+    animation: arrow-up 1s infinite alternate;
+}
+
+.guide-text {
+    font-size: 32rpx;
+    color: #FFFFFF;
+    font-weight: bold;
+    margin-bottom: 10rpx;
+    text-align: center;
+}
+
+@keyframes arrow-up {
+    from {
+        transform: translateY(0);
+    }
+    to {
+        transform: translateY(-15rpx);
+    }
+}
+</style>

components/chapter3/RandomImage.vue

@@ -0,0 +1,68 @@
+<template>
+	<image v-if="selectedItem" :src="selectedItem.image" class="random-image" mode="" />
+	<view v-if="selectedItem" class="random-image-name">
+		{{selectedItem.name}}
+	</view>
+	<view v-if="selectedItem" class="random-image-desc">
+		{{selectedItem.desc}}
+	</view>
+	<MusicControl />
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+
+	const props = defineProps({
+		images: {
+			type: Array,
+			required: true
+		}
+	})
+	const selectedItem = ref(null)
+
+	// 随机选择一项
+	const selectRandomImage = () => {
+		if (props.images && props.images.length > 0) {
+			const randomIndex = Math.floor(Math.random() * props.images.length)
+			selectedItem.value = props.images[randomIndex]
+		}
+	}
+	onMounted(() => {
+		selectRandomImage()
+	})
+	defineExpose({
+		selectRandomImage,
+		selectedItem
+	})
+</script>
+
+<style scoped>
+	.random-image {
+		width: 100%;
+		height: 100%;
+	}
+
+	.random-image-name {
+		position: absolute;
+		bottom: 30%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		color: #ffffff;
+		font-size: 52rpx;
+	}
+
+	.random-image-desc {
+		white-space: nowrap;
+		position: absolute;
+		bottom: 25%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		color: #ffffff;
+		font-size: 24rpx;
+		font-weight: 300;
+		opacity: .8;
+	}
+</style>

pages.json

@@ -166,6 +166,18 @@
 			    }
 			}
 		]
+	},
+	{
+		"root": "xxdf",
+		"pages": [
+			{
+			    "path" : "home/home",
+			    "style" : {
+			        "navigationBarTitleText" : "",
+					"navigationStyle": "custom"
+			    }
+			}
+		]
 	}],
 	"tabBar": {
 		"custom": true,
@@ -178,36 +190,26 @@
 		"iconWidth": "40rpx",
 		"list": [{
 				"pagePath": "pages/index/index",
-				"iconPath": "/static/images/home.png",
-				"selectedIconPath": "/static/images/selectHome.png",
 				"text": "首页",
 				"visible": false
 			},
 			{
 				"pagePath": "pages/index/readingBody",
-				"iconPath": "/static/images/home.png",
-				"selectedIconPath": "/static/images/selectHome.png",
 				"text": "阅读体",
 				"visible": false
 			},
 			{
 				"pagePath": "pages/index/sensoryStore",
-				"iconPath": "/static/images/home.png",
-				"selectedIconPath": "/static/images/selectHome.png",
 				"text": "有感商店",
 				"visible": false
 			},
 			{
 				"pagePath": "pages/index/intelligentAgent",
-				"iconPath": "/static/images/home.png",
-				"selectedIconPath": "/static/images/selectHome.png",
 				"text": "智能体",
 				"visible": false
 			},
 			{
 				"pagePath": "pages/index/iSoul",
-				"iconPath": "/static/images/home.png",
-				"selectedIconPath": "/static/images/selectHome.png",
 				"text": "iSoul",
 				"visible": false
 			}

pages/index/readingBody.vue

@@ -29,24 +29,30 @@
 		<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">
-				<swiper-item v-for="(item, index) in swiperList" :key="index">
+				<swiper-item v-for="(item, index) in swiperList" :key="index" @click="gotoUrlNew(item)">
 					<image :src="showImg(item.head_img)" mode=""></image>
 				</swiper-item>
 			</swiper>
 		</uni-swiper-dot>
 		
-		<scroll-view scroll-x="true" show-scrollbar="false">
+		<!-- <scroll-view scroll-x="true" show-scrollbar="false">
 			<view class="category-scroll">
 				<image v-for="(item,index) in categories" :key="index" :src="showImg(item.head_img)"></image>
 			</view>
-		</scroll-view>
+		</scroll-view> -->
+		
+		<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="title-box">
 			全部阅读
 			<image src="https://static.ticket.sz-trip.com/epicSoul/readingBody/titleSpan.png" mode=""></image>
 		</view>
 		
-		<view class="reading-title flex-between" style="background:none;">
+		<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>
@@ -165,7 +171,7 @@
 	}
 
 	.swiper-box, .top-box {
-		margin: 60rpx 40rpx 0;
+		margin: 60rpx 25rpx 0;
 		height: 830rpx;
 		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
 		border-radius: 20rpx;
@@ -220,14 +226,16 @@
 	}
 	
 	.category-scroll {
-		padding: 40rpx 0 0 40rpx;
+		// padding: 40rpx 0 0 40rpx;
-		display: flex;
+		// display: flex;
+		height: 393rpx;
+		margin: 50rpx 25rpx 0;
 		
 		image {
-			width: 670rpx;
+			width: 100%;
-			height: 260rpx;
+			height: 393rpx;
 			flex-shrink: 0;
-			margin-right: 20rpx;
+			// margin-right: 20rpx;
 			border-radius: 20rpx;
 		}
 	}
@@ -254,7 +262,7 @@
 		font-weight: bold;
 		font-size: 28rpx;
 		color: #000000;
-		padding: 0 55rpx;
+		padding: 0 40rpx;
 		position: relative;
 		
 		view {
@@ -280,20 +288,20 @@
 	}
 	
 	.reading-box {
-		margin: 0 40rpx 0;
+		margin: 20rpx 25rpx 0;
 		border-radius: 20rpx;
 		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
-		padding: 35rpx 20rpx 5rpx;
+		padding: 35rpx 10rpx 5rpx;
 		display: flex;
 		justify-content: space-between;
 		flex-wrap: wrap;
 		position: relative;
-		top: -15rpx;
+		// top: -15rpx;
 		background-color: #fff;
 		
 		image {
-			width: 188rpx;
+			width: 212rpx;
-			height: 335rpx;
+			height: 376rpx;
 			margin-bottom: 30rpx;
 		}
 	}

pages/stratIndex.vue

@@ -42,6 +42,9 @@
 		image{
 			width: 100%;
 			height: 100%;
+			position: fixed;
+			top: 0;
+			left: 0;
 		}
 	}
 </style>