Merge branch 'test' of https://git.code.tencent.com/lian-cbtc/jl-client into test

Jenkinsfile-prd

@@ -18,6 +18,8 @@ pipeline {
         }
         stage('Publish') {
             steps {
+            	sh 'mkdir -p /usr/local/joylink/jlclient'
+				sh 'rm -rf /usr/local/joylink/jlclient/*'
                 sh 'cp -rf ./dist/* /usr/local/joylink/jlclient'
             }
         }

Jenkinsfile-test

@@ -11,12 +11,15 @@ pipeline {
                 nodejs 'nodejs-10'
             }
             steps {
+            	sh 'npm update'
                 sh 'npm install'
                 sh 'npm run test'
             }
         }
         stage('Publish') {
             steps {
+            	sh 'mkdir -p /usr/local/joylink/jlclient'
+            	sh 'rm -rf /usr/local/joylink/jlclient/*'
                 sh 'cp -rf ./dist/* /usr/local/joylink/jlclient'
             }
         }

src/api/competition.js

@@ -310,3 +310,11 @@ export function getCompetitionPracticalSceneById(id) {
     });
 }
 
+/** 更新步骤数据 */
+export function updateCompetitionPracticalStep(data) {
+    return request({
+        url: `/api/v1/competitionPractical/detail`,
+        method: 'POST',
+        data
+    });
+}

src/views/drts/scene/index.vue

@@ -3,7 +3,7 @@
     <query-list-page ref="user" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
     <create-scene ref="createScene" title="创建场景" :script-list="scriptList" @reloadTable="reloadTable" />
     <create-scene ref="updateScene" title="更新场景" :script-list="scriptList" @reloadTable="reloadTable" />
-    <modify-step ref="modifyStep" title="更新场景" />
+    <modify-step ref="modifyStep" title="编辑步骤数据" />
     <!-- <update-scene ref="modifyScene" :script-list="scriptList" @reloadTable="reloadTable" /> -->
   </div>
 </template>

src/views/drts/scene/modify.vue

@@ -1,48 +1,126 @@
 <template>
-  <el-dialog :title="title" :visible.sync="dialogVisible" width="1200px" :before-close="doClose" center custom-class="sceneModifyOut">
+  <el-dialog :title="title" :visible.sync="dialogVisible" width="1200px" :before-close="doClose" top="50px" center custom-class="sceneModifyOut">
     <el-form ref="form" :model="formModel" label-width="120px" class="sceneModify">
       <!-- :rules="rules"  -->
-      <el-table :data="actionList" border style="width: 661px;">
+      <el-table :data="actionList" border style="width:100%;" height="550" :span-method="objectSpanMethod">
         <el-table-column label="步骤名称" width="100">
-          {{ '' }}
+          <template slot-scope="scope">
+            <div v-if="stepVOs[scope.row.id]">
+              {{ stepVOs[scope.row.id].description||'' }}
+            </div>
+          </template>
         </el-table-column>
         <el-table-column label="动作内容" width="300">
           <template slot-scope="scope">
             <!-- v-model="scope.row.id"  -->
-            <el-checkbox v-if="isModify" class="checkBoxAction" />
+            <el-checkbox v-if="isModify" v-model="checkBoxActionList[scope.row.id].status" :disabled="checkBoxActionList[scope.row.id].disabled" class="checkBoxAction" @change="((val)=>{changeSelectActionId(val, scope.row.id, scope.$index)})" />
-            <div>{{ covert(scope.row) }}</div>
+            <div v-if="dialogVisible">{{ covert(scope.row) }}</div>
           </template>
         </el-table-column>
         <el-table-column label="语音识别关键词列表" width="300">
           <template slot-scope="scope">
-            <div v-if="formModel.commandEvaluationRuleVOs[scope.row.id]&&formModel.commandEvaluationRuleVOs[scope.row.id].keyWords">
+            <div v-if="commandEvaluationRuleVOs[scope.row.id]&&commandEvaluationRuleVOs[scope.row.id].keyWords">
-              <el-tag v-for="(tag,index) in formModel.commandEvaluationRuleVOs[scope.row.id].keyWords" :key="index" closable :disable-transitions="false" @close="handleClose(scope.$index,index)">{{ tag }}</el-tag>
+              <el-tag v-for="(tag,index) in commandEvaluationRuleVOs[scope.row.id].keyWords" :key="index" closable :disable-transitions="false" @close="handleClose(scope.row.id,index)">{{ tag }}</el-tag>
               <el-input
