Skip to content

S
smart_gov_platform
Commit f1574186 authored by “yiyousong”'s avatar “yiyousong”
Browse files
Options

feat:添加应用字段配置

parent f9b967a9
Hide whitespace changes
Inline Side-by-side
Showing with 3910 additions and 3591 deletions
base-manager-ui/admin/src/pages/basicset/appmarket/components/AppDetailsPage.vue
View file @ f1574186
...@@ -287,10 +287,12 @@ export default { ...@@ -287,10 +287,12 @@ export default {
this.siteVisible = true; this.siteVisible = true;
}, },
filterItems(appThemeName) { filterItems(appThemeName) {
return ( let arr = this.categoryList.find((v) => v.id == appThemeName);
this.categoryList.find((v) => v.id == appThemeName)?.categoryName || if (arr.length) {
"--" return arr.categoryName;
); } else {
return "--";
}
}, },
}, },
}; };
......
base-manager-ui/admin/src/pages/basicset/appmarket/modal/AddData.vue
View file @ f1574186
...@@ -140,6 +140,36 @@ ...@@ -140,6 +140,36 @@
<a-icon type="upload" /> 点击上传 <a-icon type="upload" /> 点击上传
</a-button> </a-button>
</a-upload> </a-upload>
<!-- 表格 -->
<a-table
bordered
v-else-if="v.fieldType == 'table'"
size="small"
:scroll="{ y: 550 }"
:pagination="{
showTotal: (total) => `共 ${total} 条`,
current: current,
total: total,
pageSize: size,
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: pageSizeOptions,
}"
:columns="columns"
:data-source="tableList"
:row-selection="{
selectedRowKeys: selectedLeftRowKeys,
onChange: onSelectChange,
}"
@change="changeTable"
:rowKey="(record) => record.id"
>
<template slot="num" slot-scope="text, record, index">
<span>
{{ (current - 1) * size + index + 1 }}
</span>
</template>
</a-table>
</a-form-model-item> </a-form-model-item>
</a-form-model> </a-form-model>
</div> </div>
...@@ -167,6 +197,8 @@ ...@@ -167,6 +197,8 @@
<script> <script>
import YQuillEditor from "@/components/YQuillEditor.vue"; import YQuillEditor from "@/components/YQuillEditor.vue";
import { saveDataset } from "@/services/market"; import { saveDataset } from "@/services/market";
import { request } from "@/utils/request";
import local from "@/utils/local";
export default { export default {
components: { components: {
YQuillEditor, YQuillEditor,
...@@ -185,7 +217,9 @@ export default { ...@@ -185,7 +217,9 @@ export default {
}, },
data() { data() {
return { return {
siteId: local.getLocal("siteId"),
api: process.env.VUE_APP_API_BASE_URL + "/", api: process.env.VUE_APP_API_BASE_URL + "/",
pageSizeOptions: ["10", "30", "50", "100", "200"],
labelCol: { labelCol: {
span: 2, span: 2,
}, },
...@@ -198,6 +232,12 @@ export default { ...@@ -198,6 +232,12 @@ export default {
}, },
isopen: false, isopen: false,
year: null, year: null,
selectedLeftRowKeys: [],
current: 1,
size: 10,
total: 0,
tableList: [],
columns: [],
}; };
}, },
computed: { computed: {
...@@ -236,7 +276,7 @@ export default { ...@@ -236,7 +276,7 @@ export default {
onAdd(appTemplate) { onAdd(appTemplate) {
Object.assign(this.form, this.$options.data().form); Object.assign(this.form, this.$options.data().form);
this.form.id && this.$delete(this.form, "id"); this.form.id && this.$delete(this.form, "id");
this.form.appInfoFieldList = appTemplate.map((v) => { this.form.appInfoFieldList = appTemplate.map(async (v) => {
if (v.id) { if (v.id) {
delete v.id; delete v.id;
} }
...@@ -247,6 +287,9 @@ export default { ...@@ -247,6 +287,9 @@ export default {
if (v.fieldType == "checkbox") { if (v.fieldType == "checkbox") {
v.checkbox = []; v.checkbox = [];
} }
if (v.fieldType == "table") {
await this.getData(v.serviceApi);
}
return v; return v;
}); });
this.form.appId = this.$route.query.id; this.form.appId = this.$route.query.id;
...@@ -308,6 +351,22 @@ export default { ...@@ -308,6 +351,22 @@ export default {
row.fieldValue = this.$moment(value).format("YYYY"); row.fieldValue = this.$moment(value).format("YYYY");
this.isopen = false; this.isopen = false;
}, },
onSelectChange(keys, rows) {
this.selectedLeftRowKeys = keys;
console.log(rows);
},
// 获取数据函数
async getData(url, data) {
let res = await request(this.api + url, "post", {
size: this.size,
page: this.current,
siteId: this.siteId,
...data,
});
if (res.data.code == 1) {
console.log(res.data.data);
}
},
}, },
}; };
</script> </script>
......
base-manager-ui/admin/src/pages/basicset/appmarket/modal/AddField.vue
View file @ f1574186
<template> <template>
<div> <div>
<a-modal :width="600" v-model="Visible" title="新增数据字段"> <a-modal :width="750" v-model="Visible" title="新增数据字段">
<a-form-model <a-form-model
:model="form" :model="form"
ref="form" ref="form"
...@@ -29,17 +29,87 @@ ...@@ -29,17 +29,87 @@
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-model-item> </a-form-model-item>
<a-form-model-item
v-if="form.fieldType == 'table'"
label="数据接口"
prop="serviceApi"
>
<a-input
v-model="form.serviceApi"
placeholder="请输入接口地址,示例：/app/dataset/save"
/>
</a-form-model-item>
<a-form-model-item <a-form-model-item
v-if="isNeedConfig" v-if="isNeedConfig"
label="数据配置" label="数据配置"
class="data-config"
prop="fieldTypeValue" prop="fieldTypeValue"
> >
<a-textarea <div class="item" v-for="(v, i) in fieldType" :key="i">
<a-space>
<div>
<a-space>
<span>键：</span>
<a-input v-model="v.key" placeholder="请输入键名" />
</a-space>
</div>
<div>
<a-space>
<span>值：</span>
<a-input v-model="v.value" placeholder="请输入值" />
</a-space>
</div>
<a-button type="primary" @click="insertion(i)"
><a-icon type="plus"
/></a-button>
<a-button type="danger" @click="delrow(i)"
><a-icon type="minus"
/></a-button>
</a-space>
</div>
<!-- <a-textarea
:autoSize="{ minRows: 3, maxRows: 3 }" :autoSize="{ minRows: 3, maxRows: 3 }"
v-model="form.fieldTypeValue" v-model="form.fieldTypeValue"
placeholder='请输入JSON格式数据配置,如{"0":"否","1":"是"}' placeholder='请输入JSON格式数据配置,如{"0":"否","1":"是"}'
allow-clear allow-clear
/> /> -->
</a-form-model-item>
<a-form-model-item
v-if="form.fieldType == 'table'"
label="参数映射"
class="data-config"
prop="serviceApiParams"
>
<div class="item" v-for="(v, i) in apiParams" :key="i">
<a-space>
<div>
<a-space>
<span>键名：</span>
<a-input v-model="v.key" placeholder="请输入键名" />
</a-space>
</div>
<div>
<a-space>
<span>映射：</span>
<a-input v-model="v.value" placeholder="请输入映射字段编码" />
</a-space>
</div>
<a-button type="primary" @click="insertion(i, 'params')"
><a-icon type="plus"
/></a-button>
<a-button type="danger" @click="delrow(i, 'params')"
><a-icon type="minus"
/></a-button>
</a-space>
</div>
<!-- <a-textarea
:autoSize="{ minRows: 3, maxRows: 3 }"
v-model="form.fieldTypeValue"
placeholder='请输入JSON格式数据配置,如{"0":"否","1":"是"}'
allow-clear
/> -->
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="数据类型" prop="dataType"> <a-form-model-item label="数据类型" prop="dataType">
<a-radio-group v-model="form.dataType"> <a-radio-group v-model="form.dataType">
...@@ -123,6 +193,10 @@ const fieldTypeItem = [ ...@@ -123,6 +193,10 @@ const fieldTypeItem = [
value: "select", value: "select",
label: "下拉选择框", label: "下拉选择框",
}, },
{
value: "table",
label: "表格",
},
{ {
value: "upload", value: "upload",
label: "文件上传", label: "文件上传",
...@@ -142,27 +216,39 @@ export default { ...@@ -142,27 +216,39 @@ export default {
}, },
data() { data() {
// 校验JSON // 校验JSON
const checkJSON = (rule, value, callback) => { // const checkJSON = (rule, value, callback) => {
if (!value) { // if (!value) {
callback(new Error("请输入数据配置")); // callback(new Error("请输入数据配置"));
} else { // } else {
try { // try {
let Obj = JSON.parse(value); // let Obj = JSON.parse(value);
let isjson = // let isjson =
Object.prototype.toString.call(Obj).toLowerCase() == // Object.prototype.toString.call(Obj).toLowerCase() ==
"[object object]" && Object.keys(Obj).length; // "[object object]" && Object.keys(Obj).length;
if (isjson) { // if (isjson) {
callback(); // callback();
} else { // } else {
callback(new Error("请输入JSON对象格式")); // callback(new Error("请输入JSON对象格式"));
} // }
} catch (err) { // } catch (err) {
callback(new Error("输入的JSON数据格式有误")); // callback(new Error("输入的JSON数据格式有误"));
} // }
} // }
}; // };
return { return {
fieldTypeItem, fieldTypeItem,
fieldType: [
{
key: "",
value: "",
},
],
apiParams: [
{
key: "",
value: "",
},
],
form: { form: {
appId: "", // 应用id appId: "", // 应用id
fieldCode: "", // 字段编码 fieldCode: "", // 字段编码
...@@ -175,6 +261,8 @@ export default { ...@@ -175,6 +261,8 @@ export default {
fieldOrderNo: 99, // 排序号 fieldOrderNo: 99, // 排序号
fieldTypeValue: "", // 字段类型值 fieldTypeValue: "", // 字段类型值
defaultValue: "", // 字段默认值 defaultValue: "", // 字段默认值
serviceApi: "", // 动态数据接口
serviceApiParams: "", // 动态数据参数配置
remark: "", // remark: "", //
}, },
rules: { rules: {
...@@ -193,8 +281,8 @@ export default { ...@@ -193,8 +281,8 @@ export default {
isList: [ isList: [
{ required: true, message: "请选择是否列表显示", trigger: "change" }, { required: true, message: "请选择是否列表显示", trigger: "change" },
], ],
fieldTypeValue: [ serviceApi: [
{ required: true, validator: checkJSON, trigger: "blur" }, { required: true, message: "请输入数据接口地址", trigger: "blur" },
], ],
}, },
}; };
...@@ -212,7 +300,8 @@ export default { ...@@ -212,7 +300,8 @@ export default {
return ( return (
this.form.fieldType == "radio" || this.form.fieldType == "radio" ||
this.form.fieldType == "checkbox" || this.form.fieldType == "checkbox" ||
this.form.fieldType == "select" this.form.fieldType == "select" ||
this.form.fieldType == "table"
); );
}, },
}, },
...@@ -220,7 +309,11 @@ export default { ...@@ -220,7 +309,11 @@ export default {
handleOk() { handleOk() {
this.$refs.form.validate(async (valid) => { this.$refs.form.validate(async (valid) => {
if (valid) { if (valid) {
let res = await saveTemplete(this.form); let res = await saveTemplete({
...this.form,
fieldTypeValue: JSON.stringify(this.fieldType),
serviceApiParams: JSON.stringify(this.apiParams),
});
let { code, msg } = res.data; let { code, msg } = res.data;
if (code === 1) { if (code === 1) {
this.$message.success(msg); this.$message.success(msg);
...@@ -231,7 +324,19 @@ export default { ...@@ -231,7 +324,19 @@ export default {
}); });
}, },
handleCancel() { handleCancel() {
this.$refs.form.resetFields(); this.$refs.form.clearValidate();
this.fieldType = [
{
key: "",
value: "",
},
];
this.apiParams = [
{
key: "",
value: "",
},
];
this.Visible = false; this.Visible = false;
}, },
// 新增 // 新增
...@@ -242,12 +347,68 @@ export default { ...@@ -242,12 +347,68 @@ export default {
}, },
// 编辑 // 编辑
onEdit(data) { onEdit(data) {
if (data.fieldTypeValue) {
this.fieldType = JSON.parse(data.fieldTypeValue);
} else {
this.fieldType = [
{
key: "",
value: "",
},
];
}
if (data.serviceApiParams) {
this.apiParams = JSON.parse(data.serviceApiParams);
} else {
this.apiParams = [
{
key: "",
value: "",
},
];
}
this.form = { ...data }; this.form = { ...data };
}, },
// 添加数据配置行数
insertion(index, type) {
let obj = {
key: "",
value: "",
};
if (type == "params") {
this.apiParams.splice(index + 1, 0, obj);
} else {
this.fieldType.splice(index + 1, 0, obj);
}
},
// 删除数据配置行数
delrow(index, type) {
if (type == "params") {
if (this.apiParams.length == 1) {
return;
}
this.apiParams.splice(index, 1);
} else {
if (this.fieldType.length == 1) {
return;
}
this.fieldType.splice(index, 1);
}
},
// 切换字段类型 // 切换字段类型
changeFieldType(val) { changeFieldType(val) {
if (!(val == "radio" || val == "checkbox" || val == "select")) { if (
!(val == "radio" || val == "checkbox" || val == "select") ||
!(val == "table")
) {
this.form.fieldTypeValue = ""; this.form.fieldTypeValue = "";
this.form.serviceApi = "";
this.fieldType = [
{
key: "",
value: "",
},
];
} }
}, },
}, },
...@@ -259,4 +420,18 @@ export default { ...@@ -259,4 +420,18 @@ export default {
max-height: 600px; max-height: 600px;
overflow-y: auto; overflow-y: auto;
} }
.data-config {
align-items: flex-start !important;
.item {
width: 100%;
}
/deep/ .ant-space {
width: 100%;
justify-content: space-between;
}
/deep/.ant-form-item-children {
flex-direction: column !important;
}
}
</style> </style>
\ No newline at end of file
portal-manager-ui/admin/src/views/thePlatformIsSet/animation.js
View file @ f1574186
const anim_data = { export const anim_data = {
domArr: [ domArr: [
// 杂乱的正方形 // 杂乱的正方形
{ {
...@@ -953,8 +953,8 @@ const anim_data = { ...@@ -953,8 +953,8 @@ const anim_data = {
[ [
0.6, 0.6,
{ {
translate3d: { x: 0, y: 0, z: 10 }, translate3d: { x: 0, y: 380, z: 10 },
scale: 0.8, scale: 0.3,
}, },
], ],
[ [
...@@ -991,8 +991,8 @@ const anim_data = { ...@@ -991,8 +991,8 @@ const anim_data = {
[ [
0.6, 0.6,
{ {
translate3d: { x: 0, y: 0, z: 10 }, translate3d: { x: 0, y: 350, z: 10 },
scale: 0.8, scale: 0.3,
}, },
], ],
[ [
...@@ -1004,136 +1004,9 @@ const anim_data = { ...@@ -1004,136 +1004,9 @@ const anim_data = {
], ],
]), ]),
}, },
],
menusArr: [
// e-icon 上行 // 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: "", widthStr: "",
backgroundColorStr: "", backgroundColorStr: "",
...@@ -1150,14 +1023,14 @@ const anim_data = { ...@@ -1150,14 +1023,14 @@ const anim_data = {
[1, 1], [1, 1],
]), ]),
transform: { transform: {
translate3d: { x: 0, y: 80, z: 10 }, translate3d: { x: 430, y: 112, 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: 430, y: 112, z: 10 },
scale: 0, scale: 0,
}, },
], ],
...@@ -1307,135 +1180,6 @@ const anim_data = { ...@@ -1307,135 +1180,6 @@ const anim_data = {
]), ]),
}, },
// e-icon 下行 // 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: "", widthStr: "",
backgroundColorStr: "", backgroundColorStr: "",
...@@ -1611,9 +1355,9 @@ const anim_data = { ...@@ -1611,9 +1355,9 @@ const anim_data = {
], ],
}; };
// 特效管理 // 特效管理
class EffectManager { export class EffectManager {
constructor(data = anim_data) { constructor(data = anim_data.domArr) {
data.domArr.forEach((item) => { data.forEach((item) => {
const entity = new Entity(); const entity = new Entity();
// 添加形状组件 // 添加形状组件
...@@ -1930,4 +1674,3 @@ class RollEventComp { ...@@ -1930,4 +1674,3 @@ class RollEventComp {
// }); // });
} }
} }
export default EffectManager;
portal-manager-ui/admin/src/views/thePlatformIsSet/index.css
View file @ f1574186
...@@ -78,6 +78,9 @@ html{ ...@@ -78,6 +78,9 @@ html{
z-index: 10; z-index: 10;
} */ } */
.e-icon{
background: #000;
}
.e-icon a { .e-icon a {
display: flex; display: flex;
width: 100%; width: 100%;
......
portal-manager-ui/admin/src/views/thePlatformIsSet/setPlatformes copy 2.vue 0 → 100644
View file @ f1574186
<template>
<div class="content" v-if="show">
<div class="modal">
<div class="effect-content">
<div class="effect-box">
<div class="e-icon-box"></div>
</div>
</div>
</div>
</div>
<div class="platform w-full h-auto" v-else>
<div class="pla_cont">
<h1>平台设置</h1>
<div class="pla_modle">
<a-card v-if="platformPermission.length">
<a-card-grid
style="width: 25%"
v-for="v in platformPermission"
:key="v.id"
@click="handleClick(v.url)"
>
<div class="pla_max">
<div class="pla_min">
<img
:src="
v.imgPath
? api + v.imgPath
: require('../../assets/images/RBAC.png')
"
alt
/>
<p class="name">{{ v.name }}</p>
<p class="remark">{{ v.remark }}</p>
</div>
</div>
</a-card-grid>
</a-card>
<a-empty
v-else
:image="require('../../assets/images/empty.png')"
:image-style="{
height: '60px',
}"
>
<span slot="description">
<a href="#API">暂无权限</a>
</span>
</a-empty>
</div>
</div>
</div>
</template>
<script>
import Storage from "@/utils/js/Storage";
// import "./index.css";
import { mapState, mapMutations, mapGetters } from "vuex";
let _this = null;
const anim_data = {
domArr: [],
// [
// // 杂乱的正方形
// {
// widthStr: "160rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "linear-gradient(-33deg,#8f35ff,rgba(143,53,255,0)),radial-gradient(circle at 62% -28%,rgba(0,45,156,.75) 0,#002d9c 68%,rgba(0,45,156,0) 111%),linear-gradient(116deg,rgba(0,137,255,.2) 1%,rgba(0,186,255,.04) 38%,rgba(68,149,255,.08) 68%,rgba(3,79,255,.16) 88%)",
// topStr: "calc(50% - 421rem)",
// rightStr: "",
// bottomStr: "",
// leftStr: "calc(50% - 756rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.4,
// opacityAnimMap: new Map([
// [0.2, 0.4], // [帧，值]
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "80rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "linear-gradient(133deg,rgba(255,186,0,0),rgba(255,207,0,.6) 68%),linear-gradient(170deg,#ffc400,#ff9200),linear-gradient(170deg,#ffc400,#ff9200)",
// topStr: "calc(50% - 192rem)",
// rightStr: "",
// bottomStr: "",
// leftStr: "calc(50% - 487rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 1,
// opacityAnimMap: new Map([]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "96rem",
// backgroundColorStr: "#cc7201",
// backgroundImageStr: "",
// topStr: "calc(50% - 141rem)",
// rightStr: "",
// bottomStr: "",
// leftStr: "calc(50% - 624rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.8,
// opacityAnimMap: new Map([
// [0, 0.8],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "40rem",
// backgroundColorStr: "",
// backgroundImageStr: "linear-gradient(170deg,#3e9eff,#0062ff)",
// topStr: "calc(50% - 67rem)",
// rightStr: "",
// bottomStr: "",
// leftStr: "calc(50% - 316rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.75,
// opacityAnimMap: new Map([
// [0, 0.75],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "46rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "radial-gradient(77deg,#ff8300 0,#ff9200 54%,rgba(255,146,0,0) 128%),linear-gradient(77deg,#ffb400,#ff9200 25%,#ffdf2f 68%,#ff8e00)",
// topStr: "calc(50% - 28rem)",
// rightStr: "",
// bottomStr: "",
// leftStr: "calc(50% - 259rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.3,
// opacityAnimMap: new Map([
// [0, 0.3],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "72rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "radial-gradient(77deg,#ff8300 0,#ff9200 54%,rgba(255,146,0,0) 128%),linear-gradient(77deg,#ffb400,#ff9200 25%,#ffdf2f 68%,#ff8e00)",
// topStr: "",
// rightStr: "",
// bottomStr: "calc(50% - 175rem)",
// leftStr: "calc(50% - 579rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.4,
// opacityAnimMap: new Map([
// [0, 0.4],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "160rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "linear-gradient(220deg,#e58dff,#8f35ff 67%,rgba(143,53,255,0)),radial-gradient(circle at 1.2222% -87%,rgba(0,45,156,.75) 0,#002d9c 171%,rgba(0,45,156,0) 278%),linear-gradient(137deg,rgba(0,137,255,.3),rgba(3,79,255,.24))",
// topStr: "",
// rightStr: "",
// bottomStr: "calc(50% - 412rem)",
// leftStr: "calc(50% - 701rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.3,
// opacityAnimMap: new Map([
// [0, 0.3],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "24rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "linear-gradient(220deg,#e58dff,#8f35ff 67%,rgba(143,53,255,0)),radial-gradient(circle at 1.2222% -87%,rgba(0,45,156,.75) 0,#002d9c 171%,rgba(0,45,156,0) 278%),linear-gradient(137deg,rgba(0,137,255,.3),rgba(3,79,255,.24))",
// topStr: "calc(50% - 3rem)",
// rightStr: "",
// bottomStr: "",
// leftStr: "calc(50% - 243rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.3,
// opacityAnimMap: new Map([
// [0, 0.3],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "96rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "linear-gradient(-27deg,rgba(143,53,255,.8) 11%,rgba(143,53,255,0)),radial-gradient(circle at 62% -28%,rgba(0,45,156,.75) 0,#002d9c 68%,rgba(0,45,156,0) 111%)",
// topStr: "calc(50% - 473rem)",
// rightStr: "",
// bottomStr: "",
// leftStr: "calc(50% - 154rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.3,
// opacityAnimMap: new Map([
// [0, 0.3],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "46rem",
// backgroundColorStr: "#ffa800",
// backgroundImageStr: "",
// topStr: "",
// rightStr: "",
// bottomStr: "calc(50% - 98rem)",
// leftStr: "calc(50% - 362rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.95,
// opacityAnimMap: new Map([
// [0, 0.95],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "96rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "linear-gradient(180deg,#004fff,rgba(0,45,156,0) 70%)",
// topStr: "",
// rightStr: "",
// bottomStr: "calc(50% - 498rem)",
// leftStr: "calc(50% - 165rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.95,
// opacityAnimMap: new Map([
// [0, 0.95],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "40rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "-webkit-radial-gradient(top,rgba(0,45,156,.75) 0,#002d9c 92%,rgba(0,45,156,0) 166%)",
// topStr: "",
// rightStr: "",
// bottomStr: "calc(50% - 352rem)",
// leftStr: "calc(50% - 26rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.35,
// opacityAnimMap: new Map([
// [0, 0.35],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "64rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "-webkit-radial-gradient(top,rgba(0,45,156,.75) 0,#002d9c 92%,rgba(0,45,156,0) 166%),-webkit-linear-gradient(334deg,rgba(0,137,255,.2) 1%,rgba(0,186,255,.04) 38%,rgba(68,149,255,.08) 68%,rgba(3,79,255,.16) 88%)",
// topStr: "calc(50% - 395rem)",
// rightStr: "calc(50% - 102rem)",
// bottomStr: "",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.4,
// opacityAnimMap: new Map([
// [0, 0.4],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "24rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "linear-gradient(147deg,#004fff,#002d9c 82%),linear-gradient(153deg,#007fff 5%,#0063ff 95%)",
// topStr: "calc(50% - 206rem)",
// rightStr: "calc(50% - 38rem)",
// bottomStr: "",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.3,
// opacityAnimMap: new Map([
// [0, 0.3],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "130rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "linear-gradient(147deg,#004fff,#002d9c 82%),linear-gradient(153deg,#007fff 5%,#0063ff 95%)",
// topStr: "calc(50% - 263rem)",
// rightStr: "calc(50% - 704rem)",
// bottomStr: "",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.67,
// opacityAnimMap: new Map([
// [0, 0.67],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "64rem",
// backgroundColorStr: "",
// backgroundImageStr: "linear-gradient(128deg,#00ebb6,#00ba46 69%)",
// topStr: "calc(50% - 226rem)",
// rightStr: "calc(50% - 505rem)",
// bottomStr: "",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.95,
// opacityAnimMap: new Map([
// [0, 0.95],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "24rem",
// backgroundColorStr: "",
// backgroundImageStr: "linear-gradient(170deg,#ffc400,rgba(255,207,0,.6))",
// topStr: "calc(50% - 52rem)",
// rightStr: "calc(50% - 218rem)",
// bottomStr: "",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.2,
// opacityAnimMap: new Map([
// [0, 0.2],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "24rem",
// backgroundColorStr: "",
// backgroundImageStr: "linear-gradient(170deg,#00b6ff,#007fff)",
// topStr: "",
// rightStr: "calc(50% - 300rem)",
// bottomStr: "calc(50% - 49rem)",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.96,
// opacityAnimMap: new Map([
// [0, 0.96],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "64rem",
// backgroundColorStr: "",
// backgroundImageStr: "linear-gradient(148deg,#76d2ff,#09baff 99%)",
// topStr: "",
// rightStr: "calc(50% - 453rem)",
// bottomStr: "calc(50% - 170rem)",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.96,
// opacityAnimMap: new Map([
// [0, 0.96],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "96rem",
// backgroundColorStr: "",
// backgroundImageStr: "linear-gradient(136deg,#3e9eff 19%,#0062ff)",
// topStr: "",
// rightStr: "calc(50% - 657rem)",
// bottomStr: "calc(50% - 133rem)",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.96,
// opacityAnimMap: new Map([
// [0, 0.96],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "160rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "linear-gradient(147deg,rgba(0,79,255,.6),rgba(0,45,156,.6) 82%),linear-gradient(153deg,#007fff 5%,#0063ff 95%)",
// topStr: "",
// rightStr: "calc(50% - 800rem)",
// bottomStr: "calc(50% - 345rem)",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.5,
// opacityAnimMap: new Map([
// [0, 0.5],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "96rem",
// backgroundColorStr: "",
// backgroundImageStr: "linear-gradient(-2deg,rgba(0,45,156,.75),#002d9c)",
// topStr: "",
// rightStr: "calc(50% - 213rem)",
// bottomStr: "calc(50% - 532rem)",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.2,
// opacityAnimMap: new Map([
// [0, 0.2],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "96rem",
// backgroundColorStr: "",
// backgroundImageStr: "linear-gradient(-2deg,rgba(0,45,156,.75),#002d9c)",
// topStr: "",
// rightStr: "calc(50% - 213rem)",
// bottomStr: "calc(50% - 532rem)",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.2,
// opacityAnimMap: new Map([
// [0, 0.2],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// // logo 图标
// {
// widthStr: "190rem",
// backgroundColorStr: "",
// backgroundStr:
// "url(" +
// require("@/assets/images/siteArrange/logo-pingtai.png") +
// ") center no-repeat",
// topStr: "calc(50% - 90rem)",
// rightStr: "",
// bottomStr: "",
// leftStr: "calc(50% - 90rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 1,
// index: 99,
// opacityAnimMap: new Map([
// [0, 1], // [帧，值]
// [0.6, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// scale: 1,
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// scale: 1,
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: -1300, z: 800 },
// scale: 1.5,
// },
// ],
// ]),
// },
// // logo 图标
// {
// widthStr: "180rem",
// backgroundColorStr: "",
// backgroundImageStr: "linear-gradient(0deg, #2254F3 0%, #15C5FF 100%)",
// topStr: "calc(50% - 90rem)",
// rightStr: "",
// bottomStr: "",
// leftStr: "calc(50% - 90rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 1,
// opacityAnimMap: new Map([
// [0, 1], // [帧，值]
// [0.6, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// scale: 1,
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// scale: 1,
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: -1300, z: 800 },
// scale: 1.5,
// },
// ],
// ]),
// },
// // 平台设置字体
// {
// widthStr: "200rem",
// backgroundColorStr: "",
// backgroundImageStr: "",
// topStr: "calc(62%)",
// rightStr: "",
// bottomStr: "",
// leftStr: "calc(50% - 98rem)",
// className: "e-square",
// parentClassName: "effect-box",
// 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_boxx",
// 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_boxx",
// 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,
// },
// ],
// ]),
// },
// // e-icon 上行
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.1, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: 450, y: 80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: 450, y: 80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.1,
// // {
// // translate3d: { x: 450, y: 100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.3, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: 300, y: 80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: 300, y: 80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.3,
// // {
// // translate3d: { x: 300, y: 100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.5, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: 150, y: 80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: 150, y: 80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.5,
// // {
// // translate3d: { x: 150, y: 100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.7, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: 0, y: 80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: 0, y: 80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.7,
// // {
// // translate3d: { x: 0, y: 100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.5, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: -150, y: 80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: -150, y: 80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.5,
// // {
// // translate3d: { x: -150, y: 100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.3, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: -300, y: 80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: -300, y: 80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.3,
// // {
// // translate3d: { x: -300, y: 100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.1, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: -450, y: 80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: -450, y: 80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.1,
// // {
// // translate3d: { x: -450, y: 100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // e-icon 下行
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.1, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: 450, y: -80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: 450, y: -80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.1,
// // {
// // translate3d: { x: 450, y: -100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.3, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: 300, y: -80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: 300, y: -80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.3,
// // {
// // translate3d: { x: 300, y: -100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.5, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: 150, y: -80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: 150, y: -80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.5,
// // {
// // translate3d: { x: 150, y: -100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.7, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: 0, y: -80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: 0, y: -80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.7,
// // {
// // translate3d: { x: 0, y: -100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.5, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: -150, y: -80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: -150, y: -80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.5,
// // {
// // translate3d: { x: -150, y: -100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.3, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: -300, y: -80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: -300, y: -80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.3,
// // {
// // translate3d: { x: -300, y: -100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.1, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: -450, y: -80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: -450, y: -80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.1,
// // {
// // translate3d: { x: -450, y: -100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// ],
};
// 特效管理
class EffectManager {
constructor(data = anim_data) {
data.domArr.forEach((item) => {
const entity = new Entity();
// 添加形状组件
entity.addComp(
new ShapeComp({
shapeAtt: item,
})
);
// 添加动画组件
entity.addComp(
new ShapeAnimComp({
opacityAnimMap: item.opacityAnimMap,
transformAnimMap: item.transformAnimMap,
})
);
// 添加滚动事件组件
entity.addComp(
new RollEventComp({
cb: function (scrollPos) {
this.getComp("ShapeAnimComp").changeOpacity(
scrollPos,
this.getComp("ShapeComp")
);
this.getComp("ShapeAnimComp").changeTransform(
scrollPos,
this.getComp("ShapeComp")
);
}.bind(entity),
})
);
});
}
}
// 单体
class Entity {
constructor() {
this._compMap = new Map();
}
addComp(comp) {
this._compMap.set(comp.name, comp);
}
getComp(compName) {
return this._compMap.get(compName);
}
}
// 形状组件
class ShapeComp {
constructor(data) {
this.name = "ShapeComp";
this._shapeDom = document.createElement("div");
this._shapeDom.classList.add(data.shapeAtt.className);
this._shapeDom.style.width = data.shapeAtt.widthStr;
this._shapeDom.style.height = data.shapeAtt.widthStr;
data.shapeAtt.backgroundImageStr
? (this._shapeDom.style.backgroundImage =
data.shapeAtt.backgroundImageStr)
: data.shapeAtt.backgroundStr
? (this._shapeDom.style.background = data.shapeAtt.backgroundStr)
: "";
this._shapeDom.style.top = data.shapeAtt.topStr;
this._shapeDom.style.right = data.shapeAtt.rightStr;
this._shapeDom.style.bottom = data.shapeAtt.bottomStr;
this._shapeDom.style.left = data.shapeAtt.leftStr;
this._shapeDom.style.backgroundColor = data.shapeAtt.backgroundColorStr;
data.shapeAtt.fontColorStr
? (this._shapeDom.style.color = data.shapeAtt.fontColorStr)
: "";
data.shapeAtt.fontSizeStr
? (this._shapeDom.style.fontSize = data.shapeAtt.fontSizeStr)
: "";
data.shapeAtt.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]
// ? (document.getElementsByClassName(
// "effect-box"
// )[0].style.backgroundColor = `rgba(3, 18, 51, ${
// 0 ? 0 : 0.5 - index
// })`)
// : "";
// }
// if (index > 1) {
// clearInterval(set);
// }
// });
function fn() {
index += 0.018;
data.cb(index);
if (index >= 0.43) {
document.getElementsByClassName("effect-box")[0]
? (document.getElementsByClassName(
"effect-box"
)[0].style.backgroundColor = `rgba(3, 18, 51, ${
0 ? 0 : 0.5 - index
})`)
: "";
}
if (index < 1.1) {
window.requestAnimationFrame(fn);
}
}
window.requestAnimationFrame(fn);
// 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() {
this.$nextTick(() => {
this.getPlatformChildren();
});
},
mounted() {
_this = this;
// 重置根字体大小
let root = document.documentElement;
root.style.fontSize = "var(--base-font-size)";
},
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,
{
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_boxx",
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_boxx",
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,
},
],
[
i == 0
? 0.1
: i == 1
? 0.3
: i == 2
? 0.5
: i == 3
? 0.7
: i == 4
? 0.1
: i == 5
? 0.3
: i == 6
? 0.5
: i == 7
? 0.7
: 0.1,
{
translate3d: {
x:
i == 0
? 300
: i == 1
? 150
: i == 2
? 0
: i == 3
? -150
: i == 4
? 300
: i == 5
? 150
: i == 6
? 0
: i == 7
? -150
: 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) {
this.$router.push(url);
},
},
beforeDestroy() {
// 重置根字体大小
let root = document.documentElement;
root.style.fontSize = "16px";
},
};
</script>
<style lang="less" scoped>
@import "./index.css";
@headerH: 4.5rem;
.platform,
.content,
.modal {
width: 100%;
height: 100%;
background: url("~@/assets/images/siteArrange/bg-pintai.jpg") center no-repeat;
background-size: cover;
padding-top: @headerH;
.pla_cont {
width: 1210px;
height: 550px;
margin: 120px auto;
text-align: center;
h1 {
font-weight: 700;
font-size: 44px;
color: #ffffff;
padding-bottom: 35px;
}
.pla_modle {
width: 1200px;
height: 440px;
margin: auto;
// background-color: #ffffff;
background: rgba(5, 30, 75, 0.66);
display: flex;
flex-wrap: wrap;
.ant-card {
width: 100%;
height: 100%;
.ant-card-grid {
height: 218px;
cursor: pointer;
}
}
.pla_max {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
.pla_min {
img {
width: 43px;
height: 43px;
}
.name {
font-weight: 700;
font-size: 20px;
color: #000333;
margin-top: 20px;
margin-bottom: 15px;
}
.remark {
font-weight: 400;
font-size: 14px;
color: #666666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
}
}
}
}
.ant-empty {
margin: auto;
}
}
.content {
background: rgba(3, 18, 51, 1);
padding-top: 0;
}
.modal {
padding-top: 0;
}
</style>
portal-manager-ui/admin/src/views/thePlatformIsSet/setPlatformes.vue
View file @ f1574186
<template> <template>
<div class="content" v-if="show"> <div class="platform w-full h-auto">
<div class="modal"> <div
<div class="effect-content"> class="container-bg h-full w-full flex flex-col justify-center items-center"
<div class="effect-box"> >
<div class="e-icon-box"></div> <!-- <ParticleWavy class="wavy"></ParticleWavy> -->
</div> <div class="title" ref="Title">平台设置</div>
</div> <p class="des" ref="des">
</div> 运用以人工智能为代表的新技术，驱动政务服务模式创新，为人民提供更加智慧化、人性化的政务服务。
</div> </p>
<div class="platform w-full h-auto" v-else> <div ref="menuBox" class="menu-box">
<div class="pla_cont"> <template v-for="(v, i) in platformPermission">
<h1>平台设置</h1> <div
<div class="pla_modle"> :class="[
<a-card v-if="platformPermission.length"> 'menu-item',
<a-card-grid 'flex',
style="width: 25%" 'flex-col',
v-for="v in platformPermission" 'justify-center',
'items-center',
'item' + i,
]"
:ref="'item' + i"
:key="v.id" :key="v.id"
@click="handleClick(v.url)" v-if="v"
> >
<div class="pla_max"> <div class="logo-box">
<div class="pla_min"> <img
<img class="logo cursor-pointer"
:src=" :src="
v.imgPath v.imgPath
? api + v.imgPath ? api + v.imgPath
: require('../../assets/images/RBAC.png') : require('@/assets/images/platformSet/icon-aut.png')
" "
alt @click="handleClick(v.url)"
/> />
<p class="name">{{ v.name }}</p>
<p class="remark">{{ v.remark }}</p>
</div>
</div> </div>
</a-card-grid> <p class="name cursor-default">{{ v.name }}</p>
</a-card> </div>
<a-empty <!-- 菜单不足8个时的填充 -->
v-else <div
:image="require('../../assets/images/empty.png')" v-else
:image-style="{ :class="[
height: '60px', 'menu-item',
}" 'menu-item-fill',
> 'flex',
<span slot="description"> 'flex-col',
<a href="#API">暂无权限</a> 'justify-center',
</span> 'items-center',
</a-empty> 'item' + i,
]"
:key="i"
:ref="'item' + i"
>
<div class="logo-box logo-box-2"></div>
<p class="name">RBAC用户-权限模型</p>
</div>
</template>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Storage from "@/utils/js/Storage"; import { mapState } from "vuex";
// import "./index.css"; import ParticleWavy from "@/components/ParticleWavy.vue";
import { mapState, mapMutations, mapGetters } from "vuex"; import { gsap } from "gsap";
let _this = null;
const anim_data = {
domArr: [],
// [
// // 杂乱的正方形
// {
// widthStr: "160rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "linear-gradient(-33deg,#8f35ff,rgba(143,53,255,0)),radial-gradient(circle at 62% -28%,rgba(0,45,156,.75) 0,#002d9c 68%,rgba(0,45,156,0) 111%),linear-gradient(116deg,rgba(0,137,255,.2) 1%,rgba(0,186,255,.04) 38%,rgba(68,149,255,.08) 68%,rgba(3,79,255,.16) 88%)",
// topStr: "calc(50% - 421rem)",
// rightStr: "",
// bottomStr: "",
// leftStr: "calc(50% - 756rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.4,
// opacityAnimMap: new Map([
// [0.2, 0.4], // [帧，值]
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "80rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "linear-gradient(133deg,rgba(255,186,0,0),rgba(255,207,0,.6) 68%),linear-gradient(170deg,#ffc400,#ff9200),linear-gradient(170deg,#ffc400,#ff9200)",
// topStr: "calc(50% - 192rem)",
// rightStr: "",
// bottomStr: "",
// leftStr: "calc(50% - 487rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 1,
// opacityAnimMap: new Map([]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "96rem",
// backgroundColorStr: "#cc7201",
// backgroundImageStr: "",
// topStr: "calc(50% - 141rem)",
// rightStr: "",
// bottomStr: "",
// leftStr: "calc(50% - 624rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.8,
// opacityAnimMap: new Map([
// [0, 0.8],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "40rem",
// backgroundColorStr: "",
// backgroundImageStr: "linear-gradient(170deg,#3e9eff,#0062ff)",
// topStr: "calc(50% - 67rem)",
// rightStr: "",
// bottomStr: "",
// leftStr: "calc(50% - 316rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.75,
// opacityAnimMap: new Map([
// [0, 0.75],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "46rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "radial-gradient(77deg,#ff8300 0,#ff9200 54%,rgba(255,146,0,0) 128%),linear-gradient(77deg,#ffb400,#ff9200 25%,#ffdf2f 68%,#ff8e00)",
// topStr: "calc(50% - 28rem)",
// rightStr: "",
// bottomStr: "",
// leftStr: "calc(50% - 259rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.3,
// opacityAnimMap: new Map([
// [0, 0.3],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "72rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "radial-gradient(77deg,#ff8300 0,#ff9200 54%,rgba(255,146,0,0) 128%),linear-gradient(77deg,#ffb400,#ff9200 25%,#ffdf2f 68%,#ff8e00)",
// topStr: "",
// rightStr: "",
// bottomStr: "calc(50% - 175rem)",
// leftStr: "calc(50% - 579rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.4,
// opacityAnimMap: new Map([
// [0, 0.4],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "160rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "linear-gradient(220deg,#e58dff,#8f35ff 67%,rgba(143,53,255,0)),radial-gradient(circle at 1.2222% -87%,rgba(0,45,156,.75) 0,#002d9c 171%,rgba(0,45,156,0) 278%),linear-gradient(137deg,rgba(0,137,255,.3),rgba(3,79,255,.24))",
// topStr: "",
// rightStr: "",
// bottomStr: "calc(50% - 412rem)",
// leftStr: "calc(50% - 701rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.3,
// opacityAnimMap: new Map([
// [0, 0.3],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "24rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "linear-gradient(220deg,#e58dff,#8f35ff 67%,rgba(143,53,255,0)),radial-gradient(circle at 1.2222% -87%,rgba(0,45,156,.75) 0,#002d9c 171%,rgba(0,45,156,0) 278%),linear-gradient(137deg,rgba(0,137,255,.3),rgba(3,79,255,.24))",
// topStr: "calc(50% - 3rem)",
// rightStr: "",
// bottomStr: "",
// leftStr: "calc(50% - 243rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.3,
// opacityAnimMap: new Map([
// [0, 0.3],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "96rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "linear-gradient(-27deg,rgba(143,53,255,.8) 11%,rgba(143,53,255,0)),radial-gradient(circle at 62% -28%,rgba(0,45,156,.75) 0,#002d9c 68%,rgba(0,45,156,0) 111%)",
// topStr: "calc(50% - 473rem)",
// rightStr: "",
// bottomStr: "",
// leftStr: "calc(50% - 154rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.3,
// opacityAnimMap: new Map([
// [0, 0.3],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "46rem",
// backgroundColorStr: "#ffa800",
// backgroundImageStr: "",
// topStr: "",
// rightStr: "",
// bottomStr: "calc(50% - 98rem)",
// leftStr: "calc(50% - 362rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.95,
// opacityAnimMap: new Map([
// [0, 0.95],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "96rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "linear-gradient(180deg,#004fff,rgba(0,45,156,0) 70%)",
// topStr: "",
// rightStr: "",
// bottomStr: "calc(50% - 498rem)",
// leftStr: "calc(50% - 165rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.95,
// opacityAnimMap: new Map([
// [0, 0.95],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "40rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "-webkit-radial-gradient(top,rgba(0,45,156,.75) 0,#002d9c 92%,rgba(0,45,156,0) 166%)",
// topStr: "",
// rightStr: "",
// bottomStr: "calc(50% - 352rem)",
// leftStr: "calc(50% - 26rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.35,
// opacityAnimMap: new Map([
// [0, 0.35],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "64rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "-webkit-radial-gradient(top,rgba(0,45,156,.75) 0,#002d9c 92%,rgba(0,45,156,0) 166%),-webkit-linear-gradient(334deg,rgba(0,137,255,.2) 1%,rgba(0,186,255,.04) 38%,rgba(68,149,255,.08) 68%,rgba(3,79,255,.16) 88%)",
// topStr: "calc(50% - 395rem)",
// rightStr: "calc(50% - 102rem)",
// bottomStr: "",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.4,
// opacityAnimMap: new Map([
// [0, 0.4],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "24rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "linear-gradient(147deg,#004fff,#002d9c 82%),linear-gradient(153deg,#007fff 5%,#0063ff 95%)",
// topStr: "calc(50% - 206rem)",
// rightStr: "calc(50% - 38rem)",
// bottomStr: "",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.3,
// opacityAnimMap: new Map([
// [0, 0.3],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "130rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "linear-gradient(147deg,#004fff,#002d9c 82%),linear-gradient(153deg,#007fff 5%,#0063ff 95%)",
// topStr: "calc(50% - 263rem)",
// rightStr: "calc(50% - 704rem)",
// bottomStr: "",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.67,
// opacityAnimMap: new Map([
// [0, 0.67],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "64rem",
// backgroundColorStr: "",
// backgroundImageStr: "linear-gradient(128deg,#00ebb6,#00ba46 69%)",
// topStr: "calc(50% - 226rem)",
// rightStr: "calc(50% - 505rem)",
// bottomStr: "",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.95,
// opacityAnimMap: new Map([
// [0, 0.95],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "24rem",
// backgroundColorStr: "",
// backgroundImageStr: "linear-gradient(170deg,#ffc400,rgba(255,207,0,.6))",
// topStr: "calc(50% - 52rem)",
// rightStr: "calc(50% - 218rem)",
// bottomStr: "",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.2,
// opacityAnimMap: new Map([
// [0, 0.2],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "24rem",
// backgroundColorStr: "",
// backgroundImageStr: "linear-gradient(170deg,#00b6ff,#007fff)",
// topStr: "",
// rightStr: "calc(50% - 300rem)",
// bottomStr: "calc(50% - 49rem)",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.96,
// opacityAnimMap: new Map([
// [0, 0.96],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "64rem",
// backgroundColorStr: "",
// backgroundImageStr: "linear-gradient(148deg,#76d2ff,#09baff 99%)",
// topStr: "",
// rightStr: "calc(50% - 453rem)",
// bottomStr: "calc(50% - 170rem)",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.96,
// opacityAnimMap: new Map([
// [0, 0.96],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "96rem",
// backgroundColorStr: "",
// backgroundImageStr: "linear-gradient(136deg,#3e9eff 19%,#0062ff)",
// topStr: "",
// rightStr: "calc(50% - 657rem)",
// bottomStr: "calc(50% - 133rem)",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.96,
// opacityAnimMap: new Map([
// [0, 0.96],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "160rem",
// backgroundColorStr: "",
// backgroundImageStr:
// "linear-gradient(147deg,rgba(0,79,255,.6),rgba(0,45,156,.6) 82%),linear-gradient(153deg,#007fff 5%,#0063ff 95%)",
// topStr: "",
// rightStr: "calc(50% - 800rem)",
// bottomStr: "calc(50% - 345rem)",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.5,
// opacityAnimMap: new Map([
// [0, 0.5],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "96rem",
// backgroundColorStr: "",
// backgroundImageStr: "linear-gradient(-2deg,rgba(0,45,156,.75),#002d9c)",
// topStr: "",
// rightStr: "calc(50% - 213rem)",
// bottomStr: "calc(50% - 532rem)",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.2,
// opacityAnimMap: new Map([
// [0, 0.2],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// {
// widthStr: "96rem",
// backgroundColorStr: "",
// backgroundImageStr: "linear-gradient(-2deg,rgba(0,45,156,.75),#002d9c)",
// topStr: "",
// rightStr: "calc(50% - 213rem)",
// bottomStr: "calc(50% - 532rem)",
// leftStr: "",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 0.2,
// opacityAnimMap: new Map([
// [0, 0.2],
// [1, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: 0, z: 800 },
// },
// ],
// ]),
// },
// // logo 图标
// {
// widthStr: "190rem",
// backgroundColorStr: "",
// backgroundStr:
// "url(" +
// require("@/assets/images/siteArrange/logo-pingtai.png") +
// ") center no-repeat",
// topStr: "calc(50% - 90rem)",
// rightStr: "",
// bottomStr: "",
// leftStr: "calc(50% - 90rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 1,
// index: 99,
// opacityAnimMap: new Map([
// [0, 1], // [帧，值]
// [0.6, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// scale: 1,
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// scale: 1,
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: -1300, z: 800 },
// scale: 1.5,
// },
// ],
// ]),
// },
// // logo 图标
// {
// widthStr: "180rem",
// backgroundColorStr: "",
// backgroundImageStr: "linear-gradient(0deg, #2254F3 0%, #15C5FF 100%)",
// topStr: "calc(50% - 90rem)",
// rightStr: "",
// bottomStr: "",
// leftStr: "calc(50% - 90rem)",
// className: "e-square",
// parentClassName: "effect-box",
// opacity: 1,
// opacityAnimMap: new Map([
// [0, 1], // [帧，值]
// [0.6, 1],
// ]),
// transform: {
// translate3d: { x: 0, y: 0, z: 0 },
// scale: 1,
// },
// transformAnimMap: new Map([
// [
// 0,
// {
// translate3d: { x: 0, y: 0, z: 0 },
// scale: 1,
// },
// ],
// [
// 1,
// {
// translate3d: { x: 0, y: -1300, z: 800 },
// scale: 1.5,
// },
// ],
// ]),
// },
// // 平台设置字体
// {
// widthStr: "200rem",
// backgroundColorStr: "",
// backgroundImageStr: "",
// topStr: "calc(62%)",
// rightStr: "",
// bottomStr: "",
// leftStr: "calc(50% - 98rem)",
// className: "e-square",
// parentClassName: "effect-box",
// 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_boxx",
// 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_boxx",
// 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,
// },
// ],
// ]),
// },
// // e-icon 上行
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.1, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: 450, y: 80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: 450, y: 80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.1,
// // {
// // translate3d: { x: 450, y: 100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.3, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: 300, y: 80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: 300, y: 80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.3,
// // {
// // translate3d: { x: 300, y: 100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.5, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: 150, y: 80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: 150, y: 80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.5,
// // {
// // translate3d: { x: 150, y: 100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.7, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: 0, y: 80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: 0, y: 80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.7,
// // {
// // translate3d: { x: 0, y: 100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.5, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: -150, y: 80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: -150, y: 80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.5,
// // {
// // translate3d: { x: -150, y: 100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.3, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: -300, y: 80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: -300, y: 80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.3,
// // {
// // translate3d: { x: -300, y: 100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.1, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: -450, y: 80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: -450, y: 80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.1,
// // {
// // translate3d: { x: -450, y: 100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // e-icon 下行
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.1, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: 450, y: -80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: 450, y: -80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.1,
// // {
// // translate3d: { x: 450, y: -100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.3, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: 300, y: -80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: 300, y: -80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.3,
// // {
// // translate3d: { x: 300, y: -100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.5, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: 150, y: -80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: 150, y: -80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.5,
// // {
// // translate3d: { x: 150, y: -100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.7, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: 0, y: -80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: 0, y: -80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.7,
// // {
// // translate3d: { x: 0, y: -100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.5, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: -150, y: -80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: -150, y: -80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.5,
// // {
// // translate3d: { x: -150, y: -100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.3, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: -300, y: -80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: -300, y: -80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.3,
// // {
// // translate3d: { x: -300, y: -100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// // {
// // widthStr: "",
// // backgroundColorStr: "",
// // backgroundImageStr: "",
// // topStr: "",
// // rightStr: "",
// // bottomStr: "",
// // leftStr: "",
// // className: "e-icon",
// // parentClassName: "e-icon-box",
// // opacity: 0,
// // opacityAnimMap: new Map([
// // [0.1, 0], // [帧，值]
// // [1, 1],
// // ]),
// // transform: {
// // translate3d: { x: -450, y: -80, z: 10 },
// // scale: 0,
// // },
// // transformAnimMap: new Map([
// // [
// // 0.1,
// // {
// // translate3d: { x: -450, y: -80, z: 10 },
// // scale: 0,
// // },
// // ],
// // [
// // 0.1,
// // {
// // translate3d: { x: -450, y: -100, z: 10 },
// // scale: 0.5,
// // },
// // ],
// // [
// // 1,
// // {
// // translate3d: { x: 0, y: 0, z: 10 },
// // scale: 1,
// // },
// // ],
// // ]),
// // },
// ],
};
// 特效管理
class EffectManager {
constructor(data = anim_data) {
data.domArr.forEach((item) => {
const entity = new Entity();
// 添加形状组件
entity.addComp(
new ShapeComp({
shapeAtt: item,
})
);
// 添加动画组件
entity.addComp(
new ShapeAnimComp({
opacityAnimMap: item.opacityAnimMap,
transformAnimMap: item.transformAnimMap,
})
);
// 添加滚动事件组件
entity.addComp(
new RollEventComp({
cb: function (scrollPos) {
this.getComp("ShapeAnimComp").changeOpacity(
scrollPos,
this.getComp("ShapeComp")
);
this.getComp("ShapeAnimComp").changeTransform(
scrollPos,
this.getComp("ShapeComp")
);
}.bind(entity),
})
);
});
}
}
// 单体
class Entity {
constructor() {
this._compMap = new Map();
}
addComp(comp) {
this._compMap.set(comp.name, comp);
}
getComp(compName) {
return this._compMap.get(compName);
}
}
// 形状组件
class ShapeComp {
constructor(data) {
this.name = "ShapeComp";
this._shapeDom = document.createElement("div");
this._shapeDom.classList.add(data.shapeAtt.className);
this._shapeDom.style.width = data.shapeAtt.widthStr;
this._shapeDom.style.height = data.shapeAtt.widthStr;
data.shapeAtt.backgroundImageStr
? (this._shapeDom.style.backgroundImage =
data.shapeAtt.backgroundImageStr)
: data.shapeAtt.backgroundStr
? (this._shapeDom.style.background = data.shapeAtt.backgroundStr)
: "";
this._shapeDom.style.top = data.shapeAtt.topStr;
this._shapeDom.style.right = data.shapeAtt.rightStr;
this._shapeDom.style.bottom = data.shapeAtt.bottomStr;
this._shapeDom.style.left = data.shapeAtt.leftStr;
this._shapeDom.style.backgroundColor = data.shapeAtt.backgroundColorStr;
data.shapeAtt.fontColorStr
? (this._shapeDom.style.color = data.shapeAtt.fontColorStr)
: "";
data.shapeAtt.fontSizeStr
? (this._shapeDom.style.fontSize = data.shapeAtt.fontSizeStr)
: "";
data.shapeAtt.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]
// ? (document.getElementsByClassName(
// "effect-box"
// )[0].style.backgroundColor = `rgba(3, 18, 51, ${
// 0 ? 0 : 0.5 - index
// })`)
// : "";
// }
// if (index > 1) {
// clearInterval(set);
// }
// });
function fn() {
index += 0.018;
data.cb(index);
if (index >= 0.43) {
document.getElementsByClassName("effect-box")[0]
? (document.getElementsByClassName(
"effect-box"
)[0].style.backgroundColor = `rgba(3, 18, 51, ${
0 ? 0 : 0.5 - index
})`)
: "";
}
if (index < 1.1) {
window.requestAnimationFrame(fn);
}
}
window.requestAnimationFrame(fn);
// window.addEventListener("scroll", (event) => {
// const scrollTop = document.documentElement.scrollTop;
// const scrollHeight = document.documentElement.scrollHeight;
// const clientHeight = document.documentElement.clientHeight;
// let scrollPos = 0;
// if (scrollTop + clientHeight >= scrollHeight - 5) {
// scrollPos = 1;
// } else if (scrollTop === 0) {
// scrollPos = 0;
// } else {
// scrollPos = Number(
// (scrollTop / (scrollHeight - clientHeight)).toFixed(3)
// );
// }
// console.log(scrollPos, "###########");
// data.cb(scrollPos);
// });
}
}
export default { export default {
components: {
ParticleWavy,
},
data() { data() {
return { return {
api: process.env.VUE_APP_API_IMG_URL, api: process.env.VUE_APP_API_IMG_URL,
...@@ -1999,16 +76,9 @@ export default { ...@@ -1999,16 +76,9 @@ export default {
}; };
}, },
created() { created() {
this.$nextTick(() => { this.getPlatformChildren();
this.getPlatformChildren();
});
},
mounted() {
_this = this;
// 重置根字体大小
let root = document.documentElement;
root.style.fontSize = "var(--base-font-size)";
}, },
mounted() {},
computed: { computed: {
...mapState("user", ["siteList", "userData"]), ...mapState("user", ["siteList", "userData"]),
}, },
...@@ -2016,9 +86,10 @@ export default { ...@@ -2016,9 +86,10 @@ export default {
// 获取平台子菜单 // 获取平台子菜单
getPlatformChildren() { getPlatformChildren() {
let { menuList } = this.userData; let { menuList } = this.userData;
let platform = menuList.filter((v) => v.name === "平台设置"); let arr = new Array(8);
let platform = menuList.filter((v) => v.url === this.$route.path);
if (platform.length) { if (platform.length) {
this.platformPermission = platform let platformList = platform
.map((v) => { .map((v) => {
if (v.childList.length) { if (v.childList.length) {
return v.childList; return v.childList;
...@@ -2027,1319 +98,240 @@ export default { ...@@ -2027,1319 +98,240 @@ export default {
} }
}) })
.flat(); .flat();
platformList.forEach((v, i) => {
arr[i] = v;
});
} }
anim_data.domArr = [ this.platformPermission = arr;
// 杂乱的正方形 this.$nextTick(() => {
{ let tl = gsap.timeline();
widthStr: "160rem", tl.from(".container-bg", {
backgroundColorStr: "", duration: 2,
backgroundImageStr: background: "#000",
"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)", tl.from(
rightStr: "", ".title",
bottomStr: "", {
leftStr: "calc(50% - 756rem)", opacity: 0,
className: "e-square", scale: 0,
parentClassName: "effect-box", duration: 2,
opacity: 0.4, x: this.getDomTranX("Title"),
opacityAnimMap: new Map([ y: this.getDomTranY("Title"),
[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_boxx",
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_boxx",
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, .from(
{ ".des",
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, opacity: 0,
opacityAnimMap: new Map([ scale: 0,
[0.1, 0], // [帧，值] duration: 2,
[1, 1], x: this.getDomTranX("des"),
]), y: this.getDomTranY("des"),
...v, },
transform: { "<"
translate3d: { )
x: .from(
i == 0 ".item0",
? 450 {
: i == 1 opacity: 0.7,
? 300 scale: 0,
: i == 2 duration: 2,
? 150 x: this.getDomTranX("item0"),
: i == 3 y: this.getDomTranY("item0"),
? 0 },
: i == 4 "<"
? 450 )
: i == 5 .from(
? 300 ".item1",
: i == 6 {
? 150 opacity: 0.7,
: i == 7 scale: 0,
? 0 duration: 2,
: 450, x: this.getDomTranX("item1"),
y: i == 4 ? -80 : 80, y: this.getDomTranY("item1"),
z: 10, },
}, "<"
scale: 0, )
}, .from(
transformAnimMap: new Map([ ".item2",
[ {
0.1, opacity: 0.7,
{ scale: 0,
translate3d: { duration: 2,
x: x: this.getDomTranX("item2"),
i == 0 y: this.getDomTranY("item2"),
? 450 },
: i == 1 "<"
? 300 )
: i == 2 .from(
? 150 ".item3",
: i == 3 {
? 0 opacity: 0.7,
: i == 4 scale: 0,
? 450 duration: 2,
: i == 5 x: this.getDomTranX("item3"),
? 300 y: this.getDomTranY("item3"),
: i == 6 },
? 150 "<"
: i == 7 )
? 0 .from(
: 450, ".item4",
y: i >= 4 ? -80 : 80, {
z: 10, opacity: 0.7,
}, scale: 0,
scale: 0, duration: 2,
}, x: this.getDomTranX("item4"),
], y: this.getDomTranY("item4"),
[ },
i == 0 "<"
? 0.1 )
: i == 1 .from(
? 0.3 ".item5",
: i == 2 {
? 0.5 opacity: 0.7,
: i == 3 scale: 0,
? 0.7 duration: 2,
: i == 4 x: this.getDomTranX("item5"),
? 0.1 y: this.getDomTranY("item5"),
: i == 5 },
? 0.3 "<"
: i == 6 )
? 0.5 .from(
: i == 7 ".item6",
? 0.7 {
: 0.1, opacity: 0.7,
{ scale: 0,
translate3d: { duration: 2,
x: x: this.getDomTranX("item6"),
i == 0 y: this.getDomTranY("item6"),
? 300 },
: i == 1 "<"
? 150 )
: i == 2 .from(
? 0 ".item7",
: i == 3 {
? -150 opacity: 0.7,
: i == 4 scale: 0,
? 300 duration: 2,
: i == 5 x: this.getDomTranX("item7"),
? 150 y: this.getDomTranY("item7"),
: i == 6 },
? 0 "<"
: i == 7 )
? -150 .to(
: 450, ".menu-box",
y: i >= 4 ? -100 : 100, {
z: 10, background: "rgba(5, 30, 75, 0.66)",
}, },
scale: 0.5, ">"
}, )
], .from(
[ ".name",
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, 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) {
if (!url) return;
this.$router.push(url); this.$router.push(url);
}, },
// 获取dom动画偏移
getDomTranX(ref) {
let dom;
if (this.$refs[ref] && Array.isArray(this.$refs[ref])) {
dom = this.$refs[ref][0].getBoundingClientRect();
} else {
dom = this.$refs[ref].getBoundingClientRect();
}
let menuBox = this.$refs.menuBox.getBoundingClientRect();
let x = menuBox.left + menuBox.width / 2 - dom.left - dom.width / 2;
return x;
},
getDomTranY(ref) {
let dom;
if (this.$refs[ref] && Array.isArray(this.$refs[ref])) {
dom = this.$refs[ref][0].getBoundingClientRect();
} else {
dom = this.$refs[ref].getBoundingClientRect();
}
let menuBox = this.$refs.menuBox.getBoundingClientRect();
let y = menuBox.top + menuBox.height / 2 - dom.top - dom.height / 2;
return y;
},
}, },
beforeDestroy() { beforeDestroy() {},
// 重置根字体大小
let root = document.documentElement;
root.style.fontSize = "16px";
},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import "./index.css"; @headerH: 72px;
@headerH: 4.5rem; .platform {
.platform,
.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") no-repeat center /
background-size: cover; 100% 100%;
padding-top: @headerH; .container-bg {
padding-top: @headerH;
.pla_cont { color: #ffffff;
width: 1210px; position: relative;
height: 550px; // background-color: #000;
margin: 120px auto; .wavy {
text-align: center; position: absolute;
bottom: 0;
h1 { z-index: 0;
font-weight: 700; overflow: hidden;
font-size: 44px;
color: #ffffff;
padding-bottom: 35px;
}
.pla_modle {
width: 1200px;
height: 440px;
margin: auto;
// background-color: #ffffff;
background: rgba(5, 30, 75, 0.66);
display: flex;
flex-wrap: wrap;
.ant-card {
width: 100%;
height: 100%;
.ant-card-grid {
height: 218px;
cursor: pointer;
}
}
.pla_max {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
.pla_min {
img {
width: 43px;
height: 43px;
}
.name {
font-weight: 700;
font-size: 20px;
color: #000333;
margin-top: 20px;
margin-bottom: 15px;
}
.remark {
font-weight: 400;
font-size: 14px;
color: #666666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
}
}
} }
} }
.ant-empty { .title {
margin: auto; margin-bottom: 30px;
font-size: 52px;
font-family: FZZhengHeiS-EB-GB;
}
.des {
font-size: 22px;
font-family: Source Han Sans CN;
font-weight: 500;
}
.menu-box {
width: 1000px;
height: 450px;
margin-top: 72px;
// background: rgba(5, 30, 75, 0.66);
border-radius: 12px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.logo-box {
width: 66px;
height: 66px;
margin-bottom: 16px;
border-radius: 10px;
}
.logo {
width: inherit;
height: inherit;
object-fit: contain;
cursor: pointer;
}
.logo-box-2 {
background: rgba(0, 0, 0, 0.5);
}
.name {
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #ffffff;
}
.menu-item-fill {
.name {
visibility: hidden;
}
} }
}
.content {
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