修改样式
This commit is contained in:
parent
d3929f2e35
commit
54fc7ed68a
3
.gitignore
vendored
3
.gitignore
vendored
@ -67,3 +67,6 @@ yarn-error.log*
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Figma 设计文件目录（无需纳入版本控制）
|
||||
.figma/
|
||||
@ -271,32 +271,16 @@ onMounted(() => {
|
||||
|
||||
<!-- 主容器 - 仅在首页显示 -->
|
||||
<div v-if="route.path === '/'" class="main-container">
|
||||
<!-- 顶部标题区域 -->
|
||||
<div class="header-section">
|
||||
<div class="title-wrapper">
|
||||
<h1 class="main-title">AI棒榜</h1>
|
||||
<!-- 顶部横幅区域（按设计稿） -->
|
||||
<div class="top-banner">
|
||||
<div class="banner-inner">
|
||||
<img src="./images/mhru18yf-f5p3yze.svg" class="banner-main-title" />
|
||||
<p class="banner-subtitle">基于抖音端原生播放增量排序</p>
|
||||
</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-section">
|
||||
<div
|
||||
class="category-tab"
|
||||
:class="{ active: selectedCategory === 'all' }"
|
||||
@ -325,10 +309,16 @@ onMounted(() => {
|
||||
>
|
||||
<span>短剧</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- 排行榜内容区域 -->
|
||||
<div class="ranking-content">
|
||||
<!-- 日期显示区域 -->
|
||||
<div class="date-section">
|
||||
<p class="date-title">{{ formatDateTitle(selectedDate) }}</p>
|
||||
<div class="date-dropdown-icon" @click="toggleDatePicker"></div>
|
||||
</div>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="loading">
|
||||
<div class="loading-spinner"></div>
|
||||
@ -447,26 +437,43 @@ onMounted(() => {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 顶部标题区域 */
|
||||
.header-section {
|
||||
padding-top: 20px;
|
||||
text-align: center;
|
||||
/* 顶部横幅（按设计稿） */
|
||||
.top-banner {
|
||||
position: relative;
|
||||
height: 180px;
|
||||
/* 背景图改为项目内资源路径 */
|
||||
background-image: url('./images/top_bg.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
.top-banner::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.1) 100%);
|
||||
}
|
||||
|
||||
.banner-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
.banner-main-title {
|
||||
width: 136px;
|
||||
}
|
||||
.banner-subtitle {
|
||||
margin-top: 12px;
|
||||
letter-spacing: 1px;
|
||||
color: #ffffff;
|
||||
font-family: ABeeZee, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 横幅区域 */
|
||||
@ -484,20 +491,6 @@ onMounted(() => {
|
||||
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;
|
||||
@ -521,14 +514,13 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.date-title {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
margin: 8px 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -570,7 +562,17 @@ onMounted(() => {
|
||||
|
||||
/* 排行榜内容区域 */
|
||||
.ranking-content {
|
||||
padding: 0 16px;
|
||||
/* 作为白色圆角卡片容器 */
|
||||
background: #ffffff;
|
||||
/* 仅顶部圆角 */
|
||||
border-radius: 24px 24px 0 0;
|
||||
/* 移除两侧内边距与外边距 */
|
||||
padding: 0;
|
||||
margin: -24px 0 16px;
|
||||
/* 提高层级，确保顶部圆角可见 */
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
@ -599,8 +601,6 @@ onMounted(() => {
|
||||
.ranking-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
@ -888,7 +888,8 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.ranking-content {
|
||||
padding: 0 12px;
|
||||
margin-top: -12px;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.ranking-item {
|
||||
|
||||
6
frontend/src/images/mhru18yf-f5p3yze.svg
Normal file
6
frontend/src/images/mhru18yf-f5p3yze.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="290" height="66" viewBox="0 0 290 66" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.3992 1.73008C16.5867 2.9688 15.9301 4.38667 16.7811 5.57271C17.632 6.75875 19.2851 6.59838 21.0343 5.40299C23.286 3.86412 24.9356 0 24.9356 0C24.9356 0 20.651 0.191221 18.3992 1.73008ZM14.9137 6.68594C16.2193 3.95356 14.1804 0.273984 14.1804 0.273984C14.1804 0.273984 11.5757 2.38533 10.2701 5.11771C9.25569 7.24023 9.33794 9.02983 10.7422 9.66893C12.1465 10.308 13.8628 8.88539 14.9137 6.68594ZM9.77706 13.1231C10.1484 10.1722 7.06222 7.32456 7.06222 7.32456C7.06222 7.32456 5.26811 10.0782 4.89672 13.0291C4.60859 15.3214 5.25066 16.9762 6.77857 17.1592C8.30648 17.3423 9.47846 15.4985 9.77706 13.1231ZM16.526 7.59885C14.4268 8.38524 13.026 9.86311 13.5654 11.2335C14.1043 12.6039 15.7732 12.8406 17.7987 12.0817C20.4063 11.1047 22.4876 8.85733 22.4876 8.85733C22.4876 8.85733 19.1336 6.62191 16.526 7.59885ZM11.6423 13.933C9.84618 15.0714 8.85366 16.7381 9.65476 17.9421C10.4558 19.1461 12.0705 19.0613 13.8038 17.9627C16.0351 16.5484 17.4987 14.0229 17.4987 14.0229C17.4987 14.0229 13.8736 12.5187 11.6423 13.933ZM6.55659 20.2008C6.13935 17.3032 2.48931 15.3597 2.48931 15.3597C2.48931 15.3597 1.51374 18.4219 1.93099 21.3195C2.25501 23.5704 3.2904 24.9848 4.77893 24.7806C6.26696 24.5765 6.89258 22.5333 6.55659 20.2008ZM8.74969 20.6241C7.26315 22.025 6.65946 23.8039 7.6814 24.8366C8.70283 25.8693 10.2357 25.5188 11.6704 24.1669C13.5169 22.4265 14.3927 19.7378 14.3927 19.7378C14.3927 19.7378 10.5961 18.8838 8.74969 20.6241ZM5.25852 27.6435C4.1668 25.0061 0.168807 24.0448 0.168807 24.0448C0.168807 24.0448 -0.0500359 27.1714 1.04218 29.8088C1.89014 31.8575 3.22911 32.9455 4.62243 32.396C6.01574 31.8466 6.13738 29.7664 5.25852 27.6435ZM7.41883 27.9277C6.33608 29.5546 6.17158 31.3538 7.36948 32.1132C8.56788 32.8725 9.93278 32.2242 10.9776 30.6542C12.3226 28.6331 12.537 25.9212 12.537 25.9212C12.537 25.9212 8.76329 25.9066 7.41883 27.9277ZM7.80026 35.1654C7.14473 37.023 7.43436 38.8302 8.80175 39.2897C10.1686 39.7492 11.3471 38.7856 11.9797 36.9929C12.7938 34.6852 12.3247 31.9693 12.3247 31.9693C12.3247 31.9693 8.61432 32.8577 7.80026 35.1654ZM5.85591 35.3503C4.21633 32.9781 0 32.899 0 32.899C0 32.899 0.422231 36.0415 2.06181 38.4137C3.33548 40.2564 4.90477 41.0411 6.1929 40.1932C7.48103 39.3453 7.17594 37.2599 5.85591 35.3503ZM9.67774 42.2104C9.40057 44.1347 10.0681 45.8411 11.5451 46.0436C13.0222 46.2462 14.0132 45.0981 14.2804 43.2412C14.6249 40.8507 13.587 38.2925 13.587 38.2925C13.587 38.2925 10.0222 39.82 9.67774 42.2104ZM7.93324 42.841C5.87094 40.7565 1.75281 41.3053 1.75281 41.3053C1.75281 41.3053 2.78322 44.3267 4.84552 46.4112C6.44771 48.0305 8.12965 48.5674 9.21589 47.5438C10.3016 46.5203 9.59376 44.519 7.93324 42.841ZM13.1147 48.6075C13.2234 50.6383 14.2164 52.2634 15.7054 52.1872C17.195 52.111 17.9402 50.7404 17.835 48.7806C17.6994 46.2578 16.175 43.8286 16.175 43.8286C16.175 43.8286 12.9791 46.0847 13.1147 48.6075ZM11.5673 49.8541C9.19641 48.1728 5.27918 49.4091 5.27918 49.4091C5.27918 49.4091 6.80709 52.1796 9.17846 53.861C11.0204 55.1671 12.7522 55.4042 13.6326 54.2213C14.5129 53.0384 13.4761 51.2076 11.5673 49.8541ZM17.6489 54.5517C18.1878 56.5159 19.4664 57.9142 20.8428 57.5543C22.2191 57.1943 22.6209 55.7116 22.1005 53.8161C21.4305 51.3758 19.4814 49.2935 19.4814 49.2935C19.4814 49.2935 16.9789 52.1114 17.6489 54.5517ZM23.2189 59.297C24.1162 61.0923 25.6311 62.2002 26.9118 61.5905C28.1924 60.9808 28.3076 59.4718 27.4417 57.7393C26.3275 55.509 24.0269 53.8677 24.0269 53.8677C24.0269 53.8677 22.1042 57.0667 23.2189 59.297ZM16.3997 56.0787C13.7437 54.8698 10.1171 56.861 10.1171 56.861C10.1171 56.861 12.149 59.3163 14.8055 60.5252C16.8688 61.4643 18.621 61.3627 19.2646 60.0159C19.9077 58.6691 18.5383 57.0519 16.3997 56.0787ZM22.5159 61.134C19.7258 60.4551 16.6022 63.0888 16.6022 63.0888C16.6022 63.0888 19.0239 65.1045 21.8136 65.7834C23.9805 66.3108 25.6515 65.8796 26.0194 64.4409C26.3868 63.0023 24.7617 61.6804 22.5159 61.134Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M271.601 1.73009C273.413 2.96881 274.069 4.38667 273.219 5.57271C272.367 6.75876 270.715 6.59837 268.965 5.40298C266.714 3.86412 265.064 0 265.064 0C265.064 0 269.349 0.191223 271.601 1.73009ZM275.087 6.68594C273.781 3.95357 275.82 0.273987 275.82 0.273987C275.82 0.273987 278.425 2.38533 279.73 5.11771C280.744 7.24023 280.662 9.02983 279.258 9.66893C277.854 10.308 276.138 8.88539 275.087 6.68594ZM280.224 13.1231C279.852 10.1722 282.938 7.32457 282.938 7.32457C282.938 7.32457 284.732 10.0782 285.104 13.0291C285.392 15.3214 284.75 16.9762 283.222 17.1592C281.693 17.3423 280.521 15.4985 280.224 13.1231ZM273.474 7.59886C275.573 8.38525 276.974 9.86311 276.435 11.2335C275.895 12.6039 274.227 12.8406 272.201 12.0817C269.594 11.1047 267.513 8.85733 267.513 8.85733C267.513 8.85733 270.866 6.62192 273.474 7.59886ZM278.357 13.933C280.154 15.0714 281.146 16.7381 280.346 17.9421C279.544 19.1461 277.93 19.0613 276.196 17.9627C273.965 16.5484 272.501 14.0229 272.501 14.0229C272.501 14.0229 276.127 12.5187 278.357 13.933ZM283.443 20.2008C283.86 17.3032 287.511 15.3597 287.511 15.3597C287.511 15.3597 288.486 18.422 288.069 21.3195C287.745 23.5704 286.71 24.9848 285.222 24.7806C283.733 24.5765 283.107 22.5333 283.443 20.2008ZM281.25 20.6241C282.736 22.025 283.34 23.8039 282.318 24.8366C281.297 25.8693 279.764 25.5188 278.329 24.1669C276.482 22.4265 275.606 19.7378 275.606 19.7378C275.606 19.7378 279.403 18.8838 281.25 20.6241ZM284.742 27.6434C285.834 25.0061 289.832 24.0448 289.832 24.0448C289.832 24.0448 290.051 27.1714 288.958 29.8088C288.11 31.8575 286.771 32.9455 285.378 32.396C283.984 31.8466 283.863 29.7664 284.742 27.6434ZM282.581 27.9277C283.664 29.5546 283.828 31.3538 282.631 32.1132C281.432 32.8725 280.067 32.2242 279.022 30.6542C277.678 28.6331 277.463 25.9212 277.463 25.9212C277.463 25.9212 281.236 25.9066 282.581 27.9277ZM282.199 35.1654C282.855 37.023 282.565 38.8302 281.198 39.2897C279.831 39.7492 278.652 38.7856 278.02 36.993C277.206 34.6852 277.675 31.9693 277.675 31.9693C277.675 31.9693 281.386 32.8577 282.199 35.1654ZM284.145 35.3503C285.783 32.9781 290 32.899 290 32.899C290 32.899 289.578 36.0415 287.938 38.4137C286.664 40.2564 285.096 41.0411 283.807 40.1932C282.519 39.3453 282.824 37.2599 284.145 35.3503ZM280.322 42.2104C280.6 44.1347 279.933 45.8411 278.455 46.0437C276.978 46.2462 275.987 45.0981 275.72 43.2412C275.375 40.8507 276.413 38.2925 276.413 38.2925C276.413 38.2925 279.978 39.82 280.322 42.2104ZM282.066 42.841C284.129 40.7565 288.247 41.3053 288.247 41.3053C288.247 41.3053 287.217 44.3267 285.154 46.4112C283.552 48.0305 281.87 48.5674 280.784 47.5439C279.698 46.5203 280.406 44.519 282.066 42.841ZM276.886 48.6075C276.777 50.6383 275.784 52.2634 274.295 52.1872C272.806 52.111 272.061 50.7404 272.165 48.7806C272.301 46.2578 273.825 43.8286 273.825 43.8286C273.825 43.8286 277.021 46.0847 276.886 48.6075ZM278.433 49.8541C280.804 48.1727 284.721 49.4091 284.721 49.4091C284.721 49.4091 283.192 52.1796 280.821 53.861C278.979 55.1671 277.248 55.4042 276.367 54.2213C275.487 53.0384 276.523 51.2076 278.433 49.8541ZM272.351 54.5517C271.812 56.5159 270.533 57.9142 269.157 57.5543C267.78 57.1943 267.379 55.7116 267.899 53.8161C268.569 51.3758 270.519 49.2935 270.519 49.2935C270.519 49.2935 273.02 52.1114 272.351 54.5517ZM266.781 59.297C265.884 61.0923 264.369 62.2002 263.089 61.5905C261.808 60.9808 261.692 59.4718 262.559 57.7393C263.673 55.509 265.974 53.8677 265.974 53.8677C265.974 53.8677 267.896 57.0667 266.781 59.297ZM273.601 56.0788C276.256 54.8698 279.883 56.861 279.883 56.861C279.883 56.861 277.851 59.3163 275.194 60.5252C273.131 61.4643 271.379 61.3627 270.735 60.0159C270.092 58.6691 271.462 57.0519 273.601 56.0788ZM267.483 61.134C270.273 60.4551 273.397 63.0888 273.397 63.0888C273.397 63.0888 270.976 65.1045 268.187 65.7834C266.02 66.3108 264.349 65.8796 263.98 64.4409C263.613 63.0023 265.238 61.6805 267.483 61.134Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M99.9861 61L79.8724 7H68.2684L48 61H56.9738L62.389 45.9049H85.4424L90.7802 61H99.9861ZM73.529 14.9366H74.4573L82.8122 38.3574H65.0967L73.529 14.9366ZM116 61V7H107.336V61H116Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M171.512 42.08C174.136 44.832 176.824 47.2 179.64 49.056L183.096 43.616C178.424 40.928 174.584 37.472 171.704 33.184H180.088V27.488H159.8C160.056 26.848 160.376 25.824 160.824 24.48H177.016V18.912H162.168C162.424 17.888 162.616 16.864 162.744 15.776H178.552V10.08H163.576L164.216 4.704L157.88 4.512C157.816 5.344 157.624 7.2 157.24 10.08H144.696V15.776H156.408C156.216 17.12 155.96 18.144 155.768 18.912H145.656V24.48H154.232C153.912 25.568 153.528 26.592 153.08 27.488H143.736V31.456C142.264 29.664 140.984 28.192 139.768 26.976L138.424 28.32V22.112H144.312V15.84H138.424V4.96L132.472 4.704V15.84H126.136V22.112H131.96C130.872 25.632 129.464 29.344 127.736 33.184C126.072 37.024 124.472 40.224 123 42.848L127.096 47.84C129.08 44.256 130.872 40.48 132.472 36.512V62.24H138.424V33.632C139.768 35.232 140.984 36.896 142.008 38.496L145.784 34.144L145.08 33.184H150.072C147.576 36.96 143.992 40.736 139.32 44.384L143.352 49.44C146.232 47.136 148.664 44.832 150.712 42.592V45.6H158.136V48.928H144.312V54.816H158.136V63.072H164.344V54.816H177.528V48.928H164.344V45.6H171.512V42.08ZM153.08 39.712C154.68 37.664 156.088 35.488 157.304 33.184H165.112C166.328 35.424 167.736 37.6 169.464 39.712H164.344V35.104L158.136 34.784V39.712H153.08ZM237.688 27.808V31.968H243.96V22.176H236.6L237.816 15.904H243.96V9.888H229.88C229.048 7.264 228.408 5.344 227.896 4L221.112 4.896C221.816 6.944 222.328 8.608 222.648 9.888H208.76V15.904H214.904C215.16 17.504 215.48 19.552 215.8 22.176H208.248V31.968H214.52V27.808H237.688ZM208.184 32.864C206.584 30.496 205.048 28.576 203.512 27.104L201.592 29.024V22.432H207.16V16.032H201.592V5.088L195.384 4.832V16.032H188.984V22.432H195.192C194.104 25.76 192.696 29.152 191.096 32.672C189.496 36.192 188.088 38.88 186.872 40.864L190.968 46.624C192.44 44 193.912 40.8 195.384 37.088V62.56H201.592V33.696C202.552 34.912 203.448 36.128 204.28 37.472L208.184 32.864ZM231.416 15.904C231.224 17.504 230.84 19.552 230.264 22.176H222.008C221.688 19.808 221.432 17.696 221.112 15.904H231.416ZM244.984 33.824H230.072C229.304 31.328 228.728 29.472 228.28 28.384L221.944 29.28C222.776 32.032 223.288 33.504 223.352 33.824H207.864V39.84H215.416C215.16 47.648 213.496 53.536 204.088 58.464L207.672 64.224C214.776 60.128 218.424 55.008 220.28 49.12H233.336L232.76 53.088C232.44 55.2 231.864 55.648 229.112 55.904L225.08 56.288L227 62.496L230.84 62.112C237.176 61.472 238.584 60.448 239.352 54.816L239.864 48.416L240.248 43.104H221.56C221.624 42.4 221.752 41.312 221.816 39.84H244.984V33.824Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
BIN
frontend/src/images/top_bg.png
Normal file
BIN
frontend/src/images/top_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Loading…
x
Reference in New Issue
Block a user