瀏覽代碼

电单车

panxiandiao_i 5 年之前
父節點
當前提交
371fb4483b

+ 9 - 0
src/api/HMvehicle.js

@@ -10,6 +10,15 @@ export function createHmVirtualDevice(data) {
   })
 }
 
+// 激活设备
+export function activeHmVirtualDevice(params) {
+  return request({
+    url: HMvehicleUrl + '/virtual-devices/ebike/activeDevice',
+    method: 'get',
+    params
+  })
+}
+
 // 查询设备信息
 export function queryDeviceInfo(data) {
   return request({

+ 1 - 1
src/apiConfig/api.js

@@ -6,4 +6,4 @@ export const mockUrl = 'http://10.179.24.176:8980' // 线下
 
 export const qualityUrl = 'http://10.179.209.19:8898' // 质量度量
 
-export const HMvehicleUrl = 'http://172.23.163.15:9999' // 电单车
+export const HMvehicleUrl = 'http://10.96.113.197:9999' // 电单车

+ 1 - 3
src/layout/components/AppMain.vue

@@ -1,9 +1,7 @@
 <template>
   <section class="app-main">
     <transition name="fade-transform" mode="out-in">
-      <keep-alive>
-        <router-view :key="key" />
-      </keep-alive>
+      <router-view :key="key" />
     </transition>
   </section>
 </template>

+ 1 - 1
src/views/projectManage/projectList/projectCreate.vue

@@ -296,7 +296,7 @@ export default {
       background-color rgba(255,255,255,1)
       box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
       border-radius 7px
-      width 93%
+      width 96%
       margin 25px 0
       padding 29px 50px
     .block >>> .el-form-item__content

+ 1 - 3
src/views/projectManage/projectList/projectListIndex.vue

@@ -136,9 +136,7 @@ export default {
       }
       projectInit(this.queryListData).then(response => {
         this.list = response.data
-        if (response.data) {
-          this.total = response.data.length
-        }
+        this.total = response.total
         this.statusOptionss = response.query.processStatusEnumList
       })
     },

+ 1 - 1
src/views/projectManage/taskList/taskCreate.vue

@@ -317,7 +317,7 @@ export default {
       background-color rgba(255,255,255,1)
       box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
       border-radius 7px
-      width 95%
+      width 96%
       margin 20px auto
       padding 29px 50px
     .block >>> .el-form-item__content

+ 2 - 3
src/views/projectManage/taskList/taskListIndex.vue

@@ -123,9 +123,8 @@ export default {
       // 任务list
       taskListGet({ bizId: this.bizJson }).then(response => {
         this.tableData = response.data
-        if (response.data) {
-          this.total = response.data.length
-        }
+        this.total = response.total
+        this.loadingOnlineProcess = false
         // const processStatusEnumMap = this.processStatusEnumList.reduce((a, c) => {
         //   return {
         //     ...a,

+ 4 - 4
src/views/quality/qualityMeasurement.vue

@@ -800,10 +800,10 @@ export default {
     .fontScale >>> .el-table__header-wrapper .cell
       font-size 12px
       padding 0
-    .aside >>> .el-tree-node__content .el-tree-node__label
-      font-size 13px
-    .aside >>> .el-tree-node__children .el-tree-node__label
-      font-size 12px
+    // .aside >>> .el-tree-node__content .el-tree-node__label
+    //   font-size 13px
+    // .aside >>> .el-tree-node__children .el-tree-node__label
+    //   font-size 12px
     // .aside >>> .el-tree-node__children
     //   overflow auto
 </style>

+ 45 - 42
src/views/virtualDevices/HMvehicle.vue

@@ -1,22 +1,22 @@
 <template>
-  <div style="width: 100%;position: relative;">
+  <div style="width: 100%;">
     <div class="set-background">
       <div class="block">
         <el-form :model="queryCode">
           <div class="set-between">
             <div class="special-input">
-              <el-input v-model="queryCode.vehicleId" placeholder="车辆ID" clearable />
-              <el-input v-model="queryCode.ecuId" placeholder="ECUID" clearable />
-              <el-input v-model="queryCode.vehicleVersion" placeholder="车辆类型" clearable />
+              <el-input v-model="queryCode.vehicleId" size="medium" placeholder="车辆ID" clearable />
+              <el-input v-model="queryCode.ecuId" size="medium" placeholder="ECUID" clearable />
+              <el-input v-model="queryCode.vehicleVersion" size="medium" placeholder="车辆类型" clearable />
             </div>
             <div class="special-input-chose">
-              <el-select v-model="queryCode.lockStatus" placeholder="锁状态" clearable>
-                <el-option v-for="item in lockOptions" :key="item.lockStatus" :label="item.name" :value="item.lockStatus" />
+              <el-select v-model="queryCode.lockStatus" size="medium" placeholder="锁状态" clearable>
+                <el-option v-for="item in lockOptions" :key="item.lockStatusCode" :label="item.name" :value="item.lockStatusCode" />
               </el-select>
-              <el-select v-model="queryCode.isActive" placeholder="链接状态" clearable>
-                <el-option v-for="item in linkOptions" :key="item.isActive" :label="item.name" :value="item.isActive" />
+              <el-select v-model="queryCode.isActive" size="medium" placeholder="链接状态" clearable>
+                <el-option v-for="item in linkOptions" :key="item.isActiveCode" :label="item.name" :value="item.isActiveCode" />
               </el-select>
-              <el-select v-model="queryCode.cityName" filterable placeholder="城市" clearable>
+              <el-select v-model="queryCode.cityName" size="medium" filterable placeholder="城市" clearable>
                 <el-option
                   v-for="item in city"
                   :key="item.CityID"
@@ -27,8 +27,9 @@
             </div>
           </div>
           <div class="set-between">
-            <el-button type="primary" plain @click="dataQuery(queryCode)">搜索</el-button>
-            <el-button type="primary" plain @click="createdCode()">新增</el-button>
+            <el-button type="primary" size="medium" plain @click="dataQuery(queryCode)">搜索</el-button>
+            <el-button type="primary" size="medium" plain @click="createdCode()">新增</el-button>
+            <el-button type="primary" size="medium" plain @click="oneKeyCreate()">一键创建</el-button>
           </div>
         </el-form>
         <div class="set-locate">
@@ -89,15 +90,16 @@
             <el-table-column
               label="操作"
               align="center"
-              width="300"
+              width="350"
             >
               <template slot-scope="scope">
                 <div class="specail-lock">
-                  <div :class="{ 'el-icon-lock': scope.row.lockStatus === 0 ,'el-icon-unlock': scope.row.lockStatus === 1}" @click="updateLock(scope.row.ecuId, scope.row.lockStatus)" />
+                  <div :class="{ 'el-icon-lock': scope.row.lockStatus === 0 ,'el-icon-unlock': scope.row.lockStatus === 1}" @click="updateLock(scope.row.ecuId, scope.row.lockStatus, scope.row.isActive)" />
                   <div>
-                    <el-button size="mini" type="success" plain @click="activate(scope.row.ecuId, scope.row.vehicleId, 'BAT0118022210043', scope.row.imsi, scope.row.imei, scope.row.vehicleVersion, scope.row.cityName)">激活</el-button>
+                    <el-button size="mini" type="success" plain @click="activate(scope.row.ecuId)">激活</el-button>
                     <el-button size="mini" type="info" plain @click="offHmvirtual(scope.row.ecuId)">下线</el-button>
                     <el-button size="mini" type="danger" @click="dialogBug(scope.row.ecuId)">删除</el-button>
+                    <el-button size="mini" type="primary">....</el-button>
                     <el-dialog
                       :visible.sync="dialogVisible"
                       width="30%"
@@ -108,7 +110,6 @@
                         <el-button type="danger" size="mini" @click="dialogVisible = false">取 消</el-button>
                       </span>
                     </el-dialog>
-                    <el-button size="mini" type="primary">...</el-button>
                   </div>
                 </div>
               </template>
@@ -118,15 +119,12 @@
         </div>
       </div>
     </div>
-    <keep-alive>
-      <router-view />
-    </keep-alive>
   </div>
 </template>
 
 <script>
 import { cityJson } from '@/views/virtualDevices/city'
-import { createHmVirtualDevice, queryDeviceInfo, delHmVirtualDevice, offHmvirtualDevice, updateLockStatus } from '@/api/HMvehicle'
+import { createHmVirtualDevice, queryDeviceInfo, delHmVirtualDevice, offHmvirtualDevice, updateLockStatus, activeHmVirtualDevice } from '@/api/HMvehicle'
 
 export default {
   filters: {
@@ -158,21 +156,21 @@ export default {
       lockOptions: [
         {
           name: '未开启',
-          lockStatus: 0
+          lockStatusCode: 0
         },
         {
           name: '已开启',
-          lockStatus: 1
+          lockStatusCode: 1
         }
       ],
       linkOptions: [
         {
           name: '未激活',
-          isActive: 0
+          isActiveCode: 0
         },
         {
           name: '已激活',
-          isActive: 1
+          isActiveCode: 1
         }
       ]
     }
@@ -180,29 +178,20 @@ export default {
   created() {
     this._queryDeviceInfo()
   },
-  mounted() {
-    this.initWindow()
-  },
   methods: {
     _queryDeviceInfo() {
       const params = { page: this.curIndex, pageSize: this.pageSize }
       queryDeviceInfo(params).then(res => {
         res.code === 200 ? this.tableData = res.data : this.errorFun(res.msg)
+        // this.total = res.data.length
         this.loading = false
       })
     },
-    initWindow() {
-      if (!document.getElementById('window-judge')) {
-        document.getElementById('init-window').parentNode.style.overflow = 'visible'
-      } else {
-        document.getElementById('init-window').parentNode.style.overflow = 'hidden'
-      }
-    },
     dataQuery(queryCode) {
       queryCode.page = this.curIndex
       queryCode.pageSize = this.pageSize
       for (const key in queryCode) { // 接口不接受空值的处理
-        if (!queryCode[key]) {
+        if (queryCode[key] === '') {
           delete queryCode[key]
         }
       }
@@ -210,6 +199,16 @@ export default {
         res.code === 200 ? this.tableData = res.data : this.errorFun(res.msg)
       })
     },
+    oneKeyCreate() {
+      createHmVirtualDevice(this.form).then(res => {
+        if (res.code === 200) {
+          this.successFun('create')
+          this._queryDeviceInfo()
+        } else {
+          this.errorFun(res.msg)
+        }
+      })
+    },
     createdCode() {
       this.$router.push({ name: '新增电单车', params: { formData: this.form }, query: { id: this.form.id }})
     },
@@ -219,11 +218,15 @@ export default {
     handleCurrentChange(curIndex) {
       this.curIndex = curIndex
     },
-    updateLock(ecuId, lockStatus) {
+    updateLock(ecuId, lockStatus, judge) {
+      if (judge !== 1) {
+        this.errorFun('请先激活设备')
+        return
+      }
       const params = { ecuId: ecuId, lockStatus: (lockStatus + 1) % 2 }
       updateLockStatus(params).then(res => {
         this._queryDeviceInfo()
-        if (res.success === 1) {
+        if (res.code === 200) {
           this.successFun('update')
           // this._queryDeviceInfo()
         } else {
@@ -231,12 +234,14 @@ export default {
         }
       })
     },
-    activate(ecuId, vehicleId, batteryId, imsi, imei, vehicleVersion, cityName) {
-      const params = { ecuId: ecuId, vehicleId: vehicleId, batteryId: batteryId, imsi: imsi, imei: imei, vehicleVersion: vehicleVersion, cityName: cityName }
-      createHmVirtualDevice(params).then(res => {
+    activate(ecuId) {
+      const params = { ecuId: ecuId }
+      activeHmVirtualDevice(params).then(res => {
         if (res.code === 200) {
           this.successFun('activate')
-          this._queryDeviceInfo()
+          setTimeout(() => {
+            this._queryDeviceInfo()
+          }, 500)
         } else {
           this.errorFun(res.msg)
         }
@@ -309,8 +314,6 @@ export default {
       background-color #F0F2F4 !important
     .set-between
       display flex
-    .set-between >>> .el-button
-      height 40px
     .set-locate
       margin-top 40px
       .specail-lock

+ 154 - 70
src/views/virtualDevices/HMvehicleCreate.vue

@@ -1,32 +1,31 @@
 <template>
   <div class="set-background">
-    <div class="block">
-      <el-form ref="form" :model="form" :rules="serviceDataRules">
+    <el-form ref="form" :model="form" hide-required-asterisk :rules="serviceDataRules">
+      <div class="block">
         <el-form-item label="Eculd" prop="ecuId" :label-width="formLabelWidth">
-          <el-input v-model="form.ecuId" style="width: 35%;" autocomplete="off" />
-          <div class="tip"><p>以VIR开头拼接13位数字 , 示例 : VIR0419070800454</p></div>
+          <el-input v-model="form.ecuId" style="width: 35%;" autocomplete="off" placeholder="硬件中控ID" />
+          <div class="tip"><p>13位数字 , 示例 : ECA0419070800454</p></div>
         </el-form-item>
         <el-form-item label="BatteryId" prop="batteryId" :label-width="formLabelWidth">
-          <el-input v-model="form.batteryId" style="width: 35%;" autocomplete="off" />
-          <div class="tip"><p>以BAA开头拼接13位数字 , 示例 : BAA3218101509005</p></div>
+          <el-input v-model="form.batteryId" style="width: 35%;" autocomplete="off" placeholder="电池ID" />
+          <div class="tip"><p>13位数字 , 示例 : BAA3218101509005</p></div>
         </el-form-item>
         <el-form-item label="VehicleId" prop="vehicleId" :label-width="formLabelWidth">
-          <el-input v-model="form.vehicleId" style="width: 35%;" autocomplete="off" />
-          <div class="tip"><p>以9开头的8位数字 , 示例 : 92264605</p></div>
+          <el-input v-model="form.vehicleId" style="width: 35%;" autocomplete="off" placeholder="车辆ID" />
+          <div class="tip"><p>8位数字 , 示例 : 92264605</p></div>
         </el-form-item>
         <el-form-item label="Imei" prop="imei" :label-width="formLabelWidth">
-          <el-input v-model="form.imei" style="width: 35%;" autocomplete="off" />
-          <div class="tip"><p>以9开头的15位数字 , 示例 : 967047046635466</p></div>
+          <el-input v-model="form.imei" style="width: 35%;" autocomplete="off" placeholder="终端IMEI码" />
+          <div class="tip"><p>15位数字 , 示例 : 967047046635466</p></div>
         </el-form-item>
         <el-form-item label="Imsi" prop="imsi" :label-width="formLabelWidth">
-          <el-input v-model="form.imsi" style="width: 35%;" autocomplete="off" />
-          <div class="tip"><p>以9开头的15位数字 , 示例 : 960046550508466</p></div>
-        </el-form-item>
-        <el-form-item label="VehicleVersion" prop="vehicleVersion" :label-width="formLabelWidth">
-          <el-input v-model="form.vehicleVersion" style="width: 35%;" autocomplete="off" />
+          <el-input v-model="form.imsi" style="width: 35%;" autocomplete="off" placeholder="终端IMSI码" />
+          <div class="tip"><p>15位数字 , 示例 : 960046550508466</p></div>
         </el-form-item>
+      </div>
+      <div class="block">
         <el-form-item label="City" prop="cityName" :label-width="formLabelWidth">
-          <el-select v-model="form.cityName" filterable placeholder="请选择">
+          <el-select v-model="form.cityName" style="width: 35%;" filterable clearable placeholder="请选择城市">
             <el-option
               v-for="item in city"
               :key="item.CityID"
@@ -35,12 +34,36 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item label="Lat" prop="lat" :label-width="formLabelWidth">
+          <el-input v-model="form.lat" style="width: 35%;" autocomplete="off" placeholder="纬度" />
+          <div class="tip"><p>保留15位小数 , 示例 : 30.290707717493753</p></div>
+        </el-form-item>
+        <el-form-item label="Lng" prop="lng" :label-width="formLabelWidth">
+          <el-input v-model="form.lng" style="width: 35%;" autocomplete="off" placeholder="经度" />
+          <div class="tip"><p>保留15位小数 , 示例 : 120.07451533496764</p></div>
+        </el-form-item>
+      </div>
+      <div class="block">
+        <el-form-item label="VehicleVersion" :label-width="formLabelWidth">
+          <el-input v-model="form.vehicleVersion" style="width: 35%;" autocomplete="off" placeholder="整车版本" />
+          <div class="tip"><p>H1、H2等等,默认给H1</p></div>
+        </el-form-item>
+        <el-form-item label="VehicleStatus" :label-width="formLabelWidth">
+          <el-input v-model="form.vehicleStatus" style="width: 35%;" autocomplete="off" placeholder="车辆状态" />
+          <div class="tip"><p>默认给0,0-正常;1-故障;2-高危不可用;10-低危;11-高危可用</p></div>
+        </el-form-item>
+        <el-form-item label="OperationStatus" :label-width="formLabelWidth">
+          <el-input v-model="form.operationStatus" style="width: 35%;" autocomplete="off" placeholder="运营状态" />
+          <el-tooltip effect="dark" content="默认给100,100:运营中; 200:待运营-出厂; 201:待运营-库存; 202:待运营-移库; 301:停运-调度中; 304:停运-没收; 306:停运-已返厂; 307:停运-在库; 400:退出运营-报废" placement="top">
+            <div class="tip"><p>默认给100,100:运营中; 200:待运营-出厂; 201:待运营-库存 ...</p></div>
+          </el-tooltip>
+        </el-form-item>
         <el-form-item class="submit">
-          <el-button size="mini" type="primary" @click="createFormData(form)">保 存</el-button>
+          <el-button size="mini" type="primary" @click="createFormData(form)">确 认</el-button>
           <el-button size="mini" type="danger" @click="$router.go(-1)">取 消</el-button>
         </el-form-item>
-      </el-form>
-    </div>
+      </div>
+    </el-form>
   </div>
 </template>
 
@@ -56,29 +79,94 @@ export default {
       city: cityJson,
       value: '',
       serviceDataRules: {
-        imei: [{ required: true, message: '终端IMEI码必须为十五位', trigger: 'change' }],
-        ecuId: [{ required: true, message: '硬件中控ID不能为空', trigger: 'change' }],
-        vehicleId: [{ required: true, message: '车辆ID不能为空', trigger: 'change' }],
-        imsi: [{ required: true, message: '终端IMSI码不能为空', trigger: 'change' }],
-        batteryId: [{ required: true, message: '电池ID不能为空', trigger: 'change' }],
-        vehicleVersion: [{ required: true, message: '整车版本不能为空', trigger: 'change' }],
-        cityName: [{ required: true, message: '城市名称不能为空', trigger: 'change' }]
+        imei: [{ required: true, message: '终端IMEI码必须为十五位', trigger: 'blur' }],
+        ecuId: [{ required: true, message: '硬件中控ID不能为空', trigger: 'blur' }],
+        vehicleId: [{ required: true, message: '车辆ID不能为空', trigger: 'blur' }],
+        imsi: [{ required: true, message: '终端IMSI码不能为空', trigger: 'blur' }],
+        batteryId: [{ required: true, message: '电池ID不能为空', trigger: 'blur' }],
+        cityName: [{ required: true, message: '城市名称不能为空', trigger: 'blur' }],
+        lat: [{ required: true, message: '纬度不能为空', trigger: 'blur' }],
+        lng: [{ required: true, message: '经度不能为空', trigger: 'blur' }]
       }
     }
   },
   methods: {
     // 提交表单并且返回刷新
     createFormData(form) {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          createHmVirtualDevice(form).then(res => {
-            if (res.code === 200) {
-              this.successFun('create')
-              this.$router.go(-1)
-            } else {
-              this.errorFun('create')
-            }
+      if (!this.form.cityName && !this.form.lat && !this.form.lng && (this.form.ecuId || this.form.batteryId || this.form.imei || this.form.imsi || this.form.vehicleId)) {
+        console.log(1)
+        const fieldsToValidate = ['ecuId', 'batteryId', 'imei', 'imsi', 'vehicleId']
+        const _self = this
+        Promise.all(fieldsToValidate.map(item => {
+          const p = new Promise(function(resolve, reject) {
+            _self.$refs.form.validateField(item, (error) => {
+              resolve(error)
+            })
+          })
+          return p
+        })).then((data) => {
+          if (JSON.stringify(data) === '["","","","",""]') {
+            this.oneKeyCreate()
+          } else {
+            this.errorFun('还有未填写的数据')
+          }
+        // data 里是各个字段的验证错误信息, 如果为空串则认为验证通过, 如果数组里全为空串则所有验证通过
+        // 判断data 里是否全是空串
+        })
+        return
+      } else if (!this.form.ecuId && !this.form.batteryId && !this.form.imei && !this.form.imsi && !this.form.vehicleId && (this.form.cityName || this.form.lat || this.form.lng)) {
+        console.log(2)
+        const fieldsToValidate = ['cityName', 'lat', 'lng']
+        const _self = this
+        Promise.all(fieldsToValidate.map(item => {
+          const p = new Promise(function(resolve, reject) {
+            _self.$refs.form.validateField(item, (error) => {
+              resolve(error)
+            })
           })
+          return p
+        })).then((data) => {
+          if (JSON.stringify(data) === '["","",""]') {
+            this.oneKeyCreate()
+          } else {
+            this.errorFun('还有未填写的数据')
+          }
+        // data 里是各个字段的验证错误信息, 如果为空串则认为验证通过, 如果数组里全为空串则所有验证通过
+        // 判断data 里是否全是空串
+        })
+        return
+      } else if ((this.form.ecuId || this.form.batteryId || this.form.imei || this.form.imsi || this.form.vehicleId) && (this.form.cityName || this.form.lat || this.form.lng)) {
+        console.log(3)
+        const fieldsToValidate = ['ecuId', 'batteryId', 'imei', 'imsi', 'vehicleId', 'cityName', 'lat', 'lng']
+        const _self = this
+        Promise.all(fieldsToValidate.map(item => {
+          const p = new Promise(function(resolve, reject) {
+            _self.$refs.form.validateField(item, (error) => {
+              resolve(error)
+            })
+          })
+          return p
+        })).then((data) => {
+          if (JSON.stringify(data) === '["","","","","","","",""]') {
+            this.oneKeyCreate()
+          } else {
+            this.errorFun('还有未填写的数据')
+          }
+        // data 里是各个字段的验证错误信息, 如果为空串则认为验证通过, 如果数组里全为空串则所有验证通过
+        // 判断data 里是否全是空串
+        })
+        return
+      } else {
+        this.oneKeyCreate()
+      }
+    },
+    oneKeyCreate() {
+      createHmVirtualDevice(this.form).then(res => {
+        if (res.code === 200) {
+          this.successFun('create')
+          this.$router.go(-1)
+        } else {
+          this.errorFun(res.msg)
         }
       })
     },
@@ -86,7 +174,7 @@ export default {
       this.$notify({ title: 'Success', message: `${successText} Successfully`, type: 'success', duration: 2000 })
     },
     errorFun(errorText) {
-      this.$notify({ title: 'Failed', message: `${errorText} Failed`, type: 'error', duration: 2000 })
+      this.$notify({ title: 'Failed', message: errorText, type: 'error', duration: 2000 })
     }
   }
 }
@@ -98,38 +186,34 @@ export default {
     display flex
     justify-content center
     min-width 700px
-    position: absolute
-    z-index: 999
-    left 0
-    right 0
-    bottom 0
-    top 0
-    .block
-      background-color rgba(255,255,255,1)
-      box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
-      border-radius 7px
-      width 96%
-      margin 25px 0
-      padding 60px
-      min-height calc(100vh - 100px)
-    .block >>> .el-form-item__label
-      display flex
-    .block >>> .el-form-item__content
-      display flex
-    .tip
-      width 60%
-      position relative
-      text-align center
-    .tip p
-      position absolute
-      bottom 0px
-      padding 0px
-      margin 0px
-      color grey
-      height 30px
-      margin-left 15px
-    .submit
-      display flex
-      flex-direction row-reverse
-      // margin-top 60px
+  .set-background >>> .el-form
+    width 100%
+    overflow auto
+  .block
+    background-color rgba(255,255,255,1)
+    box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
+    border-radius 7px
+    width 96%
+    margin 20px auto
+    padding 29px 50px
+  .block >>> .el-form-item__label
+    display flex
+  .block >>> .el-form-item__content
+    display flex
+  .tip
+    width 60%
+    position relative
+    text-align center
+  .tip p
+    position absolute
+    bottom 0px
+    padding 0px
+    margin 0px
+    color grey
+    height 30px
+    margin-left 15px
+  .submit
+    display flex
+    flex-direction row-reverse
+    // margin-top 60px
 </style>