Merge remote-tracking branch 'origin/master'

portal-manager-ui/admin/src/views/signIn/signIn.vue

@@ -214,7 +214,7 @@ export default {
   --input-height: 50px;
   --input-border-color: rgba(238, 238, 238, 1);
   --time: 1s;
-  background: url("@/assets/images/login_bg.png");
+  background: url("@/assets/images/login_bg2.jpg");
   background-size: 100% auto;
   animation: bg-roll 150s cubic-bezier(0.21, 0.07, 0.88, 1.02) infinite;
   .main {

portal-manager-ui/admin/src/views/thePlatformIsSet/index.css

@@ -78,9 +78,9 @@ html{
 
   z-index: 10;
 } */
-.e-icon{
+/* .e-icon{
   background: #000;
-}
+} */
 .e-icon a {
   display: flex;
   width: 100%;

portal-manager-ui/admin/src/views/thePlatformIsSet/setPlatformes copy 3.vue

+<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>