This commit is contained in:
霜霜
2025-08-16 12:34:42 +08:00
6 changed files with 30 additions and 12 deletions

View File

@@ -1,6 +1,17 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
<option name="myCustomPropertiesEnabled" value="true" />
<option name="myIgnoreVendorSpecificProperties" value="false" />
<option name="myCustomPropertiesList">
<value>
<list size="1">
<item index="0" class="java.lang.String" itemvalue="app-region" />
</list>
</value>
</option>
</inspection_tool>
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>

View File

@@ -1,7 +1,5 @@
@import './icon_font/iconfont.css';
:root {
}
*,
*::before,
@@ -17,6 +15,7 @@ ul {
html {
font-size: 14px;
}
body {
@@ -34,8 +33,12 @@ body {
'Helvetica Neue',
sans-serif;
text-rendering: optimizeLegibility;
height: 100vh;
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
--play-bottom-height: 86px;
}
/* 全局滚动条样式 */

View File

@@ -1 +0,0 @@
@import './base.css';

View File

@@ -1,4 +1,6 @@
import './assets/main.css'
import './assets/base.css';
// 引入组件库的少量全局样式变量
import 'tdesign-vue-next/es/style/index.css' //tdesign 组件样式
// 引入iconfont图标样式

View File

@@ -132,7 +132,6 @@ const handleKeyDown = () => {
<t-input
v-model="keyword"
placeholder="搜索音乐、歌手"
:loading="isSearching"
style="width: 100%"
@enter="handleKeyDown"
>
@@ -141,7 +140,6 @@ const handleKeyDown = () => {
theme="primary"
variant="text"
shape="circle"
:disabled="isSearching"
style="display: flex; align-items: center; justify-content: center"
@click="handleSearch"
>
@@ -163,13 +161,14 @@ const handleKeyDown = () => {
</t-content>
</t-layout>
</t-layout>
<!-- <PlayMusic /> -->
<PlayMusic />
</template>
<style lang="scss" scoped>
.home-container {
height: 100vh;
height: calc(100vh - var(--play-bottom-height));
overflow-y: hidden;
position: relative;
}
.icon {
@@ -257,12 +256,15 @@ const handleKeyDown = () => {
}
}
}
:deep(.t-layout__content){
height: 100%;
display: flex;
}
.content {
padding: 0;
background: #f6f6f6;
height: 100vh;
display: flex;
flex: 1;
flex-direction: column;
.header {

View File

@@ -25,14 +25,15 @@ const scrollTop = ref(0)
const visibleStartIndex = ref(0)
const visibleEndIndex = ref(0)
const visibleItems = ref<any[]>([])
const mainContent = document.querySelector('.mainContent')
// 计算容器高度
const calculateContainerHeight = () => {
if (typeof window !== 'undefined') {
const headerHeight = 120 // 搜索标题区域高度
console.log(mainContent?.clientHeight)
const listHeaderHeight = 40 // 表头高度
const pageHeaderHeight = 52 // 表头高度
const padding = 80 // 容器内边距
const availableHeight = window.innerHeight - headerHeight - listHeaderHeight - padding
const availableHeight =( mainContent?.clientHeight || document.body.offsetHeight )- pageHeaderHeight - listHeaderHeight - padding
virtualScrollConfig.value.containerHeight = Math.max(400, availableHeight)
}
}