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