-                v-if="formModel.commandEvaluationRuleVOs[scope.row.id].inputVisible"
+                v-if="commandEvaluationRuleVOs[scope.row.id].inputVisible"
                 :ref="'saveTagInput'+scope.row.id"
-                v-model="formModel.commandEvaluationRuleVOs[scope.row.id].inputValue"
+                v-model="commandEvaluationRuleVOs[scope.row.id].inputValue"
                 size="small"
                 class="input-new-tag"
                 @keyup.enter.native="handleInputConfirm(scope.row.id)"
                 @blur="handleInputConfirm(scope.row.id)"
               />
-              <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row.id)">add添加</el-button>
+              <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row.id)">添加</el-button>
             </div>
             <div v-else>
               <el-button class="button-new-tag" size="small" @click="addKeyWord(scope.row.id)">添加</el-button>
             </div>
-            <!-- scope.$index; -->
-
-            <!--  -->
-
           </template>
-          <!-- keyWords -->
-          <!-- formModel.commandEvaluationRuleVOs[] -->
         </el-table-column>
-        <!-- <el-form-item :prop="'stepVOs+[' + scope.$index + '].startActionId'">
+        <el-table-column label="总分值" width="149">
-             </el-form-item> -->
+          <template slot-scope="scope">
+            <div v-if="commandEvaluationRuleVOs[scope.row.id]&&commandEvaluationRuleVOs[scope.row.id].score!=undefined">
+              <el-input-number
+                v-if="commandEvaluationRuleVOs[scope.row.id].scoreVisible"
+                :ref="'saveScoreInput'+scope.row.id"
+                v-model="commandEvaluationRuleVOs[scope.row.id].score"
+                :min="0"
+                size="small"
+                :max="Infinity"
+                :step="1"
+                @keyup.enter.native="handleScoreConfirm(scope.row.id)"
+                @blur="handleScoreConfirm(scope.row.id)"
+              />
+              <div v-else style="cursor:pointer" @click="modifyScore(scope.row.id)">
+                {{ commandEvaluationRuleVOs[scope.row.id].score }}
+              </div>
+            </div>
+            <div v-else>
+              <el-button class="button-new-tag" size="small" @click="addScore(scope.row.id)">编辑</el-button>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="超时时间" width="150">
+          <template slot-scope="scope">
+            <div v-if="commandEvaluationRuleVOs[scope.row.id]&&commandEvaluationRuleVOs[scope.row.id].timeOut!=undefined">
+              <el-input-number
+                v-if="commandEvaluationRuleVOs[scope.row.id].timeOutVisible"
+                :ref="'saveTimeOutInput'+scope.row.id"
+                v-model="commandEvaluationRuleVOs[scope.row.id].timeOut"
+                :min="0"
+                size="small"
+                :max="Infinity"
+                :step="1"
+                @keyup.enter.native="handleTimeOutConfirm(scope.row.id)"
+                @blur="handleTimeOutConfirm(scope.row.id)"
+              />
+              <div v-else style="cursor:pointer" @click="modifyTimeOut(scope.row.id)">
+                {{ commandEvaluationRuleVOs[scope.row.id].timeOut }}
+              </div>
+            </div>
+            <div v-else>
+              <el-button class="button-new-tag" size="small" @click="addTimeOut(scope.row.id)">编辑</el-button>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="扣除分值" width="150">
+          <template slot-scope="scope">
+            <div v-if="commandEvaluationRuleVOs[scope.row.id]&&commandEvaluationRuleVOs[scope.row.id].deductScore!=undefined">
+              <el-input-number
+                v-if="commandEvaluationRuleVOs[scope.row.id].deductScoreVisible"
+                :ref="'saveDeductScoreInput'+scope.row.id"
+                v-model="commandEvaluationRuleVOs[scope.row.id].deductScore"
+                :min="0"
+                size="small"
+                :max="Infinity"
+                :step="1"
+                @keyup.enter.native="handleDeductScoreConfirm(scope.row.id)"
+                @blur="handleDeductScoreConfirm(scope.row.id)"
+              />
+              <div v-else style="cursor:pointer" @click="modifyDeductScore(scope.row.id)">
+                {{ commandEvaluationRuleVOs[scope.row.id].deductScore }}
+              </div>
+            </div>
+            <div v-else>
+              <el-button class="button-new-tag" size="small" @click="addDeductScore(scope.row.id)">编辑</el-button>
+            </div>
+          </template>
+        </el-table-column>
       </el-table>
     </el-form>
