From a5f0220b0448fcbf3239c322e44b2cf0adffb8f7 Mon Sep 17 00:00:00 2001
From: hflllll <violeteverdack@gmail.com>
Date: Fri, 12 Sep 2025 12:38:06 +0800
Subject: [PATCH] 'Save'

---
 manifest.json               |   2 +-
 pages.json                  |  16 +-
 pages/index/home.vue        |  13 +-
 static/内容图标.png     | Bin 0 -> 742 bytes
 static/课程图标.png     | Bin 0 -> 847 bytes
 subPages/home/directory.vue | 475 ++++++++++++++++++++++++++++++++++++++++++++
 subPages/home/search.vue    | 333 +++++++++++++++++++++++++++++++
 7 files changed, 835 insertions(+), 4 deletions(-)
 create mode 100644 static/内容图标.png
 create mode 100644 static/课程图标.png
 create mode 100644 subPages/home/directory.vue
 create mode 100644 subPages/home/search.vue

diff --git a/manifest.json b/manifest.json
index 9a9d179..09dbf4c 100644
--- a/manifest.json
+++ b/manifest.json
@@ -50,7 +50,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wx99fa48d1b6adc699",
+        "appid" : "wx24736a3864e8f0e9",
         "setting" : {
             "urlCheck" : false
         },
diff --git a/pages.json b/pages.json
index 425f1ca..bda3c3c 100644
--- a/pages.json
+++ b/pages.json
@@ -16,7 +16,7 @@
 		{
 			"path": "pages/index/member",
 			"style": {
-				"navigationBarTitleText": "custom",
+				"navigationStyle": "custom",
 				"enablePullDownRefresh": true
 			}
 		},
@@ -52,11 +52,23 @@
 						"navigationBarBackgroundColor": "#06DADC"
 					}
 				},
+				{
+					"path": "home/search",
+					"style": {
+						"navigationStyle": "custom"
+					}
+				},
 				{
 					"path": "home/submit",
 					"style": {
 						"navigationBarTitleText": "报名个人语境定制"
-						
+					}
+				},
+				{
+					"path": "home/directory",
+					"style": {
+						"navigationBarTitleText": "",
+						"navigationBarBackgroundColor": "#264C8F"
 					}
 				},
 				{
diff --git a/pages/index/home.vue b/pages/index/home.vue
index cdca2a2..0dc7efa 100644
--- a/pages/index/home.vue
+++ b/pages/index/home.vue
@@ -5,7 +5,7 @@
     
     <!-- 顶部搜索栏 -->
     <view class="header">
-      <view class="search-container">
+      <view class="search-container" @click="goSearch">
         <uv-search 
           placeholder="请输入要查询的内容" 
           :show-action="false"
@@ -97,6 +97,7 @@
             v-for="(book, index) in recommendBooks" 
             :key="index" 
             class="book-item"
+            @click="goBook"
           >
             <view class="book-cover">
               <image :src="book.cover" mode="aspectFill"></image>
@@ -311,6 +312,16 @@ export default {
       uni.navigateTo({
         url: '/subPages/home/plan'
       })
+    },
+    goSearch() {
+      uni.navigateTo({
+        url: '/subPages/home/search'
+      })
+    },
+    goBook() {
+      uni.navigateTo({
+        url: '/subPages/home/directory'
+      })
     }
   }
 }
diff --git a/static/内容图标.png b/static/内容图标.png
new file mode 100644
index 0000000000000000000000000000000000000000..99a0fdef39dcc73b25d08104169b8cb6e11cc793
GIT binary patch
literal 742
zcmV<C0vY{@P)<h;3K|Lk000e1NJLTq001li001Be1^@s6X-1lQ00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0((hBK~#7F?O5Aw
z+b|TR<kzR&38HSG4eCr#cLN(R{D4224bl!_7&Z*ZognT6jVGu)LD>o7{P@Gqo?}ob
zqeu!9ML`Vc00b{}$-^sNUP`={2w^xJx`jgF6GYdxZRdDAI*@Cs=#Z9Wt)Q2bQ5J{8
z!SDC`Qt#w>UTw44)FG17!5DIq%L(zVSfH2C`{dp4_lv<`;Om_%jr0oQ*9gO&1x$F0
ziM~_Di(g~nx=06!@&k)8<6>B&(a6C{{t}Ph_`N~G=*uEj;YPVV0Np%C?L$Ymv%YV&
zS}T3@bUM8N0bN`}?Q$g{*P~{F?v^~{-0gPDN~LnwZnyvHedy)&dhL`-r7HOpmn;4+
zqysxVYdjtwgF)=n>2wz2g`l@cs%?XLxm<3AU-p@tP3!<KXxq9njj;sx7*|t!<fk!K
zanAI%EzS(N!CB+%3@%1JR3DPx!Vn0wt6s17GpUb?_G@7PenD}(T}B0Lq`~YsnM|6(
z5IDM)2HkiT|1sz%w%hGJPOQk&r5HCT?GYD-`p1wWCGw!l8c9LN{buy%hM;Ra6?FIo
zXrQ_gW{}-(_hXbIDd-x)5GFwf1LokY3j;9d;&g8obg#vk2VK@k3c5RChzx>`d)|tA
z9vgHp`UCD}Rbhbe?IFg1Ic_PANQu~>Q{VAaKi^@Pyx3F7gDz|224{`4Gx$MX0{DU?
zMh!QEiy*ne{94>#^kLG4`LN(bS)%<J?WWStP!?!cwVYZaC+3#{A7q{?Qe~zh4Sx4H
z%TMz+RV0e9Tr5>vC^;6~I&?L2Y-qYlc9r^+It|jYtl{3%Hj3j@xw=z2R&7fs;HI7b
Y0CT5P%|RE7q5uE@07*qoM6N<$f`Il_Y5)KL

literal 0
HcmV?d00001

diff --git a/static/课程图标.png b/static/课程图标.png
new file mode 100644
index 0000000000000000000000000000000000000000..354978038a251703a0aa3233e3dd29e106d2c49b
GIT binary patch
literal 847
zcmV-V1F-ywP)<h;3K|Lk000e1NJLTq001Tc001Ni1^@s6<@HFV00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0^~_VK~#7F?O5Gy
z8bJ^q4g|dAQh}j@Kn0KrxDIki2!wb^DhRG1enAL?gsC8;0z(BM9h^Jhk$>`yv%47|
zci?mERUZ6FXm;;rcRpr!XJ#)&&%j_X=t6vodY4M2mdE4qy47k;=^v1yga9cI;`=4N
zY&QG8Uav3dnaEIbd=Tvgykm^RTLlRI(SE;w2Vs?%K{}oG8jZ%i?!%j3A-ePeaOgk9
z8?mH#w8#4Wej!e=-EIf;0vM0S?rOF29LKpj91fGXc@44QaCnCkR*jnw8#_P<C~r0!
zN(%hpDu`5ZYAYDe?T6=(K17k?i1EO4q!bF6v_=VlKl2%aPpZp(*f^P!ZNqCbiXs*Q
zN9={}aBRYaJ|)C<yZs1{d<#A1tT4r#0jaP8oeIQ^o<a=iWTHE28GK3zj4{C#WM=4h
zo6Y82KU3axL9z;YeKMY22?)MFNkx9%Q<9XzjQ)_W@_`^*#FWu#oN@M|Zm-wt3Rxy*
zyc9k-c=toM)pFV+me1#9=~I&LRQw85*9(t*RbpKBz#IC6`w=RdcwsaeU6Czf46&Eo
zuyI6wvz)u#&a+DFoN+8QdsClWyTr~JmrD)LmaGyB8xMyKcvSB*mxDRkA{I7|%HpwS
z9A_@tHLJvA%#y|#$OvYs;n|W^VwYl8REDrw!J3#Ak)BR6giT_x=}Be?T^Cv-hU#|~
zHm;#g?!$XX&nmGf;}SAM^m@IL)mxG@E@Ku0A;l~;YPpJ4V$!%OsSQ-!Z!&~cV$yh2
z4Mu;fTDwcBj6S8Rbx$rM_$RKs_`<Djj19gC6`?CXWyR_W<8#>Xxy@k%<L@~eum@!#
z&qNHof#OZfq`VA#x-{uKN(hcwAT(CpTYdQr-8q+zQa1VO4ERp?i+^+(f&4rrA;U(*
z{I`%kVqP($mEqDd*hhZ8WKZEk+`QB21Z)(a6Uum2i_^{JauYfOY=JKb3HmZTRdX+-
Z&Tk3Fi>L_?2_XOg002ovPDHLkV1hn#b|C-&

literal 0
HcmV?d00001

diff --git a/subPages/home/directory.vue b/subPages/home/directory.vue
new file mode 100644
index 0000000..0da3cfb
--- /dev/null
+++ b/subPages/home/directory.vue
@@ -0,0 +1,475 @@
+<template>
+  <view class="directory-container">
+    <view class="book-container">
+      <view class="book-info">
+      <view class="book-cover">
+        <image :src="bookInfo.cover" mode="aspectFill" :style="{width: '100%', height: '100%'}"></image>
+      </view>
+      <view class="book-details">
+        <view class="book-title">{{ bookInfo.title }}</view>
+        <view class="book-subtitle">{{ bookInfo.subtitle }}</view>
+        <view class="book-author">{{ bookInfo.author }}</view>
+        <view class="book-level" :class="classMap[bookInfo.level]">{{ bookInfo.level }}</view>
+      </view>
+      </view>
+      <view class="book-knowledge">
+        <view class="book-knowledge-title">
+          <text>
+            适合词汇量
+          </text>
+          <text class="book-knowledge-vocabulary">
+            {{ bookInfo.vocabularyRange }}
+          </text>
+        </view>
+        <view class="border" /> 
+        <view class="book-knowledge-detail">
+          <view class="book-knowledge-detail-title">
+            知识收获
+          </view>
+          <rich-text :nodes="bookInfo.knowledgePoints">
+          </rich-text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 课程和简介容器 -->
+    <view class="content-container">
+      <!-- 课程部分 -->
+      <view class="course-section">
+        <view class="course-header">
+          <view class="course-title">课程</view>
+        </view>
+        <view class="course-list">
+          <view 
+            v-for="(course, index) in courseList" 
+            :key="index"
+            class="course-item"
+          >
+            <view class="course-number">{{ String(index + 1).padStart(2, '0') }}</view>
+            <view class="course-content">
+              <view class="course-name">{{ course.name }}</view>
+              <view class="course-subtitle">{{ course.subtitle }}</view>
+            </view>
+          </view>
+        </view>
+        <view class="course-footer">
+          <view class="course-total">全部课程 · {{ courseList.length }}节</view>
+          <uv-icon name="arrow-right" size="24rpx" color="#999"></uv-icon>
+        </view>
+      </view>
+
+      <!-- 简介部分 -->
+      <view class="intro-section">
+        <view class="intro-title">简介</view>
+        <view class="intro-content">
+          {{ bookInfo.introduction }}
+        </view>
+      </view>
+
+      <!-- 作者部分 -->
+      <view class="author-section">
+        <view class="author-title">作者</view>
+        <view class="author-info">
+          <view class="author-avatar">
+            <image src="/static/默认头像.png" mode="aspectFill"></image>
+            <view>
+              <view class="author-name">John Steinbeck</view>
+              <view class="author-subtitle">约翰·斯坦贝克</view>
+            </view>
+          </view>
+          <view class="author-details">
+            <view class="author-description">
+              约翰·斯坦贝克（1902 — 1968）是美国现代小说家，1962 年荣获诺贝尔文学奖。斯坦贝克一生创作出了 27 部作品，它们大多着眼于美国底层人民的生活，对贫穷而善良的劳苦大众展现出了强烈的同情心。不仅为被压迫者申辩，而且还歌颂了他们在困境中生存的勇气和斗志。斯坦贝克最为优秀的几部作品都发表于 20世纪30年代之后，例如荣获美国国家图书奖、普利策奖的长篇小说《愤怒的葡萄》，具有浓厚乡土气息的短篇集《小红马》和中篇小说《人鼠之间》，以反法西斯战争为题材的中篇小说《月亮下去了》等。斯坦贝克既是地位崇高的文学大师，也是深受美国民众爱戴的畅销作家，他的作品不仅深刻影响了美国文学的发展，也启发了人们对社会、人性、生死等话题的思考。
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 底部固定操作栏 -->
+    <view class="bottom-action-bar">
+      <view class="bottom-action-container">
+        <view class="action-button secondary">
+          <image src="/static/课程图标.png" class="button-icon" mode="aspectFill"></image>
+          <text>加入课程</text>
+        </view>
+        <view class="action-button primary">
+          <image src="/static/内容图标.png" class="button-icon" ></image>
+          <text>内容朗读</text>
+        </view>
+        <uv-button type="primary" :custom-style="{
+          width: '400rpx',
+          height: '80rpx',
+          borderRadius: '198rpx',
+          background: '#06DADC',
+          fontSize: '28rpx',
+          fontWeight: '600'
+        }" >开始学习</uv-button>
+      </view>
+      <uv-safe-bottom></uv-safe-bottom>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      classMap: {
+        '朵蕾会员': 'book-level-1',
+        '萌芽会员': 'book-level-2',
+        '盛放会员': 'book-level-3',
+      },
+      bookInfo: {
+        cover: '/static/默认图片.png',
+        title: 'The Little Prince',
+        subtitle: '小王子',
+        author: '圣-埃克苏佩里',
+        level: '朵蕾会员',
+        vocabularyRange: '1.6K~2.5K',
+        // 我是富文本字符串
+        knowledgePoints: '<div>1. 41天读完法国作家圣埃克苏佩里文学作品</div><div>2. 掌握400+单词英文文本，收获对于法语的</div><div>3. 感受英文文学作品的魅力，在阅读中提升英语语感和文学素养</div><div>4. 通过英文原著，在生活中，对语言使用的文学性</div><div>5. 名作阅读</div>',
+        introduction: '在阿尔卑斯山上住着一个可爱的女孩小海蒂。她自幼失去父母，同性格倔强但心地善良的爷爷一起生活。后来，因为姨妈介绍的一个机会，海蒂去到了法兰克福，和一个叫克拉拉的女孩儿作伴。克拉拉自小患病无法行走，虽然两个孩子感情很好，但海蒂却因为想家患上了梦游症。最终海蒂回到了阿尔卑斯山，同山里的亲友们找回了幸福的生活。随后，克拉拉也如约前来拜访，在海蒂和爷爷的悉心照料下，奇迹发生了...'
+      },
+      courseList: [
+        {
+          name: 'Look, George!',
+          subtitle: '你瞧，乔治'
+        },
+        {
+          name: 'A Live Mouse?',
+          subtitle: '活老鼠？'
+        },
+        {
+          name: 'Beans with Ketchup',
+          subtitle: '豆子配番茄酱'
+        },
+        {
+          name: 'Aunt Clara',
+          subtitle: '卡莉拉姑姑'
+        },
+        {
+          name: 'No Ketchup',
+          subtitle: '无番茄酱'
+        }
+      ]
+    }
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.directory-container {
+  min-height: 100vh;
+  background-color: #264C8F;
+
+}
+.book-container{
+  padding: 30rpx;
+}
+.book-info {
+  display: flex;
+  align-items: start;
+  
+  gap: 32rpx;
+  .book-cover {
+    width: 208rpx;
+    height: 292rpx;
+    border-radius: 16rpx;
+  }
+  .book-details{
+     color: white;
+     display: flex;
+     flex-direction: column;
+     gap: 16rpx;
+    .book-title{
+      font-weight: 500;
+      font-size: 40rpx;
+    }
+    .book-subtitle{
+      font-weight: 500;
+      font-size: 30rpx;
+    }
+    .book-author{
+      font-size: 24rpx;
+    }
+    .book-level{
+      font-size: 24rpx;
+      width: 124rpx;
+      height: 38rpx;
+      border-radius: 8rpx;
+      text-align: center;
+      line-height: 38rpx;
+      color: #080D21;
+    }
+    .book-level-1{
+      background: #E9F1FF;
+      border: 2rpx solid #C4DAFF
+    }
+    .book-level-2{
+      background: #FFE9E9;
+      border: 2rpx solid #FFDBC4
+    }
+    .book-level-3{
+      background: #FFF4E9;
+      border: 2rpx solid #FFE2C4
+    }
+  }
+}
+.book-knowledge{
+  box-shadow: 0px 1px 5px 0px #103577;
+  background: #234684;
+  color: #fff;
+  margin-top: 32rpx;
+  border: 2rpx solid #FFFFFF3B;
+  border-radius: 32rpx;
+  padding-top: 32rpx;
+  padding-right: 40rpx;
+  padding-bottom: 32rpx;
+  padding-left: 40rpx;
+  gap: 24rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 22rpx;
+  .book-knowledge-title{
+    font-size: 32rpx;
+    font-weight: 600;
+    display: flex;
+    justify-content: space-between;
+    .book-knowledge-vocabulary{
+      font-size: 40rpx;
+      color: #06DADC;
+    }
+  }
+
+  .border {
+    width: 100%;
+    border: 2rpx solid;
+    border-image-source: linear-gradient(90deg, rgba(233, 181, 123, 0) 0%, rgba(255, 255, 255, 0.79) 50.48%, rgba(233, 181, 123, 0) 100%);
+    border-image-slice: 1;
+  }
+
+  .book-knowledge-detail-title{
+    font-size: 32rpx;
+    font-weight: 600;
+    margin-bottom: 16rpx;
+  }
+
+}
+
+/* 课程和简介容器 */
+.content-container {
+  padding: 40rpx 32rpx;
+  border-radius: 40rpx 40rpx 0 0;
+  overflow: hidden;
+  background: #fff;
+  display: flex;
+  gap: 24rpx;
+  flex-direction: column;
+}
+
+/* 课程部分 */
+.course-section {
+  background: #F8F8F8;
+  border-radius: 32rpx;
+  border-radius: 32rpx;
+  padding-top: 36rpx;
+  padding-right: 32rpx;
+  padding-bottom: 36rpx;
+  padding-left: 32rpx;
+  gap: 36rpx;
+  display: flex;
+  flex-direction: column;
+}
+
+
+
+.course-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #3B3D3D;
+}
+
+.course-list {
+  // margin-bottom: 32rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+}
+
+.course-item {
+  display: flex;
+  align-items: center;
+  // background: red;
+  border-bottom: 2rpx solid #EEEEEE;
+  padding-bottom: 20rpx;
+  gap: 36rpx;
+}
+
+.course-item:last-child {
+  border-bottom: none;
+}
+
+.course-number {
+  font-size: 36rpx;
+  color: #999;
+  
+
+}
+
+.course-content {
+  flex: 1;
+}
+
+.course-name {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #3B3D3D;
+  margin-bottom: 8rpx;
+}
+
+.course-subtitle {
+  font-size: 28rpx;
+  color: #3B3D3D;
+}
+
+.course-footer {
+  display: flex;
+  align-items: center;
+  // justify-content: space-between;
+}
+
+.course-total {
+  font-size: 24rpx;
+  color: #999;
+}
+
+/* 简介部分 */
+.intro-section {
+  background: #F8F8F8;
+
+border-radius: 32rpx;
+padding: 32rpx;
+
+}
+
+.intro-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #3B3D3D;
+  margin-bottom: 24rpx;
+}
+
+.intro-content {
+  font-size: 28rpx;
+  line-height: 48rpx;
+  color: #4F4F4F;
+}
+
+/* 作者部分 */
+.author-section {
+  background: #F8F8F8;
+  border-radius: 32rpx;
+  padding: 32rpx;
+
+  .author-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #3B3D3D;
+    margin-bottom: 24rpx;
+  }
+
+  .author-info {
+    display: flex;
+    gap: 24rpx;
+    align-items: flex-start;
+    flex-direction: column;
+    .author-avatar {
+      
+      display: flex;
+      
+      align-items: center;
+      gap: 16rpx;
+      image {
+        width: 80rpx;
+        height: 80rpx;
+        border-radius: 50%;
+        overflow: hidden;
+        flex-shrink: 0;
+       
+      }
+      .author-name {
+        font-size: 36rpx;
+        font-weight: 600;
+        color: #252545;
+        margin-bottom: 12rpx;
+      }
+
+      .author-subtitle {
+        font-size: 28rpx;
+        color: #3B3D3D;
+        // margin-bottom: 16rpx;
+      }
+
+    }
+
+    .author-details {
+      flex: 1;
+
+     
+      .author-description {
+        font-size: 28rpx;
+        line-height: 48rpx;
+        color: #4F4F4F;
+      }
+    }
+  }
+}
+
+/* 底部固定操作栏 */
+.bottom-action-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  padding: 24rpx 32rpx 0;
+  box-shadow: 0rpx -2rpx 0rpx 0rpx #0000001A;
+  z-index: 999;
+
+  .bottom-action-container{
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+
+    .action-button {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 16rpx 0rpx;
+      border-radius: 16rpx;
+      min-width: 120rpx;
+      gap: 8rpx;
+  
+      .button-icon {
+        width: 44rpx;
+        height: 44rpx;
+      }
+  
+      text {
+        font-size: 24rpx;
+        color: #999999;
+      }
+
+    }
+
+  }
+}
+</style>
\ No newline at end of file
diff --git a/subPages/home/search.vue b/subPages/home/search.vue
new file mode 100644
index 0000000..800d1c3
--- /dev/null
+++ b/subPages/home/search.vue
@@ -0,0 +1,333 @@
+<template>
+  <view class="search-container">
+    <!-- 状态栏安全区域 -->
+    <uv-status-bar></uv-status-bar>
+    
+    <!-- 顶部搜索栏 -->
+    <view class="search-header">
+      <uv-search 
+        v-model="searchKeyword"
+        placeholder="请输入内容"
+        :show-action="true"
+        action-text="搜索"
+        :action-style="{
+          color: '#fff',
+          backgroundColor: '#FFA500',
+          borderRadius: '198rpx',
+          width: '100rpx',
+          height: '64rpx',
+          textAlign: 'center',
+          fontSize: '26rpx',
+          lineHeight: '64rpx',
+        }"
+        :customStyle="{
+          width: '500rpx',
+        }"
+        @search="handleSearch"
+        @custom="handleSearch"
+      ></uv-search>
+    </view>
+    
+    <!-- 分类标签栏 -->
+    <view class="category-tabs">
+      <scroll-view scroll-x class="tab-scroll">
+        <view class="tab-list">
+          <view 
+            v-for="(tab, index) in categoryTabs" 
+            :key="index"
+            class="tab-item"
+            :class="{ active: currentTab === index }"
+            @click="switchTab(index)"
+          >
+            {{ tab }}
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    
+    <!-- 搜索结果列表 -->
+    <view class="search-results">
+      <view 
+        v-for="(book, index) in bookList" 
+        :key="index"
+        class="book-item"
+        @click="goToDetail(book)"
+      >
+        <view class="book-cover">
+          <image :src="book.cover" mode="aspectFill"></image>
+        </view>
+        <view class="book-info">
+          <view class="book-title">{{ book.title }}</view>
+          <view class="book-author">{{ book.author }}</view>
+          <view class="book-meta">
+            <view class="book-duration">
+              <image src="/static/播放图标.png" mode="aspectFill" class="book-icon"></image>
+              <text>{{ book.duration }}</text>
+            </view>
+            <view class="book-membership"  :class="classMap[book.membershipType]">
+              {{ book.membership }}
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchKeyword: '短文',
+      currentTab: 0,
+      categoryTabs: ['为你推荐', '精选', '短文', '专栏', '初中', '四六级'],
+      // 类型引射表
+      classMap: {
+        premium: 'book-membership-premium',
+        vip: 'book-membership-vip',
+        basic: 'book-membership-basic',
+      },
+      bookList: [
+        {
+          cover: '/static/主页图标.png',
+          title: '短文全脑孩子：12项革命性策略...',
+          author: 'Daniel J. Siegel / Tina Payne Bryson / Del...',
+          duration: '03:24',
+          membership: '蕾朵会员',
+          membershipType: 'premium'
+        },
+        {
+          cover: '/static/默认图片.png',
+          title: '精讲短文',
+          author: 'Daniel J. Siegel / Tina Payne Bryson / Del...',
+          duration: '03:24',
+          membership: '盛放会员',
+          membershipType: 'vip'
+        },
+        {
+          cover: '/static/默认图片.png',
+          title: '精讲短文',
+          author: 'Daniel J. Siegel / Tina Payne Bryson / Del...',
+          duration: '03:24',
+          membership: '蕾朵会员',
+          membershipType: 'premium'
+        },
+        {
+          cover: '/static/默认图片.png',
+          title: '精讲短文',
+          author: 'Daniel J. Siegel / Tina Payne Bryson / Del...',
+          duration: '03:24',
+          membership: '盛放会员',
+          membershipType: 'vip'
+        },
+        {
+          cover: '/static/默认图片.png',
+          title: '精讲短文',
+          author: 'Daniel J. Siegel / Tina Payne Bryson / Del...',
+          duration: '03:24',
+          membership: '萌芽会员',
+          membershipType: 'basic'
+        },
+        {
+          cover: '/static/默认图片.png',
+          title: '精讲短文',
+          author: 'Daniel J. Siegel / Tina Payne Bryson / Del...',
+          duration: '03:24',
+          membership: '萌芽会员',
+          membershipType: 'basic'
+        },
+        {
+          cover: '/static/默认图片.png',
+          title: '精讲短文',
+          author: 'Daniel J. Siegel / Tina Payne Bryson / Del...',
+          duration: '03:24',
+          membership: '萌芽会员',
+          membershipType: 'basic'
+        },
+        {
+          cover: '/static/默认图片.png',
+          title: '精讲短文',
+          author: 'Daniel J. Siegel / Tina Payne Bryson / Del...',
+          duration: '03:24',
+          membership: '萌芽会员',
+          membershipType: 'basic'
+        },
+      ]
+    }
+  },
+  methods: {
+    handleSearch() {
+      console.log('搜索:', this.searchKeyword)
+      // 这里添加搜索逻辑
+    },
+    switchTab(index) {
+      this.currentTab = index
+      console.log('切换分类:', this.categoryTabs[index])
+      // 这里添加分类切换逻辑
+    },
+    goToDetail(book) {
+      console.log('查看详情:', book)
+      // 这里添加跳转详情页逻辑
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.search-container {
+  background: #fff;
+  min-height: 100vh;
+}
+
+.search-header {
+  padding: 10rpx 32rpx  20rpx;
+  background: #fff;
+}
+
+.category-tabs {
+  background: #fff;
+  // border-bottom: 1rpx solid #f0f0f0;
+  
+  .tab-scroll {
+    white-space: nowrap;
+  }
+  
+  .tab-list {
+    display: flex;
+    padding: 0 32rpx;
+  }
+  
+  .tab-item {
+    flex-shrink: 0;
+    padding: 24rpx 22rpx;
+    font-size: 32rpx;
+    color: $secondary-text-color;
+    position: relative;
+    
+    &.active {
+      color: $primary-text-color;
+      font-weight: 600;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 22rpx;
+        height: 4rpx;
+        background: $primary-text-color;
+        border-radius: 2rpx;
+      }
+    }
+  }
+}
+
+.search-results {
+  padding: 32rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 32rpx;
+}
+
+.book-item {
+  display: flex;
+  align-items: center;
+  // border-bottom: 1rpx solid #f5f5f5;
+  background: #F8F8F8;
+  // width: 686rpx;
+  height: 212rpx;
+  gap: 16rpx;
+  border-radius: 16rpx;
+  padding: 0rpx 16rpx;
+
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  .book-cover {
+    width: 136rpx;
+    height: 180rpx;
+    border-radius: 16rpx;
+    overflow: hidden;
+    margin-right: 16rpx;
+    
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  
+  .book-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  
+  .book-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: $primary-text-color;
+    line-height: 48rpx;
+    letter-spacing: 0;
+    margin-bottom: 12rpx;
+    overflow: hidden;
+    
+    text-overflow: ellipsis;
+  }
+  
+  .book-author {
+    font-size: 24rpx;
+    color: $secondary-text-color;
+    margin-bottom: 16rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .book-meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .book-duration {
+    display: flex;
+    align-items: center;
+    font-size: 22rpx;
+    color: #999;
+    .book-icon{
+      width: 18rpx;
+      height: 18rpx;
+    }
+    text {
+      margin-left: 8rpx;
+    }
+  }
+  
+  .book-membership {
+    padding: 8rpx 16rpx;
+    border-radius: 8rpx;
+    font-size: 24rpx;
+    color: #211508;
+  }
+}
+
+.book-membership-premium {
+  background: #E9F1FF;
+  border: 2rpx solid #C4DAFF
+}
+
+.book-membership-vip {
+  background: #FFF4E9;
+  border: 2rpx solid #FFE2C4
+}
+
+.book-membership-basic {
+  background: #FFE9E9;
+  border: 2rpx solid #FFDBC4
+}
+  
+
+</style>
\ No newline at end of file