Browse Source

feat vh/vw优化首页图片 & 移除HomeFilter rules规则

wangqin
qingzhengli 9 months ago
parent
commit
8c652d6641
  1. 72
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue
  2. 131
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrame/index.vue

72
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue

@ -28,7 +28,7 @@
<script>
import Button from '@screen/components/Buttons/Button.vue';
import Form from '@screen/components/FormConfig';
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
import * as PresetFormItems from "@screen/common/PresetFormItems.js";
import { merge, cloneDeep } from "lodash"
import request from "@/utils/request";
@ -42,74 +42,8 @@ export default {
return {
activeIcon: null,
formList: [
merge(cloneDeep(PresetFormItems.station), {
required: false,
label: "起始桩号:",
options: {
options: [
{
rules: [
{
message: "请补全桩号",
callback(value, data) {
if (!value?.trim() && data.startStakeMark[1]?.trim())
return false;
else return true;
},
},
],
key: "startStakeMark[0]",
},
{
rules: [
{
message: "请补全桩号",
callback(value, data) {
if (!value?.trim() && data.startStakeMark[0]?.trim())
return false;
else return true;
},
},
],
key: "startStakeMark[1]",
},
],
},
}),
merge(cloneDeep(PresetFormItems.station), {
required: false,
label: "结束桩号:",
options: {
options: [
{
rules: [
{
message: "请补全桩号",
callback(value, data) {
if (!value?.trim() && data.endStakeMark[1]?.trim())
return false;
else return true;
},
},
],
key: "endStakeMark[0]",
},
{
rules: [
{
message: "请补全桩号",
callback(value, data) {
if (!value?.trim() && data.endStakeMark[0]?.trim())
return false;
else return true;
},
},
],
key: "endStakeMark[1]",
},
],
},
}),
PresetFormItems.startStation,
PresetFormItems.endStation,
{
label: "设备类型:",
key: "deviceType",

131
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrame/index.vue

@ -1,22 +1,22 @@
<template>
<div class='HomeFrame'>
<ElPopover trigger="manual" :value="activeIcon === 'Frame'" :visibleArrow="false" placement="left"
popper-class="global-input-search-popover">
<Button :class="['btn', { 'btn-active': activeIcon }]" slot="reference" @click.native="handleClick('Frame')">
<img src="@screen/images/home-Frame/Frame.svg">
</Button>
<div class='HomeFrame'>
<ElPopover trigger="manual" :value="activeIcon === 'Frame'" :visibleArrow="false" placement="left"
popper-class="global-input-search-popover">
<Button :class="['btn', { 'btn-active': activeIcon }]" slot="reference" @click.native="handleClick('Frame')">
<img src="@screen/images/home-Frame/Frame.svg">
</Button>
<div class="body">
<div class="title">
图标含义
</div>
<!-- <Form labelWidth="90px" column="1" class="form" ref="FormConfigRef" :formList="formList" /> -->
<img class="image" src="@screen/images/home-Frame/logoMean.jpg">
<div class="footer">
</div>
</div>
</ElPopover>
</div>
<div class="body">
<div class="title">
图标含义
</div>
<!-- <Form labelWidth="90px" column="1" class="form" ref="FormConfigRef" :formList="formList" /> -->
<img class="image" src="@screen/images/home-Frame/logoMean.jpg">
<!-- <div class="footer">
</div> -->
</div>
</ElPopover>
</div>
</template>
<script>
@ -26,69 +26,70 @@ import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/Pr
import { merge, cloneDeep } from "lodash"
export default {
name: 'HomeFrame',
components: {
Button,
Form
},
data() {
return {
activeIcon: null
}
},
methods: {
handleClick(type) {
this.activeIcon = this.activeIcon === type ? null : type;
},
filterEnd(data) {
this.activeIcon = null;
// this.filterData = data;
this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data);
},
}
name: 'HomeFrame',
components: {
Button,
Form
},
data() {
return {
activeIcon: null
}
},
methods: {
handleClick(type) {
this.activeIcon = this.activeIcon === type ? null : type;
},
filterEnd(data) {
this.activeIcon = null;
// this.filterData = data;
this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data);
},
}
}
</script>
<style lang='scss'>
div.el-popper.global-input-search-popover {
background: rgba(6, 66, 88, 0.8);
border: 1px solid rgba(42, 217, 253, 0.6);
position: relative;
padding-top: 36px;
transform: translateY(24px);
background: rgba(6, 66, 88, 0.8);
border: 1px solid rgba(42, 217, 253, 0.6);
position: relative;
padding-top: 36px;
transform: translateY(24px);
margin-top: 3vh;
.body {
.title {
background: linear-gradient(90deg, #237E9B 0%, rgba(23, 145, 184, 0) 100%);
padding: 3px 9px;
position: absolute;
top: 0;
left: 0;
width: 100%;
.body {
.title {
background: linear-gradient(90deg, #237E9B 0%, rgba(23, 145, 184, 0) 100%);
padding: 3px 9px;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
}
}
}
}
</style>
<style lang='scss' scoped>
.image {
width: 1440px;
height: 900px;
width: 45vw;
height: 65vh;
}
.HomeFrame {
.btn {
padding: 9px;
background: linear-gradient(180deg, #152E3C 0%, #163A45 100%);
border-radius: 4px;
overflow: hidden;
height: unset;
border: 1px solid rgba(40, 144, 167, 1);
}
.btn {
padding: 9px;
background: linear-gradient(180deg, #152E3C 0%, #163A45 100%);
border-radius: 4px;
overflow: hidden;
height: unset;
border: 1px solid rgba(40, 144, 167, 1);
}
.btn-active {
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
}
.btn-active {
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
}
}
</style>

Loading…
Cancel
Save