system-clients 3.1.94 → 3.1.96-aode
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.js +16 -16
- package/.gradle/7.1/dependencies-accessors/dependencies-accessors.lock +0 -0
- package/.gradle/{5.2.1 → 7.1/dependencies-accessors}/gc.properties +0 -0
- package/.gradle/7.1/executionHistory/executionHistory.bin +0 -0
- package/.gradle/7.1/executionHistory/executionHistory.lock +0 -0
- package/.gradle/{4.4 → 7.1}/fileChanges/last-build.bin +0 -0
- package/.gradle/{4.4 → 7.1}/fileHashes/fileHashes.bin +0 -0
- package/.gradle/7.1/fileHashes/fileHashes.lock +0 -0
- package/.gradle/{buildOutputCleanup/built.bin → 7.1/gc.properties} +0 -0
- package/.gradle/buildOutputCleanup/buildOutputCleanup.lock +0 -0
- package/.gradle/buildOutputCleanup/cache.properties +2 -2
- package/.gradle/buildOutputCleanup/outputFiles.bin +0 -0
- package/.gradle/checksums/checksums.lock +0 -0
- package/build/webpack.base.conf.js +10 -17
- package/gradle/wrapper/gradle-wrapper.jar +0 -0
- package/gradle/wrapper/gradle-wrapper.properties +5 -0
- package/gradlew +185 -0
- package/gradlew.bat +89 -0
- package/package.json +5 -4
- package/src/components/Main.vue +30 -107
- package/src/components/equipment/EquipmentManage.vue +1 -1
- package/src/components/equipment/PcAdd.vue +5 -5
- package/src/components/equipment/PcList.vue +5 -5
- package/src/components/equipment/PhoneAdd.vue +4 -4
- package/src/components/equipment/PhoneList.vue +4 -4
- package/src/components/equipment/PosAdd.vue +45 -231
- package/src/components/equipment/PosList.vue +68 -198
- package/src/components/equipment/PosManage.vue +9 -80
- package/src/components/parammanage/ParamManage.vue +2 -2
- package/src/components/parammanage/ParamPage.vue +7 -7
- package/src/components/parammanage/SinglePage.vue +4 -4
- package/src/components/server/Login.vue +42 -48
- package/src/components/server/ResSelect.vue +0 -5
- package/src/components/server/ResSelectGroup.vue +159 -196
- package/src/components/server/RightTree.vue +257 -262
- package/src/plugins/GetLoginInfoService.js +7 -7
- package/src/styles/less/aofeng/standard.less +60 -446
- package/src/styles/less/aofeng/themeOne/BinaryTemplate.less +686 -686
- package/src/styles/less/aofeng/themeOne/systemStyle.less +6 -6
- package/src/styles/less/fonts-list.less +25 -25
- package/src/styles/less/stand.less +207 -207
- package/src/styles/less/tables.less +0 -50
- package/src/styles/less/type.less +3 -16
- package/src/styles/less/variables.less +3 -6
- package/src/system.js +0 -10
- package/static/aodelogo.png +0 -0
- package/static/aodenewlogo.png +0 -0
- package/static/{logo.png → ewmlogo.png} +0 -0
- package/.gradle/4.4/fileHashes/fileHashes.lock +0 -0
- package/.gradle/buildOutputCleanup/cache.properties.lock +0 -1
- package/src/components/TabButton.vue +0 -201
- package/src/components/Tabs.vue +0 -67
- package/src/components/equipment/PosManageBoth.vue +0 -125
- package/src/components/equipment/PosParamAdd.vue +0 -236
- package/src/components/equipment/PosParamList.vue +0 -121
- package/src/components/equipment/PosParamManage.vue +0 -51
- package/src/components/server/ImageVieweTest.vue +0 -56
- package/src/components/server/ImageViewer.vue +0 -350
- package/src/components/server/PcdBuildingSelect.vue +0 -241
- package/src/styles/less/manageStyle/manageStyle/manageChile.less +0 -180
- package/src/styles/less/manageStyle/manageStyle/manageStyle.less +0 -1102
- package/src/styles/less/manageStyle/manageStyle/safeStyle.less +0 -498
- package/static/newStyle/about-us.png +0 -0
- package/yarn-error.log +0 -6896
@@ -1,121 +0,0 @@
|
|
1
|
-
<template>
|
2
|
-
<div class="flex">
|
3
|
-
<criteria-paged :model="model" v-ref:paged>
|
4
|
-
<criteria partial='criteria' style="background-color: white" @condition-changed='$parent.selfSearch' v-ref:cri>
|
5
|
-
<div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
|
6
|
-
<div class="row">
|
7
|
-
<div class="col-sm-3 form-group">
|
8
|
-
<label class="font_normal_body">公 司</label>
|
9
|
-
<res-select restype='organization'
|
10
|
-
:is-mul="false"
|
11
|
-
@res-select="$parent.$parent.getorg"
|
12
|
-
:initresid="$parent.$parent.curorgid">
|
13
|
-
</res-select>
|
14
|
-
</div>
|
15
|
-
<div class="col-sm-3 form-group">
|
16
|
-
<label class="font_normal_body">参数名称</label>
|
17
|
-
<input type="text" class="input_search" style="width:60%" v-model="model.f_param_name"
|
18
|
-
condition="name like '%{}%'" placeholder="参数名称">
|
19
|
-
</div>
|
20
|
-
<div class="span" style="float:right;margin-top: 6px">
|
21
|
-
<button type="button" class="button_search" @click="search()" v-el:cx>查询</button>
|
22
|
-
<button type="button" class="button_search" @click="$parent.$parent.add() " v-el:cx>新增</button>
|
23
|
-
</div>
|
24
|
-
</div>
|
25
|
-
</div>
|
26
|
-
</criteria>
|
27
|
-
<data-grid :model="model" partial='list' class="list_area table_sy" v-ref:grid>
|
28
|
-
<template partial='head'>
|
29
|
-
<tr>
|
30
|
-
<th style="text-align:center;white-space:nowrap;">参数id</th>
|
31
|
-
<th style="text-align:center;white-space:nowrap;">参数名称</th>
|
32
|
-
<th style="text-align:center;white-space:nowrap;">所属分公司</th>
|
33
|
-
<th style="text-align:center;white-space:nowrap;">所属银行</th>
|
34
|
-
<th style="text-align:center;white-space:nowrap;">创建人</th>
|
35
|
-
<th style="text-align:center;white-space:nowrap;">操作</th>
|
36
|
-
</tr>
|
37
|
-
</template>
|
38
|
-
<template partial='body' :model="model">
|
39
|
-
<tr>
|
40
|
-
<td style="text-align:center;white-space:nowrap;">{{ row.f_param_id }}</td>
|
41
|
-
<td style="text-align:center;white-space:nowrap;">{{ row.name }}</td>
|
42
|
-
<td style="text-align:center;white-space:nowrap;">{{ row.f_orgname }}</td>
|
43
|
-
<td style="text-align:center;white-space:nowrap;">{{ row.f_bank_name }}</td>
|
44
|
-
<td style="text-align:center;white-space:nowrap;">{{ row.f_operator }}</td>
|
45
|
-
<td style="text-align:center;white-space:nowrap;">
|
46
|
-
<div class="col-sm-1"></div>
|
47
|
-
<div class="col-sm-4">
|
48
|
-
<button type="button" class="btn button_new" v-if="!row.sum||row.sum ===0 "
|
49
|
-
@click.stop="$parent.$parent.$parent.delete(row)">删除
|
50
|
-
</button>
|
51
|
-
</div>
|
52
|
-
<div class="col-sm-1"></div>
|
53
|
-
<div class="col-sm-4">
|
54
|
-
<button type="button" class="btn button_new"
|
55
|
-
@click.stop="$parent.$parent.$parent.modify(row)">修改
|
56
|
-
</button>
|
57
|
-
</div>
|
58
|
-
<div class="col-sm-1"></div>
|
59
|
-
</td>
|
60
|
-
</tr>
|
61
|
-
</template>
|
62
|
-
</data-grid>
|
63
|
-
</criteria-paged>
|
64
|
-
</div>
|
65
|
-
</template>
|
66
|
-
|
67
|
-
<script>
|
68
|
-
|
69
|
-
import {PagedList} from 'vue-client'
|
70
|
-
|
71
|
-
export default {
|
72
|
-
title: '终端控制',
|
73
|
-
components: {},
|
74
|
-
data() {
|
75
|
-
return {
|
76
|
-
model: new PagedList('rs/sql/get_posParam', 20),
|
77
|
-
curorgid: [this.f_filialeid],
|
78
|
-
}
|
79
|
-
},
|
80
|
-
props: [],
|
81
|
-
ready() {
|
82
|
-
this.search()
|
83
|
-
},
|
84
|
-
watch: {},
|
85
|
-
methods: {
|
86
|
-
getRes(val) {
|
87
|
-
if (val.orgobj.length === 1 && val.orgobj[0].resourcetype === 'user') {
|
88
|
-
this.$refs.paged.$refs.cri.model.f_user_operatorid = val.orgobj[0].userid
|
89
|
-
this.$refs.paged.$refs.cri.model.f_user_operator = val.orgobj[0].name
|
90
|
-
} else {
|
91
|
-
this.$refs.paged.$refs.cri.model.f_user_operatorid = ''
|
92
|
-
this.$refs.paged.$refs.cri.model.f_user_operator = ''
|
93
|
-
}
|
94
|
-
},
|
95
|
-
async delete(row) {
|
96
|
-
await this.$resetpost('rs/logic/deletePosParam', {data: row}, {rejectMsg: null, resolveMsg: null})
|
97
|
-
await this.search()
|
98
|
-
},
|
99
|
-
modify(row) {
|
100
|
-
this.$dispatch('modify', row)
|
101
|
-
},
|
102
|
-
search() {
|
103
|
-
this.$refs.paged.$refs.cri.search()
|
104
|
-
},
|
105
|
-
selfSearch(args) {
|
106
|
-
if (this.f_orgid) {
|
107
|
-
args.condition += ` and f_orgid = ${this.f_orgid} `
|
108
|
-
}
|
109
|
-
this.model.search(args.condition, this.model)
|
110
|
-
},
|
111
|
-
add() {
|
112
|
-
this.$dispatch('add', this.f_filialeid)
|
113
|
-
},
|
114
|
-
getorg(val) {
|
115
|
-
this.f_orgid = val[0]
|
116
|
-
this.f_filialeid = val[0]
|
117
|
-
}
|
118
|
-
},
|
119
|
-
computed: {}
|
120
|
-
}
|
121
|
-
</script>
|
@@ -1,51 +0,0 @@
|
|
1
|
-
<template>
|
2
|
-
<div class="flex-row">
|
3
|
-
<div :class="{'basic-main':!isChange,'binary-left':isChange}">
|
4
|
-
<pos-param-list v-ref:list></pos-param-list>
|
5
|
-
</div>
|
6
|
-
<div class="binary-right" style="margin-left: 10px; width: 40%;" v-if="isChange">
|
7
|
-
<pos-param-add :param_id="param_id" v-ref:add></pos-param-add>
|
8
|
-
</div>
|
9
|
-
</div>
|
10
|
-
</template>
|
11
|
-
<script>
|
12
|
-
|
13
|
-
import PosParamList from './PosParamList'
|
14
|
-
import PosParamAdd from './PosParamAdd'
|
15
|
-
|
16
|
-
export default {
|
17
|
-
title: 'POS终端管理',
|
18
|
-
components: {
|
19
|
-
PosParamList, PosParamAdd
|
20
|
-
},
|
21
|
-
data() {
|
22
|
-
return {
|
23
|
-
isChange: false,
|
24
|
-
param_id: ''
|
25
|
-
}
|
26
|
-
},
|
27
|
-
methods: {},
|
28
|
-
events: {
|
29
|
-
'add'() {
|
30
|
-
this.isChange = true
|
31
|
-
setTimeout(() => {
|
32
|
-
this.$refs.add.initModel()
|
33
|
-
}, 100)
|
34
|
-
},
|
35
|
-
'close'() {
|
36
|
-
this.isChange = false
|
37
|
-
},
|
38
|
-
'research'() {
|
39
|
-
this.$refs.list.search()
|
40
|
-
this.isChange = false
|
41
|
-
},
|
42
|
-
'modify'(row) {
|
43
|
-
this.isChange = true
|
44
|
-
setTimeout(() => {
|
45
|
-
this.$refs.add.curorgid = []
|
46
|
-
this.$refs.add.edit(row.f_param_id)
|
47
|
-
}, 100)
|
48
|
-
}
|
49
|
-
}
|
50
|
-
}
|
51
|
-
</script>
|
@@ -1,56 +0,0 @@
|
|
1
|
-
<template>
|
2
|
-
<div id="app">
|
3
|
-
<!-- 图片放大镜,需要自定义图片的宽高在这里传入,组件有设置默认的宽高,不传也可以 -->
|
4
|
-
<h4>这是父组件</h4>
|
5
|
-
<h4>安检总体照片</h4>
|
6
|
-
<!-- <button @click="show">显示</button>-->
|
7
|
-
<!--<img :src="src" @click="show" style="width: 80px;height: 80px" >-->
|
8
|
-
<div style="width: 500px; height: 500px;">
|
9
|
-
<button class="btn-default btn" @click="show_p">查看图片</button>
|
10
|
-
<image-viewer :src="src" :show="show_msg" @clone_f="clone_p" alt="总体安检照片"></image-viewer>
|
11
|
-
<h4>用户签名</h4>
|
12
|
-
<h4>用户签名</h4>
|
13
|
-
</div>
|
14
|
-
</div>
|
15
|
-
|
16
|
-
</template>
|
17
|
-
<script>
|
18
|
-
export default {
|
19
|
-
name: 'app',
|
20
|
-
title: '图片测试',
|
21
|
-
data () {
|
22
|
-
return {
|
23
|
-
show_msg: false,
|
24
|
-
src: [],
|
25
|
-
src1: [
|
26
|
-
{url: 'http://139.9.137.3:8400/rs/image/file/cfdf411d77df828301a56731df655f28-f_overall_path.jpg'},
|
27
|
-
{url: 'http://mp.ofweek.com/Upload/News/Img/member645/201711/17170046839337.jpg'}
|
28
|
-
],
|
29
|
-
src2: [
|
30
|
-
{url: 'http://image.buy.ccb.com/merchant/201703/904919627/1522929521661_4.jpg'}
|
31
|
-
],
|
32
|
-
src3: [
|
33
|
-
{url: 'http://d.ifengimg.com/w600/p0.ifengimg.com/pmop/2017/1213/A4037864F6728F006B67AAEC51EC8A485F320FD2_size93_w1024_h734.jpeg'}
|
34
|
-
]
|
35
|
-
}
|
36
|
-
},
|
37
|
-
methods: {
|
38
|
-
show_p () {
|
39
|
-
console.log('调用图片查看器')
|
40
|
-
// 传要查看的图片
|
41
|
-
this.src = this.src1
|
42
|
-
console.log(this.src)
|
43
|
-
// 显示组件
|
44
|
-
this.show_msg = true
|
45
|
-
},
|
46
|
-
clone_p () {
|
47
|
-
// 关闭组件
|
48
|
-
this.show_msg = false
|
49
|
-
}
|
50
|
-
}
|
51
|
-
}
|
52
|
-
</script>
|
53
|
-
|
54
|
-
<style scoped>
|
55
|
-
|
56
|
-
</style>
|
@@ -1,350 +0,0 @@
|
|
1
|
-
<!--父组件调用时需要写一个按钮和两个方法 一个方法用来显示组件和传图片 另一个方法用来关闭此组件
|
2
|
-
具体用法参照 ImageVieweTest.vue
|
3
|
-
-->
|
4
|
-
<template>
|
5
|
-
<div class="full-img" v-show="show">
|
6
|
-
<div class="bor">
|
7
|
-
<div class="magnify">
|
8
|
-
<!-- 左边产品图片区域 -->
|
9
|
-
<div class="left_contaner">
|
10
|
-
<div class="middle_img" @mouseover="boxMouseOver" @mouseleave="boxMouseLeave">
|
11
|
-
<!-- 产品图片 -->
|
12
|
-
<img :src="middleImg" alt="">
|
13
|
-
<!-- 阴影盒子 -->
|
14
|
-
<div class="shade" @mouseover="shadeMouseOver" @mousemove="shadeMouseMove" ref="shade" v-show="isShade"></div>
|
15
|
-
</div>
|
16
|
-
<div>
|
17
|
-
<!-- 缩略图容器 -->
|
18
|
-
<div class="carousel">
|
19
|
-
<!-- 缩略图展示盒子 -->
|
20
|
-
<div class="show_box">
|
21
|
-
<ul class="picture_container" ref="middlePicture">
|
22
|
-
<li class="picture_item" @mouseover="tabPicture(item)" v-for="(index , item) in src" :key="index">
|
23
|
-
<img :src="item.url" class="small_ima" alt="">
|
24
|
-
</li>
|
25
|
-
</ul>
|
26
|
-
</div>
|
27
|
-
</div>
|
28
|
-
<button class="btn_" @click="clone">关闭</button>
|
29
|
-
</div>
|
30
|
-
</div>
|
31
|
-
<!-- 右边放大区域 -->
|
32
|
-
<div class="right_contanier" v-show="isBig">
|
33
|
-
<img :src="middleImg" ref="bigImg" class="big_img" alt="">
|
34
|
-
</div>
|
35
|
-
</div>
|
36
|
-
</div>
|
37
|
-
</div>
|
38
|
-
</template>
|
39
|
-
|
40
|
-
<script>
|
41
|
-
import $ from 'jquery'
|
42
|
-
export default {
|
43
|
-
title: '图片查看器',
|
44
|
-
props: {
|
45
|
-
src: {
|
46
|
-
type: Array
|
47
|
-
},
|
48
|
-
show: {
|
49
|
-
type: Boolean,
|
50
|
-
default: false,
|
51
|
-
},
|
52
|
-
middleImgWidth: {
|
53
|
-
default: 400,
|
54
|
-
type: Number
|
55
|
-
}, // 产品图片宽
|
56
|
-
middleImgHeight: {
|
57
|
-
default: 300,
|
58
|
-
type: Number
|
59
|
-
}, // 产品图片高
|
60
|
-
thumbnailHeight: {
|
61
|
-
default: 80,
|
62
|
-
type: Number
|
63
|
-
}, // 缩略图容器高度
|
64
|
-
zoom: {
|
65
|
-
default: 2, // 缩略比例,放大比例
|
66
|
-
type: Number
|
67
|
-
},
|
68
|
-
width: {
|
69
|
-
default: 80
|
70
|
-
},
|
71
|
-
height: {
|
72
|
-
default: 60
|
73
|
-
},
|
74
|
-
alt: {
|
75
|
-
default: '图片加载失败'
|
76
|
-
},
|
77
|
-
attach: {
|
78
|
-
type: String,
|
79
|
-
default: 'name'
|
80
|
-
}
|
81
|
-
},
|
82
|
-
data () {
|
83
|
-
return {
|
84
|
-
middleImg: '', // 中图图片地址
|
85
|
-
bigImg: '', // 大图图片地址
|
86
|
-
isShade: false, // 控制阴影显示与否
|
87
|
-
isBig: false, // 控制放大图显示与否
|
88
|
-
initX: 0, // 初始clientX值
|
89
|
-
initY: 0, // 初始clientY值
|
90
|
-
leftX: 0, // 初始定位left
|
91
|
-
topY: 0, // 初始定位top
|
92
|
-
middleLeft: 0, // 当前放置小图盒子的定位left值,
|
93
|
-
itemWidth: 80 // 缩略图每张的宽度
|
94
|
-
}
|
95
|
-
},
|
96
|
-
ready () {
|
97
|
-
this.$nextTick(() => {
|
98
|
-
// 容器的高
|
99
|
-
const imgWidth = this.middleImgHeight + this.thumbnailHeight + 120
|
100
|
-
// const imgWidth = 400
|
101
|
-
// 设置容器宽高
|
102
|
-
$('.magnify').css({
|
103
|
-
width: this.middleImgWidth,
|
104
|
-
height: imgWidth
|
105
|
-
})
|
106
|
-
// 设置产品图宽高
|
107
|
-
$('.middle_img').css({
|
108
|
-
width: this.middleImgWidth,
|
109
|
-
height: this.middleImgHeight
|
110
|
-
})
|
111
|
-
// 设置移动阴影图宽高
|
112
|
-
$('.middle_img .shade').css({
|
113
|
-
width: this.middleImgWidth/this.zoom,
|
114
|
-
height: this.middleImgHeight/this.zoom
|
115
|
-
})
|
116
|
-
// 设置缩略图容器高
|
117
|
-
$('.carousel').css({
|
118
|
-
height: this.thumbnailHeight
|
119
|
-
})
|
120
|
-
// 设置每个缩略图宽
|
121
|
-
$('.picture_item').css({
|
122
|
-
width: this.itemWidth
|
123
|
-
})
|
124
|
-
// 设置放大后图片容器的宽高,left
|
125
|
-
$('.right_contanier').css({
|
126
|
-
left: this.middleImgWidth,
|
127
|
-
width: imgWidth,
|
128
|
-
height: imgWidth
|
129
|
-
})
|
130
|
-
// 设置放大图片的宽高(图片的放大倍数)
|
131
|
-
$('.right_contanier .big_img').css({
|
132
|
-
width: imgWidth * this.zoom,
|
133
|
-
height: imgWidth * this.zoom
|
134
|
-
})
|
135
|
-
})
|
136
|
-
},
|
137
|
-
methods: {
|
138
|
-
clone () {
|
139
|
-
console.log('关闭')
|
140
|
-
this.$emit('clone_f')
|
141
|
-
},
|
142
|
-
// 产品图片鼠标移入事件,显示阴影,显示大图
|
143
|
-
boxMouseOver (e) {
|
144
|
-
console.log(9999, e)
|
145
|
-
e.preventDefault();
|
146
|
-
e.stopPropagation();
|
147
|
-
this.isShade = true
|
148
|
-
this.isBig = true
|
149
|
-
// 计算阴影的位置
|
150
|
-
let x = e.offsetX - $('.shade').width()/2
|
151
|
-
let y = e.offsetY - $('.shade').height()/2
|
152
|
-
let maxLeft = $('.middle_img').width() - $('.shade').width()
|
153
|
-
let maxTop = $('.middle_img').height() - $('.shade').height()
|
154
|
-
x = x <= 0 ? 0 : x
|
155
|
-
x = x >= maxLeft ? maxLeft : x
|
156
|
-
y = y <= 0 ? 0 : y
|
157
|
-
y = y >= maxTop ? maxTop : y
|
158
|
-
|
159
|
-
$('.shade').css({
|
160
|
-
left: x,
|
161
|
-
top: y
|
162
|
-
})
|
163
|
-
|
164
|
-
},
|
165
|
-
// 鼠标在阴影移动
|
166
|
-
shadeMouseMove (e) {
|
167
|
-
e.preventDefault();
|
168
|
-
e.stopPropagation();
|
169
|
-
// console.log($('.middle_img')[0].offsetParent.clientLeft)
|
170
|
-
// console.log($('.middle_img')[0].offsetParent.offsetLeft)
|
171
|
-
// 用页面x - 父盒子的offsetLeft - 父盒子的左边框宽度
|
172
|
-
var x = this.getEventPage(e).pageX - $('.middle_img')[0].offsetParent.offsetLeft - $('.middle_img')[0].offsetParent.clientLeft;
|
173
|
-
// var x = this.getEventPage(e).pageX - 312;
|
174
|
-
// 用页面y - 父盒子的offsetTop - 父盒子的上边框宽度
|
175
|
-
// console.log($('.middle_img')[0].offsetParent.offsetTop)
|
176
|
-
var y = this.getEventPage(e).pageY - $('.middle_img')[0].offsetParent.offsetTop - $('.middle_img')[0].offsetParent.clientTop;
|
177
|
-
// var y = this.getEventPage(e).pageY - 109 ;
|
178
|
-
|
179
|
-
// 让阴影的坐标居中
|
180
|
-
x -= $('.shade').width() / 2;
|
181
|
-
y -= $('.shade').height() / 2;
|
182
|
-
|
183
|
-
// 移动边界限制
|
184
|
-
let maxLeft = $('.middle_img').width() - $('.shade').width()
|
185
|
-
let maxTop = $('.middle_img').height() - $('.shade').height()
|
186
|
-
x = x <= 0 ? 0 : x
|
187
|
-
x = x >= maxLeft ? maxLeft : x
|
188
|
-
y = y <= 0 ? 0 : y
|
189
|
-
y = y >= maxTop ? maxTop : y
|
190
|
-
// 重新赋值当前的定位值
|
191
|
-
$('.shade').css({
|
192
|
-
left: x,
|
193
|
-
top: y
|
194
|
-
})
|
195
|
-
// 计算出实时的大图的定位,首先计算出比例
|
196
|
-
// 比例为x:大图宽度/小图宽度 y: 大图高度/小图高度,将小图的定位乘以比例就是大图的定位
|
197
|
-
const xRate = $('.big_img').width() / $('.middle_img').width()
|
198
|
-
const yRate = $('.big_img').height() / $('.middle_img').height()
|
199
|
-
$('.big_img').css({
|
200
|
-
left: -x*xRate,
|
201
|
-
top: -y*yRate
|
202
|
-
})
|
203
|
-
// console.log(e, x, y, xRate, yRate, 66677)
|
204
|
-
},
|
205
|
-
// 鼠标移入阴影,去除自定义事件
|
206
|
-
shadeMouseOver (e) {
|
207
|
-
e.preventDefault();
|
208
|
-
e.stopPropagation();
|
209
|
-
// console.log(88888, e)
|
210
|
-
},
|
211
|
-
// 图片移出隐藏阴影和大图
|
212
|
-
boxMouseLeave (e) {
|
213
|
-
this.isShade = false
|
214
|
-
this.isBig = false
|
215
|
-
},
|
216
|
-
// 切换图片
|
217
|
-
tabPicture (item) {
|
218
|
-
this.middleImg = item.url
|
219
|
-
},
|
220
|
-
/**
|
221
|
-
* 获取网页滚出去的距离(包括上面滚出去的部分和左边滚出去的部分)
|
222
|
-
* @returns {{scrollTop: (Number|number), scrollLeft: (Number|number)}}
|
223
|
-
*/
|
224
|
-
getPageScroll() {
|
225
|
-
return {
|
226
|
-
scrollTop: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
|
227
|
-
scrollLeft: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
|
228
|
-
}
|
229
|
-
},
|
230
|
-
/**
|
231
|
-
* 获取事件对象点击的点,相对于文档左上角的坐标
|
232
|
-
* @param e
|
233
|
-
* @returns {{pageX: *, pageY: *}}
|
234
|
-
*/
|
235
|
-
getEventPage(e) {
|
236
|
-
return {
|
237
|
-
pageX: e.clientX + this.getPageScroll().scrollLeft,
|
238
|
-
pageY: e.clientY + this.getPageScroll().scrollTop
|
239
|
-
}
|
240
|
-
}
|
241
|
-
},
|
242
|
-
// 监听图片查看器是否打开 给产品图设默认值
|
243
|
-
watch: {
|
244
|
-
'show'(val) {
|
245
|
-
if (val) {
|
246
|
-
this.middleImg = this.src[0].url
|
247
|
-
}
|
248
|
-
}
|
249
|
-
}
|
250
|
-
}
|
251
|
-
</script>
|
252
|
-
|
253
|
-
<style scoped>
|
254
|
-
.full-img {
|
255
|
-
position: fixed;
|
256
|
-
top: 0;
|
257
|
-
bottom: 0;
|
258
|
-
left: 0;
|
259
|
-
right: 0;
|
260
|
-
z-index: 20;
|
261
|
-
background: rgba(0,0,0,0.6);
|
262
|
-
display: flex;
|
263
|
-
overflow: auto;
|
264
|
-
flex-direction: column;
|
265
|
-
justify-content: center;
|
266
|
-
align-items: center;
|
267
|
-
color: #fff;
|
268
|
-
}
|
269
|
-
.bor {
|
270
|
-
/*border: 2px solid #18D797;*/
|
271
|
-
width: 904px;
|
272
|
-
height: 504px;
|
273
|
-
}
|
274
|
-
.magnify {
|
275
|
-
position: relative;
|
276
|
-
}
|
277
|
-
.small_ima {
|
278
|
-
width: 100px;
|
279
|
-
height: 80px;
|
280
|
-
display: inline-block;
|
281
|
-
}
|
282
|
-
.left_contaner {
|
283
|
-
width: 100%;
|
284
|
-
height: 100%;
|
285
|
-
}
|
286
|
-
.left_contaner .middle_img {
|
287
|
-
border: 1px solid #ccc;
|
288
|
-
box-sizing: border-box;
|
289
|
-
position: relative;
|
290
|
-
}
|
291
|
-
.left_contaner .shade {
|
292
|
-
background-color: rgba( 135,206,235, .5);
|
293
|
-
position: absolute;
|
294
|
-
top: 0;
|
295
|
-
left: 0; cursor: move;}
|
296
|
-
.left_contaner .middle_img img {
|
297
|
-
width: 100%;
|
298
|
-
height: 100%;
|
299
|
-
}
|
300
|
-
.left_contaner .carousel {
|
301
|
-
width: 100%;
|
302
|
-
margin-top: 20px;
|
303
|
-
display: -webkit-flex;
|
304
|
-
}
|
305
|
-
.left_contaner .carousel .show_box {
|
306
|
-
flex: 1;
|
307
|
-
overflow: hidden;
|
308
|
-
position: relative;
|
309
|
-
}
|
310
|
-
.left_contaner .carousel .arrow {
|
311
|
-
flex-basis: 25px;
|
312
|
-
cursor: pointer;
|
313
|
-
}
|
314
|
-
.left_contaner .carousel .picture_container {
|
315
|
-
position: absolute;
|
316
|
-
overflow: hidden;
|
317
|
-
top: 0;
|
318
|
-
}
|
319
|
-
.left_contaner .picture_container .picture_item {
|
320
|
-
height: 100%;
|
321
|
-
float: left;
|
322
|
-
padding: 5px;
|
323
|
-
box-sizing: border-box;
|
324
|
-
}
|
325
|
-
.left_contaner .picture_container .picture_item:hover {
|
326
|
-
border: 2px solid #f2019f;
|
327
|
-
}
|
328
|
-
.right_contanier {
|
329
|
-
overflow: hidden;
|
330
|
-
position: absolute;
|
331
|
-
top: 0;
|
332
|
-
border: 1px solid #ccc;
|
333
|
-
}
|
334
|
-
.right_contanier .big_img {
|
335
|
-
position: absolute;
|
336
|
-
top: 0px;
|
337
|
-
left: 0px;
|
338
|
-
}
|
339
|
-
.btn_ {
|
340
|
-
background-color: #6aa6e2;
|
341
|
-
position: absolute;
|
342
|
-
bottom: 11px;
|
343
|
-
left: 13px;
|
344
|
-
width: 55px;
|
345
|
-
height: 35px;
|
346
|
-
border-radius: 5px;
|
347
|
-
border: none;
|
348
|
-
}
|
349
|
-
|
350
|
-
</style>
|