Skip to content

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

perf:修改页面

parent 2af0acbc
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3624 additions and 3624 deletions
portal-manager-ui/admin/src/views/thePlatformIsSet/index.css
View file @ b8fb914e
...@@ -78,9 +78,9 @@ html{ ...@@ -78,9 +78,9 @@ html{
z-index: 10; z-index: 10;
} */ } */
.e-icon{ /* .e-icon{
background: #000; background: #000;
} } */
.e-icon a { .e-icon a {
display: flex; display: flex;
width: 100%; width: 100%;
......
portal-manager-ui/admin/src/views/thePlatformIsSet/setPlatformes copy 3.vue 0 → 100644
View file @ b8fb914e
<template>
<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"
v-if="v"
>
<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>
<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 { 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,
platformPermission: [],
show: true,
};
},
created() {
this.getPlatformChildren();
},
mounted() {},
computed: {
...mapState("user", ["siteList", "userData"]),
},
methods: {
// 获取平台子菜单
getPlatformChildren() {
let { menuList } = this.userData;
let arr = new Array(8);
let platform = menuList.filter((v) => v.url === this.$route.path);
if (platform.length) {
let platformList = platform
.map((v) => {
if (v.childList.length) {
return v.childList;
} else {
return [];
}
})
.flat();
platformList.forEach((v, i) => {
arr[i] = v;
});
}
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,
z: 10,
...this.getDomTran("Title"),
},
"<"
)
.from(
".des",
{
opacity: 0,
scale: 0,
duration: 2,
z: 10,
...this.getDomTran("des"),
},
"<"
)
.from(
".item0",
{
opacity: 0.7,
scale: 0,
duration: 2,
z: 10,
...this.getDomTran("item0"),
},
"<"
)
.from(
".item1",
{
opacity: 0.7,
scale: 0,
duration: 2,
z: 10,
...this.getDomTran("item1"),
},
"<"
)
.from(
".item2",
{
opacity: 0.7,
scale: 0,
duration: 2,
z: 10,
...this.getDomTran("item2"),
},
"<"
)
.from(
".item3",
{
opacity: 0.7,
scale: 0,
duration: 2,
z: 10,
...this.getDomTran("item3"),
},
"<"
)
.from(
".item4",
{
opacity: 0.7,
scale: 0,
duration: 2,
z: 10,
...this.getDomTran("item4"),
},
"<"
)
.from(
".item5",
{
opacity: 0.7,
scale: 0,
duration: 2,
z: 10,
...this.getDomTran("item5"),
},
"<"
)
.from(
".item6",
{
opacity: 0.7,
scale: 0,
duration: 2,
z: 10,
...this.getDomTran("item6"),
},
"<"
)
.from(
".item7",
{
opacity: 0.7,
scale: 0,
duration: 2,
z: 10,
...this.getDomTran("item7"),
},
"<"
)
.from(
".name",
{
duration: 2,
opacity: 0,
},
"> -1"
)
.to(
".menu-box",
{
background: "rgba(5, 30, 75, 0.66)",
},
"> -1"
);
});
},
// 跳转
handleClick(url) {
if (!url) return;
this.$router.push(url);
},
// 获取dom动画偏移
getDomTran(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;
let y = menuBox.top + menuBox.height / 2 - dom.top - dom.height / 2;
return {
x,
y,
};
},
},
beforeDestroy() {},
};
</script>
<style lang="less" scoped>
@headerH: 72px;
.platform {
width: 100%;
height: 100%;
background: url("~@/assets/images/siteArrange/bg-pintai.jpg") no-repeat center /
100% 100%;
.container-bg {
padding-top: @headerH;
color: #ffffff;
position: relative;
transform-style: preserve-3d;
perspective: 500px;
// background-color: #000;
.wavy {
position: absolute;
bottom: 0;
z-index: 0;
overflow: hidden;
}
}
.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;
}
}
}
</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