Skip to content

Commit

Permalink
fix: 脚本的版本对比页面，滚动条失效 #2309
Browse files Browse the repository at this point in the history
  • Loading branch information
@hLinx
hLinx committed Aug 4, 2023
1 parent 87a98de commit 5062193
Showing 1 changed file with 136 additions and 140 deletions.
276 changes: 136 additions & 140 deletions src/frontend/src/views/script-manage/common/diff.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,16 +88,19 @@
</bk-select>
</div>
</div>
<scroll-faker class="content-wraper">
<jb-diff
ref="diff"
class="diff-details"
:context="Infinity"
format="side-by-side"
:language="language"
:new-content="newContent"
:old-content="oldContent" />
</scroll-faker>
<div class="content-wraper">
<scroll-faker>
<jb-diff
ref="diff"
class="diff-details"
:context="Infinity"
format="side-by-side"
:language="language"
:new-content="newContent"
:old-content="oldContent"
theme="dark" />
</scroll-faker>
</div>
</div>
<i
class="bk-icon icon-close"
Expand Down Expand Up @@ -184,11 +187,7 @@
this.statisticsDiff();
this.$once('hook:beforeDestroy', () => {
window.removeEventListener('keydown', this.handleEsc);
try {
document.body.removeChild(this.$el);
} catch {
console.log('error');
}
this.$el.parentNode.removeChild(this.$el);
});
},
methods: {
Expand Down Expand Up @@ -298,167 +297,164 @@
};
</script>
<style lang="postcss">
.jb-diff-layout {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 8px 24px;
background-color: #fff;

.header {
display: flex;
align-items: center;
padding-right: 16px;

.title {
font-size: 20px;
line-height: 28px;
color: #313238;
}
.jb-diff-layout {
position: fixed;
inset: 0;
padding: 8px 24px;
background-color: #fff;

.diff-info {
.header {
display: flex;
margin-top: 15px;
margin-left: auto;
font-size: 12px;
line-height: 1em;
align-items: center;
padding-right: 16px;

.diff-del,
.diff-change,
.diff-ins {
display: flex;
margin-left: 30px;
cursor: pointer;
user-select: none;
.title {
font-size: 20px;
line-height: 28px;
color: #313238;
}

.diff-del {
color: #bd5c58;

.before {
background: #b1615b;
.diff-info {
display: flex;
margin-top: 15px;
margin-left: auto;
font-size: 12px;
line-height: 1em;
align-items: center;

.diff-del,
.diff-change,
.diff-ins {
display: flex;
margin-left: 30px;
cursor: pointer;
user-select: none;
}

.after {
background: #dcdcdc;
}
}
.diff-del {
color: #bd5c58;

.diff-change {
color: #63656e;
.before {
background: #b1615b;
}

.before {
background: #b1615b;
.after {
background: #dcdcdc;
}
}

.after {
background: #9aad76;
.diff-change {
color: #63656e;

.before {
background: #b1615b;
}

.after {
background: #9aad76;
}
}
}

.diff-ins {
color: #9aad76;
.diff-ins {
color: #9aad76;

.before {
background: #dcdcdc;
}

.before {
background: #dcdcdc;
.after {
background: #9aad76;
}
}

.before,
.after {
background: #9aad76;
width: 1em;
height: 1em;
}
}

.before,
.after {
width: 1em;
height: 1em;
.after {
margin-right: 6px;
margin-left: 1px;
}
}
}

.after {
margin-right: 6px;
margin-left: 1px;
.version-select-layout {
display: flex;
height: 48px;
margin-top: 18px;
background: #eaebf0;
border-radius: 2px 2px 0 0;

.version-left,
.version-right {
display: flex;
padding: 0 8px;
flex: 0 0 50%;
align-items: center;
}
}
}

.version-select-layout {
display: flex;
height: 48px;
margin-top: 18px;
background: #eaebf0;
border-radius: 2px 2px 0 0;
.version-left {
border-right: 1px solid #dcdee5;
}

.version-left,
.version-right {
display: flex;
padding: 0 8px;
flex: 0 0 50%;
align-items: center;
.bk-select {
color: #63656e;
background: #fff;
}
}

.version-left {
border-right: 1px solid #dcdee5;
.version-selector {
width: 300px;
}

.bk-select {
color: #63656e;
background: #fff;
.content-wraper {
height: calc(100vh - 92px);
}
}

.version-selector {
width: 300px;
}

.content-wraper {
max-height: calc(100vh - 92px);
}

.d2h-file-wrapper {
border: none;
}
.d2h-file-wrapper {
border: none;
}

.diff-details {
position: relative;
background-color: #fff;
}
.diff-details {
position: relative;
background-color: #fff;
}

.d2h-code-side-linenumber {
line-height: 20px;
.d2h-code-side-linenumber {
line-height: 20px;

&.active::before {
float: left;
width: 10px;
height: 10px;
margin-top: 5px;
margin-left: 13px;
background: #666;
border-radius: 50%;
content: "";
}
}

&.active::before {
float: left;
width: 10px;
height: 10px;
margin-top: 5px;
margin-left: 13px;
background: #666;
.icon-close {
position: absolute;
top: 8px;
right: 8px;
display: flex;
width: 26px;
height: 26px;
font-size: 22px;
color: #979ba5;
cursor: pointer;
border-radius: 50%;
content: "";
}
}
transition: all 0.1s;
align-items: center;
justify-content: center;

.icon-close {
position: absolute;
top: 8px;
right: 8px;
display: flex;
width: 26px;
height: 26px;
font-size: 22px;
color: #979ba5;
cursor: pointer;
border-radius: 50%;
transition: all 0.1s;
align-items: center;
justify-content: center;

&:hover {
background-color: #f0f1f5;
&:hover {
background-color: #f0f1f5;
}
}
}
}
</style>

0 comments on commit 5062193

Please sign in to comment.