css

liukangdong

2024-05-22 d836f9914d8d838c5991157006682c3e39d22716

 admin/src/views/platform/index.vue

@@ -1,9 +1,10 @@
<template>
  <div class="main_app">
    <div class="df_ac mb20">
      <el-select v-model="currentPlatform" class="w300">
        <el-option v-for="item in platformList" :key="item.id"></el-option>
      </el-select>
    <div class="main_head mb20">
      <el-tabs v-model="currentPlatform" class="tabs">
        <!-- <el-tab-pane label="用户管理" name="first" v-for="item in platformList" :key="item.id"></el-tab-pane> -->
        <el-tab-pane label="用户管理" name="first"></el-tab-pane>
      </el-tabs>
      <el-button type="primary" class="ml20" @click="handleSet"
        >配置月台</el-button
      >
@@ -12,47 +13,68 @@
    <div class="platform_list">
      <div class="item" v-for="i in 2">
        <div class="head">
          <div class="name">6号月台</div>
          <div class="status">
            <span class="green">作业中</span>
            <span class="">作业：1</span>
            <span>叫号：1</span>
            <span>等待：1</span>
            <span class="red">异常：1</span>
          <div class="left">
            <div class="status mr10">作业中</div>
            <div class="name">6号月台</div>
            <div class="ite">
              <span class="placeholder9">作业：</span><span>1</span>
            </div>
            <div class="ite">
              <span class="placeholder9">作业：</span><span>1</span>
            </div>
            <div class="ite">
              <span class="placeholder9">作业：</span><span class="red">1</span>
            </div>
          </div>
          <el-button type="primary">叫号</el-button>
        </div>
        <div class="info" v-for="j in 3">
          <div class="line">
            <div class="left">
              <span class="plate mr20">皖A12122</span>
              <span class="placeholder9">驾驶员</span>
              <span>王某某</span>
              <span>18888888888</span>
            </div>
            <div class="right">
              <span class="green">作业中</span>
              <span class="placeholder9 ml20">作业时长：23分钟26秒</span>
            </div>
          </div>
          <div class="line">
            <div class="left">
              <div>
                <span>运输单号</span
                ><span class="ml10 placeholder9">1231231</span>
        <div class="list">
          <div class="info" v-for="j in 3">
            <div class="line">
              <div class="left">
                <span class="plate">皖A12122</span>
              </div>
              <div>
                <span>总运输量</span
                ><span class="ml10 placeholder9">3000万支</span
                ><span class="primaryColor ml10 pointer" @click="isShowDetail = true">运单详情</span>
              <div class="right">
                <span class="green">作业中</span>
                <span class="green ml20">23分钟26秒</span>
              </div>
            </div>
            <div class="right">
              <el-button type="primary" @click="handleFinish()"
                >作业完成</el-button
              >
              <el-button plain>转移月台</el-button>
              <el-button plain>异常挂起</el-button>
            <div class="line">
              <div class="ite">
                <span>运输单号：</span>
                <span>202020</span>
              </div>
              <div class="ite">
                <span>驾驶员：</span>
                <span>202020</span>
              </div>
              <div class="ite">
                <span>手机号：</span>
                <span>202020</span>
              </div>
              <div class="ite">
                <span>总运输量：</span>
                <span>202020</span>
              </div>
              <div class="ite" style="width: 66.6%">
                <span>运输公司：</span>
                <span>20202dasd玩儿玩儿玩儿额外 额外0</span>
              </div>
              <div class="ite"></div>
            </div>
            <div class="line">
              <div class="left">
                <span class="primaryColor pointer" @click="isShowDetail = true"
                  >运单详情</span
                >
              </div>
              <div class="right">
                <el-button type="primary" @click="handleFinish()"
                  >作业完成</el-button
                >
                <el-button plain>转移月台</el-button>
                <el-button plain>异常挂起</el-button>
              </div>
            </div>
          </div>
        </div>
@@ -69,7 +91,7 @@
        <div class="mb20">
          <div class="title">入库月台组</div>
          <div class="list">
            <div class="item">1号月台</div>
            <div class="item active">1号月台</div>
            <div class="item">2号月台</div>
            <div class="item">1号月台</div>
            <div class="item">2号月台</div>
@@ -93,42 +115,38 @@
    <!-- 运单详情 -->
    <el-dialog
      title="运单详情"
      center
      :visible.sync="isShowDetail"
      width="420px"
    >
      <div class="detail_modal">
        <div class="head">
          <div class="line">
            <span class="ccc">运输单号</span>
            <span>28282</span>
          </div>
          <div class="line">
            <span class="ccc">运输车辆</span>
            <span>皖A12122</span>
          </div>
          <div class="line">
            <span class="ccc">驾驶员</span>
            <span>王德发</span>
            <span>1888888</span>
          </div>
          <div class="line">
            <span class="ccc">总运输量</span>
            <span>28282万支</span>
          <div class="plate">皖A12122</div>
          <div class="list">
            <div class="item">
              <span>运输单号：</span>
              <span>22222</span>
            </div>
            <div class="item">
              <span>总运输量：</span>
              <span>22222</span>
            </div>
            <div class="item">
              <span>驾驶员：</span>
              <span>22222</span>
            </div>
          </div>
        </div>
        <div class="title">合同列表</div>
        <div class="content">
          <div class="item">
            <div class="line">
              <div>合同号：1292992</div>
              <div class="address">收货地：address</div>
            </div>
            <div class="line">
              <div>物料名称：黄山</div>
              <div>数量：700</div>
            </div>
            <div class="line">
              <div>物料名称：黄山</div>
              <div>数量：200</div>
            <div class="contract">合同号：1292992</div>
            <div class="placeholder6">收货地：address</div>
            <div class="list">
              <div class="line">
                <div class="left"><span>物料名称：</span><span>黄山</span></div>
                <div class="right"><span>数量：</span><span>100</span></div>
              </div>
            </div>
          </div>
        </div>
