mirror of
https://github.com/blossom-editor/blossom
synced 2024-11-17 22:48:03 +08:00
首页样式优化
This commit is contained in:
xiaozzzi
parent
7127145dd9
commit
9cca65a6e4
1
blossom-editor/src/renderer/components.d.ts
vendored
1
blossom-editor/src/renderer/components.d.ts
vendored
@ -41,6 +41,7 @@ declare module 'vue' {
|
|||||||
ElProgress: typeof import('element-plus/es')['ElProgress']
|
ElProgress: typeof import('element-plus/es')['ElProgress']
|
||||||
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
|
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
|
||||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||||
|
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
|
||||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
||||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="article-stars-root">
|
<el-scrollbar :onresize="false">
|
||||||
|
<!-- <div class="article-stars-root"> -->
|
||||||
<div v-if="isEmpty(articles)" class="placeholder">
|
<div v-if="isEmpty(articles)" class="placeholder">
|
||||||
无收藏的文章
|
无收藏的文章
|
||||||
</div>
|
</div>
|
||||||
@ -17,7 +18,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div style="width: 100%;height: 10px;"></div>
|
||||||
|
<!-- </div> -->
|
||||||
|
</el-scrollbar>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
@ -61,123 +64,143 @@ defineExpose({ reload })
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.article-stars-root {
|
.el-scrollbar {
|
||||||
@include box(100%, 100%);
|
--el-scrollbar-opacity: 1;
|
||||||
@include flex(row, flex-start, flex-start);
|
--el-scrollbar-hover-opacity: 1;
|
||||||
flex-wrap: wrap;
|
--el-scrollbar-bg-color: var(--el-color-primary-light-8);
|
||||||
align-content: flex-start;
|
--el-scrollbar-hover-bg-color: var(--el-color-primary-light-6);
|
||||||
overflow: auto;
|
|
||||||
overflow-y: overlay;
|
|
||||||
|
|
||||||
.placeholder {
|
:deep(.el-scrollbar__bar) {
|
||||||
padding: 20px 0 0 20px;
|
width: 5px;
|
||||||
color: var(--bl-text-color-light);
|
right: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.star-item {
|
:deep(.el-scrollbar__view) {
|
||||||
@include box(210px, 70px, 210px, 210px);
|
@include box(100%, 100%);
|
||||||
position: relative;
|
@include flex(row, flex-start, flex-start);
|
||||||
margin: 10px 15px;
|
flex-wrap: wrap;
|
||||||
filter: drop-shadow(2px 2px 2px rgb(180, 180, 180));
|
align-content: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
[class="dark"] & {
|
|
||||||
filter: drop-shadow(2px 2px 2px rgb(0, 0, 0));
|
// .article-stars-root {
|
||||||
|
// @include box(100%, 100%);
|
||||||
|
// @include flex(row, flex-start, flex-start);
|
||||||
|
// flex-wrap: wrap;
|
||||||
|
// align-content: flex-start;
|
||||||
|
// overflow: auto;
|
||||||
|
// overflow-y: overlay;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
padding: 20px 0 0 20px;
|
||||||
|
color: var(--bl-text-color-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-item {
|
||||||
|
@include box(210px, 70px, 210px, 210px);
|
||||||
|
position: relative;
|
||||||
|
margin: 10px 15px;
|
||||||
|
filter: drop-shadow(2px 2px 2px rgb(180, 180, 180));
|
||||||
|
|
||||||
|
[class="dark"] & {
|
||||||
|
filter: drop-shadow(2px 2px 2px rgb(0, 0, 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.counterfoil {
|
||||||
|
transform: translateX(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
transform: translateX(5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.counterfoil,
|
||||||
|
.content {
|
||||||
|
@include flex(row, center, center);
|
||||||
|
@include absolute(0);
|
||||||
|
color: #fff;
|
||||||
|
transition: 0.3s;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
@include box(100%, 100%);
|
||||||
|
@include absolute('', 0, '', 0);
|
||||||
|
content: '';
|
||||||
|
background: var(--el-color-primary-light-3);
|
||||||
|
border-radius: 10px;
|
||||||
|
-webkit-mask-composite: source-in;
|
||||||
|
mask-composite: source-in;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 左侧存根
|
||||||
|
.counterfoil {
|
||||||
|
@include box(53px, 100%);
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
-webkit-mask: radial-gradient(circle at 10px 10px, transparent 10px, #fff 0) 43px -10px / 120%,
|
||||||
|
radial-gradient(circle at 1px 1px, transparent 2px, #fff 0) 51px 0px / 110% 8%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.counterfoil {
|
transform: rotate(-10deg);
|
||||||
transform: translateX(-5px);
|
transform-origin: 100% 100%;
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
transform: translateX(5px);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.counterfoil,
|
.iconbl {
|
||||||
.content {
|
font-size: 30px;
|
||||||
@include flex(row, center, center);
|
|
||||||
@include absolute(0);
|
|
||||||
color: #fff;
|
|
||||||
transition: 0.3s;
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 2;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
@include box(100%, 100%);
|
|
||||||
@include absolute('', 0, '', 0);
|
|
||||||
content: '';
|
|
||||||
background: var(--el-color-primary-light-3);
|
|
||||||
border-radius: 10px;
|
|
||||||
-webkit-mask-composite: source-in;
|
|
||||||
mask-composite: source-in;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 左侧存根
|
.bl-shuxingtiaoma {
|
||||||
.counterfoil {
|
@include absolute('', '', -3px, 14px);
|
||||||
@include box(53px, 100%);
|
font-size: 22px;
|
||||||
padding: 5px;
|
transform: rotate(90deg)
|
||||||
|
|
||||||
&::before {
|
|
||||||
-webkit-mask: radial-gradient(circle at 10px 10px, transparent 10px, #fff 0) 43px -10px / 120%,
|
|
||||||
radial-gradient(circle at 1px 1px, transparent 2px, #fff 0) 51px 0px / 110% 8%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: rotate(-10deg);
|
|
||||||
transform-origin: 100% 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconbl {
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bl-shuxingtiaoma {
|
|
||||||
@include absolute('', '', -3px, 14px);
|
|
||||||
font-size: 22px;
|
|
||||||
transform: rotate(90deg)
|
|
||||||
}
|
|
||||||
|
|
||||||
.bl-tiaoxingma {
|
|
||||||
position: absolute;
|
|
||||||
bottom: -15px;
|
|
||||||
left: 8px;
|
|
||||||
font-size: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-barcode {
|
|
||||||
@include absolute('', '', 0px, 17px);
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
.bl-tiaoxingma {
|
||||||
.content {
|
position: absolute;
|
||||||
@include box(157px, 100%);
|
bottom: -15px;
|
||||||
right: 0;
|
left: 8px;
|
||||||
padding: 5px 5px 5px 10px;
|
font-size: 40px;
|
||||||
font-size: 12px;
|
}
|
||||||
|
|
||||||
&::before {
|
.open-barcode {
|
||||||
-webkit-mask: radial-gradient(circle at 10px 10px, transparent 10px, #000 0) -10px -10px / 120%,
|
@include absolute('', '', 0px, 17px);
|
||||||
// radial-gradient(circle at 10px 10px, transparent 10px, #fff 0) -10px -10px,
|
font-size: 15px;
|
||||||
radial-gradient(circle at 1px 1px, transparent 2px, #000 0) -1px 0px / 110% 8%;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
//
|
||||||
@include box(100%, calc(100% - 12px));
|
.content {
|
||||||
}
|
@include box(157px, 100%);
|
||||||
|
right: 0;
|
||||||
|
padding: 5px 5px 5px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
.infos {
|
&::before {
|
||||||
@include box(140px, 12px);
|
-webkit-mask: radial-gradient(circle at 10px 10px, transparent 10px, #000 0) -10px -10px / 120%,
|
||||||
@include flex(row, space-between, center);
|
// radial-gradient(circle at 10px 10px, transparent 10px, #fff 0) -10px -10px,
|
||||||
@include font(10px, 300);
|
radial-gradient(circle at 1px 1px, transparent 2px, #000 0) -1px 0px / 110% 8%;
|
||||||
@include absolute('', '', 2px, 12px);
|
}
|
||||||
border-top: 1px dashed #f1f1f1;
|
|
||||||
padding-top: 4px;
|
.name {
|
||||||
}
|
@include box(100%, calc(100% - 12px));
|
||||||
|
}
|
||||||
|
|
||||||
|
.infos {
|
||||||
|
@include box(140px, 12px);
|
||||||
|
@include flex(row, space-between, center);
|
||||||
|
@include font(10px, 300);
|
||||||
|
@include absolute('', '', 2px, 12px);
|
||||||
|
border-top: 1px dashed #f1f1f1;
|
||||||
|
padding-top: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home-subject-root">
|
<el-scrollbar>
|
||||||
<div v-if="isEmpty(subjects)" class="placeholder">
|
<div v-if="isEmpty(subjects)" class="placeholder">
|
||||||
无专题内容
|
无专题内容
|
||||||
</div>
|
</div>
|
||||||
@ -35,9 +35,10 @@
|
|||||||
<span class="iconbl bl-a-clock3-line"></span>{{ subject.subjectUpdTime }}
|
<span class="iconbl bl-a-clock3-line"></span>{{ subject.subjectUpdTime }}
|
||||||
</div>
|
</div>
|
||||||
</bl-row>
|
</bl-row>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div style="width: 100%;height: 5px;"></div>
|
||||||
|
</el-scrollbar>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -77,107 +78,125 @@ const toToc = (articleId: number) => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.home-subject-root {
|
.el-scrollbar {
|
||||||
// @include box(900px, 100%);
|
--el-scrollbar-opacity: 1;
|
||||||
@include box(100%, 100%);
|
--el-scrollbar-hover-opacity: 1;
|
||||||
@include flex(row, flex-start, flex-start);
|
--el-scrollbar-bg-color: var(--el-color-primary-light-8);
|
||||||
flex-wrap: wrap;
|
--el-scrollbar-hover-bg-color: var(--el-color-primary-light-6);
|
||||||
align-content: flex-start;
|
|
||||||
overflow: auto;
|
|
||||||
overflow-y: overlay;
|
|
||||||
|
|
||||||
.placeholder {
|
:deep(.el-scrollbar__bar) {
|
||||||
padding: 20px 0 0 20px;
|
width: 5px;
|
||||||
color: var(--bl-text-color-light);
|
right: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
$width-item: 210px;
|
:deep(.el-scrollbar__view) {
|
||||||
|
@include box(100%, 100%);
|
||||||
|
@include flex(row, flex-start, flex-start);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-content: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.subject-item {
|
// .home-subject-root {
|
||||||
@include flex(column, flex-start, flex-start);
|
// @include box(100%, 100%);
|
||||||
@include box($width-item, 90px, $width-item, $width-item);
|
// @include flex(row, flex-start, flex-start);
|
||||||
@include themeShadow(3px 3px 5px 1px rgba(88, 88, 88, 0.3), 3px 3px 5px 1px rgba(0, 0, 0, 1));
|
// flex-wrap: wrap;
|
||||||
@include themeBg(linear-gradient(155deg, #ffffff00 0%, #F0F0F0 60%, var(--bl-subject-color1) 100%),
|
// align-content: flex-start;
|
||||||
linear-gradient(155deg, var(--bl-html-color) 0%, var(--el-color-primary-light-9) 60%, var(--bl-subject-color1) 100%));
|
// overflow: auto;
|
||||||
border-radius: 5px;
|
// overflow-y: overlay;
|
||||||
margin: 15px;
|
// }
|
||||||
transition: 0.3s;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
&:hover {
|
.placeholder {
|
||||||
transform: translateY(-5px);
|
padding: 20px 0 0 20px;
|
||||||
@include themeShadow(3px 3px 5px 1px rgb(116, 116, 116), 3px 3px 5px 1px rgba(0, 0, 0, 1));
|
color: var(--bl-text-color-light);
|
||||||
|
}
|
||||||
|
|
||||||
.seal {
|
$width-item: 210px;
|
||||||
text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
|
|
||||||
transform: translateY(-30px);
|
|
||||||
@include themeShadow(0 3px 15px 1px rgb(116, 116, 116), 3px 3px 5px 1px rgba(0, 0, 0, 1));
|
|
||||||
|
|
||||||
[class="dark"] & {
|
.subject-item {
|
||||||
text-shadow: 5px 5px 15px #000, -3px -3px 10px rgba(255, 255, 255, .5);
|
@include flex(column, flex-start, flex-start);
|
||||||
}
|
@include box($width-item, 90px, $width-item, $width-item);
|
||||||
}
|
@include themeShadow(3px 3px 5px 1px rgba(88, 88, 88, 0.3), 3px 3px 5px 1px rgba(0, 0, 0, 1));
|
||||||
|
@include themeBg(linear-gradient(155deg, #ffffff00 0%, #F0F0F0 60%, var(--bl-subject-color1) 100%),
|
||||||
|
linear-gradient(155deg, var(--bl-html-color) 0%, var(--el-color-primary-light-9) 60%, var(--bl-subject-color1) 100%));
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 15px;
|
||||||
|
transition: 0.3s;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
.inner {
|
&:hover {
|
||||||
opacity: 1;
|
transform: translateY(-5px);
|
||||||
}
|
@include themeShadow(3px 3px 5px 1px rgb(116, 116, 116), 3px 3px 5px 1px rgba(0, 0, 0, 1));
|
||||||
}
|
|
||||||
|
|
||||||
.progress {
|
|
||||||
@include box($width-item, 2px);
|
|
||||||
@include absolute(0, '', '', 0);
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.seal {
|
.seal {
|
||||||
@include flex(row, space-between, center);
|
text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
|
||||||
@include box($width-item, 40px);
|
transform: translateY(-30px);
|
||||||
@include font(14px, 500);
|
@include themeShadow(0 3px 15px 1px rgb(116, 116, 116), 3px 3px 5px 1px rgba(0, 0, 0, 1));
|
||||||
@include themeColor(#636363, #CDCDCD);
|
|
||||||
@include themeShadow(0 3px 10px rgb(144, 144, 144), 0 3px 5px rgb(37, 37, 37));
|
[class="dark"] & {
|
||||||
padding: 5px 10px;
|
text-shadow: 5px 5px 15px #000, -3px -3px 10px rgba(255, 255, 255, .5);
|
||||||
border-bottom-left-radius: 30px;
|
}
|
||||||
border-bottom-right-radius: 30px;
|
|
||||||
text-shadow: 2px 2px 5px rgb(54, 54, 54);
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
transition: 0.3s;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner {
|
.inner {
|
||||||
@include box(calc(#{$width-item} - 30px), 25px);
|
opacity: 1;
|
||||||
@include absolute(1px, '', '', 15px);
|
}
|
||||||
border-bottom-left-radius: 30px;
|
}
|
||||||
border-bottom-right-radius: 30px;
|
|
||||||
@include themeShadow(inset 0 3px 10px rgb(84, 84, 84), inset 0 3px 10px rgb(0, 0, 0));
|
.progress {
|
||||||
transition: 1.5s;
|
@include box($width-item, 2px);
|
||||||
opacity: 0;
|
@include absolute(0, '', '', 0);
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seal {
|
||||||
|
@include flex(row, space-between, center);
|
||||||
|
@include box($width-item, 40px);
|
||||||
|
@include font(14px, 500);
|
||||||
|
@include themeColor(#636363, #CDCDCD);
|
||||||
|
@include themeShadow(0 3px 10px rgb(144, 144, 144), 0 3px 5px rgb(37, 37, 37));
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-bottom-left-radius: 30px;
|
||||||
|
border-bottom-right-radius: 30px;
|
||||||
|
text-shadow: 2px 2px 5px rgb(54, 54, 54);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
transition: 0.3s;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
@include box(calc(#{$width-item} - 30px), 25px);
|
||||||
|
@include absolute(1px, '', '', 15px);
|
||||||
|
border-bottom-left-radius: 30px;
|
||||||
|
border-bottom-right-radius: 30px;
|
||||||
|
@include themeShadow(inset 0 3px 10px rgb(84, 84, 84), inset 0 3px 10px rgb(0, 0, 0));
|
||||||
|
transition: 1.5s;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subject-icon {
|
||||||
|
@include box(55px, 55px);
|
||||||
|
@include absolute('', 2px, 8px, '');
|
||||||
|
@include themeFilter(drop-shadow(0 0 3px rgb(62, 62, 62)), drop-shadow(0 0 3px #000000));
|
||||||
|
}
|
||||||
|
|
||||||
|
.infos {
|
||||||
|
@include box(100%, 25px);
|
||||||
|
@include font(11px, 300);
|
||||||
|
@include themeColor(#595959, #8D8D8D);
|
||||||
|
padding: 5px 10px;
|
||||||
|
|
||||||
|
.iconbl {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-right: 5px;
|
||||||
|
transition: 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subject-icon {
|
.bl-sendmail-fill {
|
||||||
@include box(55px, 55px);
|
font-size: 15px;
|
||||||
@include absolute('', 2px, 8px, '');
|
|
||||||
@include themeFilter(drop-shadow(0 0 3px rgb(62, 62, 62)), drop-shadow(0 0 3px #000000));
|
|
||||||
}
|
|
||||||
|
|
||||||
.infos {
|
|
||||||
@include box(100%, 25px);
|
|
||||||
@include font(11px, 300);
|
|
||||||
@include themeColor(#595959, #8D8D8D);
|
|
||||||
padding: 5px 10px;
|
|
||||||
|
|
||||||
.iconbl {
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 5px;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bl-sendmail-fill {
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="global-home-root">
|
<div class="global-home-root">
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<bl-row class="greetings">
|
<bl-row class="greetings" height="65px">
|
||||||
Good {{ now }}.
|
Good {{ now }}.
|
||||||
</bl-row>
|
</bl-row>
|
||||||
<!-- -->
|
<!-- -->
|
||||||
@ -20,45 +20,46 @@
|
|||||||
</bl-row>
|
</bl-row>
|
||||||
|
|
||||||
<!-- 统计 -->
|
<!-- 统计 -->
|
||||||
<bl-row class="container-name">字数统计</bl-row>
|
<el-scrollbar height="calc(100% - 315px)" wrap-style="padding-right:20px">
|
||||||
<bl-row width="100%" height="270px">
|
<bl-row class="container-name">字数统计</bl-row>
|
||||||
<!-- 字数图表 -->
|
<bl-row width="100%" height="270px">
|
||||||
<bl-col width="calc(100% - 200px)">
|
<!-- 字数图表 -->
|
||||||
<bl-row class="container-sub-name">
|
<bl-col width="calc(100% - 200px)">
|
||||||
Article Words
|
<bl-row class="container-sub-name">
|
||||||
<span class="iconbl bl-refresh-smile container-refresh" @click="loadWordLine"></span>
|
Article Words
|
||||||
</bl-row>
|
<span class="iconbl bl-refresh-smile container-refresh" @click="loadWordLine"></span>
|
||||||
<ChartLineWords ref="ChartLineWordsRef"></ChartLineWords>
|
</bl-row>
|
||||||
</bl-col>
|
<ChartLineWords ref="ChartLineWordsRef"></ChartLineWords>
|
||||||
<!-- 统计卡片 -->
|
</bl-col>
|
||||||
<bl-col width="200px" style="margin-left: 20px;">
|
<!-- 统计卡片 -->
|
||||||
<bl-row class="container-sub-name">Blossom Statistic</bl-row>
|
<bl-col width="200px" style="margin-left: 20px;">
|
||||||
<StatisticCard></StatisticCard>
|
<bl-row class="container-sub-name">Blossom Statistic</bl-row>
|
||||||
</bl-col>
|
<StatisticCard></StatisticCard>
|
||||||
</bl-row>
|
</bl-col>
|
||||||
|
</bl-row>
|
||||||
|
|
||||||
<!-- 流量统计 -->
|
<!-- 流量统计 -->
|
||||||
<bl-row class="container-name">请求流量</bl-row>
|
<bl-row class="container-name">请求流量</bl-row>
|
||||||
<bl-row class="container-sub-name">
|
|
||||||
Flow Statistic / Requests & Average Response Time(ms)
|
|
||||||
<span class="iconbl bl-refresh-smile container-refresh" @click="loadSentinlLine"></span>
|
|
||||||
</bl-row>
|
|
||||||
<bl-row width="880px" height="250px">
|
|
||||||
<SentinelChartLine ref="SentinelChartLineRef"></SentinelChartLine>
|
|
||||||
</bl-row>
|
|
||||||
|
|
||||||
<!-- 热力图 -->
|
|
||||||
<bl-col class="heatmap-container" width="100%" style="height: 330px;">
|
|
||||||
<bl-row class="container-name">编辑热力图</bl-row>
|
|
||||||
<bl-row class="container-sub-name">
|
<bl-row class="container-sub-name">
|
||||||
每日编辑文章数 (每5分钟更新)
|
Flow Statistic / Requests & Average Response Time(ms)
|
||||||
<span class="iconbl bl-refresh-smile container-refresh" @click="loadArticleHeapmap"></span>
|
<span class="iconbl bl-refresh-smile container-refresh" @click="loadSentinlLine"></span>
|
||||||
</bl-row>
|
</bl-row>
|
||||||
<bl-row style="height: calc(100% - 60px - 20px);">
|
<bl-row width="880px" height="250px">
|
||||||
<ChartHeatmap ref="ChartHeatmapRef"></ChartHeatmap>
|
<SentinelChartLine ref="SentinelChartLineRef"></SentinelChartLine>
|
||||||
</bl-row>
|
</bl-row>
|
||||||
</bl-col>
|
|
||||||
|
|
||||||
|
<!-- 热力图 -->
|
||||||
|
<bl-col class="heatmap-container" width="100%" style="height: 360px;">
|
||||||
|
<bl-row class="container-name">编辑热力图</bl-row>
|
||||||
|
<bl-row class="container-sub-name">
|
||||||
|
每日编辑文章数 (每5分钟更新)
|
||||||
|
<span class="iconbl bl-refresh-smile container-refresh" @click="loadArticleHeapmap"></span>
|
||||||
|
</bl-row>
|
||||||
|
<bl-row style="height: calc(100% - 60px - 20px);">
|
||||||
|
<ChartHeatmap ref="ChartHeatmapRef"></ChartHeatmap>
|
||||||
|
</bl-row>
|
||||||
|
</bl-col>
|
||||||
|
</el-scrollbar>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
@ -195,8 +196,8 @@ let now: string = nowWhen()
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
animation: rotation 4s linear infinite;
|
animation: rotation 10s linear infinite;
|
||||||
text-shadow: var(--bl-text-shadow);
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -205,7 +206,7 @@ let now: string = nowWhen()
|
|||||||
$margin-web: 30px 0 50px 0px;
|
$margin-web: 30px 0 50px 0px;
|
||||||
$margin-middle: 10px;
|
$margin-middle: 10px;
|
||||||
|
|
||||||
$width-main: 900px;
|
$width-main: 910px;
|
||||||
$width-web: 420px;
|
$width-web: 420px;
|
||||||
$width-middle: calc(100% -
|
$width-middle: calc(100% -
|
||||||
/* border */
|
/* border */
|
||||||
@ -219,8 +220,7 @@ let now: string = nowWhen()
|
|||||||
|
|
||||||
.main {
|
.main {
|
||||||
@include box($width-main, 100%, $width-main, $width-main);
|
@include box($width-main, 100%, $width-main, $width-main);
|
||||||
padding: 0 10px 10px 20px;
|
padding: 0 0 10px 20px;
|
||||||
$height-greetings: 65px;
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
||||||
// 笔记本图片等
|
// 笔记本图片等
|
||||||
@ -240,21 +240,28 @@ let now: string = nowWhen()
|
|||||||
}
|
}
|
||||||
|
|
||||||
.greetings {
|
.greetings {
|
||||||
height: $height-greetings;
|
|
||||||
@include font(50px, 700);
|
@include font(50px, 700);
|
||||||
@include themeColor(#5C5C5C, var(--el-color-primary));
|
@include themeColor(#5C5C5C, var(--el-color-primary));
|
||||||
text-shadow: var(--bl-text-shadow);
|
text-shadow: var(--bl-text-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.now-time {
|
.now-time {
|
||||||
height: 20px;
|
|
||||||
@include themeColor(#5C5C5C, var(--el-color-primary));
|
@include themeColor(#5C5C5C, var(--el-color-primary));
|
||||||
|
height: 20px;
|
||||||
text-shadow: var(--bl-text-shadow);
|
text-shadow: var(--bl-text-shadow);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.heatmap-container {
|
.el-scrollbar {
|
||||||
opacity: 0;
|
--el-scrollbar-opacity: 1;
|
||||||
|
--el-scrollbar-hover-opacity: 1;
|
||||||
|
--el-scrollbar-bg-color: var(--el-color-primary-light-8);
|
||||||
|
--el-scrollbar-hover-bg-color: var(--el-color-primary-light-6);
|
||||||
|
|
||||||
|
:deep(.el-scrollbar__bar) {
|
||||||
|
width: 5px;
|
||||||
|
right: 3px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -263,7 +270,8 @@ let now: string = nowWhen()
|
|||||||
@include box($width-middle, 100%, $width-middle, $width-middle);
|
@include box($width-middle, 100%, $width-middle, $width-middle);
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
opacity: 0;
|
// opacity: 0;
|
||||||
|
display: none;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -287,21 +295,13 @@ let now: string = nowWhen()
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-height: 1120px) {
|
|
||||||
.main {
|
|
||||||
.heatmap-container {
|
|
||||||
opacity: 1 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 大于1600时使用以下样式
|
// 大于1600时使用以下样式
|
||||||
@media screen and (min-width: 1600px) {
|
@media screen and (min-width: 1600px) {
|
||||||
|
|
||||||
.middle {
|
.middle {
|
||||||
@include themeBorder(1px, #E6E6E6, #171717, 'left');
|
@include themeBorder(1px, #E6E6E6, #171717, 'left');
|
||||||
opacity: 1 !important;
|
// opacity: 1 !important;
|
||||||
margin-left: $margin-middle;
|
display: block;
|
||||||
|
// margin-left: $margin-middle;
|
||||||
padding: 0 10px 10px 20px;
|
padding: 0 10px 10px 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -67,7 +67,7 @@ onActivated(() => {
|
|||||||
transition: 0.3s;
|
transition: 0.3s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
box-shadow: var(--bl-box-shadow-dialog);
|
@include themeShadow(2px 3px 7px 0 rgba(58, 47, 47, 0.5), 3px 3px 10px 0 rgba(0, 0, 0, 1));
|
||||||
|
|
||||||
.icon-shadow {
|
.icon-shadow {
|
||||||
@include font(150px, 500);
|
@include font(150px, 500);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user