suixy
/
portal_website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加组件

Browse Source
master
yesg 2 weeks ago
parent f5b47b6164
commit f3b3c77330
5 changed files with 505 additions and 76 deletions
Show Stats Download Patch File Download Diff File

110
src/components/el/carousel1.vue
Unescape Escape View File

@ -0,0 +1,110 @@
<template>
<div style="height: calc(680vw / 19.2);">
<div class="swiper mySwiper" >
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,k) in data.list" :key="k">
<el-image
style="width: 100%;height:calc(680vw / 19.2);"
:src="item.img"
></el-image>
<div class="inner">
<div class="title" >
{{ item.title }}
</div>
<div class="value" >
{{ item.value }}
</div>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</template>
<script>
import Swiper from 'swiper';
import {Autoplay, Navigation} from "swiper/modules";
Swiper.use([
Navigation,
Autoplay
])
let swiper = null
export default {
name: 'Carousel1',
props: ['data'],
data() {
return {
show: true,
}
},
mounted() {
this.initSwiper()
},
methods: {
initSwiper() {
if (swiper) {
swiper.destroy(true, true);
swiper = null;
}
swiper = new Swiper(".mySwiper", {
slidesPerView: 1.5,
spaceBetween: '3.9%',
centeredSlides: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
}
},
}
</script>
<style lang="less" scoped>
@import "~@/style.less";
.swiper {
width: 100%;
margin: 0 auto;
.swiper-slide {
position: relative;
min-height: 200px;
.inner {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: linear-gradient(to right, #41B5EA, #0000);
height: 8vw;
}
}
}
.title {
position: absolute;
bottom: 4vw;
left: 1vw;
font-weight: 700;
color: #3372ff;
font-size: 2.2vw;
letter-spacing: 6.1px;
min-width: 20px;
}
.value {
position: absolute;
top: 4vw;
left: 1vw;
color: #3372ff;
font-size: 1.3vw;
letter-spacing: 2.3px;
white-space: nowrap;
min-width: 20px;
}
</style>

54
src/views/contactUs/index.vue
Unescape Escape View File

@ -2,11 +2,13 @@
<div>
<div class="banner">
<Carousel class="carousel" :bannerList="bannerList" :indicator-position="'none'"/>
<div class="tabs" style="z-index: 99;">
<div class="content">
<div @click="checkTabs(i,k)" :class="`tab ${tabsActive === k ? 'active':''}`" v-for="(i,k) in data.tabsList">
{{ i.title }}
</div>
<div class="tabs">
<div class="content">
<div @click="checkTabs(i,k)"
style="white-space: nowrap;overflow: auto"
:class="`tab ${tabsActive == k ? 'active':''}`" v-for="(i,k) in data.tabsList">
{{ i.title }}
</div>
</div>
</div>
@ -242,25 +244,18 @@ export default {
letter-spacing: 2px;
}
.tabs {
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
//background-color: #fff;
//background: linear-gradient(to bottom, #EBF1FF, #fff);
}
position: absolute;
.tabs {
cursor: pointer;
bottom: 0;
width: 100%;
white-space: nowrap;
background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
backdrop-filter: saturate(50%) blur(10px);
backdrop-filter: saturate(50%) blur(4px);
.content {
width: 62%;
width: 100%;
position: relative;
left: 50%;
bottom: 0;
@ -268,18 +263,31 @@ export default {
.tab {
display: inline-block;
width: 25%;
line-height: 6.2vw;
font-size: 1.6vw;
letter-spacing: 3px;
font-size: 1vw;
position: relative;
padding: 0 2vw;
&:last-child::after {
display: none;
}
&::after {
content: '';
position: absolute;
right: 0;
width: 1px;
height: 1vw;
background-color: #409eff;
top: calc(50% - 0.5vw);
}
}
.tab.active {
color: @standard-color;
width: calc(25% - 2px);
border: 1px solid #fff;
box-shadow: 0 0 3px #0002;
}
//border: 1px solid #fff6;
//box-shadow: 0 0 3px #0002;
}
}
}

3
src/views/page/index.vue
Unescape Escape View File

@ -11,6 +11,7 @@
</div>
<div v-if="$route.query.id !== '1'" class="component" v-for="(i,k) in components">
<Carousel v-if="i.type === 'carousel'" :data="i.value"/>
<Carousel1 v-if="i.type === 'carousel1'" :data="i.value"/>
<EditEl1 v-if="i.type === 1" :data="i.value"/>
<EditEl2 v-if="i.type === 2" :data="i.value"/>
<EditEl3 v-if="i.type === 3" :data="i.value"/>
@ -58,10 +59,10 @@ import EditEl17 from "@/components/el/el17.vue";
import Copyright from '@/components/copyright'
import ContactUs from "@/views/index/contactUs.vue";
import Carousel from "@/components/el/carousel.vue";
import Carousel1 from "@/components/el/carousel1.vue";
import {getHwWeb} from "@/api/hwWeb";
import ProductCenter from "@/views/index/productCenter.vue";
import ClassicCase from "@/views/index/classicCase.vue";
import Carousel1 from "@/views/index/carousel.vue";
export default {
components: {

94
src/views/serviceSupport/index.vue
Unescape Escape View File

@ -8,26 +8,20 @@
<div class="bannerInfo">
青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业化联网整体解决方案。
</div>
<!-- <div class="tabs">-->
<!-- <div class="content">-->
<!-- <div @click="checkTabs(i,k)" :class="`tab ${tabsActive === k ? 'active':''}`" v-for="(i,k) in data.tabsList">-->
<!-- {{ i.title }}-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
<ContactUs class="contactUs"/>
<preSale/>
<!-- <div v-if='tabsActive===0'>-->
<!-- <QA/>-->
<!-- <preSale/>-->
<!-- </div>-->
<!-- <div v-if='tabsActive===1'>-->
<!-- <QA1/>-->
<!-- <preSale/>-->
<!-- </div>-->
<!-- <DownloadTheMaterials v-if='tabsActive===2'/>-->
<div class="tabs">
<div class="content">
<div @click="checkTabs(i,k)"
style="white-space: nowrap;overflow: auto"
:class="`tab ${tabsActive == k ? 'active':''}`" v-for="(i,k) in tabsData">
{{ i.title }}
</div>
</div>
</div>
<ContactUs class="contactUs" v-if="tabsActive === 0"/>
<preSale v-if="tabsActive === 0"/>
<Recruitment v-if="tabsActive === 1"/>
<Copyright class="copyright"/>
</div>
</template>
@ -38,6 +32,7 @@ import QA from './QA.vue'
import QA1 from './QA1.vue'
import DownloadTheMaterials from './downloadTheMaterials.vue'
import ContactUs from './contactUs'
import Recruitment from './recruitment'
import Copyright from '@/components/copyright'
import {getAboutUsInfo} from "@/api/contactUs";
@ -49,13 +44,14 @@ export default {
preSale,
QA,
QA1,
DownloadTheMaterials
DownloadTheMaterials,
Recruitment
},
data() {
return {
banner: '',
bannerTitle: '',
tabsActive: 1,
tabsActive: 0,
tabsList: [],
data: {
banner: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
@ -73,7 +69,16 @@ export default {
title: '资料下载'
},
]
}
},
tabsData: [
{
title: '联系我们',
},
{
title: '招聘信息',
},
],
}
},
watch: {
@ -103,7 +108,6 @@ export default {
methods: {
checkTabs(e, k) {
this.tabsActive = k
document.querySelector('#item' + e.id).scrollIntoView();
},
getData() {
}
@ -174,6 +178,52 @@ export default {
}
}
.tabs {
cursor: pointer;
bottom: 0;
width: 100%;
white-space: nowrap;
background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
backdrop-filter: saturate(50%) blur(4px);
.content {
width: 100%;
position: relative;
left: 50%;
bottom: 0;
transform: translateX(-50%);
.tab {
display: inline-block;
line-height: 6.2vw;
letter-spacing: 3px;
font-size: 1vw;
position: relative;
padding: 0 2vw;
&:last-child::after {
display: none;
}
&::after {
content: '';
position: absolute;
right: 0;
width: 1px;
height: 1vw;
background-color: #409eff;
top: calc(50% - 0.5vw);
}
}
.tab.active {
color: @standard-color;
//border: 1px solid #fff6;
//box-shadow: 0 0 3px #0002;
}
}
}
.companyProfile {
width: 100%;
}

260
src/views/serviceSupport/recruitment.vue
Unescape Escape View File

@ -0,0 +1,260 @@
<template>
<div>
<TitleGroup>
<!-- <template slot="title">CONTACT US</template>-->
<template slot="subTitle">招聘信息</template>
</TitleGroup>
<div class="job-detail-container">
<!-- 头部信息 -->
<header class="job-header">
<h1 class="job-title">项目监理</h1>
<div class="job-meta">
<span class="meta-item"><i class="icon-location"></i> 工作地点：青岛</span>
<span class="meta-item"><i class="icon-people"></i> 招聘人数：3人</span>
<span class="meta-item"><i class="icon-education"></i> 学历：大专以上</span>
</div>
</header>
<!-- 核心内容区域 -->
<main class="job-content">
<!-- 岗位职责 -->
<section class="content-section">
<h2 class="section-title">
<span class="title-icon">📋</span> 岗位重点职责
</h2>
<ul class="job-list">
<li v-for="(duty, index) in duties" :key="index">
<span class="list-marker">{{ index + 1 }}.</span>
<span class="list-text">{{ duty }}</span>
</li>
</ul>
</section>
<!-- 任职要求 -->
<section class="content-section">
<h2 class="section-title">
<span class="title-icon">🎯</span> 任职要求
</h2>
<ul class="job-list">
<li v-for="(req, index) in requirements" :key="index">
<span class="list-marker">{{ index + 1 }}.</span>
<span class="list-text" v-html="req"></span>
</li>
</ul>
</section>
<!-- 投递按钮 -->
<div class="action-bar">
<button class="apply-btn">立即申请</button>
<button class="share-btn">分享职位</button>
</div>
</main>
</div>
</div>
</template>
<script>
import TitleGroup from "@/components/TitleGroup";
export default {
name: 'PlatformIntroduction',
props: ['data'],
components: {
TitleGroup
},
data() {
return {
// 岗位职责数据
duties: [
"负责信息化、RFID项目客户现场的项目实施，负责施工协调、调试、交付。",
"负责备件项目的销售跟进和交付。",
"负责项目现场与客户的技术沟通。",
"后期可参与部分研发、产品的工作。",
"项目相关文件的起草、编制工作。"
],
// 任职要求数据 (使用了HTML标签来高亮关键词)
requirements: [
"专科以上学历，<b>专业不限</b>。",
"待人诚实可信，具有亲和力，语言表达能力和动手能力强；",
"有较强的责任心和承压能力，能适应<b>短期和长期出差</b>；",
"学习能力强，有较强分析和解决问题的能力，工作积极主动，良好的责任感和严谨工作作风。",
"有<b>电子、电气、机械、自动化、软件、通讯</b>等相关专业经验优先。"
]
}
},
mounted() {
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>
<style lang="less" scoped>
@import "~@/style.less";
.job-detail-container {
max-width: 800px;
margin: 40px auto;
background-color: #f5f7fa;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
overflow: hidden;
}
/* 头部样式 */
.job-header {
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
padding: 30px;
color: #fff;
}
.job-title {
margin: 0 0 15px 0;
font-size: 28px;
font-weight: 600;
letter-spacing: 1px;
}
.job-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
font-size: 14px;
opacity: 0.9;
}
.meta-item {
display: flex;
align-items: center;
}
.icon-location, .icon-people, .icon-education {
margin-right: 5px;
font-style: normal;
}
/* 内容区域样式 */
.job-content {
padding: 30px;
background-color: #fff;
}
.content-section {
margin-bottom: 35px;
}
.section-title {
font-size: 20px;
color: #333;
border-left: 4px solid #1890ff;
padding-left: 12px;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.title-icon {
margin-right: 8px;
}
/* 列表样式 */
.job-list {
list-style: none;
padding: 0;
margin: 0;
}
.job-list li {
display: flex;
margin-bottom: 15px;
line-height: 1.8;
color: #555;
font-size: 15px;
}
.list-marker {
color: #1890ff;
font-weight: bold;
margin-right: 10px;
min-width: 20px;
}
.list-text b {
color: #1890ff;
font-weight: 600;
}
/* 底部按钮样式 */
.action-bar {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #eee;
}
.apply-btn {
background-color: #1890ff;
color: white;
border: none;
padding: 12px 50px;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
}
.apply-btn:hover {
background-color: #40a9ff;
}
.share-btn {
background-color: #fff;
color: #1890ff;
border: 1px solid #1890ff;
padding: 12px 50px;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
}
.share-btn:hover {
background-color: #e6f7ff;
}
/* 移动端适配 */
@media (max-width: 600px) {
.job-detail-container {
margin: 0;
border-radius: 0;
}
.job-header {
padding: 20px;
}
.job-content {
padding: 20px;
}
.job-title {
font-size: 24px;
}
.job-meta {
flex-direction: column;
gap: 8px;
}
.action-bar {
flex-direction: column;
}
.apply-btn, .share-btn {
width: 100%;
padding: 12px 0;
}
}
</style>
Write Preview
Loading…
Cancel
Save