保单查询

+import api from '@/api/api'
+import {
+    httpGet,
+    httpPost
+} from '@/api/fetch-api.js'
+
+// import InsuranceQuery from './components/insurance-query'
+
+export default {
+    data() {
+        return {
+            activity: "m1",
+
+            insuranceForm: {
+                f1 : true,
+                f2 : true,
+                f3 : true,
+                f4 : true,
+                f5 : true,
+            }
+        }
+    },
+    methods: {
+        initData() { },
+    },
+    created() { },
+    components: {
+        // InsuranceQuery
+    }
+}

+
+
+.content {
+    display: flex;
+}
+
+.left-panel {
+    width: 12.833333rem ;
+    height: 42.333333rem ;
+    margin-left: 3.166667rem;
+
+    .separator {
+        margin:auto;
+        width: 10.5rem ;
+        height: .083333rem;
+        background-color: #dcdddd;
+    }
+    .menu-item {
+        height: 5.916667rem;
+        line-height: 5.916667rem;
+        font-size: 1.5rem ;
+        font-weight: bold;
+        color: #4c4948;
+        text-align: center;
+        cursor: pointer;
+
+        i {
+            display: inline-block;
+            width: 1.666667rem ;
+            height: 1.666667rem;
+            margin-right: 1.333333rem;
+            vertical-align: middle;
+        }
+        .m1 {
+            background: url("~@/assets/images/insurance-query/m1-unselect.png") no-repeat center center;
+            background-size: 100% 100%;
+        }
+        .m2 {
+            background: url("~@/assets/images/insurance-query/m2-unselect.png") no-repeat center center;
+            background-size: 100% 100%;
+        }
+        .m3 {
+            background: url("~@/assets/images/insurance-query/m3-unselect.png") no-repeat center center;
+            background-size: 100% 100%;
+        }
+        .m4 {
+            background: url("~@/assets/images/insurance-query/m4-unselect.png") no-repeat center center;
+            background-size: 100% 100%;
+        }
+        .m5 {
+            background: url("~@/assets/images/insurance-query/m5-unselect.png") no-repeat center center;
+            background-size: 100% 100%;
+        }
+        .m6 {
+            background: url("~@/assets/images/insurance-query/m6-unselect.png") no-repeat center center;
+            background-size: 100% 100%;
+        }
+    }
+    .menu-item.activity {
+        color: #f05a23 !important;
+
+        .m1 {
+            background: url("~@/assets/images/insurance-query/m1.png") no-repeat center center;
+            background-size: 100% 100%;
+        }
+        .m2 {
+            background: url("~@/assets/images/insurance-query/m2.png") no-repeat center center;
+            background-size: 100% 100%;
+        }
+        .m3 {
+            background: url("~@/assets/images/insurance-query/m3.png") no-repeat center center;
+            background-size: 100% 100%;
+        }
+        .m4 {
+            background: url("~@/assets/images/insurance-query/m4.png") no-repeat center center;
+            background-size: 100% 100%;
+        }
+        .m5 {
+            background: url("~@/assets/images/insurance-query/m5.png") no-repeat center center;
+            background-size: 100% 100%;
+        }
+        .m6 {
+            background: url("~@/assets/images/insurance-query/m6.png") no-repeat center center;
+            background-size: 100% 100%;
+        }
+
+    }
+}
+
+.min-panel {
+    margin-left: .666667rem;
+    width: 1.166667rem;
+    
+    .item {
+        width: 1.166667rem ;
+        height: 6rem;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+    }
+
+    .activity .triangle {
+       width: .583333rem;
+       height: 1.166667rem ;
+       background: url("~@/assets/images/insurance-query/triangle.png") no-repeat center center;
+       background-size: 100% 100%;
+    }
+}
+
+.right-panel {
+    margin-left: 1.166667rem;
+    width: 64.166667rem ;
+    background-color: #ffffff;
+
+    .panel {
+        display: none;
+    }
+    
+    .activity {
+        display: block !important;
+    }
+}
+
+
+/** 可以抽出来作为一个插件 **/
+.cell-group {
+    margin-bottom: 1rem /* 12/12 */;
+    div{
+        font-size: 1rem /* 12/12 */;
+        color: #4c4948;
+    }
+
+    .w1 {
+        min-width: 9.166667rem /* 110/12 */;
+        text-align: center;
+    }
+
+    .w2 {
+        min-width: 6.25rem /* 75/12 */;
+        text-align: center;
+    }
+
+    .table-header {
+        width: 64.166667rem /* 770/12 */;
+        height: 2.5rem /* 30/12 */;
+        border-top-left-radius: .666667rem /* 8/12 */;
+        border-top-right-radius: .666667rem /* 8/12 */;
+        background-color: #f2f2f2;
+        display: flex;
+        align-items: center;
+
+        .normal-header {
+            width: 58.833333rem /* 706/12 */;
+            margin: auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .title {
+                font-size: 1rem /* 12/12 */;
+                font-weight: bold;
+                color: #575453;
+            }
+
+            .guide {
+                transition: all 0.5s;
+                cursor: pointer;
+                width: 1rem /* 12/12 */;
+                height: .666667rem /* 8/12 */ ;
+                background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
+                background-size: 100% 100%;
+            }
+
+            .rotate180 {
+                transform: rotate(180deg);
+                transition: all 0.5s;
+            }
+        }
+    }
+
+    .table-content {
+        width: 64.166667rem /* 770/12 */;
+        height: auto;
+        display: inline-block;
+        border-bottom-left-radius: .666667rem /* 8/12 */;
+        border-bottom-right-radius: .666667rem /* 8/12 */;
+        border-left: solid .083333rem /* 1/12 */ #f2f2f2;
+        border-right: solid .083333rem /* 1/12 */ #f2f2f2;
+        border-bottom: solid .083333rem /* 1/12 */ #f2f2f2;
+        padding: 0 2.583333rem /* 31/12 */;
+        max-height: 41.666667rem /* 500/12 */;
+        transition: max-height ease-out 0.3s !important;
+        overflow: hidden;
+
+        .data-line {
+            height: 4.416667rem /* 53/12 */;
+            margin: auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .cell1 {
+                width: 29.166667rem /* 350/12 */;
+                display: flex;
+                justify-content: space-between;
+                margin: auto;
+            }
+
+            .separator-v {
+                height: 2.5rem /* 30/12 */;
+                width: .166667rem /* 2/12 */;
+                background-color: #f2f2f2;
+                margin: 0 .916667rem /* 11/12 */;
+            }
+        }
+
+        .label span {
+            color: #f05a23;
+            margin-left: .583333rem /* 7/12 */;
+            cursor: pointer;
+            text-decoration: underline;
+        }
+
+        .separator-h {
+            width: 58.833333rem /* 706/12 */;
+            height: .083333rem /* 1/12 */;
+            background-color: #f2f2f2;
+        }
+    }
+    .orange {
+        background-color: #f05a23 !important;
+        div {
+            color: #ffffff;
+        }
+    }
+
+    .hide {
+        max-height: 0;
+        border-bottom:none;
+    }
+
+}
+
+.empty-line {
+    height: 1.333333rem /* 16/12 */;
+}
\ No newline at end of file

@@ -88,6 +88,14 @@ const routes = [
 			title: ''
 			title: ''
 		}
 		}
 	},
 	},
+	{
+		path: '/custom/service',
+		name: 'customService',
+		component: () => import('./pages/custom-service/custom-service.vue'),
+		meta: {
+			title: '保单查询'
+		}
+	},
 
 
 	{
 	{
 		path: '/demo',
 		path: '/demo',