大屏处理
This commit is contained in:
maojiacai
218
src/views/recruitment/components/costomCaed.vue
Normal file
218
src/views/recruitment/components/costomCaed.vue
Normal file
@ -0,0 +1,218 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
|
||||
const state = reactive({
|
||||
tabs: [
|
||||
'公共服务站点 300', '培训机构 130', '咨询机构 220',
|
||||
'教育中心 150', '职业介绍所 180', '就业服务中心 210'
|
||||
],
|
||||
activeIndex: 0
|
||||
})
|
||||
|
||||
const scrollContainer = ref(null)
|
||||
const canScrollLeft = ref(false)
|
||||
const canScrollRight = ref(false)
|
||||
|
||||
// 检查滚动状态
|
||||
const checkScroll = () => {
|
||||
if (scrollContainer.value) {
|
||||
const { scrollLeft, scrollWidth, clientWidth } = scrollContainer.value
|
||||
canScrollLeft.value = scrollLeft > 0
|
||||
canScrollRight.value = scrollLeft < scrollWidth - clientWidth - 1
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动到指定位置
|
||||
const scrollTo = (direction) => {
|
||||
if (!scrollContainer.value) return
|
||||
|
||||
const container = scrollContainer.value
|
||||
const scrollAmount = 300 // 每次滚动量
|
||||
|
||||
if (direction === 'left') {
|
||||
container.scrollBy({ left: -scrollAmount, behavior: 'smooth' })
|
||||
} else {
|
||||
container.scrollBy({ left: scrollAmount, behavior: 'smooth' })
|
||||
}
|
||||
|
||||
// 滚动结束后检查状态
|
||||
setTimeout(checkScroll, 300)
|
||||
}
|
||||
|
||||
// 点击标签
|
||||
const selectTab = (index) => {
|
||||
state.activeIndex = index
|
||||
// 可选：自动滚动到选中标签
|
||||
scrollToTab(index)
|
||||
}
|
||||
|
||||
// 滚动到指定标签
|
||||
const scrollToTab = (index) => {
|
||||
if (!scrollContainer.value) return
|
||||
|
||||
const container = scrollContainer.value
|
||||
const tab = container.children[index]
|
||||
if (!tab) return
|
||||
|
||||
const containerWidth = container.clientWidth
|
||||
const tabLeft = tab.offsetLeft
|
||||
const tabWidth = tab.offsetWidth
|
||||
|
||||
container.scrollTo({
|
||||
left: tabLeft - (containerWidth - tabWidth) / 2,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
checkScroll()
|
||||
window.addEventListener('resize', checkScroll)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="costomCaedWrapper">
|
||||
<div class="horizontal-scroll-container">
|
||||
<!-- 左侧滚动按钮 -->
|
||||
<!-- <button-->
|
||||
<!-- class="scroll-button left"-->
|
||||
<!-- :class="{ visible: canScrollLeft }"-->
|
||||
<!-- @click="scrollTo('left')"-->
|
||||
<!-- >-->
|
||||
<!-- <svg viewBox="0 0 24 24">-->
|
||||
<!-- <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </button>-->
|
||||
|
||||
<!-- 横向滚动区域 -->
|
||||
<div
|
||||
ref="scrollContainer"
|
||||
class="scroll-area"
|
||||
@scroll="checkScroll"
|
||||
>
|
||||
<div
|
||||
v-for="(tab, index) in state.tabs"
|
||||
:key="index"
|
||||
class="tab-item"
|
||||
:class="{ active: state.activeIndex === index }"
|
||||
@click="selectTab(index)"
|
||||
>
|
||||
{{ tab }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧滚动按钮 -->
|
||||
<!-- <button-->
|
||||
<!-- class="scroll-button right"-->
|
||||
<!-- :class="{ visible: canScrollRight }"-->
|
||||
<!-- @click="scrollTo('right')"-->
|
||||
<!-- >-->
|
||||
<!-- <svg viewBox="0 0 24 24">-->
|
||||
<!-- <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </button>-->
|
||||
</div>
|
||||
|
||||
<img class="echart" src="~@/assets/recruitment/echart.svg" alt="">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.costomCaedWrapper {
|
||||
|
||||
.echart {
|
||||
margin-top: 1.5vw;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-scroll-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.scroll-area {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE/Edge */
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.scroll-area::-webkit-scrollbar {
|
||||
display: none; /* Chrome/Safari */
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 8px;
|
||||
width: 6.771vw;
|
||||
height: 1.875vw;
|
||||
text-align: center;
|
||||
font-size: 0.729vw;
|
||||
line-height: 1.875vw;
|
||||
background: url("~@/assets/recruitment/tabs_bg.svg") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
background-image: url("~@/assets/recruitment/tabs_bg_active.svg");
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tab-item:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.scroll-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1.875vw;
|
||||
height: 1.875vw;
|
||||
border-radius: 50%;
|
||||
background: #0b1318;
|
||||
border: 1px solid #0b1318;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.scroll-button.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.scroll-button.left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.scroll-button.right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.scroll-button svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
fill: #666;
|
||||
}
|
||||
|
||||
.scroll-button:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
122
src/views/recruitment/components/enterpriseEmploymentCard.vue
Normal file
122
src/views/recruitment/components/enterpriseEmploymentCard.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<script setup>
|
||||
import { defineProps } from 'vue';
|
||||
import Carousel from "@/views/recruitment/components/carousel.vue";
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "标题"
|
||||
},
|
||||
info: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="enterpriseEmploymentWrapper">
|
||||
<div class="titleWrapper">
|
||||
<div class="left">{{ title }}</div>
|
||||
<div class="right">{{ description }}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="modelItem1">
|
||||
<div class="title">岗位种类数</div>
|
||||
<div class="count">200.000</div>
|
||||
</div>
|
||||
<div class="modelItem2">
|
||||
<div class="title">岗位人员数</div>
|
||||
<div class="count">1246</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cardWrapper">
|
||||
<slot name="card">
|
||||
<carousel />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.enterpriseEmploymentWrapper {
|
||||
position: relative;
|
||||
width: 20.729vw;
|
||||
height: 24.6875vw;
|
||||
background: url("~@/assets/recruitment/module_bg.svg") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.cardWrapper {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 0.78125vw;
|
||||
transform: translateX(-50%);
|
||||
//background: url("~@/assets/recruitment/card_bg.svg") no-repeat;
|
||||
//background-size: 100% 100%;
|
||||
width: 17.03125vw;
|
||||
height: 16.615vw;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
margin: 0.521vw 0.573vw 0;
|
||||
|
||||
.count {
|
||||
font-size: 1.042vw;
|
||||
color: #48FAFC;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 0.46875vw;
|
||||
font-size: 0.729vw;
|
||||
}
|
||||
|
||||
.modelItem1 {
|
||||
padding-top: 1.09375vw;
|
||||
text-align: right;
|
||||
background: url("~@/assets/recruitment/model1.svg") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 7.823vw;
|
||||
height: 4.167vw;
|
||||
margin-right: 3.021vw;
|
||||
}
|
||||
|
||||
.modelItem2 {
|
||||
padding-top: 1.09375vw;
|
||||
text-align: right;
|
||||
background: url("~@/assets/recruitment/model2.svg") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 6.823vw;
|
||||
height: 4.167vw;
|
||||
}
|
||||
}
|
||||
|
||||
.titleWrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 1.5625vw;
|
||||
line-height: 1.5625vw;
|
||||
font-size: 0.833vw;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
.left {
|
||||
margin-left: 2.917vw;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
color: #A9F0FF;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-right: 1.042vw;
|
||||
color: #A9F0FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
176
src/views/recruitment/components/recruitment.scss
Normal file
176
src/views/recruitment/components/recruitment.scss
Normal file
@ -0,0 +1,176 @@
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(to top, $color1 0%, $color2 50%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.bigScrenn {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
background: url('~@/assets/recruitment/bg.svg') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
|
||||
// 头部
|
||||
.homeHead,.homeHeadsmall {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 8;
|
||||
height: 4.896vw !important;
|
||||
background: url('~@/assets/recruitment/header_bg.svg') no-repeat;
|
||||
background-size: 100%;
|
||||
|
||||
.left_Head {
|
||||
position: absolute;
|
||||
left: 1vw;
|
||||
top: 2.135vw;
|
||||
font-family: "DigifaceWide";
|
||||
}
|
||||
|
||||
.center_head {
|
||||
position: absolute;
|
||||
top: 2vw;
|
||||
left: 50%;
|
||||
transform: translateX(-56%);
|
||||
font-size: 4vw;
|
||||
font-family: "YSBTH";
|
||||
letter-spacing: 0.104vw;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
|
||||
span {
|
||||
background-image: linear-gradient(to top, #165493 10%, #ffffff 50%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: attr(text);
|
||||
position: absolute;
|
||||
z-index: -2;
|
||||
}
|
||||
}
|
||||
|
||||
.right_head {
|
||||
position: absolute;
|
||||
right: 1.875vw;
|
||||
top: 2.135vw;
|
||||
|
||||
.setting {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -78px;
|
||||
width: 1.8vw;
|
||||
height: 1.8vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
.homeHeadsmall{
|
||||
// background: url('~@/assets/images/home_head_small.png') no-repeat center center;
|
||||
height: 6.771vw;
|
||||
.center_head {
|
||||
position: absolute;
|
||||
top: 0.5vw;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 2.292vw;
|
||||
font-family: "YSBTH";
|
||||
letter-spacing: 0.104vw;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// 侧边
|
||||
.asidemodel {
|
||||
position: absolute;
|
||||
top: 5.888vw;
|
||||
//width: 22.396vw;
|
||||
//height: calc(100vh - 13.75vw);
|
||||
//transform: perspective(6.25vw) rotateY(2deg);
|
||||
|
||||
.asideHead {
|
||||
position: relative;
|
||||
height: 2.083vw;
|
||||
line-height: 2.083vw;
|
||||
margin-bottom: 1.042vw;
|
||||
padding-left: 0.729vw;
|
||||
padding-right: 0.729vw;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
font-size: 1.458vw;
|
||||
@include textColor(#499FF2, #ffffff);
|
||||
font-family: "HANYILINGXINTIJIAN";
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 8.594vw;
|
||||
height: 1.146vw;
|
||||
left: 0.104vw;
|
||||
top: 1.823vw;
|
||||
background: url('~@/assets/images/bg_03.png') no-repeat left bottom;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.asideHeadR {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 8.594vw;
|
||||
height: 1.146vw;
|
||||
left: 13.333vw;
|
||||
top: 1.823vw;
|
||||
background: url('~@/assets/images/bg_03.png') no-repeat left bottom;
|
||||
background-size: 100%;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.modelBox {
|
||||
height: calc(100% - 3.125vw);
|
||||
}
|
||||
|
||||
.asideItem {
|
||||
flex: 1 0 0;
|
||||
// margin: 0px 0.052vw;
|
||||
margin: 0 0.052vw 1.5vh;
|
||||
overflow: hidden;
|
||||
// margin-bottom: 0.26vw;
|
||||
background: url('~@/assets/images/bg_04.png') no-repeat left bottom;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.asidemodelR {
|
||||
//transform: perspective(6.25vw) rotateY(-2deg);
|
||||
}
|
||||
|
||||
// 展开-关闭按钮
|
||||
.showNeun {
|
||||
position: absolute;
|
||||
top: 47%;
|
||||
transform: translateY(-50%);
|
||||
width: 4.313vw;
|
||||
height: 22.802vw;
|
||||
background: url('~@/assets/images/home_left.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.showNeunR {
|
||||
background: url('~@/assets/images/home_right.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user