开发对接页面框架搭建
parent
c1997bf938
commit
e7aea9eff5
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 551 B |
Binary file not shown.
|
After Width: | Height: | Size: 830 B |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
@ -0,0 +1,61 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="footerBottom">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Index-1 component
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name:"about",
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
activeName: 'second',
|
||||||
|
activeIndex: 1, // 默认选中第一个按钮
|
||||||
|
buttons: [
|
||||||
|
{ label: '关于美通',transportMode:'OCEAN' },
|
||||||
|
{ label: '联系我们',transportMode:'AIR' },
|
||||||
|
{ label: '企业文化',transportMode:'RAIL' },
|
||||||
|
{ label: '企业招聘',transportMode:'ROAD' }
|
||||||
|
],
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick(tab, event) {
|
||||||
|
console.log(tab, event);
|
||||||
|
},
|
||||||
|
setActive(item,index) {
|
||||||
|
if(index === 1){
|
||||||
|
this.$router.push({
|
||||||
|
name:'connection'
|
||||||
|
})
|
||||||
|
}else if(index === 2){
|
||||||
|
this.$router.push({
|
||||||
|
name:'corporateCulture'
|
||||||
|
})
|
||||||
|
}else if(index === 3){
|
||||||
|
this.$router.push({
|
||||||
|
name:'inviteJob'
|
||||||
|
})
|
||||||
|
}else {
|
||||||
|
this.$router.push({
|
||||||
|
name:'about'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// this.activeIndex = index;
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style src="../index.css" scoped></style>
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="footerBottom">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Index-1 component
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name:"about",
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
activeName: 'second',
|
||||||
|
activeIndex: 2, // 默认选中第一个按钮
|
||||||
|
buttons: [
|
||||||
|
{ label: '关于美通',transportMode:'OCEAN' },
|
||||||
|
{ label: '联系我们',transportMode:'AIR' },
|
||||||
|
{ label: '企业文化',transportMode:'RAIL' },
|
||||||
|
{ label: '企业招聘',transportMode:'ROAD' }
|
||||||
|
],
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick(tab, event) {
|
||||||
|
console.log(tab, event);
|
||||||
|
},
|
||||||
|
setActive(item,index) {
|
||||||
|
if(index === 1){
|
||||||
|
this.$router.push({
|
||||||
|
name:'connection'
|
||||||
|
})
|
||||||
|
}else if(index === 2){
|
||||||
|
this.$router.push({
|
||||||
|
name:'corporateCulture'
|
||||||
|
})
|
||||||
|
}else if(index === 3){
|
||||||
|
this.$router.push({
|
||||||
|
name:'inviteJob'
|
||||||
|
})
|
||||||
|
}else {
|
||||||
|
this.$router.push({
|
||||||
|
name:'about'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// this.activeIndex = index;
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style src="../index.css" scoped></style>
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="footerBottom">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Index-1 component
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name:"about",
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
activeName: 'second',
|
||||||
|
activeIndex: 3, // 默认选中第一个按钮
|
||||||
|
buttons: [
|
||||||
|
{ label: '关于美通',transportMode:'OCEAN' },
|
||||||
|
{ label: '联系我们',transportMode:'AIR' },
|
||||||
|
{ label: '企业文化',transportMode:'RAIL' },
|
||||||
|
{ label: '企业招聘',transportMode:'ROAD' }
|
||||||
|
],
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick(tab, event) {
|
||||||
|
console.log(tab, event);
|
||||||
|
},
|
||||||
|
setActive(item,index) {
|
||||||
|
if(index === 1){
|
||||||
|
this.$router.push({
|
||||||
|
name:'connection'
|
||||||
|
})
|
||||||
|
}else if(index === 2){
|
||||||
|
this.$router.push({
|
||||||
|
name:'corporateCulture'
|
||||||
|
})
|
||||||
|
}else if(index === 3){
|
||||||
|
this.$router.push({
|
||||||
|
name:'inviteJob'
|
||||||
|
})
|
||||||
|
}else {
|
||||||
|
this.$router.push({
|
||||||
|
name:'about'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// this.activeIndex = index;
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style src="../index.css" scoped></style>
|
||||||
@ -0,0 +1,285 @@
|
|||||||
|
.businessBackground {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 1000px;
|
||||||
|
background: url('../../assets/images/home/background.png') no-repeat center/cover;
|
||||||
|
}
|
||||||
|
.main-title {
|
||||||
|
color: #151E2C;
|
||||||
|
font-size: 40px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 46px; /* 115% */
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
.main-content p {
|
||||||
|
color: rgba(21, 30, 44, 0.50);
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 42px; /* 210% */
|
||||||
|
}
|
||||||
|
/* 转圈圈 */
|
||||||
|
.circle-container {
|
||||||
|
position: relative;
|
||||||
|
width: 280px; /* Circle size */
|
||||||
|
height: 280px; /* Circle size */
|
||||||
|
margin: 100px auto; /* Center the circle */
|
||||||
|
animation: rotate-circle 10s infinite linear; /* Rotate the circle */
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%; left: 50%;
|
||||||
|
width: 280px; height: 280px; /* Same as container for a full circle */
|
||||||
|
margin-top: -140px; /* Offset to center the circle */
|
||||||
|
margin-left: -140px; /* Offset to center the circle */
|
||||||
|
border: dashed 2px #00AFAF;
|
||||||
|
border-radius: 50%;
|
||||||
|
/* animation: rotate 10s infinite linear; */
|
||||||
|
}
|
||||||
|
.circle2 {
|
||||||
|
/* position: absolute; */
|
||||||
|
/* top: 50%; left: 50%; */
|
||||||
|
width: 320px; height: 320px; /* Same as container for a full circle */
|
||||||
|
|
||||||
|
border: dashed 2px #00AFAF;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.circle3 {
|
||||||
|
/* position: absolute; */
|
||||||
|
/* top: 50%; left: 50%; */
|
||||||
|
width: 360px; height: 360px; /* Same as container for a full circle */
|
||||||
|
|
||||||
|
border: dashed 2px #00AFAF;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.circle4 {
|
||||||
|
/* position: absolute; */
|
||||||
|
/* top: 50%; left: 50%; */
|
||||||
|
width: 400px; height: 400px; /* Same as container for a full circle */
|
||||||
|
|
||||||
|
border: dashed 2px #00AFAF;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: rotate 10s infinite linear;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle-item {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%; left: 50%;
|
||||||
|
width: 114px; height: 43px; /* Box size */
|
||||||
|
margin-top: -15px; /* Half height of the box */
|
||||||
|
margin-left: -30px; /* Half width of the box */
|
||||||
|
background: #E2F0F0;
|
||||||
|
color: #00AFAF;;
|
||||||
|
line-height: 43px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 51px;
|
||||||
|
transform-origin: 0 50%; /* Set the origin for rotation */
|
||||||
|
z-index: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
/* Set the initial rotation and translation based on :style */
|
||||||
|
}
|
||||||
|
.proprietary-active {
|
||||||
|
background: #00AFAF;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0px 4px 12.9px 0px rgba(0, 175, 175, 0.30);
|
||||||
|
|
||||||
|
}
|
||||||
|
.item1 {
|
||||||
|
position: absolute;
|
||||||
|
top: 65%; left: 100%;
|
||||||
|
transform-origin: center center;
|
||||||
|
animation: spin 10s infinite linear;
|
||||||
|
}
|
||||||
|
.item2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 90%; left: 0%;
|
||||||
|
transform-origin: center center;
|
||||||
|
animation: spin 10s infinite linear;
|
||||||
|
}
|
||||||
|
.item3 {
|
||||||
|
position: absolute;
|
||||||
|
top: -5%; left: 15%;
|
||||||
|
transform-origin: center center;
|
||||||
|
animation: spin 10s infinite linear;
|
||||||
|
}
|
||||||
|
@keyframes rotate {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
@keyframes spin {
|
||||||
|
0% { transform: rotate(360deg); }
|
||||||
|
100% { transform: rotate(0deg); }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle-title {
|
||||||
|
color: #151E2C;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 42px; /* 210% */
|
||||||
|
margin: 25px 0 10px 0 ;
|
||||||
|
}
|
||||||
|
.circle-content {
|
||||||
|
width: 200px;
|
||||||
|
height: 56px;
|
||||||
|
color: rgba(21, 30, 44, 0.50);
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 28px; /* 175% */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*公司时间轴 */
|
||||||
|
#line {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 70px;
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background: #6D6D6D;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
#developYears {
|
||||||
|
width: 700px;
|
||||||
|
height: 100px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
padding-top: 75px;
|
||||||
|
}
|
||||||
|
#dotList {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: absolute;
|
||||||
|
top: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot .activeImg {
|
||||||
|
width: 32px;
|
||||||
|
}
|
||||||
|
.dot dt {
|
||||||
|
width: 32px;
|
||||||
|
height: 89px;
|
||||||
|
}
|
||||||
|
.dot dt img{
|
||||||
|
width: 32x;
|
||||||
|
}
|
||||||
|
.dot dl {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 32px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
.dot dd {
|
||||||
|
position: absolute;
|
||||||
|
left: -12px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: #FFF;
|
||||||
|
font-family: "DingTalk JinBuTi";
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 46px; /* 191.667% */
|
||||||
|
}
|
||||||
|
.dot {
|
||||||
|
text-align: center;
|
||||||
|
z-index: 3;
|
||||||
|
line-height: 121px;
|
||||||
|
}
|
||||||
|
.dotNo {
|
||||||
|
text-align: center;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
.dotNo dl {
|
||||||
|
width: 32px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.dotNo .activeImg {
|
||||||
|
width: 32px;
|
||||||
|
}
|
||||||
|
.dotNo .nullBox {
|
||||||
|
width: 32px;
|
||||||
|
height: 47px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dotNo dl {
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
.dotNo dd {
|
||||||
|
position: absolute;
|
||||||
|
left: -12px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: #FFF;
|
||||||
|
font-family: "DingTalk JinBuTi";
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 46px; /* 191.667% */
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.dotNo dt img{
|
||||||
|
width: 32px;
|
||||||
|
}
|
||||||
|
.company-title {
|
||||||
|
color: #FFF;
|
||||||
|
font-family: "DingTalk JinBuTi";
|
||||||
|
font-size: 40px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 46px; /* 115% */
|
||||||
|
}
|
||||||
|
.timeline {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 36px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-year {
|
||||||
|
width: 20%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.timeline-year >div:first-child {
|
||||||
|
border-bottom: 1px solid #000;
|
||||||
|
color: #151E2C;
|
||||||
|
font-family: "DingTalk JinBuTi";
|
||||||
|
font-size: 28px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 46px; /* 164.286% */
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
.timeline-year div span {
|
||||||
|
color: #7A7A7A;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 24px; /* 171.429% */
|
||||||
|
}
|
||||||
|
.timeline-year div span:first-child {
|
||||||
|
display: inline-block;
|
||||||
|
width: 120px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.timeline-year:last-child::after {
|
||||||
|
display: none; /* Do not display the line after the last year */
|
||||||
|
}
|
||||||
|
|
||||||
|
.events {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event {
|
||||||
|
padding: 2px 0;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="footerBottom">
|
||||||
|
<div class="businessBackground"></div>
|
||||||
|
<div class="allSet">
|
||||||
|
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
||||||
|
<el-tab-pane label="关于美通" name="first">
|
||||||
|
<aboutMT></aboutMT>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="联系我们" name="second">
|
||||||
|
<connection></connection>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="企业文化" name="third">
|
||||||
|
<corporateCulture></corporateCulture>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="企业招聘" name="fourth">
|
||||||
|
<inviteJob></inviteJob>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import aboutMT from "./components/aboutMT.vue";
|
||||||
|
import connection from "./components/connection.vue";
|
||||||
|
import corporateCulture from "./components/corporateCulture.vue";
|
||||||
|
import inviteJob from "./components/inviteJob.vue";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Index-1 component
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name:"about",
|
||||||
|
components: {
|
||||||
|
aboutMT,
|
||||||
|
connection,
|
||||||
|
corporateCulture,
|
||||||
|
inviteJob,
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
activeName: 'second',
|
||||||
|
activeIndex: 0, // 默认选中第一个按钮
|
||||||
|
buttons: [
|
||||||
|
{ label: '关于美通',transportMode:'OCEAN' },
|
||||||
|
{ label: '联系我们',transportMode:'AIR' },
|
||||||
|
{ label: '企业文化',transportMode:'RAIL' },
|
||||||
|
{ label: '企业招聘',transportMode:'ROAD' }
|
||||||
|
],
|
||||||
|
activePropsIndex:0,
|
||||||
|
buttonProps: [
|
||||||
|
{ contry: '加拿大',capital:'温哥华/多伦多'},
|
||||||
|
{ contry: '美国',capital:'洛杉矶/芝加哥'},
|
||||||
|
{ contry: '墨西哥',capital:'墨西哥'},
|
||||||
|
{ contry: '英国',capital:'伦敦'},
|
||||||
|
{ contry: '比利时',capital:'烈日'},
|
||||||
|
{ contry: '德国',capital:'科隆'},
|
||||||
|
{ contry: '法国',capital:'巴黎'},
|
||||||
|
{ contry: '日本',capital:'大阪府'},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick(tab, event) {
|
||||||
|
console.log(tab, event);
|
||||||
|
},
|
||||||
|
setActive(item,index) {
|
||||||
|
if(index === 1){
|
||||||
|
this.$router.push({
|
||||||
|
name:'connection'
|
||||||
|
})
|
||||||
|
}else if(index === 2){
|
||||||
|
this.$router.push({
|
||||||
|
name:'corporateCulture'
|
||||||
|
})
|
||||||
|
}else if(index === 3){
|
||||||
|
this.$router.push({
|
||||||
|
name:'inviteJob'
|
||||||
|
})
|
||||||
|
}else {
|
||||||
|
this.$router.push({
|
||||||
|
name:'about'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// this.activeIndex = index;
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style src="./index.css" scoped></style>
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
::v-deep .el-icon-arrow-down:before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue