huoran
/
FE_bankTeaching
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

柜台，系统全屏未完成

Browse Source
20240205
e 3 years ago
parent 4365ca211c
commit 8b35dd436b
6 changed files with 175 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/App.vue
  2. 19
      src/pages/counter/list/index.vue
  3. 8
      src/pages/index/list/index.vue
  4. 14
      src/pages/manage/index/index.vue
  5. 187
      src/pages/manage/list/personal/currentAccount.vue
  6. 6
      src/store/modules/layout.js

6
src/App.vue
Unescape View File

@ -1,14 +1,18 @@
<template>
<div id="app" >
<router-view></router-view>
<vCase></vCase>
</div>
</template>
<script>
import vCase from '@/components/case'
import Setting from '@/setting';
import util from '@/libs/util';
export default {
name: 'App',
components: {
vCase
},
created () {
//在页面加载时读取localStorage里的状态信息
if (util.local.get(Setting.storeKey) ) {

19
src/pages/counter/list/index.vue
Unescape View File

@ -70,8 +70,8 @@
</div>
<img class="sth cipher-machine cp" src="@/assets/img/cipher-machine.png" alt="">
</el-tooltip>
<img class="sth employee" src="@/assets/img/employee.png" alt="">
<p class="employeeText">资料</p>
<el-tooltip placement="top" popper-class="sth-popper" offset="50">
<div slot="content">
<img src="@/assets/img/tooltip/skj.png" alt="">
@ -124,7 +124,8 @@
<button type="button">确定</button>
</div>
</el-dialog>
<div class="system" style="margin-top:-8vh" v-if="manageVisible" width="1280px">
<!-- 商业银行系统的全屏功能实现 -->
<div :class="fullScreen?'':'system'" :style="fullScreen?'margin-top:10vh':'margin-top:-8vh'" v-if="manageVisible" :width="fullScreen?'100vw':'1280px'">
<router-view></router-view>
</div>
@ -145,7 +146,8 @@ export default {
dataTitle: '',
dataVisible: false,
manageVisible:false,// 显示系统录入
checkList: []
checkList: [],
fullScreen:true,// 是否全屏显示--未写完
}
},
watch: {
@ -232,11 +234,22 @@ export default {
left: 956px;
width: 50%;
}
.employee{
top: 371px;
left: 920px;
width: 388px;
position: relative;
}
.employeeText{
position: absolute;
top: 541px;
left: 1263px;
color: #000;
transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
font-size: 18px;
}
.man{
top: 82px;
right: 150px;

8
src/pages/index/list/index.vue
Unescape View File

@ -14,12 +14,12 @@
<img class="sth company-finance" src="@/assets/img/company-finance.png" alt="">
<img class="sth personal-finance" src="@/assets/img/personal-finance.png" alt="">
<vCase></vCase>
</div>
</template>
<script>
import vCase from '@/components/case'
export default {
name: 'index',
data() {
@ -27,9 +27,7 @@ export default {
caseVisible: true,
}
},
components: {
vCase
},
mounted() {
},

14
src/pages/manage/index/index.vue
Unescape View File

@ -1,5 +1,5 @@
<template>
<div class="box">
<div class="box" :style="fullscreen?'height:calc(100vh - 60px)':'height:80vh'">
<div class="nav">
<div class="top">
<p style="margin:auto">商业银行系统</p>
@ -24,7 +24,7 @@ export default {
name: 'index',
data() {
return {
fullscreen:false,// 是否全屏--store读取
}
},
components: {
@ -68,7 +68,8 @@ export default {
}
.manage-layout{
width: calc(100% - 270px);
background: #fff;
// background: #fff;
background:transparent;
display: flex;
flex-direction: column;
.top{
@ -87,9 +88,14 @@ export default {
}
}
.manage-content{
padding: 24px 24px 0;
flex: 1;
position: relative;
.manage-view{
position: absolute;
top: 0;
bottom: 0;
background: #fff;
}
}
}
}

187
src/pages/manage/list/personal/currentAccount.vue
Unescape View File

@ -19,9 +19,9 @@
<p>开户</p>
</div>
<div class="body">
<el-row :gutter="20">
<el-row :gutter="20" style="margin:0">
<el-form ref="form" :model="form" label-width="120px">
<el-col :span="10" :offset="1">
<el-col :span="10" :offset="2">
<el-form-item label="客户号">
<el-input v-model="form.name"></el-input>
</el-form-item>
@ -46,52 +46,109 @@
</el-col>
</el-form>
</el-row>
<el-row :gutter="20">
<el-form ref="form" :model="form" label-width="120px">
<el-col :span="10" :offset="1">
<el-form-item label="账户性质">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="账户类型" required>
<el-select v-model="form.x" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="支取方式" required>
<el-select v-model="form.x" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<el-form-item label="凭证类型" required>
<el-select v-model="form.x" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="凭证号码" required>
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
</el-form>
</el-row>
<div class="add">
<el-row :gutter="20" style="margin:0">
<el-form ref="form" :model="form" label-width="120px">
<el-col :span="10" :offset="2">
<el-form-item label="账户性质">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="账户类型" required>
<el-select v-model="form.x" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="支取方式" required>
<el-select v-model="form.x" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<el-form-item label="凭证类型" required>
<el-select v-model="form.x" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="凭证号码" required>
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="凭证号码" required>
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
</el-form>
<el-button type="primary" class="addBtn" circle icon="el-icon-plus"></el-button>
</el-row>
</div>
<!-- 二级证件,最多三张，逻辑：上一张二级为填完信息不可添加第三张 v-for="(item,index) in second" :key="index" -->
<div class="add">
<el-row :gutter="20" style="margin:0;margin-top:10px">
<el-form ref="form" :model="form" label-width="120px">
<el-col :span="10" :offset="2">
<el-form-item label="账户性质">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="账户类型" required>
<el-select v-model="form.x" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="支取方式" required>
<el-select v-model="form.x" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<el-form-item label="凭证类型" required>
<el-select v-model="form.x" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="凭证号码" required>
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="凭证号码" required>
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
</el-form>
</el-row>
<el-button class="addBtn" circle icon="el-icon-close"></el-button>
</div>
<el-button @click="visible=true" type="primary" class="submitBtn">提交</el-button>
</div>
<el-button @click="visible=true" type="primary" class="submitBtn">提交</el-button>
<el-dialog
style="margin-top:10vh"
@ -128,18 +185,22 @@ export default {
visible:false,
options:[],
activeIndex:'1',
second:[// 二级卡数组
],
}
},
mounted() {
created() {
},
methods: {
handleSelect(val){
console.log(val,'xuanze');
}
},
}
};
</script>
@ -150,6 +211,7 @@ export default {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 24px 0 24px 24px;
.nav{
/deep/ .el-menu.el-menu--horizontal{
border: 0;
@ -172,10 +234,12 @@ export default {
display: flex;
align-items: center;
font-size: 20px;
padding-left: 50px;
padding-left: 0px;
margin-top: 10px;
}
.body{
margin-top: 50px;
overflow: auto;
.idCard{
border-radius: 5px;
background: #CFDDFF;
@ -185,12 +249,33 @@ export default {
font-size: 18px;
color: #6191FF;
}
.add{
position: relative;
&::after{
content: '';
display: block;
position: absolute;
right: 3%;
top: -4%;
border: 1px dashed #CFDDFF;
width: 88%;
height: 268px;
}
.addBtn{
position: absolute;
left: 0;
top: 50%;
transform: translate(50%,-50%);
font-size: 22px;
}
}
}
.submitBtn{
position: absolute;
position: relative;
width: 300px;
font-size: 18px;
height: 68px;
margin-top: 50px;
border-radius: 10px;
bottom: 10px;
left: 50%;

6
src/store/modules/layout.js
Unescape View File

@ -11,12 +11,16 @@ function isIE() {
export default {
namespaced: true,
state: {
isIE: isIE()
isIE: isIE(),
fullScreen:false,// 银行系统是否全屏
},
mutations: {
SET_IE: (state, val) => {
state.isIE = val
},
changeFullscreen:(state,val) => {
state.fullScreen = val
}
},
actions: {

Write Preview
Loading…
Cancel
Save