zydx-plus 1.32.312 → 1.32.314
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/package.json +1 -1
- package/src/components/biz_header/src/bizHeader.vue +36 -18
- package/src/components/biz_header/src/button_name.js +18 -18
- package/src/components/biz_taskInfo/src/bizTaskInfo.vue +5 -5
- package/src/components/flip/src/flip.vue +169 -291
- package/src/components/menuTree/src/ZydxMenuTree.vue +1 -1
- package/src/components/select/src/select.vue +1 -2
- package/src/components/tipBox/src/zydxStyle.css +1 -2
- package/src/index.js +1 -1
package/package.json
CHANGED
|
@@ -21,21 +21,21 @@
|
|
|
21
21
|
<template v-for="(buttonInfo, buttonIndex) in initConfig(item).buttonList[tabType]">
|
|
22
22
|
<template v-if="buttonInfo instanceof Object" v-for="(childButtonInfo, childButtonIndex) in buttonInfo">
|
|
23
23
|
<!-- 在课上渲染的 -->
|
|
24
|
-
<button class="
|
|
24
|
+
<button class="defaultButton"
|
|
25
25
|
:class="childButtonIndex === getSelectBtnIndex && selectItem.level === item.level? 'active' : ''"
|
|
26
26
|
v-if="item.level === 0 && buttonIndex === 'headLevel' && childButtonIndex !== 'default'"
|
|
27
27
|
@click="clickRightBtn(item, childButtonIndex, childButtonInfo)"
|
|
28
28
|
v-html="childButtonInfo"
|
|
29
29
|
/>
|
|
30
30
|
<!-- 单独在最低节点设置的按钮 -->
|
|
31
|
-
<button :ref="childButtonIndex + item.catalogId" class="
|
|
31
|
+
<button :ref="childButtonIndex + item.catalogId" class="defaultButton"
|
|
32
32
|
:class="childButtonIndex === getSelectBtnIndex && selectItem.level === item.level? 'active' : ''"
|
|
33
33
|
v-if="item.level !== 0 && (!item.children || item.children.length === 0) && buttonIndex === 'lowLevel' && childButtonIndex !== 'default'"
|
|
34
34
|
@click="clickRightBtn(item, childButtonIndex, childButtonInfo)"
|
|
35
35
|
v-html="childButtonInfo"
|
|
36
36
|
/>
|
|
37
37
|
<!-- 在非课和非最低节点 -->
|
|
38
|
-
<button class="
|
|
38
|
+
<button class="defaultButton"
|
|
39
39
|
:class="childButtonIndex === getSelectBtnIndex && selectItem.level === item.level? 'active' : ''"
|
|
40
40
|
v-if="item.level !== 0 && item.children && item.children.length !== 0 && buttonIndex === 'otherLevel' && childButtonIndex !== 'default'"
|
|
41
41
|
@click="clickRightBtn(item, childButtonIndex, childButtonInfo)"
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
/>
|
|
44
44
|
</template>
|
|
45
45
|
<template v-else-if="buttonInfo != null && buttonInfo.constructor === String">
|
|
46
|
-
<button class="
|
|
46
|
+
<button class="defaultButton"
|
|
47
47
|
:class="buttonIndex === getSelectBtnIndex && selectItem.level === item.level? 'active' : ''"
|
|
48
48
|
v-if="buttonIndex !== 'level0btn' && buttonInfo != null"
|
|
49
49
|
@click="clickRightBtn(item, buttonIndex, buttonInfo)"
|
|
@@ -205,27 +205,45 @@ export default {
|
|
|
205
205
|
.borderBottom1cccccc {
|
|
206
206
|
border-bottom: 1px #cccccc solid !important;
|
|
207
207
|
}
|
|
208
|
-
|
|
209
|
-
margin: 1px
|
|
208
|
+
/*.z-button {*/
|
|
209
|
+
/*margin: 1px;*/
|
|
210
|
+
/*width: auto;*/
|
|
211
|
+
/*min-width: 60px;*/
|
|
212
|
+
/*max-width: 60px;*/
|
|
213
|
+
/*text-overflow: ellipsis;*/
|
|
214
|
+
/*white-space: nowrap;*/
|
|
215
|
+
/*overflow: hidden;*/
|
|
216
|
+
/*height: 20px;*/
|
|
217
|
+
/*background-color: #FFFFFF;*/
|
|
218
|
+
/*color: #000000;*/
|
|
219
|
+
/*border: #000000 1px solid;*/
|
|
220
|
+
/*line-height: 18px;*/
|
|
221
|
+
/*border-radius: 3px;*/
|
|
222
|
+
/*font-size: 12px !important;*/
|
|
223
|
+
/*letter-spacing: 0px !important;*/
|
|
224
|
+
/*text-align: center;*/
|
|
225
|
+
/*padding: 0 5px;*/
|
|
226
|
+
/*font-weight: normal;*/
|
|
227
|
+
/*cursor: pointer;*/
|
|
228
|
+
/*}*/
|
|
229
|
+
|
|
230
|
+
.defaultButton {
|
|
210
231
|
width: auto;
|
|
211
232
|
min-width: 60px;
|
|
212
|
-
max-width: 60px;
|
|
213
|
-
text-overflow: ellipsis;
|
|
214
|
-
white-space: nowrap;
|
|
215
|
-
overflow: hidden;
|
|
216
233
|
height: 20px;
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
border:
|
|
220
|
-
|
|
234
|
+
font-size: 12px;
|
|
235
|
+
line-height: 20px;
|
|
236
|
+
border: 1px solid #000;
|
|
237
|
+
color: #000;
|
|
221
238
|
border-radius: 3px;
|
|
222
|
-
font-size: 12px !important;
|
|
223
|
-
letter-spacing: 0px !important;
|
|
224
239
|
text-align: center;
|
|
225
|
-
padding: 0 5px;
|
|
226
|
-
font-weight: normal;
|
|
227
240
|
cursor: pointer;
|
|
241
|
+
background-color: #fff;
|
|
242
|
+
user-select: none;
|
|
243
|
+
margin: 1px;
|
|
244
|
+
box-sizing: border-box;
|
|
228
245
|
}
|
|
246
|
+
|
|
229
247
|
.active{
|
|
230
248
|
color: rgba(0, 255, 0, 1) !important;
|
|
231
249
|
}
|
|
@@ -235,12 +235,12 @@ let buttonNames = {
|
|
|
235
235
|
headLevel: {
|
|
236
236
|
default: "demand",
|
|
237
237
|
demand: '回答要求',
|
|
238
|
-
singletonClass: this.getCurrentPrefix(item) + '
|
|
238
|
+
singletonClass: this.getCurrentPrefix(item) + '主题',
|
|
239
239
|
allClass: this.getPrefix(item) + '情况',
|
|
240
240
|
},
|
|
241
241
|
otherLevel: {
|
|
242
242
|
default: "singletonClass",
|
|
243
|
-
singletonClass: this.getCurrentPrefix(item) + '
|
|
243
|
+
singletonClass: this.getCurrentPrefix(item) + '主题',
|
|
244
244
|
allClass: this.getPrefix(item) + '情况',
|
|
245
245
|
},
|
|
246
246
|
lowLevel: {
|
|
@@ -254,12 +254,12 @@ let buttonNames = {
|
|
|
254
254
|
2: {
|
|
255
255
|
headLevel: {
|
|
256
256
|
default: "singletonClass",
|
|
257
|
-
singletonClass: this.getCurrentPrefix(item) + '
|
|
257
|
+
singletonClass: this.getCurrentPrefix(item) + '主题',
|
|
258
258
|
allClass: this.getPrefix(item) + '情况',
|
|
259
259
|
},
|
|
260
260
|
otherLevel: {
|
|
261
261
|
default: "singletonClass",
|
|
262
|
-
singletonClass: this.getCurrentPrefix(item) + '
|
|
262
|
+
singletonClass: this.getCurrentPrefix(item) + '主题',
|
|
263
263
|
allClass: this.getPrefix(item) + '情况',
|
|
264
264
|
},
|
|
265
265
|
lowLevel: {
|
|
@@ -547,13 +547,13 @@ let buttonNames = {
|
|
|
547
547
|
0: {
|
|
548
548
|
headLevel: {
|
|
549
549
|
default: "demand",
|
|
550
|
-
demand: '
|
|
551
|
-
singletonClass: this.getCurrentPrefix(item) + '
|
|
550
|
+
demand: '案析要求',
|
|
551
|
+
singletonClass: this.getCurrentPrefix(item) + '案析',
|
|
552
552
|
allClass: this.getPrefix(item) + '情况',
|
|
553
553
|
},
|
|
554
554
|
otherLevel: {
|
|
555
555
|
default: "singletonClass",
|
|
556
|
-
singletonClass: this.getCurrentPrefix(item) + '
|
|
556
|
+
singletonClass: this.getCurrentPrefix(item) + '案析',
|
|
557
557
|
allClass: this.getPrefix(item) + '情况',
|
|
558
558
|
},
|
|
559
559
|
lowLevel: {
|
|
@@ -567,12 +567,12 @@ let buttonNames = {
|
|
|
567
567
|
2: {
|
|
568
568
|
headLevel: {
|
|
569
569
|
default: "singletonClass",
|
|
570
|
-
singletonClass: this.getCurrentPrefix(item) + '
|
|
570
|
+
singletonClass: this.getCurrentPrefix(item) + '案析',
|
|
571
571
|
allClass: this.getPrefix(item) + '情况',
|
|
572
572
|
},
|
|
573
573
|
otherLevel: {
|
|
574
574
|
default: "singletonClass",
|
|
575
|
-
singletonClass: this.getCurrentPrefix(item) + '
|
|
575
|
+
singletonClass: this.getCurrentPrefix(item) + '案析',
|
|
576
576
|
allClass: this.getPrefix(item) + '情况',
|
|
577
577
|
},
|
|
578
578
|
lowLevel: {
|
|
@@ -684,12 +684,12 @@ let buttonNames = {
|
|
|
684
684
|
headLevel: {
|
|
685
685
|
default: "demand",
|
|
686
686
|
demand: '作业要求',
|
|
687
|
-
singletonClass: this.
|
|
687
|
+
singletonClass: this.getCurrentPrefix(item) + '作业',
|
|
688
688
|
allClass: this.getPrefix(item) + '情况',
|
|
689
689
|
},
|
|
690
690
|
otherLevel: {
|
|
691
691
|
default: "singletonClass",
|
|
692
|
-
singletonClass: this.
|
|
692
|
+
singletonClass: this.getCurrentPrefix(item) + '作业',
|
|
693
693
|
allClass: this.getPrefix(item) + '情况',
|
|
694
694
|
},
|
|
695
695
|
lowLevel: {
|
|
@@ -1334,12 +1334,12 @@ let buttonNames = {
|
|
|
1334
1334
|
headLevel: {
|
|
1335
1335
|
default: "demand",
|
|
1336
1336
|
demand: '回答要求',
|
|
1337
|
-
singletonClass: this.getCurrentPrefix(item) + '
|
|
1337
|
+
singletonClass: this.getCurrentPrefix(item) + '主题',
|
|
1338
1338
|
allClass: this.getPrefix(item) + '情况',
|
|
1339
1339
|
},
|
|
1340
1340
|
otherLevel: {
|
|
1341
1341
|
default: "singletonClass",
|
|
1342
|
-
singletonClass: this.getCurrentPrefix(item) + '
|
|
1342
|
+
singletonClass: this.getCurrentPrefix(item) + '主题',
|
|
1343
1343
|
allClass: this.getPrefix(item) + '情况',
|
|
1344
1344
|
},
|
|
1345
1345
|
lowLevel: {
|
|
@@ -1532,13 +1532,13 @@ let buttonNames = {
|
|
|
1532
1532
|
0: {
|
|
1533
1533
|
headLevel: {
|
|
1534
1534
|
default: "demand",
|
|
1535
|
-
demand: '
|
|
1536
|
-
singletonClass: this.getCurrentPrefix(item) + '
|
|
1535
|
+
demand: '案析要求',
|
|
1536
|
+
singletonClass: this.getCurrentPrefix(item) + '案析',
|
|
1537
1537
|
allClass: this.getPrefix(item) + '情况',
|
|
1538
1538
|
},
|
|
1539
1539
|
otherLevel: {
|
|
1540
1540
|
default: "singletonClass",
|
|
1541
|
-
singletonClass: this.getCurrentPrefix(item) + '
|
|
1541
|
+
singletonClass: this.getCurrentPrefix(item) + '案析',
|
|
1542
1542
|
allClass: this.getPrefix(item) + '情况',
|
|
1543
1543
|
},
|
|
1544
1544
|
lowLevel: {
|
|
@@ -2529,7 +2529,7 @@ let buttonNames = {
|
|
|
2529
2529
|
selectResource: '查找资源',
|
|
2530
2530
|
}
|
|
2531
2531
|
},
|
|
2532
|
-
|
|
2532
|
+
2: {
|
|
2533
2533
|
headLevel: {
|
|
2534
2534
|
default: "btnIndex1",
|
|
2535
2535
|
btnIndex1: this.getCurrentPrefix(item) + '课件',
|
|
@@ -2644,7 +2644,7 @@ let buttonNames = {
|
|
|
2644
2644
|
},
|
|
2645
2645
|
lowLevel: {
|
|
2646
2646
|
default: "viewResource",
|
|
2647
|
-
|
|
2647
|
+
createResource: '创建数据',
|
|
2648
2648
|
viewResource: '数据列表',
|
|
2649
2649
|
selectResource: '查找资源',
|
|
2650
2650
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<div v-if="actionConfig[actionId].isShowFinishState" class="task_item_main width100" :class="isWidth50 ? 'width50': 'width100'" style="z-index: 110">
|
|
5
5
|
<div class="task_text_desc">动作性质:</div>
|
|
6
6
|
<div class="width250">
|
|
7
|
-
<zydxSelect :color="'#000000'" :readonly="readonly" :options="finishStateOptions" v-model:value="finishState"></zydxSelect>
|
|
7
|
+
<zydxSelect :color="'#000000'" :readonly="actionId == 'action_lesson051'?true:readonly" :options="finishStateOptions" v-model:value="finishState"></zydxSelect>
|
|
8
8
|
</div>
|
|
9
9
|
</div>
|
|
10
10
|
<template v-if="actionConfig[actionId].isShowEndTime">
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
<template v-else>
|
|
45
45
|
<zydx-input :value="dateFormat(info.endTime)"
|
|
46
46
|
:placeholder="'请选择日期'"
|
|
47
|
-
:readonly="
|
|
47
|
+
:readonly="true"
|
|
48
48
|
:border="!readonly"
|
|
49
49
|
:key="JSON.stringify(info.endTime)"
|
|
50
50
|
:type="'input'">
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
</div>
|
|
61
61
|
</template>
|
|
62
62
|
<div v-if="actionConfig[actionId].isShowLaterScore" class="task_item_main" :class="getZindex(index)">
|
|
63
|
-
<div class="task_text_desc"
|
|
63
|
+
<div class="task_text_desc">{{actionId == 'action_lesson012' || 'action_Interrogation'?'迟答扣分' : '迟交扣分'}}:</div>
|
|
64
64
|
<div class="width250">
|
|
65
65
|
<zydxSelect :color="'#000000'" :readonly="readonly" :options="laterScoreOptions" v-model:value="laterScore"></zydxSelect>
|
|
66
66
|
</div>
|
|
@@ -315,8 +315,8 @@
|
|
|
315
315
|
},
|
|
316
316
|
action_lesson029: {
|
|
317
317
|
actionName: '案例分析',
|
|
318
|
-
endTimeBtn1: '
|
|
319
|
-
endTimeBtn2: '
|
|
318
|
+
endTimeBtn1: '案析截止',
|
|
319
|
+
endTimeBtn2: '案析时长',
|
|
320
320
|
laterScoreBtn: '迟交扣分',
|
|
321
321
|
isShowFinishState: true,
|
|
322
322
|
isShowEndTime: true,
|
|
@@ -29,9 +29,13 @@
|
|
|
29
29
|
</div>
|
|
30
30
|
</div>
|
|
31
31
|
<div class="page-but-left" :style="{cursor: pageIndex === 1?'default':'pointer'}"
|
|
32
|
-
@click.stop="flipRight(pageIndex-=1,false)"
|
|
32
|
+
@click.stop="flipRight(pageIndex-=1,false)">
|
|
33
|
+
<img v-if="pageIndex !== 1" src="data:image/png;base64,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" alt="" />
|
|
34
|
+
</div>
|
|
33
35
|
<div class="page-but-right" :style="{cursor: pageIndex === pdfPages?'default':'pointer'}"
|
|
34
|
-
@click.stop="flipLeft(pageIndex+=1,false)"
|
|
36
|
+
@click.stop="flipLeft(pageIndex+=1,false)">
|
|
37
|
+
<img v-if="pageIndex !== pdfPages" src="data:image/png;base64,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" alt="" />
|
|
38
|
+
</div>
|
|
35
39
|
</div>
|
|
36
40
|
</div>
|
|
37
41
|
<div class="but-wrap" v-if="butShow">
|
|
@@ -43,82 +47,7 @@
|
|
|
43
47
|
</button>
|
|
44
48
|
</div>
|
|
45
49
|
</div>
|
|
46
|
-
|
|
47
|
-
<div class="tool-text" v-if="!flipToolShow">
|
|
48
|
-
<span>阅读笔</span>
|
|
49
|
-
</div>
|
|
50
|
-
<div class="tool-list" :style="{transform: `translateY(${flipToolShow? '0':'-130%'})`}">
|
|
51
|
-
<div v-if="setShow" class="set" :style="{top: top + 'px'}">
|
|
52
|
-
<div class="set-list set-text" v-if="state === 'text'">
|
|
53
|
-
<span>文字字号</span>
|
|
54
|
-
<em v-for="(item) in textData" :style="{color: fontSize === Number(item)? 'rgba(198, 76, 16, 1)': '#000'}" @click.stop="textSizeTap(item)">{{ item }}</em>
|
|
55
|
-
</div>
|
|
56
|
-
<div class="set-list" v-else>
|
|
57
|
-
<span>线条粗细</span>
|
|
58
|
-
<em v-for="(item) in strokeData" :style="{color: lineWidth === Number(item)? 'rgba(198, 76, 16, 1)': '#000'}" @click.stop="strokeTap(item)">{{ item }}</em>
|
|
59
|
-
</div>
|
|
60
|
-
<div class="set-list">
|
|
61
|
-
<span>线条颜色</span>
|
|
62
|
-
<i v-for="(item) in strokeColor" @click.stop="strokeColTap(item)" :style="{'background-color': item === color? '#fff': item, border: `4px solid ${item}`}"></i>
|
|
63
|
-
</div>
|
|
64
|
-
</div>
|
|
65
|
-
<div class="tool-item" :class="{'tool-item-active': state === null}" @click.stop="mouse">
|
|
66
|
-
<div class="tool-item-img">
|
|
67
|
-
<img src="./img/shubiao.png" alt=""/>
|
|
68
|
-
</div>
|
|
69
|
-
</div>
|
|
70
|
-
<div class="tool-item" :class="{'tool-item-active': state === 'brush'}" @click.stop="brush">
|
|
71
|
-
<div class="tool-item-img">
|
|
72
|
-
<img src="./img/huabi.png" alt=""/>
|
|
73
|
-
</div>
|
|
74
|
-
</div>
|
|
75
|
-
<div class="tool-item" :class="{'tool-item-active': state === 'text'}" @click.stop="textTap">
|
|
76
|
-
<div class="tool-item-img">
|
|
77
|
-
<img src="./img/wenzi.png" alt=""/>
|
|
78
|
-
</div>
|
|
79
|
-
</div>
|
|
80
|
-
<div class="tool-item" :class="{'tool-item-active': state === 'rectangle'}" @click.stop="rectangleTap">
|
|
81
|
-
<div class="tool-item-img">
|
|
82
|
-
<img src="./img/juxing.png" alt=""/>
|
|
83
|
-
</div>
|
|
84
|
-
</div>
|
|
85
|
-
<div class="tool-item" :class="{'tool-item-active': state === 'circula'}" @click.stop="circularTap">
|
|
86
|
-
<div class="tool-item-img">
|
|
87
|
-
<img src="./img/yuan.png" alt=""/>
|
|
88
|
-
</div>
|
|
89
|
-
</div>
|
|
90
|
-
<div class="tool-item" :class="{'tool-item-active': state === 'straight'}" @click.stop="straightTap">
|
|
91
|
-
<div class="tool-item-img">
|
|
92
|
-
<img src="./img/jian.png" alt=""/>
|
|
93
|
-
</div>
|
|
94
|
-
</div>
|
|
95
|
-
<div class="tool-item" :class="{'tool-item-active': state === 'arrow'}" @click.stop="arrowTap">
|
|
96
|
-
<div class="tool-item-img">
|
|
97
|
-
<img src="./img/jiantou.png" alt=""/>
|
|
98
|
-
</div>
|
|
99
|
-
</div>
|
|
100
|
-
<div class="tool-item" @click.stop="backward">
|
|
101
|
-
<div class="tool-item-img">
|
|
102
|
-
<img src="./img/houtui.png" alt=""/>
|
|
103
|
-
</div>
|
|
104
|
-
</div>
|
|
105
|
-
<div class="tool-item" @click.stop="preserve">
|
|
106
|
-
<div class="tool-item-img">
|
|
107
|
-
<img src="./img/baocun.png" alt=""/>
|
|
108
|
-
</div>
|
|
109
|
-
</div>
|
|
110
|
-
<div class="tool-item" @click.stop="empty">
|
|
111
|
-
<div class="tool-item-img">
|
|
112
|
-
<img src="./img/xiangpi.png" alt=""/>
|
|
113
|
-
</div>
|
|
114
|
-
</div>
|
|
115
|
-
<div class="tool-item">
|
|
116
|
-
<div class="tool-item-img">
|
|
117
|
-
<img src="./img/guanbi.png" alt=""/>
|
|
118
|
-
</div>
|
|
119
|
-
</div>
|
|
120
|
-
</div>
|
|
121
|
-
</div>
|
|
50
|
+
|
|
122
51
|
<div v-if="loading" class="loading-back">
|
|
123
52
|
<div class="loading-cont">
|
|
124
53
|
<div class="loadings">Loading</div>
|
|
@@ -168,13 +97,9 @@ export default {
|
|
|
168
97
|
setShow: false,
|
|
169
98
|
flipToolShow2: false,
|
|
170
99
|
flipToolShow: false,
|
|
171
|
-
strokeData: ['1', '2', '3', '4', '5', '6', '7'], // 画笔数据
|
|
172
|
-
strokeColor: ['#000', '#f00', '#0f0', '#00f', '#f0f', '#ff0', '#0ff'], // 画笔颜色
|
|
173
|
-
textData: ['14', '16', '18', '20', '22', '24'], // 文本数据
|
|
174
100
|
color: '#000',
|
|
175
101
|
text: '',
|
|
176
102
|
state: null,
|
|
177
|
-
top: 0,
|
|
178
103
|
fontSize: 14,
|
|
179
104
|
textX: 0,
|
|
180
105
|
textY: 0,
|
|
@@ -184,14 +109,16 @@ export default {
|
|
|
184
109
|
contenteditable: false,
|
|
185
110
|
linkId: null,
|
|
186
111
|
pointsSelect: [],
|
|
187
|
-
checkDrawing: false,
|
|
112
|
+
checkDrawing: false, // 是否在画板以外画笔
|
|
188
113
|
checkX: 0,
|
|
189
114
|
checkY: 0,
|
|
190
115
|
textWidth: 0,
|
|
191
116
|
textHeight: 0,
|
|
192
117
|
textDownX: 0,
|
|
193
118
|
textDownY: 0,
|
|
194
|
-
textMoveStart: false
|
|
119
|
+
textMoveStart: false,
|
|
120
|
+
chartIndexID: null, // 当前点击的图形索引
|
|
121
|
+
signStart: false,
|
|
195
122
|
}
|
|
196
123
|
},
|
|
197
124
|
props: {
|
|
@@ -266,7 +193,7 @@ export default {
|
|
|
266
193
|
deep: true
|
|
267
194
|
}
|
|
268
195
|
},
|
|
269
|
-
emits: ['flip'
|
|
196
|
+
emits: ['flip'],
|
|
270
197
|
mounted() {
|
|
271
198
|
this.id = 'canvas-wrap' + Math.random().toString(36).substr(2)
|
|
272
199
|
window.addEventListener('keydown', this.handleKeyEvent)
|
|
@@ -280,12 +207,26 @@ export default {
|
|
|
280
207
|
window.removeEventListener('keydown', this.handleKeyEvent)
|
|
281
208
|
},
|
|
282
209
|
methods: {
|
|
210
|
+
colorTap(v) {
|
|
211
|
+
this.color = v
|
|
212
|
+
},
|
|
213
|
+
fontSizeTap(v) {
|
|
214
|
+
this.fontSize = Number(v)
|
|
215
|
+
},
|
|
216
|
+
lineWidthTap(v) {
|
|
217
|
+
this.lineWidth = Number(v)
|
|
218
|
+
},
|
|
283
219
|
handleKeyEvent(e) {
|
|
284
220
|
const {key} = e
|
|
285
221
|
if (key === 'Backspace' || key === 'Delete') {
|
|
222
|
+
if(this.contenteditable) return
|
|
286
223
|
this.backward()
|
|
287
224
|
}
|
|
288
225
|
},
|
|
226
|
+
// 删除
|
|
227
|
+
delTap() {
|
|
228
|
+
this.state = 'del'
|
|
229
|
+
},
|
|
289
230
|
empty() {
|
|
290
231
|
this.setShow = false
|
|
291
232
|
this.points = []
|
|
@@ -293,7 +234,7 @@ export default {
|
|
|
293
234
|
},
|
|
294
235
|
preserve() {
|
|
295
236
|
this.setShow = false
|
|
296
|
-
|
|
237
|
+
return this.points
|
|
297
238
|
},
|
|
298
239
|
// 后退
|
|
299
240
|
backward() {
|
|
@@ -316,13 +257,11 @@ export default {
|
|
|
316
257
|
mouse() {
|
|
317
258
|
this.state = null
|
|
318
259
|
this.setShow = false
|
|
319
|
-
this.turnText()
|
|
320
260
|
},
|
|
321
261
|
// 画笔
|
|
322
262
|
brush() {
|
|
323
263
|
this.state = 'brush'
|
|
324
264
|
this.setShow = true
|
|
325
|
-
this.top = 60
|
|
326
265
|
},
|
|
327
266
|
// 文字字号
|
|
328
267
|
textSizeTap(v) {
|
|
@@ -332,28 +271,25 @@ export default {
|
|
|
332
271
|
rectangleTap() {
|
|
333
272
|
this.state = 'rectangle'
|
|
334
273
|
this.setShow = true
|
|
335
|
-
this.top = 60*3
|
|
336
274
|
},
|
|
337
275
|
// 圆形
|
|
338
276
|
circularTap() {
|
|
339
277
|
this.state = 'circular'
|
|
340
278
|
this.setShow = true
|
|
341
|
-
this.top = 60*4
|
|
342
279
|
},
|
|
343
280
|
// 直线
|
|
344
281
|
straightTap() {
|
|
345
282
|
this.state = 'straight'
|
|
346
283
|
this.setShow = true
|
|
347
|
-
this.top = 60*5
|
|
348
284
|
},
|
|
349
285
|
// 箭头
|
|
350
286
|
arrowTap() {
|
|
351
287
|
this.state = 'arrow'
|
|
352
288
|
this.setShow = true
|
|
353
|
-
this.top = 60*6
|
|
354
289
|
},
|
|
355
290
|
// 文字
|
|
356
|
-
textTap() {
|
|
291
|
+
textTap(v) {
|
|
292
|
+
this.turnText()
|
|
357
293
|
this.state = 'text'
|
|
358
294
|
this.setShow = true
|
|
359
295
|
this.top = 60*2
|
|
@@ -363,18 +299,7 @@ export default {
|
|
|
363
299
|
this.textWidth = 100
|
|
364
300
|
this.textHeight = this.fontSize + 1
|
|
365
301
|
this.$refs.textInput.innerText = ''
|
|
366
|
-
|
|
367
|
-
flipTool() {
|
|
368
|
-
this.setShow = false
|
|
369
|
-
this.textShow = false
|
|
370
|
-
this.flipToolShow = !this.flipToolShow
|
|
371
|
-
if(this.flipToolShow) {
|
|
372
|
-
setTimeout(() => {
|
|
373
|
-
this.flipToolShow2 = true
|
|
374
|
-
}, 600)
|
|
375
|
-
} else {
|
|
376
|
-
this.flipToolShow2 = false
|
|
377
|
-
}
|
|
302
|
+
if(v === 'sign') this.signStart = true
|
|
378
303
|
},
|
|
379
304
|
strokeColTap(v) {
|
|
380
305
|
this.color = v
|
|
@@ -421,17 +346,30 @@ export default {
|
|
|
421
346
|
const x2 = this.points[i].x*this.scales/this.points[i].scale + len*this.points[i].size*this.sratio
|
|
422
347
|
const y2 = this.points[i].y*this.scales/this.points[i].scale + len*this.points[i].size*this.sratio
|
|
423
348
|
if(obj.x >= x1 && obj.x <= x2 && obj.y >= y1 && obj.y <= y2) {
|
|
424
|
-
this.state
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
349
|
+
if(this.state !== 'del') {
|
|
350
|
+
this.state = 'text'
|
|
351
|
+
this.textX2 = x1
|
|
352
|
+
this.textY2 = y1
|
|
353
|
+
this.textWidth = 'auto'
|
|
354
|
+
this.color = this.points[i].color
|
|
355
|
+
this.textHeight = this.points[i].text.length*this.points[i].size + 1
|
|
356
|
+
this.$refs.textInput.innerText = this.points[i].text.join('\n')
|
|
357
|
+
}
|
|
431
358
|
this.points.splice(i,1)
|
|
359
|
+
if(this.points[i - 1] !== undefined) {
|
|
360
|
+
if(this.points[i - 1].type === 'sign') {
|
|
361
|
+
if(this.state !== 'del') {
|
|
362
|
+
this.points.push(this.points.splice(i - 1, 1)[0])
|
|
363
|
+
}else {
|
|
364
|
+
this.points.splice(i - 1, 1)
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
|
|
432
369
|
this.clearRect()
|
|
433
370
|
}
|
|
434
371
|
}
|
|
372
|
+
// 判断点击的是否是矩形
|
|
435
373
|
if(this.points[i]?.type === 'rectangle') {
|
|
436
374
|
const x2 = this.points[i].x*this.scales/this.points[i].scale + this.points[i].width*this.scales/this.points[i].scale
|
|
437
375
|
const y2 = this.points[i].y*this.scales/this.points[i].scale + this.points[i].height*this.scales/this.points[i].scale
|
|
@@ -441,6 +379,7 @@ export default {
|
|
|
441
379
|
this.points.splice(i,1)
|
|
442
380
|
}
|
|
443
381
|
}
|
|
382
|
+
// 判断点击的是否是直线
|
|
444
383
|
if(this.points[i]?.type === 'line') {
|
|
445
384
|
const x2 = this.points[i+1]?this.points[i+1].x*this.scales/this.points[i].scale:0
|
|
446
385
|
const y2 = this.points[i+1]?this.points[i+1].y*this.scales/this.points[i].scale:0
|
|
@@ -462,6 +401,7 @@ export default {
|
|
|
462
401
|
}
|
|
463
402
|
}
|
|
464
403
|
}
|
|
404
|
+
// 判断点击的是否是箭头
|
|
465
405
|
if(this.points[i]?.type === 'straight' || this.points[i]?.type === 'arrow') {
|
|
466
406
|
const x2 = this.points[i].x2*this.scales/this.points[i].scale
|
|
467
407
|
const y2 = this.points[i].y2*this.scales/this.points[i].scale
|
|
@@ -536,7 +476,7 @@ export default {
|
|
|
536
476
|
this.setShow = false
|
|
537
477
|
e = e || event
|
|
538
478
|
e.preventDefault()
|
|
539
|
-
if(this.state === null) {
|
|
479
|
+
if(this.state === null || this.state === 'del') {
|
|
540
480
|
this.checkDrawing = true
|
|
541
481
|
this.checkDown(e)
|
|
542
482
|
return
|
|
@@ -547,6 +487,7 @@ export default {
|
|
|
547
487
|
y: e.offsetY*this.sratio
|
|
548
488
|
}
|
|
549
489
|
this.drawStart(obj)
|
|
490
|
+
if(this.signStart) this.sign()
|
|
550
491
|
},
|
|
551
492
|
textDblclick() {
|
|
552
493
|
if(!this.contenteditable) this.contenteditable = true
|
|
@@ -557,12 +498,18 @@ export default {
|
|
|
557
498
|
this.textDownY = e.offsetY
|
|
558
499
|
this.textMoveStart = true
|
|
559
500
|
},
|
|
501
|
+
// 鼠标移动
|
|
560
502
|
mouseMove (e) {
|
|
561
503
|
e = e || event
|
|
562
504
|
e.preventDefault()
|
|
563
505
|
if(this.textMoveStart) {
|
|
564
506
|
this.textX2 = e.offsetX*this.sratio - this.textDownX
|
|
565
507
|
this.textY2 = e.offsetY*this.sratio - this.textDownY
|
|
508
|
+
if(this.points[this.points.length - 1].type === 'sign') {
|
|
509
|
+
this.points[this.points.length - 1].x = this.textX2
|
|
510
|
+
this.points[this.points.length - 1].y = this.textY2
|
|
511
|
+
this.clearRect()
|
|
512
|
+
}
|
|
566
513
|
}
|
|
567
514
|
if(this.state === null) {
|
|
568
515
|
if(this.checkDrawing) this.checkMove(e)
|
|
@@ -576,12 +523,16 @@ export default {
|
|
|
576
523
|
this.drawMove(obj)
|
|
577
524
|
}
|
|
578
525
|
},
|
|
526
|
+
// 鼠标松开
|
|
579
527
|
mouseUp (e) {
|
|
580
528
|
e = e || event
|
|
581
529
|
e.preventDefault()
|
|
582
|
-
if(this.state === null) {
|
|
530
|
+
if(this.state === null || this.state === 'del') {
|
|
583
531
|
this.checkDrawing = false
|
|
584
532
|
this.checkUp(e)
|
|
533
|
+
if(this.state === 'del') {
|
|
534
|
+
this.delChart()
|
|
535
|
+
}
|
|
585
536
|
return
|
|
586
537
|
}
|
|
587
538
|
let obj = {
|
|
@@ -590,6 +541,19 @@ export default {
|
|
|
590
541
|
}
|
|
591
542
|
this.drawEnd(obj)
|
|
592
543
|
this.isDrawing = false
|
|
544
|
+
this.signStart = false
|
|
545
|
+
this.pointsSelect = []
|
|
546
|
+
},
|
|
547
|
+
delChart() {
|
|
548
|
+
if(this.pointsSelect.length === 0) return
|
|
549
|
+
const id = this.pointsSelect[0].id
|
|
550
|
+
for(let i = 0; i < this.points.length; i++) {
|
|
551
|
+
if(this.points[i].id === id) {
|
|
552
|
+
this.points.splice(i,1)
|
|
553
|
+
i--
|
|
554
|
+
}
|
|
555
|
+
}
|
|
556
|
+
this.clearRect()
|
|
593
557
|
},
|
|
594
558
|
// 绘制
|
|
595
559
|
drawStart (obj) {
|
|
@@ -641,10 +605,57 @@ export default {
|
|
|
641
605
|
const text = this.$refs.textInput.innerText
|
|
642
606
|
this.contenteditable = false
|
|
643
607
|
this.state = null
|
|
644
|
-
if(text === '')
|
|
608
|
+
if(text === '') {
|
|
609
|
+
this.points.pop()
|
|
610
|
+
this.clearRect()
|
|
611
|
+
return
|
|
612
|
+
}
|
|
645
613
|
this.addText(text)
|
|
646
614
|
}
|
|
647
615
|
},
|
|
616
|
+
// 画标记
|
|
617
|
+
sign() {
|
|
618
|
+
const x = this.textX2
|
|
619
|
+
const y = this.textY2
|
|
620
|
+
this.clearRect()
|
|
621
|
+
this.ctx.beginPath();
|
|
622
|
+
this.ctx.arc(x - 30,y + 10,20,0.3,Math.PI-0.3,true);
|
|
623
|
+
this.ctx.fillStyle = 'red';
|
|
624
|
+
this.ctx.fill();
|
|
625
|
+
this.ctx.closePath();
|
|
626
|
+
this.ctx.beginPath();
|
|
627
|
+
this.ctx.moveTo(x - 50,y + 15); // 左上角
|
|
628
|
+
this.ctx.lineTo(x - 10, y + 15); // 右上角
|
|
629
|
+
this.ctx.lineTo(x - 30,y + 40); // 下角
|
|
630
|
+
this.ctx.fillStyle = 'red';
|
|
631
|
+
this.ctx.fill();
|
|
632
|
+
this.ctx.closePath()
|
|
633
|
+
this.ctx.beginPath();
|
|
634
|
+
this.ctx.font = `24px 黑体`;
|
|
635
|
+
this.ctx.fillStyle = '#fff';
|
|
636
|
+
let num = this.signNum() < 10 ? '0' + this.signNum() : this.signNum()
|
|
637
|
+
this.ctx.fillText(num,x - 42,y + 20);
|
|
638
|
+
this.ctx.stroke();
|
|
639
|
+
this.ctx.closePath()
|
|
640
|
+
this.points.push({
|
|
641
|
+
x: this.textX2,
|
|
642
|
+
y: this.textY2,
|
|
643
|
+
index: this.pageIndex,
|
|
644
|
+
type: 'sign',
|
|
645
|
+
scale: this.scales,
|
|
646
|
+
id: this.linkId,
|
|
647
|
+
num: num
|
|
648
|
+
})
|
|
649
|
+
},
|
|
650
|
+
signNum() {
|
|
651
|
+
let num = []
|
|
652
|
+
this.points.forEach(item => {
|
|
653
|
+
if(item.type === 'sign') {
|
|
654
|
+
num.push(Number(item.num))
|
|
655
|
+
}
|
|
656
|
+
})
|
|
657
|
+
return num.length === 0 ? 1 : Math.max(...num) + 1
|
|
658
|
+
},
|
|
648
659
|
// 添加文字
|
|
649
660
|
addText(v) {
|
|
650
661
|
let obj = {}
|
|
@@ -664,6 +675,8 @@ export default {
|
|
|
664
675
|
this.ctx.stroke()
|
|
665
676
|
this.ctx.closePath()
|
|
666
677
|
}
|
|
678
|
+
const poi = this.points[this.points.length - 1]
|
|
679
|
+
if(poi?.type === 'sign') poi.id = this.linkId
|
|
667
680
|
this.points.push({
|
|
668
681
|
x: this.textX2,
|
|
669
682
|
y: this.textY2,
|
|
@@ -913,6 +926,28 @@ export default {
|
|
|
913
926
|
this.ctx.closePath()
|
|
914
927
|
}
|
|
915
928
|
},
|
|
929
|
+
signProcessing(data,v) {
|
|
930
|
+
const x = data.x*this.scales/data.scale + v.x
|
|
931
|
+
const y = data.y*this.scales/data.scale + v.y
|
|
932
|
+
this.ctx.beginPath();
|
|
933
|
+
this.ctx.arc(x - 30,y + 10,20,0.3,Math.PI-0.3,true);
|
|
934
|
+
this.ctx.fillStyle = 'red';
|
|
935
|
+
this.ctx.fill();
|
|
936
|
+
this.ctx.closePath();
|
|
937
|
+
this.ctx.beginPath();
|
|
938
|
+
this.ctx.moveTo(x - 50,y + 15); // 左上角
|
|
939
|
+
this.ctx.lineTo(x - 10, y + 15); // 右上角
|
|
940
|
+
this.ctx.lineTo(x - 30,y + 40); // 下角
|
|
941
|
+
this.ctx.fillStyle = 'red';
|
|
942
|
+
this.ctx.fill();
|
|
943
|
+
this.ctx.closePath()
|
|
944
|
+
this.ctx.beginPath();
|
|
945
|
+
this.ctx.font = `24px 黑体`;
|
|
946
|
+
this.ctx.fillStyle = '#fff';
|
|
947
|
+
this.ctx.fillText(data.num,x - 42,y + 20);
|
|
948
|
+
this.ctx.stroke();
|
|
949
|
+
this.ctx.closePath()
|
|
950
|
+
},
|
|
916
951
|
// 处理数据
|
|
917
952
|
processing() {
|
|
918
953
|
for(let i = 0; i < this.points.length; i++) {
|
|
@@ -935,11 +970,13 @@ export default {
|
|
|
935
970
|
if(this.points[i].type === 'text') {
|
|
936
971
|
this.textProcessing(this.points[i],{x:0,y:0})
|
|
937
972
|
}
|
|
973
|
+
if(this.points[i].type === 'sign') {
|
|
974
|
+
this.signProcessing(this.points[i],{x:0,y:0})
|
|
975
|
+
}
|
|
938
976
|
}
|
|
939
977
|
}
|
|
940
978
|
},
|
|
941
979
|
flipLeft(e, v) {
|
|
942
|
-
console.log(e)
|
|
943
980
|
if (e > this.pdfPages) {
|
|
944
981
|
this.pageIndex = this.pdfPages
|
|
945
982
|
return
|
|
@@ -1073,182 +1110,7 @@ export default {
|
|
|
1073
1110
|
width: 100%;
|
|
1074
1111
|
height: 100%;
|
|
1075
1112
|
}
|
|
1076
|
-
.flip-tool{
|
|
1077
|
-
position: absolute;
|
|
1078
|
-
top: 0;
|
|
1079
|
-
right: 0;
|
|
1080
|
-
z-index: 200;
|
|
1081
|
-
box-shadow: 0 0 10px rgba(0,0,0,.2);
|
|
1082
|
-
border-bottom-left-radius: 10px;
|
|
1083
|
-
border-bottom-right-radius: 10px;
|
|
1084
|
-
transition: all 0.5s;
|
|
1085
|
-
}
|
|
1086
|
-
.tool-text{
|
|
1087
|
-
width: 50px;
|
|
1088
|
-
background-color: #fff;
|
|
1089
|
-
text-align: center;
|
|
1090
|
-
border-bottom-left-radius: 10px;
|
|
1091
|
-
border-bottom-right-radius: 10px;
|
|
1092
|
-
line-height: 25px;
|
|
1093
|
-
cursor: pointer;
|
|
1094
|
-
font-size: 12px;
|
|
1095
|
-
color: rgba(198, 76, 16, 1);
|
|
1096
|
-
}
|
|
1097
|
-
.tool-list{
|
|
1098
|
-
width: 50px;
|
|
1099
|
-
background-color: #fff;
|
|
1100
|
-
border-bottom-left-radius: 10px;
|
|
1101
|
-
border-bottom-right-radius: 10px;
|
|
1102
|
-
cursor: pointer;
|
|
1103
|
-
position: relative;
|
|
1104
|
-
text-align: center;
|
|
1105
|
-
padding: 18px 0;
|
|
1106
|
-
transition: all 0.5s;
|
|
1107
|
-
user-select: none;
|
|
1108
|
-
}
|
|
1109
|
-
.tool-item{
|
|
1110
|
-
padding: 18px 0;
|
|
1111
|
-
position: relative;
|
|
1112
|
-
}
|
|
1113
|
-
.tool-item-img{
|
|
1114
|
-
overflow: hidden;
|
|
1115
|
-
}
|
|
1116
|
-
.tool-item img {
|
|
1117
|
-
width: 30%;
|
|
1118
|
-
display: block;
|
|
1119
|
-
margin: 0 auto;
|
|
1120
|
-
}
|
|
1121
|
-
.tool-item:hover img{
|
|
1122
|
-
filter: drop-shadow(40px 0 rgba(198, 76, 16, 1));
|
|
1123
|
-
margin-left: -22px;
|
|
1124
|
-
}
|
|
1125
|
-
.tool-item-active img {
|
|
1126
|
-
filter: drop-shadow(40px 0 rgba(198, 76, 16, 1));
|
|
1127
|
-
margin-left: -22px;
|
|
1128
|
-
}
|
|
1129
|
-
.set {
|
|
1130
|
-
position: absolute;
|
|
1131
|
-
right: 40px;
|
|
1132
|
-
width: 280px;
|
|
1133
|
-
background-color: #fff;
|
|
1134
|
-
border-radius: 10px;
|
|
1135
|
-
box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.3);
|
|
1136
|
-
padding: 10px;
|
|
1137
|
-
z-index: 1;
|
|
1138
|
-
}
|
|
1139
|
-
|
|
1140
|
-
.set-list {
|
|
1141
|
-
padding: 5px 0;
|
|
1142
|
-
font-size: 15px;
|
|
1143
|
-
}
|
|
1144
|
-
|
|
1145
|
-
.set-list:after {
|
|
1146
|
-
content: '';
|
|
1147
|
-
display: block;
|
|
1148
|
-
clear: both;
|
|
1149
|
-
}
|
|
1150
|
-
|
|
1151
|
-
.set-list span {
|
|
1152
|
-
margin-right: 10px;
|
|
1153
|
-
float: left;
|
|
1154
|
-
}
|
|
1155
|
-
|
|
1156
|
-
.set-list em {
|
|
1157
|
-
font-style: normal;
|
|
1158
|
-
font-size: 15px;
|
|
1159
|
-
width: 16px;
|
|
1160
|
-
display: inline-block;
|
|
1161
|
-
margin-right: 10px;
|
|
1162
|
-
text-align: center;
|
|
1163
|
-
}
|
|
1164
1113
|
|
|
1165
|
-
.set-list em:hover {
|
|
1166
|
-
color: rgba(198, 76, 16, 1);
|
|
1167
|
-
}
|
|
1168
|
-
|
|
1169
|
-
.set-list i {
|
|
1170
|
-
display: inline-block;
|
|
1171
|
-
width: 16px;
|
|
1172
|
-
height: 16px;
|
|
1173
|
-
background-color: #000;
|
|
1174
|
-
margin: 2px 10px 0 0;
|
|
1175
|
-
float: left;
|
|
1176
|
-
box-sizing: border-box;
|
|
1177
|
-
}
|
|
1178
|
-
|
|
1179
|
-
.set-list input {
|
|
1180
|
-
width: calc(100% - 60px);
|
|
1181
|
-
height: 22px;
|
|
1182
|
-
border: 1px solid #ccc;
|
|
1183
|
-
border-radius: 5px;
|
|
1184
|
-
padding: 0 10px;
|
|
1185
|
-
box-sizing: border-box;
|
|
1186
|
-
float: left;
|
|
1187
|
-
}
|
|
1188
|
-
.but {
|
|
1189
|
-
margin-left: 5px;
|
|
1190
|
-
font-size: 12px;
|
|
1191
|
-
background-color: transparent;
|
|
1192
|
-
border: 1px solid #000;
|
|
1193
|
-
border-radius: 3px;
|
|
1194
|
-
padding: 2px 5px;
|
|
1195
|
-
cursor: pointer;
|
|
1196
|
-
min-width: 60px;
|
|
1197
|
-
height: 21px;
|
|
1198
|
-
margin-right: 20px;
|
|
1199
|
-
}
|
|
1200
|
-
/*动画部分*/
|
|
1201
|
-
/*I'm the home page动画*/
|
|
1202
|
-
.flip-animation-start {
|
|
1203
|
-
transform-origin: left center;
|
|
1204
|
-
animation: flipBook1 1s forwards;
|
|
1205
|
-
}
|
|
1206
|
-
|
|
1207
|
-
.flip-animation-end {
|
|
1208
|
-
transform-origin: left center;
|
|
1209
|
-
animation: flipBook2 1s forwards;
|
|
1210
|
-
}
|
|
1211
|
-
|
|
1212
|
-
@keyframes flipBook1 {
|
|
1213
|
-
0% {
|
|
1214
|
-
transform: perspective(3000px) rotateY(0deg);
|
|
1215
|
-
opacity: 1;
|
|
1216
|
-
}
|
|
1217
|
-
60% {
|
|
1218
|
-
opacity: 1;
|
|
1219
|
-
}
|
|
1220
|
-
100% {
|
|
1221
|
-
transform: perspective(3000px) rotateY(-160deg);
|
|
1222
|
-
opacity: 0;
|
|
1223
|
-
}
|
|
1224
|
-
}
|
|
1225
|
-
|
|
1226
|
-
/*关闭书页*/
|
|
1227
|
-
@keyframes flipBook2 {
|
|
1228
|
-
0% {
|
|
1229
|
-
transform: perspective(3000px) rotateY(-160deg);
|
|
1230
|
-
opacity: 0;
|
|
1231
|
-
}
|
|
1232
|
-
30% {
|
|
1233
|
-
opacity: 1;
|
|
1234
|
-
}
|
|
1235
|
-
70% {
|
|
1236
|
-
opacity: 1;
|
|
1237
|
-
}
|
|
1238
|
-
100% {
|
|
1239
|
-
transform: perspective(3000px) rotateY(0deg);
|
|
1240
|
-
opacity: 0;
|
|
1241
|
-
}
|
|
1242
|
-
}
|
|
1243
|
-
|
|
1244
|
-
.wrap-one {
|
|
1245
|
-
position: absolute;
|
|
1246
|
-
top: 0;
|
|
1247
|
-
left: 50%;
|
|
1248
|
-
right: 0;
|
|
1249
|
-
bottom: 0;
|
|
1250
|
-
z-index: 2;
|
|
1251
|
-
}
|
|
1252
1114
|
|
|
1253
1115
|
.wrap-one img {
|
|
1254
1116
|
width: 100%;
|
|
@@ -1294,6 +1156,14 @@ export default {
|
|
|
1294
1156
|
width: 8%;
|
|
1295
1157
|
}
|
|
1296
1158
|
|
|
1159
|
+
.page-but-left img{
|
|
1160
|
+
width: 50%;
|
|
1161
|
+
position: absolute;
|
|
1162
|
+
top: 50%;
|
|
1163
|
+
transform: translateY(-50%);
|
|
1164
|
+
left: 0;
|
|
1165
|
+
}
|
|
1166
|
+
|
|
1297
1167
|
.page-but-right {
|
|
1298
1168
|
position: absolute;
|
|
1299
1169
|
top: 0;
|
|
@@ -1303,6 +1173,14 @@ export default {
|
|
|
1303
1173
|
width: 8%;
|
|
1304
1174
|
}
|
|
1305
1175
|
|
|
1176
|
+
.page-but-right img{
|
|
1177
|
+
width: 50%;
|
|
1178
|
+
position: absolute;
|
|
1179
|
+
top: 50%;
|
|
1180
|
+
transform: translateY(-50%);
|
|
1181
|
+
right: 0;
|
|
1182
|
+
}
|
|
1183
|
+
|
|
1306
1184
|
.load > span {
|
|
1307
1185
|
display: inline-block;
|
|
1308
1186
|
width: 100%;
|
|
@@ -115,7 +115,7 @@ export default {
|
|
|
115
115
|
// 点击回调事件
|
|
116
116
|
clickItem(item) {
|
|
117
117
|
this.getPcatalogIds(item.pcatalogId);
|
|
118
|
-
item["catalogPIds"] = this.pcatalogIds.split("").
|
|
118
|
+
item["catalogPIds"] = this.pcatalogIds.split("").join("");
|
|
119
119
|
this.$emit("clickItem", item);
|
|
120
120
|
this.pcatalogIds = '';
|
|
121
121
|
},
|
|
@@ -18,8 +18,7 @@
|
|
|
18
18
|
width="16"
|
|
19
19
|
height="16"
|
|
20
20
|
viewBox="0 0 24 24">
|
|
21
|
-
<g :transform="transform"
|
|
22
|
-
:style="style">
|
|
21
|
+
<g :transform="transform">
|
|
23
22
|
<path fill="#c0c4cc"
|
|
24
23
|
d="M15.125 21.1L6.7 12.7q-.15-.15-.213-.325T6.425 12q0-.2.062-.375T6.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L9.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z" />
|
|
25
24
|
</g>
|