Skip to content

V
Vue-WebDriver
Commit 1fd98377 by 郁子恒
Options

优化界面高度样式

parent 60680108
Showing with 19 additions and 37 deletions
src/App.vue
......@@ -17,8 +17,7 @@
</div>
<div style="width: 40%;display: flex; flex-direction: row;justify-content: flex-end;">
<el-button size="mini" style="width: 50px;height: 20px;margin-right: 5px;">导入任务</el-button>
<el-button size="mini" style="width: 50px;height: 20px;margin-right: 5px;"
@click="exportJson">导出任务</el-button>
<el-button size="mini" style="width: 50px;height: 20px;margin-right: 5px;" @click="exportJson">导出任务</el-button>
<el-button size="mini" style="width: 50px;height: 20px;margin-right: 15px;">保存任务</el-button>
</div>
</div>
......@@ -29,40 +28,30 @@
<span style="width: 63px;padding-left: 15px;font-size: 13px;">动作集合: </span>
<div class="scroll-container" @wheel="handleScroll" style="width: 325px;padding-left: 5px;">
<div class="scroll-content">
<span id="Breadcrumb" @click="onBreadcrumb(item)" v-for="item in currentActionsParents"
:key="item.tagId"
:style="{ color: item == currentAction ? '#68C23A!important' : '#409EFF' }">{{
item.Name
}}></span>
<span id="Breadcrumb" @click="onBreadcrumb(item)" v-for="item in currentActionsParents" :key="item.tagId" :style="{ color: item == currentAction ? '#68C23A!important' : '#409EFF' }">{{
item.Name
}}></span>
</div>
</div>
</div>
<div style="width: 10%;margin-right: 15px;display:flex;align-items: center;justify-content: flex-end;">
<el-button :disabled="state" type="primary" size="mini" style="width: 20px;height: 20px;"
@click="newAction" id="addButton">
<el-button :disabled="state" type="primary" size="mini" style="width: 20px;height: 20px;" @click="newAction" id="addButton">
<img style="width: 12px;height: 12px;" src="./assets/add.svg" id="addImg">
</el-button>
</div>
</div>
<div
style="display: flex;align-items: flex-start;justify-content: space-between;width: 460px;min-height: 36px;">
<div style="display: flex;align-items: flex-start;justify-content: space-between;width: 460px;min-height: 36px;">
<!-- 动作标签 -->
<div style="margin-bottom: 5px;margin-right: 15px;white-space: wrap;display: flex;width: 100%;">
<draggable v-model="currentAction.actions" chosenClass="chosen" forceFallback="true" group="people"
animation="1000" @start="onStart" @end="onEnd">
<draggable v-model="currentAction.actions" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">
<transition-group>
<el-tag class="boxtags" v-for="(action, index) in currentAction.actions"
@click="selectTag(action)"
:style="{ backgroundColor: action == activedAction ? '#68C23A!important' : '#409EFF' }"
:key="action.tagId">
<el-tag class="boxtags" v-for="(action, index) in currentAction.actions" @click="selectTag(action)" :style="{ backgroundColor: action == activedAction ? '#68C23A!important' : '#409EFF' }" :key="action.tagId">
<div style="display: flex;align-items: center;height: 25px;position: relative;">
<span style="min-width: 40px;display: flex;align-items: center;">
<div class="circle">{{ index + 1 }}</div>
<span style="margin-left: 2px;">{{ action.Name }}</span>
</span>
<img id="closeimg" @click="handleClose(action)"
style="width: 17px;position: absolute;top: -6px;right: -16px;"
src="./assets/close.svg">
<img id="closeimg" @click="handleClose(action)" style="width: 17px;position: absolute;top: -6px;right: -16px;" src="./assets/close.svg">
</div>
</el-tag>
</transition-group>
......@@ -71,19 +60,13 @@
</div>
<el-divider></el-divider>
<!-- 容器配置 -->
<div v-if="isShowAction">
<div
style="height: 35px;width: 100%;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid rgb(165 165 165);">
<div
style="width: 50%;height: 100%;padding-left: 15px;display: flex;align-items: center;justify-content: flex-start;">
<div v-if="isShowAction" style="height: 290px;">
<div style="height: 35px;width: 100%;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid rgb(165 165 165);">
<div style="width: 50%;height: 100%;padding-left: 15px;display: flex;align-items: center;justify-content: flex-start;">
<span style="width: 65px;">动作类型:</span>
<div>
<el-select id="eventType" name="eventType" v-model="activedAction.Alias" placeholder="请选择类型"
@change="handleChange" @visible-change="handleVisibleChange" ref="mySelect" filterable
remote>
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value">
<el-select id="eventType" name="eventType" v-model="activedAction.Alias" placeholder="请选择类型" @change="handleChange" @visible-change="handleVisibleChange" ref="mySelect" filterable remote>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
......@@ -91,8 +74,7 @@
<div style="width: 50%;height: 100%;display: flex;align-items: center;">
<span style="width: 59px;">动作名称:</span>
<div>
<el-input class="input-new-tag dongzuo" v-model="activedAction.Name" size="small"
placeholder="请输入动作名称">
<el-input class="input-new-tag dongzuo" v-model="activedAction.Name" size="small" placeholder="请输入动作名称">
</el-input>
</div>
</div>
......@@ -100,8 +82,7 @@
<div style="margin-left: 15px;margin-top: 10px;" v-if="activedAction.Alias == 'actions'">
<el-button style="width: 60px !important;height: 20px !important;" @click="toActions">进入容器</el-button>
</div>
<component :is="dynamicComponent" @dataChanged="handleDataChange" :activedAction="activedAction"
:widthResize="widthResize" v-if="activedAction.Alias !== ''">
<component :is="dynamicComponent" @dataChanged="handleDataChange" :activedAction="activedAction" :widthResize="widthResize" v-if="activedAction.Alias !== ''">
</component>
</div>
</div>
......@@ -423,7 +404,7 @@ export default {
/* 窗口整体样式 */
.tooltips {
min-width: 460px;
min-height: 460px;
min-height: 410px;
background-color: white;
border: solid #3384FF 3px;
position: fixed;
......@@ -698,4 +679,5 @@ export default {
/*选中样式*/
.chosen {
border: solid 2px #3089dc !important;
}</style>
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment