diff --git a/.figma/0_2/index.jsx b/.figma/0_2/index.jsx
index 372a893..4771c09 100644
--- a/.figma/0_2/index.jsx
+++ b/.figma/0_2/index.jsx
@@ -6,18 +6,18 @@ const Component = () => {
   return (
     <div className={styles.lunacyBackground}>
       <div className={styles.autoWrapper}>
-        <img src="../image/mhcsnkh7-payvxas.svg" className={styles.frame} />
+        <img src="../image/mhcw5e6e-krjj7v6.svg" className={styles.frame} />
         <p className={styles.text}>AI棒榜</p>
-        <img src="../image/mhcsnkh6-f2bmhlt.svg" className={styles.frame2} />
+        <img src="../image/mhcw5e6d-58eu18x.svg" className={styles.frame2} />
       </div>
       <div className={styles.frame3}>
         <p className={styles.text2}>微短剧爆火</p>
         <p className={styles.text3}>中国“血统”的ReelShort征服美国</p>
       </div>
-      <img src="../image/mhcsnkh6-xcf1iao.svg" className={styles.frame4} />
+      <img src="../image/mhcw5e6d-8fwj6ae.svg" className={styles.frame4} />
       <div className={styles.autoWrapper2}>
         <p className={styles.a2}>日榜 2025年10月19日/周日</p>
-        <img src="../image/mhcsnkh7-agp49tn.svg" className={styles.frame5} />
+        <img src="../image/mhcw5e6e-zupmsq9.svg" className={styles.frame5} />
       </div>
       <div className={styles.autoWrapper3}>
         <div className={styles.frame6}>
@@ -36,21 +36,21 @@ const Component = () => {
       <div className={styles.frame39}>
         <div className={styles.frame17}>
           <div className={styles.frame16}>
-            <img src="../image/mhcsnkh7-9bgqgi2.png" className={styles.frame8} />
+            <img src="../image/mhcw5e6e-u278byr.png" className={styles.frame8} />
             <div className={styles.autoWrapper7}>
               <p className={styles.a24}>奶团</p>
               <div className={styles.autoWrapper5}>
                 <div className={styles.autoWrapper4}>
                   <img
-                    src="../image/mhcsnkh7-r5edpmw.svg"
+                    src="../image/mhcw5e6e-5gc00qy.svg"
                     className={styles.frame9}
                   />
                   <img
-                    src="../image/mhcsnkh7-60ry0my.svg"
+                    src="../image/mhcw5e6e-19alacf.svg"
                     className={styles.frame10}
                   />
                   <img
-                    src="../image/mhcsnkh7-zffsry5.svg"
+                    src="../image/mhcw5e6e-7kk4jjy.svg"
                     className={styles.frame11}
                   />
                 </div>
@@ -64,18 +64,18 @@ const Component = () => {
               </div>
               <div className={styles.autoWrapper6}>
                 <img
-                  src="../image/mhcsnkh7-3dec2ln.svg"
+                  src="../image/mhcw5e6e-6bvf0dd.svg"
                   className={styles.frame12}
                 />
                 <p className={styles.a26}>9999W</p>
                 <img
-                  src="../image/mhcsnkh7-5xbxskt.svg"
+                  src="../image/mhcw5e6e-5hzy6ee.svg"
                   className={styles.frame13}
                 />
                 <p className={styles.a26}>374W</p>
               </div>
             </div>
-            <img src="../image/mhcsnkh7-zac36w2.svg" className={styles.frame14} />
+            <img src="../image/mhcw5e6e-5x5ujui.svg" className={styles.frame14} />
             <p className={styles.a27}>300W</p>
             <div className={styles.frame15}>
               <p className={styles.a1}>1</p>
@@ -83,25 +83,25 @@ const Component = () => {
           </div>
           <p className={styles.a28}>用户评论总结</p>
         </div>
-        <img src="../image/mhcsnkh7-77prid8.svg" className={styles.frame18} />
+        <img src="../image/mhcw5e6e-epiv9as.svg" className={styles.frame18} />
         <div className={styles.frame23}>
-          <img src="../image/mhcsnkh7-pdafla9.png" className={styles.frame8} />
+          <img src="../image/mhcw5e6e-kdsx4vj.png" className={styles.frame8} />
           <div className={styles.autoWrapper9}>
             <p className={styles.a24}>奶团</p>
             <div className={styles.frame20}>
-              <img src="../image/mhcsnkh7-r5edpmw.svg" className={styles.frame19} />
+              <img src="../image/mhcw5e6e-5gc00qy.svg" className={styles.frame19} />
               <p className={styles.a25}>剧场名：爱微剧场&nbsp;&nbsp;&nbsp;</p>
             </div>
             <div className={styles.autoWrapper8}>
-              <img src="../image/mhcsnkh7-djzd19r.svg" className={styles.frame12} />
+              <img src="../image/mhcw5e6e-6kmpbld.svg" className={styles.frame12} />
               <p className={styles.a26}>9999W</p>
-              <img src="../image/mhcsnkh7-r0dqs5q.svg" className={styles.frame13} />
+              <img src="../image/mhcw5e6e-l10msdd.svg" className={styles.frame13} />
               <p className={styles.a26}>374W</p>
             </div>
           </div>
           <div className={styles.autoWrapper11}>
             <div className={styles.autoWrapper10}>
-              <img src="../image/mhcsnkh7-zac36w2.svg" className={styles.frame21} />
+              <img src="../image/mhcw5e6e-5x5ujui.svg" className={styles.frame21} />
               <p className={styles.a29}>300W</p>
             </div>
             <p className={styles.a210}>用户评论总结</p>
@@ -110,20 +110,20 @@ const Component = () => {
             <p className={styles.a1}>2</p>
           </div>
         </div>
-        <img src="../image/mhcsnkh7-77prid8.svg" className={styles.frame24} />
+        <img src="../image/mhcw5e6e-epiv9as.svg" className={styles.frame24} />
         <div className={styles.frame28}>
           <div className={styles.frame27}>
-            <img src="../image/mhcsnkh7-ss4gto8.png" className={styles.frame8} />
+            <img src="../image/mhcw5e6e-myt1pbz.png" className={styles.frame8} />
             <div className={styles.autoWrapper15}>
               <p className={styles.a24}>奶团</p>
               <div className={styles.autoWrapper13}>
                 <div className={styles.autoWrapper12}>
                   <img
-                    src="../image/mhcsnkh7-r5edpmw.svg"
+                    src="../image/mhcw5e6e-5gc00qy.svg"
                     className={styles.frame9}
                   />
                   <img
-                    src="../image/mhcsnkh7-60ry0my.svg"
+                    src="../image/mhcw5e6e-19alacf.svg"
                     className={styles.frame10}
                   />
                 </div>
@@ -135,18 +135,18 @@ const Component = () => {
               </div>
               <div className={styles.autoWrapper14}>
                 <img
-                  src="../image/mhcsnkh7-djzd19r.svg"
+                  src="../image/mhcw5e6e-6kmpbld.svg"
                   className={styles.frame12}
                 />
                 <p className={styles.a26}>9999W</p>
                 <img
-                  src="../image/mhcsnkh7-r0dqs5q.svg"
+                  src="../image/mhcw5e6e-l10msdd.svg"
                   className={styles.frame13}
                 />
                 <p className={styles.a26}>374W</p>
               </div>
             </div>
-            <img src="../image/mhcsnkh7-zac36w2.svg" className={styles.frame25} />
+            <img src="../image/mhcw5e6e-5x5ujui.svg" className={styles.frame25} />
             <p className={styles.a27}>300W</p>
             <div className={styles.frame26}>
               <p className={styles.a1}>3</p>
@@ -154,7 +154,7 @@ const Component = () => {
           </div>
           <p className={styles.a211}>用户评论总结</p>
         </div>
-        <img src="../image/mhcsnkh7-77prid8.svg" className={styles.frame24} />
+        <img src="../image/mhcw5e6e-epiv9as.svg" className={styles.frame24} />
         <div className={styles.frame33}>
           <div className={styles.frame30}>
             <div className={styles.frame29}>
@@ -164,7 +164,7 @@ const Component = () => {
           <div className={styles.autoWrapper17}>
             <p className={styles.a24}>奶团</p>
             <div className={styles.frame32}>
-              <img src="../image/mhcsnkh7-hrvk3kl.svg" className={styles.frame31} />
+              <img src="../image/mhcw5e6e-cpzpf35.svg" className={styles.frame31} />
               <p className={styles.a25}>
                 剧场名：爱微剧场&nbsp;&nbsp;&nbsp;
                 <br />
@@ -174,21 +174,21 @@ const Component = () => {
               </p>
             </div>
             <div className={styles.autoWrapper16}>
-              <img src="../image/mhcsnkh7-djzd19r.svg" className={styles.frame12} />
+              <img src="../image/mhcw5e6e-6kmpbld.svg" className={styles.frame12} />
               <p className={styles.a26}>9999W</p>
-              <img src="../image/mhcsnkh7-r0dqs5q.svg" className={styles.frame13} />
+              <img src="../image/mhcw5e6e-l10msdd.svg" className={styles.frame13} />
               <p className={styles.a26}>374W</p>
             </div>
           </div>
           <div className={styles.autoWrapper19}>
             <div className={styles.autoWrapper18}>
-              <img src="../image/mhcsnkh7-zac36w2.svg" className={styles.frame21} />
+              <img src="../image/mhcw5e6e-5x5ujui.svg" className={styles.frame21} />
               <p className={styles.a29}>300W</p>
             </div>
             <p className={styles.a210}>用户评论总结</p>
           </div>
         </div>
-        <img src="../image/mhcsnkh7-77prid8.svg" className={styles.frame24} />
+        <img src="../image/mhcw5e6e-epiv9as.svg" className={styles.frame24} />
         <div className={styles.frame38}>
           <div className={styles.frame37}>
             <div className={styles.frame35}>
@@ -200,7 +200,7 @@ const Component = () => {
               <p className={styles.a24}>奶团</p>
               <div className={styles.frame32}>
                 <img
-                  src="../image/mhcsnkh7-hrvk3kl.svg"
+                  src="../image/mhcw5e6e-cpzpf35.svg"
                   className={styles.frame31}
                 />
                 <p className={styles.a25}>
@@ -213,18 +213,18 @@ const Component = () => {
               </div>
               <div className={styles.autoWrapper16}>
                 <img
-                  src="../image/mhcsnkh7-djzd19r.svg"
+                  src="../image/mhcw5e6e-6kmpbld.svg"
                   className={styles.frame12}
                 />
                 <p className={styles.a26}>9999W</p>
                 <img
-                  src="../image/mhcsnkh7-r0dqs5q.svg"
+                  src="../image/mhcw5e6e-l10msdd.svg"
                   className={styles.frame13}
                 />
                 <p className={styles.a26}>374W</p>
               </div>
             </div>
-            <img src="../image/mhcsnkh7-zac36w2.svg" className={styles.frame36} />
+            <img src="../image/mhcw5e6e-5x5ujui.svg" className={styles.frame36} />
             <p className={styles.a27}>300W</p>
           </div>
           <p className={styles.a212}>用户评论总结</p>
diff --git a/.figma/0_2/index.module.scss b/.figma/0_2/index.module.scss
index 0aca2ce..e4f371d 100644
--- a/.figma/0_2/index.module.scss
+++ b/.figma/0_2/index.module.scss
@@ -50,7 +50,7 @@
     margin-top: 13px;
     margin-right: 17px;
     padding: 53px 58px 64px 35px;
-    background-image: url(../image/mhcsnkh6-74x4xe4.png);
+    background-image: url(../image/mhcw5e6d-c7qpzc4.png);
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
@@ -565,7 +565,7 @@
         align-items: flex-start;
         padding-right: 111px;
         padding-bottom: 155px;
-        background-image: url(../image/mhcsnkh7-acvn1qx.png);
+        background-image: url(../image/mhcw5e6e-824j2v2.png);
         background-position: center;
         background-size: cover;
         background-repeat: no-repeat;
@@ -619,7 +619,7 @@
           align-items: flex-start;
           padding-right: 111px;
           padding-bottom: 155px;
-          background-image: url(../image/mhcsnkh7-wl1d5mh.png);
+          background-image: url(../image/mhcw5e6e-7s1hyk3.png);
           background-position: center;
           background-size: cover;
           background-repeat: no-repeat;
diff --git a/.figma/image/b8d72b4e-8c09-42ae-93d3-86fe2cb76a41.png b/.figma/image/b8d72b4e-8c09-42ae-93d3-86fe2cb76a41.png
new file mode 100644
index 0000000..7b4d3ef
Binary files /dev/null and b/.figma/image/b8d72b4e-8c09-42ae-93d3-86fe2cb76a41.png differ
diff --git a/.figma/image/mhcw5e6d-58eu18x.svg b/.figma/image/mhcw5e6d-58eu18x.svg
new file mode 100644
index 0000000..15f34d1
--- /dev/null
+++ b/.figma/image/mhcw5e6d-58eu18x.svg
@@ -0,0 +1,24 @@
+<svg width="259" height="69" viewBox="0 0 259 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_0_7)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 34.5C0 15.4462 15.4462 0 34.5 0H224.5C243.554 0 259 15.4462 259 34.5C259 53.5538 243.554 69 224.5 69H34.5C15.4462 69 0 53.5538 0 34.5Z" fill="white" fill-opacity="0.74902"/>
+</g>
+<circle cx="51.5" cy="34.5" r="7.5" fill="black"/>
+<circle cx="209.5" cy="34.5" r="18.5" fill="black"/>
+<circle cx="209.5" cy="34.5" r="5.5" fill="black"/>
+<circle cx="35.5" cy="34.5" r="4.5" fill="black"/>
+<circle cx="66.5" cy="34.5" r="4.5" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M115 34.5C115 32.567 116.567 31 118.5 31H141.5C143.433 31 145 32.567 145 34.5C145 36.433 143.433 38 141.5 38H118.5C116.567 38 115 36.433 115 34.5Z" fill="black"/>
+<rect x="87" y="15" width="4" height="39" fill="#959595" fill-opacity="0.74902"/>
+<rect x="169" y="15" width="4" height="39" fill="#959595" fill-opacity="0.74902"/>
+<defs>
+<filter id="filter0_d_0_7" x="-4" y="-4" width="267" height="77" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.392157 0 0 0 0 0.392157 0 0 0 0 0.392157 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_7"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_7" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/.figma/image/mhcw5e6d-8fwj6ae.svg b/.figma/image/mhcw5e6d-8fwj6ae.svg
new file mode 100644
index 0000000..bade14c
--- /dev/null
+++ b/.figma/image/mhcw5e6d-8fwj6ae.svg
@@ -0,0 +1,7 @@
+<svg width="85" height="12" viewBox="0 0 85 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="4.5" cy="6.5" r="4.5" fill="#C0C4C8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 6C15 2.68629 17.6863 0 21 0H34C37.3137 0 40 2.68629 40 6C40 9.31371 37.3137 12 34 12H21C17.6863 12 15 9.31371 15 6Z" fill="#41A4FD"/>
+<circle cx="50.5" cy="6.5" r="4.5" fill="#C0C4C8"/>
+<circle cx="65.5" cy="6.5" r="4.5" fill="#C0C4C8"/>
+<circle cx="80.5" cy="6.5" r="4.5" fill="#C0C4C8"/>
+</svg>
diff --git a/.figma/image/mhcw5e6d-c7qpzc4.png b/.figma/image/mhcw5e6d-c7qpzc4.png
new file mode 100644
index 0000000..6ceb50b
Binary files /dev/null and b/.figma/image/mhcw5e6d-c7qpzc4.png differ
diff --git a/.figma/image/mhcw5e6e-19alacf.svg b/.figma/image/mhcw5e6e-19alacf.svg
new file mode 100644
index 0000000..6664c3f
--- /dev/null
+++ b/.figma/image/mhcw5e6e-19alacf.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.0559 0H0.945609C0.423363 0 0 0.447715 0 1V17C0 17.552 0.423633 18 0.945609 18H19.0559C19.5764 18 20 17.552 20 17V1C19.9992 0.448095 19.5763 0.000888824 19.0544 0H19.0559ZM4.50451 16H1.8916V13.9968H4.51359V11.9968H1.8916V9.9968H4.51359V7.9968H1.8916V5.9968H4.51359V3.9968H1.8916V2H4.50451V16V16ZM18.1093 3.99519L16.0637 3.99519V5.99519L18.1093 5.99519V7.99519L16.0637 7.99519V9.99519L18.1093 9.99519V11.9952H16.0637V13.9952L18.1093 13.9952V15.9968H16.041V1.9968H18.1093V3.9952V3.99519Z" fill="#AFB1B7"/>
+</svg>
diff --git a/.figma/image/mhcw5e6e-5gc00qy.svg b/.figma/image/mhcw5e6e-5gc00qy.svg
new file mode 100644
index 0000000..266b16e
--- /dev/null
+++ b/.figma/image/mhcw5e6e-5gc00qy.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 7.6475C0 8.16531 0 14.2805 0 14.2805C0 16.59 1.5961 18.2743 2.9357 19.2803C4.49022 20.4491 6.05075 21.0036 6.34432 21.0597C6.6374 21.0036 8.19793 20.4491 9.75294 19.2803C11.092 18.2743 12.6881 16.59 12.6881 14.2805V13.7094C12.0797 13.3309 11.5066 12.8983 10.9758 12.4169C9.98786 13.0481 8.71463 13.012 7.76407 12.3257C7.56166 12.1719 7.51867 11.8848 7.66715 11.6785C7.81563 11.4721 8.1015 11.4217 8.31164 11.5647C8.89103 11.9827 9.65433 12.0452 10.294 11.727C10.1828 11.6028 10.0761 11.4765 9.97387 11.3483C9.4759 10.7211 9.10268 10.0648 8.85671 9.38445L8.6007 8.44662L8.58267 8.34643L8.58067 8.33541C8.57466 8.29922 8.56899 8.26299 8.56363 8.22671L8.56163 8.21319L8.54661 8.10548L8.5451 8.08944C8.5401 8.05437 8.53608 8.0183 8.53258 7.98274L8.53157 7.97272C8.52026 7.86458 8.5119 7.75616 8.50653 7.64757C8.50653 7.63454 8.50552 7.62202 8.50502 7.60899L8.50302 7.53885L8.50101 7.48124C6.62838 7.62753 4.55635 7.57593 2.85755 7.33295C1.58909 7.1511 1.57376 7.10999 1.07139 6.96036C0.518555 6.79431 0 7.12969 0 7.6475ZM6.35453 15.4708H6.33449C5.40904 15.4719 4.60439 16.1058 4.38672 17.0053H8.3023C8.08447 16.1059 7.27991 15.4721 6.35453 15.4708H6.35453ZM21.0654 0.431909C19.7504 0.192045 18.9529 -0.000125216 15.781 2.63279e-08C12.6091 0.000125268 11.8126 0.236747 10.5555 0.450036C9.8584 0.572662 9.4375 1.21924 9.4375 2C9.4375 3.93591 9.4375 7.35551 9.4375 7.35551C9.4375 7.41963 9.439 7.48375 9.44151 7.54688L9.44301 7.58796C9.44602 7.64908 9.45002 7.7097 9.45503 7.76981L9.45854 7.80638C9.46305 7.85848 9.46856 7.91009 9.47507 7.96119L9.48008 8.00126C9.4871 8.05637 9.49561 8.11198 9.50513 8.16709L9.51515 8.2247C9.52763 8.29497 9.54166 8.36497 9.55723 8.43462L9.58328 8.54483L9.60332 8.62248C9.62771 8.71476 9.65478 8.80632 9.68448 8.89712C10.3478 10.9279 12.2014 12.3251 13.3987 13.0456L13.4072 13.0516C14.5645 13.748 15.5539 14.0911 15.7813 14.1347C16.0744 14.0786 17.6348 13.524 19.1905 12.3557C20.5291 11.3492 22.1251 9.66562 22.1251 7.35552C22.1251 7.35552 22.1248 2.85222 22.1249 2.00018C22.125 1.14813 21.6113 0.536591 21.0654 0.431909ZM1.47105 11.6714C1.62246 11.4615 1.91529 11.414 2.12531 11.5652C2.79752 12.0504 3.70497 12.0504 4.37717 11.5652C4.58732 11.4222 4.87319 11.4726 5.02166 11.679C5.17014 11.8853 5.12715 12.1724 4.92474 12.3262C3.9256 13.0473 2.57689 13.0473 1.57775 12.3262C1.3677 12.1749 1.31993 11.8821 1.47105 11.6719V11.6714ZM17.7388 9.01526H13.8232C14.0411 9.91465 14.8456 10.5485 15.771 10.5497H15.7911C16.7165 10.5487 17.5212 9.91475 17.7388 9.01526L17.7388 9.01526ZM17.2011 4.6227C18.2003 3.90213 19.5485 3.90213 20.5476 4.6227C20.691 4.7176 20.7709 4.88334 20.7559 5.05461C20.7409 5.22588 20.6334 5.37521 20.4757 5.44375C20.3181 5.51229 20.1355 5.48905 20.0001 5.38318C19.328 4.89819 18.4208 4.89819 17.7487 5.38318C17.613 5.4863 17.432 5.50766 17.276 5.43897C17.1201 5.37028 17.0136 5.22237 16.9981 5.05264C16.9825 4.88292 17.0602 4.71811 17.2011 4.6222L17.2011 4.6227ZM11.0141 4.6227C12.0133 3.90189 13.3618 3.90189 14.3611 4.6227C14.5044 4.7176 14.5844 4.88334 14.5694 5.05461C14.5544 5.22588 14.4468 5.37521 14.2892 5.44374C14.1315 5.51228 13.949 5.48904 13.8135 5.38318C13.1414 4.89819 12.2342 4.89819 11.5621 5.38318C11.4263 5.48256 11.2475 5.50148 11.0939 5.43274C10.9402 5.36401 10.8352 5.21817 10.8187 5.05063C10.8022 4.8831 10.8768 4.71958 11.0141 4.6222L11.0141 4.6227Z" fill="#AFB1B7"/>
+</svg>
diff --git a/.figma/image/mhcw5e6e-5hzy6ee.svg b/.figma/image/mhcw5e6e-5hzy6ee.svg
new file mode 100644
index 0000000..fc094be
--- /dev/null
+++ b/.figma/image/mhcw5e6e-5hzy6ee.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="23" viewBox="0 0 26 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.8674 2.08791C22.524 0.748704 20.698 0 18.7465 0C16.7951 0 14.9691 0.748704 13.6048 2.10824L13.0099 2.69215L12.4121 2.10137C11.0409 0.746233 9.21431 0 7.26929 0C5.32428 0 3.49764 0.746232 2.12649 2.10137C0.757832 3.44305 0 5.2478 0 7.17641C0 9.10503 0.757832 10.9098 2.13343 12.258L4.41082 14.5091L11.3269 21.3447L13.0018 23L14.6787 21.3466L21.6106 14.511L23.8871 12.2457C25.2227 10.9477 26 9.09294 26 7.17641C25.9997 5.25988 25.2227 3.40515 23.8674 2.08791L23.8674 2.08791ZM22.2041 10.5942L19.9353 12.8521L13.0034 19.6874L6.0873 12.8518L3.80297 10.5939C1.8938 8.72269 1.8938 5.62982 3.80297 3.75834C4.75756 2.8149 6.01311 2.34332 7.26893 2.34332C8.52476 2.34332 9.78031 2.8149 10.7349 3.75834L12.2378 5.24393H13.7748L15.2883 3.75834C16.2351 2.8149 17.4906 2.34332 18.7465 2.34332C20.0023 2.34332 21.2578 2.8149 22.2044 3.75834C23.159 4.68639 23.6283 5.93881 23.6283 7.17612C23.6283 8.41343 23.1587 9.66612 22.2041 10.5942V10.5942Z" fill="#6D6F74"/>
+</svg>
diff --git a/.figma/image/mhcw5e6e-5x5ujui.svg b/.figma/image/mhcw5e6e-5x5ujui.svg
new file mode 100644
index 0000000..9f7928c
--- /dev/null
+++ b/.figma/image/mhcw5e6e-5x5ujui.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="32" viewBox="0 0 26 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.0631 10.399L18.6311 12.799C18.6311 12.799 18.6311 3.199 10.5181 0C10.5181 0 9.7081 8.8 5.65111 11.998C1.59513 15.2 -6.51884 24.797 9.7041 31.997C9.7041 31.997 1.59113 23.197 12.1361 16.8C12.1361 16.8 11.3261 19.998 15.3821 23.2C19.4391 26.399 15.3821 32 15.3821 32C15.3821 32 34.851 27.199 21.0631 10.399V10.399Z" fill="#FF3419"/>
+</svg>
diff --git a/.figma/image/mhcw5e6e-6bvf0dd.svg b/.figma/image/mhcw5e6e-6bvf0dd.svg
new file mode 100644
index 0000000..d465b3a
--- /dev/null
+++ b/.figma/image/mhcw5e6e-6bvf0dd.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2008 12.9985L10.4014 18.1985V7.79852L18.2008 12.9985L18.2008 12.9985ZM12.9998 23.3985C18.7447 23.3985 23.401 18.7427 23.401 12.9985C23.401 7.25429 18.7447 2.59851 12.9998 2.59851C7.25495 2.59851 2.59863 7.25728 2.59863 12.9985C2.59863 18.7397 7.25495 23.3985 12.9998 23.3985V23.3985ZM13 26C5.81965 26 0 20.181 0 13.0015C0 5.82197 5.81965 0 13 0C20.1804 0 26 5.81898 26 12.9985C26 20.178 20.1804 26 13 26V26Z" fill="#6D6F74"/>
+</svg>
diff --git a/.figma/image/mhcw5e6e-6kmpbld.svg b/.figma/image/mhcw5e6e-6kmpbld.svg
new file mode 100644
index 0000000..12e5a5a
--- /dev/null
+++ b/.figma/image/mhcw5e6e-6kmpbld.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2006 12.9985L10.4012 18.1985V7.7985L18.2006 12.9985L18.2006 12.9985ZM13 23.3985C18.7449 23.3985 23.4012 18.7427 23.4012 12.9985C23.4012 7.25429 18.7449 2.5985 13 2.5985C7.25512 2.5985 2.5988 7.25728 2.5988 12.9985C2.5988 18.7397 7.25512 23.3985 13 23.3985V23.3985ZM13 26C5.81965 26 0 20.181 0 13.0015C0 5.82197 5.81965 0 13 0C20.1804 0 26 5.81898 26 12.9985C26 20.178 20.1804 26 13 26V26Z" fill="#6D6F74"/>
+</svg>
diff --git a/.figma/image/mhcw5e6e-7kk4jjy.svg b/.figma/image/mhcw5e6e-7kk4jjy.svg
new file mode 100644
index 0000000..2f5f1bf
--- /dev/null
+++ b/.figma/image/mhcw5e6e-7kk4jjy.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 0C17.072 0 22 4.928 22 11C22 17.072 17.072 22 11 22C4.928 22 0 17.072 0 11C0 4.928 4.928 0 11 0V0ZM11 5.5C7.964 5.5 5.5 7.964 5.5 11C5.50341 13.4706 7.15302 15.636 9.53393 16.2952C11.9148 16.9545 14.4433 15.946 15.7169 13.8291L13.8304 12.6983C13.0668 13.97 11.5486 14.5759 10.1193 14.1795C8.68994 13.7831 7.70072 12.4817 7.7012 10.9985C7.70168 9.51517 8.69175 8.21446 10.1213 7.81898C11.5509 7.4235 13.0687 8.03044 13.8315 9.3026L15.7169 8.1696C14.7228 6.51286 12.9321 5.49941 11 5.5H11Z" fill="#AFB1B7"/>
+</svg>
diff --git a/.figma/image/mhcw5e6e-7s1hyk3.png b/.figma/image/mhcw5e6e-7s1hyk3.png
new file mode 100644
index 0000000..9318b47
Binary files /dev/null and b/.figma/image/mhcw5e6e-7s1hyk3.png differ
diff --git a/.figma/image/mhcw5e6e-824j2v2.png b/.figma/image/mhcw5e6e-824j2v2.png
new file mode 100644
index 0000000..220f900
Binary files /dev/null and b/.figma/image/mhcw5e6e-824j2v2.png differ
diff --git a/.figma/image/mhcw5e6e-cpzpf35.svg b/.figma/image/mhcw5e6e-cpzpf35.svg
new file mode 100644
index 0000000..6cc89f8
--- /dev/null
+++ b/.figma/image/mhcw5e6e-cpzpf35.svg
@@ -0,0 +1,5 @@
+<svg width="23" height="94" viewBox="0 0 23 94" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 7.6475C0 8.16531 0 14.2805 0 14.2805C0 16.59 1.5961 18.2743 2.9357 19.2803C4.49022 20.4491 6.05075 21.0036 6.34432 21.0597C6.6374 21.0036 8.19793 20.4491 9.75294 19.2803C11.092 18.2743 12.6881 16.59 12.6881 14.2805V13.7094C12.0797 13.3309 11.5066 12.8983 10.9758 12.4169C9.98786 13.0481 8.71463 13.012 7.76407 12.3257C7.56166 12.1719 7.51867 11.8848 7.66715 11.6785C7.81563 11.4721 8.1015 11.4217 8.31164 11.5647C8.89103 11.9827 9.65433 12.0452 10.294 11.727C10.1828 11.6028 10.0761 11.4765 9.97387 11.3483C9.4759 10.7211 9.10268 10.0648 8.85671 9.38445L8.6007 8.44662L8.58267 8.34643L8.58067 8.33541C8.57466 8.29922 8.56899 8.26299 8.56363 8.22671L8.56163 8.21319L8.54661 8.10548L8.5451 8.08944C8.5401 8.05437 8.53608 8.0183 8.53258 7.98274L8.53157 7.97272C8.52026 7.86458 8.5119 7.75616 8.50653 7.64757C8.50653 7.63454 8.50552 7.62202 8.50502 7.60899L8.50302 7.53885L8.50101 7.48124C6.62838 7.62753 4.55635 7.57593 2.85755 7.33295C1.58909 7.1511 1.57376 7.10999 1.07139 6.96036C0.518555 6.79431 0 7.12969 0 7.6475ZM6.35453 15.4708H6.33449C5.40904 15.4719 4.60439 16.1058 4.38672 17.0053H8.3023C8.08447 16.1059 7.27991 15.4721 6.35453 15.4708H6.35453ZM21.0654 0.431909C19.7504 0.192045 18.9529 -0.000125216 15.781 2.63281e-08C12.6091 0.000125268 11.8126 0.236747 10.5555 0.450036C9.8584 0.572662 9.4375 1.21924 9.4375 2C9.4375 3.93591 9.4375 7.35551 9.4375 7.35551C9.4375 7.41963 9.439 7.48375 9.44151 7.54688L9.44301 7.58796C9.44602 7.64908 9.45002 7.7097 9.45503 7.76981L9.45854 7.80638C9.46305 7.85848 9.46856 7.91009 9.47507 7.96119L9.48008 8.00126C9.4871 8.05637 9.49561 8.11198 9.50513 8.16709L9.51515 8.2247C9.52763 8.29497 9.54166 8.36497 9.55723 8.43462L9.58328 8.54483L9.60332 8.62248C9.62771 8.71476 9.65478 8.80632 9.68448 8.89712C10.3478 10.9279 12.2014 12.3251 13.3987 13.0456L13.4072 13.0516C14.5645 13.748 15.5539 14.0911 15.7813 14.1347C16.0744 14.0786 17.6348 13.524 19.1905 12.3557C20.5291 11.3492 22.1251 9.66562 22.1251 7.35552C22.1251 7.35552 22.1248 2.85222 22.1249 2.00018C22.125 1.14813 21.6113 0.536591 21.0654 0.431909ZM1.47105 11.6714C1.62246 11.4615 1.91529 11.414 2.12531 11.5652C2.79752 12.0504 3.70497 12.0504 4.37717 11.5652C4.58732 11.4222 4.87319 11.4726 5.02166 11.679C5.17014 11.8853 5.12715 12.1724 4.92474 12.3262C3.9256 13.0473 2.57689 13.0473 1.57775 12.3262C1.3677 12.1749 1.31993 11.8821 1.47105 11.6719V11.6714ZM17.7388 9.01526H13.8232C14.0411 9.91465 14.8456 10.5485 15.771 10.5497H15.7911C16.7165 10.5487 17.5212 9.91475 17.7388 9.01526L17.7388 9.01526ZM17.2011 4.6227C18.2003 3.90213 19.5485 3.90213 20.5476 4.6227C20.691 4.7176 20.7709 4.88334 20.7559 5.05461C20.7409 5.22588 20.6334 5.37521 20.4757 5.44375C20.3181 5.51229 20.1355 5.48905 20.0001 5.38318C19.328 4.89819 18.4208 4.89819 17.7487 5.38318C17.613 5.4863 17.432 5.50766 17.276 5.43897C17.1201 5.37028 17.0136 5.22237 16.9981 5.05264C16.9825 4.88292 17.0602 4.71811 17.2011 4.6222L17.2011 4.6227ZM11.0141 4.6227C12.0133 3.90189 13.3618 3.90189 14.3611 4.6227C14.5044 4.7176 14.5844 4.88334 14.5694 5.05461C14.5544 5.22588 14.4468 5.37521 14.2892 5.44374C14.1315 5.51228 13.949 5.48904 13.8135 5.38318C13.1414 4.89819 12.2342 4.89819 11.5621 5.38318C11.4263 5.48256 11.2475 5.50148 11.0939 5.43274C10.9402 5.36401 10.8352 5.21817 10.8187 5.05063C10.8022 4.8831 10.8768 4.71958 11.0141 4.6222L11.0141 4.6227Z" fill="#AFB1B7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.1184 36H2.00811C1.48586 36 1.0625 36.4477 1.0625 37V53C1.0625 53.552 1.48613 54 2.00811 54H20.1184C20.6389 54 21.0625 53.552 21.0625 53V37C21.0617 36.4481 20.6388 36.0009 20.1169 36H20.1184ZM5.56701 52H2.9541V49.9968H5.57609V47.9968H2.9541V45.9968H5.57609V43.9968H2.9541V41.9968H5.57609V39.9968H2.9541V38H5.56701V52V52ZM19.1718 39.9952L17.1262 39.9952V41.9952L19.1718 41.9952V43.9952L17.1262 43.9952V45.9952L19.1718 45.9952V47.9952H17.1262V49.9952L19.1718 49.9952V51.9968H17.1035V37.9968H19.1718V39.9952V39.9952Z" fill="#AFB1B7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0625 72C17.1345 72 22.0625 76.928 22.0625 83C22.0625 89.072 17.1345 94 11.0625 94C4.9905 94 0.0625 89.072 0.0625 83C0.0625 76.928 4.9905 72 11.0625 72V72ZM11.0625 77.5C8.0265 77.5 5.5625 79.964 5.5625 83C5.56591 85.4706 7.21552 87.636 9.59643 88.2952C11.9773 88.9545 14.5058 87.946 15.7794 85.8291L13.8929 84.6983C13.1293 85.97 11.6111 86.5759 10.1818 86.1795C8.75244 85.7831 7.76322 84.4817 7.7637 82.9985C7.76418 81.5152 8.75425 80.2145 10.1838 79.819C11.6134 79.4235 13.1312 80.0304 13.894 81.3026L15.7794 80.1696C14.7853 78.5129 12.9946 77.4994 11.0625 77.5H11.0625Z" fill="#AFB1B7"/>
+</svg>
diff --git a/.figma/image/mhcw5e6e-epiv9as.svg b/.figma/image/mhcw5e6e-epiv9as.svg
new file mode 100644
index 0000000..791a906
--- /dev/null
+++ b/.figma/image/mhcw5e6e-epiv9as.svg
@@ -0,0 +1,3 @@
+<svg width="738" height="2" viewBox="0 0 738 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 1H738" stroke="#E1E3E5" stroke-linecap="square"/>
+</svg>
diff --git a/.figma/image/mhcw5e6e-kdsx4vj.png b/.figma/image/mhcw5e6e-kdsx4vj.png
new file mode 100644
index 0000000..dd46993
Binary files /dev/null and b/.figma/image/mhcw5e6e-kdsx4vj.png differ
diff --git a/.figma/image/mhcw5e6e-krjj7v6.svg b/.figma/image/mhcw5e6e-krjj7v6.svg
new file mode 100644
index 0000000..6c4870e
--- /dev/null
+++ b/.figma/image/mhcw5e6e-krjj7v6.svg
@@ -0,0 +1,3 @@
+<svg width="50" height="38" viewBox="0 0 50 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.96056 15.1535C2.5462 14.37 0 11.3188 0 7.67434C0 3.43592 3.44369 0 7.6917 0C10.2552 0 12.5257 1.25119 13.9234 3.17489C15.2911 4.88748 15.6419 6.72398 15.9632 8.40619C16.3281 10.3168 16.6551 12.0285 18.3908 13.1334C21.6289 15.1948 24.5167 13.9049 27.7946 12.4407C30.752 11.1197 34.027 9.65684 38.1634 10.3851C44.8629 11.3863 50.0005 17.1524 50.0005 24.1157C50.0005 31.7838 43.7702 38 36.0847 38C28.7341 38 22.7146 32.3137 22.204 25.1093C22.0847 24.2802 22.0005 23.4596 21.9182 22.657C21.5515 19.0836 21.2212 15.8647 17.9913 13.8281C16.4778 12.8737 14.8768 13.5133 13.0203 14.255C11.0298 15.0502 8.74562 15.9628 5.96056 15.1535Z" fill="#272727"/>
+</svg>
diff --git a/.figma/image/mhcw5e6e-l10msdd.svg b/.figma/image/mhcw5e6e-l10msdd.svg
new file mode 100644
index 0000000..93b4f69
--- /dev/null
+++ b/.figma/image/mhcw5e6e-l10msdd.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="23" viewBox="0 0 26 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.8674 2.08791C22.524 0.748704 20.698 0 18.7465 0C16.7951 0 14.9691 0.748704 13.6048 2.10824L13.0099 2.69215L12.4121 2.10137C11.0409 0.746233 9.21431 0 7.26929 0C5.32428 0 3.49764 0.746232 2.12649 2.10137C0.757832 3.44305 0 5.2478 0 7.17641C0 9.10503 0.757832 10.9098 2.13343 12.258L4.41082 14.5091L11.3269 21.3447L13.0018 23L14.6787 21.3466L21.6106 14.511L23.8871 12.2457C25.2227 10.9477 26 9.09294 26 7.17641C25.9997 5.25988 25.2227 3.40515 23.8674 2.08791L23.8674 2.08791ZM22.2037 10.5942L19.935 12.8521L13.003 19.6874L6.08694 12.8518L3.80261 10.5939C1.89344 8.72267 1.89344 5.62981 3.80261 3.75832C4.75719 2.81489 6.01274 2.34331 7.26857 2.34331C8.5244 2.34331 9.77995 2.81489 10.7345 3.75832L12.2374 5.24392H13.7745L15.2879 3.75832C16.2347 2.81489 17.4903 2.34331 18.7461 2.34331C20.0019 2.34331 21.2575 2.81489 22.204 3.75832C23.1586 4.68637 23.628 5.93879 23.628 7.1761C23.628 8.41342 23.1583 9.66611 22.2037 10.5942V10.5942Z" fill="#6D6F74"/>
+</svg>
diff --git a/.figma/image/mhcw5e6e-myt1pbz.png b/.figma/image/mhcw5e6e-myt1pbz.png
new file mode 100644
index 0000000..d076d60
Binary files /dev/null and b/.figma/image/mhcw5e6e-myt1pbz.png differ
diff --git a/.figma/image/mhcw5e6e-u278byr.png b/.figma/image/mhcw5e6e-u278byr.png
new file mode 100644
index 0000000..9e1e294
Binary files /dev/null and b/.figma/image/mhcw5e6e-u278byr.png differ
diff --git a/.figma/image/mhcw5e6e-zupmsq9.svg b/.figma/image/mhcw5e6e-zupmsq9.svg
new file mode 100644
index 0000000..93e3703
--- /dev/null
+++ b/.figma/image/mhcw5e6e-zupmsq9.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="12" viewBox="0 0 21 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.2205 0C19.6854 0 20.0621 0.0872106 20.3507 0.261632C20.6393 0.436053 20.8317 0.665972 20.9279 0.951388C21.024 1.2368 21.024 1.5579 20.9279 1.91467C20.8317 2.27144 20.6233 2.62424 20.3026 2.97309C19.0041 4.40017 17.7536 5.79553 16.5512 7.15919C15.3488 8.52284 14.1865 9.79929 13.0643 10.9885C12.7597 11.3057 12.403 11.5514 11.9942 11.7259C11.5854 11.9003 11.1646 11.9914 10.7317 11.9994C10.2989 12.0073 9.88205 11.9399 9.48126 11.7972C9.08047 11.6545 8.7438 11.4325 8.47127 11.1312C7.84603 10.4494 7.19675 9.75172 6.52342 9.03818L4.45534 6.89756C3.78201 6.18402 3.11269 5.48237 2.44738 4.79262C1.78206 4.10286 1.16084 3.43293 0.583698 2.78281C0.311159 2.48154 0.134811 2.16837 0.0546533 1.84332C-0.0255049 1.51826 -0.0174891 1.22095 0.0787007 0.95139C0.174891 0.681831 0.359255 0.45984 0.631792 0.285419C0.90433 0.110998 1.25703 0.0237872 1.68988 0.0237872C2.25099 0.0237872 3.02452 0.019823 4.01046 0.011895C4.99641 0.00396702 6.07454 3.18977e-06 7.24485 2.83536e-06H10.852H14.3869H17.3448H19.2205V0Z" fill="#41A4FD"/>
+</svg>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index d33645f..a1e973a 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -12,6 +12,7 @@ const totalPages = ref(1)
 const updateTime = ref('') // 添加更新时间字段
 const showDatePicker = ref(false) // 控制日期选择器显示
 const dateOptions = ref([]) // 日期选项列表
+const selectedCategory = ref('all') // 当前选中的分类
 
 // 初始化日期为今天
 const initDate = () => {
@@ -208,6 +209,34 @@ const selectDate = (dateValue) => {
   onDateChange()
 }
 
+// 切换分类
+const switchCategory = (category) => {
+  selectedCategory.value = category
+  // 这里可以添加分类筛选逻辑
+}
+
+// 格式化日期显示（用于日榜标题）
+const formatDateTitle = (dateStr) => {
+  if (!dateStr) return '日榜 2025年10月19日/周日'
+  
+  const date = new Date(dateStr)
+  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+  const weekday = weekdays[date.getDay()]
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  
+  return `日榜 ${year}年${month}月${day}日/${weekday}`
+}
+
+// 获取排名徽章样式类
+const getRankBadgeClass = (rank) => {
+  if (rank === 1) return 'rank-gold'
+  if (rank === 2) return 'rank-silver'
+  if (rank === 3) return 'rank-bronze'
+  return 'rank-normal'
+}
+
 // 页面加载时初始化
 onMounted(() => {
   initDate()
@@ -217,98 +246,137 @@ onMounted(() => {
 
 <template>
   <div class="app">
-    <!-- 主内容区域 -->
-    <div class="main-content">
-      <!-- 排行榜页面 -->
-      <div v-if="currentTab === 'ranking'" class="ranking-page">
-        <!-- 标题 -->
-        <div class="header">
-          <div class="title-container">
-            <i class="bi bi-stars lightning-icon"></i>
-            <h1 class="title">抖音AI短剧榜</h1>
-            <i class="bi bi-stars lightning-icon"></i>
-          </div>
-          <div class="update-time">
-            基于实时热度排行 {{ updateTime || getCurrentTime() }}更新 
-            <span class="refresh-icon">🔄</span>
-          </div>
+    <!-- 主容器 -->
+    <div class="main-container">
+      <!-- 顶部标题区域 -->
+      <div class="header-section">
+        <div class="title-wrapper">
+          <div class="title-icon-left"></div>
+          <h1 class="main-title">AI棒榜</h1>
+          <div class="title-icon-right"></div>
         </div>
+      </div>
 
-        <!-- 自定义日期选择器 -->
-        <div class="custom-date-selector">
-          <div class="date-display" @click="toggleDatePicker">
-            <span class="date-text">{{ formatDisplayDate(selectedDate) }}<i class="bi bi-chevron-compact-right"></i></span>
-            
-          </div>
-          
-          <!-- 日期选择弹窗 -->
-          <div v-if="showDatePicker" class="date-picker-overlay" @click="closeDatePicker">
-            <div class="date-picker-popup" @click.stop>
-              <div class="date-picker-header">
-                <h3>选择日期</h3>
-                <button class="close-btn" @click="closeDatePicker">×</button>
-              </div>
-              <div class="date-list">
-                <div 
-                  v-for="date in dateOptions" 
-                  :key="date.value"
-                  class="date-option"
-                  :class="{ active: selectedDate === date.value }"
-                  @click="selectDate(date.value)"
-                >
-                  <span class="date-label">{{ date.label }}</span>
-                  <span class="date-value">{{ date.display }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
+      <!-- 横幅区域 -->
+      <div class="banner-section">
+        <div class="banner-content">
+          <p class="banner-subtitle">微短剧爆火</p>
+          <p class="banner-title">中国"血统"的ReelShort征服美国</p>
         </div>
+      </div>
 
+      <!-- 装饰分隔线 -->
+      <div class="divider-dots"></div>
+
+      <!-- 日期显示区域 -->
+      <div class="date-section">
+        <p class="date-title">{{ formatDateTitle(selectedDate) }}</p>
+        <div class="date-dropdown-icon" @click="toggleDatePicker"></div>
+      </div>
+
+      <!-- 分类标签区域 -->
+      <div class="category-section">
+        <div 
+          class="category-tab"
+          :class="{ active: selectedCategory === 'all' }"
+          @click="switchCategory('all')"
+        >
+          <span>全部</span>
+        </div>
+        <div 
+          class="category-tab"
+          :class="{ active: selectedCategory === 'novel' }"
+          @click="switchCategory('novel')"
+        >
+          <span>小说</span>
+        </div>
+        <div 
+          class="category-tab"
+          :class="{ active: selectedCategory === 'anime' }"
+          @click="switchCategory('anime')"
+        >
+          <span>动漫</span>
+        </div>
+        <div 
+          class="category-tab"
+          :class="{ active: selectedCategory === 'drama' }"
+          @click="switchCategory('drama')"
+        >
+          <span>短剧</span>
+        </div>
+      </div>
+
+      <!-- 排行榜内容区域 -->
+      <div class="ranking-content">
         <!-- 加载状态 -->
         <div v-if="loading" class="loading">
           <div class="loading-spinner"></div>
           <p>加载中...</p>
         </div>
 
-        <!-- 榜单内容 -->
+        <!-- 排行榜列表 -->
         <div v-else class="ranking-list">
           <div 
             v-for="(item, index) in rankingData" 
             :key="item._id || index"
             class="ranking-item"
           >
-            <!-- 排名 -->
-            <div class="rank-number" :class="getRankClass(index + 1)">
-              {{ index + 1 }}
+            <!-- 排名标识 -->
+            <div class="rank-badge" :class="getRankBadgeClass(index + 1)">
+              <span class="rank-number">{{ index + 1 }}</span>
             </div>
 
-            <!-- 海报 -->
-            <div class="poster">
+            <!-- 海报图片 -->
+            <div class="poster-container">
               <img 
                 :src="getImageSrc(item)" 
                 :alt="item.title || item.mix_name"
                 @error="handleImageError($event, item)"
-                class="poster-img"
+                class="poster-image"
               />
             </div>
 
-            <!-- 内容信息 -->
-            <div class="content-info">
+            <!-- 内容信息区域 -->
+            <div class="content-area">
               <!-- 剧名 -->
-              <h3 class="drama-name">{{ item.title || item.mix_name || '未知剧名' }}</h3>
+              <h3 class="drama-title">{{ item.title || item.mix_name || '奶团' }}</h3>
               
-              <!-- 当前播放量 -->
-              <div class="play-count">
-                <span class="play-label">总播放量：</span>
-                <span class="play-value">{{ formatPlayCount(item.play_vv) }}</span>
+              <!-- 详细信息 -->
+              <div class="drama-details">
+                <div class="detail-icons">
+                  <div class="detail-icon"></div>
+                  <div class="detail-icon"></div>
+                  <div class="detail-icon"></div>
+                </div>
+                <div class="detail-text">
+                  <p>剧场名：爱微剧场</p>
+                  <p>承制：妙想制片厂</p>
+                  <p>版权：可梦</p>
+                </div>
+              </div>
+
+              <!-- 数据统计 -->
+              <div class="stats-row">
+                <div class="stat-item">
+                  <div class="stat-icon play-icon"></div>
+                  <span class="stat-value">{{ formatPlayCount(item.play_vv) || '9999W' }}</span>
+                </div>
+                <div class="stat-item">
+                  <div class="stat-icon like-icon"></div>
+                  <span class="stat-value">374W</span>
+                </div>
               </div>
-              
             </div>
-            
+
             <!-- 增长数据 -->
-            <div class="growth-data">
-              <i class="bi bi-fire"></i>
-              <span class="growth-number">{{ formatGrowth(item) }}</span>
+            <div class="growth-section">
+              <div class="growth-icon"></div>
+              <span class="growth-value">{{ formatGrowth(item) || '300W' }}</span>
+            </div>
+
+            <!-- 用户评论总结 -->
+            <div class="comment-summary">
+              <p>用户评论总结</p>
             </div>
           </div>
 
@@ -319,35 +387,26 @@ onMounted(() => {
         </div>
       </div>
 
-      <!-- 资讯页面占位 -->
-      <div v-else class="news-page">
-        <div class="header">
-          <h1 class="title">资讯中心</h1>
+      <!-- 日期选择弹窗 -->
+      <div v-if="showDatePicker" class="date-picker-overlay" @click="closeDatePicker">
+        <div class="date-picker-popup" @click.stop>
+          <div class="date-picker-header">
+            <h3>选择日期</h3>
+            <button class="close-btn" @click="closeDatePicker">×</button>
+          </div>
+          <div class="date-list">
+            <div 
+              v-for="date in dateOptions" 
+              :key="date.value"
+              class="date-option"
+              :class="{ active: selectedDate === date.value }"
+              @click="selectDate(date.value)"
+            >
+              <span class="date-label">{{ date.label }}</span>
+              <span class="date-value">{{ date.display }}</span>
+            </div>
+          </div>
         </div>
-        <div class="coming-soon">
-          <p>资讯功能即将上线...</p>
-        </div>
-      </div>
-    </div>
-
-    <!-- 底部导航 -->
-    <div class="bottom-nav">
-      <div 
-        class="nav-item"
-        :class="{ active: currentTab === 'news' }"
-        @click="switchTab('news')"
-      >
-        <i class="bi bi-newspaper"></i>
-        <span class="nav-text">资讯</span>
-      </div>
-      
-      <div 
-        class="nav-item"
-        :class="{ active: currentTab === 'ranking' }"
-        @click="switchTab('ranking')"
-      >
-        <i class="bi bi-list-stars"></i>
-        <span class="nav-text">排行榜</span>
       </div>
     </div>
   </div>
@@ -355,80 +414,372 @@ onMounted(() => {
 
 <style scoped>
 /* 全局样式 */
-* {
-  box-sizing: border-box;
-}
-
 .app {
   min-height: 100vh;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  padding-bottom: 80px; /* 为底部导航留出空间 */
-  color: white;
-  padding: 0;
-  margin: 0;
+  background: #ebedf2;
+  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimHei, Arial, Helvetica, sans-serif;
 }
 
-/* 主内容区域 */
-.main-content {
-  padding: 20px 16px 80px;
-  max-width: 100%;
+/* 主容器 */
+.main-container {
+  max-width: 375px;
+  margin: 0 auto;
+  background: #ebedf2;
+  min-height: 100vh;
+  position: relative;
 }
 
-/* 标题区域 */
-.header {
+/* 顶部标题区域 */
+.header-section {
+  padding: 20px 0;
   text-align: center;
 }
 
-.title-container {
+.title-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  margin-bottom: 8px;
+  gap: 10px;
 }
 
-.lightning-icon {
-  font-size: 20px;
-  color: #ffd700;
+.title-icon-left,
+.title-icon-right {
+  width: 20px;
+  height: 20px;
+  background: #333;
+  border-radius: 50%;
 }
 
-.title {
-  color: #555;
+.main-title {
   font-size: 24px;
   font-weight: bold;
+  color: #333;
   margin: 0;
+  font-family: Alatsi, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimHei, Arial, Helvetica, sans-serif;
 }
 
-.update-time {
-  font-size: 12px;
-  color: #999;
+/* 横幅区域 */
+.banner-section {
+  margin: 20px 16px;
+  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
+  border-radius: 12px;
+  padding: 20px;
+  position: relative;
+  overflow: hidden;
+}
+
+.banner-content {
+  position: relative;
+  z-index: 2;
+}
+
+.banner-subtitle {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.8);
+  margin: 0 0 8px 0;
+}
+
+.banner-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: white;
+  margin: 0;
+  line-height: 1.4;
+}
+
+/* 装饰分隔线 */
+.divider-dots {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 20px 0;
+  gap: 8px;
+}
+
+.divider-dots::before,
+.divider-dots::after {
+  content: '';
+  width: 4px;
+  height: 4px;
+  background: #4a90e2;
+  border-radius: 50%;
+}
+
+/* 日期显示区域 */
+.date-section {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  margin: 20px 0;
+  gap: 8px;
 }
 
-.refresh-icon {
-  font-size: 12px;
-  color: #4CAF50;
+.date-title {
+  font-size: 16px;
+  color: #333;
+  margin: 0;
+  font-weight: 500;
 }
 
-/* 自定义日期选择器 */
-.custom-date-selector {
-  padding: 16px 0 8px;
-}
-
-.date-display {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
+.date-dropdown-icon {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 6px solid #4a90e2;
   cursor: pointer;
 }
 
-.date-text {
-  font-size: 12px;
+/* 分类标签区域 */
+.category-section {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  margin: 20px 16px;
+}
+
+.category-tab {
+  padding: 8px 20px;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 14px;
   font-weight: 500;
-  color: #999;
+}
+
+.category-tab:not(.active) {
+  background: #d1d5db;
+  color: #6b7280;
+}
+
+.category-tab.active {
+  background: #4a90e2;
+  color: white;
+}
+
+/* 排行榜内容区域 */
+.ranking-content {
+  padding: 0 16px;
+}
+
+/* 加载状态 */
+.loading {
+  text-align: center;
+  padding: 40px 20px;
+  color: #666;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #4a90e2;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 20px;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* 排行榜列表 */
+.ranking-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.ranking-item {
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  position: relative;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 排名徽章 */
+.rank-badge {
+  position: absolute;
+  top: -8px;
+  left: -8px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 14px;
+  color: white;
+  z-index: 10;
+}
+
+.rank-badge.rank-gold {
+  background: linear-gradient(135deg, #ffd700, #ffed4e);
+  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
+}
+
+.rank-badge.rank-silver {
+  background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
+  box-shadow: 0 2px 8px rgba(192, 192, 192, 0.4);
+  color: #666;
+}
+
+.rank-badge.rank-bronze {
+  background: linear-gradient(135deg, #cd7f32, #daa520);
+  box-shadow: 0 2px 8px rgba(205, 127, 50, 0.4);
+}
+
+.rank-badge.rank-normal {
+  background: #6b7280;
+  box-shadow: 0 2px 8px rgba(107, 114, 128, 0.3);
+}
+
+/* 海报容器 */
+.poster-container {
+  width: 60px;
+  height: 80px;
+  border-radius: 8px;
+  overflow: hidden;
+  flex-shrink: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.poster-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 内容区域 */
+.content-area {
+  flex: 1;
+  min-width: 0;
+}
+
+.drama-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  margin: 0 0 8px 0;
+  line-height: 1.3;
+}
+
+/* 详细信息 */
+.drama-details {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.detail-icons {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.detail-icon {
+  width: 4px;
+  height: 4px;
+  background: #9ca3af;
+  border-radius: 50%;
+}
+
+.detail-text {
+  flex: 1;
+}
+
+.detail-text p {
+  font-size: 12px;
+  color: #6b7280;
+  margin: 0 0 2px 0;
+  line-height: 1.3;
+}
+
+/* 数据统计行 */
+.stats-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.stat-icon {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+}
+
+.play-icon {
+  background: #4a90e2;
+}
+
+.like-icon {
+  background: #ef4444;
+}
+
+.stat-value {
+  font-size: 12px;
+  color: #374151;
+  font-weight: 500;
+}
+
+/* 增长数据 */
+.growth-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 8px;
+  background: #ef4444;
+  border-radius: 8px;
+  color: white;
+  flex-shrink: 0;
+  min-width: 60px;
+}
+
+.growth-icon {
+  width: 16px;
+  height: 16px;
+  background: white;
+  border-radius: 2px;
+}
+
+.growth-value {
+  font-weight: bold;
+  font-size: 12px;
+}
+
+/* 用户评论总结 */
+.comment-summary {
+  position: absolute;
+  bottom: 8px;
+  right: 16px;
+}
+
+.comment-summary p {
+  font-size: 12px;
+  color: #6b7280;
+  margin: 0;
+}
+
+/* 空状态 */
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+  color: #6b7280;
+  font-size: 16px;
 }
 
 /* 日期选择弹窗 */
@@ -440,41 +791,42 @@ onMounted(() => {
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
   display: flex;
-  align-items: flex-end;
+  align-items: center;
+  justify-content: center;
   z-index: 1000;
-  animation: fadeIn 0.3s ease;
 }
 
 .date-picker-popup {
-  width: 100%;
-  max-height: 70vh;
   background: white;
-  border-radius: 20px 20px 0 0;
-  animation: slideUp 0.3s ease;
+  border-radius: 20px;
+  padding: 0;
+  max-width: 400px;
+  width: 90%;
+  max-height: 80vh;
   overflow: hidden;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
 }
 
 .date-picker-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  background: #4a90e2;
+  color: white;
   padding: 20px;
-  border-bottom: 1px solid #eee;
-  background: #f8f9fa;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .date-picker-header h3 {
   margin: 0;
   font-size: 18px;
   font-weight: 600;
-  color: #333;
 }
 
 .close-btn {
   background: none;
   border: none;
+  color: white;
   font-size: 24px;
-  color: #666;
   cursor: pointer;
   padding: 0;
   width: 30px;
@@ -483,12 +835,11 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  transition: all 0.2s ease;
+  transition: background 0.3s ease;
 }
 
 .close-btn:hover {
-  background: #e9ecef;
-  color: #333;
+  background: rgba(255, 255, 255, 0.2);
 }
 
 .date-list {
@@ -497,13 +848,13 @@ onMounted(() => {
 }
 
 .date-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  cursor: pointer;
-  transition: all 0.2s ease;
+  padding: 15px 20px;
   border-bottom: 1px solid #f0f0f0;
+  cursor: pointer;
+  transition: background 0.3s ease;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .date-option:hover {
@@ -511,223 +862,50 @@ onMounted(() => {
 }
 
 .date-option.active {
-  background: #e3f2fd;
-  border-left: 4px solid #2196f3;
-}
-
-.date-option.active .date-label {
-  color: #2196f3;
-  font-weight: 600;
-}
-
-.date-label {
-  font-size: 16px;
-  font-weight: 500;
-  color: #333;
-}
-
-.date-value {
-  font-size: 14px;
-  color: #666;
-}
-
-/* 动画效果 */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes slideUp {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-/* 加载状态 */
-.loading {
-  text-align: center;
-  padding: 40px 20px;
+  background: #4a90e2;
   color: white;
 }
 
-.loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid rgba(255,255,255,0.3);
-  border-top: 4px solid white;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin: 0 auto 15px;
+.date-option:last-child {
+  border-bottom: none;
 }
 
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* 榜单列表 */
-.ranking-list {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-}
-
-.ranking-item {
-  border-radius: 16px;
-  display: flex;
-  align-items: flex-start;
-  gap: 15px;
-  padding: 4px;
-}
-
-/* 排名数字 */
-.rank-number {
-  color: #333;
-  width: 16px;
-  height: 80px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  font-size: 16px;
-  flex-shrink: 0;
-}
-
-/* 前三名特殊样式 */
-.rank-first {
-  color: #ffd700;
-  font-size: 24px;
-}
-
-.rank-second {
-  color: #afe3f6;
-  font-size: 24px;
-}
-
-.rank-third {
-  color: #cd7f32;
-  font-size: 24px;
-}
-
-.rank-normal {
-  color: #666;
-}
-
-/* 海报 */
-.poster {
-  flex-shrink: 0;
-}
-
-.poster-img {
-  width: 72px;
-  object-fit: cover;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-}
-
-/* 内容信息 */
-.content-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.drama-name {
-  font-size: 16px;
-  font-weight: bold;
-  color: #555;
-  margin: 0 0 8px 0;
-  line-height: 1.3;
-}
-.growth-data {
-  color: #e74c3c;
-  font-size: 14px;
-}
-.growth-info, .play-count {
-  display: flex;
-  align-items: center;
-  margin-bottom: 6px;
-  font-size: 13px;
-}
-
-.growth-label, .play-label {
-  color: #7f8c8d;
-  margin-right: 5px;
-}
-
-.growth-value {
-  color: #e74c3c;
-  font-weight: 600;
-}
-
-.play-value {
-  color: #3498db;
-  font-weight: 600;
-}
-
-/* 空状态 */
-.empty-state {
-  text-align: center;
-  padding: 60px 20px;
-  color: rgba(255,255,255,0.8);
-  font-size: 16px;
-}
-
-/* 资讯页面 */
-.news-page .coming-soon {
-  text-align: center;
-  padding: 100px 20px;
-  color: rgba(255,255,255,0.8);
-  font-size: 18px;
-}
-
-/* 底部导航 */
-.bottom-nav {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(10px);
-  display: flex;
-  border-top: 1px solid rgba(0,0,0,0.1);
-  box-shadow: 0 -2px 20px rgba(0,0,0,0.1);
-}
-
-.nav-item {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 12px 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  color: #7f8c8d;
-}
-
-.nav-item.active {
-  color: #667eea;
-  background: rgba(102, 126, 234, 0.1);
-}
-
-.nav-item:hover {
-  background: rgba(0,0,0,0.05);
-}
-
-.nav-icon {
-  font-size: 20px;
-  margin-bottom: 4px;
-}
-
-.nav-text {
-  font-size: 12px;
+.date-label {
   font-weight: 500;
 }
 
+.date-value {
+  color: #666;
+  font-size: 14px;
+}
+
+.date-option.active .date-value {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* 响应式设计 */
+@media (max-width: 480px) {
+  .main-container {
+    max-width: 100%;
+  }
+  
+  .banner-section {
+    margin: 20px 12px;
+    padding: 16px;
+  }
+  
+  .ranking-content {
+    padding: 0 12px;
+  }
+  
+  .ranking-item {
+    padding: 12px;
+    gap: 10px;
+  }
+  
+  .poster-container {
+    width: 50px;
+    height: 70px;
+  }
+}
 </style>