Skip to content

S
smart_gov_platform
Commit fa0011c9 authored by 赵啸非's avatar 赵啸非
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents 104d6d77 e697da2d
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 @ fa0011c9
......@@ -287,10 +287,12 @@ export default {
this.siteVisible = true;
},
filterItems(appThemeName) {
return (
this.categoryList.find((v) => v.id == appThemeName)?.categoryName ||
"--"
);
let arr = this.categoryList.find((v) => v.id == appThemeName);
if (arr.length) {
return arr.categoryName;
} else {
return "--";
}
},
},
};
......
base-manager-ui/admin/src/pages/basicset/appmarket/modal/AddData.vue
View file @ fa0011c9
......@@ -140,6 +140,36 @@
<a-icon type="upload" /> 点击上传
</a-button>
</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>
</div>
......@@ -167,6 +197,8 @@
<script>
import YQuillEditor from "@/components/YQuillEditor.vue";
import { saveDataset } from "@/services/market";
import { request } from "@/utils/request";
import local from "@/utils/local";
export default {
components: {
YQuillEditor,
......@@ -185,7 +217,9 @@ export default {
},
data() {
return {
siteId: local.getLocal("siteId"),
api: process.env.VUE_APP_API_BASE_URL + "/",
pageSizeOptions: ["10", "30", "50", "100", "200"],
labelCol: {
span: 2,
},
......@@ -198,6 +232,12 @@ export default {
},
isopen: false,
year: null,
selectedLeftRowKeys: [],
current: 1,
size: 10,
total: 0,
tableList: [],
columns: [],
};
},
computed: {
......@@ -236,7 +276,7 @@ export default {
onAdd(appTemplate) {
Object.assign(this.form, this.$options.data().form);
this.form.id && this.$delete(this.form, "id");
this.form.appInfoFieldList = appTemplate.map((v) => {
this.form.appInfoFieldList = appTemplate.map(async (v) => {
if (v.id) {
delete v.id;
}
......@@ -247,6 +287,9 @@ export default {
if (v.fieldType == "checkbox") {
v.checkbox = [];
}
if (v.fieldType == "table") {
await this.getData(v.serviceApi);
}
return v;
});
this.form.appId = this.$route.query.id;
......@@ -308,6 +351,22 @@ export default {
row.fieldValue = this.$moment(value).format("YYYY");
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>
......
base-manager-ui/admin/src/pages/basicset/appmarket/modal/AddField.vue
View file @ fa0011c9
<template>
<div>
<a-modal :width="600" v-model="Visible" title="新增数据字段">
<a-modal :width="750" v-model="Visible" title="新增数据字段">
<a-form-model
:model="form"
ref="form"
......@@ -29,17 +29,87 @@
</a-select-option>
</a-select>
</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
v-if="isNeedConfig"
label="数据配置"
class="data-config"
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 }"
v-model="form.fieldTypeValue"
placeholder='请输入JSON格式数据配置,如{"0":"否","1":"是"}'
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 label="数据类型" prop="dataType">
<a-radio-group v-model="form.dataType">
......@@ -123,6 +193,10 @@ const fieldTypeItem = [
value: "select",
label: "下拉选择框",
},
{
value: "table",
label: "表格",
},
{
value: "upload",
label: "文件上传",
......@@ -142,27 +216,39 @@ export default {
},
data() {
// 校验JSON
const checkJSON = (rule, value, callback) => {
if (!value) {
callback(new Error("请输入数据配置"));
} else {
try {
let Obj = JSON.parse(value);
let isjson =
Object.prototype.toString.call(Obj).toLowerCase() ==
"[object object]" && Object.keys(Obj).length;
if (isjson) {
callback();
} else {
callback(new Error("请输入JSON对象格式"));
}
} catch (err) {
callback(new Error("输入的JSON数据格式有误"));
}
}
};
// const checkJSON = (rule, value, callback) => {
// if (!value) {
// callback(new Error("请输入数据配置"));
// } else {
// try {
// let Obj = JSON.parse(value);
// let isjson =
// Object.prototype.toString.call(Obj).toLowerCase() ==
// "[object object]" && Object.keys(Obj).length;
// if (isjson) {
// callback();
// } else {
// callback(new Error("请输入JSON对象格式"));
// }
// } catch (err) {
// callback(new Error("输入的JSON数据格式有误"));
// }
// }
// };
return {
fieldTypeItem,
fieldType: [
{
key: "",
value: "",
},
],
apiParams: [
{
key: "",
value: "",
},
],
form: {
appId: "", // 应用id
fieldCode: "", // 字段编码
......@@ -175,6 +261,8 @@ export default {
fieldOrderNo: 99, // 排序号
fieldTypeValue: "", // 字段类型值
defaultValue: "", // 字段默认值
serviceApi: "", // 动态数据接口
serviceApiParams: "", // 动态数据参数配置
remark: "", //
},
rules: {
......@@ -193,8 +281,8 @@ export default {
isList: [
{ required: true, message: "请选择是否列表显示", trigger: "change" },
],
fieldTypeValue: [
{ required: true, validator: checkJSON, trigger: "blur" },
serviceApi: [
{ required: true, message: "请输入数据接口地址", trigger: "blur" },
],
},
};
......@@ -212,7 +300,8 @@ export default {
return (
this.form.fieldType == "radio" ||
this.form.fieldType == "checkbox" ||
this.form.fieldType == "select"
this.form.fieldType == "select" ||
this.form.fieldType == "table"
);
},
},
......@@ -220,7 +309,11 @@ export default {
handleOk() {
this.$refs.form.validate(async (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;
if (code === 1) {
this.$message.success(msg);
......@@ -231,7 +324,19 @@ export default {
});
},
handleCancel() {
this.$refs.form.resetFields();
this.$refs.form.clearValidate();
this.fieldType = [
{
key: "",
value: "",
},
];
this.apiParams = [
{
key: "",
value: "",
},
];
this.Visible = false;
},
// 新增
......@@ -242,12 +347,68 @@ export default {
},
// 编辑
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 };
},
// 添加数据配置行数
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) {
if (!(val == "radio" || val == "checkbox" || val == "select")) {
if (
!(val == "radio" || val == "checkbox" || val == "select") ||
!(val == "table")
) {
this.form.fieldTypeValue = "";
this.form.serviceApi = "";
this.fieldType = [
{
key: "",
value: "",
},
];
}
},
},
......@@ -259,4 +420,18 @@ export default {
max-height: 600px;
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>
\ No newline at end of file
portal-manager-ui/admin/src/views/thePlatformIsSet/animation.js
View file @ fa0011c9
const anim_data = {
export const anim_data = {
domArr: [
// 杂乱的正方形
{
......@@ -953,8 +953,8 @@ const anim_data = {
[
0.6,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 0.8,
translate3d: { x: 0, y: 380, z: 10 },
scale: 0.3,
},
],
[
......@@ -991,8 +991,8 @@ const anim_data = {
[
0.6,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 0.8,
translate3d: { x: 0, y: 350, z: 10 },
scale: 0.3,
},
],
[
......@@ -1004,136 +1004,9 @@ const anim_data = {
],
]),
},
],
menusArr: [
// 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: "",
......@@ -1150,14 +1023,14 @@ const anim_data = {
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 80, z: 10 },
translate3d: { x: 430, y: 112, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 0, y: 80, z: 10 },
translate3d: { x: 430, y: 112, z: 10 },
scale: 0,
},
],
......@@ -1307,135 +1180,6 @@ const anim_data = {
]),
},
// e-icon 下行
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.1, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: 450, y: -80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 450, y: -80, z: 10 },
scale: 0,
},
],
[
0.1,
{
translate3d: { x: 450, y: -100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.3, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: 300, y: -80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 300, y: -80, z: 10 },
scale: 0,
},
],
[
0.3,
{
translate3d: { x: 300, y: -100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.5, 0], // [帧，值]
[1, 1],
]),
transform: {
translate3d: { x: 150, y: -80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 150, y: -80, z: 10 },
scale: 0,
},
],
[
0.5,
{
translate3d: { x: 150, y: -100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{
widthStr: "",
backgroundColorStr: "",
......@@ -1611,9 +1355,9 @@ const anim_data = {
],
};
// 特效管理
class EffectManager {
constructor(data = anim_data) {
data.domArr.forEach((item) => {
export class EffectManager {
constructor(data = anim_data.domArr) {
data.forEach((item) => {
const entity = new Entity();
// 添加形状组件
......@@ -1930,4 +1674,3 @@ class RollEventComp {
// });
}
}
export default EffectManager;
portal-manager-ui/admin/src/views/thePlatformIsSet/index.css
View file @ fa0011c9
......@@ -78,6 +78,9 @@ html{
z-index: 10;
} */
.e-icon{
background: #000;
}
.e-icon a {
display: flex;
width: 100%;
......
portal-manager-ui/admin/src/views/thePlatformIsSet/setPlatformes copy 2.vue 0 → 100644
View file @ fa0011c9
<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 @ fa0011c9
<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"
<div class="platform w-full h-auto">
<div
class="container-bg h-full w-full flex flex-col justify-center items-center"
>
<!-- <ParticleWavy class="wavy"></ParticleWavy> -->
<div class="title" ref="Title">平台设置</div>
<p class="des" ref="des">
运用以人工智能为代表的新技术，驱动政务服务模式创新，为人民提供更加智慧化、人性化的政务服务。
</p>
<div ref="menuBox" class="menu-box">
<template v-for="(v, i) in platformPermission">
<div
:class="[
'menu-item',
'flex',
'flex-col',
'justify-center',
'items-center',
'item' + i,
]"
:ref="'item' + i"
:key="v.id"
@click="handleClick(v.url)"
v-if="v"
>
<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 class="logo-box">
<img
class="logo cursor-pointer"
:src="
v.imgPath
? api + v.imgPath
: require('@/assets/images/platformSet/icon-aut.png')
"
@click="handleClick(v.url)"
/>
</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>
<p class="name cursor-default">{{ v.name }}</p>
</div>
<!-- 菜单不足8个时的填充 -->
<div
v-else
:class="[
'menu-item',
'menu-item-fill',
'flex',
'flex-col',
'justify-center',
'items-center',
'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>
</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);
// });
}
}
import { mapState } from "vuex";
import ParticleWavy from "@/components/ParticleWavy.vue";
import { gsap } from "gsap";
export default {
components: {
ParticleWavy,
},
data() {
return {
api: process.env.VUE_APP_API_IMG_URL,
......@@ -1999,16 +76,9 @@ export default {
};
},
created() {
this.$nextTick(() => {
this.getPlatformChildren();
});
},
mounted() {
_this = this;
// 重置根字体大小
let root = document.documentElement;
root.style.fontSize = "var(--base-font-size)";
this.getPlatformChildren();
},
mounted() {},
computed: {
...mapState("user", ["siteList", "userData"]),
},
......@@ -2016,9 +86,10 @@ export default {
// 获取平台子菜单
getPlatformChildren() {
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) {
this.platformPermission = platform
let platformList = platform
.map((v) => {
if (v.childList.length) {
return v.childList;
......@@ -2027,1319 +98,240 @@ export default {
}
})
.flat();
platformList.forEach((v, i) => {
arr[i] = v;
});
}
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,
this.platformPermission = arr;
this.$nextTick(() => {
let tl = gsap.timeline();
tl.from(".container-bg", {
duration: 2,
background: "#000",
});
tl.from(
".title",
{
opacity: 0,
scale: 0,
duration: 2,
x: this.getDomTranX("Title"),
y: this.getDomTranY("Title"),
},
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",
"<"
)
.from(
".des",
{
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",
scale: 0,
duration: 2,
x: this.getDomTranX("des"),
y: this.getDomTranY("des"),
},
"<"
)
.from(
".item0",
{
opacity: 0.7,
scale: 0,
duration: 2,
x: this.getDomTranX("item0"),
y: this.getDomTranY("item0"),
},
"<"
)
.from(
".item1",
{
opacity: 0.7,
scale: 0,
duration: 2,
x: this.getDomTranX("item1"),
y: this.getDomTranY("item1"),
},
"<"
)
.from(
".item2",
{
opacity: 0.7,
scale: 0,
duration: 2,
x: this.getDomTranX("item2"),
y: this.getDomTranY("item2"),
},
"<"
)
.from(
".item3",
{
opacity: 0.7,
scale: 0,
duration: 2,
x: this.getDomTranX("item3"),
y: this.getDomTranY("item3"),
},
"<"
)
.from(
".item4",
{
opacity: 0.7,
scale: 0,
duration: 2,
x: this.getDomTranX("item4"),
y: this.getDomTranY("item4"),
},
"<"
)
.from(
".item5",
{
opacity: 0.7,
scale: 0,
duration: 2,
x: this.getDomTranX("item5"),
y: this.getDomTranY("item5"),
},
"<"
)
.from(
".item6",
{
opacity: 0.7,
scale: 0,
duration: 2,
x: this.getDomTranX("item6"),
y: this.getDomTranY("item6"),
},
"<"
)
.from(
".item7",
{
opacity: 0.7,
scale: 0,
duration: 2,
x: this.getDomTranX("item7"),
y: this.getDomTranY("item7"),
},
"<"
)
.to(
".menu-box",
{
background: "rgba(5, 30, 75, 0.66)",
},
">"
)
.from(
".name",
{
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) {
if (!url) return;
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() {
// 重置根字体大小
let root = document.documentElement;
root.style.fontSize = "16px";
},
beforeDestroy() {},
};
</script>
<style lang="less" scoped>
@import "./index.css";
@headerH: 4.5rem;
.platform,
.content,
.modal {
@headerH: 72px;
.platform {
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;
}
}
}
background: url("~@/assets/images/siteArrange/bg-pintai.jpg") no-repeat center /
100% 100%;
.container-bg {
padding-top: @headerH;
color: #ffffff;
position: relative;
// background-color: #000;
.wavy {
position: absolute;
bottom: 0;
z-index: 0;
overflow: hidden;
}
}
.ant-empty {
margin: auto;
.title {
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>
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