@@ -154,6 +172,7 @@
    }
  },
  methods: {

    handleFinish(item) {
      this.$confirm('高架库6号月台 皖A12345 作业结束', '温馨提示', {
        confirmButtonText: '确定',
@@ -173,51 +192,97 @@
<style lang="scss" scoped>
.platform_list {
  .item {
    padding: 16px 24px;
    /* padding: 16px 24px; */
    background: #ffffff;
    border-radius: 2px;
    border: 2px solid #cccccc;
    border: 1px solid #dfe2e8;
    margin-bottom: 12px;
    .head {
      display: flex;
      justify-content: space-between;
      .name {
        font-size: 16px;
      }
      .status {
      align-items: center;
      height: 50px;
      background: linear-gradient(270deg, #ffffff 0%, #ebf6f7 100%);
      border-radius: 2px 2px 0px 0px;
      padding: 0 28px;
      .left {
        flex: 1;
        margin-left: 50px;
        span {
        display: flex;
        align-items: center;
        .name {
          font-size: 16px;
          margin-right: 50px;
        }
        .status {
          line-height: 25px;
          height: 25px;
          padding: 0 4px;
          background: #00ba67;
          border-radius: 2px;
          color: #ffffff;
        }
        .ite {
          margin-right: 30px;
        }
      }
    }
    .info {
    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 10px;
      border: 1px solid #999999;
      padding: 6px 8px;
      border-radius: 2px;
      margin-bottom: 10px;
      .line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6px;
        .left {
          .plate {
            border: 1px solid #4969f6;
            border-radius: 2px;
            padding: 0 5px;
          }
        }
        .right {
      padding: 16px;
      .info {
        background: #effbf5;
        border-radius: 2px;
        border: 1px solid #dfe2e8;
        padding: 16px;
        border-radius: 2px;
        margin-bottom: 10px;
        width: 30%;
        .line {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          margin-bottom: 6px;
          span {
            &:nth-child(1) {
              color: #999999;
            }
          }
          .ite {
            width: 33.3%;
            margin-top: 8px;
          }
          .left {
            .plate {
              font-size: 15px;
              color: #111111;
              padding: 4px 5px;
              font-weight: 700;
              border: 1px solid #279baa;
              background-color: #fff;
            }
          }
          .right {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
}

.main_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tabs {
    flex: 1;
  }
}
/*  */
.set_modal {
  .title {
@@ -233,33 +298,97 @@
      cursor: pointer;
      width: 30%;
      height: 32px;
      background-color: #d9d9d9;
      border: 1px solid #4d99a7;
      border: 1px solid #dfe2e8;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6px;
      border-radius: 2px;
      margin-bottom: 12px;
    }
    .active {
      background: rgba(39, 155, 170, 0.06);
      border: 1px solid #279baa;
      color: #279baa;
    }
  }
}
/*  */
.detail_modal {
  font-size: 12px;
  color: #282828;
  .head {
    border-bottom: 1px solid #999999;
  }
  .item {
    border-bottom: 1px solid #999999;
  }
  .line {
    display: flex;
    justify-content: space-between;
    .ccc{
      color: #999999;
    background: rgba(39, 155, 170, 0.05);
    border-radius: 4px;
    border: 1px solid #dfe2e8;
    padding: 16px;
    .plate {
      width: 90px;
      text-align: center;
      font-size: 15px;
      color: #111111;
      padding: 4px 5px;
      font-weight: 700;
      border: 1px solid #279baa;
      background-color: #fff;
    }
    .address {
      margin-right: 30px;
    .list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 16px;
      .item {
        width: 50%;
        margin-bottom: 8px;
        span {
          &:nth-child(1) {
            color: #666666;
          }
        }
      }
    }
  }
  .title {
    margin: 16px 0;
    font-weight: 500;
    font-size: 16px;
    color: #222222;
  }
  .content {
    .item {
      border-radius: 4px;
      border: 1px solid #dfe2e8;
      padding: 16px;
      .list {
        background: #f7f7f7;
        border-radius: 4px;
        padding: 12px 16px;
        margin-top: 10px;
      }
      .contract {
        font-weight: 500;
        font-size: 15px;
        color: #279baa;
        margin-bottom: 4px;
      }
      .line {
        display: flex;
        margin-bottom: 8px;
        &:nth-last-child(1){
          margin: 0;
        }
        div {
          span {
            &:nth-child(1) {
              color: #666666;
            }
          }
        }
        .left {
          flex: 6;
        }
        .right {
          flex: 4;
        }
      }
    }
  }
}