+    <div style="margin-top:15px;">
+      <el-button v-if="!isModify" type="primary" @click="doModifyDes">编辑步骤描述</el-button>
+      <el-button v-if="isModify" type="success" @click="cancleModifyDes">取消编辑步骤描述</el-button>
+    </div>
+    <step-description
+      ref="addStepDescription"
+      @cancleDescription="cancleDescription"
+      @submitDescription="submitDescription"
+    />
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="doUpdate">{{ $t('global.confirm') }}</el-button>
+      <el-button @click="doClose">{{ $t('global.cancel') }}</el-button>
+    </span>
   </el-dialog>
 </template>
 <script>
@@ -50,10 +128,15 @@
 import ConstConfig from '@/scripts/ConstConfig';
 import Cookies from 'js-cookie';
 import {getScriptByIdNew} from '@/api/script';
+import StepDescription from './stepDescription';
 import {covertOperate} from '@/views/newMap/displayNew/scriptDisplay/component/covertOperation';
+import {updateCompetitionPracticalStep, getCompetitionPracticalSceneById} from '@/api/competition';
 import {getPublishMapDetailById} from '@/api/jmap/map';
 export default {
     name:'ModifyStep',
+    components:{
+        StepDescription
+    },
     props: {
         title:{
             type: String,
@@ -68,18 +151,55 @@ export default {
             dialogVisible:false,
             actionList:[],
             memberList:[],
-            formModel:{
+            checkBoxActionList:[],
             commandEvaluationRuleVOs:{},
+            currentstepAction:[],
+            startArray:[],
+            endArray:[],
+            stepVOs:{},
+            formModel:{
+                id:'',
+                name:'',
+                main:true,
+                description:'',
+                disposalProcesses:'',
+                operationScore:'',
+                scriptId:'',
+                commandEvaluationRuleVOs:[],
                 stepVOs:[],
                 operationStatisticVOs:[]
+
             }
         };
     },
     methods:{
         doShow(row) {
             // 加载剧本数据
+            this.formModel.id = row.id;
+            this.formModel.name = row.name;
+            this.formModel.main = row.main;
+            this.formModel.description = row.description;
+            this.formModel.disposalProcesses = row.disposalProcesses;
+            this.formModel.operationScore = row.operationScore;
+            this.formModel.scriptId = row.scriptId;
             getScriptByIdNew(row.scriptId).then(res=>{
                 this.actionList = res.data.actionList;
+                getCompetitionPracticalSceneById(row.id).then(response=>{
+                    const commandEvaluationRuleVOs = {};
+                    response.data.commandEvaluationRuleVOs.forEach(data=>{
+                        commandEvaluationRuleVOs[data.actionId] = data;
+                    });
+                    const stepVOs = {};
+                    response.data.stepVOs.forEach(data=>{
+                        stepVOs[data.startActionId] = data;
+                        const dataIndex = this.actionList.findIndex((value, index, arr)=>{ return value.id == data.startActionId; });
+                        const dataIndex1 = this.actionList.findIndex((value, index, arr)=>{ return value.id == data.endActionId; });
+                        this.startArray.push(dataIndex);
+                        this.endArray.push(dataIndex1);
+                    });
+                    this.commandEvaluationRuleVOs = commandEvaluationRuleVOs;
+                    this.stepVOs = stepVOs;
+                });
                 // 加载地图数据
                 getPublishMapDetailById(res.data.mapId).then(resp => {
                     this.$store.dispatch('map/setMapData', resp.data);
@@ -125,8 +245,8 @@ export default {
         },
         doClose() {
             // this.$refs.dataform.resetForm();
-            this.$store.dispatch('map/mapClear');
             this.dialogVisible = false;
+            this.$store.dispatch('map/mapClear');
         },
         covert(element) {
             const member = this.memberList[element.memberId];
@@ -171,31 +291,197 @@ export default {
             }
             return resultData;
         },
-        addKeyWord(actionId) {
+        initCommandEvaluationRuleVOs(actionId) {
-            // debugger;
+            if (!this.commandEvaluationRuleVOs[actionId]) {
-            if (!this.formModel.commandEvaluationRuleVOs[actionId]) {
+                this.$set(this.commandEvaluationRuleVOs, actionId, {});
-                this.formModel.commandEvaluationRuleVOs[actionId] = {};
+                this.$set(this.commandEvaluationRuleVOs[actionId], 'actionId', actionId);
             }
-            this.formModel.commandEvaluationRuleVOs[actionId].inputValue = '';
+        },
-            this.formModel.commandEvaluationRuleVOs[actionId].keyWords = [];
+        addKeyWord(actionId) {
-            this.formModel.commandEvaluationRuleVOs[actionId].inputVisible = true;
+            this.initCommandEvaluationRuleVOs(actionId);
-            // this.$nextTick(_ => {
+            this.$set(this.commandEvaluationRuleVOs[actionId], 'inputValue', '');
-            //     this.$refs['saveTagInput' + actionId].$refs.input.focus();
+            this.$set(this.commandEvaluationRuleVOs[actionId], 'keyWords', []);
-            // });
+            this.$set(this.commandEvaluationRuleVOs[actionId], 'inputVisible', true);
+            this.$nextTick(_ => {
+                this.$refs['saveTagInput' + actionId].$refs.input.focus();
+            });
+        },
+        addScore(actionId) {
+            this.initCommandEvaluationRuleVOs(actionId);
+            this.$set(this.commandEvaluationRuleVOs[actionId], 'score', 0);
+            this.$set(this.commandEvaluationRuleVOs[actionId], 'scoreVisible', true);
+            this.$nextTick(_ => {
+                this.$refs['saveScoreInput' + actionId].$refs.input.focus();
+            });
+        },
+        addTimeOut(actionId) {
+            this.initCommandEvaluationRuleVOs(actionId);
+            this.$set(this.commandEvaluationRuleVOs[actionId], 'timeOut', 0);
+            this.$set(this.commandEvaluationRuleVOs[actionId], 'timeOutVisible', true);
+            this.$nextTick(_ => {
+                this.$refs['saveTimeOutInput' + actionId].$refs.input.focus();
+            });
+        },
+        handleTimeOutConfirm(actionId) {
+            this.$set(this.commandEvaluationRuleVOs[actionId], 'timeOutVisible', false);
+        },
+        modifyTimeOut(actionId) {
+            this.$set(this.commandEvaluationRuleVOs[actionId], 'timeOutVisible', true);
+            this.$nextTick(_ => {
+                this.$refs['saveTimeOutInput' + actionId].$refs.input.focus();
+            });
         },
         showInput(actionId) {
-            this.formModel.commandEvaluationRuleVOs[actionId].inputVisible = true;
+            this.commandEvaluationRuleVOs[actionId].inputVisible = true;
             this.$nextTick(_ => {
                 this.$refs['saveTagInput' + actionId].$refs.input.focus();
             });
         },
         handleInputConfirm(actionId) {
-            const inputValue = this.formModel.commandEvaluationRuleVOs[actionId].inputValue;
+            const inputValue = this.commandEvaluationRuleVOs[actionId].inputValue;
             if (inputValue) {
-                this.formModel.commandEvaluationRuleVOs[actionId].keyWords.push(inputValue);
+                this.commandEvaluationRuleVOs[actionId].keyWords.push(inputValue);
+            }
+            this.$set(this.commandEvaluationRuleVOs[actionId], 'inputVisible', false);
+            this.$set(this.commandEvaluationRuleVOs[actionId], 'inputValue', '');
+        },
+        handleScoreConfirm(actionId) {
+            this.$set(this.commandEvaluationRuleVOs[actionId], 'scoreVisible', false);
+        },
+        modifyScore(actionId) {
+            this.$set(this.commandEvaluationRuleVOs[actionId], 'scoreVisible', true);
+            this.$nextTick(_ => {
+                this.$refs['saveScoreInput' + actionId].$refs.input.focus();
+            });
+        },
+        handleClose(index, tagIndex) {
+            const keyWords = this.commandEvaluationRuleVOs[index].keyWords;
+            keyWords.splice(tagIndex, 1);
+        },
+        handleDeductScoreConfirm(actionId) {
+            this.$set(this.commandEvaluationRuleVOs[actionId], 'deductScoreVisible', false);
+        },
+        modifyDeductScore(actionId) {
+            this.$set(this.commandEvaluationRuleVOs[actionId], 'deductScoreVisible', true);
+            this.$nextTick(_ => {
+                this.$refs['saveDeductScoreInput' + actionId].$refs.input.focus();
+            });
+        },
+        addDeductScore(actionId) {
+            this.initCommandEvaluationRuleVOs(actionId);
+            this.$set(this.commandEvaluationRuleVOs[actionId], 'deductScore', 0);
+            this.$set(this.commandEvaluationRuleVOs[actionId], 'deductScoreVisible', true);
+            this.$nextTick(_ => {
+                this.$refs['saveDeductScoreInput' + actionId].$refs.input.focus();
+            });
+        },
+        doUpdate() {
+            let commandEvaluationRuleVOs = Object.values(this.commandEvaluationRuleVOs);
+            const stepVOs = Object.values(this.stepVOs);
+            commandEvaluationRuleVOs = commandEvaluationRuleVOs.filter(eachData=>{
+                return (eachData.keyWords && eachData.keyWords.length > 0) || eachData.timeOut || eachData.score || eachData.deductScore;
+            });
+            if (stepVOs.length > 0) {
+                stepVOs.sort(this.objectSort('startActionId'));
+                stepVOs.map((step, index)=>{
+                    step.id = index;
+                });
+            }
+            if (commandEvaluationRuleVOs.length > 0) {
+                commandEvaluationRuleVOs.map(data=>{
+                    delete data.inputValue;
+                    delete data.inputVisible;
+                    delete data.scoreVisible;
+                    delete data.timeOutVisible;
+                    delete data.deductScoreVisible;
+                });
+            }
+            this.formModel.commandEvaluationRuleVOs = commandEvaluationRuleVOs;
+            this.formModel.stepVOs = stepVOs;
+            updateCompetitionPracticalStep(this.formModel).then(res=>{
+                this.$message.success('编辑步骤信息成功');
+            }).catch(error=>{
+                this.$message.success('编辑步骤信息失败:' + error.message);
+            });
+        },
+        doModifyDes() {
+            this.actionList.forEach(action=>{
+                this.$set(this.checkBoxActionList, action.id, {status:false});
+            });
+            this.startArray.forEach((start, index)=>{
+                for (var i = start; i <= this.endArray[index]; i++) {
+                    this.$set(this.checkBoxActionList, this.actionList[i].id, {disabled:true});
+                }
+            });
+            this.isModify = true;
+        },
+        cancleModifyDes() {
+            this.isModify = false;
+        },
+        changeSelectActionId(val, actionId, index) {
+            if (val) {
+                this.currentstepAction.push({'actionId':actionId, 'index':index});
+                if (this.currentstepAction.length >= 2) {
+                    this.$refs.addStepDescription.doShow();
+                }
+            } else {
+                const data = this.currentstepAction.findIndex((value, index, arr)=>{ return value.actionId == actionId; });
+                this.currentstepAction.splice(data, 1);
+            }
+        },
+        cancleDescription() {
+            this.currentstepAction.forEach(data=>{
+                this.checkBoxActionList[data.actionId].status = false;
+            });
+            this.currentstepAction = [];
+        },
+        submitDescription(stepDescription) {
+            this.currentstepAction.sort(this.objectSort('actionId'));
+            let start, end;
+            this.currentstepAction.forEach((data, index)=>{
+                if (index % 2 == 0) {
+                    this.startArray.push(data.index);
+                    start = data.index;
+                } else {
+                    this.endArray.push(data.index);
+                    end = data.index;
+                }
+            });
+            for (var i = start; i <= end; i++) {
+                this.$set(this.checkBoxActionList, this.actionList[i].id, {disabled:true});
+            }
+            this.$set(this.stepVOs, this.currentstepAction[0].actionId, {description:stepDescription, startActionId:parseInt(this.currentstepAction[0].actionId), endActionId:parseInt(this.currentstepAction[1].actionId)});
+            this.cancleDescription();
+        },
+        objectSort(keyName) {
+            return function (objectN, objectM) {
+                var valueN = objectN[keyName];
+                var valueM = objectM[keyName];
+                if (valueN > valueM) return 1;
+                else if (valueN < valueM) return -1;
+                else return 0;
+            };
+        },
+        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+            if (this.startArray.length > 0) {
+                if (columnIndex === 0) {
+                    let rowspan = 1;
+                    let colspan = 1;
+                    for (var i = 0; i < this.startArray.length; i++) {
+                        if (rowIndex == this.startArray[i]) {
+                            rowspan = this.endArray[i] - this.startArray[i] + 1;
+                            colspan = 1;
+                        } else if (rowIndex > this.startArray[i] && rowIndex <= this.endArray[i]) {
+                            rowspan = 0;
+                            colspan = 0;
+                        }
+                    }
+                    return {
+                        rowspan:rowspan,
+                        colspan:colspan
+                    };
+                }
             }
-            this.formModel.commandEvaluationRuleVOs[actionId].inputVisible = false;
-            this.formModel.commandEvaluationRuleVOs[actionId].inputValue = '';
         }
     }
 
@@ -207,4 +493,20 @@ export default {
     float: left;
     margin-right: 8px;
 }
+.input-new-tag {
+    width: 60px;
+    margin-left: 10px;
+    margin-bottom: 10px;
+    vertical-align: bottom;
+}
+.button-new-tag{
+    margin-bottom:10px;
+}
+</style>
+<style lang="scss">
+.el-tag {
+    margin-right: 10px;
+    margin-bottom: 10px;
+    vertical-align:top;
+}
 </style>

src/views/drts/scene/stepDescription.vue

@@ -0,0 +1,92 @@
+<template>
+  <!-- <el-dialog
+    title="修改步骤名称"
+    :visible.sync="dialogShow"
+    top="50px"
+    width="350px"
+    :before-do-close="roleDoClose"
+    :close-on-click-modal="false"
+  >
+    <div>
+      <el-input v-model="stepDescription" type="text" :style="{width: '80%'}" :maxlength="80" />
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="roleDoClose">{{ $t('global.cancel') }}</el-button>
+      <el-button type="primary" @click="confirm">{{ $t('global.confirm') }}</el-button>
+    </span>
+  </el-dialog> -->
+  <div v-if="dialogShow" class="StepDescription">
+    <div class="StepDescriptionIn">
+      <div class="StepDescriptionInName">修改步骤名称</div>
+      <div class="StepDescriptionInInput">
+        <el-input v-model="stepDescription" type="text" :style="{width: '80%'}" :maxlength="80" />
+      </div>
+      <div class="StepDescription-footer">
+        <el-button @click="roleDoClose">{{ $t('global.cancel') }}</el-button>
+        <el-button type="primary" @click="confirm">{{ $t('global.confirm') }}</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+    name:'StepDescription',
+    data() {
+        return {
+            dialogShow:false,
+            stepDescription:''
+        };
+    },
+    methods:{
+        roleDoClose() {
+            this.dialogShow = false;
+            this.$emit('cancleDescription');
+        },
+        confirm() {
+            if (this.stepDescription.trim().length > 0) {
+                this.dialogShow = false;
+                this.$emit('submitDescription', this.stepDescription);
+            }
+        },
+        doShow() {
+            this.stepDescription = '';
+            this.dialogShow = true;
+        }
+    }
+};
+</script>
+<style lang="scss">
+.StepDescription{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background: rgba(0,0,0,0.7);
+    z-index: 2;
+}
+.StepDescriptionIn{
+    width: 350px;
+    background: #fff;
+    left: 50%;
+    position: absolute;
+    transform: translate(-50%,-50%);
+    top: 40%;
+    height: 240px;
+}
+.StepDescription-footer{
+    text-align: center;
+}
+.StepDescriptionInName{
+    font-size: 17px;
+    margin-top: 16px;
+    text-align: center;
+}
+.StepDescriptionInInput{
+    margin-top: 30px;
+    margin-bottom: 40px;
+    text-align: center;
+    padding: 0px 20px;
+
+}
+</style>