apt

src/pages/modules/device.vue

@@ -0,0 +1,147 @@
+<template>
+  <el-row type="flex" class="page_container" align="top">
+    <el-col :span="20" class="l_box_w">
+      <el-row type="flex" class="l_box" justify="start" align="top">
+        <el-col class="point_item" v-for="e in dataList" :key="e.point_code">
+          <p>{{ e.point_code }}</p>
+        </el-col>
+      </el-row>
+      <el-row type="flex" class="result_w" justify="space-between" align="middle">
+        <el-col :span="19" class="result_items_w">
+          <el-row type="flex" class="result_items" justify="start" align="top">
+            <el-col class="point_item point_checked point_item_s"><p>A</p></el-col>
+            <i class="el-icon-caret-right icon-caret-right"></i>
+            <el-col class="point_item point_checked point_item_s"><p>B</p></el-col>
+            <i class="el-icon-caret-right icon-caret-right"></i>
+            <el-col class="point_item point_checked point_item_s"><p>C</p></el-col>
+            <i class="el-icon-caret-right icon-caret-right"></i>
+            <el-col class="point_item point_checked point_item_s"><p>D</p></el-col>
+            <i class="el-icon-caret-right icon-caret-right"></i>
+            <el-col class="point_item point_checked point_item_s"><p>E</p></el-col>
+            <i class="el-icon-caret-right icon-caret-right"></i>
+            <el-col class="point_item point_checked point_item_s"><p>F</p></el-col>
+            <i class="el-icon-caret-right icon-caret-right"></i>
+            <el-col class="point_item point_checked point_item_s"><p>G</p></el-col>
+            <i class="el-icon-caret-right icon-caret-right"></i>
+            <el-col class="point_item point_checked point_item_s"><p>H</p></el-col>
+            <i class="el-icon-caret-right icon-caret-right"></i>
+            <el-col class="point_item point_checked point_item_s"><p>B</p></el-col>
+            <i class="el-icon-caret-right icon-caret-right"></i>
+            <el-col class="point_item point_checked point_item_s"><p>C</p></el-col>
+            <i class="el-icon-caret-right icon-caret-right"></i>
+            <el-col class="point_item point_checked point_item_s"><p>D</p></el-col>
+            <i class="el-icon-caret-right icon-caret-right"></i>
+            <el-col class="point_item point_checked point_item_s"><p>E</p></el-col>
+            <i class="el-icon-caret-right icon-caret-right"></i>
+            <el-col class="point_item point_checked point_item_s"><p>F</p></el-col>
+            <i class="el-icon-caret-right icon-caret-right"></i>
+            <el-col class="point_item point_checked point_item_s"><p>G</p></el-col>
+            <i class="el-icon-caret-right icon-caret-right"></i>
+            <el-col class="point_item point_checked point_item_s"><p>H</p></el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="4">
+          <button class="button_control button_control_disabled" style="margin-bottom: .08rem"><p>清空</p></button>
+          <button class="button_control"><p>发送任务</p></button>
+        </el-col>
+      </el-row>
+    </el-col>
+    <el-col :span="4" class="r_box_w">
+      <div class="tip">历史任务</div>
+      <div class="ls_w">
+        <div class="ls_item">A->B->C->D</div>
+        <div class="ls_item">A->B</div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      dataList: [{point_code: 'A'}, {point_code: 'B'}, {point_code: 'C'}, {point_code: 'D'}, {point_code: 'E'}, {point_code: 'F'}, {point_code: 'G'}, {point_code: 'H'}]
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.l_box_w
+  height 100%
+  overflow hidden
+.l_box
+  height calc(100% - 1.1rem)
+  overflow-y auto
+  flex-wrap wrap
+  align-content flex-start
+  margin-bottom .1rem
+.point_item
+  width 19.6%
+  height 0.6rem
+  display flex
+  align-items center
+  justify-content center
+  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
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3; /* 定义显示的行数 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+.point_checked
+  background-image url(../../images/new/bg1.png)
+  p
+    color #3CC1FF
+.r_box_w
+  margin-left: .1rem
+  background-color #001330
+  box-shadow inset 1px 1px 7px 2px #4d9bcd
+  padding .1rem
+  overflow hidden
+.tip
+  font-size .16rem
+  color #fff
+  font-family 'YouSheBiaoTiHei'
+  line-height .16rem
+  margin-bottom .2rem
+.ls_w
+  height calc(100% - .36rem)
+  overflow-y auto
+.ls_item
+  font-size .15rem
+  line-height .16rem
+  color #3CC1FF
+  padding-bottom .1rem
+  margin-top .1rem
+  border-bottom 1px dashed #457C9B
+.result_w
+  height 1rem
+  border 1px solid #1E9FE7
+  padding .1rem
+  background-color rgba(10, 73, 164, 80%)
+.point_item_s
+  width 12%
+  height .4rem
+  p
+    font-size .17rem
+.icon-caret-right
+  width .3rem
+  font-size .2rem
+  color #fff
+  line-height .4rem
+.result_items_w
+  height .8rem
+  overflow hidden
+.result_items
+  flex-wrap wrap
+  align-content flex-start
+  overflow-y auto
+  max-height: 100%;
+</style>