diff --git a/src/assets/images/home/home-top.gif b/src/assets/images/home/home-top.gif new file mode 100644 index 0000000..6ab2fcc Binary files /dev/null and b/src/assets/images/home/home-top.gif differ diff --git a/src/assets/styles/auto.scss b/src/assets/styles/auto.scss index 76768b8..5961061 100644 --- a/src/assets/styles/auto.scss +++ b/src/assets/styles/auto.scss @@ -919,12 +919,14 @@ body:not(#_) { .w244{width: 2.44rem;} .w263{width: 2.63rem;} .w444{width: 4.44rem;} +.w706{width: 7.06rem;} .w1200{width:12rem} /*height*/ .h0{height: 0rem;} .h1{height: 0.01rem;} .h2{height: 0.02rem;} .h3{height: 0.03rem;} .h4{height: 0.04rem;} .h5{height: 0.05rem;} .h6{height: 0.06rem;} .h7{height: 0.07rem;} .h8{height: 0.08rem;} .h9{height: 0.09rem;} .h10{height: 0.1rem;} .h11{height: 0.11rem;} .h12{height: 0.12rem;} .h13{height: 0.13rem;} .h14{height: 0.14rem;} .h15{height: 0.15rem;} .h16{height: 0.16rem;} .h17{height: 0.17rem;} .h18{height: 0.18rem;} .h19{height: 0.19rem;} .h20{height: 0.2rem;} .h21{height: 0.21rem;} .h22{height: 0.22rem;} .h23{height: 0.23rem;} .h24{height: 0.24rem;} .h25{height: 0.25rem;} .h26{height: 0.26rem;} .h27{height: 0.27rem;} .h28{height: 0.28rem;} .h29{height: 0.29rem;} .h30{height: 0.3rem;} .h31{height: 0.31rem;} .h32{height: 0.32rem;} .h33{height: 0.33rem;} .h34{height: 0.34rem;} .h35{height: 0.35rem;} .h36{height: 0.36rem;} .h37{height: 0.37rem;} .h38{height: 0.38rem;} .h39{height: 0.39rem;} .h40{height: 0.4rem;} .h41{height: 0.41rem;} .h42{height: 0.42rem;} .h43{height: 0.43rem;} .h44{height: 0.44rem;} .h45{height: 0.45rem;} .h46{height: 0.46rem;} .h47{height: 0.47rem;} .h48{height: 0.48rem;} .h49{height: 0.49rem;} .h50{height: 0.5rem;} .h51{height: 0.51rem;} .h52{height: 0.52rem;} .h53{height: 0.53rem;} .h54{height: 0.54rem;} .h55{height: 0.55rem;} .h56{height: 0.56rem;} .h57{height: 0.57rem;} .h58{height: 0.58rem;} .h59{height: 0.59rem;} .h60{height: 0.6rem;} .h61{height: 0.61rem;} .h62{height: 0.62rem;} .h63{height: 0.63rem;} .h64{height: 0.64rem;} .h65{height: 0.65rem;} .h66{height: 0.66rem;} .h67{height: 0.67rem;} .h68{height: 0.68rem;} .h69{height: 0.69rem;} .h70{height: 0.7rem;} .h71{height: 0.71rem;} .h72{height: 0.72rem;} .h73{height: 0.73rem;} .h74{height: 0.74rem;} .h75{height: 0.75rem;} .h76{height: 0.76rem;} .h77{height: 0.77rem;} .h78{height: 0.78rem;} .h79{height: 0.79rem;} .h80{height: 0.8rem;} .h81{height: 0.81rem;} .h82{height: 0.82rem;} .h83{height: 0.83rem;} .h84{height: 0.84rem;} .h85{height: 0.85rem;} .h86{height: 0.86rem;} .h87{height: 0.87rem;} .h88{height: 0.88rem;} .h89{height: 0.89rem;} .h90{height: 0.9rem;} .h91{height: 0.91rem;} .h92{height: 0.92rem;} .h93{height: 0.93rem;} .h94{height: 0.94rem;} .h95{height: 0.95rem;} .h96{height: 0.96rem;} .h97{height: 0.97rem;} .h98{height: 0.98rem;} .h99{height: 0.99rem;} .h100{height: 1rem;} +.h452{height: 4.52rem;} //行高 .lh0{line-height: 0rem;} diff --git a/src/assets/styles/pages/home.scss b/src/assets/styles/pages/home.scss index 3456a39..b96db02 100644 --- a/src/assets/styles/pages/home.scss +++ b/src/assets/styles/pages/home.scss @@ -142,18 +142,18 @@ // 主标题 &__title { - font-size: 0.54rem; + font-size: 0.48rem; font-weight: 600; - line-height: 0.71rem; - letter-spacing: -0.03rem; + line-height: 0.61rem; + letter-spacing: 0.03rem; color: #111; margin: 0; } // 副标题描述 &__desc { - font-size: 0.2rem; - line-height: 0.325rem; + font-size: 0.16rem; + line-height: 0.2rem; color: #9ca3af; margin-top: 0.1rem; } @@ -162,12 +162,11 @@ &__cta { margin-top: 0.69rem; width: 1.84rem; - height: 0.56rem; - //line-height: 0.24rem; + height: 0.52rem; border-radius: 0.16rem; - background: linear-gradient(90deg, rgba(82, 202, 209, 1) 0%, rgba(83, 217, 200, 1) 100%); + background: $accent; color: #fff; - font-size: 0.18rem; + font-size: 0.15rem; font-weight: 600; border: none; cursor: pointer; @@ -178,8 +177,9 @@ // 右侧卡片区 &__right { flex-shrink: 0; - box-shadow: 0px 0px 15.45px rgba(82, 202, 209, 0.1); + //box-shadow: 0px 0px 15.45px rgba(82, 202, 209, 0.1); border-radius: 0.16rem; + background: #FCFEFE; } &__right-top{ @@ -365,25 +365,25 @@ .stat-card { background: #fff; border-radius: 0.16rem; - width: 2.03rem; - height: 1.87rem; + width: 1.9rem; + height: 1.9rem; text-align: center; padding-top:0.38rem; box-shadow: 0 0.06rem 0.2rem rgba(0, 0, 0, 0.05); // 大数字 &__num { - font-size: 0.48rem; + font-size: 0.38rem; font-weight: 900; - color: #52CAD1; + color: #2A8186; line-height: 0.63rem; } // 描述文字 &__label { - font-size: 0.16rem; + font-size: 0.13rem; line-height: 0.22rem; - color: #9ca3af; + color: #8D9399; margin-top: 0.12rem; letter-spacing: 0.0035rem; } @@ -391,7 +391,7 @@ // ==================== 岗位展示区 ==================== .home-jobs-showcase { - padding: 1rem 0; + padding: 0.85rem 0 0.7rem 0; position: relative; overflow: hidden; background: #fff; @@ -441,20 +441,20 @@ // 副标题 &__sub { - font-size: 0.2rem; + font-size: 0.15rem; line-height: 0.28rem; color: #999; - margin-top: 0.2rem; + margin-top: 0.19rem; } // 玻璃态展示盒子 &__box { - margin-top: 0.6rem; + margin-top: 0.87rem; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 10px 40px rgba(82, 202, 209, 0.12); backdrop-filter: blur(100px); - border-radius: 0.4rem; + border-radius: 0.1rem; padding: 0.64rem 0; } @@ -472,7 +472,7 @@ .ticker-track { display: flex; - gap: 0.16rem; + gap: 0.30rem; width: max-content; animation: ticker-scroll 20s linear infinite; } @@ -483,16 +483,16 @@ .showcase-stat { text-align: center; &__num { - font-size: 0.48rem; + font-size: 0.40rem; line-height: 0.6rem; font-weight: 900; - color: #1d1d1d; - .accent { color: $accent; } + color: #2A8186; + .accent { color: #2A8186; } } &__label { - font-size: 0.18rem; + font-size: 0.14rem; line-height: 0.28rem; - color: #64748b; + color: #8D9399; margin-top: 0.08rem; } } @@ -500,7 +500,7 @@ // 单个岗位滚动卡片 .job-ticker { flex-shrink: 0; - background: rgba(30, 30, 46, 0.9); + background: #12383A; backdrop-filter: blur(36px); border-radius: 0.12rem; padding: 0.2rem 0.24rem; @@ -545,16 +545,17 @@ min-width: 0; h2 { - font-size: 0.48rem; + font-size: 0.34rem; font-weight: 600; - line-height: 0.63rem; + line-height: 0.43rem; + letter-spacing: 0.02rem; color: #111; margin: 0; } p { - font-size: 0.2rem; - line-height: 0.325rem; + font-size: 0.14rem; + line-height: 0.2rem; color: #999; margin-top: 0.16rem; } @@ -566,12 +567,13 @@ display: inline-flex; align-items: center; gap: 0.12rem; - padding: 0.15rem 0.4rem; - border-radius: 0.16rem; - background: #111111; + padding: 0 0.22rem; + border-radius: 0.12rem; + background: $accent; color: #fff; - font-size: 0.16rem; - line-height: 0.28rem; + font-size: 0.12rem; + height: 0.42rem; + line-height: 0.42rem; font-weight: 600; border: none; cursor: pointer; @@ -582,7 +584,8 @@ } svg { flex-shrink: 0; - color: $btn-dark; + color: #fff; + font-size: 0.12rem; } } @@ -1069,7 +1072,7 @@ margin-bottom: 0.8rem; h2 { - font-size: 0.48rem; + font-size: 0.38rem; line-height: 0.48rem; font-weight: 600; letter-spacing: -0.012rem; @@ -1077,12 +1080,12 @@ } p { - font-size: 0.16rem; + font-size: 0.15rem; line-height: 0.24rem; color: #9ca3af; letter-spacing: 0.0rem; text-transform: uppercase; - margin-top: 0.24rem; + margin-top: 0.14rem; } } diff --git a/src/assets/styles/pages/login.scss b/src/assets/styles/pages/login.scss index 37a3ea6..60571a0 100644 --- a/src/assets/styles/pages/login.scss +++ b/src/assets/styles/pages/login.scss @@ -177,7 +177,7 @@ display: flex; align-items: center; gap: 0.12rem; - width: 3.41rem; + width: 4rem; img{ width: 1.6rem; @@ -230,12 +230,12 @@ display: flex; flex-direction: column; gap: 0.24rem; - width: 3.41rem; + width: 4rem; } /* 标题 */ .login-view__heading { - width: 3.41rem; + width: 4rem; display: flex; flex-direction: column; gap: 0.05rem; @@ -243,15 +243,16 @@ .login-view__title { font-weight: 700; - font-size: 0.18rem; + font-size: 0.24rem; line-height: 0.22rem; color: #18181A; } .login-view__subtitle { font-weight: 400; - font-size: 0.10rem; - line-height: 0.12rem; + font-size: 0.14rem; + margin-top: 0.08rem; + margin-bottom: 0.08rem; color: #616367; >span:nth-child(2){ @@ -264,12 +265,12 @@ box-sizing: border-box; display: flex; align-items: center; - width: 3.41rem; - height: 0.40rem; + width: 4rem; + height: 0.56rem; background: #FFFFFF; border: 1px solid #C8C9CD; box-shadow: 0 0.08rem 0.20rem rgba(15, 83, 87, 0.05); - border-radius: 0.08rem; + border-radius: 0.12rem; } /* 手机图标 */ @@ -292,7 +293,7 @@ .login-view__country-label { margin-left: 0.06rem; font-weight: 500; - font-size: 0.12rem; + font-size: 0.14rem; line-height: 0.15rem; color: #202124; white-space: nowrap; @@ -330,7 +331,7 @@ border: none; background: transparent; font-weight: 400; - font-size: 0.12rem; + font-size: 0.14rem; line-height: 0.15rem; color: #202124; outline: none; @@ -342,14 +343,14 @@ /* ==================== 发送验证码按钮(步骤一) ==================== */ .login-view__send-btn { - width: 3.41rem; - height: 0.40rem; + width: 4rem; + height: 0.43rem; background: linear-gradient(90deg, #4FC2C9 0%, #42A8B3 100%); box-shadow: 0 0.16rem 0.30rem rgba(15, 83, 87, 0.15); - border-radius: 0.08rem; + border-radius: 0.12rem; border: none; font-weight: 600; - font-size: 0.12rem; + font-size: 0.14rem; line-height: 0.15rem; color: #FFFFFF; cursor: pointer; @@ -391,8 +392,8 @@ display: flex; justify-content: center; align-items: center; - width: 0.42rem; - height: 0.46rem; + width: 0.56rem; + height: 0.56rem; background: #FAFBFC; border: 1px solid #E2E8F0; border-radius: 0.12rem; @@ -401,7 +402,7 @@ .login-view__otp-box--active { background: #F3FFFD; - border: 2px solid $accent; + border: 1px solid $accent; } .login-view__otp-box--filled { @@ -450,7 +451,7 @@ /* ==================== 状态按钮(步骤二) ==================== */ .login-view__status-btn { width: 100%; - height: 0.4rem; + height: 0.43rem; background: linear-gradient(90deg, $btn-dark 0%, $btn-dark-hover 100%); border-radius: 0.12rem; border: none; @@ -494,7 +495,7 @@ display: flex; align-items: center; gap: 0.06rem; - width: 3.41rem; + width: 4rem; } .login-view__checkbox { @@ -547,7 +548,7 @@ /* ==================== 简历上传阶段 — 右侧面板 ==================== */ .login-view__form-wrap--resume { - width: 3.41rem; + width: 4rem; } /* 上传区域 */ @@ -592,15 +593,16 @@ .login-view__upload-btn { height: 0.4rem; - line-height: 0.4rem; + line-height: 0.43rem; background: linear-gradient(90deg, $btn-dark 0%, $btn-dark-hover 100%); border: none; border-radius: 0.08rem; - font-size: 0.16rem; + font-size: 0.14rem; font-weight: 600; color: #FFFFFF; cursor: pointer; transition: opacity 0.2s; + margin-bottom: -0.1rem; &:hover { opacity: 0.9; @@ -610,7 +612,7 @@ /* 解析中状态 — 新版步骤面板 */ .login-view__parse-panel { box-sizing: border-box; - width: 3.41rem; + width: 4rem; padding: 0.24rem; background: #F6FFFF; border: 1px solid #D6F1EF; @@ -767,13 +769,13 @@ /* 解析中按钮(禁用样式) */ .login-view__parse-btn { - width: 3.41rem; - height: 0.40rem; + width: 4rem; + height: 0.43rem; background: #A6EAE7; border-radius: 0.08rem; border: none; font-weight: 600; - font-size: 0.12rem; + font-size: 0.14rem; line-height: 0.15rem; color: #FFFFFF; cursor: not-allowed; @@ -782,7 +784,7 @@ /* ==================== 状态4:上传成功面板 ==================== */ .login-view__success-panel { box-sizing: border-box; - width: 3.41rem; + width: 4rem; padding: 0.28rem 0.24rem; background: #F6FFFB; border: 1px solid #BCEED7; @@ -863,13 +865,13 @@ /* 进入后台按钮 */ .login-view__success-btn { - width: 3.41rem; - height: 0.40rem; + width: 4rem; + height: 0.43rem; background: #4FC2C9; border-radius: 0.08rem; border: none; font-weight: 600; - font-size: 0.12rem; + font-size: 0.14rem; line-height: 0.15rem; color: #FFFFFF; cursor: pointer; @@ -883,7 +885,7 @@ /* ==================== 状态3:上传失败面板 ==================== */ .login-view__failed-panel { box-sizing: border-box; - width: 3.41rem; + width: 4rem; padding: 0.28rem 0.24rem; background: #FFFBFA; border: 1px solid #FADBD5; @@ -964,14 +966,14 @@ /* 重新上传按钮 */ .login-view__failed-btn { - width: 3.41rem; - height: 0.40rem; + width: 4rem; + height: 0.43rem; background: linear-gradient(90deg, #4FC2C9 0%, #42A8B3 100%); box-shadow: 0 0.16rem 0.30rem rgba(15, 83, 87, 0.15); border-radius: 0.08rem; border: none; font-weight: 600; - font-size: 0.12rem; + font-size: 0.14rem; line-height: 0.15rem; color: #FFFFFF; cursor: pointer; @@ -990,4 +992,5 @@ color: #999; padding-top: 0.3rem; border-top: 1px solid #E7F2F3; + text-decoration: none; } diff --git a/src/views/Home.vue b/src/views/Home.vue index 330a0d4..6dce5e3 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -23,34 +23,38 @@
智能匹配职位、自动填写申请、量身定制简历、推荐内部人脉——
不到1分钟,统统搞定!
实时汇集海量超10000+名校校招职位
-第一时间发现真正适合你的岗位,精准匹配你的真
实技能,杜绝虚假信息。
每日向数百岗位一键投递,覆盖各大企业网申系
统。告别重复填写,节省 82% 校招求职时间。
10秒内生成针对特定岗位优化的专业简历,通过
ATS系统,突出你的核心优势。
实时获取名企最新内推信息,自动填写网申内推
码,简历更快到达HR。
随时提供求职指导,从岗位筛选到面试技巧,你的专属职业规划顾问。