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 { :root {
--base-font-size: 0.0625rem; --base-font-size: 0.0625rem;
} }
...@@ -55,7 +46,24 @@ body::-webkit-scrollbar { ...@@ -55,7 +46,24 @@ body::-webkit-scrollbar {
.e-icon-box { .e-icon-box {
position: absolute; 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%; left: 50%;
transform-origin: 50% 50%; transform-origin: 50% 50%;
width: 1200rem; width: 1200rem;
...@@ -65,13 +73,27 @@ body::-webkit-scrollbar { ...@@ -65,13 +73,27 @@ body::-webkit-scrollbar {
grid-template-columns: repeat(7, 120rem); grid-template-columns: repeat(7, 120rem);
grid-gap: 80rem 30rem; grid-gap: 80rem 30rem;
grid-auto-rows: 120rem; grid-auto-rows: 120rem;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
z-index: 10; 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 { .e-icon-box-bg {
position: absolute; position: absolute;
width: 100%; width: 100%;
...@@ -81,7 +103,7 @@ body::-webkit-scrollbar { ...@@ -81,7 +103,7 @@ body::-webkit-scrollbar {
.e-icon { .e-icon {
position: relative; position: relative;
background-color: #0089ff; /* background-color: #0089ff; */
border-radius: 10rem; border-radius: 10rem;
} }
.title { .title {
......
portal-manager-ui/admin/src/views/thePlatformIsSet/setPlatformes.vue
View file @ 45025599
<template> <template>
<div class="content" v-if="show"> <div class="content" v-if="show">
<div class="modal">
<div class="effect-content"> <div class="effect-content">
<div class="effect-box"> <div class="effect-box">
<div class="e-icon-box"></div> <div class="e-icon-box"></div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="platform w-full h-auto" v-else> <div class="platform w-full h-auto" v-else>
<div class="pla_cont"> <div class="pla_cont">
<h1>平台设置</h1> <h1>平台设置</h1>
...@@ -52,7 +54,9 @@ ...@@ -52,7 +54,9 @@
<script> <script>
import Storage from "@/utils/js/Storage"; import Storage from "@/utils/js/Storage";
import "./index.css"; import "./index.css";
let this_ = null; import { mapState, mapMutations, mapGetters } from "vuex";
let _this = null;
const anim_data = { const anim_data = {
domArr: [ domArr: [
// 杂乱的正方形 // 杂乱的正方形
...@@ -915,7 +919,7 @@ const anim_data = { ...@@ -915,7 +919,7 @@ const anim_data = {
leftStr: "calc(50% - 98rem)", leftStr: "calc(50% - 98rem)",
className: "e-square", className: "e-square",
parentClassName: "effect-box", parentClassName: "effect-box",
name: "平台设置", text: "平台设置",
fontSizeStr: "48rem", fontSizeStr: "48rem",
fontColorStr: "#ffffff", fontColorStr: "#ffffff",
opacity: 1, opacity: 1,
...@@ -944,7 +948,6 @@ const anim_data = { ...@@ -944,7 +948,6 @@ const anim_data = {
], ],
]), ]),
}, },
// e-icon-box 相关元素 // e-icon-box 相关元素
// e-icon-box-bg // e-icon-box-bg
{ {
...@@ -994,7 +997,7 @@ const anim_data = { ...@@ -994,7 +997,7 @@ const anim_data = {
leftStr: "", leftStr: "",
className: "title", className: "title",
parentClassName: "e-icon-box", parentClassName: "e-icon-box",
name: "平台设置", text: "平台设置",
opacity: 0, opacity: 0,
fontColorStr: "#ffffff", fontColorStr: "#ffffff",
opacityAnimMap: new Map([ opacityAnimMap: new Map([
...@@ -1032,7 +1035,7 @@ const anim_data = { ...@@ -1032,7 +1035,7 @@ const anim_data = {
leftStr: "", leftStr: "",
className: "desc", className: "desc",
parentClassName: "e-icon-box", parentClassName: "e-icon-box",
name: "运用以人工智能为代表的新技术，驱动政务服务模式创新，为人民提供更加智慧化、人性化的政务服务。", text: "运用以人工智能为代表的新技术，驱动政务服务模式创新，为人民提供更加智慧化、人性化的政务服务。",
opacity: 0, opacity: 0,
fontColorStr: "#ffffff", fontColorStr: "#ffffff",
opacityAnimMap: new Map([ opacityAnimMap: new Map([
...@@ -1060,929 +1063,2143 @@ const anim_data = { ...@@ -1060,929 +1063,2143 @@ const anim_data = {
], ],
]), ]),
}, },
// e-icon 上行 // e-icon 上行
{ // {
widthStr: "", // widthStr: "",
backgroundColorStr: "", // backgroundColorStr: "",
backgroundImageStr: "", // backgroundImageStr: "",
topStr: "", // topStr: "",
rightStr: "", // rightStr: "",
bottomStr: "", // bottomStr: "",
leftStr: "", // leftStr: "",
className: "e-icon", // className: "e-icon",
parentClassName: "e-icon-box", // parentClassName: "e-icon-box",
opacity: 0, // opacity: 0,
opacityAnimMap: new Map([ // opacityAnimMap: new Map([
[0.1, 0], // [帧，值] // [0.1, 0], // [帧，值]
[1, 1], // [1, 1],
]), // ]),
transform: { // transform: {
translate3d: { x: 450, y: 80, z: 10 }, // translate3d: { x: 450, y: 80, z: 10 },
scale: 0, // scale: 0,
}, // },
transformAnimMap: new Map([ // transformAnimMap: new Map([
[ // [
0.1, // 0.1,
{ // {
translate3d: { x: 450, y: 80, z: 10 }, // translate3d: { x: 450, y: 80, z: 10 },
scale: 0, // scale: 0,
}, // },
], // ],
[ // [
0.1, // 0.1,
{ // {
translate3d: { x: 450, y: 100, z: 10 }, // translate3d: { x: 450, y: 100, z: 10 },
scale: 0.5, // scale: 0.5,
}, // },
], // ],
[ // [
1, // 1,
{ // {
translate3d: { x: 0, y: 0, z: 10 }, // translate3d: { x: 0, y: 0, z: 10 },
scale: 1, // scale: 1,
}, // },
], // ],
]), // ]),
}, // },
{ // {
widthStr: "", // widthStr: "",
backgroundColorStr: "", // backgroundColorStr: "",
backgroundImageStr: "", // backgroundImageStr: "",
topStr: "", // topStr: "",
rightStr: "", // rightStr: "",
bottomStr: "", // bottomStr: "",
leftStr: "", // leftStr: "",
className: "e-icon", // className: "e-icon",
parentClassName: "e-icon-box", // parentClassName: "e-icon-box",
opacity: 0, // opacity: 0,
opacityAnimMap: new Map([ // opacityAnimMap: new Map([
[0.3, 0], // [帧，值] // [0.3, 0], // [帧，值]
[1, 1], // [1, 1],
]), // ]),
transform: { // transform: {
translate3d: { x: 300, y: 80, z: 10 }, // translate3d: { x: 300, y: 80, z: 10 },
scale: 0, // scale: 0,
}, // },
transformAnimMap: new Map([ // transformAnimMap: new Map([
[ // [
0.1, // 0.1,
{ // {
translate3d: { x: 300, y: 80, z: 10 }, // translate3d: { x: 300, y: 80, z: 10 },
scale: 0, // scale: 0,
}, // },
], // ],
[ // [
0.3, // 0.3,
{ // {
translate3d: { x: 300, y: 100, z: 10 }, // translate3d: { x: 300, y: 100, z: 10 },
scale: 0.5, // scale: 0.5,
}, // },
], // ],
[ // [
1, // 1,
{ // {
translate3d: { x: 0, y: 0, z: 10 }, // translate3d: { x: 0, y: 0, z: 10 },
scale: 1, // scale: 1,
}, // },
], // ],
]), // ]),
}, // },
{ // {
widthStr: "", // widthStr: "",
backgroundColorStr: "", // backgroundColorStr: "",
backgroundImageStr: "", // backgroundImageStr: "",
topStr: "", // topStr: "",
rightStr: "", // rightStr: "",
bottomStr: "", // bottomStr: "",
leftStr: "", // leftStr: "",
className: "e-icon", // className: "e-icon",
parentClassName: "e-icon-box", // parentClassName: "e-icon-box",
opacity: 0, // opacity: 0,
opacityAnimMap: new Map([ // opacityAnimMap: new Map([
[0.5, 0], // [帧，值] // [0.5, 0], // [帧，值]
[1, 1], // [1, 1],
]), // ]),
transform: { // transform: {
translate3d: { x: 150, y: 80, z: 10 }, // translate3d: { x: 150, y: 80, z: 10 },
scale: 0, // scale: 0,
}, // },
transformAnimMap: new Map([ // transformAnimMap: new Map([
[ // [
0.1, // 0.1,
{ // {
translate3d: { x: 150, y: 80, z: 10 }, // translate3d: { x: 150, y: 80, z: 10 },
scale: 0, // scale: 0,
}, // },
], // ],
[ // [
0.5, // 0.5,
{ // {
translate3d: { x: 150, y: 100, z: 10 }, // translate3d: { x: 150, y: 100, z: 10 },
scale: 0.5, // scale: 0.5,
}, // },
], // ],
[ // [
1, // 1,
{ // {
translate3d: { x: 0, y: 0, z: 10 }, // translate3d: { x: 0, y: 0, z: 10 },
scale: 1, // scale: 1,
}, // },
], // ],
]), // ]),
}, // },
{ // {
widthStr: "", // widthStr: "",
backgroundColorStr: "", // backgroundColorStr: "",
backgroundImageStr: "", // backgroundImageStr: "",
topStr: "", // topStr: "",
rightStr: "", // rightStr: "",
bottomStr: "", // bottomStr: "",
leftStr: "", // leftStr: "",
className: "e-icon", // className: "e-icon",
parentClassName: "e-icon-box", // parentClassName: "e-icon-box",
opacity: 0, // opacity: 0,
opacityAnimMap: new Map([ // opacityAnimMap: new Map([
[0.7, 0], // [帧，值] // [0.7, 0], // [帧，值]
[1, 1], // [1, 1],
]), // ]),
transform: { // transform: {
translate3d: { x: 0, y: 80, z: 10 }, // translate3d: { x: 0, y: 80, z: 10 },
scale: 0, // scale: 0,
}, // },
transformAnimMap: new Map([ // transformAnimMap: new Map([
[ // [
0.1, // 0.1,
{ // {
translate3d: { x: 0, y: 80, z: 10 }, // translate3d: { x: 0, y: 80, z: 10 },
scale: 0, // scale: 0,
}, // },
], // ],
[ // [
0.7, // 0.7,
{ // {
translate3d: { x: 0, y: 100, z: 10 }, // translate3d: { x: 0, y: 100, z: 10 },
scale: 0.5, // scale: 0.5,
}, // },
], // ],
[ // [
1, // 1,
{ // {
translate3d: { x: 0, y: 0, z: 10 }, // translate3d: { x: 0, y: 0, z: 10 },
scale: 1, // scale: 1,
}, // },
], // ],
]), // ]),
}, // },
{ // {
widthStr: "", // widthStr: "",
backgroundColorStr: "", // backgroundColorStr: "",
backgroundImageStr: "", // backgroundImageStr: "",
topStr: "", // topStr: "",
rightStr: "", // rightStr: "",
bottomStr: "", // bottomStr: "",
leftStr: "", // leftStr: "",
className: "e-icon", // className: "e-icon",
parentClassName: "e-icon-box", // parentClassName: "e-icon-box",
opacity: 0, // opacity: 0,
opacityAnimMap: new Map([ // opacityAnimMap: new Map([
[0.5, 0], // [帧，值] // [0.5, 0], // [帧，值]
[1, 1], // [1, 1],
]), // ]),
transform: { // transform: {
translate3d: { x: -150, y: 80, z: 10 }, // translate3d: { x: -150, y: 80, z: 10 },
scale: 0, // scale: 0,
}, // },
transformAnimMap: new Map([ // transformAnimMap: new Map([
[ // [
0.1, // 0.1,
{ // {
translate3d: { x: -150, y: 80, z: 10 }, // translate3d: { x: -150, y: 80, z: 10 },
scale: 0, // scale: 0,
}, // },
], // ],
[ // [
0.5, // 0.5,
{ // {
translate3d: { x: -150, y: 100, z: 10 }, // translate3d: { x: -150, y: 100, z: 10 },
scale: 0.5, // scale: 0.5,
}, // },
], // ],
[ // [
1, // 1,
{ // {
translate3d: { x: 0, y: 0, z: 10 }, // translate3d: { x: 0, y: 0, z: 10 },
scale: 1, // scale: 1,
}, // },
], // ],
]), // ]),
}, // },
{ // {
widthStr: "", // widthStr: "",
backgroundColorStr: "", // backgroundColorStr: "",
backgroundImageStr: "", // backgroundImageStr: "",
topStr: "", // topStr: "",
rightStr: "", // rightStr: "",
bottomStr: "", // bottomStr: "",
leftStr: "", // leftStr: "",
className: "e-icon", // className: "e-icon",
parentClassName: "e-icon-box", // parentClassName: "e-icon-box",
opacity: 0, // opacity: 0,
opacityAnimMap: new Map([ // opacityAnimMap: new Map([
[0.3, 0], // [帧，值] // [0.3, 0], // [帧，值]
[1, 1], // [1, 1],
]), // ]),
transform: { // transform: {
translate3d: { x: -300, y: 80, z: 10 }, // translate3d: { x: -300, y: 80, z: 10 },
scale: 0, // scale: 0,
}, // },
transformAnimMap: new Map([ // transformAnimMap: new Map([
[ // [
0.1, // 0.1,
{ // {
translate3d: { x: -300, y: 80, z: 10 }, // translate3d: { x: -300, y: 80, z: 10 },
scale: 0, // scale: 0,
}, // },
], // ],
[ // [
0.3, // 0.3,
{ // {
translate3d: { x: -300, y: 100, z: 10 }, // translate3d: { x: -300, y: 100, z: 10 },
scale: 0.5, // scale: 0.5,
}, // },
], // ],
[ // [
1, // 1,
{ // {
translate3d: { x: 0, y: 0, z: 10 }, // translate3d: { x: 0, y: 0, z: 10 },
scale: 1, // 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 {
widthStr: "", constructor(data = anim_data) {
backgroundColorStr: "", data.domArr.forEach((item) => {
backgroundImageStr: "", const entity = new Entity();
topStr: "",
rightStr: "", // 添加形状组件
bottomStr: "", entity.addComp(
leftStr: "", new ShapeComp({
className: "e-icon", shapeAtt: item,
parentClassName: "e-icon-box", })
opacity: 0, );
opacityAnimMap: new Map([
[0.1, 0], // [帧，值] // 添加动画组件
[1, 1], entity.addComp(
]), new ShapeAnimComp({
transform: { opacityAnimMap: item.opacityAnimMap,
translate3d: { x: -450, y: 80, z: 10 }, transformAnimMap: item.transformAnimMap,
scale: 0, })
}, );
transformAnimMap: new Map([
[ // 添加滚动事件组件
0.1, entity.addComp(
{ new RollEventComp({
translate3d: { x: -450, y: 80, z: 10 }, cb: function (scrollPos) {
scale: 0, 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 }, translate3d: { x: 0, y: 0, z: 0 },
scale: 0.5,
}, },
], ],
[ [
1, 1,
{ {
translate3d: { x: 0, y: 0, z: 10 }, translate3d: { x: 0, y: 0, z: 800 },
scale: 1,
}, },
], ],
]), ]),
}, },
// e-icon 下行
{ {
widthStr: "", widthStr: "40rem",
backgroundColorStr: "", backgroundColorStr: "",
backgroundImageStr: "", backgroundImageStr:
"-webkit-radial-gradient(top,rgba(0,45,156,.75) 0,#002d9c 92%,rgba(0,45,156,0) 166%)",
topStr: "", topStr: "",
rightStr: "", rightStr: "",
bottomStr: "", bottomStr: "calc(50% - 352rem)",
leftStr: "", leftStr: "calc(50% - 26rem)",
className: "e-icon", className: "e-square",
parentClassName: "e-icon-box", parentClassName: "effect-box",
opacity: 0, opacity: 0.35,
opacityAnimMap: new Map([ opacityAnimMap: new Map([
[0.1, 0], // [帧，值] [0, 0.35],
[1, 1], [1, 1],
]), ]),
transform: { transform: {
translate3d: { x: 450, y: -80, z: 10 }, translate3d: { x: 0, y: 0, z: 0 },
scale: 0,
}, },
transformAnimMap: new Map([ transformAnimMap: new Map([
[ [
0.1, 0,
{
translate3d: { x: 450, y: -80, z: 10 },
scale: 0,
},
],
[
0.1,
{ {
translate3d: { x: 450, y: -100, z: 10 }, translate3d: { x: 0, y: 0, z: 0 },
scale: 0.5,
}, },
], ],
[ [
1, 1,
{ {
translate3d: { x: 0, y: 0, z: 10 }, translate3d: { x: 0, y: 0, z: 800 },
scale: 1,
}, },
], ],
]), ]),
}, },
{ {
widthStr: "", widthStr: "64rem",
backgroundColorStr: "", backgroundColorStr: "",
backgroundImageStr: "", backgroundImageStr:
topStr: "", "-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%)",
rightStr: "", topStr: "calc(50% - 395rem)",
rightStr: "calc(50% - 102rem)",
bottomStr: "", bottomStr: "",
leftStr: "", leftStr: "",
className: "e-icon", className: "e-square",
parentClassName: "e-icon-box", parentClassName: "effect-box",
opacity: 0, opacity: 0.4,
opacityAnimMap: new Map([ opacityAnimMap: new Map([
[0.3, 0], // [帧，值] [0, 0.4],
[1, 1], [1, 1],
]), ]),
transform: { transform: {
translate3d: { x: 300, y: -80, z: 10 }, translate3d: { x: 0, y: 0, z: 0 },
scale: 0,
}, },
transformAnimMap: new Map([ transformAnimMap: new Map([
[ [
0.1, 0,
{
translate3d: { x: 300, y: -80, z: 10 },
scale: 0,
},
],
[
0.3,
{ {
translate3d: { x: 300, y: -100, z: 10 }, translate3d: { x: 0, y: 0, z: 0 },
scale: 0.5,
}, },
], ],
[ [
1, 1,
{ {
translate3d: { x: 0, y: 0, z: 10 }, translate3d: { x: 0, y: 0, z: 800 },
scale: 1,
}, },
], ],
]), ]),
}, },
{ {
widthStr: "", widthStr: "24rem",
backgroundColorStr: "", backgroundColorStr: "",
backgroundImageStr: "", backgroundImageStr:
topStr: "", "linear-gradient(147deg,#004fff,#002d9c 82%),linear-gradient(153deg,#007fff 5%,#0063ff 95%)",
rightStr: "", topStr: "calc(50% - 206rem)",
rightStr: "calc(50% - 38rem)",
bottomStr: "", bottomStr: "",
leftStr: "", leftStr: "",
className: "e-icon", className: "e-square",
parentClassName: "e-icon-box", parentClassName: "effect-box",
opacity: 0, opacity: 0.3,
opacityAnimMap: new Map([ opacityAnimMap: new Map([
[0.5, 0], // [帧，值] [0, 0.3],
[1, 1], [1, 1],
]), ]),
transform: { transform: {
translate3d: { x: 150, y: -80, z: 10 }, translate3d: { x: 0, y: 0, z: 0 },
scale: 0,
}, },
transformAnimMap: new Map([ transformAnimMap: new Map([
[ [
0.1, 0,
{
translate3d: { x: 150, y: -80, z: 10 },
scale: 0,
},
],
[
0.5,
{ {
translate3d: { x: 150, y: -100, z: 10 }, translate3d: { x: 0, y: 0, z: 0 },
scale: 0.5,
}, },
], ],
[ [
1, 1,
{ {
translate3d: { x: 0, y: 0, z: 10 }, translate3d: { x: 0, y: 0, z: 800 },
scale: 1,
}, },
], ],
]), ]),
}, },
{ {
widthStr: "", widthStr: "130rem",
backgroundColorStr: "", backgroundColorStr: "",
backgroundImageStr: "", backgroundImageStr:
topStr: "", "linear-gradient(147deg,#004fff,#002d9c 82%),linear-gradient(153deg,#007fff 5%,#0063ff 95%)",
rightStr: "", topStr: "calc(50% - 263rem)",
rightStr: "calc(50% - 704rem)",
bottomStr: "", bottomStr: "",
leftStr: "", leftStr: "",
className: "e-icon", className: "e-square",
parentClassName: "e-icon-box", parentClassName: "effect-box",
opacity: 0, opacity: 0.67,
opacityAnimMap: new Map([ opacityAnimMap: new Map([
[0.7, 0], // [帧，值] [0, 0.67],
[1, 1], [1, 1],
]), ]),
transform: { transform: {
translate3d: { x: 0, y: -80, z: 10 }, translate3d: { x: 0, y: 0, z: 0 },
scale: 0,
}, },
transformAnimMap: new Map([ transformAnimMap: new Map([
[ [
0.1, 0,
{
translate3d: { x: 0, y: -80, z: 10 },
scale: 0,
},
],
[
0.7,
{ {
translate3d: { x: 0, y: -100, z: 10 }, translate3d: { x: 0, y: 0, z: 0 },
scale: 0.5,
}, },
], ],
[ [
1, 1,
{ {
translate3d: { x: 0, y: 0, z: 10 }, translate3d: { x: 0, y: 0, z: 800 },
scale: 1,
}, },
], ],
]), ]),
}, },
{ {
widthStr: "", widthStr: "64rem",
backgroundColorStr: "", backgroundColorStr: "",
backgroundImageStr: "", backgroundImageStr: "linear-gradient(128deg,#00ebb6,#00ba46 69%)",
topStr: "", topStr: "calc(50% - 226rem)",
rightStr: "", rightStr: "calc(50% - 505rem)",
bottomStr: "", bottomStr: "",
leftStr: "", leftStr: "",
className: "e-icon", className: "e-square",
parentClassName: "e-icon-box", parentClassName: "effect-box",
opacity: 0, opacity: 0.95,
opacityAnimMap: new Map([ opacityAnimMap: new Map([
[0.5, 0], // [帧，值] [0, 0.95],
[1, 1], [1, 1],
]), ]),
transform: { transform: {
translate3d: { x: -150, y: -80, z: 10 }, translate3d: { x: 0, y: 0, z: 0 },
scale: 0,
}, },
transformAnimMap: new Map([ transformAnimMap: new Map([
[ [
0.1, 0,
{
translate3d: { x: -150, y: -80, z: 10 },
scale: 0,
},
],
[
0.5,
{ {
translate3d: { x: -150, y: -100, z: 10 }, translate3d: { x: 0, y: 0, z: 0 },
scale: 0.5,
}, },
], ],
[ [
1, 1,
{ {
translate3d: { x: 0, y: 0, z: 10 }, translate3d: { x: 0, y: 0, z: 800 },
scale: 1,
}, },
], ],
]), ]),
}, },
{ {
widthStr: "", widthStr: "24rem",
backgroundColorStr: "", backgroundColorStr: "",
backgroundImageStr: "", backgroundImageStr:
topStr: "", "linear-gradient(170deg,#ffc400,rgba(255,207,0,.6))",
rightStr: "", topStr: "calc(50% - 52rem)",
rightStr: "calc(50% - 218rem)",
bottomStr: "", bottomStr: "",
leftStr: "", leftStr: "",
className: "e-icon", className: "e-square",
parentClassName: "e-icon-box", parentClassName: "effect-box",
opacity: 0, opacity: 0.2,
opacityAnimMap: new Map([ opacityAnimMap: new Map([
[0.3, 0], // [帧，值] [0, 0.2],
[1, 1], [1, 1],
]), ]),
transform: { transform: {
translate3d: { x: -300, y: -80, z: 10 }, translate3d: { x: 0, y: 0, z: 0 },
scale: 0,
}, },
transformAnimMap: new Map([ transformAnimMap: new Map([
[ [
0.1, 0,
{
translate3d: { x: -300, y: -80, z: 10 },
scale: 0,
},
],
[
0.3,
{ {
translate3d: { x: -300, y: -100, z: 10 }, translate3d: { x: 0, y: 0, z: 0 },
scale: 0.5,
}, },
], ],
[ [
1, 1,
{ {
translate3d: { x: 0, y: 0, z: 10 }, translate3d: { x: 0, y: 0, z: 800 },
scale: 1,
}, },
], ],
]), ]),
}, },
{ {
widthStr: "", widthStr: "24rem",
backgroundColorStr: "", backgroundColorStr: "",
backgroundImageStr: "", backgroundImageStr: "linear-gradient(170deg,#00b6ff,#007fff)",
topStr: "", topStr: "",
rightStr: "", rightStr: "calc(50% - 300rem)",
bottomStr: "", bottomStr: "calc(50% - 49rem)",
leftStr: "", leftStr: "",
className: "e-icon", className: "e-square",
parentClassName: "e-icon-box", parentClassName: "effect-box",
opacity: 0, opacity: 0.96,
opacityAnimMap: new Map([ opacityAnimMap: new Map([
[0.1, 0], // [帧，值] [0, 0.96],
[1, 1], [1, 1],
]), ]),
transform: { transform: {
translate3d: { x: -450, y: -80, z: 10 }, translate3d: { x: 0, y: 0, z: 0 },
scale: 0,
}, },
transformAnimMap: new Map([ transformAnimMap: new Map([
[ [
0.1, 0,
{
translate3d: { x: -450, y: -80, z: 10 },
scale: 0,
},
],
[
0.1,
{ {
translate3d: { x: -450, y: -100, z: 10 }, translate3d: { x: 0, y: 0, z: 0 },
scale: 0.5,
}, },
], ],
[ [
1, 1,
{ {
translate3d: { x: 0, y: 0, z: 10 }, translate3d: { x: 0, y: 0, z: 800 },
scale: 1, },
],
]),
},
{
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; // logo 图标
let set = setInterval(function () { {
index += 0.004; widthStr: "190rem",
data.cb(index); backgroundColorStr: "",
if (index >= 1) { backgroundStr:
clearInterval(set);
document.getElementsByClassName("content")[0].style.background =
"url(" + "url(" +
require("@/assets/images/siteArrange/bg-pintai.jpg") + require("@/assets/images/siteArrange/logo-pingtai.png") +
") no-repeat"; ") center no-repeat",
document.getElementsByClassName("effect-box")[0].style.backgroundColor = topStr: "calc(50% - 90rem)",
"unset"; rightStr: "",
} bottomStr: "",
}); leftStr: "calc(50% - 90rem)",
// window.addEventListener("scroll", (event) => { className: "e-square",
// const scrollTop = document.documentElement.scrollTop; parentClassName: "effect-box",
// const scrollHeight = document.documentElement.scrollHeight; opacity: 1,
// const clientHeight = document.documentElement.clientHeight; index: 99,
// let scrollPos = 0; opacityAnimMap: new Map([
// if (scrollTop + clientHeight >= scrollHeight - 5) { [0, 1], // [帧，值]
// scrollPos = 1; [0.6, 1],
// } else if (scrollTop === 0) { ]),
// scrollPos = 0; transform: {
// } else { translate3d: { x: 0, y: 0, z: 0 },
// scrollPos = Number( scale: 1,
// (scrollTop / (scrollHeight - clientHeight)).toFixed(3) },
// ); transformAnimMap: new Map([
// } [
// console.log(scrollPos, "###########"); 0,
// data.cb(scrollPos); {
// }); translate3d: { x: 0, y: 0, z: 0 },
} scale: 1,
} },
export default { ],
data() { [
return { 1,
api: process.env.VUE_APP_API_IMG_URL, {
platformPermission: [], translate3d: { x: 0, y: -1300, z: 800 },
show: true, 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() {}, transformAnimMap: new Map([
mounted() { [
this_ = this; 0,
new EffectManager(); {
this.getPlatformChildren(); translate3d: { x: 0, y: 0, z: 0 },
scale: 1,
}, },
methods: { ],
// 获取平台子菜单 [
getPlatformChildren() { 1,
let { menuList } = Storage.get(2, "userInfo"); {
let platform = menuList.filter((v) => v.name === "平台设置"); translate3d: { x: 0, y: -1300, z: 800 },
if (platform.length) { scale: 1.5,
this.platformPermission = platform },
.map((v) => { ],
if (v.childList.length) { ]),
return v.childList; },
// 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 { } else {
return []; let upObj = {
} widthStr: "",
}) backgroundColorStr: "",
.flat(); 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) { handleClick(url) {
...@@ -1994,7 +3211,8 @@ export default { ...@@ -1994,7 +3211,8 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
@headerH: 4.5rem; @headerH: 4.5rem;
.platform, .platform,
.content { .content,
.modal {
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;
...@@ -2068,6 +3286,11 @@ export default { ...@@ -2068,6 +3286,11 @@ export default {
} }
} }
.content { .content {
background: #031233; background: rgba(3, 18, 51, 1);
padding-top: 0;
} }
.modal {
padding-top: 0;
}
</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