Skip to content

S
smart_gov_platform
Commit 45025599 authored by 姬鋆屾's avatar 姬鋆屾
Browse files
Options

tui

parent 94aafe11
Show whitespace changes
Inline Side-by-side
Showing with 1882 additions and 637 deletions
portal-manager-ui/admin/src/views/thePlatformIsSet/index.css
View file @ 45025599
* {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
:root {
--base-font-size: 0.0625rem;
}
......@@ -55,7 +46,24 @@ body::-webkit-scrollbar {
.e-icon-box {
position: absolute;
top: 50%;
top: 48%;
left: 50%;
transform-origin: 50% 50%;
width: 1200rem;
height: 500rem;
transform: translate(-50%, -100rem);
display: grid;
grid-template-columns: repeat(4, 250rem);
grid-gap: 30rem;
grid-auto-rows: 200rem;
justify-content: center;
align-content: center;
z-index: 10;
}
/* .e-icon-box {
position: absolute;
top: 48%;
left: 50%;
transform-origin: 50% 50%;
width: 1200rem;
......@@ -65,13 +73,27 @@ body::-webkit-scrollbar {
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 a {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
color: #ffffff;
}
.e-icon span {
margin-top: 20px;
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #ffffff;
}
.e-icon-box-bg {
position: absolute;
width: 100%;
......@@ -81,7 +103,7 @@ body::-webkit-scrollbar {
.e-icon {
position: relative;
background-color: #0089ff;
/* background-color: #0089ff; */
border-radius: 10rem;
}
.title {
......
portal-manager-ui/admin/src/views/thePlatformIsSet/setPlatformes.vue
View file @ 45025599
<template>
<div class="content" v-if="show">
<div class="modal">
<div class="effect-content">
<div class="effect-box">
<div class="e-icon-box"></div>
</div>
</div>
</div>
</div>
<div class="platform w-full h-auto" v-else>
<div class="pla_cont">
<h1>平台设置</h1>
......@@ -52,7 +54,9 @@
<script>
import Storage from "@/utils/js/Storage";
import "./index.css";
let this_ = null;
import { mapState, mapMutations, mapGetters } from "vuex";
let _this = null;
const anim_data = {
domArr: [
// 杂乱的正方形
......@@ -915,7 +919,7 @@ const anim_data = {
leftStr: "calc(50% - 98rem)",
className: "e-square",
parentClassName: "effect-box",
name: "平台设置",
text: "平台设置",
fontSizeStr: "48rem",
fontColorStr: "#ffffff",
opacity: 1,
......@@ -944,7 +948,6 @@ const anim_data = {
],
]),
},
// e-icon-box 相关元素
// e-icon-box-bg
{
......@@ -994,7 +997,7 @@ const anim_data = {
leftStr: "",
className: "title",
parentClassName: "e-icon-box",
name: "平台设置",
text: "平台设置",
opacity: 0,
fontColorStr: "#ffffff",
opacityAnimMap: new Map([
......@@ -1032,7 +1035,7 @@ const anim_data = {
leftStr: "",
className: "desc",
parentClassName: "e-icon-box",
name: "运用以人工智能为代表的新技术，驱动政务服务模式创新，为人民提供更加智慧化、人性化的政务服务。",
text: "运用以人工智能为代表的新技术，驱动政务服务模式创新，为人民提供更加智慧化、人性化的政务服务。",
opacity: 0,
fontColorStr: "#ffffff",
opacityAnimMap: new Map([
......@@ -1060,929 +1063,2143 @@ const anim_data = {
],
]),
},
// 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,
// },
// ],
// ]),
// },
// {
// 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,
// },
// ],
// ]),
// },
],
]),
},
{
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,
};
// 特效管理
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.text ? (this._shapeDom.innerHTML = data.shapeAtt.text) : "";
data.shapeAtt.index
? (this._shapeDom.style.zIndex = data.shapeAtt.index)
: "";
if (data.shapeAtt.url) {
let aE = document.createElement("a");
let imgDom = document.createElement("div");
imgDom.style.width = "66rem";
imgDom.style.height = "66rem";
imgDom.style.background =
"url(" + _this.api + data.shapeAtt.imgPath + ") no-repeat";
imgDom.style.backgroundSize = "100%";
let txtDom = document.createElement("span");
txtDom.innerHTML = data.shapeAtt.name;
aE.setAttribute("href", "#" + data.shapeAtt.url);
aE.appendChild(imgDom);
aE.appendChild(txtDom);
this._shapeDom.appendChild(aE);
}
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 >= 0.43) {
document.getElementsByClassName(
"effect-box"
)[0].style.backgroundColor = `rgba(3, 18, 51, ${0 ? 0 : 0.5 - index})`;
}
if (index >= 1) {
clearInterval(set);
}
});
// 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 {
data() {
return {
api: process.env.VUE_APP_API_IMG_URL,
platformPermission: [],
show: true,
};
},
created() {},
mounted() {
_this = this;
this.getPlatformChildren();
},
computed: {
...mapState("user", ["siteList", "userData"]),
},
methods: {
// 获取平台子菜单
getPlatformChildren() {
let { menuList } = this.userData;
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();
}
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.1,
0,
{
translate3d: { x: -450, y: 100, z: 10 },
scale: 0.5,
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
// e-icon 下行
{
widthStr: "",
widthStr: "40rem",
backgroundColorStr: "",
backgroundImageStr: "",
backgroundImageStr:
"-webkit-radial-gradient(top,rgba(0,45,156,.75) 0,#002d9c 92%,rgba(0,45,156,0) 166%)",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
bottomStr: "calc(50% - 352rem)",
leftStr: "calc(50% - 26rem)",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.35,
opacityAnimMap: new Map([
[0.1, 0], // [帧，值]
[0, 0.35],
[1, 1],
]),
transform: {
translate3d: { x: 450, y: -80, z: 10 },
scale: 0,
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 450, y: -80, z: 10 },
scale: 0,
},
],
[
0.1,
0,
{
translate3d: { x: 450, y: -100, z: 10 },
scale: 0.5,
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "",
widthStr: "64rem",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
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-icon",
parentClassName: "e-icon-box",
opacity: 0,
className: "e-square",
parentClassName: "effect-box",
opacity: 0.4,
opacityAnimMap: new Map([
[0.3, 0], // [帧，值]
[0, 0.4],
[1, 1],
]),
transform: {
translate3d: { x: 300, y: -80, z: 10 },
scale: 0,
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 300, y: -80, z: 10 },
scale: 0,
},
],
[
0.3,
0,
{
translate3d: { x: 300, y: -100, z: 10 },
scale: 0.5,
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "",
widthStr: "24rem",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
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-icon",
parentClassName: "e-icon-box",
opacity: 0,
className: "e-square",
parentClassName: "effect-box",
opacity: 0.3,
opacityAnimMap: new Map([
[0.5, 0], // [帧，值]
[0, 0.3],
[1, 1],
]),
transform: {
translate3d: { x: 150, y: -80, z: 10 },
scale: 0,
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 150, y: -80, z: 10 },
scale: 0,
},
],
[
0.5,
0,
{
translate3d: { x: 150, y: -100, z: 10 },
scale: 0.5,
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "",
widthStr: "130rem",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
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-icon",
parentClassName: "e-icon-box",
opacity: 0,
className: "e-square",
parentClassName: "effect-box",
opacity: 0.67,
opacityAnimMap: new Map([
[0.7, 0], // [帧，值]
[0, 0.67],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: -80, z: 10 },
scale: 0,
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 0, y: -80, z: 10 },
scale: 0,
},
],
[
0.7,
0,
{
translate3d: { x: 0, y: -100, z: 10 },
scale: 0.5,
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "",
widthStr: "64rem",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
backgroundImageStr: "linear-gradient(128deg,#00ebb6,#00ba46 69%)",
topStr: "calc(50% - 226rem)",
rightStr: "calc(50% - 505rem)",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
className: "e-square",
parentClassName: "effect-box",
opacity: 0.95,
opacityAnimMap: new Map([
[0.5, 0], // [帧，值]
[0, 0.95],
[1, 1],
]),
transform: {
translate3d: { x: -150, y: -80, z: 10 },
scale: 0,
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: -150, y: -80, z: 10 },
scale: 0,
},
],
[
0.5,
0,
{
translate3d: { x: -150, y: -100, z: 10 },
scale: 0.5,
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "",
widthStr: "24rem",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
backgroundImageStr:
"linear-gradient(170deg,#ffc400,rgba(255,207,0,.6))",
topStr: "calc(50% - 52rem)",
rightStr: "calc(50% - 218rem)",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
className: "e-square",
parentClassName: "effect-box",
opacity: 0.2,
opacityAnimMap: new Map([
[0.3, 0], // [帧，值]
[0, 0.2],
[1, 1],
]),
transform: {
translate3d: { x: -300, y: -80, z: 10 },
scale: 0,
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: -300, y: -80, z: 10 },
scale: 0,
},
],
[
0.3,
0,
{
translate3d: { x: -300, y: -100, z: 10 },
scale: 0.5,
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "",
widthStr: "24rem",
backgroundColorStr: "",
backgroundImageStr: "",
backgroundImageStr: "linear-gradient(170deg,#00b6ff,#007fff)",
topStr: "",
rightStr: "",
bottomStr: "",
rightStr: "calc(50% - 300rem)",
bottomStr: "calc(50% - 49rem)",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
className: "e-square",
parentClassName: "effect-box",
opacity: 0.96,
opacityAnimMap: new Map([
[0.1, 0], // [帧，值]
[0, 0.96],
[1, 1],
]),
transform: {
translate3d: { x: -450, y: -80, z: 10 },
scale: 0,
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: -450, y: -80, z: 10 },
scale: 0,
},
],
[
0.1,
0,
{
translate3d: { x: -450, y: -100, z: 10 },
scale: 0.5,
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 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 },
},
],
]),
},
],
};
// 特效管理
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 =
// logo 图标
{
widthStr: "190rem",
backgroundColorStr: "",
backgroundStr:
"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 {
data() {
return {
api: process.env.VUE_APP_API_IMG_URL,
platformPermission: [],
show: true,
};
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",
text: "平台设置",
fontSizeStr: "48rem",
fontColorStr: "#ffffff",
opacity: 1,
opacityAnimMap: new Map([
[0, 1], // [帧，值]
[0.6, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
scale: 1,
},
created() {},
mounted() {
this_ = this;
new EffectManager();
this.getPlatformChildren();
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
scale: 1,
},
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;
],
[
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",
text: "平台设置",
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",
text: "运用以人工智能为代表的新技术，驱动政务服务模式创新，为人民提供更加智慧化、人性化的政务服务。",
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,
},
],
]),
},
];
this.platformPermission &&
this.platformPermission.forEach((v, i) => {
if (this.platformPermission.length > 4) {
let upObj = {
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.1, 0], // [帧，值]
[1, 1],
]),
...v,
transform: {
translate3d: {
x:
i == 0
? 450
: i == 1
? 300
: i == 2
? 150
: i == 3
? 0
: i == 4
? 450
: i == 5
? 300
: i == 6
? 150
: i == 7
? 0
: 450,
y: i == 4 ? -80 : 80,
z: 10,
},
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: {
x:
i == 0
? 450
: i == 1
? 300
: i == 2
? 150
: i == 3
? 0
: i == 4
? 450
: i == 5
? 300
: i == 6
? 150
: i == 7
? 0
: 450,
y: i == 4 ? -80 : 80,
z: 10,
},
scale: 0,
},
],
[
0.1,
{
translate3d: {
x:
i == 0
? 450
: i == 1
? 300
: i == 2
? 150
: i == 3
? 0
: i == 4
? 450
: i == 5
? 300
: i == 6
? 150
: i == 7
? 0
: 450,
y: i == 4 ? -100 : 100,
z: 10,
},
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
};
anim_data.domArr.push(upObj);
} else {
return [];
}
})
.flat();
let upObj = {
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.1, 0], // [帧，值]
[1, 1],
]),
...v,
transform: {
translate3d: {
x:
i == 0 ? 450 : i == 1 ? 300 : i == 2 ? 150 : i == 3 ? 0 : 0,
y: 80,
z: 10,
},
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: {
x:
i == 0
? 450
: i == 1
? 300
: i == 2
? 150
: i == 3
? 0
: 0,
y: 80,
z: 10,
},
scale: 0,
},
],
[
0.1,
{
translate3d: {
x:
i == 0
? 450
: i == 1
? 300
: i == 2
? 150
: i == 3
? 0
: 0,
y: 100,
z: 10,
},
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
};
anim_data.domArr.push(upObj);
}
});
new EffectManager();
},
// 跳转
handleClick(url) {
......@@ -1994,7 +3211,8 @@ export default {
<style lang="less" scoped>
@headerH: 4.5rem;
.platform,
.content {
.content,
.modal {
width: 100%;
height: 100%;
background: url("~@/assets/images/siteArrange/bg-pintai.jpg") center no-repeat;
......@@ -2068,6 +3286,11 @@ export default {
}
}
.content {
background: #031233;
background: rgba(3, 18, 51, 1);
padding-top: 0;
}
.modal {
padding-top: 0;
}
</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