amazone/admin/pages/product.vue

<template>
  <main>
    <div class="container-fluid">

        <div class="col-sm3"></div>
        <div class="col-sm6">
          <div class="a-spacing-top-medium"></div>
          <h2 style="text-align: center">Add a new Product</h2>
          <form action="">
            <!-- Category DropDown -->
            <div class="a-spacing-top-medium">
              <label for="">Category</label>
              <select  class="a-select-option">
                <option value="1">1</option>
                <option value="2">2</option>
              </select>
            </div>

            <!-- Owner DropDown -->
            <div class="a-spacing-top-medium">
              <label for="">Owner</label>
              <select  class="a-select-option">
                <option value="1">1</option>
                <option value="2">2</option>
              </select>
            </div>

            <!-- Title input-->
            <div class="a-spacing-top-medium">
              <label for="" style="margin-bottom: 0px;">Title</label>
              <input type="text" class="a-input-text" style="width: 100%"/>
            </div>

            <!-- Price input-->
            <div class="a-spacing-top-medium">
              <label for="" style="margin-bottom: 0px;">Price</label>
              <input type="number" class="a-input-text" style="width: 100%"/>
            </div>

            <!-- Description input-->
            <div class="a-spacing-top-medium">
              <label for="" style="margin-bottom: 0px;">Description</label>
              <textarea placeholder="Provide details product description" style="width: 100%"></textarea>
            </div>

            <!-- Photo input-->
            <div class="a-spacing-top-medium">
              <label for="" style="margin-bottom: 0px;">Photo</label>
              <div class="a-row a-spacing-top-medium">
                <label class="choosefile-button">
                  <i class="fa fa-plus"></i>
                  <input type="file" />
                  <p style="margin-top: -70px">name of the</p>
                </label>
              </div>
            </div>
            <hr/>

            <!--Button-->
            <div class="a-spacing-top-large">
              <span class="a-button-register">
                <span class="a-button-text">Add Product</span>
              </span>
            </div>
          </form>
        </div>
        <div class="col-sm3"></div>

    </div>
  </main>
</template>

<script>
export default {

}
</script>