|
@@ -13,22 +13,26 @@
|
|
|
{{ tab.title }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <vue-scroll class="tab-content" :class="tabClass" v-if="activeTabSettings === 0"
|
|
|
- :style="{ height: '85vh', marginLeft: '-1.4vw', marginTop: '5vh' }">
|
|
|
+ <vue-scroll class="tab-content-card" :class="tabClass" v-if="activeTabSettings === 0"
|
|
|
+ :style="{ height: '60vh', marginLeft: '-1.4vw', marginTop: '0vh' }">
|
|
|
<div class="tab-detail">
|
|
|
<my-table class="my-tab" :columns="issueColumns" :table-data="issueTableData" :handleDelete="handleDeleteCard"
|
|
|
:handleEdit="handleEditCard" :handleAdd="handleAddCard"></my-table>
|
|
|
</div>
|
|
|
<div class="item-detail">
|
|
|
- <div class="detail-text">卡号配置</div>
|
|
|
- <input placeholder="1" v-model="valueCardId" class="text-input" :style="{ left: '2vw', top: '10vh' }"
|
|
|
- ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
|
|
|
- <input placeholder="人卡" v-model="valueCardType" class="text-input" :style="{ left: '3vw', top: '10vh' }"
|
|
|
- ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
|
|
|
- <input placeholder="45%" v-model="valueBattery" class="text-input" :style="{ left: '2vw', top: '14vh' }"
|
|
|
- ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
|
|
|
- <el-button class="cancel-button" @click="clickCancel">取消</el-button>
|
|
|
- <el-button class="done-button" @click="clickOK">确定</el-button>
|
|
|
+ <div>
|
|
|
+ <div class="detail-text">卡号配置</div>
|
|
|
+ <input placeholder="1" v-model="valueCardId" class="text-input" :style="{ left: '2vw', top: '10vh' }"
|
|
|
+ ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
|
|
|
+ <input placeholder="人卡" v-model="valueCardType" class="text-input" :style="{ left: '3vw', top: '10vh' }"
|
|
|
+ ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
|
|
|
+ <input placeholder="45%" v-model="valueBattery" class="text-input" :style="{ left: '2vw', top: '14vh' }"
|
|
|
+ ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button class="cancel-button" @click="clickCancel">取消</el-button>
|
|
|
+ <el-button class="done-button" @click="clickOK">确定</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</vue-scroll>
|
|
|
</div>
|
|
@@ -265,10 +269,31 @@ export default {
|
|
|
height: 100%;
|
|
|
z-index: -1;
|
|
|
}
|
|
|
-
|
|
|
+.tab-detail {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 9999;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 70vw;
|
|
|
+ height: 60vh;
|
|
|
+ z-index: 3;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ border-radius: 2.08vw;
|
|
|
+}
|
|
|
+.item-detail {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 9999;
|
|
|
+ top: 0;
|
|
|
+ left: 72vw;
|
|
|
+ width: 25vw;
|
|
|
+ height: 60vh;
|
|
|
+ z-index: 3;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ border-radius: 2.08vw;
|
|
|
+}
|
|
|
.my-tab {
|
|
|
width: 70vw;
|
|
|
- height: 70vh;
|
|
|
+ height: 60wh;
|
|
|
}
|
|
|
|
|
|
.tabListBoxSettings {
|
|
@@ -278,4 +303,27 @@ export default {
|
|
|
// padding-top: 11.29vh;
|
|
|
padding-top: 2vh;
|
|
|
}
|
|
|
+.done-button {
|
|
|
+ width: 11.6vw;
|
|
|
+ height: 4.25vh;
|
|
|
+ line-height: 4.25vh;
|
|
|
+ background: linear-gradient(180deg, #83cbfb 0%, #2e74b2 100%);
|
|
|
+ border-radius: 67px 67px 67px 67px;
|
|
|
+ opacity: 1;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
+ color: #fff;
|
|
|
+ right: 0.93vw;
|
|
|
+}
|
|
|
+
|
|
|
+.cancel-button {
|
|
|
+ width: 11.6vw;
|
|
|
+ height: 4.25vh;
|
|
|
+ line-height: 4.25vh;
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
+ border-radius: 67px 67px 67px 67px;
|
|
|
+ opacity: 1;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
+ color: #fff;
|
|
|
+ left: 0.93vw;
|
|
|
+}
|
|
|
</style>
|