first commit
This commit is contained in:
shdjndbfjjd
commit
64c4efcf0f
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
|
||||
}
|
||||
125
README.md
Normal file
125
README.md
Normal file
@ -0,0 +1,125 @@
|
||||
# Vue 3 + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||
|
||||
## ⚡系统描述
|
||||
|
||||
本系统为字节招聘网站的**Vue3**版本， 技术栈使用Vue3、Element Plus、VueX、Axios 和 Vite 等主流技术.
|
||||
|
||||
- Vue-Cli 5.x 版: [v3-admin](https://github.com/un-pany/v3-admin)
|
||||
- Electron 桌面版: [v3-electron-vite](https://github.com/un-pany/v3-electron-vite)
|
||||
|
||||
## 技术栈特性
|
||||
- **Vue3**：采用 Vue3 + script setup 最新的 Vue3 组合式 API
|
||||
- **Element Plus**：Element UI 的 Vue3 版本
|
||||
- **VueX**: 传统Vue项目的状态管理工具
|
||||
- **Vite**：真的很快
|
||||
- **Vue Router**：路由路由
|
||||
- **TypeScript**：JavaScript 语言的超集
|
||||
- **PNPM**：更快速的，节省磁盘空间的包管理工具
|
||||
- **Less**：更方便的变量使用和CSS嵌套语法
|
||||
- **CSS 变量**：主要控制项目的布局和颜色
|
||||
- **ESlint**：代码校验
|
||||
- **Prettier**：代码格式化
|
||||
- **Axios**：发送网络请求（已封装好---包括开发,生产和测试三种环境的封装）
|
||||
- **UnoCSS**：具有高性能且极具灵活性的即时原子化 CSS 引擎
|
||||
- **注释**：各个配置项都写有尽可能详细的注释
|
||||
|
||||
## 存在问题
|
||||
这里多说一下，因为字节招聘官网更多是使用自己设计的样式，所以整体UI框架并没有使用Element更多是自己
|
||||
去编写（从字节官网拿 - -），这里使用ElementPlus的原因是使用了他的消息提示组件和加载组件。
|
||||
|
||||
不过像这些组件在项目目录中的**components**文件夹中也有自己编写的自定义插件，但是并没有成功，
|
||||
所以希望大佬们帮忙看一下，感激不尽！
|
||||
|
||||
|
||||
## 🚀 功能描述
|
||||
- **用户管理**：登录、登出演示
|
||||
- **权限管理**：内置页面权限（动态路由）、指令权限、权限函数、路由守卫
|
||||
- **多环境**：开发环境（development）、测试环境（test）、正式环境（production）
|
||||
- **产品展示**：展示宣传字节跳动的产品内容，包括抖音，飞书，今日头条，皮皮虾等
|
||||
- **工作信息**: 工作信息是字节招聘的重点内容，可根据工作地点和工作内容进行分类
|
||||
- **员工故事**：展示字节员工的生活经历和工作经历
|
||||
- **个人简历**：用户可以上传个人简历和信息，用于投递工作
|
||||
- **面试记录**：记录用户面试过的岗位
|
||||
|
||||
|
||||
## 运行
|
||||
|
||||
```bash
|
||||
# 配置
|
||||
1. 一键安装 .vscode 目录中推荐的插件
|
||||
2. node 版本 16+
|
||||
3. pnpm 版本 8.x
|
||||
# 克隆项目
|
||||
git clone https://github.com/shdjndbfjjd/byteDance-Vue3.git
|
||||
# 进入项目目录
|
||||
cd byte
|
||||
# 安装依赖
|
||||
pnpm i
|
||||
# 启动服务
|
||||
pnpm run dev
|
||||
```
|
||||
|
||||
## Git 提交规范参考
|
||||
|
||||
- `feat` 增加新的业务功能
|
||||
- `fix` 修复业务问题/BUG
|
||||
- `perf` 优化性能
|
||||
- `style` 更改代码风格, 不影响运行结果
|
||||
- `refactor` 重构代码
|
||||
- `revert` 撤销更改
|
||||
- `test` 测试相关, 不涉及业务代码的更改
|
||||
- `docs` 文档和注释相关
|
||||
- `chore` 更新依赖/修改脚手架配置等琐事
|
||||
- `workflow` 工作流改进
|
||||
- `ci` 持续集成相关
|
||||
- `types` 类型定义文件更改
|
||||
- `wip` 开发中
|
||||
|
||||
|
||||
## 项目预览
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 注意事项
|
||||
|
||||
因为现在还只是写了前端，后端暂时只写了登录和注册，所以目前系统中的数据都是假数据，像根据地点
|
||||
和分类动态展示岗位信息还不能实现。
|
||||
|
||||
我现在的想法是后端搞两个版本，一是用Django和DRF来写，第二个版本则是使用Golang，毕竟字节
|
||||
后端用Go的话会更好一点？ - 。-
|
||||
|
||||
如果大家觉得对你们有用的话麻烦给个star吧，star数量多的话我后续会把两个版本后端代码以及整体
|
||||
项目再次开源出来的。
|
||||
|
||||
|
||||
|
||||
## 💕 感谢 Star
|
||||
|
||||
小项目获取 star 不易，如果你喜欢这个项目的话，欢迎支持一个 star！这是作者持续维护的唯一动力（小声：毕竟是免费的）
|
||||
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
31
package.json
Normal file
31
package.json
Normal file
@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "byte",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.1.0",
|
||||
"axios": "^1.4.0",
|
||||
"element-plus": "^2.3.4",
|
||||
"mitt": "^3.0.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"sass": "^1.62.1",
|
||||
"sass-loader": "^13.2.2",
|
||||
"vue": "^3.2.47",
|
||||
"vue-router": "^4.1.6",
|
||||
"vuex": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.1.0",
|
||||
"less": "^4.1.3",
|
||||
"less-loader": "^11.1.0",
|
||||
"unplugin-auto-import": "^0.15.3",
|
||||
"unplugin-vue-components": "^0.24.1",
|
||||
"vite": "^4.3.2"
|
||||
}
|
||||
}
|
||||
1310
pnpm-lock.yaml
generated
Normal file
1310
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
145
src/App.vue
Normal file
145
src/App.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div id="container">
|
||||
<header>
|
||||
<Header
|
||||
@enter.enter="onAnimationStart"
|
||||
:class="{ [animationName]: $route.name === 'home' }"
|
||||
:fixedToTop="$route.path === '/'"
|
||||
ref="header"
|
||||
:theme-color="themeColor"
|
||||
></Header>
|
||||
</header>
|
||||
<main>
|
||||
<router-view v-slot="{ Component }" :key="$route.path">
|
||||
<transition :name="animationName">
|
||||
<component :is="Component"/>
|
||||
</transition>
|
||||
</router-view>
|
||||
</main>
|
||||
<footer v-if="$route.name !== 'products'">
|
||||
<Footer></Footer>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Header from "./components/header.vue";
|
||||
import Footer from "./components/footer.vue";
|
||||
import {ref, reactive, getCurrentInstance, computed, watch, onMounted} from "vue";
|
||||
import {useRoute} from 'vue-router'
|
||||
import EventBus from './helper/EventBus'
|
||||
|
||||
const route = useRoute()
|
||||
const {proxy} = getCurrentInstance()
|
||||
|
||||
const animationName = ref("slideInDown")
|
||||
const pageTransitionName = ref("")
|
||||
const homeScrollY = ref(0)
|
||||
|
||||
onMounted(() => {
|
||||
// window添加事件
|
||||
window.addEventListener('scroll', menu)
|
||||
})
|
||||
|
||||
// 监听鼠标滚动事件
|
||||
const menu = () => {
|
||||
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
// 滚动条滚动的距离
|
||||
let scrollStep = scrollTop - homeScrollY.value;
|
||||
// 更新——滚动前，滚动条距文档顶部的距离
|
||||
homeScrollY.value = scrollTop;
|
||||
if (scrollStep < 0) {
|
||||
animationName.value = "slideInDown";
|
||||
} else {
|
||||
animationName.value = "slideOutUp";
|
||||
}
|
||||
}
|
||||
|
||||
EventBus.on("home-scrolling", (pos) => {
|
||||
homeScrollY.value = pos.y
|
||||
})
|
||||
|
||||
const themeColor = computed(() => {
|
||||
return route.path === "/" ? homeScrollY.value < 400 ? "is-transparent" : "main-color" : "main-color"
|
||||
})
|
||||
|
||||
watch(route, (newValue, oldValue) => {
|
||||
pageTransitionName.value = ["products", "home"].includes(newValue.name)
|
||||
? ""
|
||||
: "jumpPage";
|
||||
})
|
||||
|
||||
const onAnimationStart = (e) => {
|
||||
if (e.animationName === "slideInDown") {
|
||||
e.target.style.top = 0;
|
||||
} else {
|
||||
e.target.style.top = -64;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@keyframes slideInDown {
|
||||
from {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutUp {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.slideInDown {
|
||||
position: fixed;
|
||||
top:0;
|
||||
transition: all 0.4s;
|
||||
//animation: slideInDown 0.4s;
|
||||
}
|
||||
|
||||
.slideOutUp {
|
||||
position: fixed;
|
||||
top:-64px;
|
||||
transition: all 0.4s;
|
||||
//animation: slideOutUp 0.4s;
|
||||
}
|
||||
|
||||
.jumpPage-leave-active {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.jumpPage-enter {
|
||||
transform: translate3d(0, 80px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.jumpPage-enter-active {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
#container {
|
||||
min-width: 1200px;
|
||||
}
|
||||
|
||||
footer {
|
||||
//margin-top: 100px;
|
||||
}
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
18
src/api/api.js
Normal file
18
src/api/api.js
Normal file
@ -0,0 +1,18 @@
|
||||
/**
|
||||
* 项目总api管理
|
||||
*/
|
||||
import request from "./request.js";
|
||||
|
||||
export default {
|
||||
login: (data) => request({
|
||||
url: '/login/',
|
||||
method: 'post',
|
||||
data: data
|
||||
}),
|
||||
|
||||
sign: (data) => request({
|
||||
url: '/sign/',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
33
src/api/config/index.js
Normal file
33
src/api/config/index.js
Normal file
@ -0,0 +1,33 @@
|
||||
/**
|
||||
* 环境配置文件
|
||||
* 开发环境
|
||||
* 生产环境
|
||||
* 测试环境
|
||||
*/
|
||||
|
||||
// 拿到当前环境
|
||||
const env = import.meta.env.MODE || 'development'
|
||||
|
||||
const EnvConfig = {
|
||||
development: {
|
||||
baseApi: 'http://127.0.0.1:8000/api',
|
||||
mockApi: 'https://www.fastmock.site/mock/3945196801b2b17aeb94fb84612b796a/api'
|
||||
},
|
||||
|
||||
test: {
|
||||
baseApi: '//test.future.com/api',
|
||||
mockApi: 'https://www.fastmock.site/mock/3945196801b2b17aeb94fb84612b796a/api'
|
||||
},
|
||||
|
||||
production: {
|
||||
baseApi: '//production.future.com/api',
|
||||
mockApi: 'https://www.fastmock.site/mock/3945196801b2b17aeb94fb84612b796a/api'
|
||||
},
|
||||
}
|
||||
|
||||
export default {
|
||||
env,
|
||||
// mock总开关
|
||||
mock: false,
|
||||
...EnvConfig[env]
|
||||
}
|
||||
76
src/api/request.js
Normal file
76
src/api/request.js
Normal file
@ -0,0 +1,76 @@
|
||||
import axios from "axios";
|
||||
import config from "./config/index.js";
|
||||
|
||||
// 引入进度条
|
||||
import nprogress from 'nprogress'
|
||||
|
||||
// 引入nprogress的css样式
|
||||
import 'nprogress/nprogress.css'
|
||||
import store from "../store/index.js";
|
||||
|
||||
const NETWORK_ERROR = '网络请求异常，后端未开启，请稍后重试......'
|
||||
|
||||
// 创建一个axios实例对象
|
||||
const service = axios.create({
|
||||
baseURL: config.baseApi,
|
||||
|
||||
// 超时时间
|
||||
timeout: 5000
|
||||
})
|
||||
|
||||
// 请求拦截器
|
||||
service.interceptors.request.use((request) => {
|
||||
// 自定义headers
|
||||
// 如果有userid，在请求头中添加
|
||||
if (store.state.userid) {
|
||||
request.headers.userid = store.state.userid
|
||||
}
|
||||
|
||||
// jwt-token认证
|
||||
// 如果有token，在请求头中添加
|
||||
if (store.state.token) {
|
||||
request.headers.token = store.state.token
|
||||
}
|
||||
|
||||
nprogress.start()
|
||||
return request
|
||||
})
|
||||
|
||||
// 响应拦截器
|
||||
service.interceptors.response.use((response) => {
|
||||
nprogress.done()
|
||||
const {code, data, msg} = response.data
|
||||
if (code === 200) {
|
||||
return response.data
|
||||
} else {
|
||||
// 请求错误，返回错误信息
|
||||
ElMessage.error(msg || NETWORK_ERROR)
|
||||
return Promise.reject(msg || NETWORK_ERROR)
|
||||
}
|
||||
})
|
||||
|
||||
// 封装的核心函数
|
||||
function request(options) {
|
||||
options.method = options.method || 'get'
|
||||
if (options.method.toLowerCase() === 'get') {
|
||||
options.params = options.data
|
||||
}
|
||||
|
||||
// 对mock的处理
|
||||
let isMock = config.mock
|
||||
if (typeof options.mock !== 'undefined') {
|
||||
isMock = options.mock
|
||||
}
|
||||
|
||||
// 对线上环境的处理
|
||||
if (config.env === 'production') {
|
||||
// 拒绝使用mock
|
||||
service.defaults.baseURL = config.baseApi
|
||||
} else {
|
||||
service.defaults.baseURL = isMock? config.mockApi : config.baseApi
|
||||
}
|
||||
|
||||
return service(options)
|
||||
}
|
||||
|
||||
export default request
|
||||
BIN
src/assets/docs/img.png
Normal file
BIN
src/assets/docs/img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
BIN
src/assets/docs/img_1.png
Normal file
BIN
src/assets/docs/img_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
src/assets/docs/img_2.png
Normal file
BIN
src/assets/docs/img_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
src/assets/docs/img_3.png
Normal file
BIN
src/assets/docs/img_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 313 KiB |
BIN
src/assets/docs/img_4.png
Normal file
BIN
src/assets/docs/img_4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 233 KiB |
BIN
src/assets/docs/img_5.png
Normal file
BIN
src/assets/docs/img_5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 947 KiB |
BIN
src/assets/docs/img_6.png
Normal file
BIN
src/assets/docs/img_6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 351 KiB |
BIN
src/assets/docs/img_7.png
Normal file
BIN
src/assets/docs/img_7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
src/assets/docs/img_8.png
Normal file
BIN
src/assets/docs/img_8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
src/assets/docs/img_9.png
Normal file
BIN
src/assets/docs/img_9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
src/assets/docs/preview.png
Normal file
BIN
src/assets/docs/preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 486 KiB |
13
src/assets/style/global.css
Normal file
13
src/assets/style/global.css
Normal file
@ -0,0 +1,13 @@
|
||||
.clearfix::before,
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
display: table;
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
*{
|
||||
user-select: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
7
src/assets/style/mixin.less
Normal file
7
src/assets/style/mixin.less
Normal file
@ -0,0 +1,7 @@
|
||||
.text-overflow-visible-line(@num) {
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: @num;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
56
src/assets/style/reset.css
Normal file
56
src/assets/style/reset.css
Normal file
@ -0,0 +1,56 @@
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
/* padding:0; */
|
||||
/* margin:0; */
|
||||
}
|
||||
div,
|
||||
ul,
|
||||
li,
|
||||
dl,
|
||||
dd,
|
||||
dt,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
header,
|
||||
main,
|
||||
section,
|
||||
aside,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
*,
|
||||
*:after,
|
||||
*:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
a:-webkit-any-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
*:focus,
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
border-style: solid;
|
||||
font-weight: 300;
|
||||
outline: none;
|
||||
border-width: 1px;
|
||||
border-color: #dcdfe6;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* custom */
|
||||
33
src/assets/style/variable.less
Normal file
33
src/assets/style/variable.less
Normal file
@ -0,0 +1,33 @@
|
||||
@main-color: #3370ff;
|
||||
@main-width: 1300px;
|
||||
|
||||
@primary-text-color: #1f2329;
|
||||
@regular-text-color: #606266;
|
||||
@secondary-text-color: #909399;
|
||||
|
||||
@border-dark-color: #34373b;
|
||||
@border-base-color: #dcdfe6;
|
||||
@border-light-color: #e4e7ed;
|
||||
@border-lighter-color: #ebeef5;
|
||||
@border-extralight-color: #f2f6fc;
|
||||
|
||||
@bg-white-color: #fff;
|
||||
@bg-black-color: #000;
|
||||
@bg-base-color: #f5f7fa;
|
||||
|
||||
@font-size-larger: 32px;
|
||||
@font-size-large: 22px;
|
||||
@font-size-medium: 18px;
|
||||
@font-size-base: 14px;
|
||||
@font-size-small: 12px;
|
||||
|
||||
@font-weight-primary: 700;
|
||||
@font-weight-regular: 400;
|
||||
@font-weight-secondary: 100;
|
||||
|
||||
@font-line-height-large: 32px;
|
||||
@font-line-height-primary: 24px;
|
||||
@font-line-height-secondary: 18px;
|
||||
|
||||
@box-shadow-hover-color: rgba(136, 150, 171, 0.15);
|
||||
@box-shadow-dark-color: rgba(136, 150, 171, 0.5);
|
||||
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
69
src/components/Bytedance-Button.vue
Normal file
69
src/components/Bytedance-Button.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div
|
||||
class="bytedance-button"
|
||||
:class="[
|
||||
`bytedance-button-${size}`,
|
||||
{ 'bytedance-button-loading': loading }
|
||||
]"
|
||||
>
|
||||
<span>
|
||||
<i class="el-icon-loading" v-if="loading"></i>
|
||||
<slot>bytedance-button</slot>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {defineProps, toRefs} from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
size: {
|
||||
type: String,
|
||||
default: "medium",
|
||||
validator(value) {
|
||||
return ["small", "medium", "large"].includes(value);
|
||||
}
|
||||
},
|
||||
loading:{
|
||||
type: Boolean
|
||||
}
|
||||
})
|
||||
|
||||
const {size, loading} = toRefs(props)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.bytedance-button {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background: @main-color;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
border-radius: 23px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.el-icon-loading {
|
||||
margin-right: 5px;
|
||||
}
|
||||
&-loading {
|
||||
pointer-events: none;
|
||||
}
|
||||
&:hover :after,
|
||||
&-loading:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
&-small {
|
||||
height: 26px;
|
||||
}
|
||||
&-large {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
240
src/components/Checkbox-Transfer.vue
Normal file
240
src/components/Checkbox-Transfer.vue
Normal file
@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div class="checkbox">
|
||||
<h2>{{ title }}</h2>
|
||||
|
||||
<ul class="checkbox-list">
|
||||
<li class="checkbox-item" v-for="(item, index) in targetData" :key="index">
|
||||
<input
|
||||
@change="check(item, $event)"
|
||||
type="checkbox"
|
||||
:id="item[props.key]"
|
||||
:checked="checked[index]"
|
||||
/>
|
||||
<label :for="item[props.key]" class="label-text">
|
||||
{{
|
||||
item[props.label]
|
||||
}}
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="search" v-if="sourceData.length">
|
||||
<input
|
||||
@blur="onInputBlur"
|
||||
@focus="focusing = true"
|
||||
class="search-input"
|
||||
:class="{ focusing }"
|
||||
:placeholder="placeholder"
|
||||
type="text"
|
||||
v-model="filterKeyword"
|
||||
/>
|
||||
<ul class="search-list" v-show="focusing">
|
||||
<li
|
||||
v-for="item in filterableData"
|
||||
:key="item[props.key]"
|
||||
class="search-item"
|
||||
@click="addToTarget(item)"
|
||||
>
|
||||
<span>{{ item[props.label] }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {defineProps, toRefs, ref, computed, watch, onMounted} from "vue";
|
||||
import EventBus from "../helper/EventBus/index.js";
|
||||
|
||||
const focusing = ref(false)
|
||||
const filterKeyword = ref("")
|
||||
const targets = ref([])
|
||||
|
||||
const prop = defineProps({
|
||||
title: String,
|
||||
targetCount: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
props: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
key: "key",
|
||||
label: "label"
|
||||
};
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const {title, targetCount, data, modelValue, props} = toRefs(prop)
|
||||
|
||||
// 计算属性
|
||||
const checked = computed(() => {
|
||||
return targets.value.map(key => modelValue.value.includes(key))
|
||||
})
|
||||
|
||||
const targetData = computed(() => {
|
||||
return targets.value.map(key => {
|
||||
return data.value.find(item => item[props.value.key] === key)
|
||||
}).filter(item => item && item[props.value.key])
|
||||
})
|
||||
|
||||
const sourceData = computed(() => {
|
||||
return data.value.filter(
|
||||
item => targets.value.indexOf(item[props.value.key]) === -1
|
||||
);
|
||||
})
|
||||
|
||||
const filterableData = computed(() => {
|
||||
return sourceData.value.filter(item => {
|
||||
return item[props.value.label].startsWith(filterKeyword.value);
|
||||
});
|
||||
})
|
||||
|
||||
const placeholder = computed(() => {
|
||||
return !focusing.value ? "更多" : "搜索"
|
||||
})
|
||||
|
||||
// 监视函数
|
||||
watch(data, (newValue, oldValue) => {
|
||||
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
changeTargets()
|
||||
})
|
||||
|
||||
const changeTargets = () => {
|
||||
targets.value = data.value.slice(0, 6).map(item => item[props.value.key]);
|
||||
checked.value.length = targets.value.length;
|
||||
modelValue.value.forEach(key => {
|
||||
if (!targets.value.includes(key)) {
|
||||
targets.value.push(key);
|
||||
checked.value.push(true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 事件
|
||||
const clearChecked = () => {
|
||||
for (let i = 0, l = modelValue.value.length; i < l; i++) {
|
||||
modelValue.value.pop();
|
||||
}
|
||||
}
|
||||
|
||||
const onInputBlur = (e) => {
|
||||
setTimeout(() => {
|
||||
focusing.value = false;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
const addToTarget = (item) => {
|
||||
if (item[props.value.key]) {
|
||||
targets.value.push(item[props.value.key]);
|
||||
modelValue.value.push(item[props.value.key]);
|
||||
}
|
||||
|
||||
filterKeyword.value = "";
|
||||
}
|
||||
|
||||
const check = (item, e) => {
|
||||
if (!e.target.checked) {
|
||||
const delIndex = modelValue.value.indexOf(item[props.value.key]);
|
||||
if (delIndex > -1) {
|
||||
modelValue.value.splice(delIndex, 1);
|
||||
}
|
||||
} else {
|
||||
if (!modelValue.value.includes(item[props.value.key])) {
|
||||
modelValue.value.push(item[props.value.key]);
|
||||
}
|
||||
}
|
||||
|
||||
EventBus.emit("check", e.target.checked)
|
||||
EventBus.emit("check", item[props.value.key])
|
||||
EventBus.emit("input", modelValue.value)
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.checkbox {
|
||||
max-width: 200px;
|
||||
|
||||
h2 {
|
||||
font-weight: @font-weight-regular;
|
||||
margin-bottom: 12px;
|
||||
color: black;
|
||||
font-size: @font-size-large;
|
||||
}
|
||||
|
||||
&-item {
|
||||
margin-bottom: 8px;
|
||||
// cursor: pointer;
|
||||
input,
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
|
||||
.label-text {
|
||||
margin-left: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: @main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
position: relative;
|
||||
|
||||
&-placeholder {
|
||||
cursor: pointer;
|
||||
// border-bottom: 1px solid @border-lighter-color;
|
||||
}
|
||||
|
||||
&-input {
|
||||
border-width: 0 0 1px 0;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
border-color: @border-lighter-color;
|
||||
|
||||
&.focusing {
|
||||
border-color: @main-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
padding-top: 10px;
|
||||
position: absolute;
|
||||
|
||||
z-index: 10000;
|
||||
background-color: #fff;
|
||||
max-height: 300px;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
line-height: 34px;
|
||||
box-shadow: 0 10px 30px 0 rgba(136, 150, 171, 0.15);
|
||||
}
|
||||
|
||||
&-item {
|
||||
padding: 0 20px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: @bg-base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
104
src/components/File-Icon.vue
Normal file
104
src/components/File-Icon.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<template functional>
|
||||
<span class="">
|
||||
<!-- v-if="props.fileType === 'ppt' || props.fileType === 'pptx'" -->
|
||||
<!-- v-else-if="props.fileType === 'jpg' || props.fileType === 'jpeg' || props.fileType === 'png'" -->
|
||||
<svg
|
||||
v-if="props.fileType === 'ppt' || props.fileType === 'pptx'"
|
||||
class="ppt_svg__icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="200"
|
||||
height="200"
|
||||
>
|
||||
<defs></defs>
|
||||
<path
|
||||
d="M238.933 85.333H638.72a34.133 34.133 0 0 1 23.79 9.643l180.48 175.309a34.133 34.133 0 0 1 10.343 24.49V870.4a68.267 68.267 0 0 1-68.266 68.267H238.933a68.267 68.267 0 0 1-68.266-68.267V153.6a68.267 68.267 0 0 1 68.266-68.267z"
|
||||
fill="#F80"
|
||||
></path>
|
||||
<path
|
||||
d="M850.603 281.361H721.51a68.267 68.267 0 0 1-68.266-68.267V88.576a34.133 34.133 0 0 1 9.267 6.4l180.48 175.309a34.133 34.133 0 0 1 7.595 11.093z"
|
||||
fill="#F9BA6C"
|
||||
></path>
|
||||
<path
|
||||
d="M443.017 643.857v150.204a8.84 8.84 0 0 1-8.841 8.84H404.48a8.84 8.84 0 0 1-8.84-8.84V439.38c0-4.88 3.959-8.84 8.84-8.84h132.147c24.576 0 44.97 2.765 61.235 8.362 16.436 5.632 29.577 13.483 39.356 23.552 9.728 10.07 16.555 21.675 20.429 34.8 3.755 12.714 5.632 26.043 5.632 39.935 0 21.095-4.472 38.742-13.517 52.788a97.877 97.877 0 0 1-34.696 32.802c-13.96 7.85-29.765 13.363-47.36 16.486a296.973 296.973 0 0 1-52.088 4.608h-72.601zm73.625-41.25c16.094 0 30.447-.99 43.076-2.936 12.186-1.877 22.409-5.358 30.72-10.41a50.057 50.057 0 0 0 18.705-20.07c4.455-8.551 6.759-20.054 6.759-34.475 0-20.907-6.81-36.267-20.412-46.712-13.892-10.683-36.744-16.213-68.608-16.213h-83.865v130.816h73.625z"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
v-else-if="
|
||||
props.fileType === 'jpg' ||
|
||||
props.fileType === 'jpeg' ||
|
||||
props.fileType === 'png'
|
||||
"
|
||||
class="image_svg__icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="200"
|
||||
height="200"
|
||||
>
|
||||
<defs></defs>
|
||||
<path
|
||||
d="M238.933 85.333H638.72a34.133 34.133 0 0 1 23.79 9.643l180.48 175.309a34.133 34.133 0 0 1 10.343 24.49V870.4a68.267 68.267 0 0 1-68.266 68.267H238.933a68.267 68.267 0 0 1-68.266-68.267V153.6a68.267 68.267 0 0 1 68.266-68.267z"
|
||||
fill="#FFC60A"
|
||||
></path>
|
||||
<path
|
||||
d="M850.603 281.361H720.828a68.267 68.267 0 0 1-68.267-68.267V88.27a34.133 34.133 0 0 1 9.95 6.707l180.48 175.309a34.133 34.133 0 0 1 7.595 11.093z"
|
||||
fill="#F8E6AB"
|
||||
></path>
|
||||
<path
|
||||
d="M536.883 779.64H297.9a13.653 13.653 0 0 1-10.462-22.426L423.492 594.91a34.133 34.133 0 0 1 52.31 0l71.509 85.3 163.328-176.402a20.48 20.48 0 0 1 35.499 13.91v244.855a17.067 17.067 0 0 1-17.067 17.066H536.9zm-198.775-384h24.815a34.133 34.133 0 0 1 34.133 34.133v24.815a34.133 34.133 0 0 1-34.133 34.133h-24.815a34.133 34.133 0 0 1-34.134-34.133v-24.815a34.133 34.133 0 0 1 34.134-34.134z"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
v-else-if="props.fileType === 'docx' || props.fileType === 'doc'"
|
||||
class="doc_svg__icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="200"
|
||||
height="200"
|
||||
>
|
||||
<defs></defs>
|
||||
<path
|
||||
d="M238.933 85.333h411.563a34.133 34.133 0 0 1 23.774 9.643l168.704 163.789a34.133 34.133 0 0 1 10.36 24.49V870.4a68.267 68.267 0 0 1-68.267 68.267H238.933a68.267 68.267 0 0 1-68.266-68.267V153.6a68.267 68.267 0 0 1 68.266-68.267z"
|
||||
fill="#3370FF"
|
||||
></path>
|
||||
<path
|
||||
d="M850.603 269.824H733.867a68.267 68.267 0 0 1-68.267-68.267V88.867a34.133 34.133 0 0 1 8.67 6.126l168.704 163.789a34.133 34.133 0 0 1 7.612 11.076z"
|
||||
fill="#82A7FC"
|
||||
></path>
|
||||
<path
|
||||
d="M512.188 518.758L449.894 749.33a9.506 9.506 0 0 1-9.181 7.032h-32.461a9.506 9.506 0 0 1-9.13-6.912l-83.61-295.186a9.506 9.506 0 0 1 9.147-12.083h30.823a9.514 9.514 0 0 1 9.199 7.117l60.125 232.55 62.447-232.618a9.506 9.506 0 0 1 9.165-7.049h31.573c4.301 0 8.073 2.902 9.182 7.049l62.038 232.584 60.108-232.499a9.506 9.506 0 0 1 9.216-7.117h30.806a9.506 9.506 0 0 1 9.148 12.084l-83.61 295.185a9.506 9.506 0 0 1-9.13 6.912h-32.462a9.506 9.506 0 0 1-9.164-7.032l-61.935-230.57z"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
v-else-if="props.fileType === 'pdf'"
|
||||
class="pdf_svg__icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="200"
|
||||
height="200"
|
||||
>
|
||||
<defs></defs>
|
||||
<path
|
||||
d="M238.933 85.333H638.72a34.133 34.133 0 0 1 23.79 9.643l180.48 175.309a34.133 34.133 0 0 1 10.343 24.49V870.4a68.267 68.267 0 0 1-68.266 68.267H238.933a68.267 68.267 0 0 1-68.266-68.267V153.6a68.267 68.267 0 0 1 68.266-68.267z"
|
||||
fill="#F54A45"
|
||||
></path>
|
||||
<path
|
||||
d="M850.603 281.361H720.828a68.267 68.267 0 0 1-68.267-68.267V88.27a34.133 34.133 0 0 1 9.95 6.707l180.48 175.309a34.133 34.133 0 0 1 7.595 11.093z"
|
||||
fill="#F78E8B"
|
||||
></path>
|
||||
<path
|
||||
d="M748.834 671.266c-10.581-12.39-32.307-18.432-66.39-18.432-19.797 0-47.103.512-74.512 4.574-74.923-53.999-92.467-112.009-92.467-112.009s12.8-32.119 13.602-84.565c.512-33.16-4.745-57.89-18.142-68.523-5.718-4.522-13.995-8.311-22.358-8.311-6.519 0-12.629 1.877-17.612 5.495-38.946 28.092 3.584 160.547 4.71 164.08A1177.498 1177.498 0 0 1 410.3 686.915c-7.731 13.483-7.731 13.756-12.937 19.866 0 0-68.164 33.809-100.13 71.304-18.056 21.163-18.637 35.72-17.681 46.61 1.536 13.073 18.21 24.746 34.987 24.746.682 0 1.382 0 2.065-.051 17.066-1.024 36.01-5.734 57.105-25.685 15.274-14.456 32.46-53.692 54.545-92.075 63.351-17.784 119.108-30.43 165.837-37.65 34.27 18.177 85.248 38.776 119.944 38.776 11.64 0 21.01-2.338 27.836-6.963 8.175-5.512 11.64-12.39 13.79-25.122 2.167-12.749-.854-22.391-6.827-29.406zM674.355 691.2c31.642 0 48.777 5.58 57.566 10.257 2.73 1.45 4.693 2.85 6.093 4.01-2.475 1.93-7.356 4.353-16.18 4.353-14.608 0-33.791-6.195-57.207-18.45 3.328-.119 6.57-.17 9.728-.17zM492.63 412.058l.052-.137c4.949 3.652 7.236 29.184 6.775 44.015-.614 19.883-.768 27.563-3.26 39.765-6.758-25.463-7.253-71.236-3.584-83.626zm1.553 186.043c15.429 25.43 35.004 51.166 57.054 70.827-43.042 9.216-78.78 17.698-104.482 26.692a795.511 795.511 0 0 0 47.445-97.519zM320.41 813.483c3.89-5.752 14.523-16.913 41.506-38.503-14.473 33.366-30.737 38.503-45.858 46.541 1.143-2.645 2.577-5.41 4.352-8.021z"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
40
src/components/HelloWorld.vue
Normal file
40
src/components/HelloWorld.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
msg: String,
|
||||
})
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Install
|
||||
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
|
||||
in your IDE for a better DX
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
111
src/components/Input-Search.vue
Normal file
111
src/components/Input-Search.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div class="input-search medium">
|
||||
<input
|
||||
ref="input"
|
||||
type="text"
|
||||
placeholder="输入城市或职位进行搜索"
|
||||
/>
|
||||
<span class="input-search-button"><el-icon class="icons"><Search/></el-icon></span>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.input-search {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: 56px;
|
||||
width: 420px;
|
||||
min-width: 400px;
|
||||
max-width: @main-width;
|
||||
position: relative;
|
||||
border-radius: 30px;
|
||||
overflow: hidden;
|
||||
border: 1px solid @main-color;
|
||||
font-size: 16px;
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: @secondary-text-color;
|
||||
}
|
||||
|
||||
&.small {
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&.large {
|
||||
height: 60px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.prefix-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: inherit;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
line-height: 100%;
|
||||
color: #1f2329;
|
||||
border-color: transparent;
|
||||
padding: 19px 0 19px 25px;
|
||||
}
|
||||
|
||||
&-button {
|
||||
background: #3370ff;
|
||||
border: none;
|
||||
color: white;
|
||||
border-radius: 24px;
|
||||
font-size: 20px;
|
||||
line-height: 46px;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
min-width: auto;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
touch-action: manipulation;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
top: 4px;
|
||||
|
||||
&:hover {
|
||||
// background: rgba(255, 255, 255, 0.5);
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
background: #fff;
|
||||
border-radius: inherit;
|
||||
opacity: 0.35;
|
||||
transition: opacity 0.2s;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
fill: white;
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 15px;
|
||||
}
|
||||
</style>
|
||||
109
src/components/Loading/Loading.vue
Normal file
109
src/components/Loading/Loading.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div class="bytedanceLoading">
|
||||
<div class="bytedanceLoading__wrapper">
|
||||
<!-- <div class="bytedanceLoading__background"></div> -->
|
||||
<div class="bytedanceLoading__inner">
|
||||
<div class="bytedanceLoading__inner-item"></div>
|
||||
<div class="bytedanceLoading__inner-item"></div>
|
||||
<div class="bytedanceLoading__inner-item"></div>
|
||||
<div class="bytedanceLoading__inner-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getCurrentInstance, ref} from "vue";
|
||||
|
||||
const {proxy} = getCurrentInstance()
|
||||
const fullscreen = ref(false)
|
||||
const lock = ref(false)
|
||||
const emit = defineEmits(['destroy'])
|
||||
|
||||
const close = () => {
|
||||
proxy.$el.remove()
|
||||
emit('destroy')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.directiveLoading {
|
||||
&-parent {
|
||||
position: relative;
|
||||
&-visible {
|
||||
// max-height: 100vh !important;
|
||||
// overflow: hidden;
|
||||
// min-height: 500px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
@height: 10px;
|
||||
@duration: 400ms;
|
||||
@itemWidth: 9px;
|
||||
@doubleHorizontalSpace: 2px;
|
||||
@longerHeight: 29px;
|
||||
@shorterHeight: 14px;
|
||||
|
||||
@keyframes verticalDance {
|
||||
0% {
|
||||
transform: translate3d(0, @height, 0);
|
||||
}
|
||||
50% {
|
||||
transform: translate3d(0, -@height, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, @height, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.bytedanceLoading {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
z-index: 100;
|
||||
&-fullscreen {
|
||||
position: fixed !important;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
display: flex;
|
||||
height: 20px;
|
||||
&-item {
|
||||
width: @itemWidth;
|
||||
margin: 0 @doubleHorizontalSpace;
|
||||
animation-name: verticalDance;
|
||||
animation-duration: @duration;
|
||||
animation-iteration-count: infinite;
|
||||
&:first-child {
|
||||
background-color: #2d5fb2;
|
||||
height: @longerHeight;
|
||||
|
||||
animation-delay: -300ms;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
background-color: #3682c7;
|
||||
height: @shorterHeight;
|
||||
animation-delay: -400ms;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
animation-delay: -600ms;
|
||||
background-color: #00bfc5;
|
||||
height: @shorterHeight;
|
||||
}
|
||||
&:last-child {
|
||||
animation-delay: -900ms;
|
||||
background-color: #5acec6;
|
||||
height: @longerHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
112
src/components/Loading/main.js
Normal file
112
src/components/Loading/main.js
Normal file
@ -0,0 +1,112 @@
|
||||
import {createApp} from 'vue'
|
||||
import Loading from "./Loading.vue";
|
||||
import App from '../../App.vue'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
const LoadingCtor = app.component('loading', Loading);
|
||||
// const fullscreenLoading = new LoadingCtor();
|
||||
|
||||
LoadingCtor.install = app => {
|
||||
app.directive("loading", {
|
||||
mounted: (el, binding, vnode, prevNode) => {
|
||||
el.loading = new LoadingCtor();
|
||||
el.loading.$mount();
|
||||
el.appendChild(el.loading.$el);
|
||||
el.classList.add("directiveLoading-parent");
|
||||
|
||||
if (binding.arg) {
|
||||
el.loading.$el.style.backgroundColor = binding.arg;
|
||||
}
|
||||
if (binding.value) {
|
||||
if (binding.modifiers.scrollFixed) {
|
||||
const position = {
|
||||
top:
|
||||
el.getBoundingClientRect().top > 0
|
||||
? Math.abs(el.getBoundingClientRect().top)
|
||||
: 0,
|
||||
bottom:
|
||||
el.getBoundingClientRect().bottom - window.innerHeight > 0
|
||||
? el.getBoundingClientRect().bottom - window.innerHeight
|
||||
: 0
|
||||
};
|
||||
el.loading.$el.style.top = position.top + "px";
|
||||
el.loading.$el.style.bottom = position.bottom + "px";
|
||||
}
|
||||
el.classList.add("directiveLoading-parent-visible");
|
||||
} else {
|
||||
el.loading.$el.style.setProperty("display", "none");
|
||||
}
|
||||
},
|
||||
|
||||
updated(el, { value, oldValue, ...binding }) {
|
||||
if (value === oldValue) return;
|
||||
app.nextTick(() => {
|
||||
if (binding.modifiers.scrollFixed && value) {
|
||||
const position = {
|
||||
top:
|
||||
el.getBoundingClientRect().top < 0
|
||||
? Math.abs(el.getBoundingClientRect().top)
|
||||
: 0,
|
||||
bottom:
|
||||
el.getBoundingClientRect().bottom - window.innerHeight > 0
|
||||
? el.getBoundingClientRect().bottom - window.innerHeight
|
||||
: 0
|
||||
};
|
||||
el.loading.$el.style.top = position.top + "px";
|
||||
el.loading.$el.style.bottom = position.bottom + "px";
|
||||
}
|
||||
});
|
||||
|
||||
if (value) {
|
||||
el.classList.add("directiveLoading-parent-visible");
|
||||
|
||||
el.loading.$el.style.removeProperty("display");
|
||||
} else {
|
||||
el.loading.$el.style.setProperty("display", "none");
|
||||
el.classList.remove("directiveLoading-parent-visible");
|
||||
}
|
||||
},
|
||||
|
||||
unmounted(el, binding) {
|
||||
el.loading.close();
|
||||
}
|
||||
});
|
||||
const defaultOpts = { target: null, fullscreen: true, lock: false };
|
||||
app.config.globalProperties.$loading = function(opts) {
|
||||
opts = Object.assign({}, defaultOpts, opts);
|
||||
let targetParent;
|
||||
if (typeof opts.target === "string") {
|
||||
try {
|
||||
targetParent = document.querySelector(opts.target);
|
||||
} catch (error) {
|
||||
targetParent = document.body;
|
||||
}
|
||||
} else if (!opts.target instanceof HTMLElement) {
|
||||
targetParent = document.body;
|
||||
}
|
||||
|
||||
targetParent = opts.target || document.body;
|
||||
|
||||
targetParent.style.position = "relative";
|
||||
|
||||
const loadingIns = new LoadingCtor({ data: opts });
|
||||
loadingIns.$mount();
|
||||
targetParent.appendChild(loadingIns.$el);
|
||||
|
||||
if (Object.prototype.toString.call(opts.position) === "[object Object]") {
|
||||
Object.keys(opts.position).forEach(prop => {
|
||||
loadingIns.$el.style[prop] = opts.position[prop] + "px";
|
||||
});
|
||||
}
|
||||
if (opts.background) {
|
||||
loadingIns.$el.style.background = opts.background;
|
||||
}
|
||||
if (opts.fullscreen) {
|
||||
loadingIns.$el.style.position = "fixed";
|
||||
}
|
||||
|
||||
return loadingIns;
|
||||
};
|
||||
};
|
||||
export default LoadingCtor;
|
||||
210
src/components/Logo.vue
Normal file
210
src/components/Logo.vue
Normal file
@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="logo">
|
||||
<svg v-if="isTransparent" width="197" height="35">
|
||||
<defs>
|
||||
<path id="logo-white_svg__a" d="M.424.45h5.404v7.767H.424z"/>
|
||||
<path id="logo-white_svg__c" d="M.138.45h6.113v7.767H.138z"/>
|
||||
<path id="logo-white_svg__e" d="M0 0h91.186v22.464H0z"/>
|
||||
<path id="logo-white_svg__g" d="M.009.593h10.68v21.154H.01z"/>
|
||||
<path id="logo-white_svg__i" d="M.313.27h18.54v14.706H.313z"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path d="M-96-14h1440v64H-96z"/>
|
||||
<g transform="translate(42.432 .175)">
|
||||
<mask id="logo-white_svg__b" fill="#fff">
|
||||
<use xlink:href="#logo-white_svg__a"/>
|
||||
</mask>
|
||||
<path
|
||||
d="M1.601 4.777h1.434c.53 0 .934.101 1.199.302.26.197.387.48.387.868 0 .393-.13.681-.398.88-.274.202-.686.304-1.227.304H1.6V4.777zm2.19-1.358c-.227.193-.558.291-.983.291H1.6V1.496H2.74c.468 0 .822.095 1.052.282.226.186.336.457.336.83 0 .353-.11.62-.335.81zm.723.623c.22-.152.396-.337.527-.55a1.68 1.68 0 0 0 .25-.894c0-.387-.09-.74-.268-1.047a2.132 2.132 0 0 0-.777-.77 2.212 2.212 0 0 0-.752-.256A7.419 7.419 0 0 0 2.299.45H.424v7.768h2.848c.72 0 1.333-.214 1.818-.636.49-.426.738-.958.738-1.581 0-.5-.13-.928-.385-1.27-.22-.297-.533-.527-.929-.688z"
|
||||
fill="#FFF"
|
||||
mask="url(#logo-white_svg__b)"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="M56.173 1.727h-1.12v1.268h-2.121l-1.384 3.351a6.475 6.475 0 0 0-.131.371l-.13.392a18.178 18.178 0 0 0-.12-.406 3.24 3.24 0 0 0-.121-.356L49.68 2.995h-1.243l2.213 5.3-.956 2.255h1.145l2.892-6.585h1.321v3.25c0 .462.11.8.326 1.003.215.202.57.305 1.059.305h.615V7.45h-.581c-.109 0-.186-.024-.23-.073-.046-.052-.07-.144-.07-.274V3.965h.881v-.97h-.88V1.727zM59.228 4.268a1.67 1.67 0 0 1 1.115-.395c.425 0 .792.13 1.087.387.27.234.441.537.512.903H58.71c.065-.357.24-.657.518-.895m1.125-1.403c-.82 0-1.496.267-2.006.794-.509.526-.767 1.223-.767 2.071 0 .359.062.707.184 1.034.124.328.303.621.533.871.264.283.583.504.949.658.366.153.764.23 1.184.23.509 0 .972-.096 1.38-.285a3.374 3.374 0 0 0 1.123-.881L63 7.28l-.815-.654-.061.07c-.232.267-.49.47-.768.606a2.02 2.02 0 0 1-.895.203c-.497 0-.913-.142-1.236-.421a1.47 1.47 0 0 1-.516-.99h4.467v-.166c0-.911-.263-1.657-.779-2.216-.518-.563-1.206-.847-2.043-.847"
|
||||
fill="#FFF"
|
||||
/>
|
||||
<g transform="translate(64.272 .175)">
|
||||
<mask id="logo-white_svg__d" fill="#fff">
|
||||
<use xlink:href="#logo-white_svg__c"/>
|
||||
</mask>
|
||||
<path
|
||||
d="M1.953 7.131h-.627V1.54h.627c1.029 0 1.812.236 2.328.702.513.464.773 1.169.773 2.094 0 .921-.26 1.625-.773 2.09-.516.468-1.3.705-2.328.705M5.107 1.44C4.352.782 3.24.449 1.803.449H.138v7.768h1.665c1.438 0 2.549-.333 3.304-.99.76-.66 1.144-1.632 1.144-2.891 0-1.263-.385-2.238-1.144-2.897"
|
||||
fill="#FFF"
|
||||
mask="url(#logo-white_svg__d)"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="M75.1 4.402c.32.333.48.765.48 1.284 0 .523-.16.956-.48 1.288-.318.33-.73.497-1.227.497-.496 0-.908-.167-1.226-.495-.32-.33-.48-.763-.48-1.29 0-.523.161-.956.48-1.286.318-.331.73-.498 1.226-.498.497 0 .909.168 1.227.5zm.5-.725a2.444 2.444 0 0 0-.71-.529 2.577 2.577 0 0 0-1.142-.254c-.817 0-1.484.258-1.984.77-.499.51-.751 1.187-.751 2.013 0 .38.064.74.19 1.066.127.327.318.624.568.884a2.735 2.735 0 0 0 1.977.833c.42 0 .797-.08 1.124-.24.248-.12.468-.288.66-.5v.673h1.114V2.995H75.6v.682zM80.074 2.894c-.304 0-.592.06-.856.18-.201.091-.398.22-.586.386v-.465h-1.104v5.397h1.104V5.41c0-.511.109-.898.323-1.148.21-.245.533-.37.96-.37.373 0 .638.112.81.34.174.235.262.619.262 1.14v3.02h1.115V5.28c0-.733-.182-1.32-.541-1.742-.363-.428-.863-.644-1.487-.644M86.566 6.967c-.14.177-.308.312-.504.402-.197.09-.428.136-.687.136-.482 0-.862-.164-1.163-.5-.3-.335-.452-.775-.452-1.309 0-.534.154-.977.456-1.316.305-.342.684-.507 1.159-.507.243 0 .463.04.651.12.188.08.357.206.504.374l.074.084.722-.834-.071-.064a2.583 2.583 0 0 0-.847-.518 2.996 2.996 0 0 0-1.033-.17c-.398 0-.768.066-1.1.197-.335.133-.632.33-.88.586a2.7 2.7 0 0 0-.6.924 3.077 3.077 0 0 0-.203 1.124c0 .4.068.778.203 1.122.134.345.336.655.599.92.247.254.543.45.88.584.336.134.707.201 1.1.201.385 0 .737-.06 1.045-.178.309-.119.606-.309.885-.564l.07-.064-.735-.844-.073.094zM89.474 4.268a1.67 1.67 0 0 1 1.115-.395c.426 0 .792.13 1.088.387.27.234.44.537.51.903h-3.231c.066-.357.24-.657.518-.895zm3.946 1.66c0-.911-.261-1.657-.778-2.216-.518-.563-1.205-.847-2.043-.847-.821 0-1.496.267-2.006.794-.51.526-.767 1.223-.767 2.071 0 .359.062.707.184 1.034.124.328.303.621.534.871.263.284.581.504.948.658.365.153.765.23 1.185.23.508 0 .972-.096 1.379-.285a3.38 3.38 0 0 0 1.123-.881l.066-.077-.814-.654-.062.07c-.232.267-.49.47-.768.606a2.015 2.015 0 0 1-.895.203c-.497 0-.912-.142-1.236-.421-.3-.26-.47-.584-.516-.99h4.466v-.166zM0 7.212v24.726h.002l5.427-1.394V8.606zM31.645 31.992l-5.429 1.394V5.764l5.429 1.394zM8.608 32.689l5.428-1.394V19.521l-5.428-1.394zM17.585 15.971l5.43-1.394V29.14l-5.43-1.394z"
|
||||
fill="#FFF"
|
||||
/>
|
||||
<g transform="translate(41.184 12.031)">
|
||||
<mask id="logo-white_svg__f" fill="#fff">
|
||||
<use xlink:href="#logo-white_svg__e"/>
|
||||
</mask>
|
||||
<path
|
||||
fill="#FFF"
|
||||
mask="url(#logo-white_svg__f)"
|
||||
d="M70.24 3.06h8.544v-1.9h-8.545z"
|
||||
/>
|
||||
<g mask="url(#logo-white_svg__f)">
|
||||
<g transform="translate(80.496)">
|
||||
<mask id="logo-white_svg__h" fill="#fff">
|
||||
<use xlink:href="#logo-white_svg__g"/>
|
||||
</mask>
|
||||
<path
|
||||
d="M8.956 2.477H4.59L4.884.592H2.966l-.301 1.885H.278v1.9h2.118L.01 21.52h1.998L4.329 4.377h3.86a.6.6 0 0 1 .6.6v14.87H5.54v1.9h5.15V4.212c0-.957-.778-1.735-1.734-1.735"
|
||||
fill="#FFF"
|
||||
mask="url(#logo-white_svg__h)"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="M69.205 8.969h2.512l-1.87 12.552h7.977c.892 0 1.615-.723 1.615-1.615v-4.727h-1.9v3.664c0 .43-.349.778-.78.778h-4.642l1.524-10.652h6.177v-1.9H69.205v1.9zM58.09 7.71l-.605-5.235h-1.902l.605 5.235zM57.913 9.747H56.01l-.678 7.394h1.9zM67.124 2.474h-1.902l-.605 5.236h1.902zM64.621 9.747l.682 7.394h1.9l-.68-7.394z"
|
||||
fill="#FFF"
|
||||
/>
|
||||
<path
|
||||
fill="#FFF"
|
||||
d="M64.015.702h-1.9v21.126h4.989v-1.9h-3.089zM58.24 19.278a.65.65 0 0 1-.65.65h-1.644v1.9h2.46c.956 0 1.733-.778 1.733-1.73L60.783.703h-1.9l-.643 18.576zM52.633 3.287v4.46h-4.18V2.804h3.698c.266 0 .482.216.482.482zm-.642 10.743h2.542v-1.9h-2.542V9.646h2.542v-7.03c0-.943-.769-1.711-1.711-1.711h-6.268v8.74h3.538V18.9l-1.33.346v-8.197h-1.899v8.692l-1.061.276v1.963l8.91-2.32v-1.964l-2.72.709V14.03z"
|
||||
/>
|
||||
<g transform="translate(23.712 7.488)">
|
||||
<mask id="logo-white_svg__j" fill="#fff">
|
||||
<use xlink:href="#logo-white_svg__i"/>
|
||||
</mask>
|
||||
<path
|
||||
d="M17.12.27H.312v1.901H4.82v12.805h1.9V2.171h9.662c.316 0 .573.256.573.572v9.08h-3.25v1.9h5.15V2.006c0-.957-.778-1.735-1.735-1.735"
|
||||
fill="#FFF"
|
||||
mask="url(#logo-white_svg__j)"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
fill="#FFF"
|
||||
d="M39.757.702h-1.9v1.356h-9.122V.702h-1.9v1.356h-3.706v1.9h3.706v2.546h1.9V3.958h9.122v2.546h1.9V3.958h4.25v-1.9h-4.25zM19.289 2.058h-7.755V.702h-1.9v1.356H.524v3.926h1.899V3.958H18.62c.277 0 .502.224.502.501v1.525h1.9V3.792c0-.956-.778-1.734-1.734-1.734M17.352 9.269c.442-.419.584-1.09.353-1.671-.247-.618-.839-.972-1.626-.972H3.309v1.9H14.75c.122 0 .18.064.208.118a.363.363 0 0 1-.03.348l-3.893 3.588H.523v1.9H11.22v5.874H6.498v1.9h6.622V14.48h7.525v-1.9h-6.837c.698-.647 2.42-2.248 3.544-3.311"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="#FFF">
|
||||
<path
|
||||
d="M193 12a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4h-48a4 4 0 0 1-4-4V16a4 4 0 0 1 4-4h48zm-17.896 4.996h-5.348v1.232h.616v8.218l-.798.126.308 1.274a52.682 52.682 0 0 0 3.332-.826v2.422h1.232v-2.8c.182-.056.364-.126.56-.182v-1.288c-.182.07-.364.14-.56.196v-7.14h.658v-1.232zm-7.392 6.412h-6.65v6.006h1.316v-.49h4.018v.49h1.316v-6.006zm14.7-.084h-7.602v1.162h1.834l-.77 2.044h4.508c-.07.728-.168 1.19-.294 1.4-.154.182-.532.28-1.12.28-.504 0-1.078-.042-1.722-.112l.42 1.134c.462.056.98.098 1.568.098.91 0 1.526-.182 1.848-.518.308-.364.518-1.484.616-3.388h-4.186l.42-.938h4.48v-1.162zm-23.716-6.79h-1.316v2.45h-1.68v1.274h1.68v2.926c-.644.238-1.302.434-1.96.588l.364 1.386c.532-.196 1.064-.392 1.596-.602v3.01c0 .336-.182.504-.532.504a9.95 9.95 0 0 1-1.092-.07l.294 1.288h1.26c.924 0 1.386-.462 1.386-1.386v-3.92c.448-.224.91-.448 1.358-.7v-1.344c-.448.252-.896.476-1.358.7v-2.38h1.54v-1.274h-1.54v-2.45zm7.7 8.162v2.954h-4.018v-2.954h4.018zm6.818-.644v1.722c-.532.154-1.064.294-1.624.42v-2.142h1.624zm-5.264-7.056h-7.126v1.26h2.184c-.182.854-.434 1.554-.77 2.1-.42.616-1.036 1.176-1.862 1.68l.812 1.05c.98-.644 1.708-1.358 2.198-2.142.378-.672.686-1.568.924-2.688h2.352c-.028 1.484-.112 2.394-.224 2.744-.14.364-.448.546-.924.574-.28-.028-.644-.056-1.092-.084l.322 1.162c.406.042.756.07 1.064.07.77 0 1.316-.266 1.652-.798.308-.546.476-2.184.49-4.928zm5.264 4.158v1.694h-1.624v-1.694h1.624zm6.076-4.55h-1.218v1.008h-2.618v5.012h6.454v-5.012h-2.618v-1.008zm1.414 4.046v.91h-1.414v-.91h1.414zm-2.632 0v.91h-1.442v-.91h1.442zm-4.858-2.422v1.722h-1.624v-1.722h1.624zm4.858.462v.952h-1.442v-.952h1.442zm2.632 0v.952h-1.414v-.952h1.414z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<svg v-else width="197" height="35">
|
||||
<defs>
|
||||
<path id="logo-color_svg__a" d="M.424.45h5.404v7.767H.424z"/>
|
||||
<path id="logo-color_svg__c" d="M.138.45h6.113v7.767H.138z"/>
|
||||
<path id="logo-color_svg__e" d="M0 0h91.186v22.464H0z"/>
|
||||
<path id="logo-color_svg__g" d="M.009.593h10.68v21.154H.01z"/>
|
||||
<path id="logo-color_svg__i" d="M.313.27h18.54v14.706H.313z"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(42.432 .175)">
|
||||
<mask id="logo-color_svg__b" fill="#fff">
|
||||
<use xlink:href="#logo-color_svg__a"/>
|
||||
</mask>
|
||||
<path
|
||||
d="M1.601 4.777h1.434c.53 0 .934.101 1.199.302.26.197.387.48.387.868 0 .393-.13.681-.398.88-.274.202-.686.304-1.227.304H1.6V4.777zm2.19-1.358c-.227.193-.558.291-.983.291H1.6V1.496H2.74c.468 0 .822.095 1.052.282.226.186.336.457.336.83 0 .353-.11.62-.335.81zm.723.623c.22-.152.396-.337.527-.55a1.68 1.68 0 0 0 .25-.894c0-.387-.09-.74-.268-1.047a2.132 2.132 0 0 0-.777-.77 2.212 2.212 0 0 0-.752-.256A7.419 7.419 0 0 0 2.299.45H.424v7.768h2.848c.72 0 1.333-.214 1.818-.636.49-.426.738-.958.738-1.581 0-.5-.13-.928-.385-1.27-.22-.297-.533-.527-.929-.688z"
|
||||
fill="#3960AC"
|
||||
mask="url(#logo-color_svg__b)"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="M56.173 1.727h-1.12v1.268h-2.121l-1.384 3.351a6.475 6.475 0 0 0-.131.371l-.13.392a18.178 18.178 0 0 0-.12-.406 3.24 3.24 0 0 0-.121-.356L49.68 2.995h-1.243l2.213 5.3-.956 2.255h1.145l2.892-6.585h1.321v3.25c0 .462.11.8.326 1.003.215.202.57.305 1.059.305h.615V7.45h-.581c-.109 0-.186-.024-.23-.073-.046-.052-.07-.144-.07-.274V3.965h.881v-.97h-.88V1.727zM59.228 4.268a1.67 1.67 0 0 1 1.115-.395c.425 0 .792.13 1.087.387.27.234.441.537.512.903H58.71c.065-.357.24-.657.518-.895m1.125-1.403c-.82 0-1.496.267-2.006.794-.509.526-.767 1.223-.767 2.071 0 .359.062.707.184 1.034.124.328.303.621.533.871.264.283.583.504.949.658.366.153.764.23 1.184.23.509 0 .972-.096 1.38-.285a3.374 3.374 0 0 0 1.123-.881L63 7.28l-.815-.654-.061.07c-.232.267-.49.47-.768.606a2.02 2.02 0 0 1-.895.203c-.497 0-.913-.142-1.236-.421a1.47 1.47 0 0 1-.516-.99h4.467v-.166c0-.911-.263-1.657-.779-2.216-.518-.563-1.206-.847-2.043-.847"
|
||||
fill="#3960AC"
|
||||
/>
|
||||
<g transform="translate(64.272 .175)">
|
||||
<mask id="logo-color_svg__d" fill="#fff">
|
||||
<use xlink:href="#logo-color_svg__c"/>
|
||||
</mask>
|
||||
<path
|
||||
d="M1.953 7.131h-.627V1.54h.627c1.029 0 1.812.236 2.328.702.513.464.773 1.169.773 2.094 0 .921-.26 1.625-.773 2.09-.516.468-1.3.705-2.328.705M5.107 1.44C4.352.782 3.24.449 1.803.449H.138v7.768h1.665c1.438 0 2.549-.333 3.304-.99.76-.66 1.144-1.632 1.144-2.891 0-1.263-.385-2.238-1.144-2.897"
|
||||
fill="#3960AC"
|
||||
mask="url(#logo-color_svg__d)"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="M75.1 4.402c.32.333.48.765.48 1.284 0 .523-.16.956-.48 1.288-.318.33-.73.497-1.227.497-.496 0-.908-.167-1.226-.495-.32-.33-.48-.763-.48-1.29 0-.523.161-.956.48-1.286.318-.331.73-.498 1.226-.498.497 0 .909.168 1.227.5zm.5-.725a2.444 2.444 0 0 0-.71-.529 2.577 2.577 0 0 0-1.142-.254c-.817 0-1.484.258-1.984.77-.499.51-.751 1.187-.751 2.013 0 .38.064.74.19 1.066.127.327.318.624.568.884a2.735 2.735 0 0 0 1.977.833c.42 0 .797-.08 1.124-.24.248-.12.468-.288.66-.5v.673h1.114V2.995H75.6v.682zM80.074 2.894c-.304 0-.592.06-.856.18-.201.091-.398.22-.586.386v-.465h-1.104v5.397h1.104V5.41c0-.511.109-.898.323-1.148.21-.245.533-.37.96-.37.373 0 .638.112.81.34.174.235.262.619.262 1.14v3.02h1.115V5.28c0-.733-.182-1.32-.541-1.742-.363-.428-.863-.644-1.487-.644M86.566 6.967c-.14.177-.308.312-.504.402-.197.09-.428.136-.687.136-.482 0-.862-.164-1.163-.5-.3-.335-.452-.775-.452-1.309 0-.534.154-.977.456-1.316.305-.342.684-.507 1.159-.507.243 0 .463.04.651.12.188.08.357.206.504.374l.074.084.722-.834-.071-.064a2.583 2.583 0 0 0-.847-.518 2.996 2.996 0 0 0-1.033-.17c-.398 0-.768.066-1.1.197-.335.133-.632.33-.88.586a2.7 2.7 0 0 0-.6.924 3.077 3.077 0 0 0-.203 1.124c0 .4.068.778.203 1.122.134.345.336.655.599.92.247.254.543.45.88.584.336.134.707.201 1.1.201.385 0 .737-.06 1.045-.178.309-.119.606-.309.885-.564l.07-.064-.735-.844-.073.094zM89.474 4.268a1.67 1.67 0 0 1 1.115-.395c.426 0 .792.13 1.088.387.27.234.44.537.51.903h-3.231c.066-.357.24-.657.518-.895zm3.946 1.66c0-.911-.261-1.657-.778-2.216-.518-.563-1.205-.847-2.043-.847-.821 0-1.496.267-2.006.794-.51.526-.767 1.223-.767 2.071 0 .359.062.707.184 1.034.124.328.303.621.534.871.263.284.581.504.948.658.365.153.765.23 1.185.23.508 0 .972-.096 1.379-.285a3.38 3.38 0 0 0 1.123-.881l.066-.077-.814-.654-.062.07c-.232.267-.49.47-.768.606a2.015 2.015 0 0 1-.895.203c-.497 0-.912-.142-1.236-.421-.3-.26-.47-.584-.516-.99h4.466v-.166zM0 7.212v24.726h.002l5.427-1.394V8.606z"
|
||||
fill="#3960AC"
|
||||
/>
|
||||
<path
|
||||
fill="#79CBC6"
|
||||
d="M31.645 31.992l-5.429 1.394V5.764l5.429 1.394z"
|
||||
/>
|
||||
<path
|
||||
fill="#4882C2"
|
||||
d="M8.608 32.689l5.428-1.394V19.521l-5.428-1.394z"
|
||||
/>
|
||||
<path fill="#2CBDC3" d="M17.585 15.971l5.43-1.394V29.14l-5.43-1.394z"/>
|
||||
<g transform="translate(41.184 12.031)">
|
||||
<mask id="logo-color_svg__f" fill="#fff">
|
||||
<use xlink:href="#logo-color_svg__e"/>
|
||||
</mask>
|
||||
<path
|
||||
fill="#3960AC"
|
||||
mask="url(#logo-color_svg__f)"
|
||||
d="M70.24 3.06h8.544v-1.9h-8.545z"
|
||||
/>
|
||||
<g mask="url(#logo-color_svg__f)">
|
||||
<g transform="translate(80.496)">
|
||||
<mask id="logo-color_svg__h" fill="#fff">
|
||||
<use xlink:href="#logo-color_svg__g"/>
|
||||
</mask>
|
||||
<path
|
||||
d="M8.956 2.477H4.59L4.884.592H2.966l-.301 1.885H.278v1.9h2.118L.01 21.52h1.998L4.329 4.377h3.86a.6.6 0 0 1 .6.6v14.87H5.54v1.9h5.15V4.212c0-.957-.778-1.735-1.734-1.735"
|
||||
fill="#3960AC"
|
||||
mask="url(#logo-color_svg__h)"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="M69.205 8.969h2.512l-1.87 12.552h7.977c.892 0 1.615-.723 1.615-1.615v-4.727h-1.9v3.664c0 .43-.349.778-.78.778h-4.642l1.524-10.652h6.177v-1.9H69.205v1.9zM58.09 7.71l-.605-5.235h-1.902l.605 5.235zM57.913 9.747H56.01l-.678 7.394h1.9zM67.124 2.474h-1.902l-.605 5.236h1.902zM64.621 9.747l.682 7.394h1.9l-.68-7.394z"
|
||||
fill="#3960AC"
|
||||
/>
|
||||
<path
|
||||
fill="#3960AC"
|
||||
d="M64.015.702h-1.9v21.126h4.989v-1.9h-3.089zM58.24 19.278a.65.65 0 0 1-.65.65h-1.644v1.9h2.46c.956 0 1.733-.778 1.733-1.73L60.783.703h-1.9l-.643 18.576zM52.633 3.287v4.46h-4.18V2.804h3.698c.266 0 .482.216.482.482zm-.642 10.743h2.542v-1.9h-2.542V9.646h2.542v-7.03c0-.943-.769-1.711-1.711-1.711h-6.268v8.74h3.538V18.9l-1.33.346v-8.197h-1.899v8.692l-1.061.276v1.963l8.91-2.32v-1.964l-2.72.709V14.03z"
|
||||
/>
|
||||
<g transform="translate(23.712 7.488)">
|
||||
<mask id="logo-color_svg__j" fill="#fff">
|
||||
<use xlink:href="#logo-color_svg__i"/>
|
||||
</mask>
|
||||
<path
|
||||
d="M17.12.27H.312v1.901H4.82v12.805h1.9V2.171h9.662c.316 0 .573.256.573.572v9.08h-3.25v1.9h5.15V2.006c0-.957-.778-1.735-1.735-1.735"
|
||||
fill="#3960AC"
|
||||
mask="url(#logo-color_svg__j)"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
fill="#3960AC"
|
||||
d="M39.757.702h-1.9v1.356h-9.122V.702h-1.9v1.356h-3.706v1.9h3.706v2.546h1.9V3.958h9.122v2.546h1.9V3.958h4.25v-1.9h-4.25zM19.289 2.058h-7.755V.702h-1.9v1.356H.524v3.926h1.899V3.958H18.62c.277 0 .502.224.502.501v1.525h1.9V3.792c0-.956-.778-1.734-1.734-1.734M17.352 9.269c.442-.419.584-1.09.353-1.671-.247-.618-.839-.972-1.626-.972H3.309v1.9H14.75c.122 0 .18.064.208.118a.363.363 0 0 1-.03.348l-3.893 3.588H.523v1.9H11.22v5.874H6.498v1.9h6.622V14.48h7.525v-1.9h-6.837c.698-.647 2.42-2.248 3.544-3.311"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M145 12h48a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4h-48a4 4 0 0 1-4-4V16a4 4 0 0 1 4-4z"
|
||||
fill="#F0F4FF"
|
||||
/>
|
||||
<path
|
||||
d="M157.31 29.288c.924 0 1.386-.462 1.386-1.386v-3.92c.448-.224.91-.448 1.358-.7v-1.344c-.448.252-.896.476-1.358.7v-2.38h1.54v-1.274h-1.54v-2.45h-1.316v2.45h-1.68v1.274h1.68v2.926c-.644.238-1.302.434-1.96.588l.364 1.386c.532-.196 1.064-.392 1.596-.602v3.01c0 .336-.182.504-.532.504a9.95 9.95 0 0 1-1.092-.07l.294 1.288h1.26zm3.878-6.202c.98-.644 1.708-1.358 2.198-2.142.378-.672.686-1.568.924-2.688h2.352c-.028 1.484-.112 2.394-.224 2.744-.14.364-.448.546-.924.574-.28-.028-.644-.056-1.092-.084l.322 1.162c.406.042.756.07 1.064.07.77 0 1.316-.266 1.652-.798.308-.546.476-2.184.49-4.928h-7.126v1.26h2.184c-.182.854-.434 1.554-.77 2.1-.42.616-1.036 1.176-1.862 1.68l.812 1.05zm1.19 6.328v-.49h4.018v.49h1.316v-6.006h-6.65v6.006h1.316zm4.018-1.764h-4.018v-2.954h4.018v2.954zm15.512-5.026v-5.012h-2.618v-1.008h-1.218v1.008h-2.618v5.012h6.454zm-7.462 6.818v-2.8c.182-.056.364-.126.56-.182v-1.288c-.182.07-.364.14-.56.196v-7.14h.658v-1.232h-5.348v1.232h.616v8.218l-.798.126.308 1.274a52.682 52.682 0 0 0 3.332-.826v2.422h1.232zm-1.232-9.492h-1.624v-1.722h1.624v1.722zm4.858-.308h-1.442v-.952h1.442v.952zm2.632 0h-1.414v-.952h1.414v.952zm0 1.918h-1.414v-.91h1.414v.91zm-2.632 0h-1.442v-.91h1.442v.91zm-4.858 1.288h-1.624v-1.694h1.624v1.694zm6.02 6.482c.91 0 1.526-.182 1.848-.518.308-.364.518-1.484.616-3.388h-4.186l.42-.938h4.48v-1.162h-7.602v1.162h1.834l-.77 2.044h4.508c-.07.728-.168 1.19-.294 1.4-.154.182-.532.28-1.12.28-.504 0-1.078-.042-1.722-.112l.42 1.134c.462.056.98.098 1.568.098zm-7.644-3.136v-2.142h1.624v1.722c-.532.154-1.064.294-1.624.42z"
|
||||
fill="#325AB4"
|
||||
fill-rule="nonzero"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {defineProps, toRefs} from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
isTransparent: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const {isTransparent} = toRefs(props)
|
||||
|
||||
|
||||
</script>
|
||||
128
src/components/Pagination.vue
Normal file
128
src/components/Pagination.vue
Normal file
@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div v-if="visiblePagers.length" class="pagination">
|
||||
<ul class="pagination-list">
|
||||
<li
|
||||
title="上一页"
|
||||
@click="$emit('update:currentPage', Math.max(1, currentPage - 1))"
|
||||
class="pagination-item"
|
||||
:class="{ disabled: currentPage === 1 }"
|
||||
>
|
||||
<span><</span>
|
||||
</li>
|
||||
<li
|
||||
class="pagination-item"
|
||||
:class="{ current: currentPage === item }"
|
||||
v-for="(item, index) in visiblePagers"
|
||||
@click="change(item)"
|
||||
:key="index"
|
||||
>
|
||||
<span>{{ item }}</span>
|
||||
</li>
|
||||
<li
|
||||
title="下一页"
|
||||
@click="
|
||||
$emit('update:currentPage', Math.min(totalPage, currentPage + 1))
|
||||
"
|
||||
class="pagination-item"
|
||||
:class="{ disabled: currentPage === totalPage }"
|
||||
>
|
||||
<span>></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {ref, defineProps, toRefs, computed} from "vue";
|
||||
import EventBus from "../helper/EventBus/index.js";
|
||||
|
||||
const props = defineProps({
|
||||
total: Number,
|
||||
perPage: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
pagerCount: {
|
||||
type: Number,
|
||||
default: 9
|
||||
}
|
||||
})
|
||||
|
||||
const {total, perPage, currentPage, pagerCount} = toRefs(props)
|
||||
// 计算属性
|
||||
const totalPage = computed(() => {
|
||||
return Math.ceil(parseInt(total.value) / perPage.value);
|
||||
})
|
||||
|
||||
const visiblePagers = () => {
|
||||
let pages = [];
|
||||
const currentPage = Math.max(
|
||||
1,
|
||||
Math.min(currentPage.value, totalPage.value)
|
||||
);
|
||||
|
||||
if (totalPage.value <= pagerCount.value) {
|
||||
for (let i = 1; i <= totalPage.value; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
return pages;
|
||||
}
|
||||
|
||||
if (currentPage.value >= totalPage.value - 3) {
|
||||
pages.push(1, "...");
|
||||
const minPage = Math.min(currentPage.value - 2, totalPage.value - 4);
|
||||
for (let i = minPage, len = totalPage.value; i <= len; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
} else if (currentPage.value <= 4) {
|
||||
const maxPage = Math.min(Math.max(currentPage.value + 2, 5), totalPage.value);
|
||||
for (let i = 1; i <= maxPage; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
pages.push("...", totalPage.value);
|
||||
} else {
|
||||
pages.push(1, "...");
|
||||
for (let i = currentPage.value - 2; i <= currentPage.value + 2; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
pages.push("...", totalPage.value);
|
||||
}
|
||||
return pages;
|
||||
}
|
||||
|
||||
const change = (num) => {
|
||||
if (typeof num !== "number" ) {
|
||||
return
|
||||
}
|
||||
EventBus.emit("current-change", num)
|
||||
EventBus.emit("update:currentPage", num)
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.pagination-list {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pagination-item {
|
||||
margin-right: 12px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
color: #ccc !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @main-color;
|
||||
}
|
||||
|
||||
&.current {
|
||||
color: @main-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
268
src/components/footer.vue
Normal file
268
src/components/footer.vue
Normal file
@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<div class="footer">
|
||||
<div class="footer-content-column">
|
||||
<logo :is-transparent="true"></logo>
|
||||
<p class="title">© 2012-2020 北京字节跳动科技有限公司</p>
|
||||
<p class="title">京公网安备 11000002002023号 I 京ICP备12025439号-3</p>
|
||||
</div>
|
||||
<div class="footer-content-column">
|
||||
<div class="title">联系我们</div>
|
||||
<p>关于投递</p>
|
||||
<p>关于投递</p>
|
||||
</div>
|
||||
<div class="footer-content-column">
|
||||
<div class="title">企业官网</div>
|
||||
<p>字节跳动</p>
|
||||
</div>
|
||||
<div class="footer-content-column">
|
||||
<div class="title">实时动态与招聘信息，请关注我们</div>
|
||||
<ul class="footer-content-column__contact">
|
||||
<!-- <li class="contact-item wechat">
|
||||
<svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
</li>-->
|
||||
<li class="contact-item wechat">
|
||||
<svg width="33" height="32">
|
||||
<defs>
|
||||
<path id="icon-wechat_svg__a" d="M0 0h1440v251H0z" />
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path fill="#FFF" d="M-1120-7901H320V126h-1440z" />
|
||||
<use
|
||||
fill="#1F2329"
|
||||
fill-rule="nonzero"
|
||||
transform="translate(-1120 -125)"
|
||||
xlink:href="#icon-wechat_svg__a"
|
||||
/>
|
||||
<g transform="translate(.5)">
|
||||
<rect width="32" height="32" fill="#2EA121" rx="16" />
|
||||
<path
|
||||
fill="#FFF"
|
||||
d="M21.714 17.68a.798.798 0 0 0 .786-.808.798.798 0 0 0-.786-.809.798.798 0 0 0-.787.809c0 .446.352.809.787.809zm-3.84 0a.798.798 0 0 0 .786-.808.798.798 0 0 0-.786-.809.798.798 0 0 0-.787.809c0 .446.352.809.787.809zm-2.198-4.685a.939.939 0 0 0 .925-.952.939.939 0 0 0-.925-.95.939.939 0 0 0-.925.95c0 .526.414.952.925.952zm-4.65 0a.939.939 0 0 0 .926-.952.939.939 0 0 0-.925-.95.939.939 0 0 0-.926.95c0 .526.414.952.926.952zm11.078 10.184a.4.4 0 0 0-.325-.038 6.65 6.65 0 0 1-1.974.296c-3.2 0-5.794-2.226-5.794-4.972 0-2.745 2.594-4.97 5.794-4.97 3.2 0 5.795 2.225 5.795 4.97 0 1.517-.792 2.875-2.04 3.787a.308.308 0 0 0-.114.324l.273 1.07c.082.32-.08.447-.358.28l-1.257-.747zm-11.088-3.61a8.012 8.012 0 0 0 2.721.339 4.676 4.676 0 0 1-.235-1.466c0-2.995 2.853-5.423 6.373-5.423.123 0 .245.003.366.008C19.72 10.18 16.838 8 13.363 8 9.517 8 6.4 10.668 6.4 13.958c0 1.81.942 3.43 2.43 4.522a.43.43 0 0 1 .159.455l-.327 1.256c-.1.379.09.527.42.329l1.49-.895a.549.549 0 0 1 .444-.056z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</li>
|
||||
<li class="contact-item douyin">
|
||||
<svg width="33" height="34">
|
||||
<defs>
|
||||
<path id="icon-douyin_svg__a" d="M0 0h1440v251H0z" />
|
||||
<filter
|
||||
id="icon-douyin_svg__b"
|
||||
width="537.5%"
|
||||
height="520%"
|
||||
x="-218.8%"
|
||||
y="-210%"
|
||||
filterUnits="objectBoundingBox"
|
||||
>
|
||||
<feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
|
||||
<feGaussianBlur
|
||||
in="shadowOffsetOuter1"
|
||||
result="shadowBlurOuter1"
|
||||
stdDeviation="12.5"
|
||||
/>
|
||||
<feColorMatrix
|
||||
in="shadowBlurOuter1"
|
||||
result="shadowMatrixOuter1"
|
||||
values="0 0 0 0 0.121568627 0 0 0 0 0.137254902 0 0 0 0 0.160784314 0 0 0 0.1 0"
|
||||
/>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path fill="#FFF" d="M-1175-7900H265V127h-1440z" />
|
||||
<use
|
||||
fill="#1F2329"
|
||||
fill-rule="nonzero"
|
||||
transform="translate(-1175 -124)"
|
||||
xlink:href="#icon-douyin_svg__a"
|
||||
/>
|
||||
<g transform="translate(.5 1)">
|
||||
<circle cx="16" cy="16" r="16" fill="#000" stroke="#000" />
|
||||
<g filter="url(#icon-douyin_svg__b)" transform="translate(4 4)">
|
||||
<path
|
||||
fill="#00F7EF"
|
||||
d="M10.385 10.126v-.773a6.04 6.04 0 0 0-.813-.059c-3.326 0-6.031 2.697-6.031 6.01a6 6 0 0 0 2.575 4.922 5.976 5.976 0 0 1-1.62-4.093c0-3.266 2.629-5.93 5.89-6.007"
|
||||
/>
|
||||
<path
|
||||
fill="#00F7EF"
|
||||
d="M10.528 18.878a2.751 2.751 0 0 0 2.749-2.641l.005-13.087h2.4a4.532 4.532 0 0 1-.078-.83h-3.277l-.005 13.088a2.751 2.751 0 0 1-4.028 2.326 2.753 2.753 0 0 0 2.234 1.144m9.635-11.287v-.727a4.542 4.542 0 0 1-2.483-.736 4.565 4.565 0 0 0 2.483 1.463"
|
||||
/>
|
||||
<path
|
||||
fill="#FF004F"
|
||||
d="M17.68 6.128a4.513 4.513 0 0 1-1.12-2.978h-.879a4.551 4.551 0 0 0 2 2.978M9.572 12.56a2.753 2.753 0 0 0-2.754 2.745c0 1.054.6 1.97 1.477 2.43a2.72 2.72 0 0 1-.522-1.602 2.753 2.753 0 0 1 2.755-2.745c.283 0 .555.047.812.127v-3.334a6.04 6.04 0 0 0-.812-.058c-.048 0-.095.002-.143.003v2.56a2.721 2.721 0 0 0-.813-.126"
|
||||
/>
|
||||
<path
|
||||
fill="#FF004F"
|
||||
d="M20.163 7.591v2.538a7.813 7.813 0 0 1-4.559-1.46v6.636c0 3.314-2.706 6.01-6.032 6.01a6.01 6.01 0 0 1-3.456-1.089 6.025 6.025 0 0 0 4.411 1.918c3.326 0 6.032-2.696 6.032-6.01V9.496a7.812 7.812 0 0 0 4.56 1.461V7.693c-.328 0-.647-.036-.956-.102"
|
||||
/>
|
||||
<path
|
||||
fill="#FFF"
|
||||
d="M15.604 15.305V8.669a7.813 7.813 0 0 0 4.56 1.46V7.591a4.565 4.565 0 0 1-2.484-1.463 4.552 4.552 0 0 1-1.999-2.978h-2.399l-.005 13.087a2.752 2.752 0 0 1-4.983 1.497 2.745 2.745 0 0 1-1.476-2.43 2.753 2.753 0 0 1 2.754-2.744c.284 0 .556.046.813.127v-2.56c-3.26.075-5.89 2.74-5.89 6.006 0 1.58.617 3.019 1.62 4.093a6.01 6.01 0 0 0 3.457 1.09c3.326 0 6.032-2.697 6.032-6.011"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</li>
|
||||
<li class="contact-item toutiao">
|
||||
<svg width="33" height="32">
|
||||
<defs>
|
||||
<path id="icon-toutiao_svg__a" d="M0 0h1440v251H0z" />
|
||||
<circle id="icon-toutiao_svg__b" cx="16" cy="16" r="16" />
|
||||
<filter
|
||||
id="icon-toutiao_svg__c"
|
||||
width="428.1%"
|
||||
height="428.1%"
|
||||
x="-164.1%"
|
||||
y="-164.1%"
|
||||
filterUnits="objectBoundingBox"
|
||||
>
|
||||
<feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
|
||||
<feGaussianBlur
|
||||
in="shadowOffsetOuter1"
|
||||
result="shadowBlurOuter1"
|
||||
stdDeviation="12.5"
|
||||
/>
|
||||
<feColorMatrix
|
||||
in="shadowBlurOuter1"
|
||||
result="shadowMatrixOuter1"
|
||||
values="0 0 0 0 0.121568627 0 0 0 0 0.137254902 0 0 0 0 0.160784314 0 0 0 0.1 0"
|
||||
/>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
<path id="icon-toutiao_svg__e" d="M0 0h32v32H0z" />
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path fill="#FFF" d="M-1229-7901H211V126h-1440z" />
|
||||
<use
|
||||
fill="#1F2329"
|
||||
fill-rule="nonzero"
|
||||
transform="translate(-1229 -125)"
|
||||
xlink:href="#icon-toutiao_svg__a"
|
||||
/>
|
||||
<g transform="translate(.5)">
|
||||
<mask id="icon-toutiao_svg__d" fill="#fff">
|
||||
<use xlink:href="#icon-toutiao_svg__b" />
|
||||
</mask>
|
||||
<use fill="#FFF" xlink:href="#icon-toutiao_svg__b" />
|
||||
<g filter="url(#icon-toutiao_svg__c)" mask="url(#icon-toutiao_svg__d)">
|
||||
<mask id="icon-toutiao_svg__f" fill="#fff">
|
||||
<use xlink:href="#icon-toutiao_svg__e" />
|
||||
</mask>
|
||||
<path
|
||||
fill="#FFF"
|
||||
d="M26.308 32H5.692A5.699 5.699 0 0 1 0 26.307V5.692A5.699 5.699 0 0 1 5.692 0h20.616A5.698 5.698 0 0 1 32 5.692v20.615A5.699 5.699 0 0 1 26.308 32"
|
||||
mask="url(#icon-toutiao_svg__f)"
|
||||
/>
|
||||
<path
|
||||
fill="#DDD"
|
||||
d="M5.692.241A5.457 5.457 0 0 0 .24 5.691v20.616a5.457 5.457 0 0 0 5.452 5.451h20.616a5.457 5.457 0 0 0 5.452-5.45V5.691A5.457 5.457 0 0 0 26.308.24H5.692zM26.308 32H5.692A5.699 5.699 0 0 1 0 26.307V5.692A5.698 5.698 0 0 1 5.692 0h20.616A5.698 5.698 0 0 1 32 5.692v20.615A5.699 5.699 0 0 1 26.308 32z"
|
||||
mask="url(#icon-toutiao_svg__f)"
|
||||
/>
|
||||
<path
|
||||
fill="#FF373C"
|
||||
d="M32 25.297L0 27V7.703L32 6z"
|
||||
mask="url(#icon-toutiao_svg__f)"
|
||||
/>
|
||||
<path
|
||||
fill="#FFF"
|
||||
d="M9 13v-1.66L5 11v1.66zm-4 1v1.66L9 16v-1.66zm10 4.457L3 19v-1.457L15 17zm14-1L17 18v-1.457L29 16zm-1-6.883L19 11V9.426L28 9z"
|
||||
mask="url(#icon-toutiao_svg__f)"
|
||||
/>
|
||||
<path
|
||||
fill="#FFF"
|
||||
d="M12 9l-1.861.105c-.05 3.999-.1 6.251-.768 7.863-.678 1.635-2.123 2.989-5.001 5.686L4 23l2.932-.165C11.71 18.28 11.896 17.29 12 9m1.218 11L11 20.121 12.782 23 15 22.879zm14-1L25 19.121 26.782 22 29 21.879zM21 19l-2.218.114L17 22l2.218-.114zm3 2.89L22 22v-6.89l2-.11zm2.138-12.798v1.18c-1.179.953-3.558 2.569-10.138 3.934V16c7.992-1.62 10.718-3.9 12-5.044V9l-1.862.092z"
|
||||
mask="url(#icon-toutiao_svg__f)"
|
||||
/>
|
||||
<path
|
||||
fill="#FFF"
|
||||
d="M18.917 11.162a16.953 16.953 0 0 0-.245-.162L17 12.059s.746.524.827.578C19.194 13.55 21.69 15.214 29 16v-1.793c-6.64-.748-8.859-2.228-10.083-3.045"
|
||||
mask="url(#icon-toutiao_svg__f)"
|
||||
/>
|
||||
<path
|
||||
fill="#FFF"
|
||||
d="M17 11.954L18.815 13 21 9.79 19.003 9z"
|
||||
mask="url(#icon-toutiao_svg__f)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</li>
|
||||
<li class="contact-item lingying">
|
||||
<svg width="33" height="32">
|
||||
<defs>
|
||||
<path id="icon-linkedin_svg__a" d="M0 0h1440v251H0z" />
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path fill="#FFF" d="M-1284-7901H156V126h-1440z" />
|
||||
<use
|
||||
fill="#1F2329"
|
||||
fill-rule="nonzero"
|
||||
transform="translate(-1284 -125)"
|
||||
xlink:href="#icon-linkedin_svg__a"
|
||||
/>
|
||||
<circle cx="16" cy="16" r="16" fill="#1D87BD" transform="translate(.5)" />
|
||||
<path
|
||||
fill="#FFF"
|
||||
fill-rule="nonzero"
|
||||
d="M8.58 24V12.827h3.413V24H8.58M12.1 9.733c.027.96-.693 1.734-1.84 1.734-1.067 0-1.76-.774-1.76-1.734C8.5 8.747 9.22 8 10.313 8c1.094 0 1.787.747 1.787 1.733M21.06 24v-6.187c0-1.44-.48-2.426-1.733-2.426-.934 0-1.494.666-1.76 1.306-.08.24-.107.56-.107.88V24h-3.413v-7.6c0-1.387-.054-2.56-.08-3.573h2.96l.16 1.573h.053c.453-.747 1.573-1.813 3.413-1.813 2.24 0 3.947 1.52 3.947 4.826V24h-3.44"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.footer {
|
||||
height: 220px;
|
||||
min-width: @main-width;
|
||||
background: rgba(0, 0, 0, 1);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
font-size: @font-size-small;
|
||||
padding: 0 150px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
&-content-column {
|
||||
padding: 0 40px;
|
||||
height: 100px;
|
||||
.title {
|
||||
color: @secondary-text-color;
|
||||
}
|
||||
&:last-child {
|
||||
width: 340px;
|
||||
padding: 0 80px;
|
||||
}
|
||||
& + & {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
border-left: 1px solid @border-dark-color;
|
||||
}
|
||||
|
||||
&__contact {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.contact-item {
|
||||
border-radius: 50%;
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
307
src/components/header.vue
Normal file
307
src/components/header.vue
Normal file
@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<div class="header" :class="[{ fixedToTop }, themeColor]" ref="header">
|
||||
<div class="logo">
|
||||
<a href="/">
|
||||
<logo :is-transparent="themeColor === 'is-transparent'"></logo>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="navbar">
|
||||
<router-link to="/" exact v-slot="{ href, navigate, isActive }">
|
||||
<li class="navbar-item" :class="{ active: isActive }">
|
||||
<a :href="href" @click="navigate">主页</a>
|
||||
</li>
|
||||
</router-link>
|
||||
<router-link exact to="/jobs" v-slot="{ href, navigate, isActive }">
|
||||
<li class="navbar-item" :class="{ active: isActive }">
|
||||
<a :href="href" @click="navigate">职位</a>
|
||||
</li>
|
||||
</router-link>
|
||||
<router-link to="/products" v-slot="{ href, navigate, isActive }">
|
||||
<li class="navbar-item" :class="{ active: isActive }">
|
||||
<a :href="href" @click="navigate">产品与服务</a>
|
||||
</li>
|
||||
</router-link>
|
||||
<li class="navbar-item">
|
||||
<a href="https://job.bytedance.com/campus" target="_blank">校园招聘</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
||||
<div class="user">
|
||||
<div class="login">
|
||||
<router-link to="/login" v-slot="{ href, navigate, isActive }">
|
||||
<li class="navbar-item" :class="{ active: isActive }">
|
||||
<a v-if="!username" :href="href" @click="navigate">登录</a>
|
||||
<el-dropdown v-if="username">
|
||||
<span class="el-dropdown-link">
|
||||
{{ username }}
|
||||
<el-icon class="el-icon--right">
|
||||
<arrow-down/>
|
||||
</el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>个人简历</el-dropdown-item>
|
||||
<el-dropdown-item>应聘记录</el-dropdown-item>
|
||||
<el-dropdown-item @click="logout">退出</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</li>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!-- <div class="dropdown-menu" v-else>-->
|
||||
<!-- <span class="dropdown-menu__email">-->
|
||||
<!-- {{ state.userInfo.email }}-->
|
||||
<!-- <i class="arrow"></i>-->
|
||||
<!-- </span>-->
|
||||
<!-- <ul class="dropdown-menu__wrapper">-->
|
||||
<!-- <li class="dropdown-menu__item">-->
|
||||
<!-- <router-link to="/resume">我的简历</router-link>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li class="dropdown-menu__item" @click="handleLogout">退出</li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {useStore} from 'vuex'
|
||||
import {toRefs, getCurrentInstance, computed, ref} from "vue";
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
const store = useStore()
|
||||
const router = useRouter()
|
||||
const {proxy} = getCurrentInstance()
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
themeColor: {
|
||||
type: String,
|
||||
default: 'main-color'
|
||||
},
|
||||
fixedToTop: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const logout = () => {
|
||||
ElNotification({
|
||||
title: 'Success',
|
||||
message: '退出成功',
|
||||
type: 'success',
|
||||
offset: 100,
|
||||
})
|
||||
store.commit('LOGOUT')
|
||||
}
|
||||
|
||||
const username = computed(() => {
|
||||
return store.state.username
|
||||
})
|
||||
|
||||
const {themeColor, fixedToTop} = toRefs(props)
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.header {
|
||||
color: #aaa;
|
||||
display: flex;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
padding: 10px 100px;
|
||||
min-width: 900px;
|
||||
|
||||
&.fixedToTop {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.main-color {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-bottom: 1px solid #eff0f1;
|
||||
|
||||
a {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.navbar-item {
|
||||
|
||||
&:hover {
|
||||
a {
|
||||
color: @main-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
a {
|
||||
color: @main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login {
|
||||
.navbar-item {
|
||||
|
||||
.el-dropdown span {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
a {
|
||||
color: @main-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
a {
|
||||
color: @main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-transparent {
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-item {
|
||||
|
||||
.el-dropdown span {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
|
||||
a {
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin-left: auto;
|
||||
margin-right: 20px;
|
||||
|
||||
display: flex;
|
||||
|
||||
&-item {
|
||||
padding: 4px 0;
|
||||
margin: 0 20px;
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid;
|
||||
color: @main-color;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
margin-left: 40px;
|
||||
position: relative;
|
||||
|
||||
.el-dropdown {
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
transition: color 0.3s;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.arrow {
|
||||
display: inline-block;
|
||||
border: 1px solid;
|
||||
border-width: 1px 1px 0 0;
|
||||
transform: rotate(135deg);
|
||||
transform-origin: center;
|
||||
vertical-align: 5px;
|
||||
margin-left: 5px;
|
||||
transition: all 0.3s;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.arrow {
|
||||
transform: rotate(-45deg);
|
||||
vertical-align: -3px;
|
||||
}
|
||||
|
||||
.dropdown-menu__wrapper {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
|
||||
&__email {
|
||||
line-height: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
position: absolute;
|
||||
display: none;
|
||||
right: 0;
|
||||
color: @regular-text-color;
|
||||
padding: 9px 0;
|
||||
width: 200px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0px 2px 1px #eee;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
&__item {
|
||||
padding: 9px 12px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: #efefef58;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.github-project {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.example-showcase .el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
56
src/components/message/index.js
Normal file
56
src/components/message/index.js
Normal file
@ -0,0 +1,56 @@
|
||||
import Vue from "vue";
|
||||
import Message from "./main";
|
||||
import { defaults } from "./main";
|
||||
import { pick } from "@/helper/utilities.js";
|
||||
const MessageCtor = Vue.extend(Message);
|
||||
|
||||
const queue = [];
|
||||
let index = 0;
|
||||
|
||||
MessageCtor.prototype.close = function() {
|
||||
this.$destroy();
|
||||
this.$el.addEventListener("animationend", () => {
|
||||
this.$el.remove();
|
||||
});
|
||||
|
||||
let targetIndex = queue.indexOf(this);
|
||||
let removedHeight = this.$el.offsetHeight;
|
||||
|
||||
if (targetIndex < 0) return;
|
||||
for (let i = targetIndex + 1; i < queue.length; i++) {
|
||||
const dom = queue[i].$el;
|
||||
dom.style.top = parseInt(dom.style.top, 10) - removedHeight + 13 + "px";
|
||||
}
|
||||
queue.splice(targetIndex, 1);
|
||||
};
|
||||
|
||||
export default function createMessage(opts = {}) {
|
||||
const instance = new MessageCtor({ data: pick(opts, Object.keys(defaults)) });
|
||||
instance.index = ++index;
|
||||
instance.$mount();
|
||||
queue.forEach((item) => {
|
||||
instance.offsetTop += item.$el.offsetHeight + 13;
|
||||
});
|
||||
queue.push(instance);
|
||||
|
||||
document.body.appendChild(instance.$el);
|
||||
setTimeout(() => {
|
||||
instance.close();
|
||||
}, instance.duration);
|
||||
return instance;
|
||||
}
|
||||
createMessage.install = (Vue) => {
|
||||
Vue.prototype.$message = createMessage;
|
||||
|
||||
["warning", "error", "success"].forEach((type) => {
|
||||
createMessage[type] = function(opts = {}) {
|
||||
if (typeof opts === "string") {
|
||||
opts = {
|
||||
message: opts,
|
||||
};
|
||||
}
|
||||
opts.type = type;
|
||||
return createMessage(opts);
|
||||
};
|
||||
});
|
||||
};
|
||||
128
src/components/message/main.vue
Normal file
128
src/components/message/main.vue
Normal file
@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div
|
||||
|
||||
class="message"
|
||||
:class="[type]"
|
||||
:style="positionStyle"
|
||||
>
|
||||
<div class="message-outer">
|
||||
<span class="message__icon">
|
||||
<i :class="[`el-icon-${type}`, `message__icon--${type}`]"></i>
|
||||
</span>
|
||||
<div class="message-inner">
|
||||
{{ message }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export const defaults = {
|
||||
message: "",
|
||||
type: "success",
|
||||
|
||||
duration: 3000,
|
||||
offsetTop: 30,
|
||||
};
|
||||
export default {
|
||||
data() {
|
||||
return defaults;
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$el.classList.add("slideUp");
|
||||
},
|
||||
mounted() {
|
||||
this.$el.classList.add("slideDown");
|
||||
},
|
||||
|
||||
computed: {
|
||||
positionStyle() {
|
||||
return {
|
||||
top: this.offsetTop + "px",
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@success-color: #34c724;
|
||||
@success-color-bg: #f0fbef;
|
||||
@error-color: #f56c6c;
|
||||
@error-color-bg: #fef1f1;
|
||||
@warning-color: #e6a23c;
|
||||
@warning-color-bg: #fdf6ec;
|
||||
|
||||
@animatin-duration: 0.4s;
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
transform: translate(-50%, -100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-bottom: 20px;
|
||||
padding: 5px 15px;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
max-width: 300px;
|
||||
min-width: 100px;
|
||||
border-radius: 9px;
|
||||
text-align: center;
|
||||
animation-duration: @animatin-duration;
|
||||
transition: all @animatin-duration;
|
||||
z-index: 99999;
|
||||
&__icon {
|
||||
font-size: 30px;
|
||||
&--success {
|
||||
color: @success-color;
|
||||
}
|
||||
&--error {
|
||||
color: @error-color;
|
||||
}
|
||||
&--warning {
|
||||
color: @warning-color;
|
||||
}
|
||||
}
|
||||
&.slideDown {
|
||||
animation-name: slideDown;
|
||||
}
|
||||
&.slideUp {
|
||||
animation-name: slideUp;
|
||||
}
|
||||
&.success {
|
||||
border: 1px solid @success-color;
|
||||
background-color: @success-color-bg;
|
||||
}
|
||||
&.warning {
|
||||
background-color: @warning-color-bg;
|
||||
border: 1px solid @warning-color;
|
||||
}
|
||||
&.error {
|
||||
background-color: @error-color-bg;
|
||||
border: 1px solid @error-color;
|
||||
}
|
||||
&-outer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&-inner {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
42
src/components/popup-progress/index.js
Normal file
42
src/components/popup-progress/index.js
Normal file
@ -0,0 +1,42 @@
|
||||
import Vue from "vue";
|
||||
import Progressbar from "./main.vue";
|
||||
|
||||
let singleProgress;
|
||||
const ProgressbarCtor = Vue.extend(Progressbar);
|
||||
ProgressbarCtor.prototype.close = function() {
|
||||
singleProgress = null;
|
||||
this.visible = false;
|
||||
this.value = 0;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$destroy();
|
||||
});
|
||||
};
|
||||
|
||||
function pick(obj = {}, keys = []) {
|
||||
const result = {};
|
||||
keys.forEach((key) => {
|
||||
result[key] = obj[key];
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
function createPopupProgress(opts = {}) {
|
||||
if (singleProgress) return singleProgress;
|
||||
|
||||
singleProgress = new ProgressbarCtor({
|
||||
data: pick(opts, Object.keys(opts)),
|
||||
});
|
||||
|
||||
singleProgress.$mount();
|
||||
document.body.appendChild(singleProgress.$el);
|
||||
|
||||
singleProgress.visible = true;
|
||||
return singleProgress;
|
||||
}
|
||||
|
||||
export default {
|
||||
install(Vue) {
|
||||
Vue.prototype.$popupProgress = createPopupProgress;
|
||||
},
|
||||
};
|
||||
129
src/components/popup-progress/main.vue
Normal file
129
src/components/popup-progress/main.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<transition name="fade">
|
||||
<div class="popup" v-if="visible">
|
||||
<!-- 遮罩 -->
|
||||
<div class="popup-mask"></div>
|
||||
<div class="popup-model">
|
||||
<div class="popup-fileicon" v-if="fileicon">
|
||||
<file-icon :file-type="fileicon"></file-icon>
|
||||
</div>
|
||||
<!-- 标题 -->
|
||||
<h3 class="popup-title">{{ title }}</h3>
|
||||
<!-- 进度条 -->
|
||||
<div class="popup-progressbar">
|
||||
<div ref="track" class="popup-progressbar__track">
|
||||
<div :style="sliderStyle" class="popup-progressbar__inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 取消按钮 -->
|
||||
<div class="popup-cancelBtn" @click="abort">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileIcon from "@/components/File-Icon";
|
||||
export default {
|
||||
components: { FileIcon },
|
||||
data() {
|
||||
return {
|
||||
title: "",
|
||||
value: 0,
|
||||
visible: false,
|
||||
fileicon: "",
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
sliderStyle() {
|
||||
let percentage = Math.max(0, Math.min(100, this.value));
|
||||
|
||||
return {
|
||||
width: percentage + "%",
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
abort() {
|
||||
this.close();
|
||||
this.$emit("abort");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.popup {
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&-mask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
&-model {
|
||||
padding: 30px;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
width: 400px;
|
||||
}
|
||||
&-fileicon {
|
||||
width: 50px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
&-progressbar {
|
||||
margin: 12px 0;
|
||||
&__track {
|
||||
position: relative;
|
||||
width: 70%;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
background: @bg-base-color;
|
||||
}
|
||||
&__inner {
|
||||
height: 7px;
|
||||
transition: width 0.9s;
|
||||
background: @main-color;
|
||||
}
|
||||
}
|
||||
&-cancelBtn {
|
||||
cursor: pointer;
|
||||
color: @main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-leave-to {
|
||||
.popup-model {
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.3s;
|
||||
.popup-model {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
3
src/helper/EventBus/index.js
Normal file
3
src/helper/EventBus/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import mitt from "mitt";
|
||||
|
||||
export default mitt()
|
||||
87
src/helper/utilities.js
Normal file
87
src/helper/utilities.js
Normal file
@ -0,0 +1,87 @@
|
||||
export const watchScrollDirection = function(scrollElement, callback) {
|
||||
const scrollPos = { x: 0, y: 0 };
|
||||
const scrollDirection = {
|
||||
directionX: 1,
|
||||
directionY: 1,
|
||||
};
|
||||
let previousTimer;
|
||||
function onScroll(e) {
|
||||
const scrollTop = scrollElement.scrollTop || scrollElement.pageYOffset;
|
||||
const scrollLeft = scrollElement.scrollLeft || scrollElement.pageXOffset;
|
||||
|
||||
if (scrollPos.y > scrollTop) {
|
||||
scrollDirection.directionY = -1;
|
||||
} else {
|
||||
scrollDirection.directionY = 1;
|
||||
}
|
||||
if (scrollPos.x > scrollLeft) {
|
||||
scrollDirection.directionX = -1;
|
||||
} else {
|
||||
scrollDirection.directionX = 1;
|
||||
}
|
||||
|
||||
callback.call(scrollElement, scrollDirection, scrollPos);
|
||||
|
||||
scrollPos.x = scrollLeft;
|
||||
scrollPos.y = scrollTop;
|
||||
}
|
||||
function throttle() {
|
||||
let now = Date.now();
|
||||
if (!previousTimer) previousTimer = now;
|
||||
if (now - previousTimer > 30) {
|
||||
onScroll();
|
||||
previousTimer = now;
|
||||
}
|
||||
}
|
||||
scrollElement.addEventListener("scroll", throttle);
|
||||
return function() {
|
||||
scrollElement.removeEventListener("scroll", throttle);
|
||||
};
|
||||
};
|
||||
|
||||
export function formatDate(date, format = true) {
|
||||
date = new Date(date);
|
||||
if (Number.isNaN(date.getTime())) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const Y = date.getFullYear();
|
||||
const M = (parseInt(date.getMonth()) + 1).toString().padStart(2, 0);
|
||||
const d = date
|
||||
.getDate()
|
||||
.toString()
|
||||
.padStart(2, 0);
|
||||
const h = date
|
||||
.getHours()
|
||||
.toString()
|
||||
.padStart(2, 0);
|
||||
const m = date
|
||||
.getMinutes()
|
||||
.toString()
|
||||
.padStart(2, 0);
|
||||
const s = date
|
||||
.getSeconds()
|
||||
.toString()
|
||||
.padStart(2, 0);
|
||||
|
||||
return format ? `${Y}-${M}-${d} ${h}:${m}:${s}` : `${Y}-${M}-${d}`;
|
||||
}
|
||||
|
||||
export function getOffsetTop(relativeNode, node, topSum = 0) {
|
||||
topSum += node.offsetTop;
|
||||
|
||||
if (node.offsetParent !== relativeNode) {
|
||||
return getOffsetTop(relativeNode, node.offsetParent, topSum);
|
||||
}
|
||||
return topSum;
|
||||
}
|
||||
|
||||
export function pick(obj = {}, keys = []) {
|
||||
const result = {};
|
||||
keys.forEach((key) => {
|
||||
if (obj.hasOwnProperty(key)) {
|
||||
result[key] = obj[key];
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
22
src/main.js
Normal file
22
src/main.js
Normal file
@ -0,0 +1,22 @@
|
||||
import {createApp} from 'vue'
|
||||
import App from './App.vue'
|
||||
import "./assets/style/reset.css";
|
||||
import "./assets/style/global.css";
|
||||
import router from './router'
|
||||
import store from "./store";
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
import api from './api/api.js'
|
||||
|
||||
|
||||
// import Loading from "./components/Loading/main";
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(router).use(store)
|
||||
// app.use(Loading)
|
||||
app.config.globalProperties.$api = api
|
||||
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
|
||||
app.mount('#app')
|
||||
47
src/router/index.js
Normal file
47
src/router/index.js
Normal file
@ -0,0 +1,47 @@
|
||||
import {createRouter, createWebHashHistory} from "vue-router";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: () => import('../views/Home/Home.vue')
|
||||
},
|
||||
{
|
||||
path: '/jobs',
|
||||
name: 'jobs',
|
||||
component: () => import('../views/Jobs/Jobs.vue')
|
||||
},
|
||||
{
|
||||
path: '/jobs/:id',
|
||||
name: 'jobDetail',
|
||||
component: () => import('../views/JobDetail/JobDetail.vue')
|
||||
},
|
||||
{
|
||||
path: '/staff-stories/:id',
|
||||
name: 'staff-stories',
|
||||
component: () => import('../views/StaffStories/StaffStories.vue')
|
||||
},
|
||||
{
|
||||
path: '/products',
|
||||
name: 'products',
|
||||
component: () => import('../views/Products/Products.vue')
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
name: 'user',
|
||||
component: () => import('../views/User/User.vue')
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('../views/Login/Login.vue')
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
39
src/store/index.js
Normal file
39
src/store/index.js
Normal file
@ -0,0 +1,39 @@
|
||||
import {createStore} from "vuex";
|
||||
|
||||
export default createStore({
|
||||
state: {
|
||||
userid: localStorage.getItem('userid') || '',
|
||||
username: localStorage.getItem('username') || '',
|
||||
token: localStorage.getItem('token') || '',
|
||||
role: localStorage.getItem('role') || '',
|
||||
},
|
||||
|
||||
mutations: {
|
||||
LOGIN(state, {userid, username, token, role}) {
|
||||
state.userid = userid
|
||||
state.username = username
|
||||
state.token = token
|
||||
state.role = role
|
||||
|
||||
localStorage.setItem('userid', userid)
|
||||
localStorage.setItem('username', username)
|
||||
localStorage.setItem('token', token)
|
||||
localStorage.setItem('role', role)
|
||||
},
|
||||
|
||||
LOGOUT(state, context) {
|
||||
state.userid = ''
|
||||
state.username = ''
|
||||
state.token = ''
|
||||
state.role = ''
|
||||
localStorage.removeItem('userid')
|
||||
localStorage.removeItem('username')
|
||||
localStorage.removeItem('token')
|
||||
localStorage.removeItem('role')
|
||||
}
|
||||
},
|
||||
|
||||
getters: {
|
||||
|
||||
}
|
||||
})
|
||||
29
src/test/test.js
Normal file
29
src/test/test.js
Normal file
@ -0,0 +1,29 @@
|
||||
// function add(n) {
|
||||
//
|
||||
// function temp(b=0) {
|
||||
// n = n + b
|
||||
// if (b) {
|
||||
// return temp
|
||||
// } else {
|
||||
// return n
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// return temp
|
||||
// }
|
||||
//
|
||||
// console.log(add(1)(2)(3)())
|
||||
|
||||
// var sum = 0
|
||||
// function add(x) {
|
||||
//
|
||||
// if (x) {
|
||||
// sum += x
|
||||
// return add
|
||||
//
|
||||
// } else {
|
||||
// return sum
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
913
src/views/Home/Home.vue
Normal file
913
src/views/Home/Home.vue
Normal file
File diff suppressed because one or more lines are too long
220
src/views/JobDetail/JobDetail.vue
Normal file
220
src/views/JobDetail/JobDetail.vue
Normal file
@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div class="job-detail">
|
||||
<h1 class="job-detail-title">{{ jobDetail.title }}</h1>
|
||||
<div class="job-detail-subTitle" v-if="jobDetail.id">
|
||||
<span class="city_info">{{ jobDetail.city_info.name }}</span
|
||||
> |
|
||||
<span class="job_category">{{ jobDetail.job_category.name }}</span
|
||||
> |
|
||||
<span class="recruit_type">{{ jobDetail.recruit_type.name }}</span>
|
||||
</div>
|
||||
<div class="job-detail-description job-detail-block">
|
||||
<h2>职位描述</h2>
|
||||
<pre class="textContent">{{ jobDetail.description }}</pre>
|
||||
</div>
|
||||
<div class="job-detail-requirement job-detail-block">
|
||||
<h2>职位要求</h2>
|
||||
<pre class="textContent">{{ jobDetail.requirement }}</pre>
|
||||
</div>
|
||||
<div class="job-detail-button job-detail-block">
|
||||
<bytedance-button @click="delivery" size="large">投递</bytedance-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import BytedanceButton from '../../components/Bytedance-Button.vue'
|
||||
import {reactive, getCurrentInstance} from "vue";
|
||||
import {useStore} from "vuex";
|
||||
import {useRoute} from "vue-router";
|
||||
|
||||
const {proxy} = getCurrentInstance()
|
||||
|
||||
// 加载动画（有问题）
|
||||
// let loading = proxy.$loading({ position: { top: 60 } })
|
||||
// setTimeout(() => {
|
||||
// loading.close()
|
||||
// })
|
||||
const jobDetail = reactive({
|
||||
"id": "7225929779840829752",
|
||||
"title": "国际化广告算法工程师-App Ads与游戏",
|
||||
"sub_title": "",
|
||||
"description": "1、负责广告投放中定向、召回、粗排、精排、出价各个阶段模型和策略的改进，极致优化变现效率和客户体验；\n2、利用业界最先进的手段，持续优化深度转化模型，极致提升LTV、付费率、留存率的预估准确度；\n3、探索并落地联邦学习、多方计算等前沿技术，持续提升隐私保护环境下的广告投放效果；\n4、深入了解行业痛点，利用策略和模型的手段，从广告主诉求视角出发，探索最新的商业变现技术和商业产品设计。",
|
||||
"requirement": "1、良好的数据结构、数理统计和概率论等基础；优秀的编码能力，熟练掌握C++/Go更佳；\n2、扎实的机器学习/深度学习理论基础，熟练掌握至少一种主流深度学习编程框架；\n3、较好的产品意识，愿意将产品效果作为工作最重要的驱动因素；\n4、有deep model在广告和推荐业务经验者优先。",
|
||||
"job_category": {
|
||||
"id": "6704215862603155720",
|
||||
"name": "研发",
|
||||
"en_name": "R&D",
|
||||
"i18n_name": "研发",
|
||||
"depth": 1,
|
||||
"parent": null,
|
||||
"children": null
|
||||
},
|
||||
"city_info": {
|
||||
"code": "CT_11",
|
||||
"name": "北京",
|
||||
"en_name": "Beijing",
|
||||
"location_type": null,
|
||||
"i18n_name": "北京",
|
||||
"py_name": null,
|
||||
"mdm_code": null
|
||||
},
|
||||
"recruit_type": {
|
||||
"id": "101",
|
||||
"name": "正式",
|
||||
"en_name": "Regular",
|
||||
"i18n_name": "正式",
|
||||
"depth": 2,
|
||||
"parent": {
|
||||
"id": "1",
|
||||
"name": "社招",
|
||||
"en_name": "Experienced",
|
||||
"i18n_name": "社招",
|
||||
"depth": 1,
|
||||
"parent": null,
|
||||
"children": null,
|
||||
"active_status": 1,
|
||||
"selectability": 1
|
||||
},
|
||||
"children": null,
|
||||
"active_status": 1,
|
||||
"selectability": 1
|
||||
},
|
||||
"publish_time": 1682418035000,
|
||||
"delivery_info_id": null,
|
||||
"channel_online_status": 1,
|
||||
"job_hot_flag": 2,
|
||||
"job_subject": null,
|
||||
"code": "A73289",
|
||||
"department_id": null,
|
||||
"job_function": null,
|
||||
"job_id": "7216268434823891237",
|
||||
"city_list": [{
|
||||
"code": "CT_11",
|
||||
"name": "北京",
|
||||
"en_name": "Beijing",
|
||||
"location_type": 3,
|
||||
"i18n_name": "北京",
|
||||
"py_name": "beijing",
|
||||
"mdm_code": null
|
||||
}],
|
||||
"job_post_info": {
|
||||
"id": null,
|
||||
"job_id": null,
|
||||
"title": null,
|
||||
"sub_title": null,
|
||||
"address_id": null,
|
||||
"address": null,
|
||||
"city": null,
|
||||
"education": null,
|
||||
"experience": null,
|
||||
"description": null,
|
||||
"requirement": null,
|
||||
"min_salary": null,
|
||||
"max_salary": null,
|
||||
"currency": null,
|
||||
"head_count": null,
|
||||
"crator_id": null,
|
||||
"expiry_time": null,
|
||||
"progress": null,
|
||||
"department_id": null,
|
||||
"job_type": null,
|
||||
"recruitment_type": {
|
||||
"id": "101",
|
||||
"name": "正式",
|
||||
"en_name": "Regular",
|
||||
"i18n_name": "正式",
|
||||
"depth": 2,
|
||||
"parent": {
|
||||
"id": "1",
|
||||
"name": "社招",
|
||||
"en_name": "Experienced",
|
||||
"i18n_name": "社招",
|
||||
"depth": 1,
|
||||
"parent": null,
|
||||
"children": null,
|
||||
"active_status": 1,
|
||||
"selectability": 1
|
||||
},
|
||||
"children": null,
|
||||
"active_status": 1,
|
||||
"selectability": 1
|
||||
},
|
||||
"job_process_time": null,
|
||||
"job_in_charge_user_id": null,
|
||||
"biz_create_time": null,
|
||||
"HighlightList": null,
|
||||
"JobChannelPublishList": null,
|
||||
"required_degree": null,
|
||||
"never_expiry": null,
|
||||
"job_hot_flag": null,
|
||||
"subject": null,
|
||||
"sequence": null,
|
||||
"min_level": null,
|
||||
"max_level": null,
|
||||
"job_post_object_value_map": {"7154429338292128008": "", "7154429338292144392": ""},
|
||||
"code": null,
|
||||
"job_active_status": null,
|
||||
"job_process_type": null,
|
||||
"biz_modify_time": null,
|
||||
"job_function": null,
|
||||
"job_process": null,
|
||||
"job_process_id": null,
|
||||
"job_category": null,
|
||||
"address_list": null,
|
||||
"city_list": null,
|
||||
"correlation_job_list": null,
|
||||
"tag_list": null,
|
||||
"department": null
|
||||
},
|
||||
"city_info_list_for_delivery": null
|
||||
})
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
|
||||
const id = route.params.id
|
||||
const delivery = () => {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: '该功能还在开发中'
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.job-detail {
|
||||
width: 800px;
|
||||
|
||||
margin: auto;
|
||||
margin-top: 100px;
|
||||
line-height: 2em;
|
||||
|
||||
&-subTitle {
|
||||
font-size: @font-size-base;
|
||||
color: @primary-text-color;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
&-description {
|
||||
.textContent {
|
||||
white-space: pre-line;
|
||||
}
|
||||
}
|
||||
|
||||
&-block {
|
||||
h2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
margin: 40px 0;
|
||||
|
||||
.textContent {
|
||||
font-size: @font-size-base;
|
||||
color: @primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-button {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
3117
src/views/Jobs/Jobs.vue
Normal file
3117
src/views/Jobs/Jobs.vue
Normal file
File diff suppressed because it is too large
Load Diff
325
src/views/Login/Login.vue
Normal file
325
src/views/Login/Login.vue
Normal file
@ -0,0 +1,325 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="login-box" v-if="isLogin">
|
||||
<div class="title">用户名登录</div>
|
||||
<div class="input">
|
||||
<input type="text" id="login-user" placeholder="用户名" v-model="loginForm.username">
|
||||
</div>
|
||||
<div class="input">
|
||||
<input type="password" id="login-password" placeholder="密码" v-model="loginForm.password">
|
||||
</div>
|
||||
<div class="btn login-btn" @click="loginButton">
|
||||
<span>登录</span>
|
||||
</div>
|
||||
<div class="change-box">
|
||||
<div class="change-btn">
|
||||
<span>没有帐号? <a href="#" @click.prevent="changeLogin">创建帐号</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-box" v-if="!isLogin">
|
||||
<div class="title">用户名注册</div>
|
||||
<div class="input">
|
||||
<input type="text" id="login-user" placeholder="用户名" v-model="signForm.username">
|
||||
</div>
|
||||
<div class="input">
|
||||
<input type="password" id="login-password" placeholder="密码" v-model="signForm.password">
|
||||
</div>
|
||||
<div class="input">
|
||||
<input type="password" id="login-repassword" placeholder="确认密码" v-model="signForm.rePassword">
|
||||
</div>
|
||||
<div class="btn login-btn" @click="signButton">
|
||||
<span>注册</span>
|
||||
</div>
|
||||
<div class="change-box">
|
||||
<div class="change-btn">
|
||||
<span>已有帐号? <a href="#" @click.prevent="changeLogin">去登录</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {reactive, ref, getCurrentInstance} from 'vue'
|
||||
import {useStore} from "vuex";
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
const isLogin = ref(true)
|
||||
// 拿到proxy对象，相当于Vue2中的this
|
||||
const {proxy} = getCurrentInstance()
|
||||
const store = useStore()
|
||||
const router = useRouter()
|
||||
|
||||
// 登录数据
|
||||
const loginForm = reactive({
|
||||
username: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
const signForm = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
rePassword: '',
|
||||
})
|
||||
|
||||
// 登录事件
|
||||
const loginButton = async () => {
|
||||
let res = await proxy.$api.login(loginForm)
|
||||
ElNotification({
|
||||
title: 'Success',
|
||||
message: res.msg,
|
||||
type: 'success',
|
||||
offset: 100,
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
store.commit('LOGIN', res)
|
||||
router.push({
|
||||
name: 'home'
|
||||
})
|
||||
}, 500)
|
||||
|
||||
}
|
||||
|
||||
// 注册事件
|
||||
const signButton = async () => {
|
||||
let res = await proxy.$api.sign(signForm)
|
||||
ElNotification({
|
||||
title: 'Success',
|
||||
message: res.msg,
|
||||
type: 'success',
|
||||
offset: 100,
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
store.commit('LOGIN', res)
|
||||
router.push({
|
||||
name: 'home'
|
||||
})
|
||||
}, 500)
|
||||
}
|
||||
|
||||
// 字节Logo
|
||||
// const svg = `
|
||||
// <path d="M75.1 4.402c.32.333.48.765.48 1.284 0 .523-.16.956-.48 1.288-.318.33-.73.497-1.227.497-.496 0-.908-.167-1.226-.495-.32-.33-.48-.763-.48-1.29 0-.523.161-.956.48-1.286.318-.331.73-.498 1.226-.498.497 0 .909.168 1.227.5zm.5-.725a2.444 2.444 0 0 0-.71-.529 2.577 2.577 0 0 0-1.142-.254c-.817 0-1.484.258-1.984.77-.499.51-.751 1.187-.751 2.013 0 .38.064.74.19 1.066.127.327.318.624.568.884a2.735 2.735 0 0 0 1.977.833c.42 0 .797-.08 1.124-.24.248-.12.468-.288.66-.5v.673h1.114V2.995H75.6v.682zM80.074 2.894c-.304 0-.592.06-.856.18-.201.091-.398.22-.586.386v-.465h-1.104v5.397h1.104V5.41c0-.511.109-.898.323-1.148.21-.245.533-.37.96-.37.373 0 .638.112.81.34.174.235.262.619.262 1.14v3.02h1.115V5.28c0-.733-.182-1.32-.541-1.742-.363-.428-.863-.644-1.487-.644M86.566 6.967c-.14.177-.308.312-.504.402-.197.09-.428.136-.687.136-.482 0-.862-.164-1.163-.5-.3-.335-.452-.775-.452-1.309 0-.534.154-.977.456-1.316.305-.342.684-.507 1.159-.507.243 0 .463.04.651.12.188.08.357.206.504.374l.074.084.722-.834-.071-.064a2.583 2.583 0 0 0-.847-.518 2.996 2.996 0 0 0-1.033-.17c-.398 0-.768.066-1.1.197-.335.133-.632.33-.88.586a2.7 2.7 0 0 0-.6.924 3.077 3.077 0 0 0-.203 1.124c0 .4.068.778.203 1.122.134.345.336.655.599.92.247.254.543.45.88.584.336.134.707.201 1.1.201.385 0 .737-.06 1.045-.178.309-.119.606-.309.885-.564l.07-.064-.735-.844-.073.094zM89.474 4.268a1.67 1.67 0 0 1 1.115-.395c.426 0 .792.13 1.088.387.27.234.44.537.51.903h-3.231c.066-.357.24-.657.518-.895zm3.946 1.66c0-.911-.261-1.657-.778-2.216-.518-.563-1.205-.847-2.043-.847-.821 0-1.496.267-2.006.794-.51.526-.767 1.223-.767 2.071 0 .359.062.707.184 1.034.124.328.303.621.534.871.263.284.581.504.948.658.365.153.765.23 1.185.23.508 0 .972-.096 1.379-.285a3.38 3.38 0 0 0 1.123-.881l.066-.077-.814-.654-.062.07c-.232.267-.49.47-.768.606a2.015 2.015 0 0 1-.895.203c-.497 0-.912-.142-1.236-.421-.3-.26-.47-.584-.516-.99h4.466v-.166zM0 7.212v24.726h.002l5.427-1.394V8.606z" fill="#3960AC"></path>
|
||||
// <path fill="#79CBC6" d="M31.645 31.992l-5.429 1.394V5.764l5.429 1.394z"></path>
|
||||
// <path fill="#4882C2" d="M8.608 32.689l5.428-1.394V19.521l-5.428-1.394z"></path>
|
||||
// <path fill="#2CBDC3" d="M17.585 15.971l5.43-1.394V29.14l-5.43-1.394z"></path>
|
||||
// `
|
||||
|
||||
// eleLogo
|
||||
const svg = `
|
||||
<path class="path" d="
|
||||
M 30 15
|
||||
L 28 17
|
||||
M 25.61 25.61
|
||||
A 15 15, 0, 0, 1, 15 30
|
||||
A 15 15, 0, 1, 1, 27.99 7.5
|
||||
L 15 15
|
||||
" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
|
||||
`
|
||||
|
||||
const changeLogin = () => {
|
||||
const loadingInstance1 = ElLoading.service({spinner: svg, fullscreen: true})
|
||||
setTimeout(() => {
|
||||
isLogin.value = !isLogin.value
|
||||
loadingInstance1.close()
|
||||
}, 1000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
@keyframes verticalDance {
|
||||
0% {
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
50% {
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.el-loading-spinner .circular {
|
||||
width: 9px;
|
||||
margin: 0 2px;
|
||||
animation-name: verticalDance;
|
||||
animation-duration: 400ms;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
&:first-child {
|
||||
background-color: #2d5fb2;
|
||||
height: 29px;
|
||||
|
||||
animation-delay: -300ms;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
background-color: #3682c7;
|
||||
height: 14px;
|
||||
animation-delay: -400ms;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: -600ms;
|
||||
background-color: #00bfc5;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
animation-delay: -900ms;
|
||||
background-color: #5acec6;
|
||||
height: 29px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, .9);
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
margin-right: 46px;
|
||||
line-height: 33px;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.login-box .title {
|
||||
color: #3370ff;
|
||||
text-shadow: 0 0 7px rgba(255, 255, 255, .9);
|
||||
|
||||
&:after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
border-radius: 3px;
|
||||
background-color: #3370ff;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 480px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
margin: 40px auto;
|
||||
/* border-radius: 45px;
|
||||
overflow: hidden; */
|
||||
}
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #bbbfc4;
|
||||
outline: none;
|
||||
/* box-sizing: border-box; */
|
||||
font-size: 16px;
|
||||
background-color: white;
|
||||
border-radius: 20px;
|
||||
padding-left: 16px;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.login-box input:focus {
|
||||
border-color: #3370ff;
|
||||
border-right-width: 1px !important;
|
||||
}
|
||||
|
||||
.login-box input:hover {
|
||||
border-color: #3370ff;
|
||||
border-right-width: 1px !important;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 40px;
|
||||
width: 480px;
|
||||
position: relative;
|
||||
margin: 20px auto;
|
||||
background-color: #3370ff;
|
||||
border-radius: 20px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: .4s;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.change-box {
|
||||
width: 480px;
|
||||
margin: 20px auto;
|
||||
height: 32px;
|
||||
transition: .4s;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.change-btn {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.change-btn span {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
color: #8f959e;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.change-btn span a {
|
||||
color: #3370ff;
|
||||
}
|
||||
|
||||
.change-btn:hover {
|
||||
text-shadow: 0 0 3px rgba(200, 200, 200, .8);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.login-btn:hover {
|
||||
background: #82a7fc;
|
||||
border-color: #82a7fc;
|
||||
}
|
||||
|
||||
.login-change {
|
||||
background-color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
|
||||
.login-box {
|
||||
height: 686px;
|
||||
width: 520px;
|
||||
margin-top: 120px;
|
||||
transition: .4s;
|
||||
z-index: 1;
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
</style>
|
||||
304
src/views/Products/Products.vue
Normal file
304
src/views/Products/Products.vue
Normal file
@ -0,0 +1,304 @@
|
||||
<template>
|
||||
<div class="product">
|
||||
<ul class="product-fullpage-indicator">
|
||||
<li
|
||||
v-for="(item, index) in products"
|
||||
:key="item.id"
|
||||
class="product-fullpage-indicator-item"
|
||||
:class="{ active: activeIndex === index }"
|
||||
@click="activeIndex = index"
|
||||
>
|
||||
<img :src="item.logo" alt/>
|
||||
</li>
|
||||
</ul>
|
||||
<transition :duration="duration" :name="transitionName">
|
||||
<!-- ... the buttons ... -->
|
||||
<div
|
||||
:key="activeIndex"
|
||||
class="view-wrapper"
|
||||
v-if="!loading"
|
||||
:style="`background-image:url(${item.cover})`"
|
||||
>
|
||||
<div class="content">
|
||||
<div class="logo">
|
||||
<img :src="item.logo" width="100%" height="100%" alt/>
|
||||
</div>
|
||||
<h2>{{ item.title }}</h2>
|
||||
<div class="description">{{ item.description }}</div>
|
||||
<div class="subDescription">{{ item.subDescription }}</div>
|
||||
<div class="link">
|
||||
更多信息，请访问：
|
||||
<br/>
|
||||
<span>{{ item.link }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref, watch, getCurrentInstance, onMounted, onUnmounted, computed} from "vue";
|
||||
import {useRoute} from "vue-router";
|
||||
|
||||
const route = useRoute()
|
||||
const {proxy} = getCurrentInstance()
|
||||
// 产品列表
|
||||
const products = ref([
|
||||
{
|
||||
"name": "faceu",
|
||||
"title": "激萌",
|
||||
"logo": "//sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/Faceu2x_1574665474719.png",
|
||||
"cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/jimeng.jpeg",
|
||||
"description": "Faceu激萌，4 亿年轻人都爱用的卖萌自拍神器。",
|
||||
"subDescription": "一款能社交的 AR 相机，海量酷炫贴纸、 激萌表情包 、实时美颜、 趣味特效让聊天姿势更丰富更有趣，满足全方位拍摄需求。累计用户量超过 4 亿， 平均每天为用户提供 1.7 亿次拍摄服务。",
|
||||
"id": 1,
|
||||
"link": "https://www.faceu.com"
|
||||
},
|
||||
{
|
||||
"name": "lightFaceCamera",
|
||||
"title": "轻颜相机",
|
||||
"logo": "https://sf6-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/qingyan_square_logo_1577262252373.png",
|
||||
"cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/qingyan-bg2.jpg",
|
||||
"description": "轻颜相机是一款主打高级感的质感自拍相机，连续霸榜应用商店。拥有时下最流行的滤镜、美颜效果、和海量拍照“姿势”模板，一键就能 get 潮流自拍。",
|
||||
"subDescription": "",
|
||||
"id": 2,
|
||||
"link": "https://m.ulikecam.com/"
|
||||
},
|
||||
{
|
||||
"name": "headNews",
|
||||
"title": "今日头条",
|
||||
"logo": "https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/toutiao_square_logo_1577262251819.png",
|
||||
"cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/toutiao_new_2.png",
|
||||
"description": "今日头条是一款个性化资讯推荐引擎产品，致力于连接人与信息，让优质、丰富的信息得到高效、精准的分发，为用户创造价值。",
|
||||
"subDescription": "今日头条目前拥有科技、体育、健康、美食、教育、三农、国风、NBA 等超过 100 个垂直领域，覆盖了图文、图集、小视频、短视频、短内容、直播、小程序等多种信息体裁。",
|
||||
"id": 3,
|
||||
"link": "https://m.ulikecam.com/"
|
||||
},
|
||||
{
|
||||
"name": "trillShortVideo",
|
||||
"title": "抖音短视频",
|
||||
"logo": "https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/douyin_square_logo_1577262251779.png",
|
||||
"cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/douyin-bg2.jpg",
|
||||
"description": "抖音是一个帮助用户表达自我，记录美好生活的短视频平台。截至 2020 年 1 月，日活跃用户数已经突破 4 亿，并继续保持高速增长。",
|
||||
"subDescription": "",
|
||||
"id": 4,
|
||||
"link": "https://douyin.com/"
|
||||
},
|
||||
{
|
||||
"name": "trillShortVideo",
|
||||
"title": "西瓜视频",
|
||||
"logo": "https://sf6-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/xigua_square_logo_1577262253312.png",
|
||||
"cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/xigua-bg2.jpg",
|
||||
"description": "西瓜视频是字节跳动旗下的一款视频 App，作为聚合多元文化的综合视频平台，它通过个性化推荐，源源不断地为不同人群提供丰富的优质内容，同时鼓励多样化创作，帮助人们轻松地向全世界分享视频作品。",
|
||||
"subDescription": "目前西瓜视频累计用户数超过 3.5 亿，日均播放量超过 40 亿。",
|
||||
"id": 5,
|
||||
"link": "https://ixigua.com/"
|
||||
},
|
||||
{
|
||||
"name": "trillShortVideo",
|
||||
"title": "懂车帝",
|
||||
"logo": "https://sf6-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/dongchedi_square_logo_1577262251826.png",
|
||||
"cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/dongche-bg2.jpg",
|
||||
"description": "懂车帝是“看车、选车、买车”一站式汽车媒体和服务平台，产品基于个性化推荐引擎帮助用户发现感兴趣的汽车内容，同时配有车型库、360 度全景看车等选车工具，首创短视频社区“车友圈”，为用户打造内容 + 社区 + 工具的多元生态。目前，懂车帝已经成长为增长最快的汽车类手机应用。",
|
||||
"subDescription": "目前西瓜视频累计用户数超过 3.5 亿，日均播放量超过 40 亿。",
|
||||
"id": 6,
|
||||
"link": "https://www.dongchediapp.com/"
|
||||
},
|
||||
{
|
||||
"name": "gogokid",
|
||||
"logo": "https://sf6-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/gogokid_square_logo_1577262251773.png",
|
||||
"title": "GoGoKid",
|
||||
"id": 7,
|
||||
"description": "GoGokid 是一个面向 4 - 12 岁孩子的在线少儿英语 1 对 1学习平台。主打 100% 纯北美外教；教材对标美国小学主流课标（CCSS），融入 SED（社交情商培养）、多元智能理论，为中国孩子带来高效的英语学习体验。",
|
||||
"cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/gogokid-bg2.jpg",
|
||||
"link": "https://www.gogokid.com.cn"
|
||||
},
|
||||
{
|
||||
"name": "naughtyShrimp",
|
||||
"logo": "https://sf6-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/pipixia_square_logo_1577262251826.png",
|
||||
"title": "皮皮虾",
|
||||
"id": 8,
|
||||
"description": "今日头条官方爆笑社区，一个只要打开就能让你笑到停不下来的 App。",
|
||||
"cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/pipi_new.png",
|
||||
"subDescription": "皮皮虾一直坚持「传播快乐，分享生活」的目标，以特有的「神评」玩法形成了独特的社区氛围。之后，皮皮虾将不断提供更多有趣的功能，帮助用户创造出更多优质的内容。",
|
||||
"link": "https://mp.pipix.com"
|
||||
},
|
||||
{
|
||||
"name": "urgentLetter",
|
||||
"logo": "https://sf6-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/feishu_squre.png",
|
||||
"title": "飞书",
|
||||
"id": 9,
|
||||
"description": "飞书是新一代企业办公套件，整合即时沟通、日历、音视频会议、在线文档、云盘、工作台等功能于一体，为企业提供全方位协作解决方案，成就组织和个人，更高效、更愉悦。",
|
||||
"cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/feishu_bg.jpg",
|
||||
"subDescription": "",
|
||||
"link": "https://www.feishu.com"
|
||||
}
|
||||
])
|
||||
const activeIndex = ref(0)
|
||||
const loading = ref(false)
|
||||
const scrolling = ref(false)
|
||||
const duration = ref(1000)
|
||||
const transitionName = ref("")
|
||||
|
||||
// created生命周期钩子 --- vue3setup
|
||||
// loading.value = true
|
||||
|
||||
if (route.query.id) {
|
||||
activeIndex.value = products.value.findIndex(item => item.id == route.query.id)
|
||||
}
|
||||
|
||||
// 方法
|
||||
const mousewheelHandler = (e) => {
|
||||
if (this.scrolling) {
|
||||
return;
|
||||
}
|
||||
this.scrolling = true;
|
||||
if (e.wheelDelta > 0) {
|
||||
transitionName.value = "move-down";
|
||||
console.log(transitionName.value)
|
||||
activeIndex.value =
|
||||
activeIndex.value === 0
|
||||
? products.value.length - 1
|
||||
: activeIndex.value - 1;
|
||||
} else {
|
||||
transitionName.value = "move-up";
|
||||
console.log(transitionName.value)
|
||||
activeIndex.value = (activeIndex.value + 1) % products.value.length;
|
||||
}
|
||||
setTimeout(() => {
|
||||
scrolling.value = false;
|
||||
}, duration.value);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("mousewheel", mousewheelHandler);
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("mousewheel", mousewheelHandler);
|
||||
})
|
||||
|
||||
watch(activeIndex, (newValue, oldValue) => {
|
||||
|
||||
if (scrolling.value) {
|
||||
return;
|
||||
}
|
||||
if (route.params.id) {
|
||||
delete route.params.id;
|
||||
return;
|
||||
}
|
||||
|
||||
transitionName.value = newValue < oldValue ? "move-down" : "move-up";
|
||||
})
|
||||
|
||||
// 计算属性
|
||||
const item = computed(() => {
|
||||
return products.value[activeIndex.value] || {};
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.move-up-leave-active,
|
||||
.move-up-enter-active,
|
||||
.move-down-leave-active,
|
||||
.move-down-enter-active {
|
||||
transition: all 0.7s;
|
||||
transition-timing-function: cubic-bezier(0.66, 0, 0.34, 1);
|
||||
}
|
||||
.move-up-leave-to,
|
||||
.move-up-enter-from,
|
||||
.move-down-leave-to,
|
||||
.move-down-enter-from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.move-up-leave-to,
|
||||
.move-down-enter-from {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.move-down-leave-to,
|
||||
.move-up-enter-from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.product {
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
top: 60px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
min-height: 500px;
|
||||
min-width: 700px;
|
||||
&-fullpage-indicator {
|
||||
position: absolute;
|
||||
z-index: 333;
|
||||
right: 50px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
&-item {
|
||||
margin: 22px 0;
|
||||
width: 5vh;
|
||||
height: 5vh;
|
||||
min-height: 30px;
|
||||
min-width: 30px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
transform: scale(1.3);
|
||||
|
||||
box-shadow: 0 0 14px 0 @box-shadow-dark-color;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-wrapper {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: absolute;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
// padding-top: 100px;
|
||||
padding-left: 100px;
|
||||
|
||||
.content {
|
||||
width: 300px;
|
||||
transform: translateY(-50%);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
// text-align: center;
|
||||
.logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
h2 {
|
||||
margin: 30px 0;
|
||||
}
|
||||
.description,
|
||||
.subDescription {
|
||||
color: #aaa;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.link {
|
||||
margin-top: 40px;
|
||||
span {
|
||||
color: @main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
93
src/views/StaffStories/StaffStories.vue
Normal file
93
src/views/StaffStories/StaffStories.vue
Normal file
File diff suppressed because one or more lines are too long
11
src/views/User/User.vue
Normal file
11
src/views/User/User.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div>User</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
29
vite.config.js
Normal file
29
vite.config.js
Normal file
@ -0,0 +1,29 @@
|
||||
import {defineConfig} from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
|
||||
import path from "path";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
AutoImport({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
}),
|
||||
Components({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
}),
|
||||
],
|
||||
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
less: {
|
||||
additionalData: `@import "${path.resolve(__dirname, 'src/assets/style/variable.less')}";`,
|
||||
javascriptEnabled: true,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user