大屏页面初始化
This commit is contained in:
@@ -1,313 +1,203 @@
|
||||
<template>
|
||||
<div class="search-list-page">
|
||||
<div class="search-section">
|
||||
<div class="search-wrapper">
|
||||
<el-input
|
||||
v-model="searchForm.websiteName"
|
||||
placeholder="请输入搜索网站名称"
|
||||
class="search-input"
|
||||
clearable
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
<div class="search-btn-group">
|
||||
<el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
<div class="layout-container">
|
||||
<div class="header-section">
|
||||
<el-card shadow="hover" class="header-card">
|
||||
<div class="header-content">
|
||||
<UserTop
|
||||
userName="超级管理员"
|
||||
weatherInfo="今日小雪;夜间:多云;温度:(-4.0℃ 至 2.0℃);东北风/1-3级"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<div class="list-wrapper">
|
||||
<div class="list-section">
|
||||
<div v-if="listData.length === 0" class="empty-tip">
|
||||
<el-empty description="暂无数据" />
|
||||
<div class="main-section">
|
||||
<div class="left-section">
|
||||
<el-card shadow="hover" class="card-item card-1">
|
||||
<NoteLeft />
|
||||
</el-card>
|
||||
<el-card shadow="hover" class="card-item card-2">
|
||||
<AlertMain />
|
||||
</el-card>
|
||||
<el-card shadow="hover" class="card-item card-3">
|
||||
<QuickLogin />
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="right-section">
|
||||
<div class="right-top-section">
|
||||
<el-card class="right-card right-top-card">
|
||||
<div class="right-placeholder">上区域内容</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<div v-else class="card-list">
|
||||
<el-card
|
||||
v-for="item in listData"
|
||||
:key="item.websiteId"
|
||||
class="list-card"
|
||||
shadow="hover"
|
||||
>
|
||||
<div class="card-top">
|
||||
<div class="site-main">
|
||||
<el-tooltip :content="item.websiteName" placement="top">
|
||||
<div class="site-name">{{ item.websiteName }}</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip :content="item.websiteUrl" placement="top">
|
||||
<div class="site-url">{{ item.websiteUrl }}</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-divider"></div>
|
||||
<div class="card-bottom">
|
||||
<span class="card-date">{{ item.createTime }}</span>
|
||||
<div class="card-actions">
|
||||
<el-button size="small" type="primary" link @click="handleVisit(item)">
|
||||
<el-icon><Link /></el-icon>
|
||||
访问
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-bottom-section">
|
||||
<el-card class="right-card right-bottom-card">
|
||||
<div class="right-placeholder">下区域内容</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination-footer">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.pageNum"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[20, 50, 99]"
|
||||
:total="pagination.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
background
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Link } from '@element-plus/icons-vue'
|
||||
import { getWebsiteStorageList } from '@/api/bizWebsiteStorage'
|
||||
|
||||
const searchForm = reactive({
|
||||
websiteName: ''
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
})
|
||||
|
||||
const listData = ref([])
|
||||
const getDataList = async () => {
|
||||
try {
|
||||
const reqParmas = {
|
||||
...searchForm,
|
||||
pageNum: pagination.pageNum,
|
||||
pageSize: pagination.pageSize,
|
||||
}
|
||||
const res = await getWebsiteStorageList(reqParmas)
|
||||
listData.value = res.list || []
|
||||
pagination.total = res.total
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleVisit = (item) => {
|
||||
window.open(item.websiteUrl, '_blank')
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.pageNum = 1
|
||||
getDataList()
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
Object.assign(searchForm, {
|
||||
websiteName: ''
|
||||
})
|
||||
pagination.pageNum = 1
|
||||
getDataList()
|
||||
}
|
||||
|
||||
const handleSizeChange = (val) => {
|
||||
pagination.pageSize = val
|
||||
getDataList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
pagination.pageNum = val
|
||||
getDataList()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDataList()
|
||||
})
|
||||
import { ref } from 'vue'
|
||||
import UserTop from './components/UserTop.vue';
|
||||
import NoteLeft from './components/Note.vue'
|
||||
import AlertMain from './components/Alert.vue'
|
||||
import QuickLogin from './components/Quick.vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search-list-page {
|
||||
.layout-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
flex-shrink: 0;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.search-btn-group {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
gap: 8px;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.list-section {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
padding: 12px;
|
||||
background-color: #f5f7fa;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
.header-section {
|
||||
height: 10%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header-card {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.list-card {
|
||||
align-items: stretch !important;
|
||||
justify-content: stretch !important;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #f0f0f0 !important;
|
||||
}
|
||||
|
||||
.list-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
|
||||
border-color: #409eff !important;
|
||||
.header-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-top {
|
||||
.main-section {
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 6px 12px 4px;
|
||||
}
|
||||
|
||||
.site-main {
|
||||
flex: 1;
|
||||
gap: 8px;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.site-name {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #1f2937;
|
||||
margin-bottom: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.site-url {
|
||||
font-size: 13px;
|
||||
color: #9ca3af;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.site-url:hover {
|
||||
color: #409eff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.card-divider {
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.card-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px 8px;
|
||||
}
|
||||
|
||||
.card-date {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
.left-section {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination-footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 8px 0;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-section::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
.card-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: stretch !important;
|
||||
justify-content: stretch !important;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.list-section::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
border-radius: 3px;
|
||||
.right-section {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-section::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 3px;
|
||||
.right-top-section {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.list-section::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
.right-bottom-section {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.right-card {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.3s ease;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.right-card:hover {
|
||||
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.right-placeholder {
|
||||
padding: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep(.el-card) {
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 4px !important;
|
||||
margin: 0 !important;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:deep(.el-card:hover) {
|
||||
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.card-list {
|
||||
grid-template-columns: 1fr;
|
||||
.main-section {
|
||||
flex-direction: column;
|
||||
}
|
||||
.left-section, .right-section {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
flex: none;
|
||||
}
|
||||
.left-section {
|
||||
flex-direction: row;
|
||||
}
|
||||
.card-item {
|
||||
min-width: 120px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.right-top-section, .right-bottom-section {
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user