網拍後台

服製類資料建立

by applelily

HTML

<html>
<head>
  <meta charset="utf-8">
  <title>上架商品</title>
</head>
<body>

  <form action="/add-product" target="_blank" method="post">
  <div class="product-detail">
      <div class="product-detail-panel">
      <h2>
    基本資訊
    </h2>
      <!--商品圖片-->
      <div class="edit-row">
         <div class="edit-label edit-title">
          <div class="madatory">
           <span class="madatory-icon">*
           </span>
           <span>
           商品圖片：
           </span>
          </div>
        </div>

        <div class="edit-main">
           <input 
           id="item_img"
           type="file" 
           name="item_img" 
           accept="image/png, image/jpeg"  
           multiple
           required/>
           <br><br>
        </div>   
      </div>
      <!--商品名稱-->
      <div class="edit-row">
        <div class="edit-label edit-title">
            <div class="madatory">
              <span class="madatory-icon">*
              </span>
              <span>
                商品名稱：
              </span>

           </div>
           </div>
        <div class="edit-main">
           <input class="input-text input-text-height"
           style="width:500px;"
           placeholder="請輸入..."
           size="large"
           id="item_name"
           type="text"
           name="item_name"
           value=""
           min="4" max="40"
           required/>
           <p >
           輸入 4～40字
           </p>
           <br><br>

        </div>
      </div>

      <!--性別-->
      <div class="edit-row">
        <div class="edit-label edit-title">
            <div class="madatory">
              <span class="madatory-icon">*
              </span>
              <span>
                性別：
              </span>

           </div>
           </div>
        <div class="edit-main">
           <input
           id="gender_1"
           type="radio" 
           name="gender"
           value="男"
           required/>男
           <input
           id="gender_2"
...

CSS

*{
  box-sizing: border-size;
}
body{
  color: #606266;
  font-size: 18px;
  background: #f6f6f6;
}

.product-detail-panel{
  margin: 15px;
  overflow: hidden;
  padding: 24px 24px 0;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  border-radius: 6px;
}

h2{
  padding-bottom: 12px;
  border-bottom: 1px solid #dddddd;
}
.input-text{
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  border-color: #dddddd;
 
  }
  
 .input-text-height{
   height: 35px;
 }
.edit-row {
  padding-top: 10px;
  display: flex;
  justify-content: flex-start;
  margin: 10px;
}

.edit-label {
  justify-content: flex-end;
  min-height: 40px;
  text-align: right;
  color: #333;
}

.edit-title {
  flex-basis: 144px;
  margin-right: 16px;
  max-width: 144px;

}

.mandatory {
    display: inline-block;
    font-size: 14px;
}

.madatory-icon{
 margin-right: 3px;
 font-size: 8px;
 vertical-align: middle;
 color: #ee4d2d;
  
}

.edit-main{
  flex: 1;
  max-width: calc(100% - 144px - 16px);
}

.submit-button {
  font-size:15px;
  margin: 15px;
  width: 100px;
  height: 35px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  color: #fff;
  background-color: #FF4500;
  display: flex;
  justify-content: center;
  margin-left: auto; /* 将按钮置于右侧 */
}