登录页面，样式优化

xiangpei

2025-03-28 3c5470a29757afee973e652edddc35bfdd64d1ed

 src/views/Index.vue

@@ -1,5 +1,15 @@
<template>
  <div class="index">
    <div class="common-op">
      <el-dropdown @command="handleCommand" trigger="click">
        <span class="el-dropdown-link">
          张三<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="left">
      <div class="logo">
        <img style="width: 60px;height: 60px" src="@/assets/img/logo.png"/>
@@ -8,7 +18,7 @@
        <div class="add-chat">
          <i class="el-icon-plus"/>新建对话
        </div>
        <div :class="{tab: true, activeTab: activeTab === 2}" style="margin-top: 2px" @click="changeTab(2)">
        <div :class="{tab: true, activeTab: this.$router.currentRoute.path == '/knowledge'}" style="margin-top: 2px" @click="changeTab()">
          <svg t="1743057471863" class="icon" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3047" width="16" height="16">
            <path fill="grey" d="M32.2592 294.4l409.6 211.2c19.2 12.8 44.8 12.8 70.4 12.8s51.2-6.4 70.4-12.8l409.6-211.2c38.4-19.2 38.4-51.2 0-70.4l-409.6-211.2c-19.2-6.4-44.8-12.8-70.4-12.8s-51.2 6.4-70.4 12.8l-409.6 211.2c-38.4 19.2-38.4 51.2 0 70.4z m441.6-204.8c12.8-6.4 25.6-6.4 38.4-6.4s32 6.4 38.4 6.4l339.2 172.8-339.2 172.8c-6.4 6.4-19.2 6.4-38.4 6.4-12.8 0-32-6.4-38.4-6.4l-339.2-172.8 339.2-172.8z" p-id="3048"></path>
            <path fill="grey" d="M19.4592 550.4l403.2 204.8c25.6 12.8 57.6 19.2 89.6 19.2s64-6.4 89.6-19.2l403.2-204.8c12.8-6.4 25.6-32 12.8-51.2s-32-32-51.2-19.2l-403.2 204.8c-32 12.8-83.2 12.8-108.8 0l-403.2-204.8c-12.8-12.8-25.6-12.8-38.4 0-6.4 12.8-12.8 25.6-12.8 38.4 0 19.2 6.4 25.6 19.2 32z" p-id="3049"></path>
@@ -99,19 +109,21 @@
    >
        <el-input v-model="rename"/>
      <span slot="footer" class="dialog-footer">
          <el-button @click="renameSubmit">确定</el-button>
          <el-button @click="renameSubmit" size="medium">确定</el-button>
        </span>
    </el-dialog>
    <login/>
  </div>
</template>

<script>
import SessionConfig from "@/components/SessionConfig";
import Login from "@/components/Login";

export default {
  name: "IndexView",
  components: {
    SessionConfig
    SessionConfig, Login
  },
  data() {
    return {
@@ -138,7 +150,6 @@
        },
      ],
      fileList: [],
      activeTab: 0,
      activeSession: null,
      currentSession: null,
      activeSetting: 'util',
@@ -163,7 +174,7 @@
    }
  },
  mounted() {
    this.changeRoute(this.activeTab)

  },
  methods: {
    sessionChange(session, index) {
@@ -226,20 +237,11 @@
    tabSelect(tab, event) {
      console.log(tab, event)
    },
    changeTab(index) {
      if (index !== this.activeTab) {
        this.activeTab = index
        this.changeRoute(index)
      }
    },
    changeRoute(index) {
      console.log(this.$router.currentRoute.path, "路由")
      if ((index === 0 || index === 1) && this.$router.currentRoute.path !== "/chat") {
        this.$router.push("/chat")
      } else if (index === 2 && this.$router.currentRoute.path !== "/knowledge") {
    changeTab() {
      if (this.$router.currentRoute.path !== "/knowledge") {
        this.$router.push("/knowledge")
      }
    }
    },
  }
}
</script>
@@ -247,13 +249,16 @@
<style scoped>
.index {
  display: flex;
  position: relative;
}
.left {
  width: 250px;
  height: calc(100vh - 20px);
  min-height: 600px;
  min-height: calc(100vh - 20px);
  height: calc(100vh);
  background-color: #f3f3f3;
  padding: 0px 40px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.right {
  width: 1600px;
@@ -347,6 +352,11 @@
  cursor: pointer;
  background-color: #e8e8e8;
}
.common-op {
  position: absolute;
  top: 20px;
  right: 50px;
}
.setting {
  margin-top: 20px;
}
@@ -357,4 +367,7 @@
::v-deep(.el-upload-dragger) {
  width: 250px !important;
}
::v-deep(.el-dialog) {
  border-radius: 16px!important;
}
</style>