Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
51be3e5585 | ||
|
|
8773c65b28 | ||
|
|
0aebde7bd3 | ||
|
|
0888d9fa31 | ||
|
|
4eb730208e | ||
|
|
8143a89dab | ||
|
|
065553f53e | ||
|
|
1c3ea6aa3c | ||
|
|
c17f75c707 | ||
|
|
8d6282c3e6 | ||
|
|
403e5e9fc9 | ||
|
|
540d61b6a0 | ||
|
|
2844d99ae1 | ||
|
|
0783ecb570 | ||
|
|
ad9c448fc7 | ||
|
|
5ef8b3a9df | ||
|
|
0fcc19f3f8 | ||
|
|
e6ae57e5fd | ||
|
|
557a6f30f2 | ||
|
|
dde72be9de | ||
|
|
ddb67cfb6f | ||
|
|
59ac8ab783 | ||
|
|
0d1d080cc1 | ||
|
|
a1633978c5 | ||
|
|
0e6fde08c7 | ||
|
|
96071d0105 | ||
|
|
e34bb2a21e | ||
|
|
3dbeddcb8f | ||
|
|
f52a7c56f7 | ||
|
|
a9638fc7ec | ||
|
|
91992a2443 | ||
|
|
b666f0047d | ||
|
|
42768cc4c5 | ||
|
|
833533f780 | ||
|
|
8b6d424b2f | ||
|
|
4b16341f92 | ||
|
|
12baa93e58 | ||
|
|
a3740688ab |
@@ -16,10 +16,13 @@ inclusion: always
|
|||||||
## 编码规范
|
## 编码规范
|
||||||
|
|
||||||
- 颜色用尽量用variables.scss里的统一颜色变量,特别是背景,按钮,文字的颜色
|
- 颜色用尽量用variables.scss里的统一颜色变量,特别是背景,按钮,文字的颜色
|
||||||
- 除了Home.vue首页外,其他页面我上传了截图要写页面或组件的,需要参考图片里文字和布局结构,在保证美观前提上自由发挥
|
- 除了Home.vue首页外,其他页面我上传了截图要写页面或组件的,需要参考图片里文字和布局结构,在保证美观前提上自由发挥(如果我粘贴了图片内容里的完整样式过来,那就要参考我给的样式结合图片里的结构和样式代码保证还原度)
|
||||||
- 全局用1rem=100px的格式并注意对某些特殊元素组件的line-height行高影响,纵布局如非必要不用flex-direction: column布局
|
- 全局用1rem=100px的格式并注意对某些特殊元素组件的line-height行高影响,纵布局如非必要不用flex-direction: column布局
|
||||||
- 如果是建一个组件,这个组件看我说是用在views里哪个页面的,比如用在Profile.vue里的组件,组件名字最前面要加Profile,而且整个组件的命名不能过度简化,要容易看懂组件的用途;如果检测到某种名字开头的组件数量比如Profile开头的超过15个,就在components里新建个类似profile这样的页面名字的文件夹,把这类命名的组件都移到文件夹里并查找更新组件所有被引用地方的文件地址
|
- 如果是建一个组件,这个组件看我说是用在views里哪个页面的,比如用在Profile.vue里的组件,组件名字最前面要加Profile,而且整个组件的命名不能过度简化,要容易看懂组件的用途;如果检测到某种名字开头的组件数量比如Profile开头的超过15个,就在components里新建个类似profile这样的页面名字的文件夹,把这类命名的组件都移到文件夹里并查找更新组件所有被引用地方的文件地址
|
||||||
|
|
||||||
## 注意事项
|
## 注意事项
|
||||||
|
|
||||||
- 页面结构和ts的常量变量和方法都要加中文注释
|
- 页面结构和ts的常量变量和方法都要加中文注释,kiro编程工具沟通要回复中文
|
||||||
|
- 新建 SCSS 文件如果使用了 variables.scss 中的变量(如 `$bg-white`、`$accent` 等),必须在文件顶部加 `@use '../variables' as *;`,否则通过 `@use` 方式引入 index.scss 时变量作用域不会穿透,会报 `Undefined variable` 错误
|
||||||
|
- 因为项目用了 rem(1rem=100px)适配方案,所有 Vue 页面和组件文件的最外层盒子都要加 `font-size: 0.14rem`,避免页面样式中受浏览器默认 rem 行高影响导致文字和布局异常
|
||||||
|
- 需要占满视口高度的元素(页面主容器、侧边栏、聊天面板等)禁止直接写 `height: 100vh`,必须使用 `height: var(--app-height, 100vh)`。原因:项目在小屏下使用 `transform: scale` 缩放,`100vh` 是缩放后的视口高度而非设计稿高度,会导致底部留白。`--app-height` 由 `src/plugins/remAdapt.ts` 动态注入,值为 `视口高度 / scale`(PC 端等于 `100vh`)
|
||||||
|
|||||||
@@ -1,5 +1,3 @@
|
|||||||
# syntax=docker/dockerfile:1
|
|
||||||
|
|
||||||
# ==================== 第一阶段:构建 ====================
|
# ==================== 第一阶段:构建 ====================
|
||||||
FROM node:22-alpine AS builder
|
FROM node:22-alpine AS builder
|
||||||
WORKDIR /build
|
WORKDIR /build
|
||||||
|
|||||||
@@ -1,15 +1,8 @@
|
|||||||
/**
|
/**
|
||||||
* OfferPie Web 前端蓝绿部署流水线
|
* OfferPie Web 前端蓝绿部署流水线
|
||||||
*
|
*
|
||||||
* 工作目录说明:
|
* 架构:Jenkins 本地编译 → scp 镜像到目标机 → SSH 远程蓝绿切换
|
||||||
* - Jenkins 会自动为每个项目创建独立的工作空间:/var/jenkins_home/workspace/<项目名>/
|
* 目标机目录:/opt/offerpie/web/
|
||||||
* - docker-compose.yml、Dockerfile、nginx.conf 都在项目根目录,直接执行即可
|
|
||||||
* - nginx.conf 首次部署时 docker cp 进 nginx 容器
|
|
||||||
*
|
|
||||||
* 内层 Nginx 职责:
|
|
||||||
* - 蓝绿切换(前端静态文件 serve)
|
|
||||||
* - /api/ 代理到 Java 后端(10202)
|
|
||||||
* - /ai-api/ 代理到 Python AI(10502),rewrite 去掉前缀
|
|
||||||
*/
|
*/
|
||||||
pipeline {
|
pipeline {
|
||||||
agent any
|
agent any
|
||||||
@@ -19,14 +12,28 @@ pipeline {
|
|||||||
}
|
}
|
||||||
|
|
||||||
environment {
|
environment {
|
||||||
CONTAINER_PREFIX = 'offerpie-web' // 容器名前缀,拼接 -blue / -green / -nginx
|
// 目标服务器配置
|
||||||
HEALTH_URL = 'http://localhost:80/' // 前端静态页面健康检查
|
DEPLOY_HOST = '8.148.237.97'
|
||||||
|
DEPLOY_PORT = '22'
|
||||||
|
DEPLOY_USER = 'root'
|
||||||
|
DEPLOY_PASS = 'Mzpy520@126.com'
|
||||||
|
|
||||||
|
// 项目配置
|
||||||
|
IMAGE_NAME = 'offerpie-web'
|
||||||
|
IMAGE_TAG = 'latest'
|
||||||
|
CONTAINER_PREFIX = 'offerpie-web'
|
||||||
|
REMOTE_DIR = '/opt/offerpie/web'
|
||||||
|
HEALTH_URL = 'http://localhost:80/'
|
||||||
|
|
||||||
|
// SSH 命令前缀
|
||||||
|
SSH_CMD = "sshpass -p '${DEPLOY_PASS}' ssh -o StrictHostKeyChecking=no -p ${DEPLOY_PORT} ${DEPLOY_USER}@${DEPLOY_HOST}"
|
||||||
|
SCP_CMD = "sshpass -p '${DEPLOY_PASS}' scp -o StrictHostKeyChecking=no -P ${DEPLOY_PORT}"
|
||||||
}
|
}
|
||||||
|
|
||||||
stages {
|
stages {
|
||||||
stage('开始提示') {
|
stage('环境检查') {
|
||||||
steps {
|
steps {
|
||||||
echo "OfferPie Web 前端开始构建"
|
sh 'sshpass -V'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -34,23 +41,41 @@ pipeline {
|
|||||||
steps {
|
steps {
|
||||||
echo "拉取 ${params.BRANCH} 分支代码"
|
echo "拉取 ${params.BRANCH} 分支代码"
|
||||||
git branch: "${params.BRANCH}",
|
git branch: "${params.BRANCH}",
|
||||||
credentialsId: 'ef5fffc1-9b35-403d-9ca6-e1b73eb0e45a',
|
credentialsId: 'gitea-fab089c1-b55d-4b58-9fad',
|
||||||
url: 'https://codeup.aliyun.com/5f0ed3b9769820a3e817dee2/offerpie/offerpie_web.git'
|
url: 'http://git.jianshixingqiu.com/offerpai/offerpai_web.git'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stage('本地编译') {
|
||||||
|
steps {
|
||||||
|
echo "开始构建镜像"
|
||||||
|
sh "docker build -t ${IMAGE_NAME}:${IMAGE_TAG} ."
|
||||||
|
echo "导出镜像"
|
||||||
|
sh "docker save -o ${IMAGE_NAME}.tar ${IMAGE_NAME}:${IMAGE_TAG}"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stage('文件传输') {
|
||||||
|
steps {
|
||||||
|
echo "传输文件到目标服务器"
|
||||||
|
sh "${SSH_CMD} 'mkdir -p ${REMOTE_DIR}'"
|
||||||
|
sh "${SCP_CMD} ${IMAGE_NAME}.tar ${DEPLOY_USER}@${DEPLOY_HOST}:${REMOTE_DIR}/"
|
||||||
|
sh "${SCP_CMD} proxy_nginx.conf ${DEPLOY_USER}@${DEPLOY_HOST}:${REMOTE_DIR}/proxy_nginx.conf"
|
||||||
|
sh "${SCP_CMD} docker-compose.yml ${DEPLOY_USER}@${DEPLOY_HOST}:${REMOTE_DIR}/docker-compose.yml"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stage('加载镜像') {
|
||||||
|
steps {
|
||||||
|
sh "${SSH_CMD} 'docker load < ${REMOTE_DIR}/${IMAGE_NAME}.tar'"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 检测部署目标
|
|
||||||
* - 检查 blue 和 green 容器的运行状态
|
|
||||||
* - blue 在运行 → 部署 green;green 在运行 → 部署 blue
|
|
||||||
* - 都不在或都在 → 默认部署 blue
|
|
||||||
*/
|
|
||||||
stage('检测部署目标') {
|
stage('检测部署目标') {
|
||||||
steps {
|
steps {
|
||||||
echo "检查当前容器状态"
|
|
||||||
script {
|
script {
|
||||||
def blueRunning = sh(script: "docker ps -q -f name=${CONTAINER_PREFIX}-blue", returnStdout: true).trim()
|
def blueRunning = sh(script: "${SSH_CMD} 'docker ps -q -f name=${CONTAINER_PREFIX}-blue'", returnStdout: true).trim()
|
||||||
def greenRunning = sh(script: "docker ps -q -f name=${CONTAINER_PREFIX}-green", returnStdout: true).trim()
|
def greenRunning = sh(script: "${SSH_CMD} 'docker ps -q -f name=${CONTAINER_PREFIX}-green'", returnStdout: true).trim()
|
||||||
|
|
||||||
env.DEPLOY_TARGET = ''
|
env.DEPLOY_TARGET = ''
|
||||||
|
|
||||||
@@ -71,70 +96,42 @@ pipeline {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 构建新版本
|
|
||||||
* - 先清理目标颜色的旧容器(如果残留)
|
|
||||||
* - docker-compose build 构建新镜像(含 pnpm build)
|
|
||||||
*/
|
|
||||||
stage('构建新版本') {
|
|
||||||
steps {
|
|
||||||
script {
|
|
||||||
def existingContainer = sh(script: "docker ps -aq -f name=${CONTAINER_PREFIX}-${env.DEPLOY_TARGET}", returnStdout: true).trim()
|
|
||||||
if (existingContainer) {
|
|
||||||
echo "清理已存在的容器: ${CONTAINER_PREFIX}-${env.DEPLOY_TARGET}"
|
|
||||||
sh "docker rm -f ${CONTAINER_PREFIX}-${env.DEPLOY_TARGET}"
|
|
||||||
}
|
|
||||||
sh "docker-compose build ${env.DEPLOY_TARGET}"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 检查 Nginx
|
|
||||||
* - 检查 nginx 容器是否存在
|
|
||||||
* - 不存在则启动并复制配置文件(首次部署)
|
|
||||||
* - 存在则确保容器运行中
|
|
||||||
*/
|
|
||||||
stage('检查Nginx') {
|
|
||||||
steps {
|
|
||||||
script {
|
|
||||||
def nginxExists = sh(script: "docker ps -aq -f name=${CONTAINER_PREFIX}-nginx", returnStdout: true).trim()
|
|
||||||
if (!nginxExists) {
|
|
||||||
echo "首次部署,初始化 Nginx 容器"
|
|
||||||
sh "docker-compose up -d nginx"
|
|
||||||
sh "sleep 3"
|
|
||||||
// 复制配置文件到容器内
|
|
||||||
sh "docker cp proxy_nginx.conf ${CONTAINER_PREFIX}-nginx:/etc/nginx/nginx.conf"
|
|
||||||
sh "docker exec ${CONTAINER_PREFIX}-nginx nginx -s reload"
|
|
||||||
} else {
|
|
||||||
def nginxRunning = sh(script: "docker ps -q -f name=${CONTAINER_PREFIX}-nginx", returnStdout: true).trim()
|
|
||||||
if (!nginxRunning) {
|
|
||||||
echo "Nginx 容器已停止,重新启动"
|
|
||||||
sh "docker start ${CONTAINER_PREFIX}-nginx"
|
|
||||||
sh "sleep 2"
|
|
||||||
}
|
|
||||||
echo "Nginx 容器已存在且运行中"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
stage('启动新版本') {
|
stage('启动新版本') {
|
||||||
steps {
|
steps {
|
||||||
script {
|
script {
|
||||||
sh "docker-compose up -d ${env.DEPLOY_TARGET}"
|
def existingContainer = sh(script: "${SSH_CMD} 'docker ps -aq -f name=${CONTAINER_PREFIX}-${env.DEPLOY_TARGET}'", returnStdout: true).trim()
|
||||||
// 等待 Nginx 容器启动
|
if (existingContainer) {
|
||||||
|
sh "${SSH_CMD} 'docker rm -f ${CONTAINER_PREFIX}-${env.DEPLOY_TARGET}'"
|
||||||
|
}
|
||||||
|
sh "${SSH_CMD} 'cd ${REMOTE_DIR} && docker compose up -d ${env.DEPLOY_TARGET}'"
|
||||||
sh 'sleep 5'
|
sh 'sleep 5'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
stage('检查Nginx') {
|
||||||
* 健康检查
|
steps {
|
||||||
* - 进入容器检测静态页面是否正常返回
|
script {
|
||||||
* - 最多重试 3 次,每次间隔 5 秒
|
def nginxExists = sh(script: "${SSH_CMD} 'docker ps -aq -f name=${CONTAINER_PREFIX}-nginx'", returnStdout: true).trim()
|
||||||
* - 全部失败则终止部署流程
|
if (!nginxExists) {
|
||||||
*/
|
echo "首次部署,初始化 Nginx 容器"
|
||||||
|
sh "${SSH_CMD} 'cd ${REMOTE_DIR} && docker compose up -d nginx'"
|
||||||
|
sh 'sleep 3'
|
||||||
|
} else {
|
||||||
|
def nginxRunning = sh(script: "${SSH_CMD} 'docker ps -q -f name=${CONTAINER_PREFIX}-nginx'", returnStdout: true).trim()
|
||||||
|
if (!nginxRunning) {
|
||||||
|
echo "Nginx 容器已停止,重新启动"
|
||||||
|
sh "${SSH_CMD} 'docker start ${CONTAINER_PREFIX}-nginx'"
|
||||||
|
sh 'sleep 2'
|
||||||
|
}
|
||||||
|
echo "Nginx 容器已存在且运行中"
|
||||||
|
}
|
||||||
|
// docker cp proxy_nginx.conf 进容器
|
||||||
|
sh "${SSH_CMD} 'docker cp ${REMOTE_DIR}/proxy_nginx.conf ${CONTAINER_PREFIX}-nginx:/etc/nginx/nginx.conf'"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
stage('健康检查') {
|
stage('健康检查') {
|
||||||
steps {
|
steps {
|
||||||
script {
|
script {
|
||||||
@@ -144,7 +141,7 @@ pipeline {
|
|||||||
|
|
||||||
while (retryCount < maxRetries && !healthy) {
|
while (retryCount < maxRetries && !healthy) {
|
||||||
try {
|
try {
|
||||||
sh "docker exec ${CONTAINER_PREFIX}-${env.DEPLOY_TARGET} curl -f ${HEALTH_URL}"
|
sh "${SSH_CMD} 'docker exec ${CONTAINER_PREFIX}-${env.DEPLOY_TARGET} curl -f ${HEALTH_URL}'"
|
||||||
healthy = true
|
healthy = true
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
retryCount++
|
retryCount++
|
||||||
@@ -163,38 +160,34 @@ pipeline {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 切换流量
|
|
||||||
* - 修改 nginx 配置中的 proxy_pass 指向新版本
|
|
||||||
* - nginx 不挂载宿主机文件,直接 sed -i 修改容器内配置
|
|
||||||
* - reload 使新配置生效,实现零停机切换
|
|
||||||
*/
|
|
||||||
stage('切换流量') {
|
stage('切换流量') {
|
||||||
steps {
|
steps {
|
||||||
script {
|
script {
|
||||||
sh "docker exec ${CONTAINER_PREFIX}-nginx sed -i 's/proxy_pass http:\\/\\/\\(blue\\|green\\);/proxy_pass http:\\/\\/${env.DEPLOY_TARGET};/' /etc/nginx/nginx.conf"
|
sh "${SSH_CMD} 'docker exec ${CONTAINER_PREFIX}-nginx sed -i \"s/proxy_pass http:\\/\\/\\(blue\\|green\\):80;/proxy_pass http:\\/\\/${env.DEPLOY_TARGET}:80;/\" /etc/nginx/nginx.conf'"
|
||||||
sh "docker exec ${CONTAINER_PREFIX}-nginx nginx -s reload"
|
sh "${SSH_CMD} 'docker exec ${CONTAINER_PREFIX}-nginx nginx -s reload'"
|
||||||
echo "✅ 流量已切换到 ${env.DEPLOY_TARGET}"
|
echo "✅ 流量已切换到 ${env.DEPLOY_TARGET}"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 停止并删除旧版本
|
|
||||||
* - 不能用 docker-compose down,会删除所有服务(包括 nginx)
|
|
||||||
* - 用 docker rm -f 只删除指定的旧颜色容器
|
|
||||||
*/
|
|
||||||
stage('删除旧版本') {
|
stage('删除旧版本') {
|
||||||
steps {
|
steps {
|
||||||
script {
|
script {
|
||||||
def otherExists = sh(script: "docker ps -aq -f name=${CONTAINER_PREFIX}-${env.OTHER_TARGET}", returnStdout: true).trim()
|
def otherExists = sh(script: "${SSH_CMD} 'docker ps -aq -f name=${CONTAINER_PREFIX}-${env.OTHER_TARGET}'", returnStdout: true).trim()
|
||||||
if (otherExists) {
|
if (otherExists) {
|
||||||
sh "docker rm -f ${CONTAINER_PREFIX}-${env.OTHER_TARGET}"
|
sh "${SSH_CMD} 'docker rm -f ${CONTAINER_PREFIX}-${env.OTHER_TARGET}'"
|
||||||
echo "旧版本 ${env.OTHER_TARGET} 已删除"
|
echo "旧版本 ${env.OTHER_TARGET} 已删除"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
stage('清理') {
|
||||||
|
steps {
|
||||||
|
sh "${SSH_CMD} 'rm -f ${REMOTE_DIR}/${IMAGE_NAME}.tar'"
|
||||||
|
sh "rm -f ${IMAGE_NAME}.tar"
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
post {
|
post {
|
||||||
@@ -203,6 +196,7 @@ pipeline {
|
|||||||
}
|
}
|
||||||
failure {
|
failure {
|
||||||
echo '❌ 部署失败,请检查日志'
|
echo '❌ 部署失败,请检查日志'
|
||||||
|
sh "rm -f ${IMAGE_NAME}.tar || true"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,212 @@
|
|||||||
|
/**
|
||||||
|
* OfferPie Web 前端蓝绿部署流水线(测试环境)
|
||||||
|
*
|
||||||
|
* 架构:Jenkins 本地编译 → scp 镜像到目标机 → SSH 远程蓝绿切换
|
||||||
|
* 目标机目录:/opt/offerpie/web/
|
||||||
|
*
|
||||||
|
* 与生产差异:
|
||||||
|
* - 部署目标为测试服务器
|
||||||
|
* - 默认分支 test
|
||||||
|
* - 镜像 tag = test(与生产 latest 隔离,避免同一 Jenkins 并发构建串包)
|
||||||
|
* - tar 文件名带 tag(双保险)
|
||||||
|
*
|
||||||
|
* 说明:前端走相对路径 /api、/ai-api,proxy_nginx.conf 代理到本机服务,
|
||||||
|
* 镜像与环境无关,复用生产 Dockerfile / nginx.conf / proxy_nginx.conf。
|
||||||
|
*/
|
||||||
|
pipeline {
|
||||||
|
agent any
|
||||||
|
|
||||||
|
parameters {
|
||||||
|
choice(name: 'BRANCH', choices: ['test', 'dev', 'pre', 'master'], description: '选择要部署的分支')
|
||||||
|
}
|
||||||
|
|
||||||
|
environment {
|
||||||
|
// 目标服务器配置(测试)
|
||||||
|
DEPLOY_HOST = '8.163.131.234'
|
||||||
|
DEPLOY_PORT = '22'
|
||||||
|
DEPLOY_USER = 'root'
|
||||||
|
DEPLOY_PASS = 'Mzpy520@126.com'
|
||||||
|
|
||||||
|
// 项目配置
|
||||||
|
IMAGE_NAME = 'offerpie-web'
|
||||||
|
IMAGE_TAG = 'test'
|
||||||
|
IMAGE_TAR = 'offerpie-web-test.tar'
|
||||||
|
CONTAINER_PREFIX = 'offerpie-web'
|
||||||
|
REMOTE_DIR = '/opt/offerpie/web'
|
||||||
|
HEALTH_URL = 'http://localhost:80/'
|
||||||
|
|
||||||
|
// SSH 命令前缀
|
||||||
|
SSH_CMD = "sshpass -p '${DEPLOY_PASS}' ssh -o StrictHostKeyChecking=no -p ${DEPLOY_PORT} ${DEPLOY_USER}@${DEPLOY_HOST}"
|
||||||
|
SCP_CMD = "sshpass -p '${DEPLOY_PASS}' scp -o StrictHostKeyChecking=no -P ${DEPLOY_PORT}"
|
||||||
|
}
|
||||||
|
|
||||||
|
stages {
|
||||||
|
stage('环境检查') {
|
||||||
|
steps {
|
||||||
|
sh 'sshpass -V'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stage('拉取代码') {
|
||||||
|
steps {
|
||||||
|
echo "拉取 ${params.BRANCH} 分支代码"
|
||||||
|
git branch: "${params.BRANCH}",
|
||||||
|
credentialsId: 'gitea-fab089c1-b55d-4b58-9fad',
|
||||||
|
url: 'http://git.jianshixingqiu.com/offerpai/offerpai_web.git'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stage('本地编译') {
|
||||||
|
steps {
|
||||||
|
echo "开始构建镜像"
|
||||||
|
sh "docker build -t ${IMAGE_NAME}:${IMAGE_TAG} ."
|
||||||
|
echo "导出镜像"
|
||||||
|
sh "docker save -o ${IMAGE_TAR} ${IMAGE_NAME}:${IMAGE_TAG}"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stage('文件传输') {
|
||||||
|
steps {
|
||||||
|
echo "传输文件到目标服务器"
|
||||||
|
sh "${SSH_CMD} 'mkdir -p ${REMOTE_DIR}'"
|
||||||
|
sh "${SCP_CMD} ${IMAGE_TAR} ${DEPLOY_USER}@${DEPLOY_HOST}:${REMOTE_DIR}/"
|
||||||
|
sh "${SCP_CMD} proxy_nginx.conf ${DEPLOY_USER}@${DEPLOY_HOST}:${REMOTE_DIR}/proxy_nginx.conf"
|
||||||
|
sh "${SCP_CMD} docker-compose.test.yml ${DEPLOY_USER}@${DEPLOY_HOST}:${REMOTE_DIR}/docker-compose.yml"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stage('加载镜像') {
|
||||||
|
steps {
|
||||||
|
sh "${SSH_CMD} 'docker load < ${REMOTE_DIR}/${IMAGE_TAR}'"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stage('检测部署目标') {
|
||||||
|
steps {
|
||||||
|
script {
|
||||||
|
def blueRunning = sh(script: "${SSH_CMD} 'docker ps -q -f name=${CONTAINER_PREFIX}-blue'", returnStdout: true).trim()
|
||||||
|
def greenRunning = sh(script: "${SSH_CMD} 'docker ps -q -f name=${CONTAINER_PREFIX}-green'", returnStdout: true).trim()
|
||||||
|
|
||||||
|
env.DEPLOY_TARGET = ''
|
||||||
|
|
||||||
|
if (blueRunning && !greenRunning) {
|
||||||
|
env.DEPLOY_TARGET = 'green'
|
||||||
|
}
|
||||||
|
if (greenRunning && !blueRunning) {
|
||||||
|
env.DEPLOY_TARGET = 'blue'
|
||||||
|
}
|
||||||
|
if (!env.DEPLOY_TARGET) {
|
||||||
|
echo "当前环境未部署服务或状态异常,默认部署 blue"
|
||||||
|
env.DEPLOY_TARGET = 'blue'
|
||||||
|
}
|
||||||
|
|
||||||
|
env.OTHER_TARGET = (env.DEPLOY_TARGET == 'blue') ? 'green' : 'blue'
|
||||||
|
echo "当前激活: ${env.OTHER_TARGET},即将部署: ${env.DEPLOY_TARGET}"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stage('启动新版本') {
|
||||||
|
steps {
|
||||||
|
script {
|
||||||
|
def existingContainer = sh(script: "${SSH_CMD} 'docker ps -aq -f name=${CONTAINER_PREFIX}-${env.DEPLOY_TARGET}'", returnStdout: true).trim()
|
||||||
|
if (existingContainer) {
|
||||||
|
sh "${SSH_CMD} 'docker rm -f ${CONTAINER_PREFIX}-${env.DEPLOY_TARGET}'"
|
||||||
|
}
|
||||||
|
sh "${SSH_CMD} 'cd ${REMOTE_DIR} && docker compose up -d ${env.DEPLOY_TARGET}'"
|
||||||
|
sh 'sleep 5'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stage('检查Nginx') {
|
||||||
|
steps {
|
||||||
|
script {
|
||||||
|
def nginxExists = sh(script: "${SSH_CMD} 'docker ps -aq -f name=${CONTAINER_PREFIX}-nginx'", returnStdout: true).trim()
|
||||||
|
if (!nginxExists) {
|
||||||
|
echo "首次部署,初始化 Nginx 容器"
|
||||||
|
sh "${SSH_CMD} 'cd ${REMOTE_DIR} && docker compose up -d nginx'"
|
||||||
|
sh 'sleep 3'
|
||||||
|
} else {
|
||||||
|
def nginxRunning = sh(script: "${SSH_CMD} 'docker ps -q -f name=${CONTAINER_PREFIX}-nginx'", returnStdout: true).trim()
|
||||||
|
if (!nginxRunning) {
|
||||||
|
echo "Nginx 容器已停止,重新启动"
|
||||||
|
sh "${SSH_CMD} 'docker start ${CONTAINER_PREFIX}-nginx'"
|
||||||
|
sh 'sleep 2'
|
||||||
|
}
|
||||||
|
echo "Nginx 容器已存在且运行中"
|
||||||
|
}
|
||||||
|
// docker cp proxy_nginx.conf 进容器
|
||||||
|
sh "${SSH_CMD} 'docker cp ${REMOTE_DIR}/proxy_nginx.conf ${CONTAINER_PREFIX}-nginx:/etc/nginx/nginx.conf'"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stage('健康检查') {
|
||||||
|
steps {
|
||||||
|
script {
|
||||||
|
def maxRetries = 3
|
||||||
|
def retryCount = 0
|
||||||
|
def healthy = false
|
||||||
|
|
||||||
|
while (retryCount < maxRetries && !healthy) {
|
||||||
|
try {
|
||||||
|
sh "${SSH_CMD} 'docker exec ${CONTAINER_PREFIX}-${env.DEPLOY_TARGET} curl -f ${HEALTH_URL}'"
|
||||||
|
healthy = true
|
||||||
|
} catch (Exception e) {
|
||||||
|
retryCount++
|
||||||
|
if (retryCount < maxRetries) {
|
||||||
|
echo "健康检查失败,5秒后重试 (${retryCount}/${maxRetries})"
|
||||||
|
sleep 5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!healthy) {
|
||||||
|
error "健康检查失败,部署中止"
|
||||||
|
}
|
||||||
|
echo "✅ ${CONTAINER_PREFIX}-${env.DEPLOY_TARGET} 健康检查通过"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stage('切换流量') {
|
||||||
|
steps {
|
||||||
|
script {
|
||||||
|
sh "${SSH_CMD} 'docker exec ${CONTAINER_PREFIX}-nginx sed -i \"s/proxy_pass http:\\/\\/\\(blue\\|green\\):80;/proxy_pass http:\\/\\/${env.DEPLOY_TARGET}:80;/\" /etc/nginx/nginx.conf'"
|
||||||
|
sh "${SSH_CMD} 'docker exec ${CONTAINER_PREFIX}-nginx nginx -s reload'"
|
||||||
|
echo "✅ 流量已切换到 ${env.DEPLOY_TARGET}"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stage('删除旧版本') {
|
||||||
|
steps {
|
||||||
|
script {
|
||||||
|
def otherExists = sh(script: "${SSH_CMD} 'docker ps -aq -f name=${CONTAINER_PREFIX}-${env.OTHER_TARGET}'", returnStdout: true).trim()
|
||||||
|
if (otherExists) {
|
||||||
|
sh "${SSH_CMD} 'docker rm -f ${CONTAINER_PREFIX}-${env.OTHER_TARGET}'"
|
||||||
|
echo "旧版本 ${env.OTHER_TARGET} 已删除"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stage('清理') {
|
||||||
|
steps {
|
||||||
|
sh "${SSH_CMD} 'rm -f ${REMOTE_DIR}/${IMAGE_TAR}'"
|
||||||
|
sh "rm -f ${IMAGE_TAR}"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
post {
|
||||||
|
success {
|
||||||
|
echo "✅ 蓝绿部署成功!当前运行: ${env.DEPLOY_TARGET}"
|
||||||
|
}
|
||||||
|
failure {
|
||||||
|
echo '❌ 部署失败,请检查日志'
|
||||||
|
sh "rm -f ${IMAGE_TAR} || true"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -12,11 +12,16 @@ export {}
|
|||||||
declare module 'vue' {
|
declare module 'vue' {
|
||||||
export interface GlobalComponents {
|
export interface GlobalComponents {
|
||||||
AgentApplyProgress: typeof import('./src/components/AgentApplyProgress.vue')['default']
|
AgentApplyProgress: typeof import('./src/components/AgentApplyProgress.vue')['default']
|
||||||
|
AgentApplyProgressPanel: typeof import('./src/components/AgentApplyProgressPanel.vue')['default']
|
||||||
AgentChatJobList: typeof import('./src/components/AgentChatJobList.vue')['default']
|
AgentChatJobList: typeof import('./src/components/AgentChatJobList.vue')['default']
|
||||||
|
AgentJobPreviewPanel: typeof import('./src/components/AgentJobPreviewPanel.vue')['default']
|
||||||
AgentMatchJobAdd: typeof import('./src/components/AgentMatchJobAdd.vue')['default']
|
AgentMatchJobAdd: typeof import('./src/components/AgentMatchJobAdd.vue')['default']
|
||||||
|
AgentPendingJobListPanel: typeof import('./src/components/AgentPendingJobListPanel.vue')['default']
|
||||||
|
AgentSettingPanel: typeof import('./src/components/AgentSettingPanel.vue')['default']
|
||||||
AgentSettingsPanel: typeof import('./src/components/AgentSettingsPanel.vue')['default']
|
AgentSettingsPanel: typeof import('./src/components/AgentSettingsPanel.vue')['default']
|
||||||
AgentSetupWizard: typeof import('./src/components/AgentSetupWizard.vue')['default']
|
AgentSetupWizard: typeof import('./src/components/AgentSetupWizard.vue')['default']
|
||||||
AgentTaskListDropdown: typeof import('./src/components/AgentTaskListDropdown.vue')['default']
|
AgentTaskListDropdown: typeof import('./src/components/AgentTaskListDropdown.vue')['default']
|
||||||
|
AgreementPreviewDialog: typeof import('./src/components/tools/AgreementPreviewDialog.vue')['default']
|
||||||
AiChat: typeof import('./src/components/AiChat.vue')['default']
|
AiChat: typeof import('./src/components/AiChat.vue')['default']
|
||||||
AiThinkingIndicator: typeof import('./src/components/tools/AiThinkingIndicator.vue')['default']
|
AiThinkingIndicator: typeof import('./src/components/tools/AiThinkingIndicator.vue')['default']
|
||||||
ElButton: typeof import('element-plus/es')['ElButton']
|
ElButton: typeof import('element-plus/es')['ElButton']
|
||||||
@@ -33,6 +38,7 @@ declare module 'vue' {
|
|||||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||||
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
||||||
|
FullscreenLoading: typeof import('./src/components/FullscreenLoading.vue')['default']
|
||||||
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
|
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
|
||||||
IndustrySelector: typeof import('./src/components/tools/IndustrySelector.vue')['default']
|
IndustrySelector: typeof import('./src/components/tools/IndustrySelector.vue')['default']
|
||||||
JobCategorySelector: typeof import('./src/components/tools/JobCategorySelector.vue')['default']
|
JobCategorySelector: typeof import('./src/components/tools/JobCategorySelector.vue')['default']
|
||||||
@@ -44,6 +50,7 @@ declare module 'vue' {
|
|||||||
JobResumeCustomEditPanel: typeof import('./src/components/JobResumeCustomEditPanel.vue')['default']
|
JobResumeCustomEditPanel: typeof import('./src/components/JobResumeCustomEditPanel.vue')['default']
|
||||||
JobResumeTemplate: typeof import('./src/components/JobResumeTemplate.vue')['default']
|
JobResumeTemplate: typeof import('./src/components/JobResumeTemplate.vue')['default']
|
||||||
LoginDialog: typeof import('./src/components/LoginDialog.vue')['default']
|
LoginDialog: typeof import('./src/components/LoginDialog.vue')['default']
|
||||||
|
MemberAccessDialog: typeof import('./src/components/MemberAccessDialog.vue')['default']
|
||||||
MemberDialog: typeof import('./src/components/MemberDialog.vue')['default']
|
MemberDialog: typeof import('./src/components/MemberDialog.vue')['default']
|
||||||
ProfileEditDrawer: typeof import('./src/components/ProfileEditDrawer.vue')['default']
|
ProfileEditDrawer: typeof import('./src/components/ProfileEditDrawer.vue')['default']
|
||||||
ProfilePageContent: typeof import('./src/components/ProfilePageContent.vue')['default']
|
ProfilePageContent: typeof import('./src/components/ProfilePageContent.vue')['default']
|
||||||
@@ -51,8 +58,11 @@ declare module 'vue' {
|
|||||||
RegionSelector: typeof import('./src/components/tools/RegionSelector.vue')['default']
|
RegionSelector: typeof import('./src/components/tools/RegionSelector.vue')['default']
|
||||||
ResumeAnalysisReportDrawer: typeof import('./src/components/ResumeAnalysisReportDrawer.vue')['default']
|
ResumeAnalysisReportDrawer: typeof import('./src/components/ResumeAnalysisReportDrawer.vue')['default']
|
||||||
ResumeEditNameDialog: typeof import('./src/components/ResumeEditNameDialog.vue')['default']
|
ResumeEditNameDialog: typeof import('./src/components/ResumeEditNameDialog.vue')['default']
|
||||||
|
ResumeExpInlineEdit: typeof import('./src/components/ResumeExpInlineEdit.vue')['default']
|
||||||
ResumeExportDialog: typeof import('./src/components/ResumeExportDialog.vue')['default']
|
ResumeExportDialog: typeof import('./src/components/ResumeExportDialog.vue')['default']
|
||||||
|
ResumeIssueFixAllDrawer: typeof import('./src/components/ResumeIssueFixAllDrawer.vue')['default']
|
||||||
ResumeIssueFixDrawer: typeof import('./src/components/ResumeIssueFixDrawer.vue')['default']
|
ResumeIssueFixDrawer: typeof import('./src/components/ResumeIssueFixDrawer.vue')['default']
|
||||||
|
ResumeUploadDialog: typeof import('./src/components/ResumeUploadDialog.vue')['default']
|
||||||
RouterLink: typeof import('vue-router')['RouterLink']
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
RouterView: typeof import('vue-router')['RouterView']
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
SettingsDeleteAccountDialog: typeof import('./src/components/SettingsDeleteAccountDialog.vue')['default']
|
SettingsDeleteAccountDialog: typeof import('./src/components/SettingsDeleteAccountDialog.vue')['default']
|
||||||
|
|||||||
@@ -0,0 +1,59 @@
|
|||||||
|
services:
|
||||||
|
nginx:
|
||||||
|
image: nginx:alpine
|
||||||
|
container_name: offerpie-web-nginx
|
||||||
|
restart: unless-stopped
|
||||||
|
ports:
|
||||||
|
- "10302:80"
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD", "wget", "--spider", "-q", "http://localhost/health"]
|
||||||
|
interval: 30s
|
||||||
|
timeout: 10s
|
||||||
|
retries: 3
|
||||||
|
deploy:
|
||||||
|
resources:
|
||||||
|
limits:
|
||||||
|
memory: 256M
|
||||||
|
cpus: '0.5'
|
||||||
|
|
||||||
|
blue:
|
||||||
|
image: offerpie-web:test
|
||||||
|
container_name: offerpie-web-blue
|
||||||
|
restart: unless-stopped
|
||||||
|
expose:
|
||||||
|
- "80"
|
||||||
|
environment:
|
||||||
|
- APP_VERSION=blue
|
||||||
|
- TZ=Asia/Shanghai
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD", "curl", "-f", "http://localhost:80/"]
|
||||||
|
interval: 30s
|
||||||
|
timeout: 10s
|
||||||
|
retries: 3
|
||||||
|
start_period: 10s
|
||||||
|
deploy:
|
||||||
|
resources:
|
||||||
|
limits:
|
||||||
|
memory: 128M
|
||||||
|
cpus: '0.25'
|
||||||
|
|
||||||
|
green:
|
||||||
|
image: offerpie-web:test
|
||||||
|
container_name: offerpie-web-green
|
||||||
|
restart: unless-stopped
|
||||||
|
expose:
|
||||||
|
- "80"
|
||||||
|
environment:
|
||||||
|
- APP_VERSION=green
|
||||||
|
- TZ=Asia/Shanghai
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD", "curl", "-f", "http://localhost:80/"]
|
||||||
|
interval: 30s
|
||||||
|
timeout: 10s
|
||||||
|
retries: 3
|
||||||
|
start_period: 10s
|
||||||
|
deploy:
|
||||||
|
resources:
|
||||||
|
limits:
|
||||||
|
memory: 128M
|
||||||
|
cpus: '0.25'
|
||||||
@@ -5,9 +5,6 @@ services:
|
|||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
ports:
|
ports:
|
||||||
- "10302:80"
|
- "10302:80"
|
||||||
depends_on:
|
|
||||||
- blue
|
|
||||||
- green
|
|
||||||
healthcheck:
|
healthcheck:
|
||||||
test: ["CMD", "wget", "--spider", "-q", "http://localhost/health"]
|
test: ["CMD", "wget", "--spider", "-q", "http://localhost/health"]
|
||||||
interval: 30s
|
interval: 30s
|
||||||
@@ -16,11 +13,11 @@ services:
|
|||||||
deploy:
|
deploy:
|
||||||
resources:
|
resources:
|
||||||
limits:
|
limits:
|
||||||
memory: 128M
|
memory: 256M
|
||||||
cpus: '0.25'
|
cpus: '0.5'
|
||||||
|
|
||||||
blue:
|
blue:
|
||||||
build: .
|
image: offerpie-web:latest
|
||||||
container_name: offerpie-web-blue
|
container_name: offerpie-web-blue
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
expose:
|
expose:
|
||||||
@@ -41,7 +38,7 @@ services:
|
|||||||
cpus: '0.25'
|
cpus: '0.25'
|
||||||
|
|
||||||
green:
|
green:
|
||||||
build: .
|
image: offerpie-web:latest
|
||||||
container_name: offerpie-web-green
|
container_name: offerpie-web-green
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
expose:
|
expose:
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/logo.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Offer派 - 大学生AI求职平台 | 智能岗位匹配·一键自动网申·AI简历优化</title>
|
<title>Offer派 - 大学生AI求职平台 | 智能岗位匹配·一键自动网申·AI简历优化</title>
|
||||||
<meta name="description" content="Offer派是专为大学生打造的AI求职平台,提供智能岗位匹配、一键自动网申、岗位定制简历、内推人脉直通等功能,让校招求职效率提升80%。" />
|
<meta name="description" content="Offer派是专为大学生打造的AI求职平台,提供智能岗位匹配、一键自动网申、岗位定制简历、内推人脉直通等功能,让校招求职效率提升80%。" />
|
||||||
|
|||||||
@@ -13,18 +13,17 @@
|
|||||||
"axios": "^1.13.6",
|
"axios": "^1.13.6",
|
||||||
"element-plus": "^2.13.3",
|
"element-plus": "^2.13.3",
|
||||||
"html2pdf.js": "^0.14.0",
|
"html2pdf.js": "^0.14.0",
|
||||||
|
"markdown-it": "^14.2.0",
|
||||||
"sass": "^1.97.3",
|
"sass": "^1.97.3",
|
||||||
"vue": "^3.5.25",
|
"vue": "^3.5.25",
|
||||||
"vue-router": "^4.6.4",
|
"vue-router": "^4.6.4",
|
||||||
"vuex": "^4.1.0"
|
"vuex": "^4.1.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@prerenderer/renderer-puppeteer": "^1.2.4",
|
"@types/markdown-it": "^14.1.2",
|
||||||
"@prerenderer/rollup-plugin": "^0.3.12",
|
|
||||||
"@types/node": "^24.10.1",
|
"@types/node": "^24.10.1",
|
||||||
"@vitejs/plugin-vue": "^6.0.2",
|
"@vitejs/plugin-vue": "^6.0.2",
|
||||||
"@vue/tsconfig": "^0.8.1",
|
"@vue/tsconfig": "^0.8.1",
|
||||||
"puppeteer": "^24.37.5",
|
|
||||||
"typescript": "~5.9.3",
|
"typescript": "~5.9.3",
|
||||||
"unplugin-auto-import": "^21.0.0",
|
"unplugin-auto-import": "^21.0.0",
|
||||||
"unplugin-vue-components": "^31.0.0",
|
"unplugin-vue-components": "^31.0.0",
|
||||||
|
|||||||
@@ -2,5 +2,4 @@ allowBuilds:
|
|||||||
'@parcel/watcher': true
|
'@parcel/watcher': true
|
||||||
core-js: true
|
core-js: true
|
||||||
esbuild: true
|
esbuild: true
|
||||||
puppeteer: true
|
|
||||||
vue-demi: true
|
vue-demi: true
|
||||||
|
|||||||
@@ -23,22 +23,13 @@ http {
|
|||||||
# 请求体大小限制
|
# 请求体大小限制
|
||||||
client_max_body_size 20m;
|
client_max_body_size 20m;
|
||||||
|
|
||||||
# 蓝绿 upstream
|
|
||||||
upstream blue {
|
|
||||||
server offerpie-web-blue:80;
|
|
||||||
}
|
|
||||||
|
|
||||||
upstream green {
|
|
||||||
server offerpie-web-green:80;
|
|
||||||
}
|
|
||||||
|
|
||||||
server {
|
server {
|
||||||
listen 80;
|
listen 80;
|
||||||
server_name _;
|
server_name _;
|
||||||
|
|
||||||
# Java 后端 API 代理
|
# Java 后端 API 代理
|
||||||
location /api/ {
|
location /api/ {
|
||||||
proxy_pass http://8.138.5.14:10202/api/;
|
proxy_pass http://172.17.0.1:10202/api/;
|
||||||
proxy_http_version 1.1;
|
proxy_http_version 1.1;
|
||||||
proxy_set_header Host $host;
|
proxy_set_header Host $host;
|
||||||
proxy_set_header X-Real-IP $remote_addr;
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
@@ -54,7 +45,7 @@ http {
|
|||||||
|
|
||||||
# Python AI 代理(去掉 /ai-api 前缀)
|
# Python AI 代理(去掉 /ai-api 前缀)
|
||||||
location /ai-api/ {
|
location /ai-api/ {
|
||||||
proxy_pass http://8.138.5.14:10502/;
|
proxy_pass http://172.17.0.1:10502/;
|
||||||
proxy_http_version 1.1;
|
proxy_http_version 1.1;
|
||||||
proxy_set_header Host $host;
|
proxy_set_header Host $host;
|
||||||
proxy_set_header X-Real-IP $remote_addr;
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
@@ -74,7 +65,7 @@ http {
|
|||||||
|
|
||||||
# 前端静态文件(蓝绿切换,默认 blue,部署时 sed 切换)
|
# 前端静态文件(蓝绿切换,默认 blue,部署时 sed 切换)
|
||||||
location / {
|
location / {
|
||||||
proxy_pass http://blue;
|
proxy_pass http://blue:80;
|
||||||
proxy_http_version 1.1;
|
proxy_http_version 1.1;
|
||||||
proxy_set_header Host $host;
|
proxy_set_header Host $host;
|
||||||
proxy_set_header X-Real-IP $remote_addr;
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
|||||||
|
After Width: | Height: | Size: 7.4 KiB |
@@ -1,13 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-config-provider :locale="zhCn">
|
<el-config-provider :locale="zhCn">
|
||||||
<RouterView />
|
<RouterView />
|
||||||
<LoginDialog />
|
|
||||||
</el-config-provider>
|
</el-config-provider>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { RouterView } from 'vue-router'
|
import { RouterView } from 'vue-router'
|
||||||
import LoginDialog from '@/components/LoginDialog.vue'
|
|
||||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -21,6 +21,8 @@ export interface AgentConfig {
|
|||||||
weeklyTarget?: number
|
weeklyTarget?: number
|
||||||
/** 投递时自动针对岗位优化简历 0=关闭 1=开启 */
|
/** 投递时自动针对岗位优化简历 0=关闭 1=开启 */
|
||||||
autoOptimizeResume?: number
|
autoOptimizeResume?: number
|
||||||
|
/** 自动匹配分析 0=关闭 1=开启 */
|
||||||
|
autoMatchAnalysis?: number
|
||||||
/** 是否愿意接受部门调剂 */
|
/** 是否愿意接受部门调剂 */
|
||||||
acceptDeptTransfer?: string
|
acceptDeptTransfer?: string
|
||||||
/** 是否接受地点调剂 */
|
/** 是否接受地点调剂 */
|
||||||
@@ -148,9 +150,9 @@ export function applyJob(params: JobApplyParams) {
|
|||||||
/**
|
/**
|
||||||
* 取消投递 / 从待投递移除
|
* 取消投递 / 从待投递移除
|
||||||
* DELETE /job/apply?jobId=xxx
|
* DELETE /job/apply?jobId=xxx
|
||||||
* @param jobId 岗位 ID
|
* @param jobId 岗位 ID(字符串,避免大整数精度丢失)
|
||||||
*/
|
*/
|
||||||
export function cancelApplyJob(jobId: number) {
|
export function cancelApplyJob(jobId: string | number) {
|
||||||
return request.delete<any, ApiResult>('/job/apply', {
|
return request.delete<any, ApiResult>('/job/apply', {
|
||||||
params: { jobId },
|
params: { jobId },
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import request from '@/utils/request'
|
import request from '@/utils/request'
|
||||||
|
import store from '@/stores'
|
||||||
|
|
||||||
/** 通用响应结构 */
|
/** 通用响应结构 */
|
||||||
export interface ApiResult<T = any> {
|
export interface ApiResult<T = any> {
|
||||||
@@ -31,13 +32,26 @@ export function sendSmsCode(mobileNumber: string) {
|
|||||||
* POST /public/login/smsLogin
|
* POST /public/login/smsLogin
|
||||||
* Body: { mobileNumber, code, inviteCode? }
|
* Body: { mobileNumber, code, inviteCode? }
|
||||||
* 登录成功后后端会 Set-Cookie: Token=xxx
|
* 登录成功后后端会 Set-Cookie: Token=xxx
|
||||||
|
*
|
||||||
|
* inviteCode 优先使用传入参数,其次从全局 store 中读取(URL 邀请码)
|
||||||
|
* 登录成功后自动清空全局邀请码,避免重复发送
|
||||||
*/
|
*/
|
||||||
export function smsLogin(mobileNumber: string, code: string, inviteCode?: string) {
|
export async function smsLogin(mobileNumber: string, code: string, inviteCode?: string) {
|
||||||
return request.post<any, ApiResult<LoginData>>('/public/login/smsLogin', {
|
// 优先使用显式传入的邀请码,否则从全局 store 取
|
||||||
|
const finalInviteCode = inviteCode || store.state.inviteCode || ''
|
||||||
|
|
||||||
|
const res = await request.post<any, ApiResult<LoginData>>('/public/login/smsLogin', {
|
||||||
mobileNumber,
|
mobileNumber,
|
||||||
code,
|
code,
|
||||||
...(inviteCode ? { inviteCode } : {}),
|
...(finalInviteCode ? { inviteCode: finalInviteCode } : {}),
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 登录成功后清空全局邀请码
|
||||||
|
if (res.code === '0' && store.state.inviteCode) {
|
||||||
|
store.commit('SET_INVITE_CODE', '')
|
||||||
|
}
|
||||||
|
|
||||||
|
return res
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -118,3 +118,30 @@ export function uploadFileToOss(file: File, pathEnum: OssPathEnum = 'ResumeFile'
|
|||||||
headers: { 'Content-Type': 'multipart/form-data' },
|
headers: { 'Content-Type': 'multipart/form-data' },
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ==================== 协议查询相关 ====================
|
||||||
|
|
||||||
|
/** 协议数据结构 */
|
||||||
|
export interface AgreementDto {
|
||||||
|
/** 协议表ID */
|
||||||
|
id?: number
|
||||||
|
/** 协议码,唯一标识一类协议 */
|
||||||
|
agreementCode?: string
|
||||||
|
/** 修改版本 */
|
||||||
|
version?: number
|
||||||
|
/** 协议名称 */
|
||||||
|
agreementName?: string
|
||||||
|
/** 协议内容(富文本/Markdown) */
|
||||||
|
content?: string
|
||||||
|
/** 状态 1=启用 0=禁用 */
|
||||||
|
status?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据协议码查询协议内容
|
||||||
|
* GET /public/agreement?code=xxx
|
||||||
|
* @param code 协议码
|
||||||
|
*/
|
||||||
|
export function fetchAgreement(code: string) {
|
||||||
|
return request.get<any, ApiResult<AgreementDto>>('/public/agreement', { params: { code } })
|
||||||
|
}
|
||||||
|
|||||||
@@ -75,14 +75,17 @@ export interface JobListParams {
|
|||||||
categoryIds?: number[]
|
categoryIds?: number[]
|
||||||
/** 行业 ID 列表 */
|
/** 行业 ID 列表 */
|
||||||
industryIds?: number[]
|
industryIds?: number[]
|
||||||
/** 工作类型:0=全职 1=兼职 */
|
|
||||||
employmentType?: number
|
|
||||||
/** 指定岗位 ID 列表(用于收藏列表) */
|
/** 指定岗位 ID 列表(用于收藏列表) */
|
||||||
jobIds?: number[]
|
jobIds?: number[]
|
||||||
/** 岗位状态过滤(0=有效 1=已下架 2=已过期,可多选,null或空=查所有) */
|
/** 岗位状态过滤(0=有效 1=已下架 2=已过期,可多选,null或空=查所有) */
|
||||||
statusFilter?: number[]
|
statusFilter?: number[]
|
||||||
/** 搜索关键词 */
|
/** 搜索关键词 */
|
||||||
keyword?: string
|
keyword?: string
|
||||||
|
/** 招聘分类 0=校招 1=实习 2=社招 3=其他 */
|
||||||
|
recruitCategory?: number
|
||||||
|
/** 排除岗位ID列表(用于推荐时排除已推荐过的) */
|
||||||
|
excludeJobIds?: number[]
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// ==================== 求职意向 ====================
|
// ==================== 求职意向 ====================
|
||||||
@@ -95,8 +98,10 @@ export interface JobIntention {
|
|||||||
regionCodes?: string[]
|
regionCodes?: string[]
|
||||||
/** 期望行业 ID 列表 */
|
/** 期望行业 ID 列表 */
|
||||||
industryIds?: number[]
|
industryIds?: number[]
|
||||||
/** 就业类型:0=全职,1=实习 */
|
/** 就业类型:0=校招,1=实习,2=社招 */
|
||||||
employmentType?: number
|
employmentType?: number | null
|
||||||
|
/** 招聘分类:0=社招,1=校招,2=实习,3=其他 */
|
||||||
|
recruitCategory?: number | null
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -206,6 +211,8 @@ export interface ApplyListParams {
|
|||||||
pageSize?: number
|
pageSize?: number
|
||||||
/** 投递状态筛选(0=已投递 1=面试中 2=有Offer 3=未通过 4=已结束) */
|
/** 投递状态筛选(0=已投递 1=面试中 2=有Offer 3=未通过 4=已结束) */
|
||||||
status?: number | null
|
status?: number | null
|
||||||
|
/** 搜索关键词 */
|
||||||
|
keyword?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -217,6 +224,7 @@ export function fetchApplyList(params: ApplyListParams = {}) {
|
|||||||
pageNum: params.pageNum ?? 1,
|
pageNum: params.pageNum ?? 1,
|
||||||
pageSize: params.pageSize ?? 10,
|
pageSize: params.pageSize ?? 10,
|
||||||
...(params.status !== null && params.status !== undefined ? { status: params.status } : {}),
|
...(params.status !== null && params.status !== undefined ? { status: params.status } : {}),
|
||||||
|
...(params.keyword ? { keyword: params.keyword } : {}),
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -295,6 +303,8 @@ export interface JobDetailData {
|
|||||||
salary: string
|
salary: string
|
||||||
/** 工作类型 0=全职 1=兼职 */
|
/** 工作类型 0=全职 1=兼职 */
|
||||||
employmentType: number
|
employmentType: number
|
||||||
|
/** 招聘分类 0=社招 1=校招 2=实习 3=其他 */
|
||||||
|
recruitCategory: number
|
||||||
/** 学历要求 0=不限 1=大专 2=本科 3=硕士 4=博士 */
|
/** 学历要求 0=不限 1=大专 2=本科 3=硕士 4=博士 */
|
||||||
education: number
|
education: number
|
||||||
/** 最低工作年限 */
|
/** 最低工作年限 */
|
||||||
|
|||||||
@@ -1,15 +1,35 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
import type { ApiResult } from '@/api/auth'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取当前用户有权限的路由列表
|
* 路由菜单项 — 后端 /route/menu 接口返回的数据结构
|
||||||
*
|
*/
|
||||||
* 【mock 阶段】直接返回写死的数据,模拟后端接口
|
export interface RouteMenuVo {
|
||||||
* 【对接真实接口时】把下面的 mock 数据替换成:
|
/** 主键 */
|
||||||
* return axios.get('/api/user/menus').then(res => res.data)
|
id: string
|
||||||
*
|
/** 根节点ID */
|
||||||
* 返回格式约定:
|
rootId: string
|
||||||
* path — 路由路径
|
/** 父级路由ID */
|
||||||
* name — 路由名称(唯一标识,也用于 removeRoute)
|
parentId: string
|
||||||
* component — 字符串,对应前端组件映射表的 key
|
/** 路由名称(用于侧边栏显示) */
|
||||||
* meta — 可选,传给路由的 meta 信息(图标、标题等)
|
routeName: string
|
||||||
|
/** 前端路径 */
|
||||||
|
routePath: string
|
||||||
|
/** 前端组件路径(对应 componentMap 的 key) */
|
||||||
|
component: string
|
||||||
|
/** 图标 key */
|
||||||
|
icon: string
|
||||||
|
/** 排序 */
|
||||||
|
sortOrder: number
|
||||||
|
/** 是否有使用权限:true=可用 false=无权限(需会员) */
|
||||||
|
accessible: boolean
|
||||||
|
/** 递归子菜单 */
|
||||||
|
children?: RouteMenuVo[]
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 兼容旧版 MenuItemRaw 类型(供 SideNav 和 store 使用)
|
||||||
|
* 在新接口基础上补充原有字段映射
|
||||||
*/
|
*/
|
||||||
export interface MenuItemRaw {
|
export interface MenuItemRaw {
|
||||||
path: string
|
path: string
|
||||||
@@ -22,14 +42,40 @@ export interface MenuItemRaw {
|
|||||||
/** 'footer' 表示该菜单项显示在底部区域而非主导航 */
|
/** 'footer' 表示该菜单项显示在底部区域而非主导航 */
|
||||||
position?: string
|
position?: string
|
||||||
}
|
}
|
||||||
|
/** 排序字段 */
|
||||||
|
sortOrder: number
|
||||||
|
/** 是否有使用权限 */
|
||||||
|
accessible: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 将后端返回的 RouteMenuVo 转换为前端使用的 MenuItemRaw
|
||||||
|
*/
|
||||||
|
function mapRouteMenuToMenuItem(item: RouteMenuVo): MenuItemRaw {
|
||||||
|
return {
|
||||||
|
path: item.routePath,
|
||||||
|
name: item.component, // component 作为路由 name(与 componentMap 对应)
|
||||||
|
component: item.component,
|
||||||
|
meta: {
|
||||||
|
label: item.routeName,
|
||||||
|
icon: item.icon,
|
||||||
|
},
|
||||||
|
sortOrder: item.sortOrder,
|
||||||
|
accessible: item.accessible,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取当前用户有权限的路由菜单列表
|
||||||
|
* GET /route/menu
|
||||||
|
* Cookie 自动携带 Token
|
||||||
|
*/
|
||||||
export async function fetchUserRoutes(): Promise<MenuItemRaw[]> {
|
export async function fetchUserRoutes(): Promise<MenuItemRaw[]> {
|
||||||
// TODO: 替换为真实接口 → return axios.get('/api/user/menus').then(res => res.data)
|
const res = await request.get<any, ApiResult<RouteMenuVo[]>>('/route/menu')
|
||||||
return [
|
if (res.code === '0' && res.data) {
|
||||||
{ path: '/resume', name: 'Resume', component: 'Resume', meta: { label: '简历', icon: 'nav-resume-icon' } },
|
// 按 sortOrder 排序后转换格式
|
||||||
{ path: '/profile', name: 'Profile', component: 'Profile', meta: { label: '个人资料', icon: 'nav-profile-icon' } },
|
const sorted = [...res.data].sort((a, b) => a.sortOrder - b.sortOrder)
|
||||||
{ path: '/agent', name: 'Agent', component: 'Agent', meta: { label: 'AI助手', icon: 'nav-agent-icon', badge: 'NEW' } },
|
return sorted.map(mapRouteMenuToMenuItem)
|
||||||
{ path: '/settings', name: 'Settings', component: 'Settings', meta: { label: '设置', icon: 'nav-setting-icon', position: 'footer' } },
|
}
|
||||||
]
|
return []
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,8 +16,8 @@ export interface MessageDto {
|
|||||||
bizId: number
|
bizId: number
|
||||||
/** 是否已读 */
|
/** 是否已读 */
|
||||||
read: boolean
|
read: boolean
|
||||||
/** 创建时间 */
|
/** 创建时间(毫秒时间戳) */
|
||||||
createTime: { seconds: number; nanos: number }
|
createTime: number
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 分页响应结构 */
|
/** 分页响应结构 */
|
||||||
|
|||||||
@@ -67,8 +67,10 @@ export interface ResumeMainData {
|
|||||||
email?: string
|
email?: string
|
||||||
/** 手机号码 */
|
/** 手机号码 */
|
||||||
mobileNumber?: string
|
mobileNumber?: string
|
||||||
/** 所在城市 */
|
/** 所在城市(名称) */
|
||||||
city?: string
|
city?: string
|
||||||
|
/** 所在城市编码 */
|
||||||
|
regionCode?: string
|
||||||
/** 微信号 */
|
/** 微信号 */
|
||||||
wechatNumber?: string
|
wechatNumber?: string
|
||||||
/** 作品集链接 */
|
/** 作品集链接 */
|
||||||
@@ -251,8 +253,10 @@ export interface SaveResumeMainParams {
|
|||||||
email?: string
|
email?: string
|
||||||
/** 手机号码 */
|
/** 手机号码 */
|
||||||
mobileNumber?: string
|
mobileNumber?: string
|
||||||
/** 所在城市 */
|
/** 所在城市(名称) */
|
||||||
city?: string
|
city?: string
|
||||||
|
/** 所在城市编码 */
|
||||||
|
regionCode?: string
|
||||||
/** 微信号 */
|
/** 微信号 */
|
||||||
wechatNumber?: string
|
wechatNumber?: string
|
||||||
/** 作品集链接 */
|
/** 作品集链接 */
|
||||||
@@ -531,6 +535,16 @@ export function deleteResume(resumeId: string) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设为默认简历
|
||||||
|
* POST /resume/setDefault
|
||||||
|
*/
|
||||||
|
export function setDefaultResume(resumeId: string) {
|
||||||
|
return request.post<any, ApiResult>('/resume/setDefault', null, {
|
||||||
|
params: { resumeId },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// ==================== 简历诊断相关 ====================
|
// ==================== 简历诊断相关 ====================
|
||||||
|
|
||||||
/** 诊断报告数据 */
|
/** 诊断报告数据 */
|
||||||
@@ -644,13 +658,12 @@ export interface PolishIssueData {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 对诊断问题进行 AI 润色(AI 接口)
|
* AI 润色简历段落(Python 后端接口)
|
||||||
* POST /resume/diagnose/issue/{issue_id}/polish
|
* POST /resume/polish
|
||||||
* @param issueId 问题 ID
|
* @param content 待润色的简历段落文本数组
|
||||||
* @param content 用户编辑后的文本段落数组
|
|
||||||
*/
|
*/
|
||||||
export function polishDiagnosisIssue(issueId: string, content: string[]) {
|
export function polishDiagnosisIssue(content: string[]) {
|
||||||
return aiService.post<AiResult<PolishIssueData>>(`/resume/diagnose/issue/${issueId}/polish`, { content }, {
|
return aiService.post<AiResult<PolishIssueData>>('/resume/polish', { content }, {
|
||||||
transformResponse: [(data: string) => {
|
transformResponse: [(data: string) => {
|
||||||
try {
|
try {
|
||||||
const processed = data.replace(/:\s*(\d{16,})/g, ':"$1"')
|
const processed = data.replace(/:\s*(\d{16,})/g, ':"$1"')
|
||||||
|
|||||||
|
After Width: | Height: | Size: 68 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 101 KiB |
|
After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 911 B |
|
After Width: | Height: | Size: 839 B |
|
After Width: | Height: | Size: 998 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 480 B |
|
After Width: | Height: | Size: 794 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 9.2 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 123 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 402 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
@@ -518,6 +518,9 @@ body:not(#_) {
|
|||||||
.color-9B9EAB{
|
.color-9B9EAB{
|
||||||
color:#9B9EAB;
|
color:#9B9EAB;
|
||||||
}
|
}
|
||||||
|
.color-accent{
|
||||||
|
color:$accent;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*border*/
|
/*border*/
|
||||||
@@ -737,10 +740,13 @@ body:not(#_) {
|
|||||||
.ml100 {margin-left: 1rem;}
|
.ml100 {margin-left: 1rem;}
|
||||||
.ml135 {margin-left: 1.35rem;}
|
.ml135 {margin-left: 1.35rem;}
|
||||||
|
|
||||||
|
.mlauto {margin-left: auto;}
|
||||||
|
|
||||||
/* margin-right */
|
/* margin-right */
|
||||||
.mr0 {margin-right: 0rem;}
|
.mr0 {margin-right: 0rem;}
|
||||||
.mr1 {margin-right: 0.01rem;} .mr2 {margin-right: 0.02rem;} .mr3 {margin-right: 0.03rem;} .mr4 {margin-right: 0.04rem;} .mr5 {margin-right: 0.05rem;} .mr6 {margin-right: 0.06rem;} .mr7 {margin-right: 0.07rem;} .mr8 {margin-right: 0.08rem;} .mr9 {margin-right: 0.09rem;} .mr10 {margin-right: 0.1rem;} .mr11 {margin-right: 0.11rem;} .mr12 {margin-right: 0.12rem;} .mr13 {margin-right: 0.13rem;} .mr14 {margin-right: 0.14rem;} .mr15 {margin-right: 0.15rem;} .mr16 {margin-right: 0.16rem;} .mr17 {margin-right: 0.17rem;} .mr18 {margin-right: 0.18rem;} .mr19 {margin-right: 0.19rem;} .mr20 {margin-right: 0.2rem;} .mr21 {margin-right: 0.21rem;} .mr22 {margin-right: 0.22rem;} .mr23 {margin-right: 0.23rem;} .mr24 {margin-right: 0.24rem;} .mr25 {margin-right: 0.25rem;} .mr26 {margin-right: 0.26rem;} .mr27 {margin-right: 0.27rem;} .mr28 {margin-right: 0.28rem;} .mr29 {margin-right: 0.29rem;} .mr30 {margin-right: 0.3rem;} .mr31 {margin-right: 0.31rem;} .mr32 {margin-right: 0.32rem;} .mr33 {margin-right: 0.33rem;} .mr34 {margin-right: 0.34rem;} .mr35 {margin-right: 0.35rem;} .mr36 {margin-right: 0.36rem;} .mr37 {margin-right: 0.37rem;} .mr38 {margin-right: 0.38rem;} .mr39 {margin-right: 0.39rem;} .mr40 {margin-right: 0.4rem;} .mr41 {margin-right: 0.41rem;} .mr42 {margin-right: 0.42rem;} .mr43 {margin-right: 0.43rem;} .mr44 {margin-right: 0.44rem;} .mr45 {margin-right: 0.45rem;} .mr46 {margin-right: 0.46rem;} .mr47 {margin-right: 0.47rem;} .mr48 {margin-right: 0.48rem;} .mr49 {margin-right: 0.49rem;} .mr50 {margin-right: 0.5rem;} .mr51 {margin-right: 0.51rem;} .mr52 {margin-right: 0.52rem;} .mr53 {margin-right: 0.53rem;} .mr54 {margin-right: 0.54rem;} .mr55 {margin-right: 0.55rem;} .mr56 {margin-right: 0.56rem;} .mr57 {margin-right: 0.57rem;} .mr58 {margin-right: 0.58rem;} .mr59 {margin-right: 0.59rem;} .mr60 {margin-right: 0.6rem;} .mr61 {margin-right: 0.61rem;} .mr62 {margin-right: 0.62rem;} .mr63 {margin-right: 0.63rem;} .mr64 {margin-right: 0.64rem;} .mr65 {margin-right: 0.65rem;} .mr66 {margin-right: 0.66rem;} .mr67 {margin-right: 0.67rem;} .mr68 {margin-right: 0.68rem;} .mr69 {margin-right: 0.69rem;} .mr70 {margin-right: 0.7rem;} .mr71 {margin-right: 0.71rem;} .mr72 {margin-right: 0.72rem;} .mr73 {margin-right: 0.73rem;} .mr74 {margin-right: 0.74rem;} .mr75 {margin-right: 0.75rem;} .mr76 {margin-right: 0.76rem;} .mr77 {margin-right: 0.77rem;} .mr78 {margin-right: 0.78rem;} .mr79 {margin-right: 0.79rem;} .mr80 {margin-right: 0.8rem;} .mr81 {margin-right: 0.81rem;} .mr82 {margin-right: 0.82rem;} .mr83 {margin-right: 0.83rem;} .mr84 {margin-right: 0.84rem;} .mr85 {margin-right: 0.85rem;} .mr86 {margin-right: 0.86rem;} .mr87 {margin-right: 0.87rem;} .mr88 {margin-right: 0.88rem;} .mr89 {margin-right: 0.89rem;} .mr90 {margin-right: 0.9rem;} .mr91 {margin-right: 0.91rem;} .mr92 {margin-right: 0.92rem;} .mr93 {margin-right: 0.93rem;} .mr94 {margin-right: 0.94rem;} .mr95 {margin-right: 0.95rem;} .mr96 {margin-right: 0.96rem;} .mr97 {margin-right: 0.97rem;} .mr98 {margin-right: 0.98rem;} .mr99 {margin-right: 0.99rem;}
|
.mr1 {margin-right: 0.01rem;} .mr2 {margin-right: 0.02rem;} .mr3 {margin-right: 0.03rem;} .mr4 {margin-right: 0.04rem;} .mr5 {margin-right: 0.05rem;} .mr6 {margin-right: 0.06rem;} .mr7 {margin-right: 0.07rem;} .mr8 {margin-right: 0.08rem;} .mr9 {margin-right: 0.09rem;} .mr10 {margin-right: 0.1rem;} .mr11 {margin-right: 0.11rem;} .mr12 {margin-right: 0.12rem;} .mr13 {margin-right: 0.13rem;} .mr14 {margin-right: 0.14rem;} .mr15 {margin-right: 0.15rem;} .mr16 {margin-right: 0.16rem;} .mr17 {margin-right: 0.17rem;} .mr18 {margin-right: 0.18rem;} .mr19 {margin-right: 0.19rem;} .mr20 {margin-right: 0.2rem;} .mr21 {margin-right: 0.21rem;} .mr22 {margin-right: 0.22rem;} .mr23 {margin-right: 0.23rem;} .mr24 {margin-right: 0.24rem;} .mr25 {margin-right: 0.25rem;} .mr26 {margin-right: 0.26rem;} .mr27 {margin-right: 0.27rem;} .mr28 {margin-right: 0.28rem;} .mr29 {margin-right: 0.29rem;} .mr30 {margin-right: 0.3rem;} .mr31 {margin-right: 0.31rem;} .mr32 {margin-right: 0.32rem;} .mr33 {margin-right: 0.33rem;} .mr34 {margin-right: 0.34rem;} .mr35 {margin-right: 0.35rem;} .mr36 {margin-right: 0.36rem;} .mr37 {margin-right: 0.37rem;} .mr38 {margin-right: 0.38rem;} .mr39 {margin-right: 0.39rem;} .mr40 {margin-right: 0.4rem;} .mr41 {margin-right: 0.41rem;} .mr42 {margin-right: 0.42rem;} .mr43 {margin-right: 0.43rem;} .mr44 {margin-right: 0.44rem;} .mr45 {margin-right: 0.45rem;} .mr46 {margin-right: 0.46rem;} .mr47 {margin-right: 0.47rem;} .mr48 {margin-right: 0.48rem;} .mr49 {margin-right: 0.49rem;} .mr50 {margin-right: 0.5rem;} .mr51 {margin-right: 0.51rem;} .mr52 {margin-right: 0.52rem;} .mr53 {margin-right: 0.53rem;} .mr54 {margin-right: 0.54rem;} .mr55 {margin-right: 0.55rem;} .mr56 {margin-right: 0.56rem;} .mr57 {margin-right: 0.57rem;} .mr58 {margin-right: 0.58rem;} .mr59 {margin-right: 0.59rem;} .mr60 {margin-right: 0.6rem;} .mr61 {margin-right: 0.61rem;} .mr62 {margin-right: 0.62rem;} .mr63 {margin-right: 0.63rem;} .mr64 {margin-right: 0.64rem;} .mr65 {margin-right: 0.65rem;} .mr66 {margin-right: 0.66rem;} .mr67 {margin-right: 0.67rem;} .mr68 {margin-right: 0.68rem;} .mr69 {margin-right: 0.69rem;} .mr70 {margin-right: 0.7rem;} .mr71 {margin-right: 0.71rem;} .mr72 {margin-right: 0.72rem;} .mr73 {margin-right: 0.73rem;} .mr74 {margin-right: 0.74rem;} .mr75 {margin-right: 0.75rem;} .mr76 {margin-right: 0.76rem;} .mr77 {margin-right: 0.77rem;} .mr78 {margin-right: 0.78rem;} .mr79 {margin-right: 0.79rem;} .mr80 {margin-right: 0.8rem;} .mr81 {margin-right: 0.81rem;} .mr82 {margin-right: 0.82rem;} .mr83 {margin-right: 0.83rem;} .mr84 {margin-right: 0.84rem;} .mr85 {margin-right: 0.85rem;} .mr86 {margin-right: 0.86rem;} .mr87 {margin-right: 0.87rem;} .mr88 {margin-right: 0.88rem;} .mr89 {margin-right: 0.89rem;} .mr90 {margin-right: 0.9rem;} .mr91 {margin-right: 0.91rem;} .mr92 {margin-right: 0.92rem;} .mr93 {margin-right: 0.93rem;} .mr94 {margin-right: 0.94rem;} .mr95 {margin-right: 0.95rem;} .mr96 {margin-right: 0.96rem;} .mr97 {margin-right: 0.97rem;} .mr98 {margin-right: 0.98rem;} .mr99 {margin-right: 0.99rem;}
|
||||||
.mr100 {margin-right: 1rem;}
|
.mr100 {margin-right: 1rem;}
|
||||||
|
.mrauto {margin-right: auto;}
|
||||||
|
|
||||||
/* margin-right-left */
|
/* margin-right-left */
|
||||||
.mrl0 {margin-right: 0rem;margin-left: 0rem;}
|
.mrl0 {margin-right: 0rem;margin-left: 0rem;}
|
||||||
|
|||||||
@@ -0,0 +1,266 @@
|
|||||||
|
@use '../variables' as *;
|
||||||
|
|
||||||
|
/* 申请进度面板样式 */
|
||||||
|
.agent-apply-progress-panel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
background: $bg-white;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
/* 顶部标题栏 */
|
||||||
|
&__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.16rem 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 0.16rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $text-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 关闭按钮 */
|
||||||
|
&__close-btn {
|
||||||
|
width: 0.28rem;
|
||||||
|
height: 0.28rem;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 筛选栏 */
|
||||||
|
&__filter {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.1rem;
|
||||||
|
padding: 0 0.2rem 0.14rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 下拉选择容器 */
|
||||||
|
&__select-wrap {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__select {
|
||||||
|
padding: 0.08rem 0.12rem;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: 0.06rem;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $text-dark;
|
||||||
|
background: $bg-white;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
min-width: 1rem;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $accent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 搜索框 */
|
||||||
|
&__search {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.08rem 0.12rem;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: 0.06rem;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $text-dark;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: $text-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $accent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 列表区域(可滚动) */
|
||||||
|
&__list {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 0 0.2rem 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 单个岗位项 */
|
||||||
|
&__item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.14rem 0.16rem;
|
||||||
|
background: $bg-main;
|
||||||
|
border-radius: 0.12rem;
|
||||||
|
margin-bottom: 0.1rem;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左侧信息区域 */
|
||||||
|
&__info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.12rem;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 公司 Logo */
|
||||||
|
&__logo {
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
border-radius: 0.08rem;
|
||||||
|
background: $bg-middle;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 0.22rem;
|
||||||
|
height: 0.22rem;
|
||||||
|
color: $text-middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 岗位详情 */
|
||||||
|
&__detail {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__company {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: $text-dark;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__position {
|
||||||
|
font-size: 0.12rem;
|
||||||
|
color: $text-middle;
|
||||||
|
margin-top: 0.02rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标签 */
|
||||||
|
&__tags {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.06rem;
|
||||||
|
margin-top: 0.06rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tag {
|
||||||
|
font-size: 0.11rem;
|
||||||
|
color: $text-middle;
|
||||||
|
background: $bg-white;
|
||||||
|
padding: 0.02rem 0.08rem;
|
||||||
|
border-radius: 0.04rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧区域 */
|
||||||
|
&__right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.1rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 匹配度环 */
|
||||||
|
&__score {
|
||||||
|
position: relative;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__ring {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__score-text {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-size: 0.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $text-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 状态下拉 */
|
||||||
|
&__status-select {
|
||||||
|
padding: 0.05rem 0.1rem;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: 0.04rem;
|
||||||
|
font-size: 0.12rem;
|
||||||
|
color: $text-dark;
|
||||||
|
background: $bg-white;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $accent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 删除按钮 */
|
||||||
|
&__delete-btn {
|
||||||
|
width: 0.2rem;
|
||||||
|
height: 0.2rem;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover svg circle {
|
||||||
|
fill: $danger;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 加载中 */
|
||||||
|
&__loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.16rem 0;
|
||||||
|
font-size: 0.12rem;
|
||||||
|
color: $text-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 暂无更多数据 */
|
||||||
|
&__no-more {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.16rem 0;
|
||||||
|
font-size: 0.12rem;
|
||||||
|
color: $text-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 空状态 */
|
||||||
|
&__empty {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.4rem 0;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $text-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,19 +1,26 @@
|
|||||||
@use '../variables' as *;
|
@use '../variables' as *;
|
||||||
|
|
||||||
// ==================== Agent会话岗位列表组件样式 ====================
|
// ==================== Agent推荐岗位列表组件样式 ====================
|
||||||
.agent-chat-job-list {
|
.agent-chat-job-list {
|
||||||
background: $bg-middle;
|
background: $bg-middle;
|
||||||
border-radius: 0.12rem;
|
border-radius: 0.12rem;
|
||||||
padding: 0.2rem;
|
padding: 0.24rem;
|
||||||
margin-top: 0.16rem;
|
font-size: 0.14rem;
|
||||||
|
|
||||||
|
// 标题
|
||||||
|
&__header {
|
||||||
|
font-size: 0.18rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: $text-dark;
|
||||||
|
margin-bottom: 0.06rem;
|
||||||
|
}
|
||||||
|
|
||||||
// 推荐说明文字
|
// 推荐说明文字
|
||||||
&__summary {
|
&__summary {
|
||||||
font-size: 0.13rem;
|
font-size: 0.13rem;
|
||||||
color: $text-dark;
|
color: $text-middle;
|
||||||
font-weight: 500;
|
margin-bottom: 0.18rem;
|
||||||
margin-bottom: 0.14rem;
|
line-height: 1.5;
|
||||||
line-height: 1.6;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 单个岗位项
|
// 单个岗位项
|
||||||
@@ -23,67 +30,82 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
background: $bg-white;
|
background: $bg-white;
|
||||||
border-radius: 0.1rem;
|
border-radius: 0.1rem;
|
||||||
padding: 0.14rem 0.16rem;
|
padding: 0.16rem 0.2rem;
|
||||||
margin-bottom: 0.08rem;
|
margin-bottom: 0.1rem;
|
||||||
|
|
||||||
&:last-of-type {
|
&:last-of-type {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 左侧信息区域
|
// 左侧信息区域(可点击)
|
||||||
&__info {
|
&__info {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.12rem;
|
gap: 0.14rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 公司 Logo
|
// 匹配度环形容器
|
||||||
&__logo {
|
&__score {
|
||||||
width: 0.36rem;
|
position: relative;
|
||||||
height: 0.36rem;
|
width: 0.48rem;
|
||||||
border-radius: 0.06rem;
|
height: 0.48rem;
|
||||||
background: $bg-main;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
color: $text-middle;
|
}
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
img {
|
// 环形 SVG
|
||||||
|
&__ring {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
// 匹配度数字
|
||||||
width: 0.2rem;
|
&__score-text {
|
||||||
height: 0.2rem;
|
position: absolute;
|
||||||
}
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: $text-dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 岗位详情
|
// 岗位详情
|
||||||
&__detail {
|
&__detail {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 公司名称
|
// 岗位标题行(岗位名 + 公司名)
|
||||||
&__company {
|
&__title-row {
|
||||||
font-size: 0.14rem;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.08rem;
|
||||||
|
margin-bottom: 0.04rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 岗位名称
|
||||||
|
&__title {
|
||||||
|
font-size: 0.15rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $text-dark;
|
color: $text-dark;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 岗位名称
|
// 公司名前的圆点
|
||||||
&__title {
|
&__company-dot {
|
||||||
font-size: 0.12rem;
|
font-size: 0.08rem;
|
||||||
|
color: $text-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 公司名称
|
||||||
|
&__company {
|
||||||
|
font-size: 0.13rem;
|
||||||
color: $text-middle;
|
color: $text-middle;
|
||||||
line-height: 1.4;
|
white-space: nowrap;
|
||||||
margin-bottom: 0.04rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 标签行
|
// 标签行
|
||||||
@@ -102,55 +124,109 @@
|
|||||||
border-radius: 0.03rem;
|
border-radius: 0.03rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 匹配度环形容器
|
// 右侧操作按钮区域
|
||||||
&__score {
|
&__actions {
|
||||||
position: relative;
|
display: flex;
|
||||||
width: 0.44rem;
|
align-items: center;
|
||||||
height: 0.44rem;
|
gap: 0.14rem;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin-left: 0.12rem;
|
margin-left: 0.16rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 环形 SVG
|
// 不再推荐按钮
|
||||||
&__ring {
|
&__dismiss-btn {
|
||||||
width: 100%;
|
font-size: 0.12rem;
|
||||||
height: 100%;
|
color: $text-light;
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $text-middle;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 匹配度数字
|
// 加入投递按钮
|
||||||
&__score-text {
|
&__add-btn {
|
||||||
position: absolute;
|
height: 0.32rem;
|
||||||
top: 50%;
|
padding: 0 0.16rem;
|
||||||
left: 50%;
|
background: $accent;
|
||||||
transform: translate(-50%, -50%);
|
color: $bg-white;
|
||||||
font-size: 0.11rem;
|
border: none;
|
||||||
font-weight: 600;
|
border-radius: 0.16rem;
|
||||||
color: $text-dark;
|
font-size: 0.12rem;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
line-height: 0.32rem;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 已加入状态
|
||||||
|
&--added {
|
||||||
|
background: $bg-main;
|
||||||
|
color: $text-middle;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 底部按钮区域
|
// 底部按钮区域
|
||||||
&__footer {
|
&__footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-top: 0.14rem;
|
gap: 0.16rem;
|
||||||
|
margin-top: 0.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 查看全部岗位按钮
|
// 换一批按钮
|
||||||
&__view-all-btn {
|
&__refresh-btn {
|
||||||
height: 0.38rem;
|
height: 0.4rem;
|
||||||
padding: 0 0.32rem;
|
padding: 0 0.4rem;
|
||||||
background: $btn-dark;
|
background: $bg-white;
|
||||||
color: $bg-white;
|
color: $text-dark;
|
||||||
border: none;
|
border: 1px solid $border-color;
|
||||||
border-radius: 0.19rem;
|
border-radius: 0.2rem;
|
||||||
font-size: 0.13rem;
|
font-size: 0.14rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.25s ease;
|
transition: all 0.2s ease;
|
||||||
line-height: 0.38rem;
|
line-height: 0.4rem;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $btn-dark-hover;
|
border-color: $accent;
|
||||||
|
color: $accent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 全部添加按钮
|
||||||
|
&__add-all-btn {
|
||||||
|
height: 0.4rem;
|
||||||
|
padding: 0 0.4rem;
|
||||||
|
background: $accent;
|
||||||
|
color: $bg-white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
font-size: 0.14rem;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
line-height: 0.4rem;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.85;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
|
|||||||
@@ -0,0 +1,222 @@
|
|||||||
|
@use '../variables' as *;
|
||||||
|
|
||||||
|
/* Agent岗位预览面板样式 */
|
||||||
|
.agent-job-preview-panel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
background: $bg-white;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
/* 顶部标题栏 */
|
||||||
|
&__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.16rem 0.2rem;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 返回按钮 */
|
||||||
|
&__back {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.06rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.15rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: $text-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__back-icon {
|
||||||
|
width: 0.16rem;
|
||||||
|
height: 0.16rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 添加按钮 */
|
||||||
|
&__add-btn {
|
||||||
|
padding: 0.06rem 0.16rem;
|
||||||
|
background: $btn-dark;
|
||||||
|
color: $bg-white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.06rem;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $btn-dark-hover;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移出按钮 */
|
||||||
|
&__remove-btn {
|
||||||
|
padding: 0.06rem 0.16rem;
|
||||||
|
background: $bg-white;
|
||||||
|
color: $text-middle;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: 0.06rem;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s, color 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $bg-main;
|
||||||
|
color: $danger;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 内容区域(可滚动) */
|
||||||
|
&__body {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 岗位卡片 */
|
||||||
|
&__card {
|
||||||
|
background: $bg-main;
|
||||||
|
border-radius: 0.12rem;
|
||||||
|
padding: 0.2rem;
|
||||||
|
margin-bottom: 0.16rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__card-top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__card-left {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 公司行 */
|
||||||
|
&__company-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.08rem;
|
||||||
|
margin-bottom: 0.08rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__company-icon {
|
||||||
|
width: 0.28rem;
|
||||||
|
height: 0.28rem;
|
||||||
|
border-radius: 0.06rem;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: $bg-middle;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 0.18rem;
|
||||||
|
height: 0.18rem;
|
||||||
|
color: $text-middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__company-name {
|
||||||
|
font-size: 0.14rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: $text-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__time {
|
||||||
|
font-size: 0.12rem;
|
||||||
|
color: $text-light;
|
||||||
|
margin-left: 0.06rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 岗位标题 */
|
||||||
|
&__job-title {
|
||||||
|
font-size: 0.17rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $text-dark;
|
||||||
|
margin: 0.06rem 0 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 元信息 */
|
||||||
|
&__meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.16rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__meta-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.04rem;
|
||||||
|
font-size: 0.12rem;
|
||||||
|
color: $text-middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__meta-icon {
|
||||||
|
width: 0.14rem;
|
||||||
|
height: 0.14rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 匹配度环 */
|
||||||
|
&__match {
|
||||||
|
position: relative;
|
||||||
|
width: 0.6rem;
|
||||||
|
height: 0.6rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__ring-svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__match-text {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-size: 0.13rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $text-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 内容段落 */
|
||||||
|
&__section {
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__section-title {
|
||||||
|
font-size: 0.14rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $text-dark;
|
||||||
|
margin-bottom: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__section-content {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $text-middle;
|
||||||
|
line-height: 1.8;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -110,6 +110,7 @@
|
|||||||
gap: 0.12rem;
|
gap: 0.12rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 公司 Logo
|
// 公司 Logo
|
||||||
|
|||||||
@@ -0,0 +1,203 @@
|
|||||||
|
@use '../variables' as *;
|
||||||
|
|
||||||
|
/* 待投递岗位列表面板样式 */
|
||||||
|
.agent-pending-job-list-panel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
background: $bg-white;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
/* 顶部标题栏 */
|
||||||
|
&__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.16rem 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 0.16rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $text-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 关闭按钮 */
|
||||||
|
&__close-btn {
|
||||||
|
width: 0.28rem;
|
||||||
|
height: 0.28rem;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 列表区域(可滚动) */
|
||||||
|
&__list {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 0 0.2rem 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 单个岗位项 */
|
||||||
|
&__item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.14rem 0.16rem;
|
||||||
|
background: $bg-main;
|
||||||
|
border-radius: 0.12rem;
|
||||||
|
margin-bottom: 0.1rem;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左侧信息区域 */
|
||||||
|
&__info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.12rem;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 公司 Logo */
|
||||||
|
&__logo {
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
border-radius: 0.08rem;
|
||||||
|
background: $bg-middle;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 0.22rem;
|
||||||
|
height: 0.22rem;
|
||||||
|
color: $text-middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 岗位详情 */
|
||||||
|
&__detail {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__company {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: $text-dark;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__position {
|
||||||
|
font-size: 0.12rem;
|
||||||
|
color: $text-middle;
|
||||||
|
margin-top: 0.02rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标签 */
|
||||||
|
&__tags {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.06rem;
|
||||||
|
margin-top: 0.06rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tag {
|
||||||
|
font-size: 0.11rem;
|
||||||
|
color: $text-middle;
|
||||||
|
background: $bg-white;
|
||||||
|
padding: 0.02rem 0.08rem;
|
||||||
|
border-radius: 0.04rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧区域 */
|
||||||
|
&__right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.14rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 匹配度环 */
|
||||||
|
&__score {
|
||||||
|
position: relative;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__ring {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__score-text {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-size: 0.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $text-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移出按钮 */
|
||||||
|
&__remove-btn {
|
||||||
|
padding: 0.06rem 0.16rem;
|
||||||
|
background: $text-dark;
|
||||||
|
color: $bg-white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
font-size: 0.12rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 加载中 */
|
||||||
|
&__loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.16rem 0;
|
||||||
|
font-size: 0.12rem;
|
||||||
|
color: $text-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 暂无更多数据 */
|
||||||
|
&__no-more {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.16rem 0;
|
||||||
|
font-size: 0.12rem;
|
||||||
|
color: $text-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 空状态 */
|
||||||
|
&__empty {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.4rem 0;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $text-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,185 @@
|
|||||||
|
@use '../variables' as *;
|
||||||
|
|
||||||
|
// ==================== Agent设置面板样式(精简版) ====================
|
||||||
|
.agent-setting-panel {
|
||||||
|
height: 100%;
|
||||||
|
background: $bg-middle;
|
||||||
|
border-radius: 0.12rem;
|
||||||
|
font-size: 0.14rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
// 隐藏滚动条
|
||||||
|
scrollbar-width: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
&::-webkit-scrollbar { display: none; }
|
||||||
|
|
||||||
|
// 内容区域
|
||||||
|
&__body {
|
||||||
|
padding: 0.28rem 0.24rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 每个设置区块
|
||||||
|
&__section {
|
||||||
|
margin-bottom: 0.28rem;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 区块头部(标题 + 编辑按钮)
|
||||||
|
&__section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.1rem;
|
||||||
|
margin-bottom: 0.12rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 区块标题
|
||||||
|
&__section-title {
|
||||||
|
font-size: 0.16rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: $text-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑按钮
|
||||||
|
&__edit-btn {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $accent;
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 个人资料信息
|
||||||
|
&__profile-info {
|
||||||
|
padding-left: 0.02rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__profile-name {
|
||||||
|
font-size: 0.18rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $text-dark;
|
||||||
|
margin-bottom: 0.04rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__profile-sub {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $text-middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 求职目标标签
|
||||||
|
&__goal-tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.08rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__goal-tag {
|
||||||
|
padding: 0.06rem 0.14rem;
|
||||||
|
border: 1px solid $accent;
|
||||||
|
border-radius: 0.16rem;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $accent;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 空状态文字
|
||||||
|
&__empty-text {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $text-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 简历选择下拉
|
||||||
|
&__resume-select {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0.06rem;
|
||||||
|
|
||||||
|
.el-input__wrapper {
|
||||||
|
border-radius: 0.08rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 投递偏好项
|
||||||
|
&__pref-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.12rem 0;
|
||||||
|
|
||||||
|
& + & {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__pref-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.1rem;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 勾选图标
|
||||||
|
&__pref-check {
|
||||||
|
width: 0.2rem;
|
||||||
|
height: 0.2rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: $text-light;
|
||||||
|
margin-top: 0.02rem;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
color: $text-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 偏好文字
|
||||||
|
&__pref-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.03rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__pref-label {
|
||||||
|
font-size: 0.14rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: $text-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__pref-desc {
|
||||||
|
font-size: 0.12rem;
|
||||||
|
color: $text-light;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 浏览器按钮
|
||||||
|
&__browser-btns {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.1rem;
|
||||||
|
margin-top: 0.08rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__browser-btn {
|
||||||
|
padding: 0.08rem 0.2rem;
|
||||||
|
background: $bg-white;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $text-dark;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: $accent;
|
||||||
|
color: $accent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,170 @@
|
|||||||
|
@use '../variables' as *;
|
||||||
|
|
||||||
|
// 协议预览弹窗样式
|
||||||
|
.agreement-preview-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 2000;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.agreement-preview-dialog {
|
||||||
|
width: 7rem;
|
||||||
|
max-width: 90vw;
|
||||||
|
height: 80vh;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 0.12rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
// 顶部标题栏
|
||||||
|
&__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.16rem 0.24rem;
|
||||||
|
border-bottom: 1px solid #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 0.18rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $text-dark;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__close {
|
||||||
|
font-size: 0.18rem;
|
||||||
|
color: #9ca3af;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.04rem;
|
||||||
|
transition: color 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #374151;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 内容区域
|
||||||
|
&__body {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 0.24rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.4rem 0;
|
||||||
|
color: #999;
|
||||||
|
font-size: 0.14rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Markdown 渲染内容样式
|
||||||
|
&__content {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: #555;
|
||||||
|
line-height: 1.8;
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: $text-dark;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0.14rem 0 0.08rem;
|
||||||
|
}
|
||||||
|
h1 { font-size: 0.2rem; }
|
||||||
|
h2 { font-size: 0.17rem; }
|
||||||
|
h3 { font-size: 0.15rem; }
|
||||||
|
h4 { font-size: 0.14rem; }
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0 0 0.08rem;
|
||||||
|
text-align: justify;
|
||||||
|
&:last-child { margin-bottom: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
ul, ol {
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
margin: 0.06rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 0.04rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 700;
|
||||||
|
color: $text-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #2563eb;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
border-left: 3px solid #cbd5e1;
|
||||||
|
padding-left: 0.1rem;
|
||||||
|
margin: 0.08rem 0;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0.1rem 0;
|
||||||
|
font-size: 0.12rem;
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
padding: 0.06rem 0.1rem;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background: #f8fafc;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $text-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:nth-child(even) {
|
||||||
|
background: #fafbfc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid #e5e7eb;
|
||||||
|
margin: 0.1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background: #f1f5f9;
|
||||||
|
padding: 0.01rem 0.04rem;
|
||||||
|
border-radius: 0.03rem;
|
||||||
|
font-size: 0.12rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background: #1e293b;
|
||||||
|
color: #e2e8f0;
|
||||||
|
padding: 0.1rem 0.12rem;
|
||||||
|
border-radius: 0.06rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
margin: 0.08rem 0;
|
||||||
|
|
||||||
|
code {
|
||||||
|
background: none;
|
||||||
|
padding: 0;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -2,8 +2,10 @@
|
|||||||
@use '../variables' as *;
|
@use '../variables' as *;
|
||||||
|
|
||||||
.ai-chat {
|
.ai-chat {
|
||||||
width: 4.0rem;
|
width: var(--chat-width, 4.0rem);
|
||||||
height: 100vh;
|
max-width: 4.0rem;
|
||||||
|
min-width: 1.5rem;
|
||||||
|
height: var(--app-height, 100vh);
|
||||||
background: #f3f4f6;
|
background: #f3f4f6;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -19,8 +21,8 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
background: #0F172B;
|
background: #0F172B;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 0.12rem 0.18rem;
|
padding: 0.12rem 0.14rem;
|
||||||
font-size: 0.15rem;
|
font-size: 0.14rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 0.2rem;
|
border-radius: 0.2rem;
|
||||||
@@ -94,6 +96,95 @@
|
|||||||
font-size: 0.13rem;
|
font-size: 0.13rem;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
max-width: 85%;
|
max-width: 85%;
|
||||||
|
|
||||||
|
// ===== Markdown 渲染样式 =====
|
||||||
|
p {
|
||||||
|
margin: 0 0 0.08rem;
|
||||||
|
&:last-child { margin-bottom: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 0.12rem 0 0.06rem;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
h1 { font-size: 0.18rem; }
|
||||||
|
h2 { font-size: 0.16rem; }
|
||||||
|
h3 { font-size: 0.14rem; }
|
||||||
|
|
||||||
|
ul, ol {
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
margin: 0.06rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 0.04rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background: #f1f5f9;
|
||||||
|
padding: 0.01rem 0.04rem;
|
||||||
|
border-radius: 0.03rem;
|
||||||
|
font-size: 0.12rem;
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background: #1e293b;
|
||||||
|
color: #e2e8f0;
|
||||||
|
padding: 0.1rem 0.12rem;
|
||||||
|
border-radius: 0.06rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
margin: 0.08rem 0;
|
||||||
|
|
||||||
|
code {
|
||||||
|
background: none;
|
||||||
|
padding: 0;
|
||||||
|
color: inherit;
|
||||||
|
font-size: 0.11rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
border-left: 3px solid #cbd5e1;
|
||||||
|
padding-left: 0.1rem;
|
||||||
|
margin: 0.08rem 0;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #2563eb;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin: 0.08rem 0;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 0.12rem;
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
padding: 0.06rem 0.1rem;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background: #f8fafc;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:nth-child(even) {
|
||||||
|
background: #fafbfc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid #e5e7eb;
|
||||||
|
margin: 0.1rem 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__msg--ai &__msg-bubble {
|
&__msg--ai &__msg-bubble {
|
||||||
|
|||||||
@@ -5,8 +5,8 @@
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100vw;
|
width: 100%;
|
||||||
height: 100vh;
|
height: var(--app-height, 100vh);
|
||||||
z-index: 2000;
|
z-index: 2000;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -691,7 +691,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
background: $bg-white;
|
background: $bg-white;
|
||||||
width: 10.4rem;
|
width: 10.4rem;
|
||||||
height: 100vh;
|
height: var(--app-height, 100vh);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -1021,8 +1021,8 @@
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100vw;
|
width: 100%;
|
||||||
height: 100vh;
|
height: var(--app-height, 100vh);
|
||||||
background: $overlay-bg;
|
background: $overlay-bg;
|
||||||
z-index: 3000;
|
z-index: 3000;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -0,0 +1,77 @@
|
|||||||
|
/* 会员权限拦截弹窗样式 */
|
||||||
|
@use '../variables' as *;
|
||||||
|
|
||||||
|
.member-access-dialog-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: $overlay-bg;
|
||||||
|
z-index: 9999;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 0.14rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-access-dialog {
|
||||||
|
background: $bg-white;
|
||||||
|
border-radius: 0.12rem;
|
||||||
|
padding: 0.4rem 0.36rem 0.3rem;
|
||||||
|
width: 3.8rem;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 0.04rem 0.2rem rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 锁图标 */
|
||||||
|
.member-access-dialog__icon {
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-access-dialog__lock-svg {
|
||||||
|
width: 0.48rem;
|
||||||
|
height: 0.48rem;
|
||||||
|
color: $accent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 提示文字 */
|
||||||
|
.member-access-dialog__text {
|
||||||
|
font-size: 0.15rem;
|
||||||
|
color: $text-dark;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 操作按钮区域 */
|
||||||
|
.member-access-dialog__actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.16rem;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-access-dialog__btn {
|
||||||
|
flex: 1;
|
||||||
|
height: 0.4rem;
|
||||||
|
border-radius: 0.06rem;
|
||||||
|
font-size: 0.14rem;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 灰色取消按钮 */
|
||||||
|
.member-access-dialog__btn--cancel {
|
||||||
|
background: $bg-main;
|
||||||
|
color: $text-middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 主题色确认按钮 */
|
||||||
|
.member-access-dialog__btn--confirm {
|
||||||
|
background: $btn-dark;
|
||||||
|
color: $bg-white;
|
||||||
|
}
|
||||||
@@ -6,7 +6,7 @@
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: $overlay-bg;
|
background: $overlay-bg;
|
||||||
z-index: 2000;
|
z-index: 2300;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -1180,6 +1180,14 @@
|
|||||||
border-radius: 0.08rem;
|
border-radius: 0.08rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 微信二维码 iframe */
|
||||||
|
&__wechat-qr-iframe {
|
||||||
|
width: 2.2rem;
|
||||||
|
height: 2.2rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.08rem;
|
||||||
|
}
|
||||||
|
|
||||||
&__qrcode-placeholder {
|
&__qrcode-placeholder {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@@ -1,95 +1,50 @@
|
|||||||
@use '../variables' as *;
|
@use '../variables' as *;
|
||||||
@use 'sass:color';
|
@use 'sass:color';
|
||||||
|
|
||||||
// ==================== 个人资料编辑抽屉 ====================
|
// ==================== 个人资料内联编辑组件 ====================
|
||||||
|
|
||||||
// 遮罩层
|
// 内联编辑容器 — 直接嵌入页面卡片中
|
||||||
.profile-drawer-overlay {
|
.profile-edit-inline {
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: $overlay-bg;
|
|
||||||
z-index: 2000;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 抽屉主体 — 固定在右侧,占满屏幕高度
|
|
||||||
// 重置 font-size + line-height 避免 html font-size:100px 导致行高撑大间距
|
|
||||||
.profile-drawer {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 6.2rem;
|
|
||||||
height: 100vh;
|
|
||||||
background: $bg-white;
|
|
||||||
z-index: 2001;
|
|
||||||
box-shadow: -0.04rem 0 0.2rem rgba(0, 0, 0, 0.1);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
background: #F7F7F7;
|
||||||
|
border-radius: 0.12rem;
|
||||||
|
padding: 0.1rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
// 顶部栏
|
// 表单内容区
|
||||||
&__header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.1rem;
|
|
||||||
padding: 0.16rem 0.2rem;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__close-btn {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
padding: 0.04rem;
|
|
||||||
cursor: pointer;
|
|
||||||
color: $text-dark;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 0.04rem;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $accent;
|
|
||||||
background: $theme-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__close-icon {
|
|
||||||
width: 0.16rem;
|
|
||||||
height: 0.16rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
font-size: 0.16rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: $text-dark;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 表单内容区 — 中间可滚动
|
|
||||||
&__body {
|
&__body {
|
||||||
flex: 1;
|
padding: 0.1rem 0;
|
||||||
overflow-y: auto;
|
|
||||||
padding: 0.2rem 0.2rem 3rem;
|
|
||||||
|
|
||||||
// 地区选择器下拉面板提升层级,避免被其他元素遮挡
|
|
||||||
.region-selector__panel {
|
|
||||||
z-index: 2100;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 基本信息横排字段容器(姓名、电话、微信、邮箱、城市一行排列,允许换行)
|
||||||
|
&__fields-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.16rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 横排中的单个字段项
|
||||||
|
&__field-item {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 作品集链接整行字段
|
||||||
|
&__field-full {
|
||||||
|
margin-top: 0.16rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 单个字段
|
// 单个字段
|
||||||
&__field {
|
&__field {
|
||||||
margin-bottom: 0.18rem;
|
margin-bottom: 0.02rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__label {
|
&__label {
|
||||||
font-size: 0.13rem;
|
display: block;
|
||||||
|
font-size: 0.12rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $text-dark;
|
color: $text-middle;
|
||||||
margin-bottom: 0.06rem;
|
margin-bottom: 0.06rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -101,12 +56,12 @@
|
|||||||
&__input {
|
&__input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0.1rem 0.14rem;
|
padding: 0.08rem 0.12rem;
|
||||||
font-size: 0.13rem;
|
font-size: 0.13rem;
|
||||||
color: $text-dark;
|
color: $text-dark;
|
||||||
background: $bg-main;
|
background: $bg-white;
|
||||||
border: 1px solid transparent;
|
border: 1px solid $border-color;
|
||||||
border-radius: 0.06rem;
|
border-radius: 0.04rem;
|
||||||
outline: none;
|
outline: none;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
|
|
||||||
@@ -120,21 +75,22 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 多行文本输入框(经历描述等)
|
// 多行文本输入框
|
||||||
&__textarea {
|
&__textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0.1rem 0.14rem;
|
padding: 0.08rem 0.12rem;
|
||||||
font-size: 0.13rem;
|
font-size: 0.13rem;
|
||||||
color: $text-dark;
|
color: $text-dark;
|
||||||
background: $bg-main;
|
background: $bg-white;
|
||||||
border: 1px solid transparent;
|
border: none;
|
||||||
border-radius: 0.06rem;
|
border-radius: 0.04rem;
|
||||||
outline: none;
|
outline: none;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
padding-right: 0.3rem;
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: $text-light;
|
color: $text-light;
|
||||||
@@ -144,33 +100,26 @@
|
|||||||
border-color: $accent;
|
border-color: $accent;
|
||||||
background: $bg-white;
|
background: $bg-white;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 矮版 textarea — 用于分段描述,右侧留出删除按钮空间
|
|
||||||
&--short {
|
|
||||||
padding-right: 0.36rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// ==================== 描述段落编辑 ====================
|
// 描述段落容器
|
||||||
|
|
||||||
// 单条描述段落容器 — textarea + 右侧删除按钮
|
|
||||||
&__desc-item {
|
&__desc-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 0.08rem;
|
margin-bottom: 0.08rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 描述段落内的删除按钮(叉号)
|
// 描述删除按钮
|
||||||
&__desc-remove {
|
&__desc-remove {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0.18rem;
|
right: 0.08rem;
|
||||||
top: 0.08rem;
|
top: 0.06rem;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0.02rem;
|
padding: 0.02rem 0.04rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: $text-light;
|
color: $text-light;
|
||||||
display: flex;
|
font-size: 0.14rem;
|
||||||
align-items: center;
|
line-height: 1;
|
||||||
border-radius: 0.03rem;
|
border-radius: 0.03rem;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
|
|
||||||
@@ -179,91 +128,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__desc-remove-icon {
|
// 横排字段容器
|
||||||
width: 0.12rem;
|
|
||||||
height: 0.12rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 小号新增按钮 — 用于"新增一段描述"
|
|
||||||
&__add-btn--small {
|
|
||||||
font-size: 0.11rem;
|
|
||||||
padding: 0.04rem 0.12rem;
|
|
||||||
margin-top: 0.04rem;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 空状态占位
|
|
||||||
&__empty {
|
|
||||||
text-align: center;
|
|
||||||
padding: 0.6rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__empty-text {
|
|
||||||
font-size: 0.14rem;
|
|
||||||
color: $text-light;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 教育经历模块 ====================
|
|
||||||
|
|
||||||
// 单条教育经历卡片
|
|
||||||
&__edu-card {
|
|
||||||
padding-bottom: 0.2rem;
|
|
||||||
margin-bottom: 0.2rem;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
|
|
||||||
&:last-of-type {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 教育经历标题栏
|
|
||||||
&__edu-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 0.14rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 序号标识
|
|
||||||
&__edu-index {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.06rem;
|
|
||||||
font-size: 0.14rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: $text-dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__edu-index-icon {
|
|
||||||
width: 0.1rem;
|
|
||||||
height: 0.1rem;
|
|
||||||
color: $accent;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除按钮
|
|
||||||
&__edu-delete {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
padding: 0.04rem;
|
|
||||||
cursor: pointer;
|
|
||||||
color: $text-light;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 0.04rem;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $danger;
|
|
||||||
background: rgba($danger, 0.06);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__edu-delete-icon {
|
|
||||||
width: 0.15rem;
|
|
||||||
height: 0.15rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 横排字段容器(学院+专业、学历+GPA、入学+毕业时间)
|
|
||||||
&__row {
|
&__row {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.12rem;
|
gap: 0.12rem;
|
||||||
@@ -275,60 +140,81 @@
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 下拉选择器包裹(带箭头图标)
|
// ==================== 经历卡片模块 ====================
|
||||||
&__select-wrap {
|
|
||||||
position: relative;
|
&__edu-card {
|
||||||
|
padding-bottom: 0.16rem;
|
||||||
|
margin-bottom: 0.16rem;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
&:last-of-type {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__select-wrap &__input {
|
&__edu-header {
|
||||||
padding-right: 0.3rem;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 0.12rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__select-arrow {
|
&__edu-index {
|
||||||
position: absolute;
|
font-size: 0.13rem;
|
||||||
right: 0.1rem;
|
font-weight: 600;
|
||||||
top: 50%;
|
color: $text-dark;
|
||||||
transform: translateY(-50%);
|
}
|
||||||
width: 0.12rem;
|
|
||||||
height: 0.12rem;
|
&__edu-delete {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 0.04rem 0.08rem;
|
||||||
|
cursor: pointer;
|
||||||
color: $text-light;
|
color: $text-light;
|
||||||
pointer-events: none;
|
font-size: 0.12rem;
|
||||||
|
border-radius: 0.04rem;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $danger;
|
||||||
|
background: rgba($danger, 0.06);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 新增教育经历按钮
|
// 新增按钮
|
||||||
&__add-btn {
|
&__add-btn {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: none;
|
background: none;
|
||||||
border: 1px solid $border-color;
|
border: 1px dashed $border-color;
|
||||||
border-radius: 0.2rem;
|
border-radius: 0.04rem;
|
||||||
padding: 0.06rem 0.16rem;
|
padding: 0.04rem 0.12rem;
|
||||||
font-size: 0.12rem;
|
font-size: 0.12rem;
|
||||||
color: $text-dark;
|
color: $text-middle;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
margin-top: 0.04rem;
|
margin-top: 0.06rem;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: $accent;
|
border-color: $accent;
|
||||||
color: $accent;
|
color: $accent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--full {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0.12rem;
|
||||||
|
padding: 0.08rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__add-icon {
|
// ==================== 日期选择器 ====================
|
||||||
font-size: 0.14rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 日期选择器样式覆盖 ====================
|
|
||||||
// Element Plus 的 el-date-picker 在 html font-size:100px 下需要用 px 还原
|
|
||||||
|
|
||||||
&__date-picker {
|
&__date-picker {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
|
|
||||||
.el-input__wrapper {
|
.el-input__wrapper {
|
||||||
background: $bg-main !important;
|
background: $bg-main !important;
|
||||||
border: 1px solid transparent !important;
|
border: 1px solid $border-color !important;
|
||||||
border-radius: 6px !important;
|
border-radius: 4px !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
padding: 4px 12px !important;
|
padding: 4px 12px !important;
|
||||||
font-size: 13px !important;
|
font-size: 13px !important;
|
||||||
@@ -336,7 +222,7 @@
|
|||||||
height: auto !important;
|
height: auto !important;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: $border-color !important;
|
border-color: $accent !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-focus {
|
&.is-focus {
|
||||||
@@ -368,26 +254,146 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ==================== 技能模块 ====================
|
// 日期范围容器(开始-结束横排)
|
||||||
|
&__date-range {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.04rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__date-sep {
|
||||||
|
color: $text-light;
|
||||||
|
font-size: 0.12rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== AI润色功能 ====================
|
||||||
|
|
||||||
|
// 个人概述标题栏(含AI润色按钮)
|
||||||
|
&__summary-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.12rem;
|
||||||
|
margin-bottom: 0.08rem;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// AI润色按钮
|
||||||
|
&__ai-polish-btn {
|
||||||
|
padding: 0.01rem 0.06rem;
|
||||||
|
font-size: 0.11rem;
|
||||||
|
background: $accent;
|
||||||
|
color: $bg-white;
|
||||||
|
border: 1px solid $accent;
|
||||||
|
border-radius: 0.04rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
white-space: nowrap;
|
||||||
|
>span>span{
|
||||||
|
color: #FCD34D;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $accent;
|
||||||
|
color: $bg-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// AI润色结果区域
|
||||||
|
&__ai-result {
|
||||||
|
margin-top: 0.16rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__ai-result-label {
|
||||||
|
font-size: 0.12rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $accent;
|
||||||
|
margin-bottom: 0.08rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__ai-result-card {
|
||||||
|
padding: 0.1rem 0.12rem;
|
||||||
|
background: linear-gradient(to bottom,#F5FFFD,#ffffff);
|
||||||
|
border-radius: 0.06rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__ai-result-text {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $text-dark;
|
||||||
|
line-height: 1.7;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
// AI结果操作按钮组
|
||||||
|
&__ai-result-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.12rem;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 替换为此内容按钮
|
||||||
|
&__ai-replace-btn {
|
||||||
|
padding: 0.04rem 0.12rem;
|
||||||
|
font-size: 0.12rem;
|
||||||
|
color: #fff;
|
||||||
|
background: $accent;
|
||||||
|
border: 1px solid $accent;
|
||||||
|
border-radius: 0.04rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $accent;
|
||||||
|
color: $bg-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重新生成按钮
|
||||||
|
&__ai-regenerate-btn {
|
||||||
|
padding: 0.04rem 0.12rem;
|
||||||
|
font-size: 0.12rem;
|
||||||
|
color: $accent;
|
||||||
|
background: none;
|
||||||
|
border: 1px solid $accent;
|
||||||
|
border-radius: 0.04rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: $accent;
|
||||||
|
color: $accent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== 技能/证书标签 ====================
|
||||||
|
|
||||||
// 技能标签列表容器
|
|
||||||
&__skills-list {
|
&__skills-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 0.08rem;
|
gap: 0.08rem;
|
||||||
margin-bottom: 0.2rem;
|
margin-bottom: 0.16rem;
|
||||||
min-height: 0.4rem;
|
min-height: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 单个技能标签
|
|
||||||
&__skill-tag {
|
&__skill-tag {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.06rem;
|
gap: 0.06rem;
|
||||||
padding: 0.06rem 0.1rem 0.06rem 0.14rem;
|
padding: 0.04rem 0.1rem 0.04rem 0.12rem;
|
||||||
background: $bg-main;
|
background: $bg-main;
|
||||||
border-radius: 0.16rem;
|
border-radius: 0.14rem;
|
||||||
font-size: 0.13rem;
|
font-size: 0.12rem;
|
||||||
color: $text-dark;
|
color: $text-dark;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
|
|
||||||
@@ -396,12 +402,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 技能标签文本
|
|
||||||
&__skill-text {
|
&__skill-text {
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 技能标签删除按钮
|
|
||||||
&__skill-remove {
|
&__skill-remove {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
@@ -424,23 +428,23 @@
|
|||||||
height: 0.12rem;
|
height: 0.12rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 底部保存按钮
|
// ==================== 底部操作按钮 ====================
|
||||||
|
|
||||||
&__footer {
|
&__footer {
|
||||||
padding: 0.16rem 0.2rem;
|
display: flex;
|
||||||
border-top: 1px solid $border-color;
|
align-items: center;
|
||||||
text-align: center;
|
gap: 0.12rem;
|
||||||
flex-shrink: 0;
|
padding-top: 0.04rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__save-btn {
|
&__save-btn {
|
||||||
width: 2.0rem;
|
padding: 0.06rem 0.2rem;
|
||||||
padding: 0.1rem 0;
|
font-size: 0.13rem;
|
||||||
font-size: 0.14rem;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $bg-white;
|
color: $bg-white;
|
||||||
background: $btn-dark;
|
background: $btn-dark;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0.24rem;
|
border-radius: 0.2rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
|
|
||||||
@@ -448,11 +452,26 @@
|
|||||||
background: $btn-dark-hover;
|
background: $btn-dark-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__cancel-btn {
|
||||||
|
padding: 0.06rem 0.2rem;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $accent;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid $accent;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $theme-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ==================== 过渡动画 ====================
|
// ==================== 日期选择器弹出面板样式覆盖 ====================
|
||||||
|
|
||||||
// 日期选择器弹出面板样式覆盖(teleport 到 body,需在全局作用域)
|
|
||||||
.profile-drawer-date-popper {
|
.profile-drawer-date-popper {
|
||||||
font-size: 14px !important;
|
font-size: 14px !important;
|
||||||
line-height: 1.5 !important;
|
line-height: 1.5 !important;
|
||||||
@@ -474,25 +493,3 @@
|
|||||||
padding: 8px 0 !important;
|
padding: 8px 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 遮罩层淡入淡出
|
|
||||||
.profile-drawer-overlay-enter-active,
|
|
||||||
.profile-drawer-overlay-leave-active {
|
|
||||||
transition: opacity 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-drawer-overlay-enter-from,
|
|
||||||
.profile-drawer-overlay-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 抽屉滑入滑出
|
|
||||||
.profile-drawer-slide-enter-active,
|
|
||||||
.profile-drawer-slide-leave-active {
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-drawer-slide-enter-from,
|
|
||||||
.profile-drawer-slide-leave-to {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -5,16 +5,75 @@
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.16rem;
|
gap: 0;
|
||||||
padding-bottom: 0.4rem;
|
padding: 0.2rem 0.24rem 0;
|
||||||
|
|
||||||
// 卡片通用
|
|
||||||
&__card {
|
|
||||||
background: $bg-white;
|
background: $bg-white;
|
||||||
border-radius: 0.12rem;
|
border-radius: 0.12rem;
|
||||||
padding: 0.2rem 0.24rem;
|
font-size: 0.14rem;
|
||||||
font-size: 14px;
|
overflow: hidden;
|
||||||
|
|
||||||
|
// Tab 导航栏(固定不动)
|
||||||
|
&__tabs {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.24rem;
|
||||||
|
padding-bottom: 0.14rem;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-bottom:0.14rem
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tab-item {
|
||||||
|
font-size: 0.14rem;
|
||||||
|
color: $text-middle;
|
||||||
|
cursor: pointer;
|
||||||
|
padding-bottom: 0.06rem;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
transition: all 0.2s;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $text-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
color: $text-dark;
|
||||||
|
font-weight: 600;
|
||||||
|
border-bottom-color: $text-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 内容滚动区域
|
||||||
|
&__body {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-bottom: 0.2rem;
|
||||||
|
|
||||||
|
// 隐藏滚动条
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 卡片通用(不再有独立背景,只做分隔)
|
||||||
|
&__card {
|
||||||
|
padding: 0.16rem 0;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
border-radius: 0.08rem;
|
||||||
|
|
||||||
|
&:hover .profile-page-content__card-header{
|
||||||
|
background: #F7F7F7;
|
||||||
|
.profile-page-content__edit-btn-inline{
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
//border-bottom: 1px solid $border-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__card-header {
|
&__card-header {
|
||||||
@@ -22,6 +81,8 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: 0.14rem;
|
margin-bottom: 0.14rem;
|
||||||
|
padding: 0.06rem 0.14rem;
|
||||||
|
border-radius: 0.06rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__card-title {
|
&__card-title {
|
||||||
@@ -29,6 +90,21 @@
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $text-dark;
|
color: $text-dark;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 0.02rem;
|
||||||
|
|
||||||
|
// 底部装饰线
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0.02rem;
|
||||||
|
width: 100%;
|
||||||
|
height: 0.06rem;
|
||||||
|
background: $accent;
|
||||||
|
border-radius: 0.02rem;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__edit-btn {
|
&__edit-btn {
|
||||||
@@ -63,9 +139,9 @@
|
|||||||
|
|
||||||
&__info-contacts {
|
&__info-contacts {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 0.16rem;
|
gap: 0.16rem;
|
||||||
margin-bottom: 0.06rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__contact-item {
|
&__contact-item {
|
||||||
@@ -81,7 +157,6 @@
|
|||||||
padding: 0.12rem 0;
|
padding: 0.12rem 0;
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -94,33 +169,36 @@
|
|||||||
&__item-left {
|
&__item-left {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 0.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__item-title {
|
&__item-title {
|
||||||
font-size: 0.14rem;
|
font-size: 0.16rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $text-dark;
|
color: $text-dark;
|
||||||
margin-bottom: 0.03rem;
|
margin-bottom: 0.03rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__item-sub {
|
&__item-sub {
|
||||||
font-size: 0.12rem;
|
font-size: 0.16rem;
|
||||||
color: #666;
|
color: $text-dark;
|
||||||
margin-bottom: 0.02rem;
|
margin-bottom: 0.02rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__item-date {
|
&__item-date {
|
||||||
font-size: 0.11rem;
|
font-size: 0.13rem;
|
||||||
color: $accent;
|
color: #64748B;
|
||||||
margin-bottom: 0.04rem;
|
margin-bottom: 0.04rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__item-period {
|
&__item-period {
|
||||||
font-size: 0.11rem;
|
font-size: 0.13rem;
|
||||||
color: $text-light;
|
color: #666;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin-left: 0.12rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__item-desc {
|
&__item-desc {
|
||||||
@@ -170,6 +248,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 0.08rem;
|
gap: 0.08rem;
|
||||||
|
padding: 0 0.14rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__tag {
|
&__tag {
|
||||||
@@ -187,4 +266,91 @@
|
|||||||
background: $theme-color;
|
background: $theme-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ---- 新版内联编辑按钮(品牌色图标+文字,hover显示) ----
|
||||||
|
&__edit-btn-inline {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: $accent;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0 0.08rem;
|
||||||
|
border-radius: 0.04rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.04rem;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
font-weight: 500;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: all 0.2s;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: auto;
|
||||||
|
|
||||||
|
.el-icon {
|
||||||
|
font-size: 0.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 卡片hover时显示编辑按钮(个人信息/技能/证书)
|
||||||
|
&__card-hover:hover &__edit-btn-inline {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__card-hover:hover {
|
||||||
|
background: #F7F7F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标题行hover显示添加按钮(5大经历)
|
||||||
|
&__header-hover:hover {
|
||||||
|
border-radius: 0.06rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header-hover:hover &__edit-btn-inline {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 经历条目hover显示编辑按钮
|
||||||
|
&__section-item {
|
||||||
|
padding: 0.12rem 0.14rem;
|
||||||
|
border-radius: 0.08rem;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #F7F7F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 条目hover时显示编辑按钮
|
||||||
|
&__section-item:hover &__item-edit-btn {
|
||||||
|
display: flex;
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// hover条目时隐藏时间
|
||||||
|
&__section-item:hover &__item-date--toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 条目内编辑按钮(默认隐藏不占位)
|
||||||
|
&__item-edit-btn {
|
||||||
|
margin-left: 0.08rem;
|
||||||
|
display: none;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 时间切换样式(默认显示,靠右)
|
||||||
|
&__item-date--toggle {
|
||||||
|
margin-left: auto;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: #64748B;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
@use 'sass:color';
|
||||||
@use '../variables' as *;
|
@use '../variables' as *;
|
||||||
|
|
||||||
// ==================== 欢迎使用弹窗 ====================
|
// ==================== 欢迎使用弹窗 ====================
|
||||||
@@ -56,7 +57,12 @@
|
|||||||
margin-bottom: 0.14rem;
|
margin-bottom: 0.14rem;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: darken(#F3F4F5, 3%);
|
background: color.adjust(#F3F4F5, $lightness: -3%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 拖拽悬停时背景色变化
|
||||||
|
&.is-dragover {
|
||||||
|
background: color.adjust(#F3F4F5, $lightness: -6%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -26,7 +26,7 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 8rem;
|
width: 8rem;
|
||||||
height: 100vh;
|
height: var(--app-height, 100vh);
|
||||||
background: $bg-main;
|
background: $bg-main;
|
||||||
z-index: 2001;
|
z-index: 2001;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -1,24 +1,51 @@
|
|||||||
@use '../variables' as *;
|
@use '../variables' as *;
|
||||||
|
|
||||||
/* 编辑简历名称弹窗样式 */
|
/* 编辑简历名称弹窗 — 遮罩层 */
|
||||||
.resume-edit-name-dialog {
|
.resume-edit-name-overlay {
|
||||||
.el-dialog__header {
|
position: fixed;
|
||||||
padding: 0.2rem 0.2rem 0;
|
top: 0;
|
||||||
}
|
left: 0;
|
||||||
|
right: 0;
|
||||||
.el-dialog__body {
|
bottom: 0;
|
||||||
padding: 0 0.3rem 0.3rem;
|
background: $overlay-bg;
|
||||||
}
|
z-index: 2200;
|
||||||
|
|
||||||
&__body {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
align-items: center;
|
||||||
gap: 0.24rem;
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 弹窗主体 */
|
||||||
|
.resume-edit-name-dialog {
|
||||||
|
width: 4.6rem;
|
||||||
|
background: $bg-white;
|
||||||
|
border-radius: 0.12rem;
|
||||||
|
padding: 0.32rem 0.3rem;
|
||||||
|
position: relative;
|
||||||
|
font-size: 0.14rem;
|
||||||
|
box-shadow: 0 0.04rem 0.2rem rgba(0, 0, 0, 0.15);
|
||||||
|
|
||||||
|
/* 关闭按钮 */
|
||||||
|
&__close {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.14rem;
|
||||||
|
right: 0.16rem;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
font-size: 0.16rem;
|
||||||
|
color: $text-light;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.04rem;
|
||||||
|
line-height: 1;
|
||||||
|
transition: color 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $text-dark;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 表单字段 */
|
/* 表单字段 */
|
||||||
&__field {
|
&__field {
|
||||||
width: 100%;
|
margin-bottom: 0.24rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 标签 */
|
/* 标签 */
|
||||||
@@ -38,27 +65,28 @@
|
|||||||
|
|
||||||
/* 输入框 */
|
/* 输入框 */
|
||||||
&__input {
|
&__input {
|
||||||
.el-input__wrapper {
|
width: 100%;
|
||||||
|
height: 0.44rem;
|
||||||
|
border: 1px solid $border-color;
|
||||||
border-radius: 0.1rem;
|
border-radius: 0.1rem;
|
||||||
padding: 0.04rem 0.14rem;
|
padding: 0 0.14rem;
|
||||||
box-shadow: 0 0 0 1px $border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-input__inner {
|
|
||||||
font-size: 0.14rem;
|
font-size: 0.14rem;
|
||||||
color: $text-dark;
|
color: $text-dark;
|
||||||
height: 0.36rem;
|
outline: none;
|
||||||
line-height: normal;
|
box-sizing: border-box;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: $text-light;
|
color: $text-light;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $accent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 底部按钮区域 */
|
/* 底部按钮区域 */
|
||||||
&__footer {
|
&__footer {
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.16rem;
|
gap: 0.16rem;
|
||||||
margin-top: 0.08rem;
|
margin-top: 0.08rem;
|
||||||
|
|||||||
@@ -0,0 +1,252 @@
|
|||||||
|
@use '../variables' as *;
|
||||||
|
|
||||||
|
// ==================== 一键修复抽屉(全模块) ====================
|
||||||
|
|
||||||
|
// 遮罩层
|
||||||
|
.fix-all-drawer-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: $overlay-bg;
|
||||||
|
z-index: 2000;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 遮罩层过渡动画
|
||||||
|
.fix-all-drawer-overlay-enter-active,
|
||||||
|
.fix-all-drawer-overlay-leave-active {
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
.fix-all-drawer-overlay-enter-from,
|
||||||
|
.fix-all-drawer-overlay-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 抽屉主体
|
||||||
|
.fix-all-drawer {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 8rem;
|
||||||
|
height: var(--app-height, 100vh);
|
||||||
|
background: $bg-main;
|
||||||
|
z-index: 2001;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
|
||||||
|
font-size: 0.14rem;
|
||||||
|
|
||||||
|
// ---- 顶部栏 ----
|
||||||
|
&__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.1rem;
|
||||||
|
padding: 0.16rem 0.24rem;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
background: $bg-white;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__close-btn {
|
||||||
|
width: 0.28rem;
|
||||||
|
height: 0.28rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
color: $text-dark;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $bg-main;
|
||||||
|
color: $accent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__close-icon {
|
||||||
|
width: 0.16rem;
|
||||||
|
height: 0.16rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 0.18rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: $text-dark;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- 可滚动内容区 ----
|
||||||
|
&__body {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 0.2rem 0.24rem 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- 模块标题 ----
|
||||||
|
&__module-title {
|
||||||
|
font-size: 0.16rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: $text-dark;
|
||||||
|
margin: 0.24rem 0 0.12rem 0;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- 单条经历记录 ----
|
||||||
|
&__record {
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__record-label {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $text-dark;
|
||||||
|
margin: 0 0 0.08rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- 卡片容器 ----
|
||||||
|
&__card {
|
||||||
|
background: $bg-white;
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
padding: 0.16rem;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
|
||||||
|
&--ai {
|
||||||
|
border: 1px solid rgba($accent, 0.3);
|
||||||
|
background: rgba($accent, 0.03);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- 原文编辑 textarea ----
|
||||||
|
&__textarea {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 0.6rem;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $text-dark;
|
||||||
|
line-height: 1.8;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
resize: none;
|
||||||
|
overflow: hidden;
|
||||||
|
background: transparent;
|
||||||
|
font-family: inherit;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
field-sizing: content;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: $text-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- AI 润色结果区 ----
|
||||||
|
&__ai-section {
|
||||||
|
margin-top: 0.12rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__ai-label {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $accent;
|
||||||
|
margin: 0 0 0.08rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__ai-text {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $text-dark;
|
||||||
|
line-height: 1.8;
|
||||||
|
margin: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- AI 操作按钮 ----
|
||||||
|
&__ai-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.12rem;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__action-btn {
|
||||||
|
font-size: 0.12rem;
|
||||||
|
font-weight: 500;
|
||||||
|
border: 1px solid $accent;
|
||||||
|
border-radius: 0.14rem;
|
||||||
|
padding: 0.04rem 0.12rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&--replace {
|
||||||
|
color: $accent;
|
||||||
|
background: $bg-white;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba($accent, 0.08);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--regenerate {
|
||||||
|
color: $accent;
|
||||||
|
background: $bg-white;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba($accent, 0.08);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- 底部按钮区 ----
|
||||||
|
&__footer {
|
||||||
|
padding: 0.16rem 0.24rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.2rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: $bg-white;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__footer-btn {
|
||||||
|
padding: 0.1rem 0.3rem;
|
||||||
|
font-size: 0.14rem;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 0.22rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&--use-ai {
|
||||||
|
color: $accent;
|
||||||
|
background: $bg-white;
|
||||||
|
border: 1px solid $accent;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba($accent, 0.08);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--save {
|
||||||
|
color: $bg-white;
|
||||||
|
background: $btn-dark;
|
||||||
|
border: 1px solid $btn-dark;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $btn-dark-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 抽屉滑入动画
|
||||||
|
.fix-all-drawer-slide-enter-active,
|
||||||
|
.fix-all-drawer-slide-leave-active {
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
.fix-all-drawer-slide-enter-from,
|
||||||
|
.fix-all-drawer-slide-leave-to {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
@@ -26,7 +26,7 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 8rem;
|
width: 8rem;
|
||||||
height: 100vh;
|
height: var(--app-height, 100vh);
|
||||||
background: $bg-main;
|
background: $bg-main;
|
||||||
z-index: 2001;
|
z-index: 2001;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -0,0 +1,206 @@
|
|||||||
|
@use 'sass:color';
|
||||||
|
@use '../variables' as *;
|
||||||
|
|
||||||
|
// ==================== 简历上传弹窗 ====================
|
||||||
|
.resume-upload-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: $overlay-bg;
|
||||||
|
z-index: 2200;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resume-upload-dialog {
|
||||||
|
width: 5.6rem;
|
||||||
|
background: $bg-white;
|
||||||
|
border-radius: 0.12rem;
|
||||||
|
padding: 0.32rem 0.36rem;
|
||||||
|
box-shadow: 0 0.04rem 0.2rem rgba(0, 0, 0, 0.15);
|
||||||
|
|
||||||
|
// 标题行
|
||||||
|
&__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 0.08rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标题
|
||||||
|
&__title {
|
||||||
|
font-size: 0.2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: $text-dark;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关闭按钮
|
||||||
|
&__close {
|
||||||
|
width: 0.28rem;
|
||||||
|
height: 0.28rem;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: $text-middle;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 0.04rem;
|
||||||
|
transition: background 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $bg-main;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 副标题说明
|
||||||
|
&__desc {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $accent;
|
||||||
|
margin: 0 0 0.2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 拖拽上传区域
|
||||||
|
&__drop-zone {
|
||||||
|
border: 1px dashed $border-color;
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
padding: 0.5rem 0.2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s, border-color 0.2s;
|
||||||
|
background: $theme-color;
|
||||||
|
margin-bottom: 0.28rem;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: $accent;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 拖拽悬停状态 — 背景色加深
|
||||||
|
&.is-dragover {
|
||||||
|
background: color.adjust(#F6FCFC, $lightness: -4%);
|
||||||
|
border-color: $accent;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 已选择文件状态
|
||||||
|
&.has-file {
|
||||||
|
padding: 0.3rem 0.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 上传图标(加号圆圈)
|
||||||
|
&__drop-icon {
|
||||||
|
width: 0.52rem;
|
||||||
|
height: 0.52rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: $bg-white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: $accent;
|
||||||
|
margin-bottom: 0.14rem;
|
||||||
|
box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 主提示文字
|
||||||
|
&__drop-text {
|
||||||
|
font-size: 0.14rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $text-dark;
|
||||||
|
margin: 0 0 0.06rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式提示
|
||||||
|
&__drop-hint {
|
||||||
|
font-size: 0.12rem;
|
||||||
|
color: $text-middle;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 已选文件信息
|
||||||
|
&__file-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.08rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__file-icon {
|
||||||
|
font-size: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__file-name {
|
||||||
|
font-size: 0.14rem;
|
||||||
|
color: $text-dark;
|
||||||
|
font-weight: 500;
|
||||||
|
max-width: 3.6rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__file-remove {
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
color: $text-middle;
|
||||||
|
font-size: 0.14rem;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.02rem 0.04rem;
|
||||||
|
border-radius: 0.03rem;
|
||||||
|
transition: color 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $danger;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 底部按钮区域
|
||||||
|
&__footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按钮通用
|
||||||
|
&__btn {
|
||||||
|
height: 0.42rem;
|
||||||
|
border-radius: 0.21rem;
|
||||||
|
font-size: 0.14rem;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
// 取消按钮
|
||||||
|
&--cancel {
|
||||||
|
width: 1.4rem;
|
||||||
|
background: $bg-main;
|
||||||
|
color: $text-dark;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确认上传按钮(渐变色)
|
||||||
|
&--confirm {
|
||||||
|
width: 1.8rem;
|
||||||
|
background: $gradient-bg;
|
||||||
|
color: $bg-white;
|
||||||
|
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
opacity: 0.4;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,3 +1,4 @@
|
|||||||
|
@use 'sass:color';
|
||||||
@use '../variables' as *;
|
@use '../variables' as *;
|
||||||
|
|
||||||
// ==================== 注销账号弹窗 ====================
|
// ==================== 注销账号弹窗 ====================
|
||||||
@@ -247,7 +248,7 @@
|
|||||||
color: $bg-white;
|
color: $bg-white;
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
&:hover:not(:disabled) {
|
||||||
background: darken(#DC2626, 8%);
|
background: color.adjust(#DC2626, $lightness: -8%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -387,7 +388,7 @@
|
|||||||
color: $bg-white;
|
color: $bg-white;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: darken(#DC2626, 8%);
|
background: color.adjust(#DC2626, $lightness: -8%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -487,5 +487,66 @@
|
|||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Markdown 渲染额外样式
|
||||||
|
h1, h2, h3, h5, h6 {
|
||||||
|
color: $text-dark;
|
||||||
|
margin: 0.14rem 0 0.08rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
h1 { font-size: 0.2rem; }
|
||||||
|
h2 { font-size: 0.17rem; }
|
||||||
|
h3 { font-size: 0.15rem; }
|
||||||
|
|
||||||
|
ul, ol {
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
margin: 0.06rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 0.04rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 700;
|
||||||
|
color: $text-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #2563eb;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
border-left: 3px solid #cbd5e1;
|
||||||
|
padding-left: 0.1rem;
|
||||||
|
margin: 0.08rem 0;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0.1rem 0;
|
||||||
|
font-size: 0.12rem;
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
padding: 0.06rem 0.1rem;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background: #f8fafc;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $text-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:nth-child(even) {
|
||||||
|
background: #fafbfc;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
@use '../variables' as *;
|
@use '../variables' as *;
|
||||||
|
|
||||||
// ==================== 邀请注册送会员弹窗 ====================
|
// ==================== 邀请注册送会员弹窗(重设计版) ====================
|
||||||
.settings-invite-overlay {
|
.settings-invite-overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -18,178 +18,211 @@
|
|||||||
.settings-invite-dialog {
|
.settings-invite-dialog {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 4.2rem;
|
width: 4.2rem;
|
||||||
max-height: 85vh;
|
height: 5.0rem;
|
||||||
background: $bg-white;
|
background: $bg-white;
|
||||||
border-radius: 0.12rem;
|
border-radius: 0.26rem;
|
||||||
padding: 0.32rem 0.28rem;
|
box-shadow: 0 0.2rem 0.44rem rgba(0, 0, 0, 0.14);
|
||||||
box-shadow: 0 0.04rem 0.2rem rgba(0, 0, 0, 0.15);
|
overflow: hidden;
|
||||||
overflow-y: auto;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
// 顶部渐变区域
|
||||||
|
&__header {
|
||||||
|
width: 100%;
|
||||||
|
height: 1.04rem;
|
||||||
|
background: linear-gradient(90deg, #12C7BE 0%, #06B6D4 100%);
|
||||||
|
border-radius: 0.26rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 皇冠图标
|
||||||
|
&__crown {
|
||||||
|
font-size: 0.32rem;
|
||||||
|
line-height: 0.39rem;
|
||||||
|
color: $bg-white;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
// 关闭按钮
|
// 关闭按钮
|
||||||
&__close {
|
&__close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.14rem;
|
top: 0.24rem;
|
||||||
right: 0.18rem;
|
right: 0.27rem;
|
||||||
font-size: 0.18rem;
|
font-size: 0.22rem;
|
||||||
color: $text-light;
|
line-height: 0.27rem;
|
||||||
|
color: #8EA0B8;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: color 0.2s;
|
transition: color 0.2s;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $text-dark;
|
color: $text-dark;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 内容区域
|
||||||
|
&__body {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.22rem 0.28rem 0.2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
// 标题
|
// 标题
|
||||||
&__title {
|
&__title {
|
||||||
font-size: 0.18rem;
|
font-size: 0.21rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $text-dark;
|
color: #132034;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 0 0.05rem 0;
|
||||||
|
line-height: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 副标题
|
||||||
|
&__subtitle {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #64748B;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0 0 0.2rem 0;
|
margin: 0 0 0.2rem 0;
|
||||||
|
line-height: 0.16rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 邀请链接区域
|
// 邀请链接区域
|
||||||
&__link-box {
|
&__link-box {
|
||||||
background: $bg-main;
|
display: flex;
|
||||||
border-radius: 0.08rem;
|
align-items: center;
|
||||||
padding: 0.14rem 0.16rem;
|
width: 3.64rem;
|
||||||
margin-bottom: 0.14rem;
|
height: 0.44rem;
|
||||||
|
background: #F3FFFD;
|
||||||
|
border-radius: 0.22rem;
|
||||||
|
padding: 0 0.06rem 0 0.16rem;
|
||||||
|
margin: 0 auto 0.2rem;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__link-text {
|
&__link-text {
|
||||||
font-size: 0.12rem;
|
flex: 1;
|
||||||
color: $text-dark;
|
font-size: 0.11rem;
|
||||||
line-height: 1.7;
|
line-height: 0.13rem;
|
||||||
margin: 0;
|
color: #334155;
|
||||||
word-break: break-all;
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 复制链接按钮
|
// 复制链接按钮
|
||||||
&__copy-btn {
|
&__copy-btn {
|
||||||
width: 100%;
|
width: 1.0rem;
|
||||||
height: 0.4rem;
|
height: 0.32rem;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0.2rem;
|
border-radius: 0.16rem;
|
||||||
background: $text-dark;
|
background: #0F172A;
|
||||||
color: $bg-white;
|
color: $bg-white;
|
||||||
font-size: 0.14rem;
|
font-size: 0.13rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
line-height: 0.16rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-bottom: 0.18rem;
|
flex-shrink: 0;
|
||||||
transition: opacity 0.2s;
|
transition: opacity 0.2s;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: 0.85;
|
opacity: 0.85;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 步骤提示
|
|
||||||
&__steps-tip {
|
|
||||||
font-size: 0.12rem;
|
|
||||||
color: $text-middle;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 0 0.14rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 步骤卡片
|
// 步骤卡片
|
||||||
&__step {
|
&__step {
|
||||||
border: 1px solid $border-color;
|
|
||||||
border-radius: 0.08rem;
|
|
||||||
padding: 0.12rem 0.16rem;
|
|
||||||
margin-bottom: 0.1rem;
|
|
||||||
background: #F2F4F7;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__step-title {
|
|
||||||
font-size: 0.13rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: $text-dark;
|
|
||||||
margin-bottom: 0.04rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__step-desc {
|
|
||||||
font-size: 0.11rem;
|
|
||||||
color: $text-middle;
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 统计数据
|
|
||||||
&__stats {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.12rem;
|
align-items: center;
|
||||||
margin-top: 0.16rem;
|
width: 3.64rem;
|
||||||
margin-bottom: 0.16rem;
|
height: 0.46rem;
|
||||||
|
background: #F3FFFD;
|
||||||
|
border-radius: 0.14rem;
|
||||||
|
padding: 0 0.14rem;
|
||||||
|
margin: 0 auto 0.12rem;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__stat-item {
|
// 步骤数字圆圈
|
||||||
flex: 1;
|
&__step-circle {
|
||||||
border: 1px solid $border-color;
|
width: 0.26rem;
|
||||||
border-radius: 0.08rem;
|
height: 0.26rem;
|
||||||
padding: 0.12rem;
|
border-radius: 50%;
|
||||||
|
background: $bg-white;
|
||||||
|
border: 1px solid #BFEFE8;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 0.12rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #12C7BE;
|
||||||
|
line-height: 0.15rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 步骤文字
|
||||||
|
&__step-text {
|
||||||
|
margin-left: 0.14rem;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #334155;
|
||||||
|
line-height: 0.16rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 底部统计 + 按钮
|
||||||
|
&__footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: auto;
|
||||||
|
padding-top: 0.06rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 统计项
|
||||||
|
&__stat {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: 0.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__stat-label {
|
&__stat-label {
|
||||||
font-size: 0.11rem;
|
font-size: 0.13rem;
|
||||||
color: $text-middle;
|
font-weight: 500;
|
||||||
margin-bottom: 0.06rem;
|
color: #64748B;
|
||||||
|
line-height: 0.16rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__stat-value {
|
&__stat-value {
|
||||||
font-size: 0.16rem;
|
font-size: 0.13rem;
|
||||||
font-weight: 700;
|
font-weight: 500;
|
||||||
color: $text-dark;
|
color: #64748B;
|
||||||
|
line-height: 0.16rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 活动规则
|
// 成为正式会员按钮
|
||||||
&__rules {
|
&__member-btn {
|
||||||
display: flex;
|
margin-left: auto;
|
||||||
align-items: center;
|
width: 1.1rem;
|
||||||
justify-content: space-between;
|
height: 0.29rem;
|
||||||
border: 1px solid $border-color;
|
background: #F3FFFD;
|
||||||
|
border: 1px solid #BFEFE8;
|
||||||
border-radius: 0.08rem;
|
border-radius: 0.08rem;
|
||||||
padding: 0.12rem 0.16rem;
|
font-size: 0.13rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #000000;
|
||||||
|
line-height: 0.16rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 0.2s;
|
transition: all 0.2s;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $bg-main;
|
background: #e8faf8;
|
||||||
}
|
border-color: $accent;
|
||||||
}
|
|
||||||
|
|
||||||
&__rules-label {
|
|
||||||
font-size: 0.13rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: $text-dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__rules-arrow {
|
|
||||||
width: 0.14rem;
|
|
||||||
height: 0.14rem;
|
|
||||||
color: $text-middle;
|
|
||||||
transition: transform 0.2s;
|
|
||||||
|
|
||||||
&--open {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__rules-content {
|
|
||||||
margin-top: 0.1rem;
|
|
||||||
padding: 0.12rem 0.16rem;
|
|
||||||
background: $bg-main;
|
|
||||||
border-radius: 0.06rem;
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 0.11rem;
|
|
||||||
color: $text-middle;
|
|
||||||
line-height: 1.8;
|
|
||||||
margin: 0 0 0.04rem 0;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,8 +4,8 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
height: 100vh;
|
height: var(--app-height, 100vh);
|
||||||
background: #1a1a2e;
|
background: $bg-white;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 0.2rem 0.12rem;
|
padding: 0.2rem 0.12rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -57,7 +57,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.08rem;
|
gap: 0.08rem;
|
||||||
padding: 0.1rem 0.12rem;
|
padding: 0.1rem 0.12rem;
|
||||||
border-radius: 0.14rem;
|
border-radius: 0.08rem;
|
||||||
color: #9598ab;
|
color: #9598ab;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -65,12 +65,12 @@
|
|||||||
font-size: 0.14rem;
|
font-size: 0.14rem;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: rgba(255, 255, 255, 0.05);
|
background: $btn-dark;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--active {
|
&--active {
|
||||||
background: #1F2937;
|
background: $btn-dark;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -98,7 +98,6 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.04rem;
|
gap: 0.04rem;
|
||||||
border-top: 1px solid #2e3142;
|
|
||||||
padding-top: 0.12rem;
|
padding-top: 0.12rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -107,8 +106,8 @@
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100vw;
|
width: 100%;
|
||||||
height: 100vh;
|
height: var(--app-height, 100vh);
|
||||||
background: $overlay-bg;
|
background: $overlay-bg;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -184,7 +183,7 @@
|
|||||||
|
|
||||||
// 左侧消息列表
|
// 左侧消息列表
|
||||||
.side-nav__message-list {
|
.side-nav__message-list {
|
||||||
width: 2rem;
|
width: 2.1rem;
|
||||||
border-right: 1px solid $border-color;
|
border-right: 1px solid $border-color;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@@ -193,7 +192,7 @@
|
|||||||
.side-nav__message-list-item {
|
.side-nav__message-list-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0.12rem 0.14rem;
|
padding: 0.12rem 0.10rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-bottom: 1px solid $border-color;
|
border-bottom: 1px solid $border-color;
|
||||||
transition: background 0.2s;
|
transition: background 0.2s;
|
||||||
|
|||||||
@@ -27,6 +27,7 @@
|
|||||||
@use './components/job-resume-custom-edit-panel.scss';
|
@use './components/job-resume-custom-edit-panel.scss';
|
||||||
@use './components/resume-analysis-report-drawer.scss';
|
@use './components/resume-analysis-report-drawer.scss';
|
||||||
@use './components/resume-issue-fix-drawer.scss';
|
@use './components/resume-issue-fix-drawer.scss';
|
||||||
|
@use './components/resume-issue-fix-all-drawer.scss';
|
||||||
@use './components/resume-edit-name-dialog.scss';
|
@use './components/resume-edit-name-dialog.scss';
|
||||||
@use './components/agent-chat-job-list.scss';
|
@use './components/agent-chat-job-list.scss';
|
||||||
@use './components/agent-match-job-add.scss';
|
@use './components/agent-match-job-add.scss';
|
||||||
@@ -35,6 +36,9 @@
|
|||||||
@use './components/settings-delete-account-dialog.scss';
|
@use './components/settings-delete-account-dialog.scss';
|
||||||
@use './components/profile-welcome-dialog.scss';
|
@use './components/profile-welcome-dialog.scss';
|
||||||
@use './components/settings-invite-dialog.scss';
|
@use './components/settings-invite-dialog.scss';
|
||||||
|
@use './components/resume-upload-dialog.scss';
|
||||||
|
@use './components/agreement-preview-dialog.scss';
|
||||||
|
@use './components/member-access-dialog.scss';
|
||||||
|
|
||||||
// 全局样式(优先级最高)
|
// 全局样式(优先级最高)
|
||||||
@use './auto.scss';
|
@use './auto.scss';
|
||||||
@@ -67,6 +71,73 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ==================== Element Plus MessageBox rem 适配修正 ====================
|
||||||
|
.el-overlay {
|
||||||
|
// 确保遮罩层 z-index 足够高
|
||||||
|
z-index: 2100 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-message-box {
|
||||||
|
width: 420px !important;
|
||||||
|
padding: 20px !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
// 修正 transform: scale 下弹窗居中
|
||||||
|
position: fixed !important;
|
||||||
|
top: 50% !important;
|
||||||
|
left: 50% !important;
|
||||||
|
transform: translate(-50%, -50%) !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
padding: 0 0 12px 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 16px !important;
|
||||||
|
line-height: 1.4 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__headerbtn {
|
||||||
|
top: 20px !important;
|
||||||
|
right: 20px !important;
|
||||||
|
width: 16px !important;
|
||||||
|
height: 16px !important;
|
||||||
|
font-size: 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
padding: 12px 0 !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__message {
|
||||||
|
font-size: 14px !important;
|
||||||
|
line-height: 1.5 !important;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 14px !important;
|
||||||
|
line-height: 1.5 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__status {
|
||||||
|
font-size: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__btns {
|
||||||
|
padding: 8px 0 0 0 !important;
|
||||||
|
|
||||||
|
.el-button {
|
||||||
|
font-size: 14px !important;
|
||||||
|
padding: 8px 20px !important;
|
||||||
|
height: 32px !important;
|
||||||
|
border-radius: 4px !important;
|
||||||
|
min-width: 60px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// ==================== Element Plus Loading rem 适配修正 + 品牌色覆盖 ====================
|
// ==================== Element Plus Loading rem 适配修正 + 品牌色覆盖 ====================
|
||||||
.el-loading-mask {
|
.el-loading-mask {
|
||||||
// 全屏 loading 遮罩层 z-index 确保最高
|
// 全屏 loading 遮罩层 z-index 确保最高
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
|
|
||||||
// ==================== 求职助手页面样式 ====================
|
// ==================== 求职助手页面样式 ====================
|
||||||
.agent-page {
|
.agent-page {
|
||||||
min-height: 100vh;
|
min-height: var(--app-height, 100vh);
|
||||||
background: $bg-main;
|
background: $bg-main;
|
||||||
font-size: 0.14rem;
|
font-size: 0.14rem;
|
||||||
// 主内容区域(左侧导航栏右边的部分)
|
// 主内容区域(左侧导航栏右边的部分)
|
||||||
@@ -12,7 +12,7 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 0.3rem 0.4rem;
|
padding: 0.3rem 0.4rem;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
height: 100vh;
|
height: var(--app-height, 100vh);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -97,7 +97,7 @@
|
|||||||
|
|
||||||
// 左侧说明引导区域
|
// 左侧说明引导区域
|
||||||
&__left {
|
&__left {
|
||||||
width: 4.2rem;
|
width: 3.0rem;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -111,7 +111,7 @@
|
|||||||
&__intro-card {
|
&__intro-card {
|
||||||
background: $bg-white;
|
background: $bg-white;
|
||||||
border-radius: 0.12rem;
|
border-radius: 0.12rem;
|
||||||
padding: 0.3rem;
|
padding: 0.38rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 卡片头部:图标 + 标题
|
// 卡片头部:图标 + 标题
|
||||||
@@ -214,23 +214,15 @@
|
|||||||
&__profile-wrapper {
|
&__profile-wrapper {
|
||||||
background: $bg-main;
|
background: $bg-main;
|
||||||
border-radius: 0.12rem;
|
border-radius: 0.12rem;
|
||||||
border: 1px solid $border-color;
|
max-height: calc(var(--app-height, 100vh) - 1.4rem);
|
||||||
padding: 0.24rem;
|
|
||||||
max-height: calc(100vh - 1.4rem);
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
scrollbar-width: none; // Firefox
|
||||||
|
-ms-overflow-style: none; // IE/Edge
|
||||||
|
|
||||||
// 自定义滚动条
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: 4px;
|
display: none; // Chrome/Safari
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background: $border-color;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
|
||||||
background: transparent;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -246,11 +238,40 @@
|
|||||||
|
|
||||||
// ==================== 第2步:确认目标 ====================
|
// ==================== 第2步:确认目标 ====================
|
||||||
|
|
||||||
|
// 返回上一步按钮 — 位于每步容器左上角
|
||||||
|
&__back-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.04rem;
|
||||||
|
padding: 0.06rem 0.12rem;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: $text-middle;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 0.04rem;
|
||||||
|
transition: color 0.2s ease, background 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $text-dark;
|
||||||
|
background: $bg-middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 第2步整体容器
|
// 第2步整体容器
|
||||||
&__step2 {
|
&__step2 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 7rem;
|
max-width: 7rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 0.36rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 对话区域
|
// 对话区域
|
||||||
@@ -570,189 +591,309 @@
|
|||||||
&:active { transform: scale(0.98); }
|
&:active { transform: scale(0.98); }
|
||||||
}
|
}
|
||||||
|
|
||||||
// ==================== 第3步:网申常见问题 ====================
|
// ==================== 第2步新增:求职偏好区域 ====================
|
||||||
|
&__pref-section {
|
||||||
// 第3步整体容器 — 左右两栏布局
|
background: $bg-white;
|
||||||
&__step3 {
|
border-radius: 0.12rem;
|
||||||
display: flex;
|
padding: 0.24rem;
|
||||||
gap: 0.24rem;
|
margin-bottom: 0.2rem;
|
||||||
align-items: flex-start;
|
border: 1px solid $border-color;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 右侧表单包裹
|
&__pref-section-title {
|
||||||
&__form-wrapper {
|
font-size: 0.18rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $text-dark;
|
||||||
|
margin-bottom: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__pref-section-desc {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $text-middle;
|
||||||
|
margin-bottom: 0.16rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__pref-filters {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.1rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__pref-type-tag {
|
||||||
|
padding: 0.06rem 0.16rem;
|
||||||
|
background: $bg-main;
|
||||||
|
border-radius: 0.04rem;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $text-dark;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 招聘分类下拉选择
|
||||||
|
&__pref-type-dropdown {
|
||||||
|
position: relative;
|
||||||
|
padding: 0.1rem 0.28rem;
|
||||||
|
background: #F5FAF9;
|
||||||
|
border-radius: 0.24rem;
|
||||||
|
font-size: 0.14rem;
|
||||||
|
color: $text-dark;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.04rem;
|
||||||
|
min-width: 0.9rem;
|
||||||
|
height: 0.38rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
user-select: none;
|
||||||
|
transition: border-color 0.2s ease;
|
||||||
|
|
||||||
|
&:hover { border-color: $accent; }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__pref-type-arrow {
|
||||||
|
width: 0.12rem;
|
||||||
|
height: 0.12rem;
|
||||||
|
color: $text-middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__pref-type-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% + 0.04rem);
|
||||||
|
left: 0;
|
||||||
|
min-width: 1.2rem;
|
||||||
|
background: $bg-white;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: 0.06rem;
|
||||||
|
box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.1);
|
||||||
|
z-index: 10;
|
||||||
|
padding: 0.04rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__pref-type-menu-item {
|
||||||
|
padding: 0.08rem 0.14rem;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $text-dark;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.15s ease;
|
||||||
|
|
||||||
|
&:hover { background: $bg-main; }
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
color: $accent;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== 第2步新增:简历设置区域 ====================
|
||||||
|
&__resume-section {
|
||||||
|
background: $bg-white;
|
||||||
|
border-radius: 0.12rem;
|
||||||
|
padding: 0.24rem;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__resume-sub-label {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $text-middle;
|
||||||
|
margin-bottom: 0.12rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__resume-select-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.1rem;
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
padding: 0.1rem 0.14rem;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: 0.08rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__resume-check-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 0.16rem;
|
||||||
|
height: 0.16rem;
|
||||||
|
color: $text-middle;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__resume-select {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.el-input__wrapper {
|
||||||
|
box-shadow: none !important;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__resume-switch-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.1rem 0;
|
||||||
|
|
||||||
|
& + & {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__resume-switch-text {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $text-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== 第3步:安装插件 ====================
|
||||||
|
|
||||||
|
// 安装教程整体容器
|
||||||
|
&__install-guide {
|
||||||
background: $bg-white;
|
background: $bg-white;
|
||||||
border-radius: 0.12rem;
|
border-radius: 0.12rem;
|
||||||
padding: 0.28rem;
|
padding: 0.28rem;
|
||||||
border: 1px solid $border-color;
|
border: 1px solid $border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 表单标题
|
// 安装教程标题
|
||||||
&__form-title {
|
&__install-guide-title {
|
||||||
font-size: 0.15rem;
|
font-size: 0.18rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $text-dark;
|
color: $text-dark;
|
||||||
margin-bottom: 0.24rem;
|
margin-bottom: 0.28rem;
|
||||||
padding-bottom: 0.12rem;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 表单分组
|
// 每个安装步骤
|
||||||
&__form-group {
|
&__install-step {
|
||||||
margin-bottom: 0.28rem;
|
margin-bottom: 0.3rem;
|
||||||
|
|
||||||
&:last-child { margin-bottom: 0; }
|
&:last-child { margin-bottom: 0; }
|
||||||
}
|
}
|
||||||
|
|
||||||
// 表单标签
|
// 步骤文字说明
|
||||||
&__form-label {
|
&__install-step-text {
|
||||||
font-size: 0.14rem;
|
font-size: 0.14rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $text-dark;
|
color: $text-dark;
|
||||||
margin-bottom: 0.12rem;
|
margin-bottom: 0.16rem;
|
||||||
text-align: center;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 选项按钮行
|
// 下载按钮
|
||||||
&__form-options {
|
&__install-download-btn {
|
||||||
display: flex;
|
display: inline-flex;
|
||||||
justify-content: center;
|
|
||||||
gap: 0.12rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 单个选项按钮
|
|
||||||
&__form-option {
|
|
||||||
padding: 0.08rem 0.24rem;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
border-radius: 0.06rem;
|
|
||||||
background: $bg-white;
|
|
||||||
color: $text-dark;
|
|
||||||
font-size: 0.13rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
line-height: 1.4;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: $text-middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 选中态
|
|
||||||
&--active {
|
|
||||||
background: $btn-dark;
|
|
||||||
color: $bg-white;
|
|
||||||
border-color: $btn-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 下拉选择器行
|
|
||||||
&__form-selects {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.12rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 统一下拉选择器样式覆盖
|
|
||||||
&__form-select {
|
|
||||||
width: 1.4rem;
|
|
||||||
|
|
||||||
// 覆盖 Element Plus 选择器样式以匹配页面风格
|
|
||||||
:deep(.el-input__wrapper) {
|
|
||||||
border-radius: 0.2rem;
|
|
||||||
box-shadow: none;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
padding: 0.02rem 0.12rem;
|
|
||||||
background: $bg-white;
|
|
||||||
transition: border-color 0.2s ease;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&.is-focus {
|
|
||||||
border-color: $accent;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-input__inner) {
|
|
||||||
font-size: 0.13rem;
|
|
||||||
color: $text-dark;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color: $text-light;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-input__suffix) {
|
|
||||||
color: $text-light;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 第3步下半部分:插件安装 ====================
|
|
||||||
|
|
||||||
// 安装步骤说明文字
|
|
||||||
&__install-steps {
|
|
||||||
font-size: 0.13rem;
|
|
||||||
color: $text-middle;
|
|
||||||
line-height: 1.8;
|
|
||||||
margin-bottom: 0.28rem;
|
|
||||||
|
|
||||||
p { margin: 0; }
|
|
||||||
}
|
|
||||||
|
|
||||||
// 插件区域
|
|
||||||
&__plugin-section {
|
|
||||||
text-align: center;
|
|
||||||
padding: 0.2rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 插件标题
|
|
||||||
&__plugin-title {
|
|
||||||
font-size: 0.18rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: $text-dark;
|
|
||||||
margin-bottom: 0.24rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 浏览器按钮行
|
|
||||||
&__browser-btns {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.1rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 单个浏览器按钮
|
|
||||||
&__browser-btn {
|
|
||||||
padding: 0.08rem 0.2rem;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
border-radius: 0.06rem;
|
|
||||||
background: $bg-white;
|
|
||||||
color: $text-dark;
|
|
||||||
font-size: 0.13rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: $accent;
|
|
||||||
color: $accent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 指引图片幻灯片
|
|
||||||
&__guide-slide {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
gap: 0.08rem;
|
||||||
height: 100%;
|
padding: 0.08rem 0.2rem;
|
||||||
|
background: rgba($accent, 0.1);
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
color: $accent;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover { background: rgba($accent, 0.2); }
|
||||||
|
|
||||||
|
svg { flex-shrink: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// 步骤2的内容区(图片+浏览器链接并排)
|
||||||
|
&__install-step-content {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.24rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 步骤中的图片区
|
||||||
|
&__install-step-img {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
background: $bg-main;
|
||||||
|
border-radius: 0.08rem;
|
||||||
|
padding: 0.12rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
max-height: 100%;
|
height: auto;
|
||||||
object-fit: contain;
|
border-radius: 0.06rem;
|
||||||
border-radius: 0.08rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 浏览器链接区域
|
||||||
|
&__install-browser-links {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__install-browser-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.08rem;
|
||||||
|
margin-bottom: 0.06rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__install-browser-icon {
|
||||||
|
width: 0.2rem;
|
||||||
|
height: 0.2rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__install-browser-name {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: $text-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__install-browser-url {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.04rem;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $accent;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 0.16rem;
|
||||||
|
|
||||||
|
&:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
svg { flex-shrink: 0; color: $text-middle; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// 步骤3/4的图片展示行
|
||||||
|
&__install-step-img-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.16rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__install-step-img-item {
|
||||||
|
flex: 1;
|
||||||
|
background: $bg-main;
|
||||||
|
border-radius: 0.08rem;
|
||||||
|
padding: 0.12rem;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 0.06rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 右侧卡片中的安装步骤列表
|
||||||
|
&__install-steps-list {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $text-middle;
|
||||||
|
line-height: 2;
|
||||||
|
margin-bottom: 0.1rem;
|
||||||
|
|
||||||
|
p { margin: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
// ==================== 设置完成页 ====================
|
// ==================== 设置完成页 ====================
|
||||||
|
|
||||||
// 完成页容器 — 居中布局
|
// 完成页容器 — 居中布局
|
||||||
@@ -814,28 +955,34 @@
|
|||||||
.agent-main {
|
.agent-main {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
// 有右侧面板时取消居中
|
// 左侧主区域(60%)
|
||||||
&--with-panel {
|
|
||||||
//justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 左侧主区域
|
|
||||||
&__left {
|
&__left {
|
||||||
flex: 1;
|
width: 60%;
|
||||||
height: calc(100vh - 0.6rem);
|
height: calc(var(--app-height, 100vh) - 0.6rem);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
max-width: 8rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 右侧匹配岗位面板
|
// 右侧面板(40%,常驻设置面板 + 覆盖层)
|
||||||
&__right {
|
&__right {
|
||||||
flex: 1;
|
width: 40%;
|
||||||
height: calc(100vh - 0.6rem);
|
height: calc(var(--app-height, 100vh) - 0.6rem);
|
||||||
margin-left: 0.2rem;
|
margin-left: 0.2rem;
|
||||||
max-width: 8rem;
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 右侧覆盖层 — 绝对定位覆盖在设置面板之上
|
||||||
|
&__right-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 10;
|
||||||
|
background: $bg-white;
|
||||||
|
border-radius: 0.12rem;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -847,7 +994,6 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
// 自定义滚动条
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: 4px;
|
width: 4px;
|
||||||
}
|
}
|
||||||
@@ -1085,7 +1231,7 @@
|
|||||||
|
|
||||||
// 工具按钮
|
// 工具按钮
|
||||||
&__tool-btn {
|
&__tool-btn {
|
||||||
width: 0.28rem;
|
width: 0.38rem;
|
||||||
height: 0.28rem;
|
height: 0.28rem;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
@@ -1097,6 +1243,8 @@
|
|||||||
color: $text-middle;
|
color: $text-middle;
|
||||||
border-radius: 0.06rem;
|
border-radius: 0.06rem;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
width: 0.18rem;
|
width: 0.18rem;
|
||||||
@@ -1109,7 +1257,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ==================== 中间聊天记录区域 ====================
|
// ==================== 中间内容区域 ====================
|
||||||
&__chat-area {
|
&__chat-area {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
@@ -1131,6 +1279,14 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 投递进度列表
|
||||||
|
&__progress-list {
|
||||||
|
margin-top: 0.16rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.12rem;
|
||||||
|
}
|
||||||
|
|
||||||
// ==================== 对话消息样式 ====================
|
// ==================== 对话消息样式 ====================
|
||||||
|
|
||||||
// 对话行
|
// 对话行
|
||||||
|
|||||||
@@ -14,6 +14,7 @@
|
|||||||
font-family: system-ui, -apple-system, sans-serif;
|
font-family: system-ui, -apple-system, sans-serif;
|
||||||
// 全局基础行高重置,防止 1rem=100px 导致子元素继承异常行高
|
// 全局基础行高重置,防止 1rem=100px 导致子元素继承异常行高
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
font-size: 0.14rem;
|
||||||
|
|
||||||
// ==================== 顶部导航栏 ====================
|
// ==================== 顶部导航栏 ====================
|
||||||
.home-nav {
|
.home-nav {
|
||||||
@@ -23,17 +24,25 @@
|
|||||||
|
|
||||||
// 导航内容容器 — 居中 12rem 宽
|
// 导航内容容器 — 居中 12rem 宽
|
||||||
&__inner {
|
&__inner {
|
||||||
width: 12rem;
|
width: 12.40rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
height: 0.68rem;
|
height: 0.72rem;
|
||||||
padding: 0.2rem;
|
padding: 0.2rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 40px;
|
border-radius: 0.24rem;
|
||||||
background: #FFFFFF;
|
|
||||||
border: 0.01rem solid #FFFFFF;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
|
&--scorlled {
|
||||||
|
position: fixed;
|
||||||
|
top: 0.2rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 100;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0 0 0 .5px rgba(0, 0, 0, .04), 0 0 32px 0 rgba(10, 20, 21, .06);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Logo 区域
|
// Logo 区域
|
||||||
@@ -61,7 +70,7 @@
|
|||||||
// 导航右侧 CTA 按钮
|
// 导航右侧 CTA 按钮
|
||||||
&__btn {
|
&__btn {
|
||||||
padding: 0.1rem 0.32rem;
|
padding: 0.1rem 0.32rem;
|
||||||
border-radius: 9999px;
|
border-radius: 0.16rem;
|
||||||
background: #111;
|
background: #111;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 0.14rem;
|
font-size: 0.14rem;
|
||||||
@@ -80,7 +89,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: 0.14rem;
|
font-size: 0.14rem;
|
||||||
background: radial-gradient(49.26% 24.58% at 46% 0%, #CEF0F2 0%, #FFFFFF 100%);
|
background: radial-gradient(34.95% 29.57% at 60.26041666666667% 0%, rgba(206, 240, 242, 1) 0%, rgba(255, 255, 255, 1) 100%);
|
||||||
// 背景色块 — 顶部
|
// 背景色块 — 顶部
|
||||||
&__orb {
|
&__orb {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -92,11 +101,13 @@
|
|||||||
|
|
||||||
&--top {
|
&--top {
|
||||||
left: 40%;
|
left: 40%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-30%) rotate(3deg);
|
||||||
top: -1.2rem;
|
top: -4.9rem;
|
||||||
width: 8rem;
|
width: 13.6rem;
|
||||||
height: 2.2rem;
|
height: 6rem;
|
||||||
background: rgba(82, 202, 209, 0.2);
|
border-radius: 50%;
|
||||||
|
filter: blur(0.5rem);
|
||||||
|
background: rgba(82, 202, 209, 0.24);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -104,7 +115,7 @@
|
|||||||
&--bottom {
|
&--bottom {
|
||||||
left: 40%;
|
left: 40%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
bottom: -2.4rem;
|
bottom: -1.6rem;
|
||||||
width: 4rem;
|
width: 4rem;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
}
|
}
|
||||||
@@ -119,21 +130,21 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 1.5rem 0 1.2rem;
|
padding: 1.2rem 0 1.2rem;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 左侧文字区
|
// 左侧文字区
|
||||||
&__left {
|
&__left {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
max-width: 5.5rem;
|
//width: 5.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 主标题
|
// 主标题
|
||||||
&__title {
|
&__title {
|
||||||
font-size: 0.72rem;
|
font-size: 0.54rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 0.9rem;
|
line-height: 0.71rem;
|
||||||
letter-spacing: -0.03rem;
|
letter-spacing: -0.03rem;
|
||||||
color: #111;
|
color: #111;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -144,37 +155,55 @@
|
|||||||
font-size: 0.2rem;
|
font-size: 0.2rem;
|
||||||
line-height: 0.325rem;
|
line-height: 0.325rem;
|
||||||
color: #9ca3af;
|
color: #9ca3af;
|
||||||
margin-top: 0.2rem;
|
margin-top: 0.1rem;
|
||||||
max-width: 4.74rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 免费体验按钮
|
// 免费体验按钮
|
||||||
&__cta {
|
&__cta {
|
||||||
margin-top: 0.4rem;
|
margin-top: 0.69rem;
|
||||||
padding: 0.2rem 0.56rem;
|
width: 1.84rem;
|
||||||
border-radius: 9999px;
|
height: 0.56rem;
|
||||||
background: $accent;
|
//line-height: 0.24rem;
|
||||||
|
border-radius: 0.16rem;
|
||||||
|
background: linear-gradient(90deg, rgba(82, 202, 209, 1) 0%, rgba(83, 217, 200, 1) 100%);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 0.18rem;
|
font-size: 0.18rem;
|
||||||
line-height: 0.28rem;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-shadow: 0 25px 50px -12px rgba(82, 202, 209, 0.2);
|
box-shadow: 0 25px 50px -12px rgba(82, 202, 209, 0.2);
|
||||||
transition: background 0.2s;
|
transition: background 0.2s;
|
||||||
&:hover { background: $accent-hover; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 右侧卡片区
|
// 右侧卡片区
|
||||||
&__right {
|
&__right {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
box-shadow: 0px 0px 15.45px rgba(82, 202, 209, 0.1);
|
||||||
|
border-radius: 0.16rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__right-top{
|
||||||
|
height: 0.5rem;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 0.16rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.06rem;
|
||||||
|
padding-left: 0.3rem;
|
||||||
|
>div{
|
||||||
|
height: 0.08rem;
|
||||||
|
width: 0.08rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #52CAD1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 视频播放器 — 16:9 比例,圆角,无控件
|
// 视频播放器 — 16:9 比例,圆角,无控件
|
||||||
&__video {
|
&__video {
|
||||||
width: 6.5rem;
|
width: 5.16rem;
|
||||||
aspect-ratio: 16 / 9;
|
height: 2.90rem;
|
||||||
border-radius: 0.24rem;
|
//aspect-ratio: 16 / 9;
|
||||||
|
border-radius: 0.16rem;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
@@ -308,12 +337,11 @@
|
|||||||
|
|
||||||
// 标题区
|
// 标题区
|
||||||
&__header {
|
&__header {
|
||||||
margin-bottom: 0.6rem;
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 0.48rem;
|
font-size: 0.48rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: -0.015rem;
|
letter-spacing: -0.015rem;
|
||||||
line-height: 0.7rem;
|
line-height: 0.63rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -322,8 +350,8 @@
|
|||||||
width: 0.8rem;
|
width: 0.8rem;
|
||||||
height: 0.06rem;
|
height: 0.06rem;
|
||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
background: rgba(82, 202, 209, 0.3);
|
background: #52CAD1;
|
||||||
margin-top: 0.2rem;
|
margin-top: 0.53rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 三个统计卡片横向排列
|
// 三个统计卡片横向排列
|
||||||
@@ -336,23 +364,25 @@
|
|||||||
// 单个统计卡片
|
// 单个统计卡片
|
||||||
.stat-card {
|
.stat-card {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 0.48rem;
|
border-radius: 0.16rem;
|
||||||
padding: 0.5rem;
|
width: 2.03rem;
|
||||||
|
height: 1.87rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
|
padding-top:0.38rem;
|
||||||
|
box-shadow: 0 0.06rem 0.2rem rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
// 大数字
|
// 大数字
|
||||||
&__num {
|
&__num {
|
||||||
font-size: 0.64rem;
|
font-size: 0.48rem;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: $accent;
|
color: #52CAD1;
|
||||||
line-height: 0.85rem;
|
line-height: 0.63rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 描述文字
|
// 描述文字
|
||||||
&__label {
|
&__label {
|
||||||
font-size: 0.14rem;
|
font-size: 0.16rem;
|
||||||
line-height: 0.2rem;
|
line-height: 0.22rem;
|
||||||
color: #9ca3af;
|
color: #9ca3af;
|
||||||
margin-top: 0.12rem;
|
margin-top: 0.12rem;
|
||||||
letter-spacing: 0.0035rem;
|
letter-spacing: 0.0035rem;
|
||||||
@@ -362,11 +392,42 @@
|
|||||||
// ==================== 岗位展示区 ====================
|
// ==================== 岗位展示区 ====================
|
||||||
.home-jobs-showcase {
|
.home-jobs-showcase {
|
||||||
padding: 1rem 0;
|
padding: 1rem 0;
|
||||||
background: rgba(82, 202, 209, 0.05);
|
position: relative;
|
||||||
background: linear-gradient(to top, rgba(82, 202, 209, 0.05), rgba(82, 202, 209, 0.0001));
|
overflow: hidden;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
// 背景色块 — 定位实现
|
||||||
|
&__orb {
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
|
// 顶部小块 — 类似 hero 底部色块
|
||||||
|
&--top {
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: -3rem;
|
||||||
|
width: 5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
border-radius: 3.5rem;
|
||||||
|
background: rgba(82, 202, 209, 0.3);
|
||||||
|
filter: blur(1.2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 底部全宽 — 从底部向上渐变透明
|
||||||
|
&--bottom {
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 7rem;
|
||||||
|
background: linear-gradient(to top, rgba(82, 202, 209, 0.08), transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 内容容器
|
// 内容容器
|
||||||
&__inner {
|
&__inner {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
width: 12rem;
|
width: 12rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -394,7 +455,7 @@
|
|||||||
box-shadow: 0 10px 40px rgba(82, 202, 209, 0.12);
|
box-shadow: 0 10px 40px rgba(82, 202, 209, 0.12);
|
||||||
backdrop-filter: blur(100px);
|
backdrop-filter: blur(100px);
|
||||||
border-radius: 0.4rem;
|
border-radius: 0.4rem;
|
||||||
padding: 0.64rem;
|
padding: 0.64rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 岗位数量统计 — 横向排列
|
// 岗位数量统计 — 横向排列
|
||||||
@@ -405,13 +466,16 @@
|
|||||||
margin-bottom: 0.6rem;
|
margin-bottom: 0.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 岗位滚动卡片容器
|
// 岗位滚动卡片容器 — 无缝轮播
|
||||||
&__scroll {
|
&__scroll {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.ticker-track {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.16rem;
|
gap: 0.16rem;
|
||||||
overflow-x: auto;
|
width: max-content;
|
||||||
padding-bottom: 0.1rem;
|
animation: ticker-scroll 20s linear infinite;
|
||||||
&::-webkit-scrollbar { display: none; }
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -419,7 +483,7 @@
|
|||||||
.showcase-stat {
|
.showcase-stat {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
&__num {
|
&__num {
|
||||||
font-size: 0.6rem;
|
font-size: 0.48rem;
|
||||||
line-height: 0.6rem;
|
line-height: 0.6rem;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #1d1d1d;
|
color: #1d1d1d;
|
||||||
@@ -440,7 +504,7 @@
|
|||||||
backdrop-filter: blur(36px);
|
backdrop-filter: blur(36px);
|
||||||
border-radius: 0.12rem;
|
border-radius: 0.12rem;
|
||||||
padding: 0.2rem 0.24rem;
|
padding: 0.2rem 0.24rem;
|
||||||
min-width: 2.8rem;
|
min-width: 2.6rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
// 公司名 + 时间
|
// 公司名 + 时间
|
||||||
@@ -481,9 +545,9 @@
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 0.52rem;
|
font-size: 0.48rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 0.65rem;
|
line-height: 0.63rem;
|
||||||
color: #111;
|
color: #111;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
@@ -492,22 +556,21 @@
|
|||||||
font-size: 0.2rem;
|
font-size: 0.2rem;
|
||||||
line-height: 0.325rem;
|
line-height: 0.325rem;
|
||||||
color: #999;
|
color: #999;
|
||||||
margin-top: 0.24rem;
|
margin-top: 0.16rem;
|
||||||
max-width: 4.5rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 深色圆角按钮(带图标)
|
// 深色圆角按钮(带图标)
|
||||||
&__btn {
|
&__btn {
|
||||||
margin-top: 0.4rem;
|
margin-top: 0.73rem;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.12rem;
|
gap: 0.12rem;
|
||||||
padding: 0.2rem 0.4rem;
|
padding: 0.15rem 0.4rem;
|
||||||
border-radius: 9999px;
|
border-radius: 0.16rem;
|
||||||
background: #111111;
|
background: #111111;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 0.18rem;
|
font-size: 0.16rem;
|
||||||
line-height: 0.28rem;
|
line-height: 0.28rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border: none;
|
border: none;
|
||||||
@@ -530,8 +593,8 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: linear-gradient(157.19deg, #E8F8F9 0%, #FBFDF7 100%);
|
background: linear-gradient(136.66deg, #E8F8F9 0%, #FBFDF7 100%);
|
||||||
border-radius: 0.48rem;
|
border-radius: 0.16rem;
|
||||||
padding: 0.48rem;
|
padding: 0.48rem;
|
||||||
min-height: 3.87rem;
|
min-height: 3.87rem;
|
||||||
}
|
}
|
||||||
@@ -544,6 +607,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 无缝轮播关键帧 — 滚动半程(第一组内容宽度)
|
||||||
|
@keyframes ticker-scroll {
|
||||||
|
0% { transform: translateX(0); }
|
||||||
|
100% { transform: translateX(-50%); }
|
||||||
|
}
|
||||||
|
|
||||||
// ---- 功能1:匹配卡片 ----
|
// ---- 功能1:匹配卡片 ----
|
||||||
.feature-match-card {
|
.feature-match-card {
|
||||||
background: rgba(255, 255, 255, 0.9);
|
background: rgba(255, 255, 255, 0.9);
|
||||||
@@ -568,7 +637,7 @@
|
|||||||
width: 0.64rem;
|
width: 0.64rem;
|
||||||
height: 0.64rem;
|
height: 0.64rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: linear-gradient(135deg, $accent, #a7f3d0);
|
//background: linear-gradient(135deg, $accent, #a7f3d0);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -590,7 +659,7 @@
|
|||||||
span {
|
span {
|
||||||
font-size: 0.1rem;
|
font-size: 0.1rem;
|
||||||
line-height: 0.15rem;
|
line-height: 0.15rem;
|
||||||
background: rgba(82, 202, 209, 0.15);
|
background: rgba(82, 202, 209, 0.2);
|
||||||
color: $accent;
|
color: $accent;
|
||||||
padding: 0.02rem 0.08rem;
|
padding: 0.02rem 0.08rem;
|
||||||
border-radius: 0.04rem;
|
border-radius: 0.04rem;
|
||||||
@@ -602,11 +671,10 @@
|
|||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
background: $accent;
|
background: $accent;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 0.12rem 0.16rem;
|
padding: 0.12rem 0.11rem;
|
||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
font-size: 0.14rem;
|
font-size: 0.14rem;
|
||||||
line-height: 0.2rem;
|
line-height: 0.2rem;
|
||||||
font-weight: 600;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 骨架进度条 — block 自然纵排,无需 flex-direction: column
|
// 骨架进度条 — block 自然纵排,无需 flex-direction: column
|
||||||
@@ -614,7 +682,7 @@
|
|||||||
.bar {
|
.bar {
|
||||||
height: 0.08rem;
|
height: 0.08rem;
|
||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
background: #e5e7eb;
|
background: #F3F4F6;
|
||||||
&--full { width: 100%; }
|
&--full { width: 100%; }
|
||||||
&--3q { width: 75%; margin-top: 0.1rem; }
|
&--3q { width: 75%; margin-top: 0.1rem; }
|
||||||
}
|
}
|
||||||
@@ -626,11 +694,10 @@
|
|||||||
background: $accent;
|
background: $accent;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0.16rem;
|
padding: 0.15rem;
|
||||||
border-radius: 0.16rem;
|
border-radius: 0.16rem;
|
||||||
font-size: 0.16rem;
|
font-size: 0.16rem;
|
||||||
line-height: 0.24rem;
|
line-height: 0.24rem;
|
||||||
font-weight: 600;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -719,7 +786,6 @@
|
|||||||
&__title {
|
&__title {
|
||||||
font-size: 0.14rem;
|
font-size: 0.14rem;
|
||||||
line-height: 0.2rem;
|
line-height: 0.2rem;
|
||||||
//font-weight: 600;
|
|
||||||
color: #111;
|
color: #111;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
@@ -735,7 +801,7 @@
|
|||||||
|
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
0%, 100% { opacity: 1; }
|
0%, 100% { opacity: 1; }
|
||||||
50% { opacity: 0.5; }
|
50% { opacity: 0.6; }
|
||||||
}
|
}
|
||||||
|
|
||||||
// ---- 功能3:简历文档模拟卡片 ----
|
// ---- 功能3:简历文档模拟卡片 ----
|
||||||
@@ -812,7 +878,7 @@
|
|||||||
background: #e5e7eb;
|
background: #e5e7eb;
|
||||||
border-radius: 0.02rem;
|
border-radius: 0.02rem;
|
||||||
&--half { width: 50%; }
|
&--half { width: 50%; }
|
||||||
&--third { width: 33%; margin-top: 0.05rem; }
|
&--third { width: 33%; margin-top: 0.05rem;background: #F3F4F6 }
|
||||||
}
|
}
|
||||||
|
|
||||||
// 简历内容条占位 — block 自然纵排
|
// 简历内容条占位 — block 自然纵排
|
||||||
@@ -875,7 +941,7 @@
|
|||||||
&__role {
|
&__role {
|
||||||
font-size: 0.11rem;
|
font-size: 0.11rem;
|
||||||
line-height: 0.156rem;
|
line-height: 0.156rem;
|
||||||
font-weight: 900;
|
font-weight: 500;
|
||||||
color: #111;
|
color: #111;
|
||||||
margin: 0.03rem 0 0;
|
margin: 0.03rem 0 0;
|
||||||
}
|
}
|
||||||
@@ -916,7 +982,7 @@
|
|||||||
border: 0.9px solid rgba(255, 255, 255, 0.5);
|
border: 0.9px solid rgba(255, 255, 255, 0.5);
|
||||||
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.03);
|
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.03);
|
||||||
backdrop-filter: blur(66px);
|
backdrop-filter: blur(66px);
|
||||||
border-radius: 0.32rem;
|
border-radius: 0.16rem;
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
color: #111;
|
color: #111;
|
||||||
}
|
}
|
||||||
@@ -925,7 +991,7 @@
|
|||||||
&--user {
|
&--user {
|
||||||
background: $accent;
|
background: $accent;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 0.32rem;
|
border-radius: 0.16rem;
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
box-shadow: 0 4px 14px rgba(82, 202, 209, 0.2);
|
box-shadow: 0 4px 14px rgba(82, 202, 209, 0.2);
|
||||||
@@ -993,7 +1059,7 @@
|
|||||||
background: rgba(255, 255, 255, 0.8);
|
background: rgba(255, 255, 255, 0.8);
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
backdrop-filter: blur(100px);
|
backdrop-filter: blur(100px);
|
||||||
padding: 0.8rem 1.2rem 0.6rem;
|
padding: 1.0rem 0.05rem;
|
||||||
box-shadow: inset 0 0 0.9rem rgba(255, 255, 255, 0.5);
|
box-shadow: inset 0 0 0.9rem rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1014,7 +1080,7 @@
|
|||||||
font-size: 0.16rem;
|
font-size: 0.16rem;
|
||||||
line-height: 0.24rem;
|
line-height: 0.24rem;
|
||||||
color: #9ca3af;
|
color: #9ca3af;
|
||||||
letter-spacing: 0.016rem;
|
letter-spacing: 0.0rem;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin-top: 0.24rem;
|
margin-top: 0.24rem;
|
||||||
}
|
}
|
||||||
@@ -1024,16 +1090,18 @@
|
|||||||
&__cards {
|
&__cards {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.24rem;
|
gap: 0.24rem;
|
||||||
justify-content: center;
|
width: 12rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
justify-content: space-between;
|
||||||
margin-bottom: 0.48rem;
|
margin-bottom: 0.48rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 创始人引言深色卡片
|
// 创始人引言深色卡片
|
||||||
&__founder {
|
&__founder {
|
||||||
width: 12rem;
|
width: 12rem;
|
||||||
background: #1a1a2e;
|
background: #111;
|
||||||
border-radius: 0.48rem;
|
border-radius: 0.16rem;
|
||||||
padding: 0.48rem 0.6rem;
|
padding: 0.36rem 0.40rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -1044,8 +1112,8 @@
|
|||||||
// 创始人装饰圆环 SVG
|
// 创始人装饰圆环 SVG
|
||||||
&__founder-decor {
|
&__founder-decor {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: -0.6rem;
|
||||||
top: 50%;
|
bottom: -4.6rem;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
width: 4.55rem;
|
width: 4.55rem;
|
||||||
height: 4.55rem;
|
height: 4.55rem;
|
||||||
@@ -1076,8 +1144,8 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
font-size: 0.24rem;
|
font-size: 0.20rem;
|
||||||
line-height: 0.39rem;
|
line-height: 0.34rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
@@ -1091,13 +1159,13 @@
|
|||||||
.cite-name {
|
.cite-name {
|
||||||
font-size: 0.2rem;
|
font-size: 0.2rem;
|
||||||
color: $accent;
|
color: $accent;
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cite-role {
|
.cite-role {
|
||||||
font-size: 0.14rem;
|
font-size: 0.14rem;
|
||||||
color: #999;
|
color: #999;
|
||||||
margin-left: 0.08rem;
|
margin-left: 0.16rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1128,11 +1196,14 @@
|
|||||||
// 单个评价卡片
|
// 单个评价卡片
|
||||||
.testimonial-card {
|
.testimonial-card {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
max-width: 3.71rem;
|
max-width: 3.71rem;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
|
||||||
border-radius: 0.4rem;
|
border-radius: 0.16rem;
|
||||||
padding: 0.3rem;
|
padding: 0.3rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@@ -1157,7 +1228,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.16rem;
|
gap: 0.16rem;
|
||||||
margin-top: 0.3rem;
|
margin-top: 0.16rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 作者头像
|
// 作者头像
|
||||||
@@ -1166,8 +1237,6 @@
|
|||||||
height: 0.48rem;
|
height: 0.48rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border: 2px solid #fff;
|
|
||||||
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1196,7 +1265,7 @@
|
|||||||
|
|
||||||
// ==================== 岗位搜索入口 ====================
|
// ==================== 岗位搜索入口 ====================
|
||||||
.home-job-search {
|
.home-job-search {
|
||||||
padding: 0.8rem 0;
|
padding-bottom: 0.8rem;
|
||||||
|
|
||||||
// 内容容器
|
// 内容容器
|
||||||
&__inner {
|
&__inner {
|
||||||
@@ -1208,14 +1277,14 @@
|
|||||||
line-height: 0.36rem;
|
line-height: 0.36rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 0.4rem;
|
margin-bottom: 0.6rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 筛选条件横向排列
|
// 筛选条件横向排列
|
||||||
&__filters {
|
&__filters {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.24rem;
|
gap: 0.60rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
@@ -1244,10 +1313,11 @@
|
|||||||
|
|
||||||
// 搜索按钮
|
// 搜索按钮
|
||||||
.filter-btn {
|
.filter-btn {
|
||||||
height: 0.48rem;
|
width: 1.84rem;
|
||||||
|
height: 0.56rem;
|
||||||
padding: 0 0.4rem;
|
padding: 0 0.4rem;
|
||||||
border-radius: 0.24rem;
|
border-radius: 0.16rem;
|
||||||
background: $accent;
|
background: #111;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 0.16rem;
|
font-size: 0.16rem;
|
||||||
line-height: 0.26rem;
|
line-height: 0.26rem;
|
||||||
@@ -1255,7 +1325,7 @@
|
|||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 0.2s;
|
transition: background 0.2s;
|
||||||
&:hover { background: $accent-hover; }
|
&:hover { }
|
||||||
}
|
}
|
||||||
|
|
||||||
// ==================== 常见问题(FAQ) ====================
|
// ==================== 常见问题(FAQ) ====================
|
||||||
@@ -1348,33 +1418,74 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 悬停态 — 图标变品牌色
|
// "还有其他问题"展开后的反馈表单
|
||||||
&:hover {
|
&__feedback {
|
||||||
.faq-item__icon {
|
display: flex;
|
||||||
background: $accent;
|
flex-direction: column;
|
||||||
color: #fff;
|
align-items: center;
|
||||||
|
gap: 0.24rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 文本输入框
|
||||||
|
&__textarea {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 1.2rem;
|
||||||
|
padding: 0.2rem;
|
||||||
|
border-radius: 0.16rem;
|
||||||
|
border: none;
|
||||||
|
background: #f5f5f5;
|
||||||
|
font-size: 0.14rem;
|
||||||
|
line-height: 0.22rem;
|
||||||
|
color: #111;
|
||||||
|
resize: none;
|
||||||
|
outline: none;
|
||||||
|
font-family: inherit;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: #bbb;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 展开态 — 图标变品牌色
|
// 提交按钮
|
||||||
|
&__submit {
|
||||||
|
padding: 0.14rem 0.6rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
background: #111;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 0.16rem;
|
||||||
|
line-height: 0.22rem;
|
||||||
|
font-weight: 500;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 悬停态
|
||||||
|
&:hover {
|
||||||
|
.faq-item__icon {
|
||||||
|
background: #f3f4f6;
|
||||||
|
color: #1f2937;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 展开态
|
||||||
&--open {
|
&--open {
|
||||||
.faq-item__icon {
|
.faq-item__icon {
|
||||||
background: $accent;
|
background: #f3f4f6;
|
||||||
color: #fff;
|
color: #1f2937;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ==================== 底部 CTA 行动号召 ====================
|
// ==================== 底部 CTA 行动号召 ====================
|
||||||
.home-cta {
|
.home-cta {
|
||||||
padding: 0 1.2rem 1.2rem;
|
padding: 0 0 1.0rem;
|
||||||
width: 12rem;
|
width: 100%;
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
// CTA 内容区
|
// CTA 内容区
|
||||||
&__inner {
|
&__inner {
|
||||||
background: linear-gradient(223.56deg, #52CAD1 0%, #53D9C8 100%);
|
background: linear-gradient(223.56deg, #52CAD1 0%, #53D9C8 100%);
|
||||||
border-radius: 0.6rem;
|
border-radius: 0;
|
||||||
padding: 1.0rem 0;
|
padding: 1.0rem 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -1393,9 +1504,9 @@
|
|||||||
|
|
||||||
// CTA 按钮
|
// CTA 按钮
|
||||||
&__btn {
|
&__btn {
|
||||||
margin-top: 0.2rem;
|
margin-top: 0.4rem;
|
||||||
padding: 0.24rem 0.64rem;
|
padding: 0.18rem 0.64rem;
|
||||||
border-radius: 9999px;
|
border-radius: 0.16rem;
|
||||||
background: #111;
|
background: #111;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 0.2rem;
|
font-size: 0.2rem;
|
||||||
|
|||||||
@@ -4,10 +4,10 @@
|
|||||||
.job-detail {
|
.job-detail {
|
||||||
&__content {
|
&__content {
|
||||||
margin-left: 2rem;
|
margin-left: 2rem;
|
||||||
margin-right: 3.6rem;
|
margin-right: var(--chat-width, 4.0rem);
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 0.12rem 0.56rem 0.12rem 0.18rem;
|
padding: 0.12rem 0.12rem 0.12rem 0.12rem;
|
||||||
height: 100vh;
|
height: var(--app-height, 100vh);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: $bg-main;
|
background: $bg-main;
|
||||||
|
|||||||
@@ -5,10 +5,10 @@
|
|||||||
.jobs-page {
|
.jobs-page {
|
||||||
&__content {
|
&__content {
|
||||||
margin-left: 2rem;
|
margin-left: 2rem;
|
||||||
margin-right: 4.0rem;
|
margin-right: var(--chat-width, 4.0rem);
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 0.12rem 0.18rem;
|
padding: 0.12rem 0.18rem;
|
||||||
height: 100vh;
|
height: var(--app-height, 100vh);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: $bg-main;
|
background: $bg-main;
|
||||||
@@ -633,6 +633,31 @@
|
|||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 列表底部加载盒子
|
||||||
|
&__loading-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.08rem;
|
||||||
|
padding: 0.24rem 0;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $text-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载旋转动画
|
||||||
|
&__loading-spinner {
|
||||||
|
width: 0.18rem;
|
||||||
|
height: 0.18rem;
|
||||||
|
border: 2px solid rgba(0, 0, 0, 0.1);
|
||||||
|
border-top-color: $accent;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: jobs-spin 0.6s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes jobs-spin {
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
// 高匹配度特殊样式
|
// 高匹配度特殊样式
|
||||||
&__job-match--high &__match-score {
|
&__job-match--high &__match-score {
|
||||||
color: $accent-hover;
|
color: $accent-hover;
|
||||||
@@ -642,6 +667,74 @@
|
|||||||
color: $accent;
|
color: $accent;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ==================== AI助手投递提醒弹窗 ====================
|
||||||
|
|
||||||
|
// 遮罩层
|
||||||
|
&__agent-remind-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: $overlay-bg;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 2000;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 弹窗主体
|
||||||
|
&__agent-remind-dialog {
|
||||||
|
background: $bg-white;
|
||||||
|
border-radius: 0.12rem;
|
||||||
|
padding: 0.32rem 0.36rem 0.24rem;
|
||||||
|
min-width: 3.2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提示文字
|
||||||
|
&__agent-remind-text {
|
||||||
|
font-size: 0.15rem;
|
||||||
|
color: $text-dark;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 0.28rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按钮区域
|
||||||
|
&__agent-remind-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.16rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按钮通用
|
||||||
|
&__agent-remind-btn {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.1rem 0;
|
||||||
|
border-radius: 0.08rem;
|
||||||
|
font-size: 0.14rem;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 灰色按钮 — 直接投
|
||||||
|
&--secondary {
|
||||||
|
background: $bg-main;
|
||||||
|
color: $text-middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 主题色按钮 — 去AI助手
|
||||||
|
&--primary {
|
||||||
|
background: $btn-dark;
|
||||||
|
color: $bg-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ==================== 不感兴趣反馈弹窗 ====================
|
// ==================== 不感兴趣反馈弹窗 ====================
|
||||||
|
|||||||
@@ -6,9 +6,9 @@
|
|||||||
margin-left: 2rem;
|
margin-left: 2rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 0.12rem 0.36rem;
|
padding: 0.12rem 0.36rem;
|
||||||
height: 100vh;
|
height: var(--app-height, 100vh);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow-y: auto;
|
overflow: hidden;
|
||||||
background: $bg-main;
|
background: $bg-main;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -50,6 +50,7 @@
|
|||||||
gap: 0.24rem;
|
gap: 0.24rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 右侧边栏
|
// 右侧边栏
|
||||||
|
|||||||
@@ -5,8 +5,8 @@
|
|||||||
&__content {
|
&__content {
|
||||||
margin-left: 2rem;
|
margin-left: 2rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 0.12rem 0.36rem;
|
padding-bottom: 0.24rem;
|
||||||
height: 100vh;
|
height: var(--app-height, 100vh);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
background: $bg-main;
|
background: $bg-main;
|
||||||
@@ -16,10 +16,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__page-title {
|
&__page-title {
|
||||||
|
|
||||||
|
margin: 0 0 0.16rem 0;
|
||||||
|
padding: 0 0.24rem;
|
||||||
|
>h2{
|
||||||
font-size: 0.24rem;
|
font-size: 0.24rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $text-dark;
|
color: $text-dark;
|
||||||
margin: 0 0 0.16rem 0;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ---- 顶部操作栏 ----
|
// ---- 顶部操作栏 ----
|
||||||
@@ -27,7 +31,8 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: 0.16rem;
|
margin-bottom: 0.15rem;
|
||||||
|
padding: 0 0.24rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__toolbar-left {
|
&__toolbar-left {
|
||||||
@@ -37,22 +42,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__back-btn {
|
&__back-btn {
|
||||||
width: 0.32rem;
|
background: none;
|
||||||
height: 0.32rem;
|
border: none;
|
||||||
border-radius: 50%;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
background: $bg-white;
|
|
||||||
color: $text-dark;
|
color: $text-dark;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $theme-color;
|
color: #000;
|
||||||
border-color: $accent;
|
|
||||||
color: $accent;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -83,8 +84,8 @@
|
|||||||
gap: 0.04rem;
|
gap: 0.04rem;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: $text-light;
|
color: $text-dark;
|
||||||
font-size: 0.12rem;
|
font-size: 0.13rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 0.05rem 0.1rem;
|
padding: 0.05rem 0.1rem;
|
||||||
border-radius: 0.06rem;
|
border-radius: 0.06rem;
|
||||||
@@ -92,8 +93,8 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $text-dark;
|
//color: $text-dark;
|
||||||
background: $bg-white;
|
//background: $bg-white;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--danger:hover {
|
&--danger:hover {
|
||||||
@@ -115,40 +116,79 @@
|
|||||||
background: $bg-white;
|
background: $bg-white;
|
||||||
border-radius: 0.12rem;
|
border-radius: 0.12rem;
|
||||||
padding: 0.18rem 0.24rem;
|
padding: 0.18rem 0.24rem;
|
||||||
|
padding-top: 0.4rem;
|
||||||
margin-bottom: 0.16rem;
|
margin-bottom: 0.16rem;
|
||||||
|
|
||||||
|
/* B/C/D 评级渐变背景 */
|
||||||
|
&--grade-bcd {
|
||||||
|
background: linear-gradient(to bottom, #FFF5E9, #FFF);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* A 评级渐变背景 */
|
||||||
|
&--grade-a {
|
||||||
|
background: linear-gradient(to bottom, #ECFDFC, #FFF);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__score-left {
|
&__score-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.12rem;
|
gap: 0.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__score-avatar {
|
/* 星星+底座容器 */
|
||||||
width: 0.4rem;
|
&__star-wrapper {
|
||||||
height: 0.4rem;
|
position: relative;
|
||||||
border-radius: 50%;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 0.7rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SVG 五角星 */
|
||||||
|
&__star-svg {
|
||||||
|
width: 0.63rem;
|
||||||
|
height: 0.63rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底座长方形 */
|
||||||
|
&__star-base {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
margin-top: -0.08rem;
|
||||||
|
width: 0.52rem;
|
||||||
|
height: 0.22rem;
|
||||||
|
border: 1.5px solid #858585;
|
||||||
|
border-radius: 0.03rem;
|
||||||
|
background: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: $text-dark;
|
|
||||||
font-size: 0.18rem;
|
> span {
|
||||||
font-weight: 700;
|
font-size: 0.12rem;
|
||||||
flex-shrink: 0;
|
font-weight: 600;
|
||||||
background: $bg-main;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__score-badge {
|
/* 右侧操作按钮区 */
|
||||||
font-size: 0.11rem;
|
&__score-actions {
|
||||||
font-weight: 600;
|
display: flex;
|
||||||
color: $bg-white;
|
align-items: center;
|
||||||
background: $accent;
|
gap: 0.16rem;
|
||||||
border-radius: 0.1rem;
|
}
|
||||||
padding: 0.03rem 0.1rem;
|
|
||||||
|
/* 暂无等级提示文字 */
|
||||||
|
&__score-hint {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
color: $text-light;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__score-link {
|
&__score-link {
|
||||||
font-size: 0.12rem;
|
font-size: 0.13rem;
|
||||||
color: $text-light;
|
color: $text-light;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
@@ -169,65 +209,76 @@
|
|||||||
&__score-item {
|
&__score-item {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.02rem;
|
gap: 0.06rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__score-num {
|
&__score-num {
|
||||||
font-size: 0.22rem;
|
font-size: 0.30rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $text-dark;
|
color: $text-dark;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__score-label {
|
&__score-label {
|
||||||
font-size: 0.1rem;
|
font-size: 0.13rem;
|
||||||
color: $text-light;
|
color: $text-light;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__diagnose-btn {
|
&__diagnose-btn {
|
||||||
background: $btn-dark;
|
background: $btn-dark;
|
||||||
|
margin-left: 0.16rem;
|
||||||
color: $bg-white;
|
color: $bg-white;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0.06rem;
|
border-radius: 0.18rem;
|
||||||
padding: 0.08rem 0.18rem;
|
width: 0.93rem;
|
||||||
|
height: 0.36rem;
|
||||||
|
line-height: 0.37rem;
|
||||||
font-size: 0.13rem;
|
font-size: 0.13rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 0.2s;
|
box-sizing: border-box;
|
||||||
|
//transition: background 0.2s;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $btn-dark-hover;
|
background: $btn-dark-hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 开始诊断按钮 — 稍大一些,更醒目
|
|
||||||
&--start {
|
|
||||||
padding: 0.1rem 0.28rem;
|
|
||||||
font-size: 0.14rem;
|
|
||||||
border-radius: 0.08rem;
|
|
||||||
background: $gradient-bg;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $accent-hover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// ---- 简历主体 ----
|
// ---- 简历主体 ----
|
||||||
&__body {
|
&__body {
|
||||||
display: flex;
|
padding-bottom: 0.3rem;
|
||||||
flex-direction: column;
|
border-radius: 0.16rem;
|
||||||
gap: 0.16rem;
|
background: #fff;
|
||||||
padding-bottom: 0.4rem;
|
margin: 0 0.24rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__card {
|
&__card {
|
||||||
background: $bg-white;
|
background: $bg-white;
|
||||||
border-radius: 0.12rem;
|
border-radius: 0.1rem;
|
||||||
padding: 0.24rem;
|
margin: 0.4rem 0.18rem;
|
||||||
|
|
||||||
|
&:hover .resume-detail__section-header {
|
||||||
|
background: #F7F7F7;
|
||||||
|
.resume-detail__edit-btn-inline {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&__card-hover {
|
||||||
|
padding: 0.1rem 0.14rem;
|
||||||
|
&:hover {
|
||||||
|
background: #F7F7F7;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// ---- 个人信息卡片 ----
|
// ---- 个人信息卡片 ----
|
||||||
@@ -302,7 +353,16 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.06rem;
|
gap: 0.06rem;
|
||||||
font-size: 0.12rem;
|
font-size: 0.12rem;
|
||||||
color: $text-dark;
|
color: #666;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
a{
|
||||||
|
color: #666;
|
||||||
|
vertical-align: super;
|
||||||
|
}
|
||||||
|
>span{
|
||||||
|
vertical-align: super;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__contact-icon {
|
&__contact-icon {
|
||||||
@@ -316,8 +376,10 @@
|
|||||||
&__section-header {
|
&__section-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
gap: 0.12rem;
|
||||||
margin-bottom: 0.16rem;
|
margin-bottom: 0.16rem;
|
||||||
|
padding: 0.1rem 0 0.1rem 0.14rem;
|
||||||
|
border-radius: 0.06rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__section-title {
|
&__section-title {
|
||||||
@@ -325,6 +387,24 @@
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $text-dark;
|
color: $text-dark;
|
||||||
margin: 0 0 0.16rem 0;
|
margin: 0 0 0.16rem 0;
|
||||||
|
|
||||||
|
// 底部加粗装饰线(层级低于文字,部分遮挡文字底部)
|
||||||
|
&--underline {
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 0.02rem;
|
||||||
|
background: transparent;
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0.02rem;
|
||||||
|
width: 100%;
|
||||||
|
height: 0.06rem;
|
||||||
|
background: #12C7BE;
|
||||||
|
border-radius: 0.02rem;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__section-header &__section-title {
|
&__section-header &__section-title {
|
||||||
@@ -343,6 +423,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
margin-left: auto;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $accent;
|
color: $accent;
|
||||||
@@ -355,6 +436,54 @@
|
|||||||
height: 0.15rem;
|
height: 0.15rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ---- 内联编辑按钮(品牌色图标+文字,hover卡片时才显示) ----
|
||||||
|
&__edit-btn-inline {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: $accent;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.04rem 0.08rem;
|
||||||
|
border-radius: 0.04rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.04rem;
|
||||||
|
transition: all 0.2s;
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
font-weight: 500;
|
||||||
|
// 默认隐藏,hover卡片时显示
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
margin-left: auto;
|
||||||
|
|
||||||
|
.el-icon {
|
||||||
|
font-size: 0.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 卡片hover时显示编辑按钮(个人信息、个人概述)
|
||||||
|
&__card-hover:hover &__edit-btn-inline {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 经历模块标题栏hover时显示添加按钮
|
||||||
|
&__section-header:hover &__edit-btn-inline {
|
||||||
|
//opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 经历模块标题栏hover时背景色
|
||||||
|
&__section-header:hover {
|
||||||
|
//background: #F7F7F7;
|
||||||
|
border-radius: 0.06rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 经历条目内的编辑按钮样式已在 &__exp-date 下方统一管理
|
||||||
|
|
||||||
// ---- 教育背景 ----
|
// ---- 教育背景 ----
|
||||||
&__edu-item {
|
&__edu-item {
|
||||||
margin-top: 0.16rem;
|
margin-top: 0.16rem;
|
||||||
@@ -381,13 +510,13 @@
|
|||||||
// ---- 工作经历 ----
|
// ---- 工作经历 ----
|
||||||
&__exp-item {
|
&__exp-item {
|
||||||
margin-top: 0.16rem;
|
margin-top: 0.16rem;
|
||||||
margin-left: 0.1rem;
|
padding: 0.1rem 0.14rem;
|
||||||
padding-left: 0.1rem;
|
border-radius: 0.09rem;
|
||||||
border-left: 2px solid $border-color;
|
&:hover {
|
||||||
|
background: #F7F7F7;
|
||||||
&:not(:last-child) {
|
|
||||||
//border-bottom: 1px solid $border-color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__exp-title {
|
&__exp-title {
|
||||||
@@ -403,6 +532,136 @@
|
|||||||
margin-bottom: 0.06rem;
|
margin-bottom: 0.06rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ---- 经历第一行(名称 + 身份 + 时间 + 修复标记) ----
|
||||||
|
&__exp-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.12rem;
|
||||||
|
margin-bottom: 0.06rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__exp-name {
|
||||||
|
font-size: 0.14rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $text-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__exp-role {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: $text-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__exp-date {
|
||||||
|
font-size: 0.13rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: $text-middle;
|
||||||
|
|
||||||
|
// 带切换效果的时间(hover exp-item 时隐藏)
|
||||||
|
&--toggle {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// hover经历条目时:隐藏时间,显示按钮
|
||||||
|
&__exp-item:hover &__exp-date--toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 默认隐藏按钮且不占位
|
||||||
|
&__exp-edit-btn {
|
||||||
|
display: none;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// hover经历条目时:显示按钮
|
||||||
|
&__exp-item:hover &__exp-edit-btn {
|
||||||
|
display: flex;
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- 修复建议标记 ----
|
||||||
|
&__fix-tag {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.05rem;
|
||||||
|
font-size: 0.12rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FF8D0B;
|
||||||
|
background: #FFF5E9;
|
||||||
|
border-radius: 0.04rem;
|
||||||
|
padding: 0.04rem 0.12rem;
|
||||||
|
cursor: default;
|
||||||
|
transition: all 0.2s;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #FFEDDA;
|
||||||
|
}
|
||||||
|
|
||||||
|
// hover 时显示气泡
|
||||||
|
&:hover .resume-detail__fix-tooltip {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__fix-tag-icon {
|
||||||
|
width: 0.14rem;
|
||||||
|
height: 0.14rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- 诊断详情 hover 气泡 ----
|
||||||
|
&__fix-tooltip {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: calc(100% + 0.12rem);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
min-width: 2.4rem;
|
||||||
|
max-width: 3.5rem;
|
||||||
|
padding: 0.14rem 0.18rem;
|
||||||
|
background: linear-gradient(to bottom,#FFF5E9,#FFFFFF);
|
||||||
|
color: $text-dark;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.7;
|
||||||
|
white-space: normal;
|
||||||
|
word-break: break-all;
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
|
||||||
|
border: 1px solid #FF8D0B;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
z-index: 100;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
// 左侧尖角 — 旋转方块方案,边框粗细与气泡一致
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: -0.05rem;
|
||||||
|
margin-top: -0.05rem;
|
||||||
|
width: 0.09rem;
|
||||||
|
height: 0.09rem;
|
||||||
|
background: #FFF8F2;
|
||||||
|
border-left: 1px solid #FF8D0B;
|
||||||
|
border-bottom: 1px solid #FF8D0B;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 不再需要内层伪元素
|
||||||
|
&::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__exp-desc {
|
&__exp-desc {
|
||||||
font-size: 0.12rem;
|
font-size: 0.12rem;
|
||||||
color: $text-dark;
|
color: $text-dark;
|
||||||
@@ -419,9 +678,9 @@
|
|||||||
|
|
||||||
&__skill-tag {
|
&__skill-tag {
|
||||||
font-size: 0.12rem;
|
font-size: 0.12rem;
|
||||||
color: $text-dark;
|
color: $accent;
|
||||||
background: $bg-main;
|
background: $bg-white;
|
||||||
border: 1px solid $border-color;
|
border: 1px solid $accent;
|
||||||
border-radius: 0.04rem;
|
border-radius: 0.04rem;
|
||||||
padding: 0.05rem 0.14rem;
|
padding: 0.05rem 0.14rem;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
@@ -429,7 +688,7 @@
|
|||||||
&:hover {
|
&:hover {
|
||||||
border-color: $accent;
|
border-color: $accent;
|
||||||
color: $accent;
|
color: $accent;
|
||||||
background: $theme-color;
|
background: $bg-white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||