小牛集卡web 客户端
chenwei
8 days ago 2621fec0d7ce1db0a2302c6c1ac0f08b36ae8a63
commit | author | age
7f5659 1 <template>
C 2   <div class="car-shar">
3     <div class="title">
4       <div>确认订单</div>
5       <div>
6         <i class="el-icon-user"></i>
7         <span>我的小牛币:</span>
8         <span>¥5060.00</span>
9       </div>
10     </div>
11     <div class="oprator">
2621fe 12       <div class="box-content">
C 13         <div class="title">配拖箱:</div>
14         <div class="box">
7f5659 15           <i class="iconfont icon-jizhuangxiang_container"></i>
2621fe 16           <div>20GP</div>
7f5659 17         </div>
C 18       </div>
19       <el-button plain size="mini">合并整车</el-button>
20       <el-button plain size="mini">整车拆分</el-button>
21     </div>
22     <div class="car-pool-show">
23       <div>
2621fe 24         <div class="one">
7f5659 25           <el-tag effect="dark" type="warning" size="mini">车</el-tag>
C 26         </div>
2621fe 27         <div class="two">
7f5659 28           <el-checkbox></el-checkbox>
C 29         </div>
30       </div>
31       <div>
2621fe 32         <div class="one">
C 33           <div >提箱地</div>
34           <div >
7f5659 35             <el-select v-model="value" placeholder="请选择">
C 36               <el-option
37                 v-for="item in options"
38                 :key="item.value"
39                 :label="item.label"
40                 :value="item.value"
41               >
42               </el-option>
43             </el-select>
44           </div>
45         </div>
2621fe 46         <div class="two">
7f5659 47           <el-select v-model="value" placeholder="请选择">
C 48             <el-option
49               v-for="item in options"
50               :key="item.value"
51               :label="item.label"
52               :value="item.value"
53             >
54             </el-option>
55           </el-select>
56         </div>
57       </div>
58       <div class="three">
2621fe 59         <div class="one">
7f5659 60           <div>装卸地</div>
C 61           <div>
62             <span>重庆市渝北区龙溪镇国宾城12栋</span>
63             <i class="el-icon-caret-bottom"></i>
64           </div>
65         </div>
2621fe 66         <div class="two">
7f5659 67           <el-date-picker
C 68             v-model="value1"
69             type="daterange"
70             range-separator="至"
71             start-placeholder="开始日期"
72             end-placeholder="结束日期"
73           >
74           </el-date-picker>
75         </div>
76       </div>
77       <div class="four">
2621fe 78           <div class="one"></div>
C 79           <div class="two">
7f5659 80               <span>数量:1</span>
C 81               <el-button icon="el-icon-close" size="mini" title="删除"></el-button>
82               <el-button icon="el-icon-document-copy" size="mini" title="复制"></el-button>
83               <span>¥300.00</span>
84           </div>
85       </div>
86     </div>
87     <div class="money">
88       <span>拼车价:</span>
89       <span>¥300.00</span>
90     </div>
91   </div>
92 </template>
93 <script>
94 export default {};
95 </script>
96 <style lang="less" scoped>
97 .car-shar {
98   font-size: 16px;
99 }
100 .car-pool-show{
101     display: flex;
102   justify-content: space-between;
103 }
2621fe 104 .oprator,.box-content,.box-content .box{
C 105   display: flex;
106   align-items: center;
107 }
108 .oprator{
109   width: 40%;
110   justify-content: space-between;
111 }
112 .box-content .box{
113   border: 1px solid #c3c3c3;
114   padding: 3px 6px;
115   border-radius: 3px;
116 }
117 .box-content .title{
118   font-weight: bold;
119 }
7f5659 120 .title{
C 121     display: flex;
2621fe 122     justify-content: space-between;
7f5659 123 }
2621fe 124 .one,.two{
C 125   display: flex;
126   flex-direction: column;
127 align-items: center;
128 justify-content: center;  
129   height: 70px;
130 }
131 .four{
132   .two{
133     flex-direction: inherit;
134   }
135   
136 }
137
7f5659 138 </style>