Skip to content

S
smart_gov_platform
Commit 9ad8b2b7 authored by 廖旭伟's avatar 廖旭伟
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents 045a2007 94aafe11
Hide whitespace changes
Inline Side-by-side
Showing with 2507 additions and 4 deletions
portal-manager-ui/admin/src/views/home/home.vue
View file @ 9ad8b2b7
...@@ -196,6 +196,7 @@ export default { ...@@ -196,6 +196,7 @@ export default {
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
z-index: 99;
.logo { .logo {
width: 40px; width: 40px;
} }
...@@ -282,4 +283,4 @@ export default { ...@@ -282,4 +283,4 @@ export default {
.inside { .inside {
background: linear-gradient(90deg, #1845c6 0%, #2999ff 100%) !important; background: linear-gradient(90deg, #1845c6 0%, #2999ff 100%) !important;
} }
</style> </style>
\ No newline at end of file
portal-manager-ui/admin/src/views/thePlatformIsSet/index.css 0 → 100644
View file @ 9ad8b2b7
* {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
:root {
--base-font-size: 0.0625rem;
}
@media screen and (max-width: 1440px) {
:root {
--base-font-size: 0.069vw;
}
}
html {
font-size: var(--base-font-size);
}
body::-webkit-scrollbar {
display: none;
}
.effect-content {
/* height: 200vh;
min-height: 1864rem; */
overflow-y: hidden;
}
.effect-box {
position: sticky;
top: 0;
/* height: 100vh; */
min-height: 932rem;
background-color: #031233;
perspective: 800px;
overflow: hidden;
}
.e-square {
position: absolute;
transform-origin: 50% 50%;
border-radius: 10%;
}
.e-logo {
position: absolute;
transform-origin: 50% 50%;
border-radius: 10rem;
}
.e-icon-box {
position: absolute;
top: 50%;
left: 50%;
transform-origin: 50% 50%;
width: 1200rem;
height: 500rem;
transform: translate(-50%, -100rem);
display: grid;
grid-template-columns: repeat(7, 120rem);
grid-gap: 80rem 30rem;
grid-auto-rows: 120rem;
justify-content: center;
align-content: center;
z-index: 10;
}
.e-icon-box-bg {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(5, 30, 75, 0.66);
}
.e-icon {
position: relative;
background-color: #0089ff;
border-radius: 10rem;
}
.title {
position: absolute;
width: 100%;
height: 64px;
font-size: 53px;
font-family: FZZhengHeiS-EB-GB;
font-weight: 600;
color: #ffffff;
line-height: 64px;
text-align: center;
}
.desc {
position: absolute;
width: 100%;
height: 34px;
font-size: 22px;
font-family: Source Han Sans CN;
color: #ffffff;
line-height: 34px;
text-align: center;
}
portal-manager-ui/admin/src/views/thePlatformIsSet/setPlatformes copy.vue 0 → 100644
View file @ 9ad8b2b7
<template>
<div class="playground" v-if="show">
<div class="square square1"></div>
<div class="square square2"></div>
<div class="square square3"></div>
<div class="square square4"></div>
<div class="square square5"></div>
<div class="square square6"></div>
<div class="square square7"></div>
<div class="square square8"></div>
<div class="square square9"></div>
<div class="square square10"></div>
<div class="square square11"></div>
<div class="square square12"></div>
<div class="square square13"></div>
<div class="square square14"></div>
<div class="square square15"></div>
<div class="square square16"></div>
<div class="square square17"></div>
<div class="logo_box">
<div class="img">
<img src="" alt="" />
</div>
<p class="title">平台设置</p>
</div>
</div>
<div
class="platform w-full h-auto"
:class="{
activeClass: index == 1,
}"
v-else
>
<div
class="pla_cont"
:class="{
activeBox: index == 1,
}"
>
<h1>平台设置</h1>
<div class="pla_modle">
<a-card v-if="platformPermission.length">
<a-card-grid
style="width: 25%"
v-for="v in platformPermission"
:key="v.id"
@click="handleClick(v.url)"
>
<div class="pla_max">
<div class="pla_min">
<img
:src="
v.imgPath
? api + v.imgPath
: require('../../assets/images/RBAC.png')
"
alt
/>
<p class="name">{{ v.name }}</p>
<p class="remark">{{ v.remark }}</p>
</div>
</div>
</a-card-grid>
</a-card>
<a-empty
v-else
:image="require('../../assets/images/empty.png')"
:image-style="{
height: '60px',
}"
>
<span slot="description">
<a href="#API">暂无权限</a>
</span>
</a-empty>
</div>
</div>
</div>
</template>
<!-- <script src="https://cdn.jsdelivr.net/npm/@mojs/core"></script> -->
<script>
import Storage from "@/utils/js/Storage";
export default {
data() {
return {
api: process.env.VUE_APP_API_IMG_URL,
platformPermission: [],
show: true,
index: 0,
};
},
created() {
// setTimeout(() => {
// this.index = 1;
// this.show = false;
// }, 2200);
this.getPlatformChildren();
},
methods: {
// 获取平台子菜单
getPlatformChildren() {
let { menuList } = Storage.get(2, "userInfo");
let platform = menuList.filter((v) => v.name === "平台设置");
if (platform.length) {
this.platformPermission = platform
.map((v) => {
if (v.childList.length) {
return v.childList;
} else {
return [];
}
})
.flat();
}
},
// 跳转
handleClick(url) {
this.$router.push(url);
},
},
};
</script>
<style lang="less" scoped>
@headerH: 4.5rem;
.platform,
.playground {
width: 100%;
height: 100%;
background: url("~@/assets/images/siteArrange/bg-pintai.jpg") center no-repeat;
background-size: cover;
padding-top: @headerH;
.pla_cont {
width: 1210px;
height: 550px;
margin: 120px auto;
text-align: center;
h1 {
font-weight: 700;
font-size: 44px;
color: #ffffff;
padding-bottom: 35px;
}
.pla_modle {
width: 1200px;
height: 440px;
margin: auto;
// background-color: #ffffff;
background: rgba(5, 30, 75, 0.66);
display: flex;
flex-wrap: wrap;
.ant-card {
width: 100%;
height: 100%;
.ant-card-grid {
height: 218px;
cursor: pointer;
}
}
.pla_max {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
.pla_min {
img {
width: 43px;
height: 43px;
}
.name {
font-weight: 700;
font-size: 20px;
color: #000333;
margin-top: 20px;
margin-bottom: 15px;
}
.remark {
font-weight: 400;
font-size: 14px;
color: #666666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
}
}
}
}
.ant-empty {
margin: auto;
}
}
@keyframes scaleAnimation {
// 动画设置
0% {
transform: translate3d(0, 0, 0);
}
30% {
transform: translate3d(0, 0, 160px);
}
60% {
transform: translate3d(0, 0, 240px);
}
90% {
transform: translate3d(0, 0, 320px);
}
100% {
transform: translate3d(0, 0, 320px);
display: none;
}
}
@keyframes logoAnimation {
// 动画设置
0% {
transform: translate3d(0, 0, 0);
}
30% {
transform: translate3d(0, -100px, 160px);
}
60% {
transform: translate3d(0, -250px, 240px);
}
90% {
transform: translate3d(0, -450px, 320px);
}
100% {
transform: translate3d(0, -450px, 320px);
}
}
@keyframes fadeIn {
to {
background: #031233;
}
from {
background: #031233;
}
}
@keyframes toBig {
// 动画设置
0% {
// transform: translate3d(0, 0, 0);
// width: 150px;
// height: 50px;
transform: scale(0.3);
}
30% {
// transform: translate3d(0, 0, -80px);
transform: scale(0.5);
}
60% {
// transform: translate3d(0, 0, -40px);
transform: scale(0.7);
}
90% {
// transform: translate3d(0, 0, -20px);
transform: scale(0.9);
}
100% {
// transform: translate3d(0, 0, 0);
transform: scale(1);
}
}
.activeClass {
animation-name: fadeIn;
animation-duration: 4s; // 动画时长
// animation-iteration-count: infinite; // 永久动画
transition-timing-function: linear; // 动画过渡
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
.activeBox {
animation-name: toBig;
animation-duration: 2s; // 动画时长
// animation-iteration-count: infinite; // 永久动画
transition-timing-function: linear; // 动画过渡
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
.playground {
background: #031233;
// position: relative;
padding-left: 50px;
padding-right: 50px;
perspective: 800px;
animation-name: fadeIn; // 动画名
animation-duration: 2.2s; // 动画时长
// animation-iteration-count: infinite; // 永久动画
transition-timing-function: linear; // 动画过渡
animation-fill-mode: forwards;
animation-iteration-count: 1;
.logo_box {
position: absolute;
width: 211px;
height: auto;
left: 45%;
top: 40%;
animation-name: logoAnimation; // 动画名
animation-duration: 2s; // 动画时长
animation-iteration-count: infinite; // 永久动画
transition-timing-function: linear; // 动画过渡
animation-fill-mode: forwards;
// animation-iteration-count: 1;
.img {
width: 193px;
height: 193px;
background: linear-gradient(0deg, #2254f3 0%, #15c5ff 100%);
border-radius: 50px;
}
.title {
width: 211px;
height: 48px;
font-size: 43px;
font-family: FZZhengHeiS-EB-GB;
font-weight: 400;
color: #ffffff;
line-height: 64px;
}
}
.square {
border-radius: 29px;
position: absolute;
animation-name: scaleAnimation; // 动画名
animation-duration: 2s; // 动画时长
// animation-iteration-count: infinite; // 永久动画
transition-timing-function: linear; // 动画过渡
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
.square1 {
width: 189px;
height: 189px;
background: linear-gradient(120deg, #150d44 0%, #380664 99%);
top: 74px;
left: 40px;
}
.square2 {
width: 121px;
height: 121px;
background: #9c5518;
left: 193px;
top: 406px;
}
.square3 {
width: 104px;
height: 104px;
background: #f8b92b;
top: 345px;
left: 362px;
}
.square4 {
width: 74px;
height: 74px;
background: linear-gradient(0deg, #0d0d34 0%, #101046 100%);
top: 106px;
left: 1000px;
}
.square5 {
width: 36px;
height: 36px;
top: 293px;
left: 1110px;
border-radius: 0;
background: #520967;
}
.square6 {
width: 78px;
height: 78px;
background: linear-gradient(0deg, #00b043 0%, #00d791 100%);
border-radius: 16px;
top: 306px;
left: 1480px;
}
.square7 {
width: 47px;
height: 47px;
background: linear-gradient(0deg, #2342c4 0%, #2d60c5 100%);
border-radius: 12px;
top: 499px;
left: 570px;
}
.square8 {
width: 32px;
height: 31px;
background: linear-gradient(120deg, #150d44 0%, #380664 99%);
border-radius: 9px;
top: 575px;
left: 655px;
}
.square9 {
width: 58px;
height: 58px;
background: #f8a026;
border-radius: 15px;
top: 642px;
left: 512px;
}
.square10 {
width: 90px;
height: 90px;
background: #693214;
border-radius: 24px;
top: 606px;
left: 254px;
}
.square11 {
width: 189px;
height: 189px;
background: linear-gradient(69deg, #200942 0%, #432051 99%);
border-radius: 29px;
left: 107px;
bottom: 5px;
}
.square12 {
width: 47px;
height: 46px;
background: linear-gradient(120deg, #150d44 0%, #380664 99%);
border-radius: 9px;
bottom: 70px;
left: 918px;
}
.square13 {
width: 29px;
height: 29px;
background: #302810;
border-radius: 7px;
top: 510px;
right: 700px;
}
.square14 {
width: 29px;
height: 29px;
background: linear-gradient(0deg, #1e6ff3 0%, #1299f4 100%);
border-radius: 7px;
top: 610px;
right: 608px;
}
.square15 {
width: 119px;
height: 119px;
background: linear-gradient(0deg, #2a4ff3 0%, #3c87f4 100%);
border-radius: 26px;
bottom: 330px;
right: 180px;
}
.square16 {
width: 78px;
height: 78px;
background: linear-gradient(0deg, #2baff5 0%, #59bdf5 100%);
border-radius: 16px;
bottom: 290px;
right: 420px;
}
.square17 {
width: 191px;
height: 191px;
background: #152074;
border-radius: 36px;
bottom: 80px;
right: 2px;
}
}
</style>
portal-manager-ui/admin/src/views/thePlatformIsSet/setPlatformes.vue
View file @ 9ad8b2b7
<template> <template>
<div class="platform w-full h-auto"> <div class="content" v-if="show">
<div class="effect-content">
<div class="effect-box">
<div class="e-icon-box"></div>
</div>
</div>
</div>
<div class="platform w-full h-auto" v-else>
<div class="pla_cont"> <div class="pla_cont">
<h1>平台设置</h1> <h1>平台设置</h1>
<div class="pla_modle"> <div class="pla_modle">
...@@ -44,14 +51,1920 @@ ...@@ -44,14 +51,1920 @@
<script> <script>
import Storage from "@/utils/js/Storage"; import Storage from "@/utils/js/Storage";
import "./index.css";
let this_ = null;
const anim_data = {
domArr: [
// 杂乱的正方形
{
widthStr: "160rem",
backgroundColorStr: "",
backgroundImageStr:
"linear-gradient(-33deg,#8f35ff,rgba(143,53,255,0)),radial-gradient(circle at 62% -28%,rgba(0,45,156,.75) 0,#002d9c 68%,rgba(0,45,156,0) 111%),linear-gradient(116deg,rgba(0,137,255,.2) 1%,rgba(0,186,255,.04) 38%,rgba(68,149,255,.08) 68%,rgba(3,79,255,.16) 88%)",
topStr: "calc(50% - 421rem)",
rightStr: "",
bottomStr: "",
leftStr: "calc(50% - 756rem)",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.4,
opacityAnimMap: new Map([
[0.2, 0.4], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "80rem",
backgroundColorStr: "",
backgroundImageStr:
"linear-gradient(133deg,rgba(255,186,0,0),rgba(255,207,0,.6) 68%),linear-gradient(170deg,#ffc400,#ff9200),linear-gradient(170deg,#ffc400,#ff9200)",
topStr: "calc(50% - 192rem)",
rightStr: "",
bottomStr: "",
leftStr: "calc(50% - 487rem)",
className: "e-square",
parentClassName: "effect-box",
opacity: 1,
opacityAnimMap: new Map([]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "96rem",
backgroundColorStr: "#cc7201",
backgroundImageStr: "",
topStr: "calc(50% - 141rem)",
rightStr: "",
bottomStr: "",
leftStr: "calc(50% - 624rem)",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.8,
opacityAnimMap: new Map([
[0, 0.8],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "40rem",
backgroundColorStr: "",
backgroundImageStr: "linear-gradient(170deg,#3e9eff,#0062ff)",
topStr: "calc(50% - 67rem)",
rightStr: "",
bottomStr: "",
leftStr: "calc(50% - 316rem)",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.75,
opacityAnimMap: new Map([
[0, 0.75],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "46rem",
backgroundColorStr: "",
backgroundImageStr:
"radial-gradient(77deg,#ff8300 0,#ff9200 54%,rgba(255,146,0,0) 128%),linear-gradient(77deg,#ffb400,#ff9200 25%,#ffdf2f 68%,#ff8e00)",
topStr: "calc(50% - 28rem)",
rightStr: "",
bottomStr: "",
leftStr: "calc(50% - 259rem)",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.3,
opacityAnimMap: new Map([
[0, 0.3],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "72rem",
backgroundColorStr: "",
backgroundImageStr:
"radial-gradient(77deg,#ff8300 0,#ff9200 54%,rgba(255,146,0,0) 128%),linear-gradient(77deg,#ffb400,#ff9200 25%,#ffdf2f 68%,#ff8e00)",
topStr: "",
rightStr: "",
bottomStr: "calc(50% - 175rem)",
leftStr: "calc(50% - 579rem)",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.4,
opacityAnimMap: new Map([
[0, 0.4],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "160rem",
backgroundColorStr: "",
backgroundImageStr:
"linear-gradient(220deg,#e58dff,#8f35ff 67%,rgba(143,53,255,0)),radial-gradient(circle at 1.2222% -87%,rgba(0,45,156,.75) 0,#002d9c 171%,rgba(0,45,156,0) 278%),linear-gradient(137deg,rgba(0,137,255,.3),rgba(3,79,255,.24))",
topStr: "",
rightStr: "",
bottomStr: "calc(50% - 412rem)",
leftStr: "calc(50% - 701rem)",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.3,
opacityAnimMap: new Map([
[0, 0.3],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "24rem",
backgroundColorStr: "",
backgroundImageStr:
"linear-gradient(220deg,#e58dff,#8f35ff 67%,rgba(143,53,255,0)),radial-gradient(circle at 1.2222% -87%,rgba(0,45,156,.75) 0,#002d9c 171%,rgba(0,45,156,0) 278%),linear-gradient(137deg,rgba(0,137,255,.3),rgba(3,79,255,.24))",
topStr: "calc(50% - 3rem)",
rightStr: "",
bottomStr: "",
leftStr: "calc(50% - 243rem)",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.3,
opacityAnimMap: new Map([
[0, 0.3],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "96rem",
backgroundColorStr: "",
backgroundImageStr:
"linear-gradient(-27deg,rgba(143,53,255,.8) 11%,rgba(143,53,255,0)),radial-gradient(circle at 62% -28%,rgba(0,45,156,.75) 0,#002d9c 68%,rgba(0,45,156,0) 111%)",
topStr: "calc(50% - 473rem)",
rightStr: "",
bottomStr: "",
leftStr: "calc(50% - 154rem)",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.3,
opacityAnimMap: new Map([
[0, 0.3],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "46rem",
backgroundColorStr: "#ffa800",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "calc(50% - 98rem)",
leftStr: "calc(50% - 362rem)",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.95,
opacityAnimMap: new Map([
[0, 0.95],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "96rem",
backgroundColorStr: "",
backgroundImageStr:
"linear-gradient(180deg,#004fff,rgba(0,45,156,0) 70%)",
topStr: "",
rightStr: "",
bottomStr: "calc(50% - 498rem)",
leftStr: "calc(50% - 165rem)",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.95,
opacityAnimMap: new Map([
[0, 0.95],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "40rem",
backgroundColorStr: "",
backgroundImageStr:
"-webkit-radial-gradient(top,rgba(0,45,156,.75) 0,#002d9c 92%,rgba(0,45,156,0) 166%)",
topStr: "",
rightStr: "",
bottomStr: "calc(50% - 352rem)",
leftStr: "calc(50% - 26rem)",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.35,
opacityAnimMap: new Map([
[0, 0.35],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "64rem",
backgroundColorStr: "",
backgroundImageStr:
"-webkit-radial-gradient(top,rgba(0,45,156,.75) 0,#002d9c 92%,rgba(0,45,156,0) 166%),-webkit-linear-gradient(334deg,rgba(0,137,255,.2) 1%,rgba(0,186,255,.04) 38%,rgba(68,149,255,.08) 68%,rgba(3,79,255,.16) 88%)",
topStr: "calc(50% - 395rem)",
rightStr: "calc(50% - 102rem)",
bottomStr: "",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.4,
opacityAnimMap: new Map([
[0, 0.4],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "24rem",
backgroundColorStr: "",
backgroundImageStr:
"linear-gradient(147deg,#004fff,#002d9c 82%),linear-gradient(153deg,#007fff 5%,#0063ff 95%)",
topStr: "calc(50% - 206rem)",
rightStr: "calc(50% - 38rem)",
bottomStr: "",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.3,
opacityAnimMap: new Map([
[0, 0.3],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "130rem",
backgroundColorStr: "",
backgroundImageStr:
"linear-gradient(147deg,#004fff,#002d9c 82%),linear-gradient(153deg,#007fff 5%,#0063ff 95%)",
topStr: "calc(50% - 263rem)",
rightStr: "calc(50% - 704rem)",
bottomStr: "",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.67,
opacityAnimMap: new Map([
[0, 0.67],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "64rem",
backgroundColorStr: "",
backgroundImageStr: "linear-gradient(128deg,#00ebb6,#00ba46 69%)",
topStr: "calc(50% - 226rem)",
rightStr: "calc(50% - 505rem)",
bottomStr: "",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.95,
opacityAnimMap: new Map([
[0, 0.95],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "24rem",
backgroundColorStr: "",
backgroundImageStr: "linear-gradient(170deg,#ffc400,rgba(255,207,0,.6))",
topStr: "calc(50% - 52rem)",
rightStr: "calc(50% - 218rem)",
bottomStr: "",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.2,
opacityAnimMap: new Map([
[0, 0.2],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "24rem",
backgroundColorStr: "",
backgroundImageStr: "linear-gradient(170deg,#00b6ff,#007fff)",
topStr: "",
rightStr: "calc(50% - 300rem)",
bottomStr: "calc(50% - 49rem)",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.96,
opacityAnimMap: new Map([
[0, 0.96],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "64rem",
backgroundColorStr: "",
backgroundImageStr: "linear-gradient(148deg,#76d2ff,#09baff 99%)",
topStr: "",
rightStr: "calc(50% - 453rem)",
bottomStr: "calc(50% - 170rem)",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.96,
opacityAnimMap: new Map([
[0, 0.96],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "96rem",
backgroundColorStr: "",
backgroundImageStr: "linear-gradient(136deg,#3e9eff 19%,#0062ff)",
topStr: "",
rightStr: "calc(50% - 657rem)",
bottomStr: "calc(50% - 133rem)",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.96,
opacityAnimMap: new Map([
[0, 0.96],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "160rem",
backgroundColorStr: "",
backgroundImageStr:
"linear-gradient(147deg,rgba(0,79,255,.6),rgba(0,45,156,.6) 82%),linear-gradient(153deg,#007fff 5%,#0063ff 95%)",
topStr: "",
rightStr: "calc(50% - 800rem)",
bottomStr: "calc(50% - 345rem)",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.5,
opacityAnimMap: new Map([
[0, 0.5],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "96rem",
backgroundColorStr: "",
backgroundImageStr: "linear-gradient(-2deg,rgba(0,45,156,.75),#002d9c)",
topStr: "",
rightStr: "calc(50% - 213rem)",
bottomStr: "calc(50% - 532rem)",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.2,
opacityAnimMap: new Map([
[0, 0.2],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "96rem",
backgroundColorStr: "",
backgroundImageStr: "linear-gradient(-2deg,rgba(0,45,156,.75),#002d9c)",
topStr: "",
rightStr: "calc(50% - 213rem)",
bottomStr: "calc(50% - 532rem)",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.2,
opacityAnimMap: new Map([
[0, 0.2],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
// logo 图标
{
widthStr: "190rem",
backgroundColorStr: "",
backgroundStr:
"url(" +
require("@/assets/images/siteArrange/logo-pingtai.png") +
") center no-repeat",
topStr: "calc(50% - 90rem)",
rightStr: "",
bottomStr: "",
leftStr: "calc(50% - 90rem)",
className: "e-square",
parentClassName: "effect-box",
opacity: 1,
index: 99,
opacityAnimMap: new Map([
[0, 1], // [帧，值]
[0.6, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
scale: 1,
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
scale: 1,
},
],
[
1,
{
translate3d: { x: 0, y: -1300, z: 800 },
scale: 1.5,
},
],
]),
},
// logo 图标
{
widthStr: "180rem",
backgroundColorStr: "",
backgroundImageStr: "linear-gradient(0deg, #2254F3 0%, #15C5FF 100%)",
topStr: "calc(50% - 90rem)",
rightStr: "",
bottomStr: "",
leftStr: "calc(50% - 90rem)",
className: "e-square",
parentClassName: "effect-box",
opacity: 1,
opacityAnimMap: new Map([
[0, 1], // [帧，值]
[0.6, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
scale: 1,
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
scale: 1,
},
],
[
1,
{
translate3d: { x: 0, y: -1300, z: 800 },
scale: 1.5,
},
],
]),
},
// 平台设置字体
{
widthStr: "200rem",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "calc(62%)",
rightStr: "",
bottomStr: "",
leftStr: "calc(50% - 98rem)",
className: "e-square",
parentClassName: "effect-box",
name: "平台设置",
fontSizeStr: "48rem",
fontColorStr: "#ffffff",
opacity: 1,
opacityAnimMap: new Map([
[0, 1], // [帧，值]
[0.6, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
scale: 1,
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
scale: 1,
},
],
[
1,
{
translate3d: { x: 0, y: -1300, z: 800 },
scale: 1.5,
},
],
]),
},
// e-icon-box 相关元素
// e-icon-box-bg
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon-box-bg",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.6, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 10 },
scale: 0.8,
},
transformAnimMap: new Map([
[
0.6,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 0.8,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
// e-icon-box 上部字体
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "calc(-38%)",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "title",
parentClassName: "e-icon-box",
name: "平台设置",
opacity: 0,
fontColorStr: "#ffffff",
opacityAnimMap: new Map([
[0.6, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 10 },
scale: 0.8,
},
transformAnimMap: new Map([
[
0.6,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 0.8,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "calc(-16%)",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "desc",
parentClassName: "e-icon-box",
name: "运用以人工智能为代表的新技术，驱动政务服务模式创新，为人民提供更加智慧化、人性化的政务服务。",
opacity: 0,
fontColorStr: "#ffffff",
opacityAnimMap: new Map([
[0.6, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 10 },
scale: 0.8,
},
transformAnimMap: new Map([
[
0.6,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 0.8,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
// e-icon 上行
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.1, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: 450, y: 80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 450, y: 80, z: 10 },
scale: 0,
},
],
[
0.1,
{
translate3d: { x: 450, y: 100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.3, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: 300, y: 80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 300, y: 80, z: 10 },
scale: 0,
},
],
[
0.3,
{
translate3d: { x: 300, y: 100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.5, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: 150, y: 80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 150, y: 80, z: 10 },
scale: 0,
},
],
[
0.5,
{
translate3d: { x: 150, y: 100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.7, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 0, y: 80, z: 10 },
scale: 0,
},
],
[
0.7,
{
translate3d: { x: 0, y: 100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.5, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: -150, y: 80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: -150, y: 80, z: 10 },
scale: 0,
},
],
[
0.5,
{
translate3d: { x: -150, y: 100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.3, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: -300, y: 80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: -300, y: 80, z: 10 },
scale: 0,
},
],
[
0.3,
{
translate3d: { x: -300, y: 100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.1, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: -450, y: 80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: -450, y: 80, z: 10 },
scale: 0,
},
],
[
0.1,
{
translate3d: { x: -450, y: 100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
// e-icon 下行
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.1, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: 450, y: -80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 450, y: -80, z: 10 },
scale: 0,
},
],
[
0.1,
{
translate3d: { x: 450, y: -100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.3, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: 300, y: -80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 300, y: -80, z: 10 },
scale: 0,
},
],
[
0.3,
{
translate3d: { x: 300, y: -100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.5, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: 150, y: -80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 150, y: -80, z: 10 },
scale: 0,
},
],
[
0.5,
{
translate3d: { x: 150, y: -100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.7, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: 0, y: -80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 0, y: -80, z: 10 },
scale: 0,
},
],
[
0.7,
{
translate3d: { x: 0, y: -100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.5, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: -150, y: -80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: -150, y: -80, z: 10 },
scale: 0,
},
],
[
0.5,
{
translate3d: { x: -150, y: -100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.3, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: -300, y: -80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: -300, y: -80, z: 10 },
scale: 0,
},
],
[
0.3,
{
translate3d: { x: -300, y: -100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.1, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: -450, y: -80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: -450, y: -80, z: 10 },
scale: 0,
},
],
[
0.1,
{
translate3d: { x: -450, y: -100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
],
};
// 特效管理
class EffectManager {
constructor(data = anim_data) {
data.domArr.forEach((item) => {
const entity = new Entity();
// 添加形状组件
entity.addComp(
new ShapeComp({
shapeAtt: item,
})
);
// 添加动画组件
entity.addComp(
new ShapeAnimComp({
opacityAnimMap: item.opacityAnimMap,
transformAnimMap: item.transformAnimMap,
})
);
// 添加滚动事件组件
entity.addComp(
new RollEventComp({
cb: function (scrollPos) {
this.getComp("ShapeAnimComp").changeOpacity(
scrollPos,
this.getComp("ShapeComp")
);
this.getComp("ShapeAnimComp").changeTransform(
scrollPos,
this.getComp("ShapeComp")
);
}.bind(entity),
})
);
});
}
}
// 单体
class Entity {
constructor() {
this._compMap = new Map();
}
addComp(comp) {
this._compMap.set(comp.name, comp);
}
getComp(compName) {
return this._compMap.get(compName);
}
}
// 形状组件
class ShapeComp {
constructor(data) {
this.name = "ShapeComp";
this._shapeDom = document.createElement("div");
this._shapeDom.classList.add(data.shapeAtt.className);
this._shapeDom.style.width = data.shapeAtt.widthStr;
this._shapeDom.style.height = data.shapeAtt.widthStr;
data.shapeAtt.backgroundImageStr
? (this._shapeDom.style.backgroundImage =
data.shapeAtt.backgroundImageStr)
: data.shapeAtt.backgroundStr
? (this._shapeDom.style.background = data.shapeAtt.backgroundStr)
: "";
this._shapeDom.style.top = data.shapeAtt.topStr;
this._shapeDom.style.right = data.shapeAtt.rightStr;
this._shapeDom.style.bottom = data.shapeAtt.bottomStr;
this._shapeDom.style.left = data.shapeAtt.leftStr;
this._shapeDom.style.backgroundColor = data.shapeAtt.backgroundColorStr;
data.shapeAtt.fontColorStr
? (this._shapeDom.style.color = data.shapeAtt.fontColorStr)
: "";
data.shapeAtt.fontSizeStr
? (this._shapeDom.style.fontSize = data.shapeAtt.fontSizeStr)
: "";
data.shapeAtt.name ? (this._shapeDom.innerHTML = data.shapeAtt.name) : "";
data.shapeAtt.index
? (this._shapeDom.style.zIndex = data.shapeAtt.index)
: "";
document
.getElementsByClassName(data.shapeAtt.parentClassName)[0]
.appendChild(this._shapeDom);
this._opacity = null;
this._transform = null;
this.opacity = data.shapeAtt.opacity;
this.transform = data.shapeAtt.transform;
}
set opacity(value) {
if (value !== this._opacity) {
this._shapeDom.style.opacity = value + "";
}
this._opacity = value;
}
get opacity() {
return this._opacity;
}
set transform(value) {
let transformStr = "";
if (value.translate3d !== undefined) {
transformStr = `translate3d(${value.translate3d.x}rem, ${value.translate3d.y}rem, ${value.translate3d.z}rem)`;
}
if (value.scale !== undefined) {
transformStr += `scale(${value.scale})`;
}
this._shapeDom.style.transform = transformStr;
this._transform = value;
}
get transform() {
return this._transform;
}
}
// 动画组件
class ShapeAnimComp {
constructor(data) {
this.name = "ShapeAnimComp";
this._opacityAnimMap = data.opacityAnimMap;
this._transformAnimMap = data.transformAnimMap;
}
// 返回根据滚动改变的状态值
_getStateValue(scrollPos, beginPos, endPos, beginValue, endValue) {
if (beginValue === endValue) {
return beginValue;
}
const value =
((endValue - beginValue) * (scrollPos - beginPos)) / (endPos - beginPos) +
beginValue;
return Number(value.toFixed(3));
}
// 根据滚动值改变透明度
changeOpacity(scrollPos, shapeComp) {
if (this._opacityAnimMap.size === 0) {
return;
}
const keyArr = [...this._opacityAnimMap.keys()].sort((a, b) => a - b);
const beginPos = keyArr.findLast((item) => item <= scrollPos);
let beginValue = this._opacityAnimMap.get(beginPos);
const endPos = keyArr.find((item) => item >= scrollPos);
let endValue = this._opacityAnimMap.get(endPos);
if (beginValue === undefined && endValue !== undefined) {
beginValue = endValue;
} else if (beginValue !== undefined && endValue === undefined) {
endValue = beginValue;
} else if (beginValue === undefined && endValue === undefined) {
return;
}
const opacity = this._getStateValue(
scrollPos,
beginPos,
endPos,
beginValue,
endValue
);
shapeComp.opacity = opacity;
}
// 根据滚动值改变 transform
changeTransform(scrollPos, shapeComp) {
if (this._transformAnimMap.size === 0) {
return;
}
let transform = {};
const keyArr = [...this._transformAnimMap.keys()].sort((a, b) => a - b);
const beginPos = keyArr.findLast((item) => item <= scrollPos);
let beginValue = this._transformAnimMap.get(beginPos);
const endPos = keyArr.find((item) => item >= scrollPos);
let endValue = this._transformAnimMap.get(endPos);
if (beginValue === undefined && endValue !== undefined) {
beginValue = endValue;
} else if (beginValue !== undefined && endValue === undefined) {
endValue = beginValue;
} else if (beginValue === undefined && endValue === undefined) {
return;
}
// translate3d
if (beginValue.translate3d !== undefined) {
const translate3dx = this._getStateValue(
scrollPos,
beginPos,
endPos,
beginValue.translate3d.x,
endValue.translate3d.x
);
const translate3dy = this._getStateValue(
scrollPos,
beginPos,
endPos,
beginValue.translate3d.y,
endValue.translate3d.y
);
const translate3dz = this._getStateValue(
scrollPos,
beginPos,
endPos,
beginValue.translate3d.z,
endValue.translate3d.z
);
transform.translate3d = {
x: translate3dx,
y: translate3dy,
z: translate3dz,
};
}
// scale
if (beginValue.scale !== undefined) {
const scale = this._getStateValue(
scrollPos,
beginPos,
endPos,
beginValue.scale,
endValue.scale
);
transform.scale = scale;
}
shapeComp.transform = transform;
}
}
// 滚动事件组件
class RollEventComp {
constructor(data) {
this.name = "RollEventComp";
let index = 0;
let set = setInterval(function () {
index += 0.004;
data.cb(index);
if (index >= 1) {
clearInterval(set);
document.getElementsByClassName("content")[0].style.background =
"url(" +
require("@/assets/images/siteArrange/bg-pintai.jpg") +
") no-repeat";
document.getElementsByClassName("effect-box")[0].style.backgroundColor =
"unset";
}
});
// window.addEventListener("scroll", (event) => {
// const scrollTop = document.documentElement.scrollTop;
// const scrollHeight = document.documentElement.scrollHeight;
// const clientHeight = document.documentElement.clientHeight;
// let scrollPos = 0;
// if (scrollTop + clientHeight >= scrollHeight - 5) {
// scrollPos = 1;
// } else if (scrollTop === 0) {
// scrollPos = 0;
// } else {
// scrollPos = Number(
// (scrollTop / (scrollHeight - clientHeight)).toFixed(3)
// );
// }
// console.log(scrollPos, "###########");
// data.cb(scrollPos);
// });
}
}
export default { export default {
data() { data() {
return { return {
api: process.env.VUE_APP_API_IMG_URL, api: process.env.VUE_APP_API_IMG_URL,
platformPermission: [], platformPermission: [],
show: true,
}; };
}, },
created() { created() {},
mounted() {
this_ = this;
new EffectManager();
this.getPlatformChildren(); this.getPlatformChildren();
}, },
methods: { methods: {
...@@ -80,7 +1993,8 @@ export default { ...@@ -80,7 +1993,8 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@headerH: 4.5rem; @headerH: 4.5rem;
.platform { .platform,
.content {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url("~@/assets/images/siteArrange/bg-pintai.jpg") center no-repeat; background: url("~@/assets/images/siteArrange/bg-pintai.jpg") center no-repeat;
...@@ -153,4 +2067,7 @@ export default { ...@@ -153,4 +2067,7 @@ export default {
margin: auto; margin: auto;
} }
} }
.content {
background: #031233;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment