0017
/
smart-power-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(样式): 调整侧边栏收缩图标颜色更加皮肤改变、侧边菜单箭头颜色、设备列表页设备码及显示顺序

This commit is contained in:
fhysy 2025-04-16 11:15:50 +08:00
parent 5f403d7391
commit 71ada91c97
5 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/styles/theme.scss
View File

@ -8,6 +8,9 @@
.sidebar-title{
color: $menuGreenLogoColor !important;
}
.el-submenu__icon-arrow{
color: $menuGreenText !important;
}
.sidebar-container{
background-color: $menuGreenBg !important;
@ -38,6 +41,7 @@
background: $menuGreenActive !important;
color: $menuGreenActiveTxt !important;
}
}
.router-link-active>.is-active{
color: $menuGreenActiveTxt !important;

6
src/components/Hamburger/index.vue
View File

@ -8,7 +8,7 @@
width="64"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
<path :fill="svgColor" d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
</svg>
</div>
</template>
@ -20,6 +20,10 @@ export default {
isActive: {
type: Boolean,
default: false
},
svgColor: {
type: String,
default: '#000000' // default black color
}
},
methods: {

6
src/layout/components/Sidebar/index.vue
View File

@ -20,7 +20,7 @@
</el-menu>
</el-scrollbar>
<!-- <logout />-->
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<hamburger id="hamburger-container" :is-active="sidebar.opened" :svgColor="svgColor" class="hamburger-container" color="" @toggleClick="toggleSideBar" />
</div>
</template>
@ -55,6 +55,9 @@ export default {
isCollapse() {
return !this.sidebar.opened;
},
svgColor() {
return process.env.VUE_APP_THEME_CLASS !=='theme-blue-white'?'#ffffff':'#000000';
}
},
methods: {
toggleSideBar() {
@ -90,3 +93,4 @@ export default {
},
};
</script>

15
src/views/iot/device/index.vue
View File

@ -152,27 +152,30 @@
type="index"
width="60px"
></el-table-column>
<el-table-column align="left" label="设备名称" prop="deviceName" >
<el-table-column align="center" label="设备key" prop="deviceKey" />
<el-table-column align="center" label="设备名称" prop="deviceName" >
<template slot-scope="scope">
<el-link :underline="false" type="primary" @click="handleDetails(scope.row)">{{ scope.row.deviceName }}</el-link>
</template>
</el-table-column>
<el-table-column align="left" label="所属型号" prop="modelName" />
<el-table-column align="center" label="所属型号" prop="modelName" />
<el-table-column align="center" label="所属项目" prop="inProjectName" />
<el-table-column align="left" label="设备key" prop="deviceKey" />
<el-table-column
align="center"
label="设备码"
min-width="120"
prop="deviceState"
width="120"
width="60"
>
<template slot-scope="scope">
<img :ref="'qrCodeDiv' + scope.row.deviceKey" style="width: 100%;cursor: pointer" @click="lookQrCode(scope.row.qrCodeUrl)"/>
<!-- <img :ref="'qrCodeDiv' + scope.row.deviceKey" style="width: 100%;cursor: pointer" @click="lookQrCode(scope.row.qrCodeUrl)"/>-->
<img :ref="'qrCodeDiv' + scope.row.deviceKey" style="width: 0;height: 0" @click="lookQrCode(scope.row.qrCodeUrl)"/>
<svg-icon icon-class="qrcode" style="color: #1890FF;cursor: pointer" @click="lookQrCode(scope.row.qrCodeUrl)"/>
</template>
</el-table-column>
<el-table-column
align="left"
align="center"
label="设备类型"
prop="deviceTypeName"
/>

13
src/views/tenant/device/index.vue
View File

@ -91,26 +91,27 @@
type="index"
width="80px"
></el-table-column>
<el-table-column align="left" label="设备名称" prop="deviceName" >
<el-table-column align="center" label="设备key" prop="deviceKey" />
<el-table-column align="center" label="设备名称" prop="deviceName" >
<template slot-scope="scope">
<el-link :underline="false" type="primary" @click="handleDetails(scope.row)">{{ scope.row.deviceName }}</el-link>
</template>
</el-table-column>
<el-table-column align="left" label="设备key" prop="deviceKey" />
<el-table-column align="left" label="所属型号" prop="modelName" />
<el-table-column align="center" label="所属型号" prop="modelName" />
<el-table-column align="center" label="所属项目" prop="inProjectName" />
<el-table-column
align="center"
label="设备码"
min-width="120"
prop="deviceState"
width="120"
width="60"
>
<template slot-scope="scope">
<img :ref="'qrCodeDiv' + scope.row.deviceKey" style="width: 100%;cursor: pointer" @click="lookQrCode(scope.row.qrCodeUrl)"/>
<img :ref="'qrCodeDiv' + scope.row.deviceKey" style="width: 0;height: 0" @click="lookQrCode(scope.row.qrCodeUrl)"/>
<svg-icon icon-class="qrcode" style="color: #1890FF;cursor: pointer" @click="lookQrCode(scope.row.qrCodeUrl)"/>
</template>
</el-table-column>
<el-table-column align="left" label="设备类型" prop="deviceTypeName" width="120px" />
<el-table-column align="center" label="设备类型" prop="deviceTypeName" width="120px" />
<el-table-column align="center" label="设备状态" prop="deviceState" width="120">
<template slot-scope="scope">
<el-tag v-if="scope.row.deviceState === 'ONLINE'" type="success">在线</el-tag>