|
|
@@ -1,20 +1,29 @@
|
|
|
<!-- eslint-disable vue/multi-word-component-names -->
|
|
|
<template>
|
|
|
<!-- Header部分 -->
|
|
|
- <div v-if="headerConfig.show" class="w-100% flex costume-header" :class="headerConfig.selector.toggleIcon ? 'costume-headerToggleIcon' : 'costume-header' ">
|
|
|
+ <div
|
|
|
+ v-if="headerConfig.show"
|
|
|
+ class="w-100% flex costume-header"
|
|
|
+ :class="headerConfig.selector.toggleIcon ? 'costume-headerToggleIcon' : 'costume-header'"
|
|
|
+ >
|
|
|
<!-- 选择下拉框,自动填充剩余空间,这种实现是因为 Select 不支持 suffix -->
|
|
|
<Dropdown
|
|
|
v-if="headerConfig.selector.show"
|
|
|
- class="flex-grow-1 "
|
|
|
+ class="flex-grow-1"
|
|
|
:class="!headerConfig.selector.toggleIcon ? 'costume-header_left' : ''"
|
|
|
:trigger="['click']"
|
|
|
:bordered="false"
|
|
|
@open-change="visible = $event"
|
|
|
>
|
|
|
<div class="flex-basis-100% flex flex-items-center" @click.prevent>
|
|
|
- <img style="margin-right:10px" v-if="headerConfig.selector.toggleIcon" src="@/assets/images/home-container/configurable/electroChamper/2-2.png" alt=""></img>
|
|
|
+ <img
|
|
|
+ style="margin-right: 10px"
|
|
|
+ v-if="headerConfig.selector.toggleIcon"
|
|
|
+ src="@/assets/images/home-container/configurable/electroChamper/2-2.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
<SwapOutlined v-else class="w-30px" />
|
|
|
-
|
|
|
+
|
|
|
<div class="w-100px flex-grow-1 overflow-hidden whitespace-nowrap text-ellipsis">
|
|
|
{{ selectedDeviceLabel }}
|
|
|
</div>
|
|
|
@@ -80,15 +89,14 @@
|
|
|
<style scoped>
|
|
|
@import '/@/design/theme.less';
|
|
|
|
|
|
-
|
|
|
.costume-header {
|
|
|
height: 30px;
|
|
|
background-image: linear-gradient(90deg, var(--vent-base-light-bg-opcity), transparent 20%, transparent 80%, var(--vent-base-light-bg-opcity));
|
|
|
}
|
|
|
- .costume-headerToggleIcon{
|
|
|
- height: 30px;
|
|
|
- background: url('@/assets/images/home-container/configurable/electroChamper/2-1.png') ;
|
|
|
- background-size: 100% 100%;
|
|
|
+ .costume-headerToggleIcon {
|
|
|
+ height: 30px;
|
|
|
+ background: url('@/assets/images/home-container/configurable/electroChamper/2-1.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
.costume-header_left {
|
|
|
border-left: 3px solid;
|
|
|
@@ -101,7 +109,7 @@
|
|
|
border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
|
|
|
border-image-slice: 1;
|
|
|
}
|
|
|
- img{
|
|
|
+ img {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
margin-left: 8px;
|