固定定位 z-index iconfont的使用 043

本文深入探讨CSS中固定定位的特性及其对元素层级的影响,包括z-index的使用原则,以及如何利用固定定位创建如导航栏等常用网页组件。同时,介绍了iconfont的使用方法和注意事项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

固定定位 z-index iconfont的使用 043

固定定位  现象 脱标 提升层级  将盒子固定住 

  参考点 浏览器的左上角 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        body{
            padding-top: 80px;
        }

        .header{
            width: 100%;
            height: 80px;
            background-color: red;
            /*固定定位*/
            position: fixed;
            top: 0;
            left: 0;
        }


    </style>
</head>
<body style="height: 2000px">
    <div class="header"></div>
    <p>I am alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
</body>
</html>

reset.css(重置样式)  直接引用就行

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
View Code

回到顶部案例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .backTop{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: black;
            position: fixed;
            right: 20px;
            bottom: 20px;
        }
        a{
            text-decoration: none;
        }
        .backTop a{

            color: #fff;
        }

    </style>
</head>
<body style="height: 2000px">
<div id="top"></div>
<div class="backTop">
    <!--阻止a标签的默认事件-->
    <a href="javascript:void(0);">回到顶部</a>
</div>
<!--from xxx import ooo-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    // def $(str):
    //     .....
    // return 对象
    //
    // $()

    $('a').click(function(){
    //   业务逻辑

        $('body,html').animate({
            scrollTop:0
        },1000);

    })

</script>


</body>
</html>
View Code

z-index :有四大特征:

  与固定定位有关系 默认为0 越大表层级越高

  1 z-index值表示谁压着谁,数值大的压盖数值小的

  2 只有定位了的元素才能有z-index ,也即 不管线对定位 绝对定位 固定定位都可以使用z-index 浮动元素不能设置z-index

  3 z-index值没有单位 就是一个正整数 默认的是0如果都没有z-index值 那么谁写在HTML后面 谁在上面压着别人 定位了的元素 永远压着没有定位的元素

  4 从父现象 父亲怂了 儿子再牛逼也没有用

父子的z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father1,.father2{
            width: 400px;
            height: 400px;

        }
        /*父亲怂了  儿子再牛逼也没用*/
        .father1{
            background-color: red;
            position: absolute;
            z-index: 10;
        }
        .father2{
            background-color: green;
            position: absolute;
            z-index: 3;
        }
        .child1,.child2{
            width: 200px;
            height: 200px;

        }
        .child1{
            background-color: darkmagenta;
            position: absolute;
            top: 350px;
            left: 450px;
            z-index: 5;
        }
        .child2{
            background-color: #ff6700;
            position: absolute;
            top: 350px;
            left: 420px;
            z-index: 10000;
        }

    </style>
</head>
<body>
    <div class="father1">
        <div class="child1"></div>
    </div>
    <div class="father2">
        <div class="child2"></div>
    </div>

</body>
</html>
View Code

 

 

 

iconfont 的使用 

iconfont

http://www.iconfont.cn/

IconFont 图标

unicode是字体在网页端最原始的应用方式,特点是:

兼容性最好,支持ie6+,及所有现代浏览器。

支持按字体的方式去动态调整图标大小,颜色等等。

但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去

色。

注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用

symbol的引用方式

unicode使用步骤如下:

第一步:拷贝项目下面生成的font-face

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
  url('iconfont.woff') format('woff'),
  url('iconfont.ttf') format('truetype'),
  url('iconfont.svg#iconfont') format('svg');
}

 

第二步:定义使用iconfont的样式

.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

 

第三步:挑选相应图标并获取字体编码,应用于页面

    <i class="iconfont">&#x33;</i>

 

"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。

  

 

固定定位
固定定位的现象
  • 脱标

  • 提升层级

  • 页面内容一多,盒子固定住

参考点

​ 以浏览器的左上角

固定导航栏
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <link rel="stylesheet" href="./css/reset.css">
   <style>
       body{
           padding-top: 80px;
      }

       .header{
           width: 100%;
           height: 80px;
           background-color: red;
           /*固定定位*/
           position: fixed;
           top: 0;
           left: 0;
           /*提升层级*/
           z-index: 99999;
      }
       .active{
           position: relative;
      }


   </style>
