修改了前端页面

This commit is contained in:
CGD
2025-03-18 21:49:57 +08:00
parent bd556c33a0
commit f3738a1630
8 changed files with 522 additions and 144 deletions
+48 -35
View File
@@ -1,29 +1,29 @@
<template>
<el-header class="header">
<div style="display: flex;justify-content: space-between;">
<div style="display: flex;justify-content: space-between;margin-top: 6px; ">
<div style="display: flex;align-items: center;gap: 10px;">
<img src="@/assets/xiaozhi-logo.png" alt="" style="width: 56px;height: 56px;" />
<img src="@/assets/xiaozhi-ai.png" alt="" style="width: 78px;height: 16px;" />
<img src="@/assets/xiaozhi-logo.png" alt="" style="width: 42px;height: 42px;" />
<img src="@/assets/xiaozhi-ai.png" alt="" style="width: 58px;height: 12px;" />
<div class="equipment-management" @click="goHome">
<img src="@/assets/home/equipment.png" alt="" style="width: 16px;height: 14px;" />
设备管理
<img src="@/assets/home/equipment.png" alt="" style="width: 12px;height: 10px;" />
智能体管理
</div>
<div class="console">
<i class="el-icon-s-grid" style="font-size: 14px;color: #979db1;" />
<i class="el-icon-s-grid" style="font-size: 10px;color: #979db1;" />
控制台
</div>
<div class="equipment-management2">
设备管理
<img src="@/assets/home/close.png" alt="" style="width: 8px;height: 8px;" />
<img src="@/assets/home/close.png" alt="" style="width: 6px;height: 6px;" />
</div>
</div>
<div style="display: flex;align-items: center;gap: 10px;">
<div style="display: flex;align-items: center;gap: 7px; margin-top: 2px;">
<div class="serach-box">
<el-input placeholder="输入名称搜索.." v-model="serach" />
<el-input placeholder="输入名称搜索.." v-model="serach" style="border: none; background: transparent;" />
<img src="@/assets/home/search.png" alt=""
style="width: 16px;height: 16px;margin-right: 15px;cursor: pointer;" />
style="width: 14px;height: 14px;margin-right: 11px;cursor: pointer;" />
</div>
<img src="@/assets/home/avatar.png" alt="" style="width: 28px;height: 28px;" />
<img src="@/assets/home/avatar.png" alt="" style="width: 21px;height: 21px;" />
<div class="user-info">
158 3632 4642
</div>
@@ -54,69 +54,82 @@ export default {
}
.equipment-management {
width: 110px;
height: 32px;
border-radius: 16px;
width: 82px;
height: 24px;
border-radius: 12px;
background: #5778ff;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
gap: 7px;
font-weight: 500;
color: #fff;
font-size: 14px;
font-size: 10px;
}
.equipment-management2 {
width: 116px;
height: 30px;
border-radius: 15px;
width: 87px;
height: 22px;
border-radius: 11px;
background: #fff;
display: flex;
justify-content: center;
font-size: 12px;
color: #979db1;
font-size: 9px;
font-weight: 400;
gap: 10px;
gap: 7px;
color: #3d4566;
margin-left: 20px;
margin-left: 2px;
align-items: center;
}
.header {
background: #f6fcfe66;
border: 1px solid #fff;
height: 53px !important;
}
.serach-box {
display: flex;
width: 306px;
height: 40px;
border-radius: 20px;
background-color: #e2f5f7;
width: 220px;
height: 30px;
border-radius: 15px;
background-color: #f6fcfe66;
border: 1px solid #e4e6ef;
align-items: center;
padding: 0 7px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-right: 15px;
}
.serach-box /deep/ .el-input__inner {
border-radius: 15px;
height: 100%;
width: 100%;
border: 0;
background: transparent;
padding-left: 12px;
}
.user-info {
font-weight: 600;
font-size: 16px;
font-size: 12px;
letter-spacing: -0.02px;
text-align: left;
color: #3d4566;
}
.console {
width: 120px;
height: 30px;
border-radius: 15px;
width: 90px;
height: 22px;
border-radius: 11px;
background: radial-gradient(50% 50% at 50% 50%, #fff 0%, #e8f0ff 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-size: 9px;
color: #979db1;
font-weight: 400;
gap: 10px;
color: #979db1;
margin-left: 20px;
gap: 7px;
margin-left: 15px;
}
</style>