hjb_pc/pages/homeIndex/placeOrder.vue

<template>
  <div class="banner">
    <div class="nav"></div>
    <div class="main">
      <div class="tabs">
        <div :class="active === 0 ? 'standard active' : 'standard'" @click="active = 0">标准下单</div>
        <div :class="active === 1 ? 'standard active' : 'standard'" @click="active = 1">快速下单</div>
        <div :class="active === 2 ? 'standard active' : 'standard'" @click="active = 2">批量下单</div>
      </div>
      <div v-if="active === 0" class="standard-box">
        <div class="order-information">
          <div class="header">订单详情</div>
          <div class="form">
            <div class="left">
              <el-form :model="form" label-width="120px">
                <el-form-item label="配送类型">
                  <el-radio-group v-model="radio1" size="large">
                    <el-radio-button label="配送" />
                    <el-radio-button label="自提" />
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="配送类型">
                    <el-date-picker
        v-model="value1"
        type="date"
        placeholder="Pick a date"
        :default-value="new Date(2010, 9, 1)"
      />
                </el-form-item>
              </el-form>
            </div>
            <div class="right"></div>
          </div>
        </div>
      </div>
      <div v-else-if="active === 1" class="fast-box">快速下单</div>
      <div v-else class="batch">批量下单</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
const active = ref<number>(0)
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const onSubmit = () => {
  console.log('submit!')
}
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  background-color: #fff;
  .nav {
    height: 1.8333rem;
    width: 100%;
    background-color: skyblue;
  }
  .main {
    width: 6.25rem;
    margin: 0 auto;
    .tabs {
      width: 100%;
      height: 0.2083rem;
      background-color: #f3f4f8;
      display: flex;
      margin-top: 0.2344rem;
      margin-bottom: 0.1302rem;
      .standard {
        width: 0.7292rem;
        height: 100%;
        color: #252b3a;
        font-size: 0.0729rem;
        text-align: center;
        line-height: 0.2083rem;
        border-radius: 0.0313rem;
        cursor: pointer;
      }
      .active {
        color: #fff;
        background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
      }
    }
    .order-information {
      width: 100%;
      height: 3.4896rem;
      border: 1px dashed #aaa;
      margin-top: 0.1563rem;
      .header {
        background-color: #f3f4f8;
        height: 0.2083rem;
        color: #252b3a;
        font-size: 0.0833rem;
        line-height: 0.2083rem;
        padding: 0 0.2604rem;
        display: flex;
        align-items: center;
      }
      .header::before {
        content: ' ';
        display: block;
        background-color: #ff4e8d;
        width: 0.0156rem;
        height: 0.0833rem;
        margin-right: 0.026rem;
      }
      .form {
        display: flex;
        height: 100%;
        .left,
        .right {
          flex: 1;
          padding: 0.1042rem;
        }
      }
    }
  }
}
</style>