优化了界面

frontend/src/App.vue

@@ -251,22 +251,20 @@ onMounted(() => {
       <!-- 顶部标题区域 -->
       <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="banner-section">
+      <!-- <div class="banner-section">
         <div class="banner-content">
           <p class="banner-subtitle">微短剧爆火</p>
           <p class="banner-title">中国"血统"的ReelShort征服美国</p>
         </div>
-      </div>
+      </div> -->
 
       <!-- 装饰分隔线 -->
-      <div class="divider-dots"></div>
+      <!-- <div class="divider-dots"></div> -->
 
       <!-- 日期显示区域 -->
       <div class="date-section">
@@ -344,9 +342,9 @@ onMounted(() => {
               <!-- 详细信息 -->
               <div class="drama-details">
                 <div class="detail-icons">
-                  <div class="detail-icon"></div>
-                  <div class="detail-icon"></div>
-                  <div class="detail-icon"></div>
+                  <img src="./images/剧场名icon.svg" alt="剧场名" class="detail-icon" />
+                  <img src="./images/承制icon.svg" alt="承制" class="detail-icon" />
+                  <img src="./images/版权icon.svg" alt="版权" class="detail-icon" />
                 </div>
                 <div class="detail-text">
                   <p>剧场名：爱微剧场</p>
@@ -358,11 +356,11 @@ onMounted(() => {
               <!-- 数据统计 -->
               <div class="stats-row">
                 <div class="stat-item">
-                  <div class="stat-icon play-icon"></div>
+                  <img src="./images/播放icon.svg" alt="播放" class="stat-icon" />
                   <span class="stat-value">{{ formatPlayCount(item.play_vv) || '9999W' }}</span>
                 </div>
                 <div class="stat-item">
-                  <div class="stat-icon like-icon"></div>
+                  <img src="./images/点赞icon.svg" alt="点赞" class="stat-icon" />
                   <span class="stat-value">374W</span>
                 </div>
               </div>
@@ -370,14 +368,9 @@ onMounted(() => {
 
             <!-- 增长数据 -->
             <div class="growth-section">
-              <div class="growth-icon"></div>
+              <img src="./images/热度icon.svg" alt="热度" class="growth-icon" />
               <span class="growth-value">{{ formatGrowth(item) || '300W' }}</span>
             </div>
-
-            <!-- 用户评论总结 -->
-            <div class="comment-summary">
-              <p>用户评论总结</p>
-            </div>
           </div>
 
           <!-- 空状态 -->
@@ -422,7 +415,7 @@ onMounted(() => {
 
 /* 主容器 */
 .main-container {
-  max-width: 375px;
+  max-width: 428px;
   margin: 0 auto;
   background: #ebedf2;
   min-height: 100vh;
@@ -431,7 +424,7 @@ onMounted(() => {
 
 /* 顶部标题区域 */
 .header-section {
-  padding: 20px 0;
+  padding-top: 20px;
   text-align: center;
 }
 
@@ -441,15 +434,10 @@ onMounted(() => {
   justify-content: center;
   gap: 10px;
 }
-
-.title-icon-left,
-.title-icon-right {
-  width: 20px;
-  height: 20px;
-  background: #333;
-  border-radius: 50%;
+.logo-icon {
+  width: 40px;
+  height: 40px;
 }
-
 .main-title {
   font-size: 24px;
   font-weight: bold;
@@ -588,28 +576,29 @@ onMounted(() => {
 .ranking-list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  background: white;
+  border-radius: 12px;
+  padding: 0 16px;
 }
 
 .ranking-item {
-  background: white;
-  border-radius: 12px;
-  padding: 16px;
+  min-height: 120px;
+  padding: 12px 0 ;
   display: flex;
   align-items: flex-start;
   gap: 12px;
   position: relative;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid #E1E3E5;
 }
 
 /* 排名徽章 */
 .rank-badge {
   position: absolute;
-  top: -8px;
-  left: -8px;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
+  top: 11px;
+  left: -1px;
+  width: 24px;
+  height: 28px;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -642,8 +631,8 @@ onMounted(() => {
 
 /* 海报容器 */
 .poster-container {
-  width: 60px;
-  height: 80px;
+  width: 84px;
+  height: 112px;
   border-radius: 8px;
   overflow: hidden;
   flex-shrink: 0;
@@ -685,10 +674,10 @@ onMounted(() => {
 }
 
 .detail-icon {
-  width: 4px;
-  height: 4px;
-  background: #9ca3af;
-  border-radius: 50%;
+  margin: 1px 0;
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
 }
 
 .detail-text {
@@ -721,14 +710,6 @@ onMounted(() => {
   border-radius: 2px;
 }
 
-.play-icon {
-  background: #4a90e2;
-}
-
-.like-icon {
-  background: #ef4444;
-}
-
 .stat-value {
   font-size: 12px;
   color: #374151;
@@ -738,13 +719,8 @@ onMounted(() => {
 /* 增长数据 */
 .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;
 }
@@ -757,17 +733,11 @@ onMounted(() => {
 }
 
 .growth-value {
+  color: #ef4444;
   font-weight: bold;
   font-size: 12px;
 }
 
-/* 用户评论总结 */
-.comment-summary {
-  position: absolute;
-  bottom: 8px;
-  right: 16px;
-}
-
 .comment-summary p {
   font-size: 12px;
   color: #6b7280;

frontend/src/images/剧场名icon.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>

frontend/src/images/承制icon.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>

frontend/src/images/版权icon.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>