1、利用viewport完成PC端页面响应式布局，其他端还未适配 2、基本完成语言大模型页面布局及部分功能 3、实现对于侧边栏图标在首页与其他页面时不...

zhaowei

2024-08-02 15792ad8baea4ab886dbfc58009847f26de45df8

 src/components/menu/SideMenu.vue

@@ -8,17 +8,16 @@

    <div id="menu-container">
      <logo/>
      <div class="nav-split-line"></div>
      <div class="nav-split-line" :style="{backgroundColor:$route.meta.title==='首页'?'#E5E5E5':'#585258'}"></div>
      <s-menu
        :collapsed="collapsed"
        :menu="menus"
        :theme="theme"
        theme="light"
        @select="onSelect"
        @updateMenuTitle="onUpdateMenuTitle"
        :mode="mode"
        :style="smenuStyle">
      </s-menu>
      <div class="nav-split-line"></div>
      <div class="nav-split-line" :style="{backgroundColor:$route.meta.title==='首页'?'#E5E5E5':'#585258'}"></div>
      <div class="avatar">
        <a-avatar :src="getAvatar()" @click="$router.push('/user/UserManagement')"/>
      </div>
@@ -52,12 +51,12 @@

  export default {
    name: 'SideMenu',
    components: {  Logo, SMenu },
    components: { Logo, SMenu },
    mixins: [mixin, mixinDevice],
    data() {
      return {
        normalCollapsedWidth: 100,
        collapsedWidth: 100
        normalCollapsedWidth: '5.2vw',
        collapsedWidth: '5.2vw'
      }
    },
    props: {
@@ -129,6 +128,7 @@
  /* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
  .sider {
    @scrollBarSize: 10px;
    background: transparent!important;

    #menu-container {
      background-color: rgba(255, 255, 255, .34);
@@ -143,6 +143,7 @@
      /deep/ .ant-menu {
        background-color: transparent;
        width: 60px;
        border: none;
        /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
        &::-webkit-scrollbar {
          width: @scrollBarSize;
@@ -188,15 +189,29 @@

      /deep/ .ant-menu-inline-collapsed > .ant-menu-item {
        padding: 0 !important;
        border-radius: 12px;

        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 59px;
        margin: 0;

        a {
          text-align: center;
          border-radius: 12px;
        }
        .anticon {
          font-size: 25px;
          display: flex;
          justify-content: center;
          align-items: center;

          .anticon {
            font-size: 30px;
            line-height: 0;
            transition: all .3s ease-in-out;
          }

          & > span {
            display: none;
          }
        }

        /*导航栏叶子菜单按钮被选中后样式*/
@@ -209,9 +224,46 @@

        /*导航栏按钮被激活后样式*/
        &.ant-menu-item-active {
          background-color: #E7EBF6;
          background-color: rgba(0, 0, 0, .2);

          a {
            color: rgba(0, 0, 0, 0.65)
          }
          .anticon {
            transform: scale(1.1);
          }
        }
      }

      /deep/ .ant-menu-inline-collapsed > .ant-menu-submenu {
        display: flex;
        justify-content: center;
        align-items: center;

        .ant-menu-submenu-title {
          padding: 0 !important;
          width: 100%;
          height: 59px;
          border-radius: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0;

          & > span {
            display: flex;
            justify-content: center;
            align-items: center;

            .anticon {
              font-size: 30px;
              line-height: 0;
              transition: all .3s ease-in-out;
            }

            span {
              display: none;
            }
          }
        }
      }
@@ -224,25 +276,15 @@
      /*导航栏非叶子菜单按钮被激活后样式*/
      /deep/ .ant-menu-vertical .ant-menu-submenu-active {
        .ant-menu-submenu-title {
          background-color: #E7EBF6;
          background-color: rgba(0, 0, 0, .2);
          /*transform: scale(1.2);*/
          color: rgba(0, 0, 0, 0.65);
        }
      }

      /deep/ .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
        padding: 0 !important;
        text-align: center;
        border-radius: 12px;

        .anticon {
          font-size: 25px;
        }
      }

      .nav-split-line {
        width: 50px;
        height: 1px;
        background-color: #E5E5E5;
        border-radius: 12px;
        cursor: pointer;
        margin: 15px auto
@@ -250,9 +292,16 @@

      .avatar {
        text-align: center;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;

        /deep/ .ant-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          line-height: 40px;
        }
      }
    }
@@ -267,10 +316,11 @@
      cursor: pointer;
      transition: all .2s ease;
      opacity: 0;
      z-index: 99;

      #response-line-0, #response-line-1 {
        width: 4px;
        height: 13px;
        height: 14px;
        background-color: #c6c6c6;
        left: 4px;
        position: absolute;