</head>
<body style="height: 2000px">
   <div class="header"></div>
   <p>我是alex</p>
   <p>alex</p>
   <p>alex</p>
   <p>alex</p>
   <p>alex</p>
   <p>alex</p>
   <p>alex</p>
   <p>alex</p>
   <p>alex</p>
   <p>alex</p>
   <p>alex</p>
   <p class="active">alex</p>

</body>
</html>
回到顶部

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <link rel="stylesheet" href="./css/reset.css">
   <style>
       .backTop{
           width: 100px;
           height: 100px;
           line-height: 100px;
           text-align: center;
           background-color: black;
           position: fixed;
           right: 20px;
           bottom: 20px;
      }
       a{
           text-decoration: none;
      }
       .backTop a{

           color: #fff;
      }

   </style>
</head>
<body style="height: 2000px">
<div id="top"></div>
<div class="backTop">
   <!--阻止a标签的默认事件-->
   <a href="javascript:void(0);">回到顶部</a>
</div>
<!--from xxx import ooo-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
   // def $(str):
   //     .....
   // return 对象
   //
   // $()

   $('a').click(function(){
   //   业务逻辑

       $('body,html').animate({
           scrollTop:0
      },1000);
     
  })

</script>


</body>
</html>

 

posted @ 2018-11-18 13:03 你没有想象的那么重要 阅读( ...) 评论( ...) 编辑 收藏
<template> <!-- <view class="modal-overlay" @tap.stop="hideModal" v-if="visible" @touchmove.stop.prevent> --> <view class="modal-overlay" @tap.stop="hideModal" @touchmove.stop.prevent> <view class="modal-content"> <swiper class="swiper" :class="advData.value.length==1?'on':''" :autoplay="autoplay" :duration="duration" @change="stopChange" v-if="advData.type == 'pic' && advData.value.length"> <swiper-item v-for="(item,index) in advData.value" :key="index" @click="jump(item.link)"> <!-- <view class="swiper-item"> --> <view class="swiper-item-img"> <image :src="item.img" mode="aspectFit"></image> </view> <!-- </view> --> </swiper-item> </swiper> <text class="iconfont icon-ic_close1 fs-40 text--w111-fff"></text> </view> </view> </template> <style scoped> .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; height: 100%; justify-content: center; align-items: center; z-index: 1000; -webkit-overflow-scrolling: touch; /* 禁用 iOS 弹性滚动 */ } .modal-content { background-size: contain; background-repeat: no-repeat; position: fixed; top: 45%; left: 50%; transform: translate(-50%, -50%); height: 50%; z-index: 1001; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .modal-content-mobile { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 30%; background-size: cover; background-position: center; z-index: 1001; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10rpx; } .modal-footer1 { position: relative; top: 32%; transform: translate(-50%, -50%); margin-left: 48%; align-items: center; } .modal-footer2 { position: relative; top: 28%; margin-left: 50%; transform: translate(-50%, -50%); align-items: center; } .modal-footer3 { position: relative; top: 55%; margin-left: 50%; transform: translate(-50%, -50%); align-items: center; } .modal-body { font-size: 25rpx; position: relative; margin: 0 auto; top: 19%; width: 75%; align-items: center; } .modal-body-mobile { font-size: 35rpx; position: relative; margin: 0 auto; top: 35%; width: 80%; align-items: center; } .modal-body view { margin-top: 5%; justify-content: center; align-items: center; } .modal-body-mobile view { margin-top: 5%; justify-content: center; align-items: center; } input { justify-content: center; margin-top: 3%; width: 80%; background: #FFFFFF; border-radius: 8px 8px 8px 8px; padding: 14rpx 32rpx; font-size: 30rpx; } .swiper-item { height: 100%; text-align: center; position: relative; display: flex; align-items: flex-end; flex-direction: column-reverse } .jump-over { position: absolute; height: 325rpx; text-align: center; padding: 0 15rpx; font-weight: bold; z-index: 999; bottom: 20rpx; top: 50%; left: 50%; transform: translate(-50%, -50%); } .jump_img { position: absolute; bottom: 80rpx; left: 50%; transform: translateX(-50%); z-index: 1002; } .swiper-item { height: 100%; text-align: center; position: relative; display: flex; align-items: flex-end; flex-direction: column-reverse } .swiper-item-img { width: 60%; max-width: 800px; margin: 0 auto; height: 100%; position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .swiper-item-img image { width: 100%; height: 100%; object-fit: contain; } .modal-content { /* position: relative; */ width: 50vw; /* height: 60vh; */ /* max-width: 800px; */ /* display: flex; */ /* flex-direction: column; */ /* align-items: center; */ /* justify-content: center; */ } .swiper { width: 100%; height: 100%; } .icon-ic_close1 { position: absolute; z-index: 1002; } </style> 修改代码:要求:这是一个uniapp的开屏弹窗 根据代码写出来css样式,关闭按钮要放在图片的下方并和图片保持间隔
06-14
<template> <div :class="['page-layout', wrapClass, isDark && 'theme-dark']"> <div :class="['page-layout--placeholer', breadMenuHidden && 'no-nav']"></div> <TopHeader class="page-layout__header" /> <SideBar :menus class="page-layout__side" /> <div :class="['page-layout__main', { 'no-nav': breadMenuHidden }]"> <div v-if="!breadMenuHidden" class="page-layout__main-nav" > <BreadMenu /> </div> <div class="page-layout__main-view" :class="{ 'is-mobile': appStore.$state.isMobile }" > <div v-if="pageTitle.visible" class="page-layout__main-view-title common-page-title" > <span> {{ pageTitle.label }}</span> <a-button v-if="route?.meta?.backBtn" type="primary" @click="handleBack" >{{ btnLabel }}</a-button > </div> <RouterView v-slot="{ Component }"> <KeepAlive :include="cacheViews"> <component :is="Component" :key="routeKey" /> </KeepAlive> </RouterView> </div> <!-- TODO: 底部有固定定位元素<MainFixedBar />时占位用 勿删! --> <div class="page-bar__fixed-placeholer"></div> </div> </div> </template> <script setup lang="ts"> import { computed, onMounted, ref, h, watchEffect, watch, nextTick } from "vue" import { useAppStore, useMsgStore, useUserStore, useSysConfigStore } from "@/stores" import TopHeader from "./components/TopHeader.vue" import SideBar from "./components/side-bar/index.vue" import BreadMenu from "./components/BreadMenu.vue" import { onBeforeRouteLeave, useRoute, useRouter } from "vue-router" import { Button, Notification, type NotificationReturn } from "@arco-design/web-vue" import type { RecordModel as MessageData } from "@/api/message/api-type" import { IconRight } from "@arco-design/web-vue/es/icon" import { ORDER_TRANSFER } from "@/router/order" import { getSystemConfig } from "@/api/system/index.serv" import { to } from "await-to-js" defineOptions({ name: "Layout" }) const route = useRoute() const router = useRouter() const appStore = useAppStore() const userStore = useUserStore() const msgStore = useMsgStore() const sysConfigStore = useSysConfigStore() const orderMsgReturn = ref<NotificationReturn>() const breadMenuHidden = ref(false) const btnLabel = computed(() => { return window.opener ? "关闭" : route?.meta.backBtn?.label || "关闭" }) const cacheViews = computed(() => appStore.routeViewCache) const msgId = computed(() => msgStore.msgNoticeId) const pageTitle = computed(() => { const { navTitle, title, titleVisible } = route.meta ?? {} return { visible: title && titleVisible !== false, label: navTitle || title } }) const routeKey = computed(() => { const { name, query = {} } = route if (Object.keys(query).length) { return `${name as string}-${JSON.stringify(route.query)}` } return name as string }) const wrapClass = computed(() => { return appStore.menuStatus ? "menu-collapse" : "menu-expend" }) const isDark = computed(() => appStore.theme === "dark") const menus = computed(() => userStore.accessMenu ?? []) const menuMap = computed(() => userStore.accessMenuMap) const doOrderLoop = computed(() => { return [...menuMap.value.values()].some((list) => { const loopData = list?.meta?.doLoop if (!loopData) return false const { code, dependMenu } = loopData if (code === "order") { if (!dependMenu) return true return menuMap.value.has(dependMenu) } else { return false } }) }) watchEffect(() => { breadMenuHidden.value = route.meta?.breadMenuVisible === false }) const goToTransfer = (data: MessageData) => { router .push({ name: ORDER_TRANSFER.name }) .then((res) => { Notification.remove(msgId.value) }) } const showOrderMsg = (data: MessageData) => { return Notification.info({ icon: () => h("span", { class: ["iconfont icon-file"] }), title: "您有一个订单需要进行调度", content: data.msg_body, id: msgId.value, closable: true, duration: 0, class: "order-msg__tip", position: "bottomRight", footer: () => h( Button, { type: "text", onClick: () => goToTransfer(data) }, ["立即前往", h(IconRight)] ) }) } watch( [() => msgStore.msgTargetId, () => sysConfigStore.orderMessageConfig.orderNoticeSwitch as number], async ([id, orderNoticeSwitch]: [number | undefined, number]) => { await nextTick() if (id && msgStore.unreadMsgLatest && orderNoticeSwitch === 1) { const msgReturn = showOrderMsg(msgStore.unreadMsgLatest) orderMsgReturn.value ||= msgReturn } else { Notification.remove(msgId.value) } }, { immediate: true } ) const handleBack = () => { if (window.opener) { window.close() } else { const routeTo = route.meta?.backBtn?.routeTo if (routeTo) { router.replace({ name: routeTo }) } } } onMounted(async () => { msgStore.clearLoopTimer() const [err, res] = await to(getSystemConfig()) if (!err && res) { sysConfigStore.setUpdateConfig({ id: res.data.id, orderNoticeSwitch: res.data.orderNoticeSwitch }) doOrderLoop.value && msgStore.messageAndCountLoop() } }) onBeforeRouteLeave(() => { Notification.remove(msgId.value) msgStore.clearLoopTimer() }) </script> <style lang="scss" scoped> @import "../assets/styles/mixin.scss"; $--layout-transition-all: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); $--layout-transition-margin: margin 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); $--layout-transition-left: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); .page-layout { height: 100%; display: flex; flex-direction: column; overflow: hidden; &--placeholer { flex: none; height: calc(var(--page-header-height) + var(--page-breadmenu-height)); transition: none; &.no-nav { height: var(--page-header-height); } } &__header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--page-max-z-index); flex: none; padding: 0 16px; height: var(--page-header-height); border-bottom: var(--color-border-2) 1px solid; background-color: #fff; transition: $--layout-transition-all; } &__side { position: fixed; z-index: var(--page-max-z-index); left: 0; top: var(--page-header-height); bottom: 0; display: flex; flex-direction: column; :deep(.arco-menu-inner) { flex: 1; margin-bottom: var(--menu-collapse-width); } :deep(.arco-menu-collapse-button) { position: absolute; } & + .page-layout__main { margin-left: var(--menu-expand-width); .page-layout__main-nav { left: var(--menu-expand-width); } } &.arco-menu-collapsed + .page-layout__main { margin-left: var(--menu-collapse-width); .page-layout__main-nav { left: var(--menu-collapse-width); } } } &__main { padding: var(--page-padding-gutter); padding-top: 0; transition: $--layout-transition-margin; height: 100%; display: flex; flex-direction: column; overflow-y: auto; @include scrollbar(8px, transparent, var(--color-fill-4)); &.no-nav { padding-top: var(--page-padding-gutter); } &-nav { flex: none; display: flex; align-items: center; background: var(--page-back-color); position: fixed; z-index: var(--page-max-z-index); top: var(--page-header-height); left: 0; right: 0; height: var(--page-breadmenu-height); padding: 0 var(--page-padding-gutter); transition: $--layout-transition-left; } &-content { position: relative; height: 100%; display: flex; flex-direction: column; padding: var(--page-padding-gutter); padding-top: --page-breadmenu-height; background: #f9f9f9; flex: 1; // margin-left: var(--menu-expand-width); // transition: margin-left 0.28s; // transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); &.no-nav { padding-top: var(--page-padding-gutter); } } &-view { flex: 1; display: flex; flex-direction: column; background: #fff; border-radius: 4px; padding: var(--page-padding-gutter); // > :last-child:not(.common-page-title) { // flex: 1; // display: flex; // flex-direction: column; // } &-title { display: flex; justify-content: space-between; align-items: center; } } } &.theme-dark { .page-layout__header, .page-layout__side { background: var(--color-text-2); } } } </style> <style lang="scss"> .order-msg__tip { .arco-notification-title { font-weight: 600; } .arco-notification-left { padding-right: 5px; .arco-notification-icon { font-size: 16px; color: var(--color-text-2); } } .arco-notification-content { margin-top: 6px; } } </style>
06-26
import IconFont from '@components/Iconfont'; import { getToolRecentUseKeys } from '@utils/common.ts'; import { isMobile } from '@wander/base-utils'; import type { MenuProps } from 'antd'; import { Menu } from 'antd'; import classNames from 'classnames/bind'; import { floor } from 'lodash'; import { useEffect, useState } from 'react'; import { NavLink, useLocation, useNavigate } from 'react-router-dom'; import { ADVANCE_DRAW_RECOMMEND_CATEGORY_CONFIG_KEY } from '@/constant.ts'; import { aiMenuList } from '@/pages/ToolList/pc/components/Menu/config.tsx'; import { useStore } from '@/store/createStore'; import styles from './index.module.less'; const cx = classNames.bind(styles); // 每个item高度 48 是item高度 上下还有4px间距 margin 会重叠 只需要加1个4px就够了 const MENU_ITEM_HEIGHT = 52; // 默认菜单高度 48 每个item 10 默认有10个必须显示 const DEFAULT_MENU_HEIGHT = MENU_ITEM_HEIGHT * 5; // header菜单栏高度 const HEADER_LAYOUT_HEIGHT = 80; // 偏差值 避免高度计算不准确 const OVERSCAN_VALUE = 16; const AiPageMenu = () => { const navigate = useNavigate(); const location = useLocation(); const [selectedKeys, setSelectedKeys] = useState(['home']); const toolList = useStore((state) => { return (state.functionSortMap['DRAW_SIDEBAR'] || []).map((value) => { return state.functionList.find((value1) => value1.key === value)!; }); }); // 最近使用工具列表 const { recentlyToolList } = useStore(() => { // 使用次数配置 const recentUseKeys: string[] = getToolRecentUseKeys(); return { recentlyToolList: recentUseKeys .map((value) => { return toolList.filter((value1) => value1.routeKey === value)?.[0]; }) .filter(Boolean) .slice(0, 5), }; }); console.log('toolList', toolList); console.log('recentlyToolList', recentlyToolList); // 推荐一级类目列表 const recommendCategoryList = useStore((state) => { return state.advanceDrawFirstCategoryList.filter((value) => { return (state.initConfigs[ADVANCE_DRAW_RECOMMEND_CATEGORY_CONFIG_KEY] || []).includes( value.mid, ); }); }); // 记录收起菜单位置 的索引 初始值给4 避免闪烁太严重 const [collapseToolIndex, setCollapseToolIndex] = useState(4); // 记录视口高度 const [innerHeight, setInnerHeight] = useState(0); // 工具是否已展开 const [toolCollapsed, setToolCollapsed] = useState(false); useEffect(() => { const handleResize = () => { setInnerHeight(window.innerHeight); }; handleResize(); window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); }; }, []); useEffect(() => { // 计算工具显示个数 if (!isMobile() && !toolCollapsed) { // 工具剩余可占位高度 let toolContainerHeight = innerHeight - DEFAULT_MENU_HEIGHT - HEADER_LAYOUT_HEIGHT - OVERSCAN_VALUE; if (recentlyToolList.length) { toolContainerHeight = toolContainerHeight - MENU_ITEM_HEIGHT * (recentlyToolList.length + 1); } // 显示工具个数 const showToolCount = floor(toolContainerHeight / MENU_ITEM_HEIGHT); // 留一个查看更多的位置 setCollapseToolIndex(showToolCount - 1); } }, [recentlyToolList.length, innerHeight, toolCollapsed, toolList]); useEffect(() => { const currentItem = aiMenuList.find((value) => value.route === location.pathname); setSelectedKeys([currentItem?.key || 'home']); }, [location.pathname]); const onSelect: MenuProps['onSelect'] = ({ key, selectedKeys: newSelectedKeys }) => { setSelectedKeys(newSelectedKeys); if (key === 'toolMore') { // 查看更多AI工具 setToolCollapsed(true); return; } if (key === 'collapseToolMenu') { // 收起更多AI工具 setToolCollapsed(false); return; } }; return ( <div className={cx('menu_container')}> <Menu theme="dark" selectedKeys={selectedKeys} defaultOpenKeys={['commonTool', 'tools']} mode="inline" items={aiMenuList.map((value) => { if (value.key === 'draw') { return { label: value.labelKey, key: value.key, icon: value.icon, children: recommendCategoryList.map((value1) => ({ label: ( <div onClick={() => { navigate('/ai/advance_draw/operate', { state: { record: { selectMids: [value1.mid], }, }, }); }} > {value1.name} </div> ), key: value1.parentId, })), }; } if (value.key === 'commonTool') { if (!recentlyToolList.length) { return null; } return { label: value.labelKey, key: value.key, icon: value.icon, children: recentlyToolList.map((value1) => { return { label: <NavLink to={value1.route}>{value1.shortTitle || value1.title}</NavLink>, // key值和AI工具重复了 key: `${value.key}${value1.key}`, }; }), }; } if (value.key === 'tools') { return { label: value.labelKey, key: value.key, icon: value.icon, children: [ ...(toolCollapsed ? toolList : toolList.slice(0, collapseToolIndex)).map( (value) => { return { label: <NavLink to={value.route}>{value.shortTitle || value.title}</NavLink>, key: value.key, }; }, ), toolCollapsed ? { label: ( <span> 收起 <IconFont type="icon-arrow-up" style={{ marginLeft: 4, fontSize: 12 }} /> </span> ), key: 'collapseToolMenu', } : { label: ( <span> 查看更多 <IconFont type="icon-arrow-bottom" style={{ marginLeft: 4, fontSize: 12 }} /> </span> ), key: 'toolMore', }, ], }; } return { label: value.route ? ( <NavLink to={value.route}>{value.labelKey}</NavLink> ) : ( value.labelKey ), key: value.key, icon: value.icon, }; })} onSelect={onSelect} /> </div> ); }; export default AiPageMenu; .menu_container { position: fixed; z-index: 99; width: 150px; height: 100vh; overflow-y: scroll; user-select: none; background: #2f3c48; transition: all 0.3s; scrollbar-gutter: stable; &.en { width: 232px; } &::-webkit-scrollbar { z-index: 999; width: 6px; background: transparent; border-radius: 3px; } &::-webkit-scrollbar-track { border-radius: 3px; } &::-webkit-scrollbar-thumb { background-color: rgb(255 255 255 / 30%); border-radius: 3px; transition: all 0.5s; } :global { .ant-menu-dark { background: #2f3c48; } .ant-menu-item, .ant-menu-inline.ant-menu-root .ant-menu-submenu-title { width: 100%; height: 48px; padding-right: 0; padding-left: 12px !important; margin-inline: 0; line-height: 48px; color: #fff; border-radius: 0; .ant-menu-title-content { line-height: 48px; } } .ant-menu-item.ant-menu-item-only-child { padding-left: 36px !important; color: rgb(255 255 255 / 60%); } .ant-menu .ant-menu-submenu-arrow { inset-inline-end: 8px; } .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected { background: rgb(255 255 255 / 10%); &::after { position: absolute; top: 25%; left: calc(100% - 2px); width: 2px; height: 50%; content: ''; background: #fff; } } .ant-menu-dark.ant-menu-inline .ant-menu-sub.ant-menu-inline { background: transparent; } } } import IconFont from '@components/Iconfont'; export const aiMenuList = [ { labelKey: '首页', route: '/', key: 'home', icon: <IconFont type="icon-home" />, }, { labelKey: '常用工具', key: 'commonTool', icon: <IconFont type="icon-common-tool" />, }, { labelKey: 'AI绘图', key: 'draw', icon: <IconFont type="icon-ai-draw" />, }, { labelKey: 'AI工具', key: 'tools', icon: <IconFont type="icon-ai-tool" />, }, { labelKey: '我的创作', route: '/user/draw/records', key: 'createRecord', icon: <IconFont type="icon-create-record" />, }, ]; 点击查看更多后 我的创作会被隐藏 看不到除非收起AI工具
最新发布
07-10
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值