expressForm的更新

1 week ago · eacc4789ee
parent ee6648eef5
commit eacc4789ee
1 changed files with 131 additions and 0 deletions
--- a/frontend/src/View/user/ExpressForm.vue
+++ b/frontend/src/View/user/ExpressForm.vue
@ -0,0 +1,131 @@
+<template>
+  <el-row class="main">
+    <el-row class="send-container">
+      <el-row class="panel send-panel send-panel1">
+        <el-row class="send-container">
+          <el-button class="send-btn">寄</el-button>
+          <el-row>
+            <el-button class="btn">地址薄</el-button>
+            <el-button class="btn">智能填写</el-button>
+          </el-row>
+        </el-row>
+        <el-form label-width="auto" class="form">
+          <el-form-item label="姓名">
+            <el-input placeholder="请填写真实姓名"></el-input>
+          </el-form-item>
+          <el-form-item label="联系电话">
+            <el-input placeholder="请填写手机号码或者固话号码"></el-input>
+          </el-form-item>
+          <el-form-item label="省市区">
+            <el-input placeholder="请选择省市区"></el-input>
+          </el-form-item>
+          <el-form-item label="详细地址">
+            <el-input placeholder="请填写详细地址"></el-input>
+          </el-form-item>
+          <el-form-item label="公司名称">
+            <el-input placeholder="请填写公司名称"></el-input>
+          </el-form-item>
+        </el-form>
+      </el-row>
+      <el-row class="arrow" src="/arrow.png"></el-row>
+      <el-row class="panel send-panel send-panel1">
+        <el-row class="send-container">
+          <el-button class="send-btn receive-btn">收</el-button>
+          <el-row>
+            <el-button class="btn">地址薄</el-button>
+            <el-button class="btn">智能填写</el-button>
+          </el-row>
+        </el-row>
+        <el-form label-width="auto" class="form">
+          <el-form-item label="姓名">
+            <el-input placeholder="请填写真实姓名"></el-input>
+          </el-form-item>
+          <el-form-item label="联系电话">
+            <el-input placeholder="请填写手机号码或者固话号码"></el-input>
+          </el-form-item>
+          <el-form-item label="省市区">
+            <el-input placeholder="请选择省市区"></el-input>
+          </el-form-item>
+          <el-form-item label="详细地址">
+            <el-input placeholder="请填写详细地址"></el-input>
+          </el-form-item>
+          <el-form-item label="公司名称">
+            <el-input placeholder="请填写公司名称"></el-input>
+          </el-form-item>
+        </el-form>
+      </el-row>
+    </el-row>
+    <el-row class="panel send-panel">
+      <el-text class="send-label">寄件方式</el-text>
+      <el-row>
+        <el-radio-group>
+          <el-radio value="1">预约上门取件</el-radio>
+          <el-radio value="0">自行联系快递员取件</el-radio>
+        </el-radio-group>
+      </el-row>
+    </el-row>
+    <el-row class="panel send-panel">
+      <el-text class="confirm-btn">下单</el-text>
+    </el-row>
+  </el-row>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped>
+ .send-btn {
+   border-radius: 100%;
+   padding: 10px;
+   background-color:black;
+   color: white;
+ }
+ .receive-btn {
+   background-color: red;
+   color: white;
+ }
+ .btn {
+   background-color: white;
+ }
+ .send-container {
+   width: 100%;
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+   justify-content: space-between;
+ }
+ .panel {
+   display: flex;
+   flex-direction: column;
+   background-color: white;
+   align-items: flex-start;
+   justify-content: center;
+ }
+ .send-panel {
+   margin-top: 10px;
+   padding: 10px;
+   width: 100%;
+   line-height: 40px;
+ }
+ .send-panel1 {
+   width: 40%;
+   align-items: center;
+ }
+ .form {
+   width:80%;
+   margin-top: 10px;
+ }
+ .arrow {
+   width: 40px;
+   height: 10px;
+ }
+ .send-label {
+   font-weight: 600;
+ }
+ .confirm-btn {
+   background-color: royalblue;
+   color: white;
+ }
+
+</style>