yudao-team/oa-ui
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页修改

Browse Source
This commit is contained in:
XaoLi717 2024-10-24 11:00:10 +08:00
parent 3e34e6bee8
commit 9b117f1c01
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/views/Home/Index.vue
View File

@ -18,7 +18,7 @@
</template> </template>
<el-skeleton :loading="loading" animated> <el-skeleton :loading="loading" animated>
<el-card shadow="never" style="margin-bottom: 10px;height: 300px"> <el-card shadow="never" style="margin-bottom: 10px;height: 300px">
<el-carousel :interval="4000" type="card" height="300px"> <el-carousel :interval="4000" height="300px" motion-blur @change="handleCarouselChange">
<el-carousel-item v-for="item in filteredList" :key="item.imgId"> <el-carousel-item v-for="item in filteredList" :key="item.imgId">
<el-image style="width: 100%; height: 100%" :src="imgUrl+item.imgImg" alt="无图片" :title="item.imgName"/> <el-image style="width: 100%; height: 100%" :src="imgUrl+item.imgImg" alt="无图片" :title="item.imgName"/>
</el-carousel-item> </el-carousel-item>
@ -26,7 +26,7 @@
</el-card> </el-card>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<span v-if="filteredList[pageNo - 1]">{{filteredList[pageNo-1].imgName}}</span> <span class="ellipsis" v-if="filteredList[pageNo - 1]">{{filteredList[pageNo-1].imgName}}</span>
</el-col> </el-col>
</el-row> </el-row>
</el-skeleton> </el-skeleton>
@ -333,6 +333,10 @@ const selectDate = (val: CalendarDateType) => {
if (!calendar.value) return if (!calendar.value) return
calendar.value.selectDate(val) calendar.value.selectDate(val)
} }
const handleCarouselChange = async (currentIndex:number) => {
pageNo.value=currentIndex+1
}
let tableData = reactive<Email[]>([]) let tableData = reactive<Email[]>([])
const getTableData = async () => { const getTableData = async () => {
const data = [ const data = [
@ -523,4 +527,11 @@ onMounted(() => {
align-items: center; /* 垂直居中 */ align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */ justify-content: center; /* 水平居中 */
} }
.ellipsis {
display: inline-block; /* 需要是块状元素，span默认是行内元素，所以使用inline-block */
max-width: 400px; /* 设置最大宽度，超出部分将显示省略号 */
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 超出容器的内容隐藏 */
text-overflow: ellipsis; /* 超出的内容以省略号显示 */
}
</style> </style>