style: 💄 修改了一些样式

This commit is contained in:
2025-08-26 18:18:44 +08:00
parent 4f780816c6
commit 5efe7f6a8a
8 changed files with 44 additions and 30 deletions

View File

@@ -183,7 +183,8 @@
}
.sidebar-retract-wrapper {
width: 95px;
width: 84px;
.sidebar-title {
> img {
margin: 0;
@@ -197,12 +198,21 @@
width: 0;
}
}
.user-info {
margin-bottom: 41px;
.user-info-wrapper {
background-color: transparent;
width: 100%;
justify-content: center;
.user-avatar {
margin-right: 0;
width: 40px;
height: 40px;
}
}
.visitor-count {
display: none;
}
.sidebar-menu {
.sidebar-menu-title {
text-align: center;

View File

@@ -3,6 +3,7 @@ import { Statistic } from "@arco-design/web-react";
import { useSelector } from "react-redux";
import IconFont from "@/components/IconFont";
import ICON from "@/assets/images/Sidebar/sidebar_icon.png";
import ICONRETRACT from "@/assets/images/Sidebar/logo.png";
import BTNICON from "@/assets/images/Sidebar/btn_icon.png";
import routes from "@/routes";
import "./index.css";
@@ -29,7 +30,7 @@ const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
}`}
>
<div className="sidebar-title">
<img src={ICON} alt="icon" />
<img src={isCollapsed ? ICON : ICONRETRACT} alt="icon" />
</div>
<div className="user-info-wrapper">
<img
@@ -37,10 +38,12 @@ const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
className="user-avatar"
src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
/>
<div className="user-info">
<span className="user-name">{studentInfo?.realName}</span>
<span className="user-id">学号{studentInfo?.id}</span>
</div>
{isCollapsed && (
<div className="user-info">
<span className="user-name">{studentInfo?.realName}</span>
<span className="user-id">学号{studentInfo?.id}</span>
</div>
)}
</div>
<Statistic
className="visitor-count"

View File

@@ -1,10 +1,10 @@
.stage-progress-wrapper {
width: 1200px;
width: 100%;
height: 96px;
display: flex;
box-sizing: border-box;
padding-left: 20px;
justify-content: flex-start;
padding: 0 20px;
justify-content: space-around;
align-items: center;
background-color: #fff;
@@ -17,7 +17,6 @@
height: 64px;
background-size: 100% 100%;
margin-right: -10px;
background-color: #f4f7f9;
background-image: url("@/assets/images/StageProgress/step1_active.png");
background-size: 100%;
color: #ffffff;

View File

@@ -12,7 +12,7 @@ const StageProgress = () => {
return (
<ul className="stage-progress-wrapper">
<li className="stage-progress-item1">
<span className="stage-progress-item-step stage-progress-item-step-active ">
<span className="stage-progress-item-step stage-progress-item-step-active">
step1
</span>
<span className="stage-progress-item-text stage-progress-item-text-active">

View File

@@ -10,11 +10,13 @@
/* 统一布局系统 */
.unified-profile-layout {
box-sizing: border-box;
padding: 20px;
width: 100%;
height: 805px;
box-sizing: border-box;
padding: 0 20px;
display: flex;
justify-content: space-between;
margin-top: 20px;
.unified-profile-left {
width: 360px;

View File

@@ -1,12 +1,12 @@
.user-portfolio-page {
.project-library-page {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 20px;
position: relative;
.user-portfolio-wrapper {
width: 1120px;
.project-library-wrapper {
width: 100%;
height: 790px;
background-color: #fff;
border-radius: 8px;
@@ -16,7 +16,7 @@
display: flex;
flex-direction: column;
.user-portfolio-search-area {
.project-library-search-area {
width: 100%;
height: 36px;
@@ -33,7 +33,7 @@
}
}
}
.user-portfolio-list {
.project-library-list {
overflow-y: auto;
box-sizing: border-box;
display: flex;
@@ -42,11 +42,11 @@
flex-wrap: wrap;
padding: 20px 0;
.user-portfolio-item:nth-child(3n) {
.project-library-item:nth-child(3n) {
margin-right: 0;
}
.user-portfolio-item {
.project-library-item {
flex-shrink: 0;
width: 340px;
height: 82px;
@@ -63,7 +63,7 @@
align-items: flex-start;
flex-direction: column;
.user-portfolio-item-title {
.project-library-item-title {
width: 100%;
border: 1px solid #2c7aff;
background-color: #e8f3ff;

View File

@@ -68,9 +68,9 @@ const ProjectLibrary = () => {
};
return (
<div className="user-portfolio-page">
<div className="user-portfolio-wrapper">
<div className="user-portfolio-search-area">
<div className="project-library-page">
<div className="project-library-wrapper">
<div className="project-library-search-area">
<InputSearch
className="ser-portfolio-search"
onSearch={onSearch}
@@ -81,11 +81,11 @@ const ProjectLibrary = () => {
loadMore={fetchProjects}
hasMore={hasMore}
empty={projectList.length === 0}
className="user-portfolio-list"
className="project-library-list"
>
{projectList.map((item) => (
<li className="user-portfolio-item" key={item.id}>
<p className="user-portfolio-item-title">{item.description}</p>
<li className="project-library-item" key={item.id}>
<p className="project-library-item-title">{item.description}</p>
<div>
<p>{item.name}</p>
<span onClick={() => handleProjectClick(item)}>详情 &gt;</span>

View File

@@ -80,7 +80,7 @@
}
.resume-interview-content-item-wrapper {
width: 1120px;
width: 100%;
height: 326px;
box-sizing: border-box;
background-color: #ffffff;