init
This commit is contained in:
parent
97df4451e5
commit
5ab60b8e10
3217
package-lock.json
generated
Normal file
3217
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -11,6 +11,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@element-plus/icons-vue": "^2.1.0",
|
"@element-plus/icons-vue": "^2.1.0",
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.4.0",
|
||||||
|
"byte": "file:",
|
||||||
"element-plus": "^2.3.4",
|
"element-plus": "^2.3.4",
|
||||||
"mitt": "^3.0.0",
|
"mitt": "^3.0.0",
|
||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
|
|||||||
1310
pnpm-lock.yaml
generated
1310
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
BIN
public/logo.png
Normal file
BIN
public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
BIN
public/weixin.png
Normal file
BIN
public/weixin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
public/xiaochengxu.jpg
Normal file
BIN
public/xiaochengxu.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
@ -28,6 +28,6 @@ const EnvConfig = {
|
|||||||
export default {
|
export default {
|
||||||
env,
|
env,
|
||||||
// mock总开关
|
// mock总开关
|
||||||
mock: false,
|
mock: true,
|
||||||
...EnvConfig[env]
|
...EnvConfig[env]
|
||||||
}
|
}
|
||||||
@ -1,69 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,111 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,222 +1,32 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
|
<div class="footer-content-column"></div>
|
||||||
<div class="footer-content-column">
|
<div class="footer-content-column">
|
||||||
<logo :is-transparent="true"></logo>
|
<el-image style="width: 200px; height: 40px" src="/public/logo.png" :fit="fit" />
|
||||||
<p class="title">© 2012-2020 北京字节跳动科技有限公司</p>
|
<p>泸州里海农业科技有限公司</p>
|
||||||
<p class="title">京公网安备 11000002002023号 I 京ICP备12025439号-3</p>
|
<p>蜀ICP备2022030133号</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-content-column">
|
<div class="footer-content-column">
|
||||||
<div class="title">联系我们</div>
|
<div class="title">联系我们</div>
|
||||||
<p>关于投递</p>
|
<p>公司地址：四川省泸州市龙马大道一段</p>
|
||||||
<p>关于投递</p>
|
<p>公司邮箱：LIHAIJEJI@163.com</p>
|
||||||
|
<p>联系方式：0830-2669767</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-content-column">
|
<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">
|
<ul class="footer-content-column__contact">
|
||||||
<!-- <li class="contact-item wechat">
|
<li class="contact-item ">
|
||||||
<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>
|
<div class="title" style="padding-bottom: 5px;">公众号</div>
|
||||||
</li>-->
|
<el-image style="width: 110px; height: 110px" src="/public/weixin.png" :fit="fit" />
|
||||||
<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>
|
||||||
<li class="contact-item douyin">
|
<li class="contact-item">
|
||||||
<svg width="33" height="34">
|
<div class="title" style="padding-bottom: 5px;">小程序</div>
|
||||||
<defs>
|
<el-image style="width: 110px; height: 110px" src="/public/xiaochengxu.jpg" :fit="fit" />
|
||||||
<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>
|
||||||
<li class="contact-item toutiao">
|
<li class="contact-item">
|
||||||
<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>
|
||||||
<li class="contact-item lingying">
|
<li class="contact-item">
|
||||||
<svg width="33" height="32">
|
</li>
|
||||||
<defs>
|
<li class="contact-item">
|
||||||
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@ -236,32 +46,29 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
&-content-column {
|
&-content-column {
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
color: @secondary-text-color;
|
color: @secondary-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
width: 340px;
|
width: 340px;
|
||||||
padding: 0 80px;
|
padding: 0 80px;
|
||||||
}
|
}
|
||||||
& + & {
|
|
||||||
|
&+& {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
border-left: 1px solid @border-dark-color;
|
border-left: 1px solid @border-dark-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__contact {
|
&__contact {
|
||||||
margin-top: 20px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.contact-item {
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 33px;
|
|
||||||
height: 33px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<div class="header" :class="[{ fixedToTop }, themeColor]" ref="header">
|
<div class="header" :class="[{ fixedToTop }, themeColor]" ref="header">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<a href="/">
|
<a href="/">
|
||||||
<logo :is-transparent="themeColor === 'is-transparent'"></logo>
|
<el-image style="width: 270px; height: 54px" src="/public/logo.png" :fit="fit" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<ul class="navbar">
|
<ul class="navbar">
|
||||||
@ -11,58 +11,22 @@
|
|||||||
<a :href="href" @click="navigate">主页</a>
|
<a :href="href" @click="navigate">主页</a>
|
||||||
</li>
|
</li>
|
||||||
</router-link>
|
</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 }">
|
<router-link to="/products" v-slot="{ href, navigate, isActive }">
|
||||||
<li class="navbar-item" :class="{ active: isActive }">
|
<li class="navbar-item" :class="{ active: isActive }">
|
||||||
<a :href="href" @click="navigate">产品与服务</a>
|
<a :href="href" @click="navigate">业务板块</a>
|
||||||
</li>
|
</li>
|
||||||
</router-link>
|
</router-link>
|
||||||
<li class="navbar-item">
|
<router-link exact to="/news" v-slot="{ href, navigate, isActive }">
|
||||||
<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 }">
|
<li class="navbar-item" :class="{ active: isActive }">
|
||||||
<a v-if="!username" :href="href" @click="navigate">登录</a>
|
<a :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>
|
</li>
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
<router-link exact to="/about" v-slot="{ href, navigate, isActive }">
|
||||||
|
<li class="navbar-item" :class="{ active: isActive }">
|
||||||
<!-- <div class="dropdown-menu" v-else>-->
|
<a :href="href" @click="navigate">关于我们</a>
|
||||||
<!-- <span class="dropdown-menu__email">-->
|
</li>
|
||||||
<!-- {{ state.userInfo.email }}-->
|
</router-link>
|
||||||
<!-- <i class="arrow"></i>-->
|
</ul>
|
||||||
<!-- </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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|||||||
@ -16,6 +16,16 @@ const routes = [
|
|||||||
name: 'jobDetail',
|
name: 'jobDetail',
|
||||||
component: () => import('../views/JobDetail/JobDetail.vue')
|
component: () => import('../views/JobDetail/JobDetail.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/news',
|
||||||
|
name: 'news',
|
||||||
|
component: () => import('../views/news/index.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/news/:id',
|
||||||
|
name: 'newsDetail',
|
||||||
|
component: () => import('../views/newsDetail/newsDetail.vue')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/staff-stories/:id',
|
path: '/staff-stories/:id',
|
||||||
name: 'staff-stories',
|
name: 'staff-stories',
|
||||||
@ -25,21 +35,6 @@ const routes = [
|
|||||||
path: '/products',
|
path: '/products',
|
||||||
name: 'products',
|
name: 'products',
|
||||||
component: () => import('../views/Products/Products.vue')
|
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')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/test',
|
|
||||||
name: 'test',
|
|
||||||
component: () => import('../views/Test/index.vue')
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@ -1,29 +0,0 @@
|
|||||||
// 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
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
@ -2,22 +2,10 @@
|
|||||||
<div class="jobs">
|
<div class="jobs">
|
||||||
<div class="banner">和优秀的人，做有挑战的事</div>
|
<div class="banner">和优秀的人，做有挑战的事</div>
|
||||||
|
|
||||||
<!-- 搜索 -->
|
|
||||||
<div ref="searchBar" :class="{ fixedTop: searchBarFixedTop }" class="search-wrapper">
|
|
||||||
<input-search
|
|
||||||
:size="searchBarFixedTop ? 'small' : 'medium'"
|
|
||||||
placeholder="搜索职位"
|
|
||||||
v-model="searchKeyword"
|
|
||||||
></input-search>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="main clearfix">
|
<div class="main clearfix">
|
||||||
<!-- 侧边栏过滤选择 -->
|
<!-- 侧边栏过滤选择 -->
|
||||||
<div class="clearfix aside-filter">
|
<div class="clearfix aside-filter">
|
||||||
<div class="header">
|
|
||||||
<span>选择</span>
|
|
||||||
<span :class="{ clearable }" class="clear" @click="clearFilter">清空</span>
|
|
||||||
</div>
|
|
||||||
<div class="job-category job-filter-block">
|
<div class="job-category job-filter-block">
|
||||||
<div class="title"></div>
|
<div class="title"></div>
|
||||||
<checkbox-transfer
|
<checkbox-transfer
|
||||||
@ -79,7 +67,6 @@ import {computed, getCurrentInstance, onMounted, ref, watch} from "vue";
|
|||||||
import {useRoute} from "vue-router";
|
import {useRoute} from "vue-router";
|
||||||
import {getOffsetTop} from "../../helper/utilities.js";
|
import {getOffsetTop} from "../../helper/utilities.js";
|
||||||
import EventBus from "../../helper/EventBus/index.js";
|
import EventBus from "../../helper/EventBus/index.js";
|
||||||
import InputSearch from '../../components/Input-Search.vue'
|
|
||||||
import CheckboxTransfer from "../../components/Checkbox-Transfer.vue";
|
import CheckboxTransfer from "../../components/Checkbox-Transfer.vue";
|
||||||
import Loading from "../../components/Loading/index.js";
|
import Loading from "../../components/Loading/index.js";
|
||||||
|
|
||||||
|
|||||||
@ -1,314 +0,0 @@
|
|||||||
<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";
|
|
||||||
import Loading from "../../components/Loading/index.js";
|
|
||||||
|
|
||||||
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>
|
|
||||||
// `
|
|
||||||
|
|
||||||
const changeLogin = () => {
|
|
||||||
Loading.show()
|
|
||||||
setTimeout(() => {
|
|
||||||
isLogin.value = !isLogin.value
|
|
||||||
Loading.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>
|
|
||||||
@ -26,11 +26,11 @@
|
|||||||
<h2>{{ item.title }}</h2>
|
<h2>{{ item.title }}</h2>
|
||||||
<div class="description">{{ item.description }}</div>
|
<div class="description">{{ item.description }}</div>
|
||||||
<div class="subDescription">{{ item.subDescription }}</div>
|
<div class="subDescription">{{ item.subDescription }}</div>
|
||||||
<div class="link">
|
<!-- <div class="link">
|
||||||
更多信息，请访问：
|
更多信息，请访问：
|
||||||
<br/>
|
<br/>
|
||||||
<span>{{ item.link }}</span>
|
<span>{{ item.link }}</span>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
@ -44,7 +44,14 @@ import {useRoute} from "vue-router";
|
|||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const {proxy} = getCurrentInstance()
|
const {proxy} = getCurrentInstance()
|
||||||
// 产品列表
|
// 产品列表
|
||||||
const products = ref([])
|
const products = ref([
|
||||||
|
{id:1,logo:'https://lf3-cdn-tos.bytescm.com/obj/ttfe/ATSX/mainland/icon_circle/douyin_1577264424752.png',cover:'//lf3-cdn-tos.bytescm.com/obj/ttfe/ATSX/mainland/douyin-bg2.jpg'
|
||||||
|
,description:'抖音',subDescription:'抖音是一个帮助用户表达自我，记录美好生活的短视频平台。截至2021年6月，抖音日活跃用户超过6亿，并继续保持高速增长。'
|
||||||
|
},
|
||||||
|
{id:2,logo:'https://lf3-static.bytednsdoc.com/obj/eden-cn/0eh7lpquhpanuhf/doubaoyuan.png',cover:'//lf3-static.bytednsdoc.com/obj/eden-cn/0eh7lpquhpanuhf/doubao_bg.png'
|
||||||
|
,description:'豆包',subDescription:'豆包是抖音旗下的 AI 智能助手。豆包可以为你搜索信息，答疑解惑，分析总结，提供灵感，辅助创作。豆包的知识渊博，专业可靠，同时也善解人意，需要的时候能够深入浅出。豆包也会倾听你的烦恼和心事，和你畅聊任何你感兴趣的话题。目前，豆包APP已成为中国市场用户量最大的 AIGC 应用。'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
const activeIndex = ref(0)
|
const activeIndex = ref(0)
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
@ -57,10 +64,10 @@ const transitionName = ref("")
|
|||||||
|
|
||||||
// 方法
|
// 方法
|
||||||
const mousewheelHandler = (e) => {
|
const mousewheelHandler = (e) => {
|
||||||
if (this.scrolling) {
|
if (scrolling.value==true) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.scrolling = true;
|
scrolling.value = true;
|
||||||
if (e.wheelDelta > 0) {
|
if (e.wheelDelta > 0) {
|
||||||
transitionName.value = "move-down";
|
transitionName.value = "move-down";
|
||||||
console.log(transitionName.value)
|
console.log(transitionName.value)
|
||||||
@ -108,8 +115,8 @@ const item = computed(() => {
|
|||||||
|
|
||||||
// 获取产品列表
|
// 获取产品列表
|
||||||
const getProductList = async () => {
|
const getProductList = async () => {
|
||||||
let res = await proxy.$api.getProductList({})
|
//let res =[]// await proxy.$api.getProductList({})
|
||||||
products.value = res.data
|
//products.value = res.data
|
||||||
if (route.query.id) {
|
if (route.query.id) {
|
||||||
activeIndex.value = products.value.findIndex(item => item.nid == route.query.id)
|
activeIndex.value = products.value.findIndex(item => item.nid == route.query.id)
|
||||||
}
|
}
|
||||||
@ -205,10 +212,17 @@ const getProductList = async () => {
|
|||||||
h2 {
|
h2 {
|
||||||
margin: 30px 0;
|
margin: 30px 0;
|
||||||
}
|
}
|
||||||
.description,
|
.description {
|
||||||
|
margin-top: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
font-size: 28px;
|
||||||
|
color: #1f2329;
|
||||||
|
}
|
||||||
.subDescription {
|
.subDescription {
|
||||||
color: #aaa;
|
margin-top: 24px;
|
||||||
line-height: 1.4;
|
line-height: 26px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #1f2329;
|
||||||
}
|
}
|
||||||
.link {
|
.link {
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
|
|||||||
@ -1,28 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<button @click="add">点击</button>
|
|
||||||
<span>{{ testArray }}</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import {computed, ref} from "vue";
|
|
||||||
|
|
||||||
let i = 0
|
|
||||||
const array = ref([])
|
|
||||||
|
|
||||||
const add = () => {
|
|
||||||
array.value = [i]
|
|
||||||
i++
|
|
||||||
}
|
|
||||||
|
|
||||||
const testArray = computed(() => {
|
|
||||||
console.log(123)
|
|
||||||
return array.value
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>User</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
325
src/views/news/index.vue
Normal file
325
src/views/news/index.vue
Normal file
@ -0,0 +1,325 @@
|
|||||||
|
<template>
|
||||||
|
<div class="jobs">
|
||||||
|
<div class="banner">和优秀的人，做有挑战的事</div>
|
||||||
|
|
||||||
|
<div class="main clearfix">
|
||||||
|
<!-- 侧边栏过滤选择 -->
|
||||||
|
<div class="clearfix aside-filter">
|
||||||
|
|
||||||
|
<div class="job-category job-filter-block">
|
||||||
|
<div class="title"></div>
|
||||||
|
<checkbox-transfer
|
||||||
|
title="职位"
|
||||||
|
ref="jobCategory"
|
||||||
|
v-model="job_category_id_list"
|
||||||
|
:props="{ key: 'nid', label: 'name' }"
|
||||||
|
:data="jobCategories"
|
||||||
|
></checkbox-transfer>
|
||||||
|
</div>
|
||||||
|
<div class="job-city job-filter-block">
|
||||||
|
<div class="title"></div>
|
||||||
|
<checkbox-transfer
|
||||||
|
title="城市"
|
||||||
|
ref="location"
|
||||||
|
v-model="location_code_list"
|
||||||
|
:props="{ key: 'code', label: 'name' }"
|
||||||
|
:data="jobCities"
|
||||||
|
></checkbox-transfer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 主体内容 -->
|
||||||
|
<div class="content" v-loading:#ffffff7d.scrollFixed="loading">
|
||||||
|
<ul class="content-list">
|
||||||
|
<li class="content-item" v-for="item in results.data" :key="item.nid">
|
||||||
|
<router-link :to="`/news/${item.nid}`" target="_blank">
|
||||||
|
<h3 class="title">{{ item.title }}</h3>
|
||||||
|
<!--
|
||||||
|
<div class="subTitle">
|
||||||
|
<span class="city">{{ item.city_name }}</span> |
|
||||||
|
<span class="job_category">{{ item.category_name }}</span> |
|
||||||
|
<span class="recruitment_channel">{{ item.recruit_type }}</span>
|
||||||
|
</div> -->
|
||||||
|
<p class="desc">{{ item.description }}</p>
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<!-- <!– 分页器 –>-->
|
||||||
|
<!-- <div v-show="!loading" class="pagination-wrapper">-->
|
||||||
|
<!-- <pagination :current-page.sync="currentPage" :total="results.count"></pagination>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<el-pagination
|
||||||
|
class="pager"
|
||||||
|
v-model:current-page="pageOperation.page"
|
||||||
|
v-model:page-size="pageOperation.limit"
|
||||||
|
:background="false"
|
||||||
|
layout="prev, pager, next, jumper"
|
||||||
|
:total="results.total || 10"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {computed, getCurrentInstance, onMounted, ref, watch} from "vue";
|
||||||
|
import {useRoute} from "vue-router";
|
||||||
|
import {getOffsetTop} from "../../helper/utilities.js";
|
||||||
|
import EventBus from "../../helper/EventBus/index.js";
|
||||||
|
import CheckboxTransfer from "../../components/Checkbox-Transfer.vue";
|
||||||
|
import Loading from "../../components/Loading/index.js";
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const {proxy} = getCurrentInstance()
|
||||||
|
let positionY = 0;
|
||||||
|
let searchBarClientHeight = 0
|
||||||
|
const {keyword, job_category_id} = route.query
|
||||||
|
const searchBarFixedTop = ref(false)
|
||||||
|
// 工作种类数组
|
||||||
|
const job_category_id_list = ref(job_category_id ? [Number(job_category_id)] : [])
|
||||||
|
// 工作地点数组
|
||||||
|
const location_code_list = ref([])
|
||||||
|
// 搜索内容
|
||||||
|
const searchKeyword = ref("")
|
||||||
|
// 岗位种类列表
|
||||||
|
const jobCategories = ref([])
|
||||||
|
// 岗位城市列表
|
||||||
|
const jobCities = ref([])
|
||||||
|
// 加载
|
||||||
|
const loading = ref(false)
|
||||||
|
const results = ref({})
|
||||||
|
|
||||||
|
// 获取岗位种类列表
|
||||||
|
const getCategory = async () => {
|
||||||
|
let res = await proxy.$api.getCategory()
|
||||||
|
|
||||||
|
jobCategories.value = res.data.filter(item => item.name !== '全部')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取城市列表
|
||||||
|
const getCity = async () => {
|
||||||
|
let res = await proxy.$api.getCity()
|
||||||
|
jobCities.value = res.data
|
||||||
|
}
|
||||||
|
|
||||||
|
const pageOperation = ref({
|
||||||
|
limit: 5,
|
||||||
|
page: 1
|
||||||
|
})
|
||||||
|
|
||||||
|
// 分类及城市分类以及搜索配置
|
||||||
|
const config = computed(() => {
|
||||||
|
return {
|
||||||
|
limit: pageOperation.value.limit,
|
||||||
|
page: pageOperation.value.page,
|
||||||
|
job_category_id_list: job_category_id_list.value,
|
||||||
|
location_code_list: location_code_list.value,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleCurrentChange = () => {
|
||||||
|
console.log('fen ye')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const clearable = computed(() => {
|
||||||
|
return (
|
||||||
|
job_category_id_list.value.length !== 0 || location_code_list.value.length !== 0
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
const searchBar = ref("")
|
||||||
|
|
||||||
|
// 获取岗位信息
|
||||||
|
const getJobList = async () => {
|
||||||
|
loading.value = true
|
||||||
|
// let res = await proxy.$api.getJobList(config.value)
|
||||||
|
let res={
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
nid: 1,
|
||||||
|
title: "前端开发工程师",
|
||||||
|
city_name: "上海",
|
||||||
|
category_name: "前端开发",
|
||||||
|
recruit_type: "校园招聘",
|
||||||
|
description: "负责前端开发，包括页面设计、前端开发、前端性能优化、前端单元测试等"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
nid: 2,
|
||||||
|
title: "前端开发工程师",
|
||||||
|
}
|
||||||
|
],
|
||||||
|
total: 10
|
||||||
|
}
|
||||||
|
results.value = res
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// mounted
|
||||||
|
onMounted(() => {
|
||||||
|
proxy.$nextTick(() => {
|
||||||
|
positionY = getOffsetTop(document.body, searchBar.value);
|
||||||
|
|
||||||
|
searchBarClientHeight = searchBar.value.clientHeight;
|
||||||
|
})
|
||||||
|
|
||||||
|
const onPageScroll = () => {
|
||||||
|
searchBarFixedTop.value =
|
||||||
|
window.scrollY > positionY - searchBarClientHeight / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("scroll", onPageScroll);
|
||||||
|
|
||||||
|
EventBus.on("hook:destroyed", () => {
|
||||||
|
window.removeEventListener("scroll", onPageScroll);
|
||||||
|
});
|
||||||
|
|
||||||
|
getCategory()
|
||||||
|
getCity()
|
||||||
|
getJobList()
|
||||||
|
Loading.show()
|
||||||
|
|
||||||
|
Promise.all([getCategory, getCity, getJobList]).then(() => {
|
||||||
|
Loading.close()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(config, (newValue, oldValue) => {
|
||||||
|
console.log(config.value)
|
||||||
|
searchBarFixedTop.value && window.scrollTo(0, positionY)
|
||||||
|
getJobList()
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
const clearFilter = () => {
|
||||||
|
if (job_category_id_list.value.length) {
|
||||||
|
job_category_id_list.value = []
|
||||||
|
}
|
||||||
|
if (location_code_list.value.length) {
|
||||||
|
location_code_list.value = []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.banner {
|
||||||
|
height: 400px;
|
||||||
|
line-height: 400px;
|
||||||
|
color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
min-width: @main-width;
|
||||||
|
background-image: url("//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/joblistbanner2x.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
text-align: center;
|
||||||
|
font-size: @font-size-larger;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 200px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
&.fixedTop {
|
||||||
|
position: fixed;
|
||||||
|
|
||||||
|
box-shadow: 0 5px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
top: 0;
|
||||||
|
padding: 20px 130px;
|
||||||
|
z-index: 1000;
|
||||||
|
background-color: #fff;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
width: @main-width;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 100px;
|
||||||
|
padding: 0 100px 0 200px;
|
||||||
|
|
||||||
|
.aside-filter {
|
||||||
|
float: left;
|
||||||
|
padding-right: 20px;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-bottom: 1px solid @border-lighter-color;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.clear {
|
||||||
|
&.clearable {
|
||||||
|
color: @main-color;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-filter-block {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
min-height: 500px;
|
||||||
|
padding-left: 20px;
|
||||||
|
border-left: 1px solid @border-lighter-color;
|
||||||
|
margin-left: 190px;
|
||||||
|
position: relative;
|
||||||
|
.content-list{
|
||||||
|
margin-left: 60px;
|
||||||
|
}
|
||||||
|
&-title {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subTitle {
|
||||||
|
color: @regular-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
white-space: pre-line;
|
||||||
|
font-size: 14px;
|
||||||
|
color: @secondary-text-color;
|
||||||
|
|
||||||
|
//.text-overflow-visible-line(2);
|
||||||
|
text-overflow: clip;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-radius: 3px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 10px 30px 0 rgba(136, 150, 171, 0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-wrapper {
|
||||||
|
margin-top: 50px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pager {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
100
src/views/newsDetail/newsDetail.vue
Normal file
100
src/views/newsDetail/newsDetail.vue
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
<template>
|
||||||
|
<div class="job-detail">
|
||||||
|
<h1 class="job-detail-title">{{ jobDetail.title }}</h1>
|
||||||
|
<div class="job-detail-subTitle" >
|
||||||
|
<span>2024年8月23日</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">
|
||||||
|
<pre class="textContent">{{ jobDetail.description }}</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import {reactive, getCurrentInstance, ref, onMounted} 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 = ref({})
|
||||||
|
const store = useStore()
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
const id = route.params.id
|
||||||
|
|
||||||
|
// 获取岗位详情
|
||||||
|
const getJobDetail = async () => {
|
||||||
|
// const loading = ElLoading.service({
|
||||||
|
// lock: true,
|
||||||
|
// text: 'Loading',
|
||||||
|
// background: 'rgba(0, 0, 0, 0.7)',
|
||||||
|
// })
|
||||||
|
// let res = await proxy.$api.getJobDetail(id)
|
||||||
|
// jobDetail.value = res.data
|
||||||
|
jobDetail.value= {title: '前端开发', description: '1、根据产品的需求，通过个性化、NDCG、SBS等评估等方法，完成策略上线前的测试及数据评估等内容，包括不限于策略评估、摸底、横向对比分析等，从用户角度出发提升用户体验，更大程度上满足用户需求；2、参与抖音AI搜索日常相关的产品相关功能的运营和优化工作，提升用户体验，促进用户满意度的提升；3、反馈现有AI搜索问题，站在真实的用户视角体验产品问题。职位要求'}
|
||||||
|
loading.close()
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getJobDetail()
|
||||||
|
})
|
||||||
|
|
||||||
|
const delivery = () => {
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: '该功能还在开发中'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.job-detail {
|
||||||
|
width: 800px;
|
||||||
|
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 60px;
|
||||||
|
line-height: 2em;
|
||||||
|
&-title {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&-subTitle {
|
||||||
|
font-size: @font-size-base;
|
||||||
|
color: @primary-text-color;
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
&-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>
|
||||||
Loading…
x
Reference in New Issue
Block a user