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": {
|
||||
"@element-plus/icons-vue": "^2.1.0",
|
||||
"axios": "^1.4.0",
|
||||
"byte": "file:",
|
||||
"element-plus": "^2.3.4",
|
||||
"mitt": "^3.0.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 {
|
||||
env,
|
||||
// mock总开关
|
||||
mock: false,
|
||||
mock: true,
|
||||
...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>
|
||||
<div class="footer">
|
||||
<div class="footer-content-column"></div>
|
||||
<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>
|
||||
<el-image style="width: 200px; height: 40px" src="/public/logo.png" :fit="fit" />
|
||||
<p>泸州里海农业科技有限公司</p>
|
||||
<p>蜀ICP备2022030133号</p>
|
||||
</div>
|
||||
<div class="footer-content-column">
|
||||
<div class="title">联系我们</div>
|
||||
<p>关于投递</p>
|
||||
<p>关于投递</p>
|
||||
<p>公司地址：四川省泸州市龙马大道一段</p>
|
||||
<p>公司邮箱：LIHAIJEJI@163.com</p>
|
||||
<p>联系方式：0830-2669767</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 class="contact-item ">
|
||||
<div class="title" style="padding-bottom: 5px;">公众号</div>
|
||||
<el-image style="width: 110px; height: 110px" src="/public/weixin.png" :fit="fit" />
|
||||
</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 class="contact-item">
|
||||
<div class="title" style="padding-bottom: 5px;">小程序</div>
|
||||
<el-image style="width: 110px; height: 110px" src="/public/xiaochengxu.jpg" :fit="fit" />
|
||||
</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 class="contact-item">
|
||||
</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 class="contact-item">
|
||||
</li>
|
||||
<li class="contact-item">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -236,32 +46,29 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="header" :class="[{ fixedToTop }, themeColor]" ref="header">
|
||||
<div class="logo">
|
||||
<a href="/">
|
||||
<logo :is-transparent="themeColor === 'is-transparent'"></logo>
|
||||
<el-image style="width: 270px; height: 54px" src="/public/logo.png" :fit="fit" />
|
||||
</a>
|
||||
</div>
|
||||
<ul class="navbar">
|
||||
@ -11,58 +11,22 @@
|
||||
<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>
|
||||
<a :href="href" @click="navigate">业务板块</a>
|
||||
</li>
|
||||
</router-link>
|
||||
<router-link exact to="/news" 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="/about" 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>
|
||||
|
||||
@ -16,6 +16,16 @@ const routes = [
|
||||
name: 'jobDetail',
|
||||
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',
|
||||
name: 'staff-stories',
|
||||
@ -25,21 +35,6 @@ const routes = [
|
||||
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')
|
||||
},
|
||||
{
|
||||
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="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="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="title"></div>
|
||||
<checkbox-transfer
|
||||
@ -79,7 +67,6 @@ 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 InputSearch from '../../components/Input-Search.vue'
|
||||
import CheckboxTransfer from "../../components/Checkbox-Transfer.vue";
|
||||
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>
|
||||
<div class="description">{{ item.description }}</div>
|
||||
<div class="subDescription">{{ item.subDescription }}</div>
|
||||
<div class="link">
|
||||
<!-- <div class="link">
|
||||
更多信息，请访问：
|
||||
<br/>
|
||||
<span>{{ item.link }}</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
@ -44,7 +44,14 @@ import {useRoute} from "vue-router";
|
||||
const route = useRoute()
|
||||
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 loading = ref(false)
|
||||
@ -57,10 +64,10 @@ const transitionName = ref("")
|
||||
|
||||
// 方法
|
||||
const mousewheelHandler = (e) => {
|
||||
if (this.scrolling) {
|
||||
if (scrolling.value==true) {
|
||||
return;
|
||||
}
|
||||
this.scrolling = true;
|
||||
scrolling.value = true;
|
||||
if (e.wheelDelta > 0) {
|
||||
transitionName.value = "move-down";
|
||||
console.log(transitionName.value)
|
||||
@ -108,8 +115,8 @@ const item = computed(() => {
|
||||
|
||||
// 获取产品列表
|
||||
const getProductList = async () => {
|
||||
let res = await proxy.$api.getProductList({})
|
||||
products.value = res.data
|
||||
//let res =[]// await proxy.$api.getProductList({})
|
||||
//products.value = res.data
|
||||
if (route.query.id) {
|
||||
activeIndex.value = products.value.findIndex(item => item.nid == route.query.id)
|
||||
}
|
||||
@ -205,10 +212,17 @@ const getProductList = async () => {
|
||||
h2 {
|
||||
margin: 30px 0;
|
||||
}
|
||||
.description,
|
||||
.description {
|
||||
margin-top: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 28px;
|
||||
color: #1f2329;
|
||||
}
|
||||
.subDescription {
|
||||
color: #aaa;
|
||||
line-height: 1.4;
|
||||
margin-top: 24px;
|
||||
line-height: 26px;
|
||||
font-size: 16px;
|
||||
color: #1f2329;
|
||||
}
|
||||
.link {
|
||||
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