| | |
| | | <template> |
| | | <div class="avue-logo"> |
| | | <transition name="fade"> |
| | | <span v-if="keyCollapse" |
| | | class="avue-logo_subtitle" |
| | | key="0"> |
| | | <span v-if="isCollapse" class="avue-logo_subtitle" key="0"> |
| | | <img class="imgTop" :src=imgurl> |
| | | </span> |
| | | </transition> |
| | | <transition-group name="fade"> |
| | | <template v-if="!keyCollapse"> |
| | | <template v-if="!isCollapse"> |
| | | <span> |
| | | <img class="imgSpan" :src=imgurl> |
| | | </span> |
| | | <span class="avue-logo_title" |
| | | key="1"> |
| | | <span class="avue-logo_title" key="1"> |
| | | <span> |
| | | <img class="imgSpan" :src=imgurl> |
| | | </span> |
| | | <span class="indexTitle"> {{ website.indexTitle }}</span> |
| | | </span> |
| | | </span> |
| | | </template> |
| | | </transition-group> |
| | | </div> |
| | |
| | | created() { |
| | | }, |
| | | computed: { |
| | | ...mapGetters(["website", "keyCollapse"]) |
| | | ...mapGetters(["website", "isCollapse"]) |
| | | }, |
| | | methods: {} |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | <style lang="scss" scoped> |
| | | .fade-leave-active { |
| | | transition: opacity 0.2s; |
| | | transition: opacity 0.3s; |
| | | } |
| | | |
| | | .fade-enter-active { |
| | | transition: opacity 2.5s; |
| | | transition: opacity .3s; |
| | | } |
| | | |
| | | .fade-enter, |
| | | .fade-leave-to { |
| | | opacity: 0; |
| | | } |
| | | |
| | | .avue-logo { |
| | | position: fixed; |
| | | top: 0; |
| | |
| | | box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); |
| | | color: rgba(255, 255, 255, 0.8); |
| | | z-index: 1024; |
| | | -webkit-transition: width .2s; |
| | | transition: width .2s; |
| | | |
| | | &_title { |
| | | display: block; |
| | |
| | | <el-menu unique-opened |
| | | :default-active="nowTagValue" |
| | | mode="vertical" |
| | | :show-timeout="200" |
| | | :collapse="keyCollapse" |
| | | :collapse="isCollapse" |
| | | :collapse-transition="false" |
| | | > |
| | | <sidebar-item :menu="menu" |
| | | :screen="screen" |
| | | first |
| | | :props="website.menu.props" |
| | | :collapse="keyCollapse"></sidebar-item> |
| | | :collapse="isCollapse"></sidebar-item> |
| | | </el-menu> |
| | | </el-scrollbar> |
| | | </div> |
| | |
| | | inject: ["index"], |
| | | data() { |
| | | return { |
| | | |
| | | collapse:true |
| | | }; |
| | | }, |
| | | created() { |
| | | this.index.openMenu(); |
| | | }, |
| | | computed: { |
| | | ...mapGetters(["website", "menu", "tag", "keyCollapse", "screen", "menuId"]), |
| | | ...mapGetters(["website", "menu", "tag", "isCollapse", "screen", "menuId"]), |
| | | nowTagValue: function () { |
| | | return this.$router.$avueRouter.getValue(this.$route); |
| | | } |
| | |
| | | :key="item[labelKey]" |
| | | :index="item[pathKey]"> |
| | | <template slot="title"> |
| | | <div style="display: flex"> |
| | | <icon-show v-if="item[iconKey]" :name="item[iconKey]" class="iconShowSpan" :style="{ height: iconSize, width: iconSize }"></icon-show> |
| | | <div v-else> |
| | | <i class="el-icon-setting" :font-size="iconSize"></i> |
| | | </div> |
| | | <span slot="title" |
| | | :class="{'el-menu--display':collapse && first}">{{ generateTitle(item) }}</span> |
| | | </div> |
| | | <div style="display: flex"> |
| | | <icon-show v-if="item[iconKey]" :name="item[iconKey]" class="iconShowSpan" :style="{ height: iconSize, width: iconSize }"></icon-show> |
| | | <i v-else class="el-icon-setting" :font-size="iconSize"></i> |
| | | <span slot="title" |
| | | :class="{'el-menu--display':collapse && first}">{{ generateTitle(item) }}</span> |
| | | </div> |
| | | </template> |
| | | <template v-for="(child,cindex) in item[childrenKey]"> |
| | | <el-menu-item v-if="validatenull(child[childrenKey])" |
| | |
| | | :index="child[pathKey],cindex" |
| | | @click="open(child)"> |
| | | <div style="display: flex"> |
| | | <icon-show :name="child[iconKey]" class="iconShowSpan" :style="{ height: iconSize, width: iconSize }"></icon-show> |
| | | <icon-show v-if="child[iconKey]" :name="child[iconKey]" class="iconShowSpan" :style="{ height: iconSize, width: iconSize }"></icon-show> |
| | | <i v-else class="el-icon-setting" :font-size="iconSize"></i> |
| | | <span slot="title">{{ generateTitle(child) }}</span> |
| | | </div> |
| | | </el-menu-item> |
| | |
| | | <div v-if="showCollapse" |
| | | :class="[{ 'avue-breadcrumb--active': isCollapse }]" |
| | | class="avue-breadcrumb"> |
| | | <i class="icon-navicon" |
| | | @click="setCollapse"></i> |
| | | <i class="icon-navicon" @click="setCollapse"></i> |
| | | </div> |
| | | </div> |
| | | <div class="top-bar__title"> |
| | |
| | | this.$store.commit("SET_FULLSCREN"); |
| | | }, |
| | | gotoInfo() { |
| | | console.log('123') |
| | | this.$router.push({path: '/info'}); |
| | | }, |
| | | switchDept() { |
| | |
| | | <pre style="font-size: 12px;color: #909399;margin-top: 0;padding:5px;background-color: #F5F7FA">上传文件为json文件,示例如下 |
| | | [{ |
| | | "name": "图标库名:图标名称", |
| | | "svg": "html代码" |
| | | "svg": "svg的html代码" |
| | | }, |
| | | { |
| | | "name": "图标库名:图标名称", |
| | | "svg": "html代码" |
| | | "svg": "svg的html代码" |
| | | }] |
| | | 文件内容须严格按照示例格式,name为图标库名+图标名称,以“:”分隔,svg为图标html代码</pre> |
| | | </el-dialog> |