开发对接页面框架搭建
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