Skip to content

Z
zh-baseversion-project
Commit b2b24350 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

bottom组件样式完成

parent 76f365e7
Hide whitespace changes
Inline Side-by-side
Showing with 254 additions and 132 deletions
zh-baseversion-web/src/assets/styles/all.scss
View file @ b2b24350
......@@ -745,4 +745,8 @@
box-shadow:none !important;
// pointer-events:auto !important;
// top:-30px !important;
}
\ No newline at end of file
}
zh-baseversion-web/src/components/bigWindow/PipeColor.vue
View file @ b2b24350
......@@ -8,7 +8,7 @@
-->
<template>
<div>
<div class="pipePressure">
<!-- <div class="pipePressure"> -->
<!--
<div style="float: left;margin-right: 5px;">
<div class="hasColorBox">
......@@ -32,7 +32,7 @@
监控
</div>
</div> -->
<div>
<!-- <div>
<div class="hasColorBox" :style="{ color: pipeColor[`1`] }">
<div :style="{ backgroundColor: pipeColor[`1`] }"></div>
低压管线
......@@ -50,7 +50,7 @@
高压管线
</div>
</div>
</div>
</div> -->
<div class="mapChange">
<div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
......
zh-baseversion-web/src/views/bigWindow/components/Bottom.vue
View file @ b2b24350
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2023-07-12 13:58:25
* @Date: 2024-07-15 10:26:41
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2023-07-12 17:12:59
* @FilePath: /gassafetyprogress-web/src/views/bigWindow/components/Bottom.vue
* @LastEditTime: 2024-07-16 17:27:41
* @FilePath: /zh-baseversion-web/src/views/bigWindow/components/Bottom.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="bigwindow-bottom listingsSty">
<img
src="~@/assets/firstimage/bottombk.svg"
alt=""
style="backdrop-filter: blur(4px)"
/>
<div class="listingsSty">
<div class="big-bottom">
<div class="left">
<img
v-if="cont != list.length - 3"
@click.stop="cont++"
src="@/assets/firstimage/l.png"
alt=""
/>
</div>
<div class="container">
<transition name="fade" mode="out-in">
<div v-if="activeCom.label" class="children">
<div
v-for="item in activeCom.children"
:key="item.value"
:title="'河北冉盛升新能源有限公123123123司'"
class="child zzz"
:class="[{ active: selectActive.includes(item.value) }]"
@click.stop="selectActiveChange(item.value)"
>
{{ item.label }}
</div>
</div>
</transition>
<div
class="firsty selectAll"
class="all"
@click.stop="selectAll"
:class="[
{
active:
selectActive.length == listFlatArr.length &&
selectActive.length > 1,
},
]"
:class="{
active:
selectActive.length == listFlatArr.length &&
selectActive.length > 1,
}"
>
全部
</div>
<div class="firsty item" v-for="(item, index) in list" :key="item.value">
<div
class="itemCompany"
@click.stop="selectChange(item.value)"
:class="[
{ active: selectSome(index) },
{ activeAll: selectEvery(index) },
]"
>
{{ item.label }}
</div>
<div
class="up-select"
:class="[{ hide: !selectShowNum.includes(item.value) }]"
:style="{ height: item.children.length * 35 + 'px' }"
>
<div
class="selectItem"
v-for="selectItem in item.children"
:class="[{ active: selectActive.includes(selectItem.value) }]"
:key="selectItem.value"
@click.stop="selectActiveChange(selectItem.value)"
>
{{ selectItem.label }}
<div class="other">
<div class="other2">
<div class="move" :style="{ left: -cont * 144 + 'px' }">
<div
v-for="item in list"
@click.stop="itemClick(item)"
:key="item.value"
class="item"
:class="[
{ active: item.label == activeCom.label },
{ minOne: selectSome(item) },
{ maxAll: selectEvery(item) },
]"
>
{{ item.label }}
</div>
</div>
</div>
</div>
</div>
<div class="right">
<img
v-if="cont != 0"
@click.stop="cont--"
src="@/assets/firstimage/r.png"
alt=""
/>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
name: "",
data() {
return {
cont: 0,
list: [
{
value: 1,
......@@ -92,6 +108,8 @@ export default {
],
},
],
// 被选中的公司
activeCom: {},
selectShowNum: [],
// 被选中的值
selectActive: [],
......@@ -101,12 +119,10 @@ export default {
computed: {
...mapGetters(["company", "systemSetting"]),
},
beforeCreate() {},
mounted() {
this.GetCompany().then((res) => {
this.company.forEach((item) => {
this.list[item.companyType-1].children.push({
this.list[item.companyType - 1].children.push({
value: item.conpanyId,
label: item.companyName,
});
......@@ -118,9 +134,8 @@ export default {
...mapActions({
GetCompany: "bigWindowCompany/GetCompany",
}),
// 把下拉框放下
selectUpClear(){
this.selectShowNum=[];
selectUpClear() {
this.activeCom = {};
},
selectAll() {
// 生成所有都选中的数组
......@@ -141,12 +156,12 @@ export default {
}
this.$emit("listChange", this.selectActive);
},
selectChange(value) {
const num = this.selectShowNum.indexOf(value);
if (num >= 0) {
this.selectShowNum.splice(num, 1);
itemClick(item) {
if (item.children.length == 0) return;
if (this.activeCom == item) {
this.activeCom = {};
} else {
this.selectShowNum.push(value);
this.activeCom = item;
}
},
selectActiveChange(value) {
......@@ -158,20 +173,19 @@ export default {
}
this.$emit("listChange", this.selectActive);
},
// 至少有一个被选中
selectSome(index) {
selectSome(item) {
return (
this.list[index].children.length > 0 &&
this.list[index].children.some((item) => {
item.children.length > 0 &&
item.children.some((item) => {
return this.selectActive.includes(item.value);
})
);
},
// 都被选中
selectEvery(index) {
selectEvery(item) {
return (
this.list[index].children.length > 0 &&
this.list[index].children.every((item) => {
item.children.length > 0 &&
item.children.every((item) => {
return this.selectActive.includes(item.value);
})
);
......@@ -180,84 +194,188 @@ export default {
};
</script>
<style lang="scss" scoped>
.bigwindow-bottom {
width: 40%;
height: 70px;
.big-bottom {
width: 810px;
height: 50px;
position: fixed;
bottom: 0;
margin-left: 30%;
bottom: 38px;
left: 50%;
margin-left: -405px;
background: url("~@/assets/firstimage/btmA.png") no-repeat bottom center,
url("~@/assets/firstimage/btmB.png") no-repeat bottom center;
box-sizing: border-box;
padding: 0 80px;
display: flex;
// z-index: 1000;
img {
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
bottom: -10px;
}
.listingsSty {
padding-left: 15%;
padding-right: 15%;
box-sizing: border-box;
width: 180%;
justify-content: space-between;
align-items: center;
.container {
// background: red;
flex: 1;
margin-right: 22px;
height: 28px;
display: flex;
justify-content: space-between;
.firsty {
// width: 15%;
min-width: 80px;
height: 35px;
.all {
transition: all 0.2s linear;
width: 128px;
margin-right: 16px;
text-align: center;
line-height: 35px;
line-height: 28px;
color: #fff;
font-size: 16px;
cursor: pointer;
&.selectAll {
transition: all 0.5s ease;
&.active {
color: #00ffff;
text-shadow: 0 0 20px rgba(0, 255, 255, 1),
0 0 35px rgb(0, 255, 255, 1);
}
background: url("~@/assets/firstimage/btm-item.png") no-repeat bottom
center;
&.active {
background: url("~@/assets/firstimage/btm-item-active.png") no-repeat
bottom center;
}
&:hover {
opacity: 0.7;
}
}
.other {
flex: 1;
width: 0;
position: relative;
.other2 {
width: 100%;
height: 100%;
overflow: hidden;
&.item {
min-width: 180px;
position: relative;
.itemCompany {
transition: all 0.5s ease;
&.active {
color: #00ffff;
text-shadow: 0 0 20px rgba(0, 255, 255, 0.3),
0 0 35px rgb(0, 255, 255, 0.3);
}
&.activeAll {
color: #00ffff;
text-shadow: 0 0 20px rgba(0, 255, 255, 1),
0 0 35px rgb(0, 255, 255, 1);
}
}
.up-select {
transition: all 0.5s ease;
position: absolute;
bottom: 50px;
left: 0;
width: 100%;
background: rgb(18, 92, 155, 0.3);
overflow: hidden;
&.hide {
height: 0px !important;
}
.selectItem {
transition: all 0.5s ease;
.move {
transition: all 0.5s linear;
width: 1000px;
height: 100%;
// background: blue;
position: relative;
display: flex;
align-items: center;
left: 0px;
.item {
transition: all 0.2s linear;
width: 128px;
margin-right: 16px;
text-align: center;
line-height: 28px;
color: #fff;
font-size: 16px;
cursor: pointer;
background: url("~@/assets/firstimage/btm-item.png") no-repeat
bottom center;
&.active {
color: #00ffff;
text-shadow: 0 0 20px #00ffff, 0 0 35px #00ffff;
color: #1ec9e3;
}
// 最少选中一个
&.minOne {
background: url("~@/assets/firstimage/btm-item-one.png") no-repeat
bottom center;
}
// 全选中
&.maxAll {
background: url("~@/assets/firstimage/btm-item-active.png")
no-repeat bottom center;
}
&:hover {
opacity: 0.7;
}
}
}
}
}
.children {
transition: all 1s linear;
width: 620px;
max-height: 214px;
position: absolute;
// background: red;
background: rgba(2, 26, 51, 0.9);
border: 1px solid #127bd1;
box-shadow: inset 0px 0px 10px 0px #164db2;
left: 50%;
margin-left: -310px;
// top: -215px;
bottom: 50px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
box-sizing: border-box;
padding: 20px 20px 0px 20px;
// 滚动条
overflow-y: auto;
&::-webkit-scrollbar {
width: 10px;
background: #012a53;
position: absolute;
top: 0;
}
&::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
// border-radius: 10px;
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #00000052;
border-radius: 8px;
}
&::-webkit-scrollbar-track {
/*滚动条里面轨道*/
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
// border-radius: 10px;
// background-color: red;
}
&::-webkit-scrollbar-button:start {
// overflow: hidden;
}
&::-webkit-scrollbar-button:end {
// overflow: hidden;
}
.child {
width: 275px;
height: 32px;
margin-bottom: 16px;
background: #0b2d47;
box-sizing: border-box;
padding-left: 21px;
line-height: 32px;
color: #fff;
border: 1px solid rgba(54, 136, 255, 0.2392);
cursor: pointer;
&.active {
background: rgba(255, 141, 70, 0.29);
box-sizing: border-box;
border: 1px solid rgba(255, 178, 130, 0.4);
}
&:hover {
opacity: 0.7;
}
}
}
}
.left {
margin-right: 32px;
color: white;
}
.right {
color: white;
}
.left,
.right {
width: 14px;
height: 20px;
img {
transition: all 0.5s linear;
width: 100%;
height: 100%;
cursor: pointer;
&:hover {
opacity: 0.7;
}
}
}
// background: red;
}
</style>
zh-baseversion-web/src/views/bigWindow/index.vue
View file @ b2b24350
<!--
* @Author: your name
* @Date: 2022-01-11 13:44:17
* @LastEditTime: 2024-07-13 16:22:48
* @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
* @LastEditTime: 2024-07-15 14:29:45
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/Home.vue
-->
......@@ -30,10 +30,10 @@
:pageSize="20"
/>
<PipeColor />
<PipeSelect
<!-- <PipeSelect
@transmit="getPipeSelectMessage"
@closeMediumPressureLine="clearBigWindowsSelectPipe"
/>
/> -->
<!-- 底部按钮 -->
<!-- <div class="home-div">
......
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