Skip to content

V
Vue-WebDriver
Commit cc492774 by 高源
Options

样式优化

parent 95dc7433
Showing with 45 additions and 19 deletions
src/App.vue
...@@ -10,14 +10,14 @@ ...@@ -10,14 +10,14 @@
</div> </div>
<div style="text-align: left;"> <div style="text-align: left;">
<!-- 任务信息 --> <!-- 任务信息 -->
<div style="display: flex;align-items: center;height: 25px;justify-content: space-between;margin-right: 15px;"> <div style="display: flex;align-items: center;height: 25px;justify-content: space-between;margin-right: 5px;">
<div style="width: 65%;display: flex;flex-direction: column;text-align: left;"> <div style="width: 65%;display: flex;flex-direction: column;text-align: left;">
<div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;"> <div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;">
<span style="width: 95px;padding-left: 5px;">任务名称：</span> <span style="width: 95px;padding-left: 5px;">任务名称:</span>
<el-input v-model="taskName" placeholder="请输入内容" style="height: 20px;"></el-input> <el-input v-model="taskName" placeholder="请输入内容" style="height: 20px;"></el-input>
</div> </div>
<div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;display: none;"> <div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;display: none;">
<span style="width: 95px; padding-left: 5px;">任务地址：</span> <span style="width: 95px; padding-left: 5px;">任务地址:</span>
<el-input v-model="taskAddress" placeholder="请输入内容" style="height: 20px;" disabled></el-input> <el-input v-model="taskAddress" placeholder="请输入内容" style="height: 20px;" disabled></el-input>
</div> </div>
</div> </div>
...@@ -33,14 +33,14 @@ ...@@ -33,14 +33,14 @@
<div style="height: 25px;display: flex;justify-content: flex-start;align-items: center;margin-left: 15px;"> <div style="height: 25px;display: flex;justify-content: flex-start;align-items: center;margin-left: 15px;">
<span>动作集合:</span> <span>动作集合:</span>
<div class="scroll-container" @wheel="handleScroll" style="width: 325px;"> <div class="scroll-container" @wheel="handleScroll" style="width: 325px;">
<div class="scroll-content" style="margin-left: 10px;"> <div class="scroll-content" style="margin-left: 16px;">
<span id="Breadcrumb" @click="onBreadcrumb(item)" v-for="item in currentActionsParents" :key="item.tagId" :style="{ color: item == currentAction ? '#68C23A!important' : '#409EFF' }">{{ <span id="Breadcrumb" @click="onBreadcrumb(item)" v-for="item in currentActionsParents" :key="item.tagId" :style="{ color: item == currentAction ? '#68C23A!important' : '#409EFF' }">{{
item.Name item.Name
}}></span> }}></span>
</div> </div>
</div> </div>
</div> </div>
<div style="display:flex;align-items: center;margin-right: 15px;"> <div style="display:flex;align-items: center;margin-right: 7px;">
<el-button :disabled="state" type="primary" size="mini" style="width: 20px;height: 20px;" @click="newAction"> <el-button :disabled="state" type="primary" size="mini" style="width: 20px;height: 20px;" @click="newAction">
<img style="width: 12px;height: 12px;" src="./assets/add.svg"> <img style="width: 12px;height: 12px;" src="./assets/add.svg">
</el-button> </el-button>
...@@ -539,7 +539,7 @@ export default { ...@@ -539,7 +539,7 @@ export default {
background-color: #409EFF !important; background-color: #409EFF !important;
color: #ffffff !important; color: #ffffff !important;
padding: 0 5px !important; padding: 0 5px !important;
margin-left: 12px !important; margin-left: 14px !important;
margin-top: 6px !important; margin-top: 6px !important;
font-size: 10px !important; font-size: 10px !important;
height: 25px !important; height: 25px !important;
......
src/components/collectionTable.vue
<template> <template>
<div class="collectionTable"> <div class="collectionTable">
<div style="display: flex;height: 40px;padding-left: 15px;text-align: left;align-items: center;justify-content: flex-start;"> <div
<el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag" @click="selectElement" v-if="isSelectTable">选择元素</el-button> style="display: flex;height: 40px;padding-left: 15px;text-align: left;align-items: center;justify-content: space-between;">
<el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag" @click="columnBack" v-else>返回</el-button> <template v-if="isSelectTable">
<div style="display: flex;"> <el-tooltip class="item" effect="dark" content="请右击页面元素" placement="top">
<span style="margin-left: 45px;font-size: 15px;" v-if="isSelectTable">表名:</span> <!-- <el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag"
<vxe-input style="margin-left: 10px;" v-if="isSelectTable" v-model="tableName" placeholder="请填写表名" size="mini"></vxe-input> @click="selectElement">选择元素</el-button> -->
<!-- <vxe-button icon="fa fa-plus">新增</vxe-button> -->
<el-button type="primary" size="mini" style="width: 20px;height: 20px;" @click="selectElement">
<img style="width: 12px;height: 12px;" src="../assets/add.svg">
</el-button>
</el-tooltip>
</template>
<el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag" @click="columnBack"
v-else>返回</el-button>
<div style="display: flex;align-items: center;">
<span style="margin-left: 45px;font-size: 13px;" v-if="isSelectTable">表名:</span>
<vxe-input style="margin-left: 10px;" v-if="isSelectTable" v-model="tableName" placeholder="请填写表名"
size="mini"></vxe-input>
</div> </div>
<el-button style="padding-right: 15px;" size="small" class="button-new-tag" @click="getTable" v-if="isSelectTable">获取表格信息</el-button> <!-- <el-button style="padding-right: 15px;" size="small" class="button-new-tag" @click="getTable" v-if="isSelectTable">获取表格信息</el-button> -->
<el-button size="mini" style="width: 74px;height: 20px;margin-right: 7px;" @click="getTable"
v-if="isSelectTable">获取表格信息</el-button>
</div> </div>
<!-- 全部表格信息 --> <!-- 全部表格信息 -->
<div style="overflow: auto;height: 290px;" :style="{ width: widthResize + 'px' }"> <div style="overflow: auto;height: 290px;" :style="{ width: widthResize + 'px' }">
<vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="250" v-if="isSelectTable" auto-resize style="margin-bottom: 5px;"> <vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="250"
v-if="isSelectTable" auto-resize style="margin-bottom: 5px;">
<vxe-column field="" title="列名" min-width="150"> <vxe-column field="" title="列名" min-width="150">
<template v-slot="{ row }"> <template v-slot="{ row }">
<div style="display: flex;flex-direction: column;"> <div style="display: flex;flex-direction: column;">
...@@ -32,21 +48,26 @@ ...@@ -32,21 +48,26 @@
<template v-slot="{ row }"> <template v-slot="{ row }">
<div style="display: flex;flex-direction: column;"> <div style="display: flex;flex-direction: column;">
<span>选中内容:{{ row.contentText }}</span> <span>选中内容:{{ row.contentText }}</span>
<el-select style="height: 28px;" v-model="row.type" placeholder="选择值类型" v-if="row.typeOptions.length > 1" :popper-append-to-body="false" filterable remote> <el-select style="height: 28px;" v-model="row.type" placeholder="选择值类型"
<el-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.value" :label="num.label"></el-option> v-if="row.typeOptions.length > 1" :popper-append-to-body="false" filterable remote>
<el-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.value"
:label="num.label"></el-option>
</el-select> </el-select>
<vxe-input style="width: 100% !important;" v-model="row.type" :placeholder="row.typeOptions[0].label" size="mini" v-else disabled></vxe-input> <vxe-input style="width: 100% !important;" v-model="row.type"
:placeholder="row.typeOptions[0].label" size="mini" v-else disabled></vxe-input>
</div> </div>
</template> </template>
</vxe-column> </vxe-column>
<vxe-column title="操作" min-width="70" fixed="right"> <vxe-column title="操作" min-width="70" fixed="right">
<template #default="{ row }"> <template #default="{ row }">
<vxe-button status="danger" content="删除" @click="columnDelete(row)" style="width: 50px;"></vxe-button> <vxe-button status="danger" content="删除" @click="columnDelete(row)"
style="width: 50px;"></vxe-button>
</template> </template>
</vxe-column> </vxe-column>
</vxe-table> </vxe-table>
<vxe-table :data="tableData" ref="xTable" border class="mytable-scrollbar" height="220" v-else> <vxe-table :data="tableData" ref="xTable" border class="mytable-scrollbar" height="220" v-else>
<vxe-table-column show-overflow="ellipsis" v-for="(config, index) in tableColumn" :key="index" v-bind="config"></vxe-table-column> <vxe-table-column show-overflow="ellipsis" v-for="(config, index) in tableColumn" :key="index"
v-bind="config"></vxe-table-column>
</vxe-table> </vxe-table>
</div> </div>
...@@ -282,4 +303,8 @@ export default { ...@@ -282,4 +303,8 @@ export default {
.vxe-input--inner { .vxe-input--inner {
width: 120px !important; width: 120px !important;
} }
.el-tooltip__popper.is-dark{
z-index: 99999 !important;
}
</style> </style>
\ No newline at end of file
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