大屏页面初始化
This commit is contained in:
222
screen-vue/src/views/desktop/components/Alert.vue
Normal file
222
screen-vue/src/views/desktop/components/Alert.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<div class="table-container">
|
||||
<div class="main-card">
|
||||
<div class="title-section">
|
||||
<h1 class="title">预警信息</h1>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="content-section">
|
||||
<div class="table-wrapper">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
:header-cell-style="{ background: '#f5f7fa' }"
|
||||
style="width: 100%;"
|
||||
height="100%"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="姓名"
|
||||
width="120"
|
||||
fixed="left"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="age"
|
||||
label="年龄"
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="gender"
|
||||
label="性别"
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="phone"
|
||||
label="手机号"
|
||||
width="150"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="email"
|
||||
label="邮箱"
|
||||
width="200"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="地址"
|
||||
width="250"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="company"
|
||||
label="公司"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="position"
|
||||
label="职位"
|
||||
width="150"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="salary"
|
||||
label="薪资"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="entryDate"
|
||||
label="入职日期"
|
||||
width="150"
|
||||
fixed="right"
|
||||
/>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElTable, ElTableColumn, ElLoading } from 'element-plus'
|
||||
|
||||
// 生成模拟数据
|
||||
const generateTableData = () => {
|
||||
const data = []
|
||||
const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十']
|
||||
const genders = ['男', '女']
|
||||
const positions = ['前端开发', '后端开发', '产品经理', 'UI设计', '测试工程师', '运维工程师']
|
||||
const companies = ['科技有限公司', '网络科技公司', '信息技术公司', '数据服务公司']
|
||||
|
||||
for (let i = 1; i <= 50; i++) {
|
||||
data.push({
|
||||
id: i,
|
||||
name: names[Math.floor(Math.random() * names.length)] + i,
|
||||
age: Math.floor(Math.random() * 30) + 20,
|
||||
gender: genders[Math.floor(Math.random() * genders.length)],
|
||||
phone: `13${Math.floor(Math.random() * 900000000) + 100000000}`,
|
||||
email: `user${i}@example.com`,
|
||||
address: `北京市朝阳区某某街道${Math.floor(Math.random() * 100)}号`,
|
||||
company: Math.floor(Math.random() * 10) + '号' + companies[Math.floor(Math.random() * companies.length)],
|
||||
position: positions[Math.floor(Math.random() * positions.length)],
|
||||
salary: `${Math.floor(Math.random() * 30) + 10}k`,
|
||||
entryDate: `202${Math.floor(Math.random() * 5) + 1}-${Math.floor(Math.random() * 12) + 1}-${Math.floor(Math.random() * 28) + 1}`
|
||||
})
|
||||
}
|
||||
return data
|
||||
}
|
||||
|
||||
const tableData = ref([])
|
||||
const loading = ref(true)
|
||||
|
||||
onMounted(() => {
|
||||
// 模拟接口请求延迟
|
||||
setTimeout(() => {
|
||||
tableData.value = generateTableData()
|
||||
loading.value = false
|
||||
}, 500)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 2px;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
box-sizing: border-box;
|
||||
background-color: #f9fafb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #e5e7eb;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:deep(.el-table__body-wrapper) {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
|
||||
display: block;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
|
||||
background: #dcdfe6;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
|
||||
background: #c0c4cc;
|
||||
}
|
||||
|
||||
:deep(.el-table__fixed-left) {
|
||||
box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:deep(.el-table__fixed-right) {
|
||||
box-shadow: -2px 0 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:deep(.el-table th) {
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
</style>
|
||||
224
screen-vue/src/views/desktop/components/Note.vue
Normal file
224
screen-vue/src/views/desktop/components/Note.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<div class="table-container">
|
||||
<div class="main-card">
|
||||
<div class="title-section">
|
||||
<h1 class="title">便签信息</h1>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="content-section">
|
||||
<div class="table-wrapper">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
:header-cell-style="{ background: '#f5f7fa' }"
|
||||
style="width: 100%;"
|
||||
height="100%"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="姓名"
|
||||
width="120"
|
||||
fixed="left"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="age"
|
||||
label="年龄"
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="gender"
|
||||
label="性别"
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="phone"
|
||||
label="手机号"
|
||||
width="150"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="email"
|
||||
label="邮箱"
|
||||
width="200"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="地址"
|
||||
width="250"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="company"
|
||||
label="公司"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="position"
|
||||
label="职位"
|
||||
width="150"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="salary"
|
||||
label="薪资"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="entryDate"
|
||||
label="入职日期"
|
||||
width="150"
|
||||
fixed="right"
|
||||
/>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElTable, ElTableColumn, ElLoading } from 'element-plus'
|
||||
|
||||
// 生成模拟数据
|
||||
const generateTableData = () => {
|
||||
const data = []
|
||||
const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十']
|
||||
const genders = ['男', '女']
|
||||
const positions = ['前端开发', '后端开发', '产品经理', 'UI设计', '测试工程师', '运维工程师']
|
||||
const companies = ['科技有限公司', '网络科技公司', '信息技术公司', '数据服务公司']
|
||||
|
||||
for (let i = 1; i <= 50; i++) {
|
||||
data.push({
|
||||
id: i,
|
||||
name: names[Math.floor(Math.random() * names.length)] + i,
|
||||
age: Math.floor(Math.random() * 30) + 20,
|
||||
gender: genders[Math.floor(Math.random() * genders.length)],
|
||||
phone: `13${Math.floor(Math.random() * 900000000) + 100000000}`,
|
||||
email: `user${i}@example.com`,
|
||||
address: `北京市朝阳区某某街道${Math.floor(Math.random() * 100)}号`,
|
||||
company: Math.floor(Math.random() * 10) + '号' + companies[Math.floor(Math.random() * companies.length)],
|
||||
position: positions[Math.floor(Math.random() * positions.length)],
|
||||
salary: `${Math.floor(Math.random() * 30) + 10}k`,
|
||||
entryDate: `202${Math.floor(Math.random() * 5) + 1}-${Math.floor(Math.random() * 12) + 1}-${Math.floor(Math.random() * 28) + 1}`
|
||||
})
|
||||
}
|
||||
return data
|
||||
}
|
||||
|
||||
const tableData = ref([])
|
||||
const loading = ref(true)
|
||||
|
||||
onMounted(() => {
|
||||
// 模拟接口请求延迟
|
||||
setTimeout(() => {
|
||||
tableData.value = generateTableData()
|
||||
loading.value = false
|
||||
}, 500)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 2px;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
box-sizing: border-box;
|
||||
background-color: #f9fafb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #e5e7eb;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 表格滚动条样式优化 */
|
||||
:deep(.el-table__body-wrapper) {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
|
||||
display: block;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
|
||||
background: #dcdfe6;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
|
||||
background: #c0c4cc;
|
||||
}
|
||||
|
||||
/* 固定表头样式优化 */
|
||||
:deep(.el-table__fixed-left) {
|
||||
box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:deep(.el-table__fixed-right) {
|
||||
box-shadow: -2px 0 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:deep(.el-table th) {
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
</style>
|
||||
313
screen-vue/src/views/desktop/components/Quick.vue
Normal file
313
screen-vue/src/views/desktop/components/Quick.vue
Normal file
@@ -0,0 +1,313 @@
|
||||
<template>
|
||||
<div class="quick-login-container">
|
||||
<div class="main-card">
|
||||
<div class="title-section">
|
||||
<h1 class="title">快捷登录</h1>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="content-section">
|
||||
<div class="card-list-wrapper" ref="cardWrapperRef">
|
||||
<div class="card-list-inner" ref="cardListRef">
|
||||
<div
|
||||
v-for="(item, index) in loginList"
|
||||
:key="index"
|
||||
class="login-card"
|
||||
@click="handleCardClick(item)"
|
||||
>
|
||||
<div class="icon-wrapper">
|
||||
<img :src="item.icon" :alt="item.name" class="login-icon" />
|
||||
</div>
|
||||
<div class="card-name">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-button
|
||||
class="control-btn left-btn"
|
||||
@click="scrollCards('left')"
|
||||
:disabled="isLeftDisabled"
|
||||
circle
|
||||
size="mini"
|
||||
icon="ArrowLeft"
|
||||
></el-button>
|
||||
<el-button
|
||||
class="control-btn right-btn"
|
||||
@click="scrollCards('right')"
|
||||
:disabled="isRightDisabled"
|
||||
circle
|
||||
size="mini"
|
||||
icon="ArrowRight"
|
||||
></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
|
||||
import { ElButton, ElMessage } from 'element-plus'
|
||||
|
||||
const loginList = ref([
|
||||
{ icon: 'https://picsum.photos/120/80?1', name: '账号密码' },
|
||||
{ icon: 'https://picsum.photos/120/80?2', name: '手机验证码' },
|
||||
{ icon: 'https://picsum.photos/120/80?3', name: '微信登录' },
|
||||
{ icon: 'https://picsum.photos/120/80?4', name: '支付宝登录' },
|
||||
{ icon: 'https://picsum.photos/120/80?5', name: 'QQ登录' },
|
||||
{ icon: 'https://picsum.photos/120/80?6', name: '微博登录' },
|
||||
{ icon: 'https://picsum.photos/120/80?7', name: '邮箱登录' },
|
||||
{ icon: 'https://picsum.photos/120/80?8', name: '抖音登录' },
|
||||
{ icon: 'https://picsum.photos/120/80?9', name: '快手登录' }
|
||||
])
|
||||
|
||||
const cardWrapperRef = ref(null)
|
||||
const cardListRef = ref(null)
|
||||
const scrollLeft = ref(0)
|
||||
|
||||
const isLeftDisabled = computed(() => {
|
||||
return scrollLeft.value <= 0
|
||||
})
|
||||
|
||||
const isRightDisabled = computed(() => {
|
||||
if (!cardWrapperRef.value || !cardListRef.value) return true
|
||||
const maxScroll = cardListRef.value.scrollWidth - cardWrapperRef.value.clientWidth
|
||||
return Math.round(scrollLeft.value) >= Math.round(maxScroll)
|
||||
})
|
||||
|
||||
const scrollCards = (direction) => {
|
||||
if (!cardListRef.value || !cardWrapperRef.value) return
|
||||
const step = 128
|
||||
const maxScroll = cardListRef.value.scrollWidth - cardWrapperRef.value.clientWidth
|
||||
let newScroll = scrollLeft.value
|
||||
|
||||
if (direction === 'left') {
|
||||
newScroll = Math.max(0, newScroll - step)
|
||||
} else {
|
||||
newScroll = Math.min(maxScroll, newScroll + step)
|
||||
}
|
||||
|
||||
if (newScroll !== scrollLeft.value) {
|
||||
cardListRef.value.scrollTo({
|
||||
left: newScroll,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
scrollLeft.value = newScroll
|
||||
}
|
||||
}
|
||||
|
||||
const handleCardClick = (item) => {
|
||||
ElMessage.success(`选择了${item.name}登录`)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const list = cardListRef.value
|
||||
if (list) {
|
||||
scrollLeft.value = list.scrollLeft
|
||||
list.addEventListener('scroll', () => {
|
||||
scrollLeft.value = list.scrollLeft
|
||||
})
|
||||
}
|
||||
window.addEventListener('resize', () => {
|
||||
if (cardListRef.value) {
|
||||
scrollLeft.value = cardListRef.value.scrollLeft
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
const list = cardListRef.value
|
||||
if (list) {
|
||||
list.removeEventListener('scroll', () => {})
|
||||
}
|
||||
window.removeEventListener('resize', () => {})
|
||||
})
|
||||
|
||||
watch([isLeftDisabled, isRightDisabled], () => {}, { immediate: true })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.quick-login-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 2px;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
box-sizing: border-box;
|
||||
background-color: #f9fafb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #e5e7eb;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 100;
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
padding: 0 !important;
|
||||
background-color: #e6f7ff !important;
|
||||
border-color: #91d5ff !important;
|
||||
color: #1890ff !important;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.control-btn:disabled {
|
||||
background-color: #f0f8fb !important;
|
||||
border-color: #b3d8ea !important;
|
||||
color: #8cbfe8 !important;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.control-btn:not(:disabled):active {
|
||||
background-color: #bae7ff !important;
|
||||
border-color: #69c0ff !important;
|
||||
color: #096dd9 !important;
|
||||
}
|
||||
|
||||
.left-btn {
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
.right-btn {
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.card-list-wrapper {
|
||||
width: 100%;
|
||||
height: calc(100% - 16px);
|
||||
padding: 8px 20px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-list-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.card-list-inner::-webkit-scrollbar {
|
||||
display: block;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.card-list-inner::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.card-list-inner::-webkit-scrollbar-thumb {
|
||||
background: #dcdfe6;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.card-list-inner::-webkit-scrollbar-thumb:hover {
|
||||
background: #c0c4cc;
|
||||
}
|
||||
|
||||
.card-list-inner {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
height: 100%;
|
||||
width: 120px;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: #f5f7fa;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.login-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
|
||||
background-color: #eff6ff;
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.login-icon {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
font-size: 13px;
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding-top: 8px;
|
||||
}
|
||||
</style>
|
||||
152
screen-vue/src/views/desktop/components/UserTop.vue
Normal file
152
screen-vue/src/views/desktop/components/UserTop.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="welcome-bar">
|
||||
<div class="welcome-left">
|
||||
<div class="avatar">
|
||||
<img src="https://picsum.photos/48/48" alt="头像" />
|
||||
</div>
|
||||
<div class="welcome-text">
|
||||
<div class="greeting">您好, 超级管理员, 开始您一天的工作吧!</div>
|
||||
<div class="weather">今日小雪;夜间:多云;温度:(-4.0℃ 至 2.0℃);东北风/1-3级</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="welcome-right">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">待办</div>
|
||||
<div class="stat-value">0/0</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">日程</div>
|
||||
<div class="stat-value">0/0</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">项目</div>
|
||||
<div class="stat-value">1/7</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">团队</div>
|
||||
<div class="stat-value">6</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
userName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
weatherInfo: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.welcome-bar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.welcome-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.greeting {
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.weather {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.welcome-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 响应式适配 - 适配主页面小屏幕布局 */
|
||||
@media (max-width: 768px) {
|
||||
.welcome-right {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.greeting {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.weather {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user