重点位

src/pages/modules/relocation.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="page_container">
+    <div class="t_box">
+      <el-row type="flex" class="r_box">
+        <el-col class="point_item" v-for="(e, i) in dataList" :key="'cdw' + i">
+          <div class="zbox point_item_i" @click="toConfirm(e)"><p>{{ e.station_name }}</p></div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryStation } from '../../config/mork.js'
+export default {
+  name: 'ModuleRelocation',
+  data () {
+    return {
+      dataList: []
+    }
+  },
+  mounted () {
+    this._queryStation()
+  },
+  methods: {
+    // 站点查询
+    async _queryStation () {
+      this.dataList = []
+      try {
+        let res = await queryStation()
+        if (res && res.data) {
+          this.dataList = [...res.data]
+        }
+      } catch (e) {
+        this.$message.error(e)
+      }
+    },
+    toConfirm (e) {
+      this.$confirm('是否确定点位重定位?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log(e)
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消操作'
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.t_box
+  height 100%
+  background-color rgba(0, 19, 48, 70%)
+  box-shadow inset 1px 1px 7px 2px #4d9bcd
+  padding .1rem
+  overflow hidden
+.r_box
+  height 100%
+  overflow-y auto
+  flex-wrap wrap
+  align-content flex-start
+.point_item
+  width 20%
+  height 0.6rem
+  padding 0.1rem
+  margin-bottom 0.02rem
+  background center / 100% 100% url(../../images/new/bg2.png) no-repeat
+  p
+    font-size .2rem
+    font-family 'SourceHanSansCN-Bold'
+    line-height .2rem
+    color #B4C1D8
+    text-align center
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3; /* 定义显示的行数 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+.point_item_i
+  display flex
+  align-items center
+  justify-content center
+</style>