小牛集卡web 客户端
chenwei
2021-06-08 e41faf1640e2e71febf4ba347a301e0c043b6ce9
commit | author | age
423585 1 <template>
C 2   <div>
3     <el-tabs v-model="activeName" @tab-click="handleClick">
4       <el-tab-pane label="常规箱子" name="first">
e41faf 5         <div class="show-box" v-for="(item, index) in allData.ContainerList" :key="index">
423585 6           <div class="box">
C 7             <i class="iconfont icon-jizhuangxiang_container"></i>
e41faf 8             <span>{{item.CntrName}}</span>
C 9             <span>{{item.CntrSubtitle}}</span>
423585 10           </div>
e41faf 11           <!-- <div class="switch">
423585 12             <el-switch v-model="value1" active-text="拼车"> </el-switch>
e41faf 13           </div> -->
423585 14         </div>
C 15       </el-tab-pane>
16       <el-tab-pane label="特种箱" name="second">
e41faf 17         <div class="show-box" v-for="(sitem, sindex) in allData.SpecialContainerList" :key="sindex">
423585 18           <div class="box">
C 19             <i class="iconfont icon-jizhuangxiang_container"></i>
e41faf 20             <span>{{sitem.CntrName}}</span>
C 21             <span>{{sitem.CntrSubtitle}}</span>
423585 22           </div>
e41faf 23           <!-- <div class="switch">
423585 24             <el-switch v-model="value1" active-text="拼车"> </el-switch>
e41faf 25           </div> -->
423585 26         </div>
C 27       </el-tab-pane>
28       <div class="btn">
29         <button>添 加</button>
30       </div>
31     </el-tabs>
32   </div>
33 </template>
34 <script>
35 export default {
36   data() {
37     return {
38       activeName: "second",
39       value1: true,
e41faf 40       allData:{}
423585 41     };
C 42   },
e41faf 43   created(){
C 44     this.getBoxList();
45   },
423585 46   methods: {
e41faf 47     //请求箱型列表
C 48     async getBoxList(){
49       await this.$axios.get("/api/HomePage/GetOrderForm").then(res=>{
50             this.allData = res.data;
51       }).catch(err=>{
52           console.log(err);
53       })
54     },
423585 55     handleClick(tab, event) {
C 56       console.log(tab, event);
57     },
58   },
59 };
60 </script>
61 <style lang="less" scoped>
62 .show-box {
63   display: flex;
64   align-items: center;
65   margin-bottom: 10px;
66 }
67 .box {
68   font-size: 18px;
69   border: 1px solid #dfdcdc;
70   padding: 5px 10px;
71   border-radius: 3px;
72   margin-right: 15px;
73 }
74 .box i {
75   font-size: 20px;
76 }
77 .box span:nth-child(2) {
78   font-weight: bold;
79   margin: 0 5px;
80 }
81 .box span:nth-child(3) {
82   font-size: 14px;
83 }
84 .btn {
85   text-align: center;
86 }
87 .btn button{
88   cursor: pointer;
89   border: none;
90   outline: none;
91   padding: 6px 15px;
92   background-color: #F59A23;
93   color: #fff;
94   font-weight: bold;
95   border-radius: 6px;
96 }
97 .btn button:hover{
98     background-color: #f3a641;
99 }
100 </style>