<template>
|
<div class="home_index">
|
<div class="home_header">
|
<span>面向现代制造的混凝土管片数字工厂</span>
|
</div>
|
<div class="home_content">
|
<div
|
v-for="(item, index) in companyGroups"
|
:key="item.companyId"
|
:class="`content_item content_item_${index + 1}`"
|
@click="eventNavigateTo(item)"
|
>
|
<span>{{ item.companyName }}</span>
|
</div>
|
<div class="home_content_center">
|
<div class="center_text">
|
<span class="text_first">中铁十四局集团房桥</span>
|
<span class="text_second">有限公司</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
companyGroups: [],
|
};
|
},
|
mounted() {
|
this.getAllCompanys();
|
},
|
methods: {
|
//获取所有公司名称
|
getAllCompanys() {
|
this.$api.System.getCompanyLists().then((res) => {
|
if (res.statusMsg === "ok") {
|
this.companyGroups = res.data;
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
});
|
},
|
// 跳转
|
eventNavigateTo(item) {
|
if (item.isFinish === 3) {
|
this.$message.warning("项目待建中.....");
|
} else {
|
// window.location.href=item.targetUrl
|
// this.$router.push({path:'/login'});
|
if (item.targetUrl === "http://111.30.93.212:8089/supipe/") {
|
this.$router.push({ path: "/login" });
|
} else {
|
window.open(item.targetUrl);
|
}
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.home_index {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
background: url("../../assets/home_back.png") no-repeat;
|
background-size: 100% 100%;
|
overflow: auto;
|
|
&::before {
|
content: "";
|
position: absolute;
|
width: 1920px;
|
height: 1080px;
|
// transform: scale(0.9);
|
background: url("../../assets/six.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.home_header {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 1920px;
|
height: 63px;
|
background: url("../../assets/home_header.png") no-repeat;
|
background-size: 100% 100%;
|
|
span {
|
color: #ffffff;
|
font-size: 26px;
|
font-weight: 400;
|
font-family: "fonts";
|
text-shadow: 0px 3px 3px rgba(25, 63, 95, 0.05);
|
background: linear-gradient(0deg, #2ac0ff 0%, #ffffff 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
}
|
|
.home_content {
|
position: relative;
|
width: 1920px;
|
height: calc(1080px - 63px);
|
|
.home_content_center {
|
position: absolute;
|
top: 61%;
|
left: 50%;
|
transform: translateX(-50%) translateY(-50%);
|
width: 1387px;
|
height: 787px;
|
color: #fff;
|
background: url("../../assets/home_center.png") no-repeat;
|
background-size: 100% 100%;
|
|
&::before {
|
content: "";
|
position: absolute;
|
top: 35%;
|
left: 49%;
|
width: 261px;
|
height: 262px;
|
background: url("../../assets/center_bef.png") no-repeat;
|
background-size: 100% 100%;
|
-webkit-animation: rotate-center 15s linear infinite;
|
animation: rotate-center 15s linear infinite;
|
}
|
|
.center_text {
|
position: relative;
|
top: 29%;
|
left: 49%;
|
transform: translateX(-50%);
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
font-size: 40px;
|
font-weight: 600;
|
color: #FFFFFF;
|
|
// .text_first {
|
// text-shadow: 0px 3px 3px rgba(25, 63, 95, 0.05);
|
// background: linear-gradient(0deg, #00ecff 20%, #ffffff 40%);
|
// -webkit-background-clip: text;
|
// -webkit-text-fill-color: transparent;
|
// }
|
|
// .text_second {
|
// text-shadow: 0px 3px 3px rgba(25, 63, 95, 0.05);
|
// background: linear-gradient(0deg, #00ecff 0%, #ffffff 100%);
|
// -webkit-background-clip: text;
|
// -webkit-text-fill-color: transparent;
|
// }
|
}
|
}
|
|
.content_item {
|
position: absolute;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 0 30px;
|
width: 197px;
|
height: 172px;
|
color: #00fcff;
|
font-size: 22px;
|
font-family: Microsoft YaHei;
|
font-weight: bold;
|
background: url("../../assets/content_item.png") no-repeat;
|
background-size: 100% 100%;
|
cursor: pointer;
|
z-index: 100;
|
|
&:hover {
|
padding: 0 125px 40px 80px;
|
width: 342px;
|
height: 305px;
|
color: #ffec84;
|
background: url("../../assets/content_active.png") no-repeat;
|
background-size: 100% 100%;
|
z-index: 101;
|
}
|
}
|
|
.content_item_1 {
|
top: 220px;
|
left: 265px;
|
|
&:hover {
|
top: 183px;
|
left: 219px;
|
}
|
}
|
|
.content_item_2 {
|
top: 325px;
|
left: 440px;
|
|
&:hover {
|
top: 287px;
|
left: 397px;
|
}
|
}
|
|
.content_item_3 {
|
top: 95px;
|
right: 570px;
|
|
&:hover {
|
top: 56px;
|
right: 470px;
|
}
|
}
|
|
.content_item_4 {
|
top: 200px;
|
right: 392px;
|
|
&:hover {
|
top: 161px;
|
right: 291px;
|
}
|
}
|
|
.content_item_5 {
|
top: 406px;
|
right: 392px;
|
|
&:hover {
|
top: 367px;
|
right: 292px;
|
}
|
}
|
|
.content_item_6 {
|
top: 305px;
|
right: 215px;
|
|
&:hover {
|
top: 263px;
|
right: 113px;
|
}
|
}
|
|
.content_item_7 {
|
top: 430px;
|
left: 263px;
|
|
&:hover {
|
top: 389px;
|
left: 220px;
|
}
|
}
|
|
.content_item_8 {
|
top: 505px;
|
right: 215px;
|
|
&:hover {
|
top: 470px;
|
right: 113px;
|
}
|
}
|
}
|
}
|
|
@media screen and (min-width: 1921px) and (min-height: 1081px) {
|
.home_index {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
background: url("../../assets/home_back.png") no-repeat;
|
background-size: 100% 100%;
|
overflow: auto;
|
|
&::before {
|
content: "";
|
position: absolute;
|
width: 2580px;
|
height: 1548px;
|
// transform: scale(0.9);
|
background: url("../../assets/six.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.home_header {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 2580px;
|
height: 73px;
|
background: url("../../assets/home_header.png") no-repeat;
|
background-size: 100% 100%;
|
|
span {
|
color: #ffffff;
|
font-size: 40px;
|
font-weight: 400;
|
font-family: "fonts";
|
text-shadow: 0px 3px 3px rgba(25, 63, 95, 0.05);
|
background: linear-gradient(0deg, #2ac0ff 0%, #ffffff 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
}
|
|
.home_content {
|
position: relative;
|
width: 2580px;
|
height: calc(1548px - 73px);
|
|
.home_content_center {
|
position: absolute;
|
top: 61%;
|
left: 50%;
|
transform: translateX(-50%) translateY(-50%);
|
width: 1838.7px;
|
height: 1124px;
|
color: #fff;
|
background: url("../../assets/home_center.png") no-repeat;
|
background-size: 100% 100%;
|
|
&::before {
|
content: "";
|
position: absolute;
|
top: 35%;
|
left: 49%;
|
width: 350px;
|
height: 353px;
|
background: url("../../assets/center_bef.png") no-repeat;
|
background-size: 100% 100%;
|
-webkit-animation: rotate-center 15s linear infinite;
|
animation: rotate-center 15s linear infinite;
|
}
|
|
.center_text {
|
position: relative;
|
top: 29%;
|
left: 49%;
|
transform: translateX(-50%);
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
font-size: 60px;
|
font-weight: 600;
|
|
.text_first {
|
text-shadow: 0px 3px 3px rgba(25, 63, 95, 0.05);
|
background: linear-gradient(0deg, #00ecff 20%, #ffffff 40%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
|
.text_second {
|
text-shadow: 0px 3px 3px rgba(25, 63, 95, 0.05);
|
background: linear-gradient(0deg, #00ecff 0%, #ffffff 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
}
|
}
|
|
.content_item {
|
position: absolute;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 0 40px;
|
width: 266px;
|
height: 249.5px;
|
color: #00fcff;
|
font-size: 32px;
|
font-family: Microsoft YaHei;
|
font-weight: 600;
|
background: url("../../assets/content_item.png") no-repeat;
|
background-size: 100% 100%;
|
cursor: pointer;
|
z-index: 100;
|
|
&:hover {
|
padding: 0 160px 60px 110px;
|
width: 458px;
|
height: 439px;
|
color: #ffec84;
|
background: url("../../assets/content_active.png") no-repeat;
|
background-size: 100% 100%;
|
z-index: 101;
|
}
|
}
|
|
.content_item_1 {
|
top: 335px;
|
left: 354px;
|
|
&:hover {
|
top: 280px;
|
left: 296px;
|
}
|
}
|
|
.content_item_2 {
|
top: 483px;
|
left: 592px;
|
|
&:hover {
|
top: 426px;
|
left: 534px;
|
}
|
}
|
|
.content_item_3 {
|
top: 154px;
|
right: 766px;
|
|
&:hover {
|
top: 96px;
|
right: 632px;
|
}
|
}
|
|
.content_item_4 {
|
top: 304px;
|
right: 526px;
|
|
&:hover {
|
top: 248px;
|
right: 392px;
|
}
|
}
|
|
.content_item_5 {
|
top: 598px;
|
right: 526px;
|
|
&:hover {
|
top: 543px;
|
right: 392px;
|
}
|
}
|
|
.content_item_6 {
|
top: 453px;
|
right: 288px;
|
|
&:hover {
|
top: 396px;
|
right: 152px;
|
}
|
}
|
|
.content_item_7 {
|
top: 632px;
|
left: 354px;
|
|
&:hover {
|
top: 574px;
|
left: 296px;
|
}
|
}
|
|
.content_item_8 {
|
top: 746px;
|
right: 288px;
|
|
&:hover {
|
top: 690px;
|
right: 154px;
|
}
|
}
|
}
|
}
|
}
|
|
// 中心地球不间断旋转
|
|
@-webkit-keyframes rotate-center {
|
0% {
|
-webkit-transform: translateX(-50%) translateY(-50%) rotate(0);
|
transform: translateX(-50%) translateY(-50%) rotate(0);
|
}
|
100% {
|
-webkit-transform: translateX(-50%) translateY(-50%) rotate(360deg);
|
transform: translateX(-50%) translateY(-50%) rotate(360deg);
|
}
|
}
|
@keyframes rotate-center {
|
0% {
|
-webkit-transform: translateX(-50%) translateY(-50%) rotate(0);
|
transform: translateX(-50%) translateY(-50%) rotate(0);
|
}
|
100% {
|
-webkit-transform: translateX(-50%) translateY(-50%) rotate(360deg);
|
transform: translateX(-50%) translateY(-50%) rotate(360deg);
|
}
|
}
|
</style>
|
