@jx3box/jx3box-common-ui 7.3.3 → 7.3.4
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.
|
@@ -151,7 +151,7 @@
|
|
|
151
151
|
|
|
152
152
|
@media screen and (max-width: @ipad) {
|
|
153
153
|
.c-sidebar-right-toggle {
|
|
154
|
-
.none;
|
|
154
|
+
// .none;
|
|
155
155
|
}
|
|
156
156
|
|
|
157
157
|
.c-sidebar-right.isopen {
|
|
@@ -168,11 +168,11 @@
|
|
|
168
168
|
|
|
169
169
|
// 平板横屏
|
|
170
170
|
@media screen and (max-width:@smallpc){
|
|
171
|
-
.c-sidebar-right{
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
}
|
|
171
|
+
// .c-sidebar-right{
|
|
172
|
+
// .ps;
|
|
173
|
+
// .w(auto);
|
|
174
|
+
// border-left:none;
|
|
175
|
+
// }
|
|
176
176
|
}
|
|
177
177
|
|
|
178
178
|
@media print{
|
package/package.json
CHANGED
package/src/RightSidebar.vue
CHANGED
|
@@ -46,13 +46,13 @@ export default {
|
|
|
46
46
|
this.isOpen = data;
|
|
47
47
|
});
|
|
48
48
|
|
|
49
|
-
if (window.innerWidth < 1024) {
|
|
50
|
-
|
|
49
|
+
// if (window.innerWidth < 1024) {
|
|
50
|
+
// this.isOpen = false;
|
|
51
51
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
}
|
|
52
|
+
// document.addEventListener("click", function () {
|
|
53
|
+
// Bus.$emit("toggleRightSide", false);
|
|
54
|
+
// });
|
|
55
|
+
// }
|
|
56
56
|
},
|
|
57
57
|
};
|
|
58
58
|
</script>
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="right-affix">
|
|
2
|
+
<div class="c-right-affix" :class="{ 'is-close': !isOpen }">
|
|
3
3
|
<div class="item">
|
|
4
4
|
<fav :postId="postId" :postType="postType" :postTitle="postTitle" :hiddenNum="true"></fav>
|
|
5
5
|
</div>
|
|
6
6
|
<el-tooltip v-if="showComment" effect="dark" content="去评论" placement="left">
|
|
7
|
-
<div class="item" @click="toComment">
|
|
7
|
+
<div class="u-item" @click="toComment">
|
|
8
8
|
<i class="el-icon-chat-dot-square"></i>
|
|
9
9
|
</div>
|
|
10
10
|
</el-tooltip>
|
|
11
11
|
<el-tooltip effect="dark" content="回到顶部" placement="bottom">
|
|
12
|
-
<div class="item" v-show="scrollBtnShow" @click="goTop">
|
|
13
|
-
<div class="to-top"></div>
|
|
12
|
+
<div class="u-item" v-show="scrollBtnShow" @click="goTop">
|
|
13
|
+
<div class="u-to-top"></div>
|
|
14
14
|
</div>
|
|
15
15
|
</el-tooltip>
|
|
16
16
|
</div>
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
<script>
|
|
20
20
|
import Fav from "../interact/Fav2.vue";
|
|
21
|
+
import Bus from "../../service/bus";
|
|
21
22
|
export default {
|
|
22
23
|
name: "RightAffix",
|
|
23
24
|
props: ["postId", "postType", "postTitle", "showComment"],
|
|
@@ -26,6 +27,8 @@ export default {
|
|
|
26
27
|
scrollToptimer: null,
|
|
27
28
|
scrollBtnShow: false,
|
|
28
29
|
isTop: true,
|
|
30
|
+
|
|
31
|
+
isOpen: true,
|
|
29
32
|
};
|
|
30
33
|
},
|
|
31
34
|
components: {
|
|
@@ -69,12 +72,27 @@ export default {
|
|
|
69
72
|
}
|
|
70
73
|
self.isTop = false;
|
|
71
74
|
});
|
|
75
|
+
|
|
76
|
+
Bus.$on("toggleRightSide", (data) => {
|
|
77
|
+
this.isOpen = data;
|
|
78
|
+
});
|
|
72
79
|
},
|
|
73
80
|
};
|
|
74
81
|
</script>
|
|
75
82
|
|
|
76
83
|
<style lang="less">
|
|
77
|
-
.
|
|
84
|
+
.closeLeftSidebar() {
|
|
85
|
+
transition: 0.2s ease-in-out;
|
|
86
|
+
transform: translateX(100%);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.openLeftSidebar() {
|
|
90
|
+
transition: 0.2s ease-in-out;
|
|
91
|
+
transform: translateX(0);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.c-right-affix {
|
|
95
|
+
.openLeftSidebar();
|
|
78
96
|
position: fixed;
|
|
79
97
|
display: flex;
|
|
80
98
|
flex-direction: column;
|
|
@@ -87,7 +105,7 @@ export default {
|
|
|
87
105
|
z-index: 200;
|
|
88
106
|
border-top-left-radius: 6px;
|
|
89
107
|
border-bottom-left-radius: 6px;
|
|
90
|
-
.item {
|
|
108
|
+
.u-item {
|
|
91
109
|
display: flex;
|
|
92
110
|
justify-content: center;
|
|
93
111
|
align-items: center;
|
|
@@ -106,17 +124,27 @@ export default {
|
|
|
106
124
|
.size(26px);
|
|
107
125
|
}
|
|
108
126
|
}
|
|
109
|
-
.to-top {
|
|
127
|
+
.u-to-top {
|
|
110
128
|
width: 0;
|
|
111
129
|
height: 0;
|
|
112
130
|
border-left: 10px solid transparent;
|
|
113
131
|
border-right: 10px solid transparent;
|
|
114
132
|
border-bottom: 16px solid #87ceeb;
|
|
115
133
|
}
|
|
134
|
+
|
|
135
|
+
&.is-close {
|
|
136
|
+
.closeLeftSidebar();
|
|
137
|
+
right: 42px;
|
|
138
|
+
}
|
|
116
139
|
}
|
|
117
140
|
@media screen and (max-width: @smallpc) {
|
|
118
|
-
.right-affix {
|
|
141
|
+
.c-right-affix {
|
|
119
142
|
right: 0;
|
|
120
143
|
}
|
|
121
144
|
}
|
|
145
|
+
@media screen and (max-width: @phone) {
|
|
146
|
+
.c-right-affix {
|
|
147
|
+
.none;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
122
150
|
</style>
|