暂存一下

gassafetyprogress-web/src/assets/styles/index.scss

-@import './variables.scss';
-@import './mixin.scss';
-@import './transition.scss';
-@import './element-ui.scss';
-@import './sidebar.scss';
-@import './btn.scss';
+@import "./variables.scss";
+@import "./mixin.scss";
+@import "./transition.scss";
+@import "./element-ui.scss";
+@import "./sidebar.scss";
+@import "./btn.scss";
 
 body {
   height: 100%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, Arial, sans-serif;
 }
 
 label {
@@ -104,7 +105,8 @@ aside {
   display: block;
   line-height: 32px;
   font-size: 16px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   color: #2c3e50;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -134,7 +136,7 @@ aside {
 }
 
 .text-center {
-  text-align: center
+  text-align: center;
 }
 
 .sub-navbar {
@@ -145,7 +147,13 @@ aside {
   text-align: right;
   padding-right: 20px;
   transition: 600ms ease position;
-  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+  background: linear-gradient(
+    90deg,
+    rgba(32, 182, 249, 1) 0%,
+    rgba(32, 182, 249, 1) 0%,
+    rgba(33, 120, 241, 1) 100%,
+    rgba(33, 120, 241, 1) 100%
+  );
 
   .subtitle {
     font-size: 20px;
@@ -190,6 +198,20 @@ aside {
   z-index: 1000 !important;
 }
 
-.amap-sug-result{
-  z-index:999999;
+.amap-sug-result {
+  z-index: 999999;
+}
+//终极flex布局
+.all-flex,
+all-flex-ar {
+  display: flex;
+  justify-content: space-around;
+}
+.all-flex-h {
+  display: flex;
+  flex-direction: column;
+}
+.flex {
+  display: flex;
+  justify-content: space-between;
 }

gassafetyprogress-web/src/components/allCharsCom/Chars.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-04-11 17:13:13
+ * @LastEditTime: 2022-04-12 11:00:12
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/components/allCharsCom/Chars.vue
+-->
+<template>
+  <div class="my-chars">
+    <div ref="chars" class="chars"></div>
+    <!-- <slot> -->
+      <!-- 如果是默认值，就显示这个 -->
+      <div v-if="!options" class="text" :style="{ color: color }">
+        <span class="num">87</span><span class="fh">%</span>
+      </div>
+    <!-- </slot> -->
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Object,
+      default: null,
+    },
+    // 默认饼图的颜色
+    color: {
+      tupe: String,
+      default: "#399AF4",
+    },
+  },
+  data() {
+    return {
+      myChats: null,
+      // 默认options
+      defaultOptions: {
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b}: {c} ({d}%)",
+        },
+        color: ["#ffffff", "#399AF4"],
+        // title: {
+        //   text: "资产总数",
+        //   left: "center",
+        //   top: "50%",
+        //   textStyle: {
+        //     textAlign: "center",
+        //     fill: "#333",
+        //     fontSize: 14,
+        //     fontWeight: 400,
+        //   },
+        // },
+        graphic: {
+          type: "text",
+          left: "center",
+          top: "45%",
+          style: {
+            text: "",
+            textAlign: "center",
+            fill: "#399AF4",
+            fontSize: 18,
+          },
+        },
+        series: [
+          {
+            name: "完成情况",
+            type: "pie",
+            radius: ["62%", "80%"],
+            avoidLabelOverlap: false,
+            // hoverAnimation: false,
+            label: {
+              normal: {
+                show: false,
+                position: "center",
+              },
+            },
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: "#fff",
+            },
+            data: [
+              {
+                value: 13,
+                name: "未完成",
+              },
+              {
+                value: 87,
+                name: "完成",
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    // if (!this.options) {
+      this.charsInit();
+    // }
+  },
+  methods: {
+    charsInit() {
+      this.myChats = this.$echarts.init(this.$refs.chars);
+      let options;
+      // 如果传进来的options就用传进来的，否则就用默认的
+      if (this.options) {
+        options = this.options;
+      } else {
+        options = JSON.parse(JSON.stringify(this.defaultOptions));
+        options.color[1] = this.color;
+      }
+      this.myChats.setOption(options);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.my-chars {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  // background-color: blue;
+}
+
+.chars {
+  width: 100%;
+  height: 100%;
+  // background: yellow;
+}
+.text {
+  position: absolute;
+  width: 80px;
+  height: 40px;
+  top: 50%;
+  left: 50%;
+  margin-left: -40px;
+  margin-top: -10px;
+  text-align: center;
+  color: #399af4;
+
+  .num {
+    font-size: 21px;
+    letter-spacing: 0px;
+  }
+  .fh {
+    font-size: 1px;
+  }
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/index.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-04-11 14:11:04
+ * @LastEditTime: 2022-04-12 14:53:40
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/index.vue
+-->
+<template>
+  <div class="app-container xjxc">
+    <div class="wrapper flex-h">
+      <div class="top flex">
+        <div class="left">
+          <Left />
+        </div>
+        <div class="middle">
+          <Middle/>
+        </div>
+        <div class="right">
+          <Right/>
+        </div>
+      </div>
+      <div class="bottom">
+      
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Left from "./topChars/Left";
+import Middle from "./topChars/Middle";
+import Right from "./topChars/Right";
+export default {
+  components: {
+    Left,
+    Middle,
+    Right
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-main {
+}
+.xjxc {
+  height: calc(100vh - 50px) !important;
+}
+.flex {
+  display: flex;
+  justify-content: space-between;
+}
+.flex-h {
+  display: flex;
+  // justify-content: space-around;
+  flex-direction: column;
+  height: 100%;
+  .top {
+    height: 38.7%;
+
+    .left {
+      width: 36.5%;
+      padding: 15px 24px 19px;
+    }
+    .middle {
+      width: 35.3%;
+      padding: 15px 80px 19px 71px;
+
+    }
+    .right {
+      width: 25.2%;
+      padding: 15px 29px;
+
+    }
+    > div {
+      // box-shadow: 2px 0px 13px 1px rgba(0, 0, 0, 0.1);
+      box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
+      border-radius: 3px;
+    }
+  }
+  .bottom {
+    flex: 1;
+
+  }
+  > div {
+    // height: 50%;
+  }
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/Left.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-04-11 15:07:47
+ * @LastEditTime: 2022-04-12 09:55:18
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
+-->
+<template>
+  <div class="charsCom all-flex-h">
+    <div class="title">巡检巡查计划</div>
+    <div class="two all-flex">
+      <div class="left">
+        <div class="first">
+          <span class="text">巡检年度计划</span>
+          <span>99次</span>
+        </div>
+        <div class="second all-flex">
+          <div class="left">泄露监测</div>
+          <div class="right">防腐层监测</div>
+        </div>
+        <div class="third all-flex">
+          <div class="left">55次</div>
+          <div class="right">44次</div>
+        </div>
+        <div class="first fourth">
+          <div class="">泄漏检测完成比例</div>
+        </div>
+
+        <div class="fifth">
+          <div class="contant">
+            <Chars></Chars>
+          </div>
+        </div>
+      </div>
+
+      <div class="right">
+        <div class="first">
+          <span class="text">巡检年度计划</span>
+          <span>18次</span>
+        </div>
+        <div class="second all-flex">
+          <div class="left">泄露监测</div>
+          <div class="right">防腐层监测</div>
+        </div>
+        <div class="third all-flex">
+          <div class="left">10次</div>
+          <div class="right">8次</div>
+        </div>
+        <div class="first fourth">
+          <div class="">泄漏检测完成比例</div>
+        </div>
+        <div class="fifth">
+          <div class="contant">
+            <Chars color="#00C3F1"></Chars>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Chars from "@/components/allCharsCom/Chars";
+export default {
+  components: {
+    Chars,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.charsCom {
+  width: 100%;
+  height: 100%;
+  color: #333333;
+}
+.title {
+  text-align: center;
+  font-size: 21px;
+  margin-bottom: 7px;
+}
+.two {
+  flex: 1;
+  > .left {
+    margin-right: 70px;
+  }
+  > .right {
+  }
+  > div {
+    font-size: 14px;
+    flex: 1;
+    // display: flex;
+    // flex-direction: column;
+  }
+  .left,
+  .right {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .first {
+      margin-bottom: 6px;
+      text-align: left;
+      .text {
+        display: inline-block;
+        margin-right: 8px;
+      }
+    }
+    .second {
+      width: 213px;
+      height: 30px;
+      line-height: 30px;
+      box-sizing: border-box;
+      box-shadow: 0px 0px 3px 1px #dddddd;
+      margin-bottom: 19px;
+
+      > div {
+        // flex: 1;
+        text-align: center;
+
+        &.left {
+          color: #1d8cf3;
+        }
+        &.right {
+          color: #00c3f1;
+        }
+      }
+    }
+    .third {
+      text-align: center;
+      width: 213px;
+      margin-bottom: 30px;
+    }
+    .fifth {
+      flex: 1;
+      // background: red;
+      padding-top: 5px;
+      .contant {
+        width: 120px;
+        height: 120px;
+        margin: 0 auto;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/Middle.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-04-11 15:07:47
+ * @LastEditTime: 2022-04-12 15:17:32
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
+-->
+<template>
+  <div class="charsCom all-flex-h">
+    <div class="title">隐患整改</div>
+    <div class="two all-flex">
+      <div class="left">
+        <div class="first">
+          <span class="text">巡检年度计划</span>
+          <span>99次</span>
+        </div>
+        <div class="second all-flex">
+          <div class="left">泄露监测</div>
+          <div class="right">防腐层监测</div>
+        </div>
+        <div class="third all-flex">
+          <div class="left">55</div>
+          <div class="right">44</div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="first">
+          <span class="text">隐患整改率</span>
+        </div>
+        <div class="chars-box">
+          <Chars color="#604AFF"></Chars>
+        </div>
+      </div>
+    </div>
+
+    <div class="three all-flex-h">
+      <div class="first">隐患原因</div>
+      <div ref="myChartWidth" class="chars-box">
+        <Chars :options="bottomOptions()" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Chars from "@/components/allCharsCom/Chars";
+export default {
+  components: {
+    Chars,
+  },
+  data() {
+    return {
+      bottomData: [
+        [
+          { name: "裂缝", value: 20, color: "#604AFF" },
+          { name: "管道称重", value: 30, color: "#FFC337" },
+          { name: "其他", value: 40, color: "#86FF5B" },
+          { name: "腐蚀", value: 99, color: "#03C4F1" },
+          { name: "漏气", value: 18, color: "#1F8DF3" },
+        ],
+      ],
+    };
+  },
+  methods: {
+    bottomOptions() {
+      return {
+        series: this.bottomData.map((data, idx) => {
+          const rich = {};
+          data
+            .map((item) => ({
+              fontsize: 12,
+              color: item.color,
+            }))
+            .forEach((item, index) => {
+              rich[`dataIndex${index}`] = item;
+            });
+  
+          return {
+            type: "pie",
+            radius: ["68%", "80%"],
+            color: data.map((item) => item.color),
+            itemStyle: {
+              borderWidth: 2,
+              borderRadius: 10,
+              borderColor: "#fff",
+            },
+            label: {
+              alignTo: "edge",
+              // formatter: "{name|{b}}\n{num|{c} 个}",
+              formatter: (parm) => {
+                return `{dataIndex${parm.dataIndex}|${parm.data.name}}\n{dataIndex${parm.dataIndex}|${parm.data.value}个}`;
+              },
+              minMargin: 5,
+              edgeDistance: 10,
+              lineHeight: 15,
+              rich,
+            },
+            labelLine: {
+              length: 15,
+              length2: 0,
+              maxSurfaceAngle: 80,
+            },
+            labelLayout: (params) => {
+              const { width } = this.$refs.myChartWidth.getBoundingClientRect();
+              const isLeft = params.labelRect.x < width / 2;
+              const points = params.labelLinePoints;
+              // Update the end point.
+              points[2][0] = isLeft
+                ? params.labelRect.x
+                : params.labelRect.x + params.labelRect.width;
+              return {
+                labelLinePoints: points,
+              };
+            },
+            data: data,
+          };
+        }),
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.charsCom {
+  width: 100%;
+  height: 100%;
+  color: #333333;
+}
+.title {
+  text-align: center;
+  font-size: 21px;
+  margin-bottom: 7px;
+}
+.two {
+  // flex: 1;
+  > .left {
+    margin-right: 70px;
+    .first {
+      margin-bottom: 6px;
+    }
+    .second {
+      width: 213px;
+      height: 30px;
+      line-height: 30px;
+      box-sizing: border-box;
+      box-shadow: 0px 0px 3px 1px #dddddd;
+      margin-bottom: 19px;
+      > div {
+        // flex: 1;
+        text-align: center;
+
+        &.left {
+          color: #1d8cf3;
+        }
+        &.right {
+          color: #00c3f1;
+        }
+      }
+    }
+    .third {
+      text-align: center;
+      width: 213px;
+      margin-bottom: 38px;
+    }
+  }
+  > .right {
+    .first {
+      text-align: center !important;
+    }
+    .chars-box {
+      width: 90px;
+      height: 90px;
+      margin: 0 auto;
+    }
+  }
+  > div {
+    font-size: 14px;
+    flex: 1;
+    // display: flex;
+    // flex-direction: column;
+  }
+  .left,
+  .right {
+    // display: flex;
+    // flex-direction: column;
+    // justify-content: space-between;
+    .first {
+      text-align: left;
+      .text {
+        display: inline-block;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+.three {
+  font-size: 14px;
+  flex: 1;
+  // background: red;
+  .chars-box {
+    flex: 1;
+  }
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/Right.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-04-11 15:07:47
+ * @LastEditTime: 2022-04-12 18:14:09
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
+-->
+<template>
+  <div class="charsCom all-flex-h">
+    <div class="title">第三方施工情况</div>
+    <div class="two flex">
+      <div class="left">已备案</div>
+      <div class="middle">已完成</div>
+      <div class="right">进行中</div>
+    </div>
+    <div class="three flex">
+      <div class="left zzz">123</div>
+      <div class="middle zzz">13</div>
+      <div class="right zzz">123</div>
+    </div>
+
+    <div class="four all-flex-h">
+      <div class="top flex">
+        <div>施工单位</div>
+        <div>备案时间</div>
+        <div>施工描述</div>
+      </div>
+      <div class="scroll-wrapper">
+        <Scroll :dataList="arr">
+          <template v-slot="{ dataList }">
+           <!-- <ScroItem v-for="(item,index) in dataList" :key="item.companyName+index" :data="item"/> -->
+          </template>
+        </Scroll>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Scroll from "./Scroll";
+import ScroItem from "./ScroItem";
+export default {
+  components: {
+    Scroll,
+    ScroItem
+  },
+  data() {
+    return {
+      arr: [
+        {
+          companyName: 123,
+          time: "2022-04-09 07:29",
+          text: "大师傅阿斯蒂芬阿斯蒂芬Î",
+        },
+        {
+          companyName: 123,
+          time: "2022-04-09 07:29",
+          text: "大师傅阿斯蒂芬阿斯蒂芬Î",
+        },
+        {
+          companyName: 123,
+          time: "2022-04-09 07:29",
+          text: "大师傅阿斯蒂芬阿斯蒂芬Î",
+        },
+        {
+          companyName: 123,
+          time: "2022-04-09 07:29",
+          text: "大师傅阿斯蒂芬阿斯蒂芬Î",
+        },
+        {
+          companyName: 123,
+          time: "2022-04-09 07:29",
+          text: "大师傅阿斯蒂芬阿斯蒂芬Î",
+        },
+        {
+          companyName: 123,
+          time: "2022-04-09 07:29",
+          text: "大师傅阿斯蒂芬阿斯蒂芬Î",
+        },
+        {
+          companyName: 123,
+          time: "2022-04-09 07:29",
+          text: "大师傅阿斯蒂芬阿斯蒂芬Î",
+        },
+      ],
+    };
+  },
+  mounted() {},
+};
+</script>
+
+<style lang="scss" scoped>
+.charsCom {
+  width: 100%;
+  height: 100%;
+}
+.title {
+  text-align: center;
+  font-size: 21px;
+  margin-bottom: 22px;
+}
+.two {
+  box-shadow: 0px 0px 3px 1px #dddddd;
+  height: 28px;
+  font-size: 14px;
+  margin-bottom: 15px;
+  > div {
+    line-height: 28px;
+    flex: 1;
+    text-align: center;
+    &.left {
+      color: #1f8df3;
+    }
+    &.middle {
+      flex: 1;
+      color: #03c4f1;
+    }
+    &.right {
+      color: #ffc337;
+    }
+  }
+}
+.three {
+  font-size: 14px;
+  margin-bottom: 16px;
+  > div {
+    flex: 1;
+    line-height: 28px;
+    text-align: center;
+  }
+}
+.four {
+  flex: 1;
+  font-size: 14px;
+  // 这个解决子元素overhidden失效问题
+  min-height: 0;
+  .top {
+    background: rgba(24, 144, 255, 0.1);
+    height: 29px;
+    line-height: 29px;
+    > div {
+      flex: 1;
+      text-align: center;
+    }
+  }
+  .scroll-wrapper {
+    // font-size: 14px;
+    flex: 1;
+    // 这个解决子元素overhidden失效问题
+    min-height: 0;
+    // background: red;
+    // overflow: hidden;
+    // position:relative;
+  }
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/ScroItem.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-04-12 18:02:16
+ * @LastEditTime: 2022-04-12 18:12:50
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/ScrollItem.vue
+-->
+<template>
+  <div class="top flex">
+    <div class="zzz">{{ data.companyName }}</div>
+    <div class="zzz">{{ data.time }}</div>
+    <div class="zzz">{{ data.text }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+    },
+    index: {
+      type: Number,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.top {
+  background: rgba(24, 144, 255, 0.1);
+  height: 29px;
+  line-height: 29px;
+  > div {
+    flex: 1;
+    text-align: center;
+    // box-sizing: border-box;
+    // padding: 0 5px;
+  }
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/Scroll.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-04-12 16:09:32
+ * @LastEditTime: 2022-04-12 17:53:32
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/components/scrollCom/scroll.vue
+-->
+<template>
+  <div
+    class="scroll"
+    @mouseover="stopScroll"
+    @mouseout="startScroll"
+    ref="wrapper"
+  >
+    <div ref="scroll" :style="{ top: pxTop }" class="contain">
+      <slot :dataList="dataList" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    dataList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      timer: null,
+      top: 0,
+      wrapperHeight: 0,
+      scrollHeight: 0,
+    };
+  },
+  computed: {
+    pxTop() {
+      return this.top + "px";
+    },
+  },
+
+  mounted() {
+    this.init();
+  },
+  watch: {
+    dataList: {
+      handler: function (val, oldVal) {
+        this.top = 0;
+        this.init();
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    init() {
+      clearInterval(this.timer);
+      const { height: wrapperHeight } =
+        this.$refs.wrapper.getBoundingClientRect();
+      const { height: scrollHeight } =
+        this.$refs.scroll.getBoundingClientRect();
+      this.scrollHeight = scrollHeight;
+      const maxTop = wrapperHeight - scrollHeight;
+
+      // 如果没有超过，就不滚动了
+      if (maxTop > 0) return;
+      this.timer = setInterval(() => {
+        // this.top = this.top-1;
+        this.top = this.top - 0.5;
+        if (this.top <= maxTop) {
+          this.top = 0;
+        }
+      }, 30);
+    },
+    stopScroll() {
+      clearInterval(this.timer);
+    },
+    startScroll() {
+      this.init();
+    },
+  },
+
+  beforeDestroy() {
+    clearInterval(this.timer);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.scroll {
+  height: 100%;
+  background: red;
+  overflow: hidden;
+  position: relative;
+}
+.contain {
+  position: absolute;
+}
+</style>
\ No newline at end of file