Browse Source

修改toolheader dom

master
parent
commit
0d707a0c89
  1. BIN
      public/favicon.png
  2. BIN
      src/assets/imgs/logo.png
  3. 3
      src/layout/components/BackOperation/index.ts
  4. 30
      src/layout/components/BackOperation/src/index.vue
  5. 35
      src/layout/components/Logo/src/Logo.vue
  6. 16
      src/layout/components/ToolHeader.vue
  7. 6
      src/layout/components/UserInfo/src/UserInfo.vue
  8. 48
      src/layout/components/useRenderLayout.tsx
  9. 2
      src/styles/var.css
  10. 2
      src/views/task/createEnterprise.vue

BIN
public/favicon.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
src/assets/imgs/logo.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

3
src/layout/components/BackOperation/index.ts

@ -0,0 +1,3 @@
import BackOperation from './src/index.vue'
export { BackOperation }

30
src/layout/components/BackOperation/src/index.vue

@ -0,0 +1,30 @@
<script lang="ts" setup>
import { Icon } from '@/components/Icon'
import { propTypes } from '@/utils/propTypes'
import { onBeforeRouteUpdate } from 'vue-router'
defineOptions({ name: 'BackOperation' })
const router = useRouter()
const isBack = ref(false)
defineProps({
color: propTypes.string.def('')
})
const goback = () => {
router.go(-1)
}
onBeforeRouteUpdate((to) => {
isBack.value = to.meta.hidden
})
</script>
<template>
<div
@click="goback"
class="flex items-center gap-4px color-#409EFF cursor-pointer"
v-show="isBack"
>
<Icon icon="ep:back" :size="18" />
<span class="text-14px line-height-22px"> 返回上一级 </span>
</div>
</template>

35
src/layout/components/Logo/src/Logo.vue

@ -57,36 +57,17 @@ watch(
</script>
<template>
<div>
<router-link
:class="[
prefixCls,
layout !== 'classic' ? `${prefixCls}__Top` : '',
'flex !h-[var(--logo-height)] items-center cursor-pointer justify-center relative decoration-none overflow-hidden p-20px'
]"
to="/"
>
<!-- <img-->
<!-- class="h-[calc(var(&#45;&#45;logo-height)-10px)] w-[calc(var(&#45;&#45;logo-height)-10px)]"-->
<!-- src="@/assets/imgs/logo.png"-->
<!-- />-->
<img
class="h-20px"
src="@/assets/imgs/logo.png"
/>
<router-link to="/" class="flex items-center bg-[#fff] gap-8px" style="padding: 16px 20px;text-decoration: none " >
<!-- <img-->
<!-- class="h-[calc(var(&#45;&#45;logo-height)-10px)] w-[calc(var(&#45;&#45;logo-height)-10px)]"-->
<!-- src="@/assets/imgs/logo.png"-->
<!-- />-->
<img class="h-32px" src="@/assets/imgs/logo.png" />
<div
v-if="show" style="color:black"
:class="[
'ml-10px text-16px font-700 flex-1',
{
'text-[var(--logo-title-text-color)]': layout === 'classic',
'text-[var(--top-header-text-color)]':
layout === 'topLeft' || layout === 'top' || layout === 'cutMenu'
}
]"
class=" text-16px font-500 flex-1 lh-24px color-#000"
style="text-decoration: none"
>
{{ title }}
</div>
</router-link>
</div>
</template>

16
src/layout/components/ToolHeader.vue

@ -48,21 +48,9 @@ export default defineComponent({
return () => (
<div
id={`${variables.namespace}-tool-header`}
class={[
prefixCls,
'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
'dark:bg-[var(--el-bg-color)]'
]}
class=" relative flex items-cente "
>
{layout.value !== 'top' ? (
<div class="h-full flex items-center">
{hamburger.value && layout.value !== 'cutMenu' ? (
<Collapse class="custom-hover" color="var(--top-header-text-color)"></Collapse>
) : undefined}
{breadcrumb.value ? <Breadcrumb class="lt-md:hidden"></Breadcrumb> : undefined}
</div>
) : undefined}
<div class="h-full flex items-center">
<div class="flex items-center" >
<Screen class="custom-hover" color="var(--top-header-text-color)" />
{screenfull.value ? (
<Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>

6
src/layout/components/UserInfo/src/UserInfo.vue

@ -56,9 +56,9 @@ const toDocument = () => {
<template>
<ElDropdown class="custom-hover" :class="prefixCls" trigger="click">
<div class="flex items-center">
<ElAvatar :src="avatar" alt="" class="w-[calc(var(--logo-height)-25px)] rounded-[50%]" />
<span class="pl-[5px] text-14px text-[var(--top-header-text-color)] <lg:hidden">
<div class="flex items-center gap-4px">
<ElAvatar :src="avatar" alt="" :size="32" class=" rounded-[50%]" />
<span class="text-14px text-[var(--top-header-text-color)] <lg:hidden">
{{ realName }}
</span>
</div>

48
src/layout/components/useRenderLayout.tsx

@ -8,6 +8,7 @@ import AppView from './AppView.vue'
import ToolHeader from './ToolHeader.vue'
import { ElScrollbar } from 'element-plus'
import { useDesign } from '@/hooks/web/useDesign'
import { BackOperation } from '@/layout/components/BackOperation'
const { getPrefixCls } = useDesign()
@ -40,20 +41,10 @@ export const useRenderLayout = () => {
return (
<>
<div class={['absolute top-0 left-0 h-full', { '!fixed z-3000': mobile.value }]}>
{logo.value ? (
<Logo
class={[
'bg-[var(--left-menu-bg-color)] relative',
{
'!pl-0': mobile.value && collapse.value,
'w-[var(--left-menu-min-width)]': appStore.getCollapse,
'w-[var(--left-menu-max-width)]': !appStore.getCollapse
}
]}
style="transition: all var(--transition-time-02);"
></Logo>
) : undefined}
<Menu class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value },'layout-border__right']}></Menu>
{logo.value ? <Logo></Logo> : undefined}
<Menu
class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }, 'layout-border__right']}
></Menu>
</div>
<div
class={[
@ -80,30 +71,13 @@ export const useRenderLayout = () => {
]}
>
<div
class={[
{
'fixed top-0 left-0 z-10': fixedHeader.value,
'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)]':
collapse.value && fixedHeader.value && !mobile.value,
'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)]':
!collapse.value && fixedHeader.value && !mobile.value,
'!w-full !left-0': mobile.value
}
]}
style="transition: all var(--transition-time-02);"
class="fixed top-0 left-0 z-10 w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)] layout-border__bottom bg-#fff flex justify-between items-center"
style="transition: all var(--transition-time-02);padding:16px 20px"
>
<ToolHeader
class={[
'bg-[var(--top-header-bg-color)]',
{
'layout-border__bottom': !tagsView.value
}
]}
></ToolHeader>
{tagsView.value ? (
<TagsView class="layout-border__top layout-border__bottom"></TagsView>
) : undefined}
<div>
<BackOperation />
</div>
<ToolHeader></ToolHeader>
</div>
<AppView></AppView>

2
src/styles/var.css

@ -19,7 +19,7 @@
/* left menu end */
/* logo start */
--logo-height: 50px;
--logo-height: 64px;
--logo-title-text-color: #fff;
/* logo end */

2
src/views/task/createEnterprise.vue

@ -331,7 +331,7 @@ defineExpose({ open })
// ... ...
.search-form {
background-color: #fff;
padding: 20px 20px 0px 20px;
padding: 20px 20px 0 20px;
border-radius: 4px;
position: relative;
margin: 0 20px; // margin

Loading…
Cancel
Save