389 lines
12 KiB
Vue
389 lines
12 KiB
Vue
<template>
|
||
<div class="flexacenter save-box save-left">
|
||
<img class="save-icon" src="@/assets/img/arrow-gray.png" />
|
||
保存并退出
|
||
</div>
|
||
<div class="flexacenter save-box save-right">
|
||
放弃保存
|
||
<img class="save-icon" src="@/assets/img/cross-icon.png" />
|
||
</div>
|
||
<div class="content">
|
||
<div class="header flexacenter">发布面经</div>
|
||
<div class="box flex1 flexflex">
|
||
<div class="box-left">
|
||
<div class="area-box">
|
||
<div class="item">
|
||
<div class="title flexacenter">
|
||
申请信息
|
||
<div class="asterisk">*</div>
|
||
</div>
|
||
<div class="info-box">
|
||
<div class="info-item flexacenter">
|
||
<div class="info-name">院校</div>
|
||
<div class="flex1">
|
||
<el-autocomplete v-model="state1" :fetch-suggestions="querySearch" clearable class="inline-input w-50" placeholder="输入关键词，选择院校" @select="handleSelect">
|
||
<template #suffix>
|
||
<img class="" src="@/assets/img/arrow-black.svg" />
|
||
</template>
|
||
</el-autocomplete>
|
||
</div>
|
||
</div>
|
||
<div class="info-item flexacenter">
|
||
<div class="info-name">专业</div>
|
||
<div class="flex1">
|
||
<el-autocomplete v-model="state1" :fetch-suggestions="querySearch" clearable class="inline-input w-50" placeholder="输入关键词，选择专业" @select="handleSelect">
|
||
<template #suffix>
|
||
<img class="" src="@/assets/img/arrow-black.svg" />
|
||
</template>
|
||
</el-autocomplete>
|
||
</div>
|
||
</div>
|
||
<div class="info-item flexacenter">
|
||
<div class="info-name">项目</div>
|
||
<el-input class="flex1 input" placeholder="请输入"></el-input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="item">
|
||
<div class="title flexacenter">
|
||
面试时间
|
||
<div class="asterisk">*</div>
|
||
</div>
|
||
|
||
<div class="time-box item-input-box flexacenter">
|
||
<el-config-provider :locale="zhCn">
|
||
<el-date-picker v-model="value1" type="date" placeholder="请选择" size="large" class="flex1 flexacenter" :clear-icon="{}" />
|
||
</el-config-provider>
|
||
<img class="calendar-icon" src="@/assets/img/calendar-icon.svg" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="item">
|
||
<div class="title flexacenter">
|
||
面经帖标题
|
||
<div class="asterisk">*</div>
|
||
</div>
|
||
|
||
<div class="title-box item-input-box flexacenter"><el-input v-model="title" placeholder="给你的面经帖起一个吸引的标题吧"></el-input></div>
|
||
</div>
|
||
</div>
|
||
<div class="visible-box flexacenter">
|
||
<img class="visible-icon" src="@/assets/img/frame-no.svg" />
|
||
回复/点赞可见
|
||
</div>
|
||
</div>
|
||
<div class="box-right">
|
||
<div class="area-box">
|
||
<div class="item">
|
||
<div class="title flexacenter">
|
||
面试构成及过程
|
||
<div class="asterisk">*</div>
|
||
</div>
|
||
|
||
<div class="course-box">
|
||
<el-input v-model="course" type="textarea" placeholder="例如：项目介绍、面试时长、面试官、问题QA、需要注意的地方"></el-input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hint-box flexcenter">注：请确保以上内容已正确填写，发布后将不能修改</div>
|
||
</div>
|
||
|
||
<div class="floor-box">
|
||
<div class="box flexacenter">
|
||
<div class="anonymous-box flexacenter">
|
||
<img class="anonymous-icon" src="@/assets/img/frame-pitch.svg" />
|
||
<!-- <img class="anonymous-icon" src="@/assets/img/frame-no.svg" /> -->
|
||
匿名发表
|
||
<div class="text">（发布后可修改）</div>
|
||
</div>
|
||
<div class="issue-btn flexcenter">发布</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import zhCn from "element-plus/dist/locale/zh-cn.mjs"
|
||
console.log("zhCn", zhCn)
|
||
|
||
const state1 = ref("")
|
||
|
||
const restaurants = ref([])
|
||
|
||
onMounted(() => {
|
||
restaurants.value = loadAll()
|
||
getInit()
|
||
})
|
||
|
||
const getInit = () => {
|
||
publishInitHttp().then(res => {
|
||
console.log("res", res)
|
||
})
|
||
}
|
||
|
||
const querySearch = (queryString, cb) => {
|
||
const results = queryString ? restaurants.value.filter(createFilter(queryString)) : restaurants.value
|
||
// call callback function to return suggestions
|
||
cb(results)
|
||
}
|
||
|
||
const createFilter = queryString => {
|
||
return restaurant => {
|
||
return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
|
||
}
|
||
}
|
||
const loadAll = () => {
|
||
return [
|
||
{value: "vue", link: "https://github.com/vuejs/vue"},
|
||
{value: "element", link: "https://github.com/ElemeFE/element"},
|
||
{value: "cooking", link: "https://github.com/ElemeFE/cooking"},
|
||
{value: "mint-ui", link: "https://github.com/ElemeFE/mint-ui"},
|
||
{value: "vuex", link: "https://github.com/vuejs/vuex"},
|
||
{value: "vue-router", link: "https://github.com/vuejs/vue-router"},
|
||
{value: "babel", link: "https://github.com/babel/babel"},
|
||
]
|
||
}
|
||
|
||
const handleSelect = item => {
|
||
console.log(item)
|
||
}
|
||
|
||
const value1 = ref("")
|
||
const title = ref("")
|
||
const course = ref("")
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.content {
|
||
width: 1200px;
|
||
// height: 882px;
|
||
// min-height: 718px;
|
||
min-height: calc(100vh - 120px);
|
||
background: #fff;
|
||
margin: 30px auto 90px;
|
||
border-radius: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.header {
|
||
font-weight: 650;
|
||
font-size: 20px;
|
||
color: #000000;
|
||
border-bottom: 1px solid #ebebeb;
|
||
height: 88px;
|
||
padding-left: 30px;
|
||
}
|
||
|
||
.box {
|
||
.title {
|
||
color: #666666;
|
||
font-size: 14px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.box-left {
|
||
border-right: 16px solid #f6f6f6;
|
||
.area-box {
|
||
padding: 30px;
|
||
padding-right: 50px;
|
||
border-bottom: 1px solid #ebebeb;
|
||
|
||
.item {
|
||
&:not(:last-of-type) {
|
||
margin-bottom: 30px;
|
||
}
|
||
}
|
||
|
||
.info-box {
|
||
width: 452px;
|
||
height: 158px;
|
||
background-color: rgba(255, 255, 255, 0);
|
||
border: 1px solid rgba(215, 215, 215, 1);
|
||
border-radius: 5px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
.info-item {
|
||
height: 50px;
|
||
|
||
&:not(:last-of-type) {
|
||
border-bottom: 1px solid #d7d7d7;
|
||
}
|
||
|
||
.info-name {
|
||
font-size: 14px;
|
||
color: #666666;
|
||
padding: 0 14px;
|
||
}
|
||
|
||
.input {
|
||
height: 100%;
|
||
// background: #000000;
|
||
// padding: 1px 11px;
|
||
border: none;
|
||
outline: none;
|
||
box-shadow: none;
|
||
|
||
/deep/ .el-input__wrapper {
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
|
||
/deep/ .el-autocomplete {
|
||
width: 100%;
|
||
|
||
.el-input__wrapper {
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.item-input-box {
|
||
width: 452px;
|
||
height: 46px;
|
||
border: 1px solid rgba(215, 215, 215, 1);
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
/deep/ .el-input {
|
||
height: 100%;
|
||
.el-input__wrapper {
|
||
height: 100%;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.time-box {
|
||
.calendar-icon {
|
||
width: 15px;
|
||
height: 16px;
|
||
margin: 0 12px;
|
||
}
|
||
|
||
/deep/ .el-input {
|
||
.el-input__prefix {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.visible-box {
|
||
margin: 30px;
|
||
font-size: 14px;
|
||
color: #555555;
|
||
cursor: pointer;
|
||
.visible-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.box-right {
|
||
.area-box {
|
||
padding: 30px;
|
||
padding-left: 50px;
|
||
|
||
.course-box {
|
||
width: 572px;
|
||
min-height: 480px;
|
||
background-color: rgba(255, 255, 255, 0);
|
||
border: 1px solid rgba(215, 215, 215, 1);
|
||
border-radius: 5px;
|
||
|
||
/deep/ .el-textarea__inner {
|
||
min-height: 480px !important;
|
||
box-shadow: none;
|
||
padding: 13px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.hint-box {
|
||
height: 58px;
|
||
background-color: rgba(246, 246, 246, 1);
|
||
color: #555555;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
.asterisk {
|
||
color: #fa9183;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.floor-box {
|
||
width: 100vw;
|
||
min-width: 1200px;
|
||
height: 90px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
-moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
|
||
-webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
|
||
box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
|
||
position: fixed;
|
||
bottom: 0;
|
||
.box {
|
||
width: 1200px;
|
||
height: 100%;
|
||
margin: 0 auto;
|
||
justify-content: space-between;
|
||
padding: 0 30px;
|
||
.anonymous-box {
|
||
cursor: pointer;
|
||
color: #333333;
|
||
font-size: 14px;
|
||
|
||
.text {
|
||
color: rgb(170, 170, 170);
|
||
font-size: 13px;
|
||
}
|
||
.anonymous-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
}
|
||
.issue-btn {
|
||
width: 200px;
|
||
height: 46px;
|
||
background-color: rgba(253, 223, 109, 1);
|
||
border-radius: 190px;
|
||
font-size: 16px;
|
||
color: #000000;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.save-box {
|
||
font-size: 14px;
|
||
color: #666666;
|
||
position: fixed;
|
||
top: 30px;
|
||
cursor: pointer;
|
||
&.save-left {
|
||
left: 50px;
|
||
}
|
||
&.save-right {
|
||
right: 50px;
|
||
.save-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
.save-icon {
|
||
width: 22px;
|
||
height: 22px;
|
||
margin-right: 10px;
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
</style>
|