Skip to content

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

tui

parent 94aafe11
Hide 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="effect-content"> <div class="modal">
<div class="effect-box"> <div class="effect-content">
<div class="e-icon-box"></div> <div class="effect-box">
<div class="e-icon-box"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -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,612 +1063,610 @@ const anim_data = { ...@@ -1060,612 +1063,610 @@ 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: "", // 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,
}, // },
], // ],
]), // ]),
}, // },
// 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: "", // 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,
}, // },
], // ],
]), // ]),
}, // },
], ],
}; };
// 特效管理 // 特效管理
...@@ -1748,10 +1749,25 @@ class ShapeComp { ...@@ -1748,10 +1749,25 @@ class ShapeComp {
data.shapeAtt.fontSizeStr data.shapeAtt.fontSizeStr
? (this._shapeDom.style.fontSize = data.shapeAtt.fontSizeStr) ? (this._shapeDom.style.fontSize = data.shapeAtt.fontSizeStr)
: ""; : "";
data.shapeAtt.name ? (this._shapeDom.innerHTML = data.shapeAtt.name) : ""; data.shapeAtt.text ? (this._shapeDom.innerHTML = data.shapeAtt.text) : "";
data.shapeAtt.index data.shapeAtt.index
? (this._shapeDom.style.zIndex = 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 document
.getElementsByClassName(data.shapeAtt.parentClassName)[0] .getElementsByClassName(data.shapeAtt.parentClassName)[0]
...@@ -1924,14 +1940,13 @@ class RollEventComp { ...@@ -1924,14 +1940,13 @@ class RollEventComp {
let set = setInterval(function () { let set = setInterval(function () {
index += 0.004; index += 0.004;
data.cb(index); 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) { if (index >= 1) {
clearInterval(set); clearInterval(set);
document.getElementsByClassName("content")[0].style.background =
"url(" +
require("@/assets/images/siteArrange/bg-pintai.jpg") +
") no-repeat";
document.getElementsByClassName("effect-box")[0].style.backgroundColor =
"unset";
} }
}); });
// window.addEventListener("scroll", (event) => { // window.addEventListener("scroll", (event) => {
...@@ -1963,14 +1978,16 @@ export default { ...@@ -1963,14 +1978,16 @@ export default {
}, },
created() {}, created() {},
mounted() { mounted() {
this_ = this; _this = this;
new EffectManager();
this.getPlatformChildren(); this.getPlatformChildren();
}, },
computed: {
...mapState("user", ["siteList", "userData"]),
},
methods: { methods: {
// 获取平台子菜单 // 获取平台子菜单
getPlatformChildren() { getPlatformChildren() {
let { menuList } = Storage.get(2, "userInfo"); let { menuList } = this.userData;
let platform = menuList.filter((v) => v.name === "平台设置"); let platform = menuList.filter((v) => v.name === "平台设置");
if (platform.length) { if (platform.length) {
this.platformPermission = platform this.platformPermission = platform
...@@ -1983,6 +2000,1206 @@ export default { ...@@ -1983,6 +2000,1206 @@ export default {
}) })
.flat(); .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,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "40rem",
backgroundColorStr: "",
backgroundImageStr:
"-webkit-radial-gradient(top,rgba(0,45,156,.75) 0,#002d9c 92%,rgba(0,45,156,0) 166%)",
topStr: "",
rightStr: "",
bottomStr: "calc(50% - 352rem)",
leftStr: "calc(50% - 26rem)",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.35,
opacityAnimMap: new Map([
[0, 0.35],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "64rem",
backgroundColorStr: "",
backgroundImageStr:
"-webkit-radial-gradient(top,rgba(0,45,156,.75) 0,#002d9c 92%,rgba(0,45,156,0) 166%),-webkit-linear-gradient(334deg,rgba(0,137,255,.2) 1%,rgba(0,186,255,.04) 38%,rgba(68,149,255,.08) 68%,rgba(3,79,255,.16) 88%)",
topStr: "calc(50% - 395rem)",
rightStr: "calc(50% - 102rem)",
bottomStr: "",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.4,
opacityAnimMap: new Map([
[0, 0.4],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "24rem",
backgroundColorStr: "",
backgroundImageStr:
"linear-gradient(147deg,#004fff,#002d9c 82%),linear-gradient(153deg,#007fff 5%,#0063ff 95%)",
topStr: "calc(50% - 206rem)",
rightStr: "calc(50% - 38rem)",
bottomStr: "",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.3,
opacityAnimMap: new Map([
[0, 0.3],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "130rem",
backgroundColorStr: "",
backgroundImageStr:
"linear-gradient(147deg,#004fff,#002d9c 82%),linear-gradient(153deg,#007fff 5%,#0063ff 95%)",
topStr: "calc(50% - 263rem)",
rightStr: "calc(50% - 704rem)",
bottomStr: "",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.67,
opacityAnimMap: new Map([
[0, 0.67],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "64rem",
backgroundColorStr: "",
backgroundImageStr: "linear-gradient(128deg,#00ebb6,#00ba46 69%)",
topStr: "calc(50% - 226rem)",
rightStr: "calc(50% - 505rem)",
bottomStr: "",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.95,
opacityAnimMap: new Map([
[0, 0.95],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "24rem",
backgroundColorStr: "",
backgroundImageStr:
"linear-gradient(170deg,#ffc400,rgba(255,207,0,.6))",
topStr: "calc(50% - 52rem)",
rightStr: "calc(50% - 218rem)",
bottomStr: "",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.2,
opacityAnimMap: new Map([
[0, 0.2],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "24rem",
backgroundColorStr: "",
backgroundImageStr: "linear-gradient(170deg,#00b6ff,#007fff)",
topStr: "",
rightStr: "calc(50% - 300rem)",
bottomStr: "calc(50% - 49rem)",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.96,
opacityAnimMap: new Map([
[0, 0.96],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "64rem",
backgroundColorStr: "",
backgroundImageStr: "linear-gradient(148deg,#76d2ff,#09baff 99%)",
topStr: "",
rightStr: "calc(50% - 453rem)",
bottomStr: "calc(50% - 170rem)",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.96,
opacityAnimMap: new Map([
[0, 0.96],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "96rem",
backgroundColorStr: "",
backgroundImageStr: "linear-gradient(136deg,#3e9eff 19%,#0062ff)",
topStr: "",
rightStr: "calc(50% - 657rem)",
bottomStr: "calc(50% - 133rem)",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.96,
opacityAnimMap: new Map([
[0, 0.96],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "160rem",
backgroundColorStr: "",
backgroundImageStr:
"linear-gradient(147deg,rgba(0,79,255,.6),rgba(0,45,156,.6) 82%),linear-gradient(153deg,#007fff 5%,#0063ff 95%)",
topStr: "",
rightStr: "calc(50% - 800rem)",
bottomStr: "calc(50% - 345rem)",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.5,
opacityAnimMap: new Map([
[0, 0.5],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "96rem",
backgroundColorStr: "",
backgroundImageStr:
"linear-gradient(-2deg,rgba(0,45,156,.75),#002d9c)",
topStr: "",
rightStr: "calc(50% - 213rem)",
bottomStr: "calc(50% - 532rem)",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.2,
opacityAnimMap: new Map([
[0, 0.2],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
{
widthStr: "96rem",
backgroundColorStr: "",
backgroundImageStr:
"linear-gradient(-2deg,rgba(0,45,156,.75),#002d9c)",
topStr: "",
rightStr: "calc(50% - 213rem)",
bottomStr: "calc(50% - 532rem)",
leftStr: "",
className: "e-square",
parentClassName: "effect-box",
opacity: 0.2,
opacityAnimMap: new Map([
[0, 0.2],
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 800 },
},
],
]),
},
// logo 图标
{
widthStr: "190rem",
backgroundColorStr: "",
backgroundStr:
"url(" +
require("@/assets/images/siteArrange/logo-pingtai.png") +
") center no-repeat",
topStr: "calc(50% - 90rem)",
rightStr: "",
bottomStr: "",
leftStr: "calc(50% - 90rem)",
className: "e-square",
parentClassName: "effect-box",
opacity: 1,
index: 99,
opacityAnimMap: new Map([
[0, 1], // [帧，值]
[0.6, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
scale: 1,
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
scale: 1,
},
],
[
1,
{
translate3d: { x: 0, y: -1300, z: 800 },
scale: 1.5,
},
],
]),
},
// logo 图标
{
widthStr: "180rem",
backgroundColorStr: "",
backgroundImageStr: "linear-gradient(0deg, #2254F3 0%, #15C5FF 100%)",
topStr: "calc(50% - 90rem)",
rightStr: "",
bottomStr: "",
leftStr: "calc(50% - 90rem)",
className: "e-square",
parentClassName: "effect-box",
opacity: 1,
opacityAnimMap: new Map([
[0, 1], // [帧，值]
[0.6, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 0 },
scale: 1,
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
scale: 1,
},
],
[
1,
{
translate3d: { x: 0, y: -1300, z: 800 },
scale: 1.5,
},
],
]),
},
// 平台设置字体
{
widthStr: "200rem",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "calc(62%)",
rightStr: "",
bottomStr: "",
leftStr: "calc(50% - 98rem)",
className: "e-square",
parentClassName: "effect-box",
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,
},
transformAnimMap: new Map([
[
0,
{
translate3d: { x: 0, y: 0, z: 0 },
scale: 1,
},
],
[
1,
{
translate3d: { x: 0, y: -1300, z: 800 },
scale: 1.5,
},
],
]),
},
// e-icon-box 相关元素
// e-icon-box-bg
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon-box-bg",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.6, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 0, z: 10 },
scale: 0.8,
},
transformAnimMap: new Map([
[
0.6,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 0.8,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
// e-icon-box 上部字体
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "calc(-38%)",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "title",
parentClassName: "e-icon-box",
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 {
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) { 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