feat:状态修改组件

src/components/statusControl/index.vue

+<template>
+  <div class="statusControl" :style="statusStyle">
+    <ul>
+      <li
+        v-for="(item, index) in list"
+        :key="index"
+        :class="{ acitive: value === item.key }"
+        @click="onStatusChange(item.key)"
+      >
+        {{ item.value }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+// #144683
+export default {
+  name: "statusControl",
+  props: {
+    list: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+    statusStyle: {
+      type: [Object, String],
+      default: "",
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    onStatusChange(key) {
+      this.$emit("input", key);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.statusControl {
+  ul li {
+    margin-bottom: 10px;
+    border-radius: 5px;
+    padding: 5px 10px;
+    width: 150px;
+    background-color: #fff;
+    box-shadow: 0 0 5px #fff9;
+    text-align: center;
+    cursor: pointer;
+    &.acitive {
+      color: #fff;
+      background-color: #144683;
+    }
+  }
+}
+</style>

src/pages/methaneUpgrade/index.vue

@@ -2,10 +2,16 @@
   <!-- 农村沼气转型升级 -->
   <div class="methaneUpgrade">
     <MethaneMap></MethaneMap>
+    <StatusControl
+      :statusStyle="{ position: 'absolute', right: 0, top: '100px' }"
+      :list="statusControlList"
+      v-model="statusValue"
+    ></StatusControl>
   </div>
 </template>
 
 <script>
+import StatusControl from "@/components/statusControl/index.vue";
 import MethaneMap from "./components/methaneMap";
 export default {
   name: "MethaneUpgrade",
@@ -14,10 +20,18 @@ export default {
       dateLevel: "year",
       curTime: "",
       play: false,
+      statusControlList: [
+        { key: "small", value: "小型沼气工程" },
+        { key: "middle", value: "中型沼气工程" },
+        { key: "big", value: "大型沼气工程" },
+        { key: "ExtraLarge", value: "特大型沼气工程" },
+      ],
+      statusValue: "small",
     };
   },
   components: {
     MethaneMap,
+    StatusControl,
   },
   methods: {
     showDatePicker() {
@@ -36,6 +50,7 @@ export default {
 
 <style lang="less" scoped>
 .methaneUpgrade {
+  position: relative;
   height: 100vh;
 }
 </style>