mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-29 18:23:59 +08:00
修改了前端页面
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user