Merge remote-tracking branch 'origin/master'

portal-manager-ui/admin/package.json

@@ -30,6 +30,7 @@
     "qs": "^6.10.3",
     "secure-ls": "^1.2.6",
     "swiper": "5",
+    "three": "^0.155.0",
     "v-viewer": "^1.6.4",
     "vue": "^2.6.14",
     "vue-highlightjs": "^1.3.3",

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

 <template>
   <div class="actuary w-full h-auto">
+    <Start class="start"/>
     <div class="act_cont">
       <div class="act_tit">
         <h1>智慧政务数据精算</h1>
@@ -7,29 +8,19 @@
           运用以人工智能为代表的新技术，驱动政务服务模式创新，为人民提供更加智慧化、人性化的政务服务，实现互联网与政务服务深度融合，大幅提升政务服务智慧化水平，让政府服务更聪明，让企业和市民办事更方便、更快捷、更有效率。
         </p>
       </div>
-      <div class="act_mod">
-        <div
-          class="mod_max"
-          v-for="item of menuPermission"
+      <div class="over_act_mod">
+        <div class="act_mod" ref="mode">
+          <div class="act_mod_item"  v-for="(item,index) of menuPermission"
             :key="item.id"
             @click="handleJump(item.url)"
-        >
-          <div class="flip">
-            <div class="mod_min">
-              <img
-                :src="
-                  item.imgPath
-                    ? api + item.imgPath
-                    : require('../../assets/images/qyhx.png')
-                "
-                alt
-              />
-              <div class="mod_cont">
-                <p class="name">{{ item.name }}</p>
-                <p class="remark">
-                  {{ item.remark }}
-                </p>
+            @mouseover="hoverItem(index)"
+            @mouseleave="hoverleave(index)"
+            :style="{background: `url(${require('@/assets/images/dataActuary/'+(index+1)+'.png')})`}">
+            <div class="actitem_tit">
+              {{item.name}}
             </div>
+            <div class="actitem_p">
+              {{item.hover?item.remark:'Business data analysis'}}
             </div>
           </div>
         </div>
@@ -41,6 +32,7 @@
 <script>
 import menu from "@/mixins/menu";
 import Storage from "@/utils/js/Storage";
