安装适配样式的插件和配置vite+调整页面样式

haoxuan

2024-01-22 a411e6a6e8baf3a0f0ebf6255f312669903d3754

 src/views/dashboard/components/TaskInfo.vue

@@ -12,14 +12,25 @@
    </div>
    <div class="task-info-content">
      <div class="row">
        <div class="col">工单号: {{ task.Order.workOrderId }}</div>
        <div class="col">生产数量：{{ task.Order.amount || 0 }}{{ task.Order.unit }}</div>
        <div class="col">
          工单号:
          <span>{{ task.Order.workOrderId }}</span>
        </div>
        <div class="col">
          生产数量: <span>{{ task.Order.amount || 0 }}{{ task.Order.unit }}</span>
        </div>
      </div>
      <div class="row">
        <div class="col">当前任务: {{ task.Procedure.procedure.procedureName || '' }}</div>
        <div class="col">产品名称：{{ task.Order.productName || '' }}</div>
        <div class="col">
          当前任务:
          <span>{{ task.Procedure.procedure.procedureName || '' }}</span>
        </div>
        <div class="col">
          产品名称:
          <span>{{ task.Order.productName || '' }}</span>
        </div>
      </div>
      <div class="row">计划时间: {{ planTimeText }}</div>
      <div class="row">计划时间:{{ planTimeText }}</div>
    </div>
  </div>
</template>
@@ -83,8 +94,8 @@
  background-color: $status-done;
}
.task-info-content {
  font-size: 13px;
  padding: 10px 20px;
  font-size: 12px;
  padding: 10px 15px;
  color: $text-color;
  .row {
    width: 100%;
@@ -95,6 +106,15 @@
  .col {
    width: 50%;
    flex: 1;
    span {
      width: calc(100% - 60px);
      // height:24px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      vertical-align: middle;
    }
  }
}
.active {