bottom组件样式完成

zh-baseversion-web/src/assets/styles/all.scss

@@ -746,3 +746,7 @@
   // pointer-events:auto !important;
   // top:-30px !important;
 }
+
+
+
+

zh-baseversion-web/src/components/bigWindow/PipeColor.vue

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

 <!--
  * @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">
+  <div class="big-bottom">
+    <div class="left">
       <img
-      src="~@/assets/firstimage/bottombk.svg"
+        v-if="cont != list.length - 3"
+        @click.stop="cont++"
+        src="@/assets/firstimage/l.png"
         alt=""
-      style="backdrop-filter: blur(4px)"
       />
-    <div class="listingsSty">
+    </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="[
-          {
+        :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="other">
+        <div class="other2">
+          <div class="move" :style="{ left: -cont * 144 + 'px' }">
             <div
-          class="itemCompany"
-          @click.stop="selectChange(item.value)"
+              v-for="item in list"
+              @click.stop="itemClick(item)"
+              :key="item.value"
+              class="item"
               :class="[
-            { active: selectSome(index) },
-            { activeAll: selectEvery(index) },
+                { active: item.label == activeCom.label },
+                { minOne: selectSome(item) },
+                { maxAll: selectEvery(item) },
               ]"
             >
               {{ 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>
         </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%;
-  display: flex;
-  // z-index: 1000;
-  img {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: -1;
-    bottom: -10px;
-  }
-  .listingsSty {
-    padding-left: 15%;
-    padding-right: 15%;
+  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;
-    width: 180%;
+  padding: 0 80px;
   display: flex;
   justify-content: space-between;
-    .firsty {
-      // width: 15%;
-      min-width: 80px;
-      height: 35px;
+  align-items: center;
+
+  .container {
+    // background: red;
+    flex: 1;
+    margin-right: 22px;
+    height: 28px;
+    display: flex;
+    .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;
-
+      background: url("~@/assets/firstimage/btm-item.png") no-repeat bottom
+        center;
       &.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-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;
+        .move {
+          transition: all 0.5s linear;
+          width: 1000px;
+          height: 100%;
+          // background: blue;
           position: relative;
-        .itemCompany {
-          transition: all 0.5s ease;
+          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 rgba(0, 255, 255, 0.3),
-              0 0 35px rgb(0, 255, 255, 0.3);
+              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;
+            }
           }
-          &.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;
+    }
+    .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;
-          left: 0;
-          width: 100%;
-          background: rgb(18, 92, 155, 0.3);
-          overflow: hidden;
-          &.hide {
-            height: 0px !important;
+      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;
       }
-          .selectItem {
-            transition: all 0.5s ease;
+
+      &::-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 {
-              color: #00ffff;
-              text-shadow: 0 0 20px #00ffff, 0 0 35px #00ffff;
+          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

 <!--
  * @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">