fix:样式修改;

This commit is contained in:
小杨 2024-11-19 09:42:19 +08:00
parent 6e3efe7843
commit da83bcec5c
3 changed files with 55 additions and 25 deletions

View File

@ -68,19 +68,33 @@ const rightComponets = (str) => {
default:
return null
}
}
//
const getViewportHeight = () => {
return Math.max(
document.documentElement.clientHeight,
window.innerHeight || 0
);
}
//
onMounted(() => {
currentComponent.value = rightComponets(props.parameter.components)
//
pageHeight.value = getViewportHeight() - 210
nextTick(() => {
pageHeight.value = window.innerHeight + window.scrollY - 156;
window.addEventListener('resize', () => {
pageHeight.value = getViewportHeight() - 210;
});
});
})
</script>
<style lang="scss" scoped>
.tabs-container{
position: relative;
height: 100%;
}
.demo-tabs{
height: 100%;
}
.button-div{
position: absolute;
@ -88,9 +102,13 @@ onMounted(() => {
right: 0;
z-index: 999;
}
.tempalte-main{
height: 100%;
}
.right-box{
background-color: #fff;
padding:5px;
border-radius: 4px;
height: 100%;
}
</style>

View File

@ -1,4 +1,5 @@
<template>
<el-scrollbar :height="viewportHeight">
<div class="list-container">
<div class="content-list" v-for="(item, index) in items" :key="index" @click="handleClick(item)">
<div class="item-content">
@ -14,10 +15,11 @@
</div>
</div>
</div>
</el-scrollbar>
</template>
<script setup>
import { ref } from 'vue';
import { ref,onMounted,nextTick } from 'vue';
import { ArrowRight } from '@element-plus/icons-vue';
import CustomButton from '../components/button.vue'
const emits = defineEmits(['checked']);
@ -30,10 +32,14 @@
{ id:5,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
{ id:6,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
{ id:7,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
{ id:7,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
{ id:7,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
{ id:7,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
]);
// checkboxid
const selectIds = ref([])
const viewportHeight = ref(0);
const handleClick = (item) => {
console.log(item.title);
@ -50,6 +56,21 @@
}
emits('checked',selectIds.value)
}
//
const getViewportHeight = () => {
return Math.max(
document.documentElement.clientHeight,
window.innerHeight || 0
);
}
onMounted(() => {
viewportHeight.value = getViewportHeight() - 157
nextTick(() => {
window.addEventListener('resize', () => {
viewportHeight.value = getViewportHeight() - 157;
});
});
})
</script>
<style scoped>

View File

@ -1,6 +1,6 @@
<template>
<div class="page-template flex">
<!-- // -->
<!-- 顶部 -->
<div class="mb-4">
<div>
<el-button type="danger" :disabled="!isChceked">批量删除</el-button>
@ -12,7 +12,7 @@
@select-click="selectClick"
/>
</div>
<div :style="{height: viewportHeight - 72 + 'px'}" class="no-horizontal-scroll">
<div>
<el-row :gutter="20" class="tempalte-main">
<el-col :span="6">
<!-- 左侧列表 -->
@ -99,17 +99,8 @@ const listeners = computed(() => ({
.page-template {
flex-direction: column;
height: 100%;
overflow-x: hidden; //
.tempalte-main {
flex: 1;
}
}
.no-horizontal-scroll {
overflow: auto;
overflow-x: hidden;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
</style>