@jx3box/jx3box-common-ui 7.3.2 → 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.
- package/assets/css/right-sidebar.less +10 -14
- package/package.json +1 -1
- package/src/RightSidebar.vue +6 -6
- package/src/single/right-affix.vue +36 -8
|
@@ -1,14 +1,10 @@
|
|
|
1
1
|
.c-sidebar-right{
|
|
2
|
+
.pf;.rt(0,@header-height + @bread-height);.z(400);
|
|
3
|
+
bottom:0;
|
|
2
4
|
.w(@aside-right);
|
|
5
|
+
background-color:#fff;
|
|
6
|
+
border-left:1px solid #eee;
|
|
3
7
|
box-sizing: border-box;
|
|
4
|
-
padding: 10px;
|
|
5
|
-
.pf;
|
|
6
|
-
.z(600);
|
|
7
|
-
right: 0;
|
|
8
|
-
top: @header-height + @bread-height;
|
|
9
|
-
bottom: 0;
|
|
10
|
-
background-color: #fff;
|
|
11
|
-
border-left: 1px solid #eee;
|
|
12
8
|
|
|
13
9
|
&.show-toggle {
|
|
14
10
|
background-color: @bg-light;
|
|
@@ -155,7 +151,7 @@
|
|
|
155
151
|
|
|
156
152
|
@media screen and (max-width: @ipad) {
|
|
157
153
|
.c-sidebar-right-toggle {
|
|
158
|
-
.none;
|
|
154
|
+
// .none;
|
|
159
155
|
}
|
|
160
156
|
|
|
161
157
|
.c-sidebar-right.isopen {
|
|
@@ -172,11 +168,11 @@
|
|
|
172
168
|
|
|
173
169
|
// 平板横屏
|
|
174
170
|
@media screen and (max-width:@smallpc){
|
|
175
|
-
.c-sidebar-right{
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
}
|
|
171
|
+
// .c-sidebar-right{
|
|
172
|
+
// .ps;
|
|
173
|
+
// .w(auto);
|
|
174
|
+
// border-left:none;
|
|
175
|
+
// }
|
|
180
176
|
}
|
|
181
177
|
|
|
182
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>
|