diff --git a/package-lock.json b/package-lock.json
index fa1c660..be5b6b2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2922,6 +2922,12 @@
             "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
             "dev": true
         },
+        "batch-processor": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
+            "integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=",
+            "dev": true
+        },
         "bcrypt-pbkdf": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
@@ -5003,6 +5009,15 @@
             "integrity": "sha512-7x2S3yUrspNHQOoPk+Eo+iHViSiJiEGPI6BpmLy1eT2KRNGCkBt/NUYqjfXLd1DpDCQp7n3+LfA1RkbG+LqTZQ==",
             "dev": true
         },
+        "element-resize-detector": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.1.tgz",
+            "integrity": "sha512-BdFsPepnQr9fznNPF9nF4vQ457U/ZJXQDSNF1zBe7yaga8v9AdZf3/NElYxFdUh7SitSGt040QygiTo6dtatIw==",
+            "dev": true,
+            "requires": {
+                "batch-processor": "1.0.0"
+            }
+        },
         "elliptic": {
             "version": "6.5.3",
             "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
@@ -12444,6 +12459,16 @@
                 }
             }
         },
+        "vue-happy-scroll": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/vue-happy-scroll/-/vue-happy-scroll-2.1.1.tgz",
+            "integrity": "sha512-3Xy6L+rdpNSB214yHxiF3O/l5/CIT8pxSUBn6PBN6CG94EakwcoSyCbkCTNgjEmtJQHp6pVgUwYFYro4fU43NQ==",
+            "dev": true,
+            "requires": {
+                "element-resize-detector": "^1.1.12",
+                "vue": "^2.0.0"
+            }
+        },
         "vue-hot-reload-api": {
             "version": "2.3.4",
             "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
diff --git a/package.json b/package.json
index e4415bf..fa696fe 100644
--- a/package.json
+++ b/package.json
@@ -30,14 +30,15 @@
         "eslint-plugin-vue": "^6.2.2",
         "node-sass": "^4.14.1",
         "sass-loader": "^8.0.2",
+        "vue-happy-scroll": "^2.1.1",
         "vue-template-compiler": "^2.6.11"
     },
     "rules": {
         "generator-star-spacing": "off",
-        "no-tabs":"off",
-        "no-unused-vars":"off",
-        "no-console":"off",
-        "no-irregular-whitespace":"off",
+        "no-tabs": "off",
+        "no-unused-vars": "off",
+        "no-console": "off",
+        "no-irregular-whitespace": "off",
         "no-debugger": "off"
     }
 }
diff --git a/src/main.js b/src/main.js
index 552625d..f4363bf 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,11 +10,18 @@ import api from './plugins/axios/index'
 import JSMpeg from './utils/jsmpeg.min'
 import vxgplayer from '../public/video_play_plugins/vxgplayer-1.8.54.min'
 import '../public/video_play_plugins/vxgplayer-1.8.54.min.css'
+
 Vue.config.productionTip = false
 Vue.prototype.$utils = utils
 Vue.prototype.$api = api
 // import axios from 'axios'
 // Vue.prototype.$axios = axios
+import {HappyScroll} from 'vue-happy-scroll'
+//自定义组件名
+Vue.component('happy-scroll', HappyScroll)
+// 引入css
+import 'vue-happy-scroll/docs/happy-scroll.css'
+
 new Vue({
     router,
     store,
diff --git a/src/plugins/antd.js b/src/plugins/antd.js
index 424cd71..50dc561 100644
--- a/src/plugins/antd.js
+++ b/src/plugins/antd.js
@@ -27,6 +27,7 @@ import {
     Divider,
     DatePicker,
     Upload,
+    Radio,
 } from "ant-design-vue";
 Vue.use(Layout);
 Vue.use(ConfigProvider);
@@ -54,6 +55,7 @@ Vue.use(Drawer)
 Vue.use(Divider)
 Vue.use(DatePicker)
 Vue.use(Upload)
+Vue.use(Radio)
 Vue.prototype.$message = message;
 Vue.prototype.$info = Modal.info;
 Vue.prototype.$success = Modal.success;
diff --git a/src/views/checkManage/index.vue b/src/views/checkManage/index.vue
index 2acc456..1522ef5 100644
--- a/src/views/checkManage/index.vue
+++ b/src/views/checkManage/index.vue
@@ -15,26 +15,123 @@
                 未盘点
             </span>
         </div>
-        <div class="">
 
+        <div class="check-content">
+            <div class="roadway-top">
+                <happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
+                    <div class="roadway-box">
+                        <div class="line" v-for="item in 20" :key="item">
+                            <a-tag
+                                :color="[i+'-'+item == '4-14'|| i+'-'+item=='8-18'?'#d81e06':'#bfbfbf']"
+                                style="width:46px;height:25px;margin: 1px 2px;" v-for="i in 60"
+                                :key="i">{{i}}-{{item}}
+                            </a-tag>
+                        </div>
+                    </div>
+                </happy-scroll>
+                <a-radio-group v-model="size" style="margin:10px 0">
+                    <a-radio-button value="small">
+                        外
+                    </a-radio-button>
+                    <a-radio-button value="default">
+                        内
+                    </a-radio-button>
+                </a-radio-group>
+            </div>
+            <a-select default-value="jack" style="width: 180px">
+                <a-select-option value="jack">
+                    1号巷道
+                </a-select-option>
+                <a-select-option value="lucy">
+                    2号巷道
+                </a-select-option>
+                <a-select-option value="disabled">
+                    3号巷道
+                </a-select-option>
+            </a-select>
+            <div class="roadway-top">
+                <happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
+                    <div class="roadway-box">
+                        <div class="line" v-for="item in 20" :key="item">
+                            <a-tag
+                                :color="[i+'-'+item == '5-16'|| i+'-'+item=='9-17'||i+'-'+item=='11-15'?'#1afa29':'#bfbfbf']"
+                                style="width:46px;height:25px;margin: 1px 2px;" v-for="i in 60"
+                                :key="i">{{i}}-{{item}}
+                            </a-tag>
+                        </div>
+                    </div>
+                </happy-scroll>
+                <a-radio-group v-model="size" style="margin:10px 0">
+                    <a-radio-button value="small">
+                        外
+                    </a-radio-button>
+                    <a-radio-button value="default">
+                        内
+                    </a-radio-button>
+                </a-radio-group>
+            </div>
         </div>
     </div>
 </template>
+<script>
+    export default {
+        data() {
+            return {
+                size: 'small'
+            };
+        },
+        mounted() {
+
+        },
+        methods: {},
+        components: {}
+    };
+</script>
 <style lang="scss" scoped>
-    .check-page{
-        .title-info{
+    .check-page {
+        .title-info {
             display: flex;
             align-items: center;
             justify-content: start;
-            .explain{
-                font-weight:600;
+
+            .explain {
+                font-weight: 600;
             }
-            .info-text{
+
+            .info-text {
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 margin-right: 15px;
             }
         }
+
+        .ant-tag {
+            margin-right: 0;
+            display: block;
+            line-height: 25px;
+            text-align: center;
+            cursor: pointer;
+        }
+
+        .roadway-top {
+            padding: 20px 0;
+            width: 1000px;
+
+            .scroll-box {
+                height: 270px;
+
+                .roadway-box {
+                    transform: rotateX(180deg);
+                    padding: 10px 10px 0 0;
+
+                    .line {
+                        display: flex;
+                        transform: rotateX(180deg); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上
+                    }
+                }
+            }
+
+        }
     }
 </style>