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"> <component name="InspectionProjectProfileManager">
<profile version="1.0"> <profile version="1.0">
<option name="myName" value="Project Default" /> <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" /> <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile> </profile>
</component> </component>

View File

@@ -1,7 +1,5 @@
@import './icon_font/iconfont.css'; @import './icon_font/iconfont.css';
:root {
}
*, *,
*::before, *::before,
@@ -17,6 +15,7 @@ ul {
html { html {
font-size: 14px; font-size: 14px;
} }
body { body {
@@ -34,8 +33,12 @@ body {
'Helvetica Neue', 'Helvetica Neue',
sans-serif; sans-serif;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
height: 100vh;
overflow: hidden;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -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/main.css'
import './assets/base.css';
// 引入组件库的少量全局样式变量 // 引入组件库的少量全局样式变量
import 'tdesign-vue-next/es/style/index.css' //tdesign 组件样式 import 'tdesign-vue-next/es/style/index.css' //tdesign 组件样式
// 引入iconfont图标样式 // 引入iconfont图标样式

View File

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

View File

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