Skip to content

S
smart_gov_platform
Commit 38f5bf62 authored by 王晓旭's avatar 王晓旭
Browse files
Options

修改门户数据精算样式

parent c20b10c3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 7817 additions and 6547 deletions
portal-manager-ui/admin/package-lock.json
View file @ 38f5bf62
This source diff could not be displayed because it is too large. You can view the blob instead.
portal-manager-ui/admin/package.json
View file @ 38f5bf62
......@@ -29,6 +29,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
View file @ 38f5bf62
<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"
: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>
</div>
<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)"
@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');
}
.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;
}
.flip {
width: 100%;
height: 100%;
border-radius: 8px;
background-color: #ffffff;
transition: all linear 200ms;
.actitem_tit::before{
content: none;
}
.mod_min {
width: 285px;
height: 100%;
margin: auto;
display: flex;
align-items: center;
img {
width: 85px;
height: 72px;
}
.mod_cont {
width: 100%;
.name {
font-size: 18px;
font-weight: bold;
padding-bottom: 10px;
text-align: center;
}
.remark {
font-size: 14px;
line-height: 18px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
}
.actitem_p{
width: 350px;
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
line-height: 28px;
}
}
.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 0 → 100644
View file @ 38f5bf62
<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
portal-manager-ui/admin/yarn.lock
View file @ 38f5bf62
This diff is collapsed.
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