+import Start from "./demo2"
 export default {
   mixins: [menu],
   data() {
@@ -49,6 +41,9 @@ export default {
       menuPermission: [],
     };
   },
+  components:{
+    Start
+  },
 
   created() {
     this.getMenuList(true);
@@ -57,6 +52,23 @@ export default {
   },
 
   methods: {
+    hoverItem(index){
+        this.menuPermission[index].hover = true
+        this.$refs.mode.style.transition="all 1s ease 0s";
+      // 如果大于6就要往前移动
+      if(index>5){
+        let num = index-5
+        this.$refs.mode.style.transform="translateX(-"+num*190+"px)";
+        this.$forceUpdate()
+      }
+    },
+    hoverleave(index){
+        this.$refs.mode.style.transform="translate(0, 0)";
+        this.$refs.mode.style.transition="all .5s ease 0s";
+        this.menuPermission[index].hover = false
+        this.$forceUpdate()
+    },
+
     // 跳转
     handleJump(url) {
       this.$router.push(url);
@@ -66,7 +78,7 @@ export default {
       let { menuList } = Storage.get(2, "userInfo");
       let actuary = menuList.filter((v) => v.name === "数据精算");
       if (actuary.length) {
-        this.menuPermission = actuary
+        let arr = actuary
           .map((v) => {
             if (v.childList.length) {
               return v.childList;
@@ -75,6 +87,10 @@ export default {
             }
           })
           .flat();
+          arr.forEach(item=>{
+            item.hover = false
+          })
+          this.menuPermission = arr
       }
     },
   },
@@ -83,85 +99,145 @@ export default {
 
 <style lang="less" scoped>
 @headerH: 4.5rem;
+@keyframes startopen{
+  0% {
+    width: 170px;
+  }
+  100% {
+    width: 551px;
+  }
+}
+@keyframes leaveopen{
+  0% {
+    width: 551px;
+    background-size: 100% 100%;
+  }
+  100% {
+    background-size: 100% 100%;
+    width: 170px;
+  }
+}
+.start{
+  position: absolute;
+  bottom: 0;
+  z-index: 0;
+  overflow: hidden;
+}
 .actuary {
-  background: url("~@/assets/images/jinsuanbg.png") center no-repeat;
+  background: url("~@/assets/images/dataActuary/bg.png") center no-repeat;
   background-size: cover;
   padding-top: @headerH;
 
   .act_cont {
     margin: 120px auto;
+    position: relative;
+    z-index: 3;
 
     .act_tit {
       text-align: center;
       margin: auto;
-      max-width: 800px;
+      max-width: 1300px;
       h1 {
         font-weight: 700;
         font-size: 44px;
         color: #ffffff;
+        font-size: 53px;
+        font-family: FZZhengHeiS-EB-GB;
+        color: #FFFFFF;
+        line-height: 64px;
+        letter-spacing: 6px;
+        background: linear-gradient(0deg, #D2F8FF 0%, #FFFFFF 88.37890625%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
       }
       p {
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        line-height: 20px;
         padding-top: 20px;
         text-align: left;
+        font-size: 22px;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        color: #FFFFFF;
+        line-height: 34px;
       }
     }
-
+    .over_act_mod{
+      width: 1520px;
+      overflow: hidden;
+      margin: 50px auto 0;
+    }
     .act_mod {
-      margin: 30px 100px 0;
       display: flex;
-      flex-wrap: wrap;
-
-      .mod_max {
-        width: 344px;
-        height: 200px;
-        padding: 18px;
-
-        cursor: pointer;
-        &:hover > .flip {
-          transform: translateY(-10px);
+      justify-content: space-between;
+      transition: all 1s ease 0s;
+      .yw{
+         background: url('~@/assets/images/dataActuary/1.png');
       }
       
-        .flip {
-          width: 100%;
-          height: 100%;
-          border-radius: 8px;
-          background-color: #ffffff;
-          transition: all linear 200ms;
+      .act_mod_item:hover{
+        animation: startopen 1s normal 1 forwards;
+        overflow: hidden;
+        flex-shrink: 0;
+        width: 551px;
+        height: 450px;
+        background: url('~@/assets/images/dataActuary/bg-open.png') center no-repeat !important;
+        background-size: 100% 100%;
+        border-radius: 12px;
+        box-sizing: border-box;
+        padding: 90px 50px;
+        .actitem_tit{
+          width: 350px;
+          font-size: 31px;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          color: #FFFFFF;
+          line-height: 59px;
+          margin-bottom: 20px;
         }
-
-        .mod_min {
-          width: 285px;
-          height: 100%;
-          margin: auto;
-          display: flex;
-          align-items: center;
-
-          img {
-            width: 85px;
-            height: 72px;
+        .actitem_tit::before{
+          content: none;
         }
-
-          .mod_cont {
-            width: 100%;
-            .name {
-              font-size: 18px;
-              font-weight: bold;
-              padding-bottom: 10px;
-              text-align: center;
+        .actitem_p{
+          width: 350px;
+          font-size: 16px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #FFFFFF;
+          line-height: 28px;
         }
-            .remark {
-              font-size: 14px;
-              line-height: 18px;
-              display: -webkit-box;
-              -webkit-box-orient: vertical;
-              -webkit-line-clamp: 4;
-              overflow: hidden;
       }
+      .act_mod_item{
+        animation: leaveopen .5s normal 1 forwards;
+        flex-shrink: 0;
+        width: 170px;
+        height: 450px;
+        border-radius: 12px;
+        margin:0 10px;
+        .actitem_p{
+          padding: 0 10px;
+          font-size: 12px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #0857E8;
+          line-height: 38px;
+          opacity: 0.7;
+        }
+        .actitem_tit{
+          font-size: 20px;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          color: #0857E8;
+          line-height: 38px;
+          padding:40px 10px 8px;
+          position: relative;
         }
+        .actitem_tit::before{
+          content: "";
+          position: absolute;
+          left: 10px;
+          bottom: 0;
+          width: 30px;
+          height: 2px;
+          background: linear-gradient(to bottom right, #0857E8, #fff);
         }
       }
     }

portal-manager-ui/admin/src/views/dataActuary/demo2.vue

+<template>
+  <div id="indexLizi" class="demo"></div>
+</template>
+
+<script>
+import * as THREE from "three";
+export default {
+  name: "Pointwave",
+  props: {
+    amountX: {
+      type: Number,
+      default: 50,
+    },
+    amountY: {
+      type: Number,
+      default: 50,
+    },
+    color: {
+      type: String,
+      default: "#10cbff",
+    },
+    top: {
+      type: Number,
+      default: 350,
+    },
+  },
+  data() {
+    return {
+      count: 0,
+      // 用来跟踪鼠标水平位置
+      mouseX: 0,
+      windowHalfX: null,
+      // 相机
+      camera: null,
+      // 场景
+      scene: null,
+      // 批量管理粒子
+      particles: null,
+      // 渲染器
+      renderer: null,
+    };
+  },
+  mounted() {
+    this.init();
+    this.animate();
+  },
+  methods: {
+    init() {
+      const SEPARATION = 100;
+      const SCREEN_WIDTH = window.innerWidth;
+      const SCREEN_HEIGHT = window.innerHeight;
+      const container = document.createElement("div");
+      this.windowHalfX = window.innerWidth / 2;
+      container.style.position = "relative";
+      container.style.top = `${this.top}px`;
+      container.style.height = `${SCREEN_HEIGHT - this.top}px`;
+      document.getElementById("indexLizi").appendChild(container);
+
+      this.camera = new THREE.PerspectiveCamera(
+        75,
+        SCREEN_WIDTH / SCREEN_HEIGHT,
+        1,
+        10000
+      );
+      this.camera.position.z = 1000;
+
+      this.scene = new THREE.Scene();
+
+      const numParticles = this.amountX * this.amountY;
+      const positions = new Float32Array(numParticles * 3);
+      const scales = new Float32Array(numParticles);
+      // 初始化粒子位置和大小
+      let i = 0;
+      let j = 0;
+      for (let ix = 0; ix < this.amountX; ix++) {
+        for (let iy = 0; iy < this.amountY; iy++) {
+          positions[i] = ix * SEPARATION - (this.amountX * SEPARATION) / 2;
+          positions[i + 1] = 0;
+          positions[i + 2] = iy * SEPARATION - (this.amountY * SEPARATION) / 2;
+          scales[j] = 1;
+          i += 3;
+          j++;
+        }
+      }
+
+      const geometry = new THREE.BufferGeometry();
+      geometry.setAttribute(
+        "position",
+        new THREE.BufferAttribute(positions, 3)
+      );
+      geometry.setAttribute("scale", new THREE.BufferAttribute(scales, 1));
+      // 初始化粒子材质
+      const material = new THREE.ShaderMaterial({
+        uniforms: {
+          color: { value: new THREE.Color(this.color) },
+        },
+        vertexShader: `
+          attribute float scale;
+          void main() {
+            vec4 mvPosition = modelViewMatrix * vec4( position, 2.0 );
+            gl_PointSize = scale * ( 300.0 / - mvPosition.z );
+            gl_Position = projectionMatrix * mvPosition;
+          }
+        `,
+        fragmentShader: `
+          uniform vec3 color;
+          void main() {
+            if ( length( gl_PointCoord - vec2( 0.5, 0.5 ) ) > 0.475 ) discard;
+            gl_FragColor = vec4( color, 1.0 );
+          }
+        `,
+      });
+
+      this.particles = new THREE.Points(geometry, material);
+      this.scene.add(this.particles);
+
+      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+      this.renderer.setSize(container.clientWidth, container.clientHeight);
+      this.renderer.setPixelRatio(window.devicePixelRatio);
+      this.renderer.setClearAlpha(0);
+      container.appendChild(this.renderer.domElement);
+
+      window.addEventListener("resize", this.onWindowResize, {
+        passive: false,
+      });
+      document.addEventListener("mousemove", this.onDocumentMouseMove, {
+        passive: false,
+      });
+      document.addEventListener("touchstart", this.onDocumentTouchStart, {
+        passive: false,
+      });
+      document.addEventListener("touchmove", this.onDocumentTouchMove, {
+        passive: false,
+      });
+    },
+    render() {
+      this.camera.position.x += (this.mouseX - this.camera.position.x) * 0.05;
+      this.camera.position.y = 400;
+      this.camera.lookAt(this.scene.position);
+      const positions = this.particles.geometry.attributes.position.array;
+      const scales = this.particles.geometry.attributes.scale.array;
+      // 计算粒子位置及大小
+      let i = 0;
+      let j = 0;
+      for (let ix = 0; ix < this.amountX; ix++) {
+        for (let iy = 0; iy < this.amountY; iy++) {
+          positions[i + 1] =
+            Math.sin((ix + this.count) * 0.3) * 100 +
+            Math.sin((iy + this.count) * 0.5) * 100;
+          scales[j] =
+            (Math.sin((ix + this.count) * 0.3) + 1) * 8 +
+            (Math.sin((iy + this.count) * 0.5) + 1) * 8;
+          i += 3;
+          j++;
+        }
+      }
+      // 重新渲染粒子
+      this.particles.geometry.attributes.position.needsUpdate = true;
+      this.particles.geometry.attributes.scale.needsUpdate = true;
+      this.renderer.render(this.scene, this.camera);
+      this.count += 0.1;
+    },
+    animate() {
+      requestAnimationFrame(this.animate);
+      this.render();
+      // setInterval(() => {
+      // }, 50);
+    },
+    onDocumentMouseMove(event) {
+      this.mouseX = event.clientX - this.windowHalfX;
+    },
+    onDocumentTouchStart(event) {
+      if (event.touches.length === 1) {
+        this.mouseX = event.touches[0].pageX - this.windowHalfX;
+      }
+    },
+    onDocumentTouchMove(event) {
+      if (event.touches.length === 1) {
+        event.preventDefault();
+        this.mouseX = event.touches[0].pageX - this.windowHalfX;
+      }
+    },
+    onWindowResize() {
+      this.windowHalfX = window.innerWidth / 2;
+      this.camera.aspect = window.innerWidth / window.innerHeight;
+      this.camera.updateProjectionMatrix();
+      this.renderer.setSize(window.innerWidth, window.innerHeight);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.demo {
+  width: 100%;
+  height: 100%;
+  // background: url("@/assets/img/demo/bg.png") no-repeat center;
+}
+</style>
\ No newline at end of file