aike/emis-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

md

Browse Source
This commit is contained in:
linfso 2024-02-20 18:28:06 +08:00
parent 833bfe9bdd
commit 53aa86ea1d
3 changed files with 26 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/logo/short_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

15
src/components/HeaderSearch/index.vue
View File

@ -3,12 +3,10 @@
:width="330" :width="330"
trigger="click" trigger="click"
transition="el-zoom-in-top" transition="el-zoom-in-top"
popper-class="ele-notice-pop"> popper-class="ele-notice-pop"
<div slot="reference" > effect="light"
<div> :show-arrow="false"
<svg-icon class-name="search-icon" icon-class="search" @click.stop="click" /> >
</div>
</div>
<div :class="{'show':show}" class="header-search"> <div :class="{'show':show}" class="header-search">
<el-select <el-select
ref="headerSearchSelect" ref="headerSearchSelect"
@ -24,6 +22,11 @@
<el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" /> <el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
</el-select> </el-select>
</div> </div>
<div slot="reference" >
<div>
<svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
</div>
</div>
</el-popover> </el-popover>
</template> </template>

20
src/layout/components/Sidebar/Logo.vue
View File

@ -2,13 +2,13 @@
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<transition name="sidebarLogoFade"> <transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<!-- <img v-if="logo" :src="logo" class="sidebar-logo" /> --> <img v-if="logo" :src="shortLogo" style=" width: 30px;height: 30px;margin-top: 0px;" />
<!-- <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> --> <!-- <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">TANEX</h1> -->
</router-link> </router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/"> <router-link v-else key="expand" class="sidebar-logo-link" to="/">
<div style="background: #fff url('../../assets/logo/left_logo_bg.png') no-repeat;background-size: cover;"> <div :style="{backgroundImage:'url('+logoBg+')'}" class="logo-bg">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> <!-- <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> -->
</div> </div>
</router-link> </router-link>
</transition> </transition>
@ -16,7 +16,9 @@
</template> </template>
<script> <script>
import shortLogoImg from '@/assets/logo/short_logo.png'
import logoImg from '@/assets/logo/left_logo.png' import logoImg from '@/assets/logo/left_logo.png'
import logoBgImg from '@/assets/logo/left_logo_bg.png'
import variables from '@/assets/styles/variables.scss' import variables from '@/assets/styles/variables.scss'
export default { export default {
@ -38,13 +40,21 @@ export default {
data() { data() {
return { return {
title: '', title: '',
logo: logoImg logo: logoImg,
logoBg: logoBgImg,
shortLogo: shortLogoImg,
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.logo-bg {
background-size: cover;
margin: 15px;
}
.sidebarLogoFade-enter-active { .sidebarLogoFade-enter-active {
transition: opacity 1.5s; transition: opacity 1.5s;
} }