diff --git a/src/api/http/http-api.js b/src/api/http/http-api.js
index 29c40ee..f3702ce 100644
--- a/src/api/http/http-api.js
+++ b/src/api/http/http-api.js
@@ -168,6 +168,11 @@ export default  {
         name: '复核页面的核对信息',
         method: 'POST'
     },
+    getStockPage: {
+        url: '/stockLog',
+        name: '获取随性历史',
+        method: 'POST'
+    },
     getStatusByRowColumn: {
         url: '/stock/statusByRowColumn',
         name: '行列的库存状态',
diff --git a/src/layouts/AsideMenu.vue b/src/layouts/AsideMenu.vue
index da50f2c..be956a0 100644
--- a/src/layouts/AsideMenu.vue
+++ b/src/layouts/AsideMenu.vue
@@ -92,7 +92,7 @@ export default {
                 recursionRoute(parents);
             }else {
                 parents = this.$router.options.routes[0].children.filter(item => {
-                    return !item.name.startsWith("center") && !item.name.startsWith("ioTable") && !item.name.startsWith("realTimeMonitoringModel") && !item.name.startsWith("plcStatus") && !item.name.startsWith("cameraManageModel") && !item.name.startsWith("checkOperation");
+                    return !item.name.startsWith("center") && !item.name.startsWith("ioTable") && !item.name.startsWith("realTimeMonitoringModel") && !item.name.startsWith("plcStatus") && !item.name.startsWith("cameraManageModel") && !item.name.startsWith("checkOperation") && !item.name.startsWith("stockLog") ;
                 });
             }
             this.routes = parents;
diff --git a/src/router/index.js b/src/router/index.js
index 12e162a..da79056 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -42,7 +42,7 @@ const routes = [{
             path: 'realTimeMonitoring',
             name: 'realTimeMonitoring',
             meta: {
-                icon: 'desktop',
+                icon: 'video-camera',
                 name: '实时视频流'
             },
             component: () => import('@/views/realTimeMonitoring/index'),
@@ -88,11 +88,28 @@ const routes = [{
             path: 'checkHistory',
             name: 'checkHistory',
             meta: {
-                icon: 'form',
+                icon: 'tag',
                 name: '盘点历史',
             },
             component: () => import('@/views/historyCheck/index'),
         },
+        {
+            path: 'stockHistory',
+            name: 'stockHistory',
+            meta: {
+                icon: 'file-excel',
+                name: '库位历史',
+            },
+            component: () => import('@/views/stockLog/index'),
+        },
+        {
+            path: 'stockLogDetail',
+            name: 'stockLogDetail',
+            meta: {
+                name: '库位历史详情',
+            },
+            component: () => import('@/views/stockLog/logPage'),
+        },
         {
             path: 'roadwayManage',
             name: 'roadwayManage',
@@ -106,7 +123,7 @@ const routes = [{
             path: 'cameraManage',
             name: 'cameraManage',
             meta: {
-                icon: 'video-camera',
+                icon: 'camera',
                 name: '球机管理'
             },
             component: () => import('@/views/cameraManage/index')
diff --git a/src/views/checkManage/Subsection.vue b/src/views/checkManage/Subsection.vue
index 342b9b9..552a41d 100644
--- a/src/views/checkManage/Subsection.vue
+++ b/src/views/checkManage/Subsection.vue
@@ -26,7 +26,7 @@
                                 <div v-for="(column,index) in total.column" :key="index" class="el" v-if="column >= random.column[0] && column <= random.column[1]">
 
                                     <!--渲染默认巷道框架规格 定位浮在 已有巷道上做对应-->
-                                    <span
+                                    <span 
                                         class="default"
                                         :id="`${shelveId}-${random.row[0] + random.row[1] - rowIndex - 1}-${column}`"
                                         @click="tocheckPage(random.row[0] + random.row[1] - rowIndex - 1,column)">
@@ -216,7 +216,7 @@ export default {
         
         getStatusBg(row,column,status) {
             var dom = document.getElementById(this.shelveId+"-"+row+'-'+column);
-            var color = status == 1 ?'#d81e06': status == 2 ? '#1afa29': '#bfbfbf';
+            var color = status == 1 ?'#d81e06': (status == 2|| status == 3) ? '#1afa29': '#bfbfbf';
             dom.style.background = color
         },
         getStatusTab(tab,status,rowColumn){
diff --git a/src/views/checkManage/checkOperation.vue b/src/views/checkManage/checkOperation.vue
index 0863030..a548050 100644
--- a/src/views/checkManage/checkOperation.vue
+++ b/src/views/checkManage/checkOperation.vue
@@ -152,7 +152,7 @@ export default {
                 },
                 
             ],
-            statusMap: {0:"未盘点",1:"盘点异常",2:"核对正确",3:"核对正确"}
+            statusMap: {0:"未盘点",1:"盘点异常",2:"核对正确",3:"人工核对正确"}
             
         }
     },
diff --git a/src/views/historyCheck/index.vue b/src/views/historyCheck/index.vue
index 29ba53f..872facf 100644
--- a/src/views/historyCheck/index.vue
+++ b/src/views/historyCheck/index.vue
@@ -124,7 +124,7 @@ export default {
     name: "historyCheck",
     data() {
         return {
-            statusMap: {0:"未盘点",1:"盘点异常",2:"核对正确",3:"核对正确"},
+            statusMap: {0:"未盘点",1:"盘点异常",2:"核对正确",3:"人工核对正确"},
             queryParam: {
                 lotnum: '',
                 shelveId:'',
diff --git a/src/views/stockLog/Subsection.vue b/src/views/stockLog/Subsection.vue
new file mode 100644
index 0000000..d0c63b3
--- /dev/null
+++ b/src/views/stockLog/Subsection.vue
@@ -0,0 +1,280 @@
+<template>
+    <div class="subsection">
+        <a-layout style="width: 1500px">
+            <a-layout style="width: 100%;height: 310px">
+                <a-layout-sider width="110px">
+                    <a-tabs default-active-key="1" tab-position="left" @change="changeTabLeft" v-if="total.row > nums.row">
+                        <a-tab-pane 
+                            v-for="index in latticeRow"
+                            :key="index"
+                        >
+                            <span slot="tab" >
+                                {{  getRandom(latticeRow + 1 -index, latticeRow, nums.row, total.row) }}
+                            </span>
+                        </a-tab-pane>
+                    </a-tabs>
+                </a-layout-sider>
+                <a-layout-content>
+                    <!-- <slot :data="{select, nums, random}"></slot> -->
+                    <div class="roadway-buttom">
+                        <div class="roadway-box">
+                            
+                            <div class="line" v-for="(row,rowIndex) in total.row" :key="rowIndex"  v-if="row >= random.row[0] && row <= random.row[1]">
+                                <div v-for="(column,index) in total.column" :key="index" class="el" v-if="column >= random.column[0] && column <= random.column[1]">
+
+                                    <!--渲染默认巷道框架规格 定位浮在 已有巷道上做对应-->
+                                    <span style="background:#bfbfbf;"
+                                        class="default"
+                                        :id="`${shelveId}-${random.row[0] + random.row[1] - rowIndex - 1}-${column}`"
+                                        @click="toStockPage(random.row[0] + random.row[1] - rowIndex - 1,column)">
+                                        {{ random.row[0] + random.row[1] - rowIndex - 1}}-{{column}}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </a-layout-content>
+            </a-layout>
+            <a-layout-footer>
+                <!-- <a-tabs default-active-key="1" tab-position="bottom" @change="value => select.row = value" v-if="total.row > nums.row"> -->
+                <a-tabs default-active-key="1" tab-position="bottom" @change="changeTab" v-if="total.column > nums.column">
+                    <a-tab-pane
+                        v-for="index in latticeColumn"
+                        :key="index"
+                    >
+                            <span slot="tab">
+                                {{  getRandom(index, latticeColumn, nums.column, total.column) }}
+                            </span>
+                    </a-tab-pane>
+                </a-tabs>
+            </a-layout-footer>
+        </a-layout>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Subsection",
+    components: {},
+    props: {
+        // 默认行第一个  列第一个
+        select: {
+            type: Object,
+            default: () => {
+                return {
+                    row: 1,
+                    column: 1
+                }
+            }
+        },
+        // 总共数据
+        total:{
+            type: Object,
+            default:()=>{
+                return {}
+            }
+        },
+        nums: {
+            type: Object,
+            default: () => {
+                return {
+                    row: 10,
+                    column: 15
+                }
+            }
+        },
+        shelveId: {
+            type: String,
+            default: () => {
+                return {}
+            }
+        },
+        streetId: {
+            type: Number,
+            default: () => {
+                return {}
+            }
+        },
+        streetName: {
+            type: String,
+            default: () => {
+                return {}
+            }
+        },
+        type: {
+            type: String,
+            default: () => {
+                return {}
+            }
+        },
+        inOut: {
+            type: String,
+            default: () => {
+                return {}
+            }
+        },
+        
+    },
+    computed: {
+        // 应有的格子数
+        latticeRow() {
+            return  parseInt(this.total.row / this.nums.row) + (this.total.row % this.nums.row > 0 ? 1 : 0);
+        },
+        latticeColumn() {
+            return  parseInt(this.total.column / this.nums.column) + (this.total.column % this.nums.column > 0 ? 1 : 0);
+        },
+        random() {
+            
+            return {
+                
+                row: this.getRandomRow(this.select.row),
+                column: this.getRandomColumn(this.select.column),
+            }
+        },
+          
+    },
+    
+    data() {
+        return {
+            status: {
+                row: {},
+                column: {}
+            },
+           
+        }
+    },
+    mounted() {
+        
+    },
+    
+    beforeDestroy() {
+        
+    },
+    created() {
+        
+    },
+    destroyed() {
+        
+    },
+    
+    methods: {
+        changeTab(value){
+            this.select.column = value
+            
+        },
+        changeTabLeft(value){
+            this.select.row = value
+            
+
+        },
+        // 获取行或列的范围字符串
+        getRandom(index, lattice, num, total) {
+            if(index !== lattice) {
+                return `${(index - 1) * num + 1} - ${index * num}`;
+            }else {
+                return `${(index - 1) * num + 1} - ${total}`;
+            }
+        },
+        // 获取行和列的范围数组
+        getRandomRow(val) {
+            console.log(this.latticeRow + 1 - val, this.latticeRow, this.nums.row, this.total.row)
+            return this.getRandom(this.latticeRow + 1 - val, this.latticeRow, this.nums.row, this.total.row).split(' - ').map(item => Number(item));
+        },
+        getRandomColumn(val) {
+            return this.getRandom(val, this.latticeColumn, this.nums.column, this.total.column).split(' - ').map(item => Number(item));
+        },
+        
+        toStockPage(row,column){
+            this.$router.push({
+                name: 'stockLogDetail',
+                query: {row: row, column: column, shelveId: this.shelveId}
+            }) 
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.subsection /deep/{
+    width: 100%;
+    height: 360px;
+    overflow: hidden;
+    .ant-tabs-nav .ant-tabs-tab {
+        // padding: 0;
+        margin-right: 0;
+    }
+    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
+        &:hover{
+            background: #40a9ff;
+            border-color: #40a9ff;
+        }
+        background: #40a9ff;
+        border-color: #40a9ff;
+        box-shadow: -1px 0 0 0 #40a9ff;
+    }
+    .ant-radio-button-wrapper-checked {
+        box-shadow: -1px 0 0 0 #40a9ff;
+    }
+    .radio-button-cell {
+        width: 100px;
+        text-align: center;
+    }
+    .ant-layout-sider {
+        height: 100%;
+        .ant-tabs {
+            height: 300px;
+        }
+
+        .ant-tabs-tab {
+            padding: 8px;
+            margin-bottom: 5px;
+            width: 104px;
+        }
+    }
+    .ant-layout-footer {
+        // width: 500px;
+        padding: 0 0 0 110px;
+        .ant-tabs {
+            // width: 735px;
+        }
+        .ant-tabs-bottom-bar {
+            margin-top: 0;
+        }
+    }
+    .ant-layout, .ant-layout-sider, .ant-layout-footer {
+        background-color: #ffffff;
+    }
+    roadway-buttom {
+        padding: 5px 0;
+        width: 100%;
+    }
+
+    .roadway-box {
+        //transform: rotateX(180deg);
+        padding: 10px 10px 0 0;
+        .line {
+            display: flex;
+            //transform: rotateX(180deg); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上
+
+            .el {
+                width: 46px;
+                height: 25px;
+                line-height: 25px;
+                margin: 2px;
+                font-size: 12px;
+                text-align: center;
+                border-radius: 4px;
+                cursor: pointer;
+                position: relative;
+                .default {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/stockLog/index.vue b/src/views/stockLog/index.vue
new file mode 100644
index 0000000..8ce5c78
--- /dev/null
+++ b/src/views/stockLog/index.vue
@@ -0,0 +1,261 @@
+<template>
+    <div class="check-page">
+
+        <div style="margin-top: 10px">
+            <a-select  @change="handleChange" style="width:200px" v-model="select">
+                <a-select-option v-for="i in data" :key="i.name" :value="i.id">
+                    {{i.name}}
+                </a-select-option>
+            </a-select>
+        </div>
+
+
+        <!--左货架DOM-->
+        <div class="center-box">
+            <span class="shelf-number">
+                左货架号: {{leftShelveId.shelveId}}
+            </span>
+
+            <a-radio-group v-model="size" style="margin:10px 0" @change="getStockRowColumn"
+                           v-if="streetDetail.leftInsideShelveId && streetDetail.leftOutsideShelveId">
+                <a-radio-button value="leftOutsideShelveId">
+                    外
+                </a-radio-button>
+                <a-radio-button value="leftInsideShelveId">
+                    内
+                </a-radio-button>
+            </a-radio-group>
+
+        </div>
+
+        <div class="check-content" v-for="item in data" :key="item.id">
+            <subsection v-if="item.id == select" :total="{row: item.leftRow, column: item.leftColumn}" :shelveId="leftShelveId.shelveId" :streetId="item.id" :streetName="item.name" type="left" :inOut="leftShelveId.shelveType" >
+            </subsection>
+        </div>
+
+
+        <!--单伸类型右货架DOM-->
+        <div class="center-box">
+            <span class="shelf-number">
+                右货架号: {{rightShelveId.shelveId}}
+            </span>
+
+            <a-radio-group v-model="size2" style="margin:10px 0" @change="getStockRowColumn"
+                           v-if="streetDetail.rightInsideShelveId && streetDetail.rightOutsideShelveId">
+                <a-radio-button value="rightOutsideShelveId">
+                    外
+                </a-radio-button>
+                <a-radio-button value="rightInsideShelveId">
+                    内
+                </a-radio-button>
+            </a-radio-group>
+
+
+        </div>
+
+        <div class="check-content" v-for="item in data" :key="item.name">
+            <subsection v-if="item.id == select" :total="{row:item.rightRow, column: item.rightColumn}" :shelveId="rightShelveId.shelveId" :streetId="item.id" :streetName="item.name" type="right" :inOut="rightShelveId.shelveType">
+            </subsection>
+        </div>
+    </div>
+</template>
+<script>
+import Subsection from "./Subsection";
+export default {
+    name:'checkManage',
+    data() {
+        return {
+            size: 'leftOutsideShelveId',
+            size2: 'rightOutsideShelveId',
+            data: [],
+            select: '',
+            streetId: 0,
+            streetDetail: {},
+            checkList: [],
+            stockInfo: {
+                left: {},
+                right: {}
+            },
+        
+            leftShelveId:{},
+            rightShelveId:{}
+        }
+    },
+    computed: {
+        
+    },
+    
+    mounted() {
+        this.request();
+    },
+    created(){
+
+    },
+    activated() {
+        if(!this.$route.meta.isUseCache){   
+            console.log("$route.meta.isUseCache false")         
+            // 清空原有数据
+            this.request();// 这是我们获取数据的函数
+        }else{
+            console.log("$route.meta.isUseCache true") 
+            //this.request();       
+        }
+    },
+    
+    methods: {
+        //获取巷道列表
+        request() {
+            this.$api.httpApi.getAllStreet({
+            }).then(res => {
+                console.log("update data")
+                for(let i = 0;i<res.data.length;i++){
+                    
+                    this.$set(this.data,i,res.data[i])
+                }
+                this.select = res.data[0].id
+                //this.$set(this.select,res.data.list[0].id,0)
+                this.getStreetDetail(this.select);
+            }).catch(err => {
+
+            });
+        },
+        // 获取盘点状态
+        async getStockRowColumn() {
+            this.rightShelveChange();
+            this.leftShelveChange();
+            
+        },
+        rightShelveChange() {
+            let shelveId;
+            let shelveType = 'none';
+            if(this.streetDetail.rightShelveId) {
+                shelveId = this.streetDetail.rightShelveId;
+            }else if(this.streetDetail.rightInsideShelveId && this.size2 =='rightInsideShelveId'){
+                shelveId = this.streetDetail.rightInsideShelveId;
+                shelveType = 'inside';
+            }else if(this.streetDetail.rightOutsideShelveId && this.size2 == 'rightOutsideShelveId'){
+                shelveId = this.streetDetail.rightOutsideShelveId;
+                shelveType = 'out';
+            };
+            this.rightShelveId.shelveId = shelveId;
+            this.rightShelveId.shelveType = shelveType;
+        
+        },
+        leftShelveChange() {
+            let shelveId;
+            let shelveType = 'none';
+            if(this.streetDetail.leftShelveId) {
+                shelveId = this.streetDetail.leftShelveId;
+            }else if(this.streetDetail.leftInsideShelveId && this.size =='leftInsideShelveId'){
+                shelveId = this.streetDetail.leftInsideShelveId;
+                shelveType = 'inside';
+            }else if(this.streetDetail.leftOutsideShelveId && this.size== 'leftOutsideShelveId'){
+                shelveId = this.streetDetail.leftOutsideShelveId;
+                shelveType = 'out';
+            };
+            this.leftShelveId.shelveId = shelveId;
+            this.leftShelveId.shelveType = shelveType;
+        },
+        
+        //获取巷道详情
+        getStreetDetail(id) {
+            this.$axios.get('/street/' + id, {
+                data: {}
+            }).then(res => {
+                this.streetDetail = res.data
+                this.getStockRowColumn()
+            }).catch(err => {
+
+            })
+        },
+        
+        handleChange(value) {
+            
+            this.select = value
+            
+            this.getStreetDetail(value)
+            this.leftShelveChange();
+            this.rightShelveChange();
+        },
+
+    },
+    components: {Subsection}
+};
+</script>
+<style lang="scss" scoped>
+.check-page {
+    position: relative;
+
+    .title-info {
+        display: flex;
+        align-items: center;
+        justify-content: start;
+
+        .explain {
+            font-weight: 600;
+        }
+
+        .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, roadway-buttom {
+        padding: 5px 0;
+        width: 100%;
+    }
+
+    .roadway-box {
+        transform: rotateX(180deg);
+        padding: 10px 10px 0 0;
+        .line {
+            display: flex;
+            transform: rotateX(180deg); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上
+
+            .el {
+                width: 46px;
+                height: 25px;
+                line-height: 25px;
+                margin: 2px;
+                font-size: 12px;
+                text-align: center;
+                border-radius: 4px;
+                cursor: pointer;
+                position: relative;
+                .default {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                }
+            }
+        }
+    }
+
+    .center-box {
+        width: 500px;
+        height: 52px;
+        line-height: 52px;
+        .shelf-number {
+            display: inline-block;
+            width: 200px;
+        }
+    }
+    .export-all {
+        position: absolute;
+        right: 20px;
+    }
+}
+</style>
diff --git a/src/views/stockLog/logPage.vue b/src/views/stockLog/logPage.vue
new file mode 100644
index 0000000..32a900f
--- /dev/null
+++ b/src/views/stockLog/logPage.vue
@@ -0,0 +1,267 @@
+<template>
+    <div >
+        <a-table
+            style="margin-top:40px"
+            :columns="columns"
+            :row-key="record => record.id"
+            :data-source="data"
+            :pagination="pagination"
+            @change="getStockPageInfo"
+            >
+           <span slot="type" slot-scope="record">
+               {{ statusMap[record.type] }}
+          </span>
+          <span slot="pic" slot-scope="text" style="width:auto">
+
+            <template>
+                <span style="height:100%;">
+                    <happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box" style="width:320px;height:90px;">
+                        <viewer><img class="historyImg" :src="imgUrl+text.pic"/></viewer>
+                    </happy-scroll>
+                </span>
+                
+            </template>
+
+          </span> 
+        </a-table>
+    </div>
+</template>
+<script>
+import {imgUrl} from "@/api/importExcel";
+const columns=[
+    {
+        title:'随行工单号',
+        dataIndex: 'orderNum'
+    },
+    {
+        title:'货架号',
+        dataIndex: 'shelveId'
+    },
+    {
+        title:'行',
+        dataIndex: 'row'
+    },
+    {
+        title:'列',
+        dataIndex: 'column'
+    },
+    {
+        title:'类型',
+        
+        scopedSlots: {customRender: 'type'},
+    },
+    {
+        title:'图片',
+        scopedSlots: {customRender: 'pic'},
+    },
+    {
+        title:'时间',
+        dataIndex: 'createTime'
+    },
+]
+export default {
+    data() {
+        return {
+            pageNum:1,
+            pageSize:10,
+            data: [],
+            pagination:{
+                total:0,
+                defaultPageSize:10, // 默认每页显示数量
+                showTotal: total => `共 ${total} 条数据`, // 显示总数
+                showSizeChanger:true, // 显示可改变每页数量
+                pageSizeOptions: ['10', '20', '30'],
+                onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize // 改变每页数量时更新显示
+            },
+            row: 0,
+            column: 0,
+            shelveId: '',
+            columns,
+            statusMap: {0:"未知",1:"取货到位",2:"取货完成",3:"放货到位",4:"放货完成"},
+            
+        }
+    },
+    beforeRouteLeave(to ,form, next) {
+        // 修复第二次进入界面不执行created
+        this.$destroy();
+        // if (to.name == 'checkManage') {
+        //     to.meta.isUseCache = true;    
+        // }else{
+        //     to.meta.isUseCache = false;
+        // }   
+        next();
+    },
+    created() {
+        this.imgUrl = imgUrl
+        if (this.$route.query.row && this.$route.query.column && this.$route.query.shelveId ) {
+           
+            this.row = this.$route.query.row
+            this.column = this.$route.query.column
+            this.shelveId = this.$route.query.shelveId
+        }
+    },
+    mounted() {
+        this.getStockPageInfo()
+    },
+    destroyed () {
+        
+    },
+    
+    methods: {
+        getStockPageInfo(pagination) {
+            if(pagination){
+                this.pagination.current = pagination.current;
+                this.pagination.pageSize = pagination.pageSize;
+                this.pageNum = pagination.current;
+                this.pageSize = pagination.pageSize;
+            }
+        
+            this.request();
+        },
+        request(){
+            this.$api.httpApi.getStockPage({
+                data: {
+                    pageNum:this.pageNum,
+                    pageSize:this.pageSize,
+                    row:this.row,
+                    column:this.column,
+                    shelveId:this.shelveId
+                }
+            }).then(res => {
+                const pagination = { ...this.pagination };
+                pagination.total = res.data.total;
+                this.data = res.data.list;
+                this.pagination = pagination;
+            }).catch(err => {
+
+            });
+        },
+       
+    }
+}
+</script>
+<style lang="scss">
+    .ant-carousel .slick-slide {
+        color: #000000;
+    }
+
+    .checkOperation {
+            .carousel-page {
+                width: 100%;
+                /*border: solid 1px blue;*/
+                &-title {
+                    color: #009FE3;
+                    font-size: 16px;
+                    margin: 0;
+                    padding: 15px 0 10px 25px;
+                }
+
+                &-content {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding-left: 25px;
+
+                    .img-box {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        flex-direction: column;
+                        font-size: 17px;
+                        height: 400px;
+                        margin-right: 10px;
+                        img {
+                            height: 100%
+                        }
+
+                        p {
+                            height: 25px;
+                        }
+                        ul {
+                            width: 100% / 4;
+                            height: 100%;
+                            margin-bottom: 0;
+                            padding-inline-start: 0;
+                            li {
+                                background-color: #ffaf11;
+                                margin: 10px 0;
+                                padding: 5px;
+                                font-size: 16px;
+                                font-weight: 600;
+                                color: #494e52;
+                                .img-box-title {
+                                    width: 130px;
+                                    display: inline-block;
+                                }
+                                .img-box-value {
+                                    display: inline-block;
+                                    width: calc(100% - 130px);
+                                    overflow: hidden;
+                                    position: relative;
+                                    top: 5px;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                &-footer {
+                    width: calc(100% - 380px);
+                    .info-box {
+                        color: #000000;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+
+                        p {
+                            padding: 0 20px;
+                            font-size: 18px;
+                        }
+                    }
+
+                    .status {
+                        text-align: center;
+                        font-size: 21px;
+                    }
+
+                    .status-btn {
+                        display: flex;
+                        align-items: flex-start;
+                        justify-content: flex-start;
+
+                        .btn {
+                            padding: 50px;
+                            font-size: 20px;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            line-height: 0;
+                            margin: 15px 45px;
+                        }
+                    }
+                }
+            }
+
+        .bottom-btn {
+            width: 100%;
+            display: flex;
+            align-items: right;
+            justify-content: center;
+
+            p {
+                font-size: 18px;
+                padding: 0;
+                margin: 0;
+            }
+
+            .btn {
+                margin: 25px;
+            }
+        }
+    }
+    .historyImg {
+        width: 180px;
+        height:auto;
+    }
+
+</style>