2024-04-12 09:26:48 +08:00
|
|
|
<template>
|
|
|
|
<div class="module">
|
2024-06-14 09:40:18 +08:00
|
|
|
<div class="displayFlex left_bg">
|
|
|
|
<div class="flex1">
|
|
|
|
<div class="yd_title left_1">
|
|
|
|
<div class="animate-border">
|
|
|
|
<i></i>
|
|
|
|
<i></i>
|
2024-04-12 09:26:48 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2024-06-14 09:40:18 +08:00
|
|
|
</div>
|
|
|
|
<div class="displayFlex center_bg">
|
|
|
|
<div class="flex1">
|
|
|
|
<div class="yd_title center_0">
|
|
|
|
<div class="animate-border">
|
|
|
|
<i></i>
|
|
|
|
<i></i>
|
2024-04-12 09:26:48 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
2024-06-14 09:40:18 +08:00
|
|
|
|
2024-04-12 09:26:48 +08:00
|
|
|
</div>
|
2024-06-14 09:40:18 +08:00
|
|
|
<div class="flex1">
|
|
|
|
<div class="yd_title center_1">
|
|
|
|
<div class="animate-border">
|
|
|
|
<i></i>
|
|
|
|
<i></i>
|
2024-04-12 09:26:48 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2024-06-14 09:40:18 +08:00
|
|
|
<div class="displayFlex right_bg">
|
2024-04-12 09:26:48 +08:00
|
|
|
<div class="flex1">
|
2024-06-14 09:40:18 +08:00
|
|
|
<div class="yd_title right_1">
|
|
|
|
<div class="animate-border">
|
|
|
|
<i></i>
|
|
|
|
<i></i>
|
|
|
|
</div>
|
2024-04-12 09:26:48 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex1">
|
2024-06-14 09:40:18 +08:00
|
|
|
<div class="yd_title right_2">
|
|
|
|
<div class="animate-border">
|
|
|
|
<i></i>
|
|
|
|
<i></i>
|
2024-04-12 09:26:48 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex1">
|
2024-06-14 09:40:18 +08:00
|
|
|
<div class="yd_title right_3">
|
|
|
|
<div class="animate-border">
|
|
|
|
<i></i>
|
|
|
|
<i></i>
|
2024-04-12 09:26:48 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2024-06-14 09:40:18 +08:00
|
|
|
</div>
|
2024-04-12 09:26:48 +08:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
2024-06-14 09:40:18 +08:00
|
|
|
import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
|
|
|
|
import http from "@/utils/request.js";
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
onBeforeMount(() => {
|
|
|
|
|
|
|
|
});
|
2024-04-12 09:26:48 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.displayFlex {
|
2024-06-14 09:40:18 +08:00
|
|
|
box-sizing: border-box;
|
|
|
|
height: 100%;
|
2024-04-12 09:26:48 +08:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2024-06-14 09:40:18 +08:00
|
|
|
// flex: 1;
|
|
|
|
width: 30%;
|
2024-04-12 09:26:48 +08:00
|
|
|
}
|
2024-06-14 09:40:18 +08:00
|
|
|
|
2024-04-12 09:26:48 +08:00
|
|
|
.flex1 {
|
|
|
|
flex: 1;
|
2024-06-14 09:40:18 +08:00
|
|
|
// padding: 0 28px;
|
2024-04-12 09:26:48 +08:00
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
2024-06-14 09:40:18 +08:00
|
|
|
|
2024-04-12 09:26:48 +08:00
|
|
|
.module {
|
|
|
|
display: flex;
|
2024-06-14 09:40:18 +08:00
|
|
|
width: 100%;
|
2024-04-12 09:26:48 +08:00
|
|
|
}
|
|
|
|
|
2024-06-14 09:40:18 +08:00
|
|
|
.left_bg {
|
|
|
|
width: 642px;
|
|
|
|
// height: 100%;
|
|
|
|
box-sizing: border-box;
|
|
|
|
padding-left: 50px;
|
|
|
|
padding-right: 20px;
|
|
|
|
margin-right: 28px;
|
|
|
|
background-image: url(@/assets/images/left_bg.png);
|
2024-04-12 09:26:48 +08:00
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: 100% 100%;
|
2024-06-14 09:40:18 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.center_bg {
|
|
|
|
width: 582px;
|
2024-04-12 09:26:48 +08:00
|
|
|
box-sizing: border-box;
|
2024-06-14 09:40:18 +08:00
|
|
|
padding-left: 10px;
|
|
|
|
padding-right: 10px;
|
|
|
|
background-image: url(@/assets/images/center_bg.png);
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.right_bg {
|
|
|
|
width: 642px;
|
|
|
|
box-sizing: border-box;
|
|
|
|
padding-right: 50px;
|
|
|
|
padding-left: 20px;
|
|
|
|
margin-left: 28px;
|
|
|
|
background-image: url(@/assets/images/right_bg.png);
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.left_1 {
|
|
|
|
background-image: url(@/assets/images/sjfx/lnrsjfx.png);
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.center_0 {
|
|
|
|
background-image: url(@/assets/images/sjfx/bft.png);
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.center_1 {
|
|
|
|
background-image: url(@/assets/images/sjfx/ymt.png);
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.right_1 {
|
|
|
|
background-image: url(@/assets/images/sjfx/wjybry.png);
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.right_2 {
|
|
|
|
background-image: url(@/assets/images/sjfx/xxts.png);
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
.right_3 {
|
|
|
|
background-image: url(@/assets/images/sjfx/jtzk.png);
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.yd_title {
|
|
|
|
box-sizing: border-box;
|
|
|
|
width: 98%;
|
|
|
|
height: 42px;
|
2024-04-12 09:26:48 +08:00
|
|
|
position: relative;
|
2024-06-14 09:40:18 +08:00
|
|
|
overflow: hidden;
|
2024-04-12 09:26:48 +08:00
|
|
|
.text {
|
2024-06-14 09:40:18 +08:00
|
|
|
display: flex;
|
|
|
|
position: absolute;
|
2024-04-12 09:26:48 +08:00
|
|
|
font-size: 16px;
|
|
|
|
font-family: SourceHanSansCN;
|
|
|
|
font-weight: bold;
|
|
|
|
color: #ffffff;
|
|
|
|
position: absolute;
|
2024-06-14 09:40:18 +08:00
|
|
|
right: 5px;
|
2024-04-12 09:26:48 +08:00
|
|
|
top: 3px;
|
2024-06-14 09:40:18 +08:00
|
|
|
} /* 利用伪元素和两个i元素产生4条线 */
|
|
|
|
.animate-border {
|
|
|
|
position: absolute;
|
|
|
|
top: 0px;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
&::before,
|
|
|
|
&::after {
|
|
|
|
content: "";
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: 2px;
|
2024-04-12 09:26:48 +08:00
|
|
|
}
|
2024-06-14 09:40:18 +08:00
|
|
|
i {
|
|
|
|
position: absolute;
|
|
|
|
display: inline-block;
|
|
|
|
height: 100%;
|
|
|
|
width: 2px;
|
2024-04-12 09:26:48 +08:00
|
|
|
}
|
2024-06-14 09:40:18 +08:00
|
|
|
&::before {
|
|
|
|
top: 0;
|
|
|
|
left: -100%;
|
|
|
|
background-image: linear-gradient(
|
|
|
|
90deg,
|
|
|
|
transparent,
|
|
|
|
#03e9f4,
|
|
|
|
transparent
|
|
|
|
);
|
2024-04-12 09:26:48 +08:00
|
|
|
|
2024-06-14 09:40:18 +08:00
|
|
|
animation: one 4s linear infinite;
|
2024-04-12 09:26:48 +08:00
|
|
|
}
|
2024-06-14 09:40:18 +08:00
|
|
|
i:nth-child(1) {
|
|
|
|
top: -100%;
|
|
|
|
right: 0;
|
|
|
|
background-image: linear-gradient(
|
|
|
|
180deg,
|
|
|
|
transparent,
|
|
|
|
#03e9f4,
|
|
|
|
transparent
|
|
|
|
);
|
|
|
|
/* 动画名称 动画持续时间 动画渲染函数 动画延迟时间 动画执行次数 */
|
|
|
|
animation: two 4s linear 1s infinite;
|
2024-04-12 09:26:48 +08:00
|
|
|
}
|
2024-06-14 09:40:18 +08:00
|
|
|
&::after {
|
|
|
|
bottom: 0;
|
|
|
|
right: -100%;
|
|
|
|
background-image: linear-gradient(
|
|
|
|
-90deg,
|
|
|
|
transparent,
|
|
|
|
#03e9f4,
|
|
|
|
transparent
|
|
|
|
);
|
|
|
|
animation: three 4s linear 2s infinite;
|
|
|
|
}
|
|
|
|
i:nth-child(2) {
|
|
|
|
bottom: -100%;
|
|
|
|
left: 0;
|
|
|
|
background-image: linear-gradient(
|
|
|
|
360deg,
|
|
|
|
transparent,
|
|
|
|
#03e9f4,
|
|
|
|
transparent
|
|
|
|
);
|
|
|
|
animation: four 4s linear 3s infinite;
|
2024-04-12 09:26:48 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2024-06-14 09:40:18 +08:00
|
|
|
@keyframes one {
|
|
|
|
0% {
|
|
|
|
left: -100%;
|
|
|
|
}
|
|
|
|
50%,
|
|
|
|
100% {
|
|
|
|
left: 100%;
|
2024-04-12 09:26:48 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-06-14 09:40:18 +08:00
|
|
|
@keyframes two {
|
|
|
|
0% {
|
|
|
|
top: -100%;
|
2024-04-12 09:26:48 +08:00
|
|
|
}
|
2024-06-14 09:40:18 +08:00
|
|
|
50%,
|
|
|
|
100% {
|
|
|
|
top: 100%;
|
2024-04-12 09:26:48 +08:00
|
|
|
}
|
|
|
|
}
|
2024-06-14 09:40:18 +08:00
|
|
|
|
|
|
|
@keyframes three {
|
|
|
|
0% {
|
|
|
|
right: -100%;
|
2024-04-12 09:26:48 +08:00
|
|
|
}
|
2024-06-14 09:40:18 +08:00
|
|
|
50%,
|
|
|
|
100% {
|
|
|
|
right: 100%;
|
2024-04-12 09:26:48 +08:00
|
|
|
}
|
|
|
|
}
|
2024-06-14 09:40:18 +08:00
|
|
|
|
|
|
|
@keyframes four {
|
|
|
|
0% {
|
|
|
|
bottom: -100%;
|
2024-04-12 09:26:48 +08:00
|
|
|
}
|
2024-06-14 09:40:18 +08:00
|
|
|
50%,
|
|
|
|
100% {
|
|
|
|
bottom: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mechanism {
|
|
|
|
background-image: url(@/assets/YLTitle/titleImg10.png);
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.flex11 {
|
|
|
|
padding: 12px 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 滚动条整体部分 */
|
|
|
|
.rolling::-webkit-scrollbar {
|
|
|
|
width: 5px;
|
|
|
|
// height: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 滚动槽 */
|
|
|
|
.rolling::-webkit-scrollbar-track {
|
|
|
|
border-radius: 1px;
|
|
|
|
background: rgba(0, 128, 231, 0.56);
|
|
|
|
-webkit-box-shadow: inset 0 0 6px rgba(139, 139, 139, 0.3);
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 滚动条滑块样式 */
|
|
|
|
.rolling::-webkit-scrollbar-thumb {
|
|
|
|
background-clip: content-box;
|
|
|
|
border-radius: 6px;
|
|
|
|
background: rgba(0, 162, 231, 1);
|
|
|
|
-webkit-box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.3);
|
2024-04-12 09:26:48 +08:00
|
|
|
}
|
|
|
|
</style>
|