From 089bf5d2378b3c4a61d795b2a92bede2c193b771 Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Tue, 06 Jan 2026 11:22:58 +0800
Subject: [PATCH] 1

---
 src/assets/css/page/note-page.less |  341 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 341 insertions(+), 0 deletions(-)

diff --git a/src/assets/css/page/note-page.less b/src/assets/css/page/note-page.less
new file mode 100644
index 0000000..536a0ce
--- /dev/null
+++ b/src/assets/css/page/note-page.less
@@ -0,0 +1,341 @@
+.note-container {
+  height: 100%;
+
+  /deep/.el-scrollbar__wrap {
+    overflow-x: hidden;
+  }
+}
+
+.el-aside-one {
+  background-color: #fff;
+  overflow: hidden;
+
+  .btn-header {
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    padding: 0;
+
+    /deep/.btn-dropdown-menu {
+      border-radius: 5px;
+      overflow: hidden;
+    }
+
+    /deep/button {
+      height: 35px;
+      line-height: 10px;
+      font-weight: 400;
+
+      &:first-child {
+        width: 160px !important;
+      }
+    }
+  }
+
+  .note-headline {
+    height: 40px;
+    line-height: 40px;
+    color: #353434;
+    padding-left: 20px;
+    font-size: 16px;
+    font-weight: 300;
+  }
+
+  .note-aside {
+    height: calc(100% - 100px) !important;
+    overflow-y: auto;
+    user-select: none;
+
+    .note-list-first {
+      height: 40px;
+      line-height: 40px;
+      padding-left: 20px;
+      cursor: pointer;
+      position: relative;
+
+      &:hover {
+        background: #f6f3f3;
+      }
+
+      > span {
+        padding-left: 5px;
+        font-size: 13px;
+        cursor: pointer;
+      }
+
+      .icon-menu-nav {
+        position: absolute;
+        right: 10px;
+        top: 1px;
+      }
+    }
+
+    .note-list-two {
+      height: 35px;
+      line-height: 35px;
+      padding-left: 30px;
+      cursor: pointer;
+
+      i {
+        color: #448aff;
+        position: relative;
+        top: 2px;
+      }
+
+      span {
+        font-size: 12px;
+        cursor: pointer;
+      }
+
+      input {
+        width: 176px;
+        border: 1px solid #66b1ff;
+        height: 25px;
+        line-height: 25px;
+        margin-left: 5px;
+        padding: 2px 3px;
+        font-size: 12px;
+        border-radius: 3px;
+      }
+
+      &:hover {
+        color: #448aff;
+      }
+    }
+
+    .note-list-active {
+      background: #f6f3f3;
+    }
+  }
+}
+
+.el-aside-two {
+  background-color: #f4f6f9;
+}
+
+.el-aside-two .search-header {
+  height: 60px;
+  background: #f4f6f9;
+  text-align: center;
+  position: relative;
+
+  i {
+    position: absolute;
+    left: 16px;
+    top: 19px;
+    font-size: 20px;
+    color: #505050;
+  }
+
+  input {
+    height: 30px;
+    width: 80%;
+    position: absolute;
+    left: 40px;
+    top: 15px;
+    padding: 0 3px;
+    font-size: 14px;
+    background: #f4f6f9;
+
+    &::-webkit-input-placeholder {
+      color: rgb(158, 150, 150);
+      font-size: 13px;
+    }
+  }
+}
+
+.el-aside-two .title-header {
+  height: 40px;
+  line-height: 40px;
+  position: relative;
+  color: #7b7777;
+  border-top: 1px solid #ece8e8;
+  border-bottom: 1px solid #ece8e8;
+  user-select: none;
+
+  span {
+    margin-left: 10px;
+    font-size: 14px;
+  }
+
+  .load-span {
+    position: absolute;
+    right: 5px;
+    display: inline-block;
+    margin-right: 10px;
+    color: #6dabdc;
+    font-size: 12px;
+
+    .sort-icon {
+      cursor: pointer;
+      font-size: 18px;
+      color: #7b7777;
+    }
+  }
+}
+
+.el-aside-two .article-main {
+  width: 100%;
+  height: calc(100% - 102px);
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  .note-empty {
+    height: 150px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin-top: 30%;
+
+    .svg-notebook {
+      width: 110px;
+      height: 122px;
+      font-size: 100px;
+      color: #ccc;
+    }
+  }
+
+  .article-row {
+    min-height: 50px;
+    // border-bottom: 2px solid #ffffff;
+    padding: 10px 10px 5px 10px;
+    position: relative;
+
+    background: white;
+    margin: 8px 5px;
+    border-radius: 5px;
+
+    .article-title {
+      height: 24px;
+      line-height: 24px;
+      font-size: 14px;
+      width: 327px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: pointer;
+      i{
+        display: none;
+      }
+    }
+
+    .article-tool {
+      height: 20px;
+      width: 56px;
+      position: absolute;
+      right: 5px;
+      top: 10px;
+      display: none;
+      text-align: right;
+
+      i {
+        cursor: pointer;
+        margin-left: 2px;
+        margin-right: 3px;
+      }
+
+      .el-icon-edit-outline {
+        color: rgb(64, 158, 255);
+      }
+
+      .el-icon-delete {
+        color: red;
+      }
+
+      .recover-note {
+        color: rgb(64, 158, 255);
+      }
+    }
+
+    .article-items {
+      display: flex;
+      align-items: center;
+
+      .article-item {
+        flex-grow: 1;
+
+        .article-date {
+          display: flex;
+          align-items: center;
+          padding-top: 4px;
+          font-size: 10px;
+          color: #a7afbc;
+          font-weight: 300;
+          line-height: 1.6;
+
+          span {
+            margin-right: 15px;
+          }
+        }
+
+        .article-abstract {
+          display: -webkit-box;
+          flex-grow: 1;
+          max-height: 42px;
+          font-size: 12px;
+          color: #b5b5b5;
+          line-height: 1.6;
+          text-overflow: ellipsis;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          word-break: break-word;
+          overflow: hidden;
+          cursor: pointer;
+        }
+
+        &.item-image {
+          width: calc(100% - 56px - 16px);
+        }
+      }
+
+      .article-image {
+        width: 56px;
+        height: 56px;
+        flex-grow: 0;
+        flex-shrink: 0;
+        margin-left: 16px;
+        cursor: pointer;
+
+        /deep/.el-image {
+          width: 100%;
+          height: 100%;
+          border-radius: 3px;
+        }
+
+        /deep/.el-image__error {
+          font-size: 10px;
+          background-color: white;
+        }
+
+        img {
+          border-radius: 3px;
+        }
+      }
+
+      &:hover {
+        .article-image /deep/.el-image__error {
+          background: #f5f7fa;
+          color: #c0c4cc;
+        }
+      }
+    }
+
+    &:hover,
+    &.active-row {
+      .article-title {
+        color: #5c504c;
+        font-weight: bold;
+        width: 270px;
+      }
+
+      .article-tool {
+        display: block;
+      }
+
+
+      box-shadow: 0 0 0 #ccc;
+    }
+  }
+}

--
Gitblit v1.9.3