From a3deaecb330130eb28514ff19ee90a10fa133d40 Mon Sep 17 00:00:00 2001
From: Bobi <2166145077@qq.com>
Date: Fri, 25 Apr 2025 13:25:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BA=95=E9=83=A8=E5=AF=BC=E8=88=AA=E6=A0=8F?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/novel/newWorkItem.vue       |   6 +-
 components/novel/novelItem.vue         |   7 +-
 components/novel/workItem.vue          |  18 +-
 pages.json                             |  18 +
 pages/chapter/index.vue                | 160 +++++++
 pages/index/bookshelf.vue              |  94 +++--
 pages/index/center.vue                 |   9 +-
 pages/index/index.vue                  |  17 +-
 pages_order/novel/Allannouncements.vue | 137 ++++++
 pages_order/novel/announcement.vue     | 131 ++++++
 pages_order/novel/chapterList.vue      | 190 +++++++++
 pages_order/novel/createNovel.vue      | 344 +++++++++++++++
 pages_order/novel/novelDetail.vue      | 748 +++++++++++++++++++++++++++++++++
 pages_order/novel/vote.vue             | 162 +++++++
 14 files changed, 1979 insertions(+), 62 deletions(-)
 create mode 100644 pages/chapter/index.vue
 create mode 100644 pages_order/novel/Allannouncements.vue
 create mode 100644 pages_order/novel/announcement.vue
 create mode 100644 pages_order/novel/chapterList.vue
 create mode 100644 pages_order/novel/createNovel.vue
 create mode 100644 pages_order/novel/novelDetail.vue
 create mode 100644 pages_order/novel/vote.vue

diff --git a/components/novel/newWorkItem.vue b/components/novel/newWorkItem.vue
index 8d6b1d2..aca5070 100644
--- a/components/novel/newWorkItem.vue
+++ b/components/novel/newWorkItem.vue
@@ -1,7 +1,7 @@
 <template>
 	<view class="newWork">
 		<!-- 新建作品组件 -->
-		<view class="new-work-item" @click="handleClick"">
+		<view class="new-work-item" @click="handleClick">
 			<view class="plus-icon">+</view>
 			<text class="text">新建作品</text>
 		</view>
@@ -19,7 +19,9 @@
 		},
 		methods: {
 			handleClick() {
-				this.$emit('click');
+				uni.navigateTo({
+					url: '/pages_order/novel/createNovel'
+				})
 			},
 			handleSettingClick() {
 				this.$emit('settings');
diff --git a/components/novel/novelItem.vue b/components/novel/novelItem.vue
index 07dc575..1a89025 100644
--- a/components/novel/novelItem.vue
+++ b/components/novel/novelItem.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="book-item" :class="{'horizontal': horizontal}">
+	<view class="book-item" :class="{'horizontal': horizontal}" @click="goToNovelDetail">
 		<image class="book-cover" src="https://bookcover.yuewen.com/qdbimg/349573/1033014772/150.webp" mode="aspectFill"></image>
 		<view class="book-info">
 			<view class="book-title">{{book.title}}</view>
@@ -50,6 +50,11 @@
 			return {}
 		},
 		methods: {
+			goToNovelDetail() {
+				uni.navigateTo({
+					url: `/pages_order/novel/novelDetail?id=${this.book.id}`
+				});
+			}
 		}
 	}
 </script>
diff --git a/components/novel/workItem.vue b/components/novel/workItem.vue
index d7484af..b23d5be 100644
--- a/components/novel/workItem.vue
+++ b/components/novel/workItem.vue
@@ -26,6 +26,8 @@
             
 		</view>
 		
+		<!-- 添加右箭头图标 -->
+		<text class="iconfont icon-arrow">&#xe65f;</text>
 	</view>
 </template>
 
@@ -68,7 +70,14 @@
 		},
 		methods: {
 			handleClick() {
-				this.$emit('click');
+				if (this.isManaging) {
+					this.$emit('click');
+					return;
+				}
+				// 跳转到章节列表页面
+				uni.navigateTo({
+					url: '/pages_order/novel/chapterList'
+				});
 			},
 			handleDelete() {
 				this.$emit('delete');
@@ -84,6 +93,7 @@
 		padding: 24rpx 0;
 		border-bottom: 1rpx solid #f0f0f0;
 		position: relative;
+		align-items: center;
 		
 		.cover-wrapper {
 			position: relative;
@@ -182,6 +192,10 @@
             }
 		}
 		
-		
+		.icon-arrow {
+			color: #999;
+			font-size: 16px;
+			margin-left: 10rpx;
+		}
 	}
 </style>
diff --git a/pages.json b/pages.json
index 485b883..bc0af0b 100644
--- a/pages.json
+++ b/pages.json
@@ -51,6 +51,24 @@
 			},
 			{
 				"path": "mine/help"
+			},
+			{
+				"path": "novel/novelDetail"
+			},
+			{
+				"path": "novel/vote"
+			},
+			{
+				"path": "novel/announcement"
+			},
+			{
+				"path": "novel/Allannouncements"
+			},
+			{
+				"path": "novel/createNovel"
+			},
+			{
+				"path": "novel/chapterList"
 			}
 		]
 	}],
diff --git a/pages/chapter/index.vue b/pages/chapter/index.vue
new file mode 100644
index 0000000..52c8b4d
--- /dev/null
+++ b/pages/chapter/index.vue
@@ -0,0 +1,160 @@
+<template>
+  <view class="chapter-container">
+    <view class="header">
+      <view class="nav-bar">
+        <view class="back" @click="goBack">
+          <text class="iconfont icon-back">&#xe60e;</text>
+        </view>
+        <view class="tabs">
+          <view class="tab active">草稿箱</view>
+          <view class="tab">已发布</view>
+        </view>
+        <view class="more">
+          <text class="iconfont">&#xe612;</text>
+        </view>
+      </view>
+    </view>
+    
+    <view class="chapter-list">
+      <view class="chapter-item" v-for="(chapter, index) in chapters" :key="index">
+        <view class="chapter-info">
+          <text class="chapter-title">章节名</text>
+          <text class="chapter-number">第{{index + 1}}章</text>
+        </view>
+        <text class="iconfont icon-arrow">&#xe65f;</text>
+      </view>
+    </view>
+    
+    <view class="bottom-actions">
+      <button class="btn-settings">设置作品</button>
+      <button class="btn-new" @click="addNewChapter">新建章节</button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chapters: Array(8).fill({}) // 模拟8个章节数据
+    }
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack()
+    },
+    addNewChapter() {
+      // 添加新章节的逻辑
+      uni.showToast({
+        title: '新建章节',
+        icon: 'none'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.chapter-container {
+  min-height: 100vh;
+  background-color: #fff;
+  
+  .header {
+    background: #fff;
+    padding-top: var(--status-bar-height);
+    
+    .nav-bar {
+      height: 44px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 15px;
+      
+      .back {
+        padding: 5px;
+        .icon-back {
+          font-size: 20px;
+        }
+      }
+      
+      .tabs {
+        display: flex;
+        .tab {
+          padding: 0 15px;
+          font-size: 16px;
+          color: #666;
+          &.active {
+            color: #000;
+            font-weight: bold;
+          }
+        }
+      }
+      
+      .more {
+        padding: 5px;
+      }
+    }
+  }
+  
+  .chapter-list {
+    padding: 0 15px;
+    
+    .chapter-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 15px 0;
+      border-bottom: 1px solid #eee;
+      
+      .chapter-info {
+        .chapter-title {
+          font-size: 14px;
+          color: #999;
+          margin-bottom: 5px;
+        }
+        
+        .chapter-number {
+          font-size: 16px;
+          color: #333;
+        }
+      }
+      
+      .icon-arrow {
+        color: #999;
+        font-size: 16px;
+      }
+    }
+  }
+  
+  .bottom-actions {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    padding: 10px 15px;
+    background: #fff;
+    box-shadow: 0 -2px 6px rgba(0,0,0,0.05);
+    
+    button {
+      flex: 1;
+      height: 40px;
+      border-radius: 20px;
+      font-size: 16px;
+      margin: 0 5px;
+      
+      &.btn-settings {
+        background: #fff;
+        border: 1px solid #ddd;
+        color: #333;
+      }
+      
+      &.btn-new {
+        background: #2b4acb;
+        color: #fff;
+        border: none;
+      }
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/pages/index/bookshelf.vue b/pages/index/bookshelf.vue
index 7753f29..5b540b8 100644
--- a/pages/index/bookshelf.vue
+++ b/pages/index/bookshelf.vue
@@ -261,42 +261,7 @@
 					}
 				],
 				// 作品列表数据
-				worksList: [
-					{
-						id: '1',
-						title: '兽王进化：从被小萝莉召唤开始',
-						cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain',
-						readers: '8721',
-						status: 'ongoing',
-						publishStatus: '发布审核中',
-						isOriginal: true
-					},
-					{
-						id: '2',
-						title: '魔法少女纯爷们',
-						cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain',
-						readers: '8721',
-						status: 'ongoing',
-						publishStatus: '存稿设置审核中'
-					},
-					{
-						id: '3',
-						title: '我是一条小青龙',
-						cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain',
-						readers: '8721',
-						status: 'ongoing',
-						publishStatus: '发布审核通过'
-					},
-					{
-						id: '4',
-						title: '女帝：别闹，朕怀孕了！',
-						cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain',
-						readers: '8721',
-						status: 'draft',
-						publishStatus: '',
-						isOriginal: true
-					}
-				]
+				worksList: []  // 清空初始数据，改为动态加载
 			}
 		},
 		onLoad() {
@@ -304,19 +269,60 @@
 			const systemInfo = uni.getSystemInfoSync();
 			this.statusBarHeight = systemInfo.statusBarHeight;
 			
-			// 获取胶囊按钮位置信息
+			// 加载保存的作品列表
+			const savedWorks = uni.getStorageSync('worksList') || []
+			this.worksList = savedWorks
+			
+			// 检查是否需要切换到作品标签
+			const activeTab = uni.getStorageSync('activeBookshelfTab')
+			if (activeTab === 'work') {
+				this.activeTab = 'work'
+				uni.removeStorageSync('activeBookshelfTab')
+			}
+			
+			// 监听切换到作品标签的事件
+			uni.$on('switchToWork', () => {
+				this.activeTab = 'work'
+			})
+			
 			// #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO
 			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
-			
-			// 计算导航栏高度 = 胶囊底部到顶部的距离 + 状态栏高度
 			const navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
 			this.navBarHeight = navBarHeight;
 			// #endif
 		},
 		onShow() {
-			// 页面显示时的逻辑
-			this.isEditMode = false;
-			this.selectedItems = [];
+			// 检查是否有新提交的作品
+			const submittedWork = getApp().globalData.submittedWork
+			if (submittedWork) {
+				// 添加到作品列表首位
+				this.worksList.unshift(submittedWork)
+				// 保存更新后的作品列表
+				uni.setStorageSync('worksList', this.worksList)
+				// 清除全局状态中的数据
+				getApp().globalData.submittedWork = null
+				// 确保切换到作品标签
+				this.activeTab = 'work'
+				
+				// 检查是否需要显示提交成功提示
+				if (getApp().globalData.showSubmitSuccess) {
+					// 清除标记
+					getApp().globalData.showSubmitSuccess = false
+					// 显示提示
+					uni.showToast({
+						title: '提交成功，等待审核',
+						icon: 'none',
+						duration: 2000
+					})
+				}
+			}
+			
+			this.isEditMode = false
+			this.selectedItems = []
+		},
+		onUnload() {
+			// 移除事件监听
+			uni.$off('switchToWork')
 		},
 		methods: {
 			// 切换标签
@@ -344,7 +350,7 @@
 			// 创建新作品
 			createNewWork() {
 				uni.navigateTo({
-					url: '/pages/work/create'
+					url: '/pages_order/novel/createNovel'
 				})
 			},
 			
@@ -428,6 +434,8 @@
 							} else {
 								// 删除选中的作品
 								this.worksList = this.worksList.filter(work => !this.selectedItems.includes(work.id));
+								// 保存更新后的作品列表
+								uni.setStorageSync('worksList', this.worksList)
 								uni.showToast({
 									title: '删除成功',
 									icon: 'success'
diff --git a/pages/index/center.vue b/pages/index/center.vue
index fd31dd9..20e85a3 100644
--- a/pages/index/center.vue
+++ b/pages/index/center.vue
@@ -18,7 +18,7 @@
 			
 			<!-- 图片区域 -->
 			<view class="section">
-				<view class="section-title">图片</view>
+				<view class="section-title">账户</view>
 				<view class="section-list">
 					<view class="section-item" @click="navigateTo('/pages/wallet')">
 						<view class="section-item-left">
@@ -73,8 +73,9 @@
 					</view>
 					<view class="section-item" @click="navigateTo('/pages/customer-service')">
 						<view class="section-item-left">
-							
+							<uv-icon name="star" size="40rpx" color="#333"></uv-icon>
 							<text>联系客服</text>
+							
 						</view>
 						<uv-icon name="arrow-right" size="36rpx" color="#999"></uv-icon>
 					</view>
@@ -87,7 +88,7 @@
 					</view>
 					<view class="section-item" @click="logout">
 						<view class="section-item-left">
-							
+							<uv-icon name="star" size="40rpx" color="#333"></uv-icon>
 							<text>退出登录</text>
 						</view>
 						<uv-icon name="arrow-right" size="36rpx" color="#999"></uv-icon>
@@ -146,12 +147,14 @@
 		padding: 20rpx 30rpx;
 		
 		.user-info {
+			height: 270rpx;
 			display: flex;
 			align-items: center;
 			padding: 30rpx 20rpx;
 			background-color: #fff;
 			border-radius: 20rpx;
 			margin-bottom: 20rpx;
+			background: linear-gradient(to right, purple, pink);
 			
 			.avatar {
 				width: 120rpx;
diff --git a/pages/index/index.vue b/pages/index/index.vue
index f44c5cb..85cd48e 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -59,7 +59,7 @@
 					</view>
 				</view>
 				<view class="notice-center">
-					<view class="notice-text">
+					<view class="notice-text" @click="viewNotice">
 						2025年2月平台福利活动截稿作品公示
 					</view>
 				</view>
@@ -78,7 +78,7 @@
                 <scroll-view scroll-x style="width: 100%;">
                     <view class="recommend-list">
                             <view class="recommend-item" 
-                            @click="navigateToDetail"
+                            @click="navigateToDetail(item.id)"
                             v-for="(item, index) in novelList" :key="index">
                                 <novel-item horizontal :key="index" :book="item" />
                             </view>
@@ -95,7 +95,7 @@
 			</view>
 			<view class="novel-list">
 				<novel-item v-for="(item, index) in novelList" 
-                @click="navigateToDetail"
+                @click="navigateToDetail(item.id)"
                 :key="index" :book="item" />
 			</view>
 		</view>
@@ -212,16 +212,11 @@
 					this.$utils.navigateTo(`/pages_order/book/bookDetail?id=${banner.id}`)
 				}, 500)
 			},
-			// 查看通知详情
+			// 查看公告详情
 			viewNotice() {
-				uni.showToast({
-					title: '查看通知: 2025年2月平台福利活动截稿作品公示',
-					icon: 'none'
+				uni.navigateTo({
+					url: '/pages_order/novel/Allannouncements'
 				})
-				// 跳转到通知详情页
-				setTimeout(() => {
-					this.$utils.navigateTo('/pages/notice/detail?id=1')
-				}, 500)
 			},
 			navigateToDetail(id) {
 				// 跳转到小说详情页
diff --git a/pages_order/novel/Allannouncements.vue b/pages_order/novel/Allannouncements.vue
new file mode 100644
index 0000000..01df2f5
--- /dev/null
+++ b/pages_order/novel/Allannouncements.vue
@@ -0,0 +1,137 @@
+<template>
+  <view class="announcements-container">
+    <uv-navbar
+      title="全部公告"
+      :autoBack="true"
+      fixed
+      placeholder
+      titleStyle="color: #333; font-weight: 500;"
+      :border="false"
+    ></uv-navbar>
+    
+    <view class="announcements-list">
+      <view 
+        class="announcement-item" 
+        v-for="(item, index) in announcements" 
+        :key="index"
+        @click="viewAnnouncement(item)"
+      >
+        <view class="item-left">
+          <text class="tag">通讯</text>
+          <text class="title">{{ item.title }}</text>
+        </view>
+        <view class="item-right">
+          <uv-icon name="arrow-right" color="#C8C8C8" size="28rpx"></uv-icon>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  components: {
+    'uv-navbar': () => import('@/uni_modules/uv-navbar/components/uv-navbar/uv-navbar.vue')
+  },
+  data() {
+    return {
+      announcements: [
+        {
+          id: 1,
+          title: '2025年2月平台福利活动拟获奖作品公示',
+          type: '通讯'
+        },
+        {
+          id: 2,
+          title: '2025年2月平台福利活动拟获奖作品公示',
+          type: '通讯'
+        },
+        {
+          id: 3,
+          title: '2025年2月平台福利活动拟获奖作品公示',
+          type: '通讯'
+        },
+        {
+          id: 4,
+          title: '2025年2月平台福利活动拟获奖作品公示',
+          type: '通讯'
+        },
+        {
+          id: 5,
+          title: '2025年2月平台福利活动拟获奖作品公示',
+          type: '通讯'
+        },
+        {
+          id: 6,
+          title: '2025年2月平台福利活动拟获奖作品公示',
+          type: '通讯'
+        },
+        {
+          id: 7,
+          title: '2025年2月平台福利活动拟获奖作品公示',
+          type: '通讯'
+        }
+      ]
+    }
+  },
+  methods: {
+    viewAnnouncement(item) {
+      uni.navigateTo({
+        url: `/pages_order/novel/announcement?id=${item.id}`
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.announcements-container {
+  min-height: 100vh;
+  background-color: #F8F8F8;
+  
+  .announcements-list {
+    padding: 20rpx;
+    
+    .announcement-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background-color: #FFFFFF;
+      padding: 30rpx;
+      margin-bottom: 20rpx;
+      border-radius: 12rpx;
+      
+      .item-left {
+        flex: 1;
+        margin-right: 20rpx;
+        
+        .tag {
+          display: inline-block;
+          font-size: 24rpx;
+          color: #666666;
+          background-color: #F5F5F5;
+          padding: 4rpx 12rpx;
+          border-radius: 6rpx;
+          margin-bottom: 16rpx;
+        }
+        
+        .title {
+          display: block;
+          font-size: 28rpx;
+          color: #333333;
+          line-height: 1.4;
+        }
+      }
+      
+      .item-right {
+        display: flex;
+        align-items: center;
+      }
+      
+      &:active {
+        background-color: #F9F9F9;
+      }
+    }
+  }
+}
+</style>
diff --git a/pages_order/novel/announcement.vue b/pages_order/novel/announcement.vue
new file mode 100644
index 0000000..e08e075
--- /dev/null
+++ b/pages_order/novel/announcement.vue
@@ -0,0 +1,131 @@
+<template>
+  <view class="announcement-container">
+    <uv-navbar
+      title="公告详情"
+      :autoBack="true"
+      fixed
+      placeholder
+      titleStyle="color: #333; font-weight: 500;"
+      :border="false"
+    ></uv-navbar>
+    <view class="header">
+      <text class="title">2025年2月平台福利活动拟获奖作品公示</text>
+      <text class="date">岁序更替，华章日新。2025年，平台福利内容建设的实施进展，载誉前行。我们秉持"精品为本，重磅发布"的理念，现面向全体作者，重磅发布2025年度长篇网文作家福利，上线主新潮当中文网作家专属福利：全年奖、半年奖、季度奖、月度奖，总计奖金超过百万元。现将2025年2月，平台各项福利活动拟获奖作品公示如下：</text>
+    </view>
+    
+    <view class="award-section">
+      <view class="award-item">
+        <text class="award-title">长篇网文</text>
+        <view class="award-content">
+          <view class="sub-award">
+            <text class="sub-title">• 优质加更奖：</text>
+            <text class="detail">拟获奖作品156本，共发放奖金41.5万元，查看拟获奖名单请点击：</text>
+            <text class="link">优质加更奖拟获奖名单</text>
+          </view>
+          <view class="sub-award">
+            <text class="sub-title">• 新书扶更奖：</text>
+            <text class="detail">拟获奖作品5574本，共发放奖金20万元，查看拟获奖名单请点击：</text>
+            <text class="link">新书扶更奖拟获奖名单</text>
+          </view>
+          <view class="sub-award">
+            <text class="sub-title">• 拉新激励奖：</text>
+            <text class="detail">拟获奖作品50部，总计奖金65万，查看拟获奖名单请点击：</text>
+            <text class="link">2月拉新激励奖</text>
+          </view>
+          <view class="sub-award">
+            <text class="sub-title">• 星火计划奖励：</text>
+            <text class="detail">拟获奖作品4178部，总计奖金55万，查看拟获奖名单请点击：</text>
+            <text class="link">2月星火计划奖励名单</text>
+          </view>
+        </view>
+      </view>
+
+      <view class="award-item">
+        <text class="award-title">完结专场</text>
+        <view class="award-content">
+          <view class="sub-award">
+            <text class="sub-title">• 脱洞盛宴征文活动：</text>
+            <text class="detail">月度脱洞专题：拟获奖作品1260部，总计奖金45万，查看拟获奖名单请点击：</text>
+            <text class="link">2月完结专题奖励名单</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  components: {
+    'uv-navbar': () => import('@/uni_modules/uv-navbar/components/uv-navbar/uv-navbar.vue')
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    // 可以添加点击链接跳转等方法
+  }
+}
+</script>
+
+<style lang="scss">
+.announcement-container {
+  padding: 30rpx;
+  background: #fff;
+  
+  .header {
+    margin-bottom: 40rpx;
+    
+    .title {
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 20rpx;
+      display: block;
+    }
+    
+    .date {
+      font-size: 28rpx;
+      color: #666;
+      line-height: 1.6;
+    }
+  }
+  
+  .award-section {
+    .award-item {
+      margin-bottom: 40rpx;
+      
+      .award-title {
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #333;
+        margin-bottom: 20rpx;
+        display: block;
+      }
+      
+      .award-content {
+        .sub-award {
+          margin-bottom: 20rpx;
+          
+          .sub-title {
+            font-size: 28rpx;
+            color: #333;
+            font-weight: 500;
+          }
+          
+          .detail {
+            font-size: 28rpx;
+            color: #666;
+          }
+          
+          .link {
+            color: #007AFF;
+            text-decoration: underline;
+            font-size: 28rpx;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/pages_order/novel/chapterList.vue b/pages_order/novel/chapterList.vue
new file mode 100644
index 0000000..7ec799b
--- /dev/null
+++ b/pages_order/novel/chapterList.vue
@@ -0,0 +1,190 @@
+<template>
+  <view class="chapter-container">
+    <view class="header">
+      <view class="nav-bar">
+        <view class="back" @click="goBack">
+          <text class="iconfont icon-back">&#xe60e;</text>
+        </view>
+        <view class="tabs">
+          <view class="tab" :class="{ active: activeTab === 'draft' }" @click="switchTab('draft')">草稿箱</view>
+          <view class="tab" :class="{ active: activeTab === 'published' }" @click="switchTab('published')">已发布</view>
+        </view>
+        <view class="more">
+          <text class="iconfont">&#xe612;</text>
+        </view>
+      </view>
+    </view>
+    
+    <view class="chapter-list">
+      <view class="chapter-item" v-for="(chapter, index) in chapters" :key="index" @click="editChapter(chapter)">
+        <view class="chapter-info">
+          <text class="chapter-title">章节名</text>
+          <text class="chapter-number">第{{index + 1}}章</text>
+        </view>
+        <text class="iconfont icon-arrow">&#xe65f;</text>
+      </view>
+    </view>
+    
+    <view class="bottom-actions">
+      <button class="btn-settings" @click="handleSettings">设置作品</button>
+      <button class="btn-new" @click="addNewChapter">新建章节</button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeTab: 'draft',
+      chapters: Array(8).fill({}) // 模拟8个章节数据
+    }
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack()
+    },
+    switchTab(tab) {
+      this.activeTab = tab
+      // 根据tab加载不同的章节列表
+    },
+    addNewChapter() {
+      uni.navigateTo({
+        url: '/pages_order/author/editor'
+      })
+    },
+    editChapter(chapter) {
+      uni.navigateTo({
+        url: '/pages_order/author/editor?id=' + chapter.id
+      })
+    },
+    handleSettings() {
+      uni.navigateTo({
+        url: '/pages_order/novel/createNovel?type=edit'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.chapter-container {
+  min-height: 100vh;
+  background-color: #fff;
+  padding-bottom: 70px;
+  
+  .header {
+    background: #fff;
+    padding-top: var(--status-bar-height);
+    
+    .nav-bar {
+      height: 44px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 15px;
+      
+      .back {
+        padding: 5px;
+        .icon-back {
+          font-size: 20px;
+        }
+      }
+      
+      .tabs {
+        display: flex;
+        .tab {
+          padding: 0 15px;
+          font-size: 16px;
+          color: #666;
+          position: relative;
+          
+          &.active {
+            color: #000;
+            font-weight: bold;
+            
+            &::after {
+              content: '';
+              position: absolute;
+              bottom: -4px;
+              left: 50%;
+              transform: translateX(-50%);
+              width: 20px;
+              height: 2px;
+              background: #2b4acb;
+              border-radius: 1px;
+            }
+          }
+        }
+      }
+      
+      .more {
+        padding: 5px;
+      }
+    }
+  }
+  
+  .chapter-list {
+    padding: 0 15px;
+    
+    .chapter-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 15px 0;
+      border-bottom: 1px solid #eee;
+      
+      .chapter-info {
+        .chapter-title {
+          font-size: 14px;
+          color: #999;
+          margin-bottom: 5px;
+          display: block;
+        }
+        
+        .chapter-number {
+          font-size: 16px;
+          color: #333;
+          display: block;
+        }
+      }
+      
+      .icon-arrow {
+        color: #999;
+        font-size: 16px;
+      }
+    }
+  }
+  
+  .bottom-actions {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    padding: 10px 15px;
+    background: #fff;
+    box-shadow: 0 -2px 6px rgba(0,0,0,0.05);
+    
+    button {
+      flex: 1;
+      height: 40px;
+      border-radius: 20px;
+      font-size: 16px;
+      margin: 0 5px;
+      
+      &.btn-settings {
+        background: #fff;
+        border: 1px solid #ddd;
+        color: #333;
+      }
+      
+      &.btn-new {
+        background: #2b4acb;
+        color: #fff;
+        border: none;
+      }
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/pages_order/novel/createNovel.vue b/pages_order/novel/createNovel.vue
new file mode 100644
index 0000000..7d1be27
--- /dev/null
+++ b/pages_order/novel/createNovel.vue
@@ -0,0 +1,344 @@
+<template>
+  <!-- 新建作品页面 -->
+  <view class="create-novel">
+    <uv-navbar
+      title="新建作品"
+      :autoBack="true"
+      fixed
+      placeholder
+      titleStyle="color: #333; font-weight: 500;"
+      :border="false"
+    ></uv-navbar>
+    
+    <view class="form-container">
+      <!-- 封面信息 -->
+      <view class="section">
+        <view class="section-title">封面信息</view>
+        <view class="upload-cover">
+          <view class="sub-title">上传封面</view>
+          <view class="cover-box" @click="chooseCover">
+            <image v-if="formData.cover" :src="formData.cover" mode="aspectFill" class="cover-image"></image>
+            <view v-else class="upload-placeholder">
+              <text class="plus">+</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 作品信息 -->
+      <view class="section">
+        <view class="section-title">作品信息</view>
+        <view class="form-item">
+          <text class="required">*</text>
+          <text class="label">作品名称</text>
+          <input 
+            type="text" 
+            v-model="formData.title"
+            placeholder="请输入"
+            placeholder-class="input-placeholder"
+          />
+        </view>
+        
+        <view class="form-item">
+          <text class="required">*</text>
+          <text class="label">作品类型</text>
+          <input 
+            type="text" 
+            v-model="formData.type"
+            placeholder="请输入"
+            placeholder-class="input-placeholder"
+          />
+        </view>
+        
+        <view class="form-item">
+          <text class="required">*</text>
+          <text class="label">作品简介</text>
+          <textarea 
+            v-model="formData.description"
+            placeholder="请输入"
+            placeholder-class="input-placeholder"
+            :maxlength="500"
+          ></textarea>
+        </view>
+        
+        <view class="form-item">
+          <text class="required">*</text>
+          <text class="label">作品状态</text>
+          <view class="status-options">
+            <view 
+              class="status-item" 
+              :class="{ active: formData.status === 'serial' }"
+              @click="formData.status = 'serial'"
+            >
+              <view class="radio-dot" :class="{ checked: formData.status === 'serial' }"></view>
+              <text>连载</text>
+            </view>
+            <view 
+              class="status-item"
+              :class="{ active: formData.status === 'completed' }"
+              @click="formData.status = 'completed'"
+            >
+              <view class="radio-dot" :class="{ checked: formData.status === 'completed' }"></view>
+              <text>完结</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 书籍信息 -->
+      <view class="section">
+        <view class="section-title">书籍信息</view>
+        <view class="form-item">
+          <text class="label">书号</text>
+          <text class="value">9999993339393</text>
+        </view>
+        <view class="form-item">
+          <text class="label">总字数</text>
+          <text class="value">99999999</text>
+        </view>
+      </view>
+
+      <!-- 提交按钮 -->
+      <view class="submit-btn" @click="submitForm">提交申请</view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  components: {
+    'uv-navbar': () => import('@/uni_modules/uv-navbar/components/uv-navbar/uv-navbar.vue')
+  },
+  data() {
+    return {
+      formData: {
+        cover: '',
+        title: '',
+        type: '',
+        description: '',
+        status: 'serial' // 默认连载
+      }
+    }
+  },
+  methods: {
+    // 选择封面
+    chooseCover() {
+      uni.chooseImage({
+        count: 1,
+        success: (res) => {
+          this.formData.cover = res.tempFilePaths[0]
+        }
+      })
+    },
+    
+    // 提交表单
+    submitForm() {
+      if (!this.formData.title) {
+        uni.showToast({
+          title: '请输入作品名称',
+          icon: 'none'
+        })
+        return
+      }
+      if (!this.formData.type) {
+        uni.showToast({
+          title: '请输入作品类型',
+          icon: 'none'
+        })
+        return
+      }
+      if (!this.formData.description) {
+        uni.showToast({
+          title: '请输入作品简介',
+          icon: 'none'
+        })
+        return
+      }
+
+      // 构建作品数据
+      const workData = {
+        id: Date.now().toString(),
+        title: this.formData.title,
+        cover: this.formData.cover || 'https://bookcover.yuewen.com/qdbimg/349573/1033014772/150.webp',
+        readers: '8721',
+        status: 'ongoing',
+        publishStatus: '发布审核中',
+        isOriginal: true
+      }
+
+      // 保存到全局状态
+      getApp().globalData.submittedWork = workData
+      // 设置需要显示提交成功提示的标记
+      getApp().globalData.showSubmitSuccess = true
+
+      // 延迟返回上一页
+      setTimeout(() => {
+        // 先保存当前要显示的标签
+        uni.setStorageSync('activeBookshelfTab', 'work')
+        
+        // 返回上一页
+        uni.navigateBack({
+          delta: 1
+        })
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.create-novel {
+  min-height: 100vh;
+  background-color: #F8F8F8;
+  
+  .form-container {
+    padding: 20rpx;
+    
+    .section {
+      background-color: #FFFFFF;
+      border-radius: 12rpx;
+      padding: 30rpx;
+      margin-bottom: 20rpx;
+      
+      .section-title {
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #333;
+        margin-bottom: 30rpx;
+      }
+      
+      .upload-cover {
+        .sub-title {
+          font-size: 28rpx;
+          color: #666;
+          margin-bottom: 20rpx;
+        }
+        
+        .cover-box {
+          width: 200rpx;
+          height: 266rpx;
+          background-color: #F5F5F5;
+          border-radius: 8rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          overflow: hidden;
+          
+          .cover-image {
+            width: 100%;
+            height: 100%;
+          }
+          
+          .upload-placeholder {
+            .plus {
+              font-size: 60rpx;
+              color: #999;
+            }
+          }
+        }
+      }
+      
+      .form-item {
+        margin-bottom: 30rpx;
+        position: relative;
+        
+        &:last-child {
+          margin-bottom: 0;
+        }
+        
+        .required {
+          color: #FF0000;
+          margin-right: 4rpx;
+        }
+        
+        .label {
+          font-size: 28rpx;
+          color: #333;
+          margin-bottom: 16rpx;
+          display: block;
+        }
+        
+        input, textarea {
+          width: 100%;
+          height: 80rpx;
+          background-color: #F5F5F5;
+          border-radius: 8rpx;
+          padding: 20rpx;
+          font-size: 28rpx;
+          color: #333;
+          box-sizing: border-box;
+          position: relative;
+          z-index: 1;
+        }
+        
+        textarea {
+          height: 200rpx;
+        }
+        
+        .input-placeholder {
+          color: #999;
+        }
+        
+        .status-options {
+          display: flex;
+          gap: 40rpx;
+          
+          .status-item {
+            display: flex;
+            align-items: center;
+            gap: 10rpx;
+            
+            .radio-dot {
+              width: 32rpx;
+              height: 32rpx;
+              border: 2rpx solid #999;
+              border-radius: 50%;
+              position: relative;
+              
+              &.checked {
+                border-color: #001351;
+                
+                &::after {
+                  content: '';
+                  position: absolute;
+                  width: 20rpx;
+                  height: 20rpx;
+                  background-color: #001351;
+                  border-radius: 50%;
+                  left: 50%;
+                  top: 50%;
+                  transform: translate(-50%, -50%);
+                }
+              }
+            }
+            
+            text {
+              font-size: 28rpx;
+              color: #333;
+            }
+          }
+        }
+        
+        .value {
+          font-size: 28rpx;
+          color: #999;
+        }
+      }
+    }
+    
+    .submit-btn {
+      background-color: #001351;
+      color: #FFFFFF;
+      font-size: 32rpx;
+      text-align: center;
+      padding: 24rpx 0;
+      border-radius: 12rpx;
+      margin-top: 40rpx;
+      
+      &:active {
+        opacity: 0.9;
+      }
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/pages_order/novel/novelDetail.vue b/pages_order/novel/novelDetail.vue
new file mode 100644
index 0000000..5464536
--- /dev/null
+++ b/pages_order/novel/novelDetail.vue
@@ -0,0 +1,748 @@
+<template>
+  <!-- 小说详情页面 -->
+  <view class="novel-detail">
+    <!-- 顶部返回导航 -->
+    <navber></navber>
+
+    <!-- 小说基本信息 -->
+    <view class="novel-info">
+      <view class="novel-cover">
+        <image :src="novelData.coverUrl" mode="aspectFill"></image>
+      </view>
+      <view class="novel-basic">
+        <text class="title">{{ novelData.title }}</text>
+        <view class="author-line">
+          <text class="label">作者：</text>
+          <text class="author">{{ novelData.author }}</text>
+        </view>
+        <view class="status-line">
+          <text class="label">完结：</text>
+          <text class="status">{{ novelData.status }}</text>
+        </view>
+        <view class="score-line">
+          <text class="score">{{ novelData.score || 2814}}</text>
+          <text class="score-label">作者累计亲密度值</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 推荐票数显示 -->
+    <view class="recommendation-section">
+      <view class="rec-left">
+        <text class="rec-count">2814</text>
+        <text class="rec-label">推荐票数</text>
+      </view>
+      <view class="rec-divider"></view>
+      <view class="rec-right">
+        <button class="recommend-btn" @click="recommendNovel">
+          <text class="btn-icon">📑</text>
+          投推荐票
+        </button>
+      </view>
+    </view>
+
+    <!-- 阅读和收藏按钮 -->
+    
+
+    <!-- 我的等级 -->
+    <view class="user-level">
+      <view class="level-left">
+        <view class="level-title">
+          <text class="title-icon">👑</text>
+          <text>我的等级</text>
+        </view>
+        <view class="level-info">
+          <image class="user-avatar" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFill"></image>
+          <view class="user-details">
+            <text class="username">周海</text>
+            <view class="user-score">
+              <text class="score-value">6785452</text>
+              <text class="score-label">亲密值</text>
+            </view>
+            <text class="user-role">护书使者 五级</text>
+          </view>
+        </view>
+      </view>
+      <view class="level-right">
+        <view class="rank-btn">
+          <image class="rank-icon" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFit"></image>
+          <text>读者榜单</text>
+          <text class="check-text">点击查看</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 小说简介 -->
+    <view class="novel-intro">
+      <view class="intro-title">
+        <text>简介：</text>
+      </view>
+      <view class="intro-content">
+        <text>这游戏也太真实了吧！</text>
+        <text>搬砖、跑腿、捡垃圾、送快递。......公司最多能让你体会到996的艰辛，在这里你能体会到超级加倍的007。</text>
+        <text>好了，不废话了，伟大的管理者大人嘛就去搬砖了。那位大人说了，只要我们努力献上自己的肝，下个月他又能换一套全新的动力甲，到时候候带我们开全新的地图，去广阔的废土捡更多的垃圾！</text>
+        <text>穿越到废土世界的基光发现，自己解锁了游戏所系统，能够从平行世界召唤名为"玩家"的生物。</text>
+      </view>
+    </view>
+    
+    <!-- 目录 -->
+    <view class="novel-catalog">
+      <view class="catalog-header">
+        <view class="catalog-title">
+          <text class="title-icon">📖</text>
+          <text>目录</text>
+        </view>
+        <view class="chapter-nav">
+          <text class="current-chapter">第九集 - 高去与归来</text>
+          <text class="nav-arrow">></text>
+        </view>
+      </view>
+    </view>
+
+
+    <!-- 书评区域 -->
+    <view class="comments-section">
+      <view class="comments-header">
+        <view class="header-left">
+          <text class="title-icon">📝</text>
+          <text>书评</text>
+        </view>
+        <view class="header-right">
+          <text @click="goToWriteReview">写书评</text>
+        </view>
+      </view>
+      <view class="comment-list">
+        <view class="comment-item">
+          <view class="comment-header">
+            <image class="avatar" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFill"></image>
+            <text class="username">方香橙</text>
+          </view>
+          <view class="comment-body">
+            <text class="content-text">我是本书的作者方香橙，这是一本甜文爽文哒！请放心入坑，五星好评！女主又美有个性可爱，绝对不圣母，不傻白！男主身心干净深情独宠媳妇儿一个人...</text>
+            <view class="comment-footer">
+              <text class="comment-time">2024.07.09</text>
+              <view class="comment-likes">
+                <text class="like-icon">💬</text>
+                <text class="like-count">17</text>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="comment-item">
+          <view class="comment-header">
+            <image class="avatar" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFill"></image>
+            <text class="username">战斗世界</text>
+          </view>
+          <view class="comment-body">
+            <text class="content-text">这本小说了创意了雄天霸业奇新颖深刻以白色能量为主...</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部操作栏 -->
+    <view class="novel-bottom">
+      <view class="bottom-left">
+        <view class="action-btn" @click="addToBookshelf">
+          <text class="btn-icon">📚</text>
+          <text>加入书架</text>
+        </view>
+        <view class="action-btn" @click="toggleInteractive">
+          <text class="btn-icon">🎯</text>
+          <text>互动打赏</text>
+        </view>
+      </view>
+      <view class="bottom-right">
+        <button class="read-now-btn" @click="startReading">立即阅读</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      novelData: {
+        id: '1',
+        title: '这游戏也太真实了',
+        author: '大宝鉴在在',
+        category: '玄幻',
+        wordCount: '2814',
+        coverUrl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain',
+        introduction: '这游戏也太真实了！\n模拟，模拟，模拟，这游戏……公空居然把自己做成了游戏的NPC？这是什么新型的套路啊！好了，不要慌了，作为的管理者人员都在忙碌着，都在工作人员中，只要我们努力就自己的事，下个月他又给一套全新的剧情开始，如何将模拟的开关全新的世界，去广阔的世界去探索吧！'
+      },
+      userInfo: {
+        avatar: '/static/images/avatar.jpg',
+        level: '67级达人'
+      },
+      isCollected: false,
+      chapterCount: 2814,
+      comments: [
+        {
+          username: '方寒锋',
+          avatar: '/static/images/user1.jpg',
+          content: '我是全书中年龄最大的人，这是一本很好的文章！满满心头热，只要对你"安全"文案有兴趣的，都可以不虚，不害怕，不要想太多就去尝试阅读吧！',
+          time: '2024-07-09'
+        }
+      ]
+    }
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack()
+    },
+    startReading() {
+      uni.navigateTo({
+        url: '/pages/reader/reader'
+      })
+    },
+    toggleCollect() {
+      this.isCollected = !this.isCollected
+      // TODO: 实现收藏功能
+    },
+    recommendNovel() {
+      if (!this.novelData.id) {
+        uni.showToast({
+          title: '无效的小说ID',
+          icon: 'none'
+        })
+        return
+      }
+      uni.navigateTo({
+        url: `/pages_order/novel/vote?id=${this.novelData.id}`
+      })
+    },
+    goToWriteReview() {
+      // TODO: 实现写书评功能
+    },
+    addToBookshelf() {
+      // TODO: 实现加入书架功能
+      uni.showToast({
+        title: '已加入书架',
+        icon: 'success'
+      })
+    },
+    toggleInteractive() {
+      // TODO: 实现互动打赏功能
+      uni.showToast({
+        title: '打赏功能开发中',
+        icon: 'none'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.novel-detail {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding-bottom: 30rpx;
+}
+
+.nav-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx 30rpx;
+  background-color: transparent;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+}
+
+.novel-info {
+  padding: 20rpx;
+  display: flex;
+  background: #fff;
+}
+
+.novel-cover {
+  width: 200rpx;
+  height: 280rpx;
+  margin-right: 20rpx;
+}
+
+.novel-cover image {
+  width: 100%;
+  height: 100%;
+  border-radius: 8rpx;
+}
+
+.novel-basic {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.title {
+  font-size: 36rpx;
+  font-weight: bold;
+  margin-bottom: 16rpx;
+}
+
+.author-line, .status-line {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12rpx;
+  font-size: 28rpx;
+  color: #666;
+}
+
+.label {
+  color: #999;
+  margin-right: 8rpx;
+}
+
+.score-line {
+  margin-top: 16rpx;
+}
+
+.score {
+  font-size: 32rpx;
+  color: #333;
+  font-weight: bold;
+}
+
+.score-label {
+  font-size: 24rpx;
+  color: #999;
+  margin-left: 8rpx;
+}
+
+.recommendation-section {
+  padding: 24rpx 32rpx;
+  background: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+}
+
+.rec-left {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-left: 70rpx;
+}
+
+.rec-count {
+  font-size: 44rpx;
+  font-weight: 500;
+  color: #333;
+  line-height: 1.2;
+}
+
+.rec-label {
+  font-size: 26rpx;
+  color: #999;
+  margin-top: 4rpx;
+}
+
+.rec-divider {
+  position: absolute;
+  right: 160rpx;
+  top: 20rpx;
+  bottom: 20rpx;
+  width: 2rpx;
+  background: #eee;
+}
+
+.rec-right {
+  flex-shrink: 0;
+ 
+}
+
+.recommend-btn {
+  background: #fff;
+  color: #4a90e2;
+  border: 2rpx solid #4a90e2;
+  border-radius: 40rpx;
+  padding: 12rpx 32rpx;
+  font-size: 28rpx;
+  display: flex;
+  align-items: center;
+  line-height: 1;
+  height: 64rpx;
+}
+
+.btn-icon {
+  margin-right: 8rpx;
+  font-size: 32rpx;
+}
+
+.action-buttons {
+  display: flex;
+  padding: 30rpx;
+  gap: 20rpx;
+  
+  button {
+    flex: 1;
+    height: 80rpx;
+    border-radius: 40rpx;
+    font-size: 32rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .read-btn {
+    background-color: #4a90e2;
+    color: #fff;
+  }
+  
+  .collect-btn {
+    background-color: #f0f0f0;
+    color: #666;
+  }
+}
+
+.user-level {
+  margin: 20rpx 30rpx;
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding: 24rpx 32rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+}
+
+.level-left {
+  flex: 1;
+}
+
+.level-title {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  margin-bottom: 20rpx;
+  margin-left: 20rpx;
+  
+  .title-icon {
+    font-size: 36rpx;
+    color: #FFB800;
+  }
+  
+  text {
+    font-size: 32rpx;
+    font-weight: 500;
+    color: #333;
+  }
+}
+
+.level-info {
+  display: flex;
+  align-items: flex-start;
+  gap: 20rpx;
+}
+
+.user-avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  border: 2rpx solid #f0f0f0;
+}
+
+.user-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+}
+
+.username {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+}
+
+.user-score {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  
+  .score-value {
+    font-size: 28rpx;
+    color: #333;
+  }
+  
+  .score-label {
+    font-size: 24rpx;
+    color: #999;
+  }
+}
+
+.user-role {
+  font-size: 24rpx;
+  color: #666;
+  background: #f5f5f5;
+  padding: 4rpx 12rpx;
+  border-radius: 4rpx;
+  display: inline-block;
+}
+
+.level-right {
+  display: flex;
+  align-items: center;
+}
+
+.rank-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20rpx;
+  
+  .rank-icon {
+    width: 200rpx;
+    height: 60rpx;
+    margin-bottom: 8rpx;
+  }
+  
+  text {
+    font-size: 26rpx;
+    color: #333;
+    line-height: 1.4;
+  }
+  
+  .check-text {
+    font-size: 22rpx;
+    color: #999;
+  }
+}
+
+.novel-intro {
+  margin: 20rpx 30rpx;
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding: 24rpx;
+}
+
+.intro-title {
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 16rpx;
+}
+
+.intro-content {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.6;
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+
+  text {
+    display: block;
+  }
+}
+
+.comments-section {
+  margin: 20rpx 30rpx;
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding: 24rpx;
+}
+
+.comments-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24rpx;
+  border-bottom: 2rpx solid #f5f5f5;
+  padding-bottom: 24rpx;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+
+  .title-icon {
+    font-size: 32rpx;
+  }
+
+  text {
+    font-size: 32rpx;
+    font-weight: 500;
+    color: #333;
+  }
+}
+
+.header-right {
+  text {
+    font-size: 28rpx;
+    color: #666;
+  }
+}
+
+.comment-list {
+  display: flex;
+  flex-direction: column;
+  gap: 32rpx;
+}
+
+.comment-item {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.comment-header {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+
+.avatar {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+}
+
+.username {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+}
+
+.comment-body {
+  padding-left: 76rpx;
+}
+
+.content-text {
+  font-size: 28rpx;
+  color: #333;
+  line-height: 1.6;
+}
+
+.comment-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 16rpx;
+}
+
+.comment-time {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.comment-likes {
+  display: flex;
+  align-items: center;
+  gap: 4rpx;
+}
+
+.like-icon {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.like-count {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.novel-catalog {
+  margin: 20rpx 30rpx;
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding: 24rpx;
+}
+
+.catalog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2rpx solid #f5f5f5;
+  padding-bottom: 24rpx;
+}
+
+.catalog-title {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+
+  .title-icon {
+    font-size: 32rpx;
+  }
+
+  text {
+    font-size: 32rpx;
+    font-weight: 500;
+    color: #333;
+  }
+}
+
+.chapter-nav {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+
+  .current-chapter {
+    font-size: 28rpx;
+    color: #666;
+  }
+
+  .nav-arrow {
+    font-size: 28rpx;
+    color: #999;
+  }
+}
+
+.novel-bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100rpx;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  padding: 0 30rpx;
+  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.bottom-left {
+  flex: 1;
+  display: flex;
+  gap: 40rpx;
+}
+
+.action-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4rpx;
+
+  .btn-icon {
+    font-size: 40rpx;
+    line-height: 1;
+  }
+
+  text {
+    font-size: 24rpx;
+    color: #666;
+  }
+}
+
+.bottom-right {
+  flex-shrink: 0;
+}
+
+.read-now-btn {
+  background: #1a237e;
+  color: #fff;
+  font-size: 32rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  padding: 0 60rpx;
+  border-radius: 40rpx;
+  border: none;
+}
+</style>
diff --git a/pages_order/novel/vote.vue b/pages_order/novel/vote.vue
new file mode 100644
index 0000000..ccd1cae
--- /dev/null
+++ b/pages_order/novel/vote.vue
@@ -0,0 +1,162 @@
+<template>
+  <view class="vote-container">
+    <!-- Empty space at the top -->
+    <view class="empty-space"></view>
+    
+    <!-- Bottom sheet with voting interface -->
+    <view class="vote-sheet">
+      <view class="sheet-header">
+        <text class="sheet-title">投推荐票</text>
+      </view>
+      
+      <view class="vote-options">
+        <text class="option-label">推荐投票</text>
+        <view class="quick-options">
+          <view class="option-btn" @click="setVotes(1)">1</view>
+          <view class="option-btn" @click="setVotes(5)">5</view>
+          <view class="option-btn" @click="setVotes(10)">10</view>
+        </view>
+        
+        <text class="option-label">手动设置</text>
+        <view class="manual-input">
+          <view class="minus-btn" @click="decreaseVotes">-</view>
+          <view class="vote-count">
+            <text>x{{voteCount}}</text>
+          </view>
+          <view class="plus-btn" @click="increaseVotes">+</view>
+        </view>
+      </view>
+      
+      <button class="submit-btn" @click="submitVote">投票</button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      voteCount: 1
+    }
+  },
+  methods: {
+    setVotes(count) {
+      this.voteCount = count
+    },
+    increaseVotes() {
+      this.voteCount++
+    },
+    decreaseVotes() {
+      if (this.voteCount > 1) {
+        this.voteCount--
+      }
+    },
+    submitVote() {
+      // TODO: Implement vote submission
+      uni.showToast({
+        title: `已投${this.voteCount}票`,
+        icon: 'success'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.vote-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.empty-space {
+  flex: 1;
+}
+
+.vote-sheet {
+  background-color: #fff;
+  border-radius: 20rpx 20rpx 0 0;
+  padding: 30rpx;
+}
+
+.sheet-header {
+  text-align: center;
+  margin-bottom: 40rpx;
+}
+
+.sheet-title {
+  font-size: 32rpx;
+  font-weight: 500;
+}
+
+.vote-options {
+  margin-bottom: 40rpx;
+}
+
+.option-label {
+  font-size: 28rpx;
+  color: #666;
+  margin-bottom: 20rpx;
+}
+
+.quick-options {
+  display: flex;
+  gap: 20rpx;
+  margin-top: 30rpx;
+  margin-bottom: 40rpx;
+}
+
+.option-btn {
+  flex: 1;
+  height: 80rpx;
+  background-color: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+}
+
+.manual-input {
+    margin-top: 30rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20rpx;
+}
+
+.minus-btn, .plus-btn {
+    width: 220rpx;
+  height: 80rpx;
+  background-color: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8rpx;
+  font-size: 32rpx;
+}
+
+.vote-count {
+  width: 220rpx;
+  height: 82rpx;
+  background-color: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 88rpx;
+  background-color: #000033;
+  color: #fff;
+  border-radius: 8rpx;
+  font-size: 32rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>