From c66e9eaa87989cd0b312fa1d8777a4bf799db0da Mon Sep 17 00:00:00 2001
From: litian <2804272236@qq.com>
Date: 星期四, 25 四月 2024 14:40:34 +0800
Subject: [PATCH] 问题修改

---
 src/views/home.vue |  649 ++++++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 files changed, 599 insertions(+), 50 deletions(-)

diff --git a/src/views/home.vue b/src/views/home.vue
index ec58c69..7f172d6 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -17,6 +17,7 @@
           </div>
           <p>{{ item.name }}</p>
         </div>
+        <div class="reload hover" @click="reload()">鍒锋柊</div>
         <!-- 璁剧疆 -->
         <el-popover placement="right" :width="200" trigger="click">
           <div class="settingBox">
@@ -40,16 +41,29 @@
       <!-- 鑿滃崟鍐呭 -->
       <div class="menuContent" v-if="menuState.open">
         <div class="searchBox">
-          <div class="inputBox">
-            <el-input class="custom-input" placeholder="璇疯緭鍏ュ唴瀹�">
+          <div class="inputBox" v-if="activeMenu !== 2">
+            <el-input class="custom-input" placeholder="璇疯緭鍏ュ唴瀹�" v-model="searchText">
               <template #prefix>
-                <el-icon><Search /></el-icon>
+                <el-icon @click="searchBook"><Search /></el-icon>
               </template>
             </el-input>
           </div>
+          <div v-else class="resourceTab">
+            <div class="tabItem hover" @click="selectResourceType('default')">
+              <p>榛樿璧勬簮</p>
+              <div :class="resourceType == 'default' ? 'text' : 'line'"></div>
+            </div>
+            <hr class="hr" />
+            <div class="tabItem hover" @click="selectResourceType('teacher')">
+              <p>鏁欏笀璧勬簮</p>
+              <div :class="resourceType == 'teacher' ? 'text' : 'line'"></div>
+            </div>
+          </div>
         </div>
         <!-- 鐩綍 -->
-        <div class="" v-if="activeMenu == 0"></div>
+        <div class="menuList" v-if="activeMenu == 0">
+          <front006 />
+        </div>
         <!-- 绗旇 -->
         <div class="notesBox" v-if="activeMenu == 1">
           <div class="screenBox">
@@ -69,15 +83,87 @@
               ></div>
             </div>
           </div>
+          <div class="list-box">
+            <div v-if="scribeData.noteList.length > 0 && !scribeData.loading">
+              <div
+                v-for="(item, index) in scribeData.noteList"
+                :key="item.key"
+                class="listItem hover"
+                @mouseenter="showDeleteBox(item, 'note')"
+                @mouseleave="handleDeleteBox(item, 'note')"
+              >
+                <div class="itemBox noteStyle">
+                  <!-- <div class="flex ai-c jc-sb">
+                      <span class="createDate">{{ item.createDate }}</span>
+                    </div> -->
+                  <div class="textBox">
+                    <div class="chapter">
+                      <span>{{ item.name }}</span
+                      ><span class="chapterName">{{ item.chapter }}</span>
+                    </div>
+                    <!-- <div class="textConNote flex">
+                      <div class="border"></div>
+                      <div class="text">{{ item.selectText }}</div>
+                    </div> -->
+                    <div class="noteText flex">
+                      <!-- <div class="label">绗旇:</div> -->
+                      <div class="con">{{ item.note }}</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="deleteBox" v-show="item.deleteBox" @click="deleteBtn(item, 'note')">
+                  <span
+                    ><el-icon> <Delete /> </el-icon><span>鍒犻櫎</span></span
+                  >
+                </div>
+              </div>
+            </div>
+            <div v-if="scribeData.noteList.length == 0 && !scribeData.loading">
+              <el-empty :image-size="60" description="鏆傛棤鏁版嵁" />
+            </div>
+          </div>
         </div>
         <!-- 璧勬簮 -->
-        <div class="" v-if="activeMenu == 2"></div>
+        <div class="" v-if="activeMenu == 2">
+          <div class="resourceBox">
+            <div class="inputBox">
+              <el-input class="custom-input" placeholder="璇疯緭鍏ュ唴瀹�" v-model="searchText">
+                <template #prefix>
+                  <el-icon @click="searchBook"><Search /></el-icon>
+                </template>
+              </el-input>
+            </div>
+          </div>
+          <div class="list-box">
+            <div>
+              <el-empty :image-size="60" description="鏆傛棤鏁版嵁" />
+            </div>
+          </div>
+        </div>
         <!-- 鐭ヨ瘑鍥捐氨 -->
-        <div class="" v-if="activeMenu == 3"></div>
+        <div class="" v-if="activeMenu == 3">
+          <div class="list-box">
+            <div>
+              <el-empty :image-size="60" description="鏆傛棤鏁版嵁" />
+            </div>
+          </div>
+        </div>
         <!-- 鎴浘 -->
-        <div class="" v-if="activeMenu == 4"></div>
+        <div class="" v-if="activeMenu == 4">
+          <div class="list-box">
+            <div>
+              <el-empty :image-size="60" description="鏆傛棤鏁版嵁" />
+            </div>
+          </div>
+        </div>
         <!-- 鏍囩 -->
-        <div class="" v-if="activeMenu == 5"></div>
+        <div class="" v-if="activeMenu == 5">
+          <div class="list-box">
+            <div>
+              <el-empty :image-size="60" description="鏆傛棤鏁版嵁" />
+            </div>
+          </div>
+        </div>
       </div>
       <!-- 鑿滃崟鍐呭鏀惰捣 -->
       <div class="menuStateBox" v-if="menuState.open">
@@ -100,13 +186,12 @@
             </div>
             <div class="brushImgBox">
               <div><img :src="huabi2" class="brushImg" />鐢荤瑪</div>
-              <!-- <el-switch v-model="headerData.brushToolShow"  @change="brushToolShow"/> -->
             </div>
           </div>
         </div>
         <!-- 寰簲鐢ㄧ洅瀛� -->
         <div class="pageBox-content">
-          <div id="container"></div>
+          <div id="container" @mouseup="handleMouseUp"></div>
           <!-- 鐢荤瑪鐢诲竷 -->
           <div class="canvas-box">
             <canvas
@@ -375,7 +460,13 @@
       </div>
     </div>
   </div>
-  <el-dialog title="娣诲姞绗旇" v-model="addNoteVisble" width="400">
+  <el-dialog
+    title="娣诲姞绗旇"
+    align-center
+    v-model="addNoteVisble"
+    :before-close="handleClose"
+    class="myNoteDialogs"
+  >
     <div class="formBox">
       <el-form ref="form" :model="formData" label-width="80px">
         <el-form-item label="绗旇鏍囬">
@@ -388,32 +479,38 @@
     </div>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="addNoteVisble = false">鍙� 娑�</el-button>
+        <el-button @click="handleClose">鍙� 娑�</el-button>
         <el-button type="primary" @click="addNote">纭� 瀹�</el-button>
       </span>
     </template>
   </el-dialog>
-  <el-dialog title="AI鏅鸿兘闂瓟" v-model="wendaVisible" width="26%">
+  <el-dialog title="AI鏅鸿兘闂瓟" align-center v-model="wendaVisible" width="26%" class="myDialogs">
     <div class="wendabox">
       <iframe src="https://yiyan.baidu.com/" frameborder="0"></iframe>
     </div>
   </el-dialog>
-  <el-dialog title="璇嶅吀" v-model="cidianVisible" width="60%">
+  <el-dialog title="璇嶅吀" align-center v-model="cidianVisible" width="60%" class="myDialogs">
     <div class="wendabox">
       <iframe src="https://www.vocabulary.com/" frameborder="0"></iframe>
     </div>
   </el-dialog>
-  <el-dialog title="GGB鍑芥暟宸ュ叿" v-model="functionVisible" width="60%">
+  <el-dialog
+    title="GGB鍑芥暟宸ュ叿"
+    align-center
+    v-model="functionVisible"
+    width="60%"
+    class="myDialogs"
+  >
     <div class="wendabox">
       <iframe src="https://www.geogebra.org/calculator" frameborder="0"></iframe>
     </div>
   </el-dialog>
-  <el-dialog title="鎬濈淮瀵煎浘" v-model="siweiVisble" width="80%">
+  <el-dialog title="鎬濈淮瀵煎浘" align-center v-model="siweiVisble" width="80%" class="myDialogs">
     <div class="wendabox">
       <iframe src="https://www.iodraw.com/mind" frameborder="0"></iframe>
     </div>
   </el-dialog>
-  <el-dialog title="妯″瀷宸ュ叿" v-model="modelToolVisble" width="80%">
+  <el-dialog title="妯″瀷宸ュ叿" align-center v-model="modelToolVisble" width="80%" class="myDialogs">
     <div class="wendabox">
       <iframe src="https://adjam93.github.io/threejs-model-viewer/#" frameborder="0"></iframe>
     </div>
@@ -421,7 +518,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch, onMounted } from 'vue'
+import { ref, reactive, watch, onMounted, inject } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import useClipboard from 'vue-clipboard3'
+const { toClipboard } = useClipboard()
+const request = inject('request')
+//鑾峰彇璺敱鍣�
+let $router = useRouter()
+//鑾峰彇褰撳墠璺敱鐨勪俊鎭�
+let $route = useRoute()
+import moment from 'moment'
 import { ElMessage } from 'element-plus'
 import mulu from '@/assets/images/menu/mulu.png'
 import biji from '@/assets/images/menu/biji.png'
@@ -492,11 +598,13 @@
 import zoomIn from '../assets/images/operation/zoomIn.png'
 import zoomOut from '../assets/images/operation/zoomOut.png'
 import huabi2 from '../assets/images/operation/huabi.svg'
+import front006 from '@/views/components/front006.vue'
 import { start } from 'qiankun'
+
 onMounted(() => {
-  
-  start()
- 
+  getNotesList() // 鑾峰彇楂樹寒
+  getlineHeightList() //鑾峰彇楂樹寒
+  getScribeList() //鑾峰彇鍒掔嚎
 })
 // 鑿滃崟
 const menuData = reactive([
@@ -527,16 +635,28 @@
 ])
 // 閫変腑鑿滃崟
 const activeMenu = ref(0)
+//璧勬簮绫诲瀷
 
+const resourceType = ref('default')
 // 鑿滃崟鐐瑰嚮
 const menuItemClick = (index) => {
   activeMenu.value = index
   menuState.open = true
 }
+//鍒锋柊褰撳墠椤甸潰
+const reload = () => {
+  location.reload()
+}
+
+const selectResourceType = (type) => {
+  resourceType.value = type
+}
+const searchText = ref<string>('') //绛涢��
 const menuState = reactive({
   open: true,
-  notesColor: ''
+  notesColor: 'all' //绗旇棰滆壊
 })
+
 const settingForm = reactive({
   acoustics: false,
   animation: false
@@ -547,6 +667,11 @@
     menuState.notesColor = item.key
   } else {
     menuState.notesColor = 'all'
+  }
+}
+const searchBook = async () => {
+  if (activeMenu.value == 1) {
+    getNotesList()
   }
 }
 
@@ -843,11 +968,37 @@
 
 //閫変腑鏂囧瓧宸ュ叿鏍�
 const selectText = ref('') //閫変腑鏂囧瓧
+const selectNode = ref(null)
 const showToolBox = ref(false)
 const dialogToolData = reactive({
   left: 500,
-  top: 300
+  top: 300,
+  chapter: '', //閫変腑鏂囧瓧鎵�鍦ㄧ珷鑺�
+  lineHeight: [], //楂樹寒
+  scribeList: [], //鍒掔嚎
+  notesList: [] //绗旇
 })
+
+//璋冪敤瀛愬簲鐢ㄦ枃瀛楅�変腑浜嬩欢
+// const subApp = start()
+// subApp.handleMouseUp()
+
+//閫変腑鏂囧瓧
+const handleMouseUp = (e) => {
+  const txt = window.getSelection()?.toString()
+  selectText.value = txt
+  const node = window.getSelection()
+  console.log(node, 'temp_node')
+  let html = node.baseNode.parentNode.parentNode
+  dialogToolData.chapter = html.firstChild.innerHTML
+  console.log(dialogToolData.chapter)
+  selectNode.value = node
+  if (txt) {
+    showToolBox.value = true
+    dialogToolData.top = e.y
+    dialogToolData.left = e.x
+  }
+}
 const toolActive = ref('楂樹寒')
 const colorActive = ref('')
 const dialogToolList = reactive([
@@ -885,9 +1036,22 @@
 
 //绗旇寮圭獥
 const addNoteVisble = ref(false)
-const formData = ref({
+const formData = reactive({
   name: '',
   desc: ''
+})
+//绗旇寮圭獥鍏抽棴
+const handleClose = () => {
+  addNoteVisble.value = false
+  showToolBox.value = false
+  colorActive.value = ''
+}
+
+//绗旇锛岄珮浜紝鍒掔嚎
+const scribeData = reactive({
+  scribeDataList: [], //鍒掔嚎鑿滃崟鍒楄〃
+  lineHeightList: [], //楂樹寒鑿滃崟鍒楄〃
+  noteList: [] //绗旇鑿滃崟鍒楄〃
 })
 //璇嶅吀
 
@@ -951,7 +1115,7 @@
       break
   }
 }
-const dialogToolHandle = (item) => {
+const dialogToolHandle = async (item) => {
   toolActive.value = item.name
   colorActive.value = ''
   switch (item.name) {
@@ -965,23 +1129,25 @@
     case '楂樹寒':
       break
     case '绗旇':
-      formData.value.name = ''
-      formData.value.desc = ''
+      formData.name = ''
+      formData.desc = ''
       break
     case '鏍囨敞':
       break
     case '澶嶅埗':
       try {
-        var successful = document.execCommand('copy') //鎵ц澶嶅埗鍛戒护
-        var msg = successful ? '鎴愬姛' : '澶辫触'
-        ElMessage.success({
-          message: '宸插鍒舵枃鏈�',
+        //澶嶅埗
+        await toClipboard(selectText.value)
+        //涓嬮潰鍙互璁剧疆澶嶅埗鎴愬姛鐨勬彁绀烘绛夋搷浣�
+        ElMessage({
+          message: '澶嶅埗鎴愬姛',
           type: 'success'
         })
       } catch (err) {
         ElMessage.error('鏃犳硶澶嶅埗鏂囨湰锛�' + err)
       }
       showToolBox.value = false
+      toolActive.value = '楂樹寒'
       break
     case '璇嶅吀':
       cidianVisible.value = true
@@ -994,6 +1160,253 @@
   if (toolActive.value == '绗旇') {
     addNoteVisble.value = true
   }
+  if (toolActive.value == '楂樹寒') {
+    let heightLightElement = document.createElement("i");
+        heightLightElement.style.backgroundColor = colorActive.value;
+        heightLightElement.innerText = selectText.value;
+        let rReg = new RegExp(`${selectText.value}`, "ig");
+        console.log(selectNode.value)
+        let textDom = selectNode.value.anchorNode.parentNode;
+        console.log(textDom)
+        let text = textDom.innerHTML;
+        let rHtml = "";
+        rHtml = text.replace(
+          rReg,
+          `<span style="background: ${colorActive.value};">${selectText.value}</span>`
+        );
+        textDom.innerHTML = rHtml;
+    dialogToolData.lineHeight.push({
+      selectNode: selectNode.value,
+      selectText: selectText.value,
+      color: colorActive.value,
+      chapter: dialogToolData.chapter,
+      color: item.key,
+      createDate: new Date()
+    })
+    request({
+      url: '/identity/api/ApiAppUserSetKey',
+      method: 'post',
+      data: {
+        setKeyRequests: [
+          {
+            domain: 'highLight',
+            key: '1',
+            value: JSON.stringify(dialogToolData.lineHeight)
+          }
+        ]
+      }
+    }).then((res) => {
+      showToolBox.value = false
+      colorActive.value = ''
+      toolActive.value = '楂樹寒'
+      getlineHeightList()
+      setTimeout(() => {
+        lock.value = false
+      }, 1000)
+    })
+  }
+  if (toolActive.value == '鍒掔嚎') {
+    dialogToolData.scribeList.push({
+      selectNode: selectNode.value,
+      selectText: selectText.value,
+      color: colorActive.value,
+      chapter: dialogToolData.chapter,
+      color: item.key,
+      createDate: new Date()
+    })
+    request({
+      url: '/identity/api/ApiAppUserSetKey',
+      method: 'post',
+      data: {
+        setKeyRequests: [
+          {
+            domain: 'underline',
+            key: '1',
+            value: JSON.stringify(dialogToolData.scribeList)
+          }
+        ]
+      }
+    }).then((res) => {
+      colorActive.value = ''
+      showToolBox.value = false
+      toolActive.value = '楂樹寒'
+      getScribeList()
+      setTimeout(() => {
+        lock.value = false
+      }, 1000)
+    })
+  }
+}
+
+const lock = ref(false)
+const addNote = () => {
+  const obj = {
+    name: formData.name,
+    desc: formData.desc
+  }
+  if (!lock.value) {
+    lock.value = true
+    if (formData.desc.replace(/^\s*|\s*$/g, '')) {
+      if (formData.name.replace(/^\s*|\s*$/g, '')) {
+        dialogToolData.notesList.push({
+          selectNode: selectNode.value,
+          selectText: selectText.value,
+          color: colorActive.value,
+          chapter: dialogToolData.chapter,
+          createDate: new Date(),
+          name: formData.name.replace(/^\s*|\s*$/g, ''),
+          note: formData.desc.replace(/^\s*|\s*$/g, '')
+        })
+        request({
+          url: '/identity/api/ApiAppUserSetKey',
+          method: 'post',
+          data: {
+            setKeyRequests: [
+              {
+                domain: 'notes',
+                key: '1',
+                value: JSON.stringify(dialogToolData.notesList)
+              }
+            ]
+          }
+        }).then((res) => {
+          showToolBox.value = false
+          addNoteVisble.value = false
+          colorActive.value = ''
+          toolActive.value = '楂樹寒'
+          getNotesList()
+          setTimeout(() => {
+            lock.value = false
+          }, 1000)
+        })
+      } else {
+        ElMessage.error('绗旇鏍囬涓嶈兘涓虹┖!')
+        lock.value = false
+      }
+    } else {
+      ElMessage.error('绗旇鍐呭涓嶈兘涓虹┖!')
+      lock.value = false
+    }
+  }
+}
+//绗旇
+const getNotesList = () => {
+  scribeData.noteList = []
+  request({
+    url: '/identity/api/ApiGetAppUserKey',
+    method: 'post',
+    data: {
+      domain: 'notes',
+      keys: ['1']
+    }
+  }).then((res) => {
+    if (res && res.length > 0 && res[0].value) {
+      dialogToolData.notesList = JSON.parse(res[0].value)
+      let list = JSON.parse(res[0].value)
+      list.forEach((item) => {
+        item.createDate = moment(item.createDate).format('YYYY-MM-DD')
+        if (searchText.value) {
+          searchText.value = searchText.value.replace(/^\s*|\s*$/g, '')
+          let text = searchText.value.replace(/^\s*|\s*$/g, '')
+          if (item.text.indexOf(text) > -1) {
+            if (menuState.notesColor == 'all') {
+              scribeData.noteList.push(item)
+            } else if (menuState.notesColor == item.color) {
+              scribeData.noteList.push(item)
+            }
+          }
+        } else {
+          if (menuState.notesColor == 'all') {
+            scribeData.noteList.push(item)
+          } else if (menuState.notesColor == item.color) {
+            scribeData.noteList.push(item)
+          }
+        }
+      })
+
+      console.log(scribeData.noteList)
+    }
+  })
+}
+//鍒掔嚎
+const getScribeList = () => {
+  scribeData.scribeDataList = []
+  request({
+    url: '/identity/api/ApiGetAppUserKey',
+    method: 'post',
+    data: {
+      domain: 'underline',
+      keys: ['1']
+    }
+  }).then((res) => {
+    if (res && res.length > 0 && res[0].value) {
+      dialogToolData.scribeList = JSON.parse(res[0].value)
+      scribeData.scribeDataList = JSON.parse(res[0].value)
+    }
+  })
+}
+//楂樹寒
+const getlineHeightList = () => {
+  scribeData.lineHeightList = []
+  request({
+    url: '/identity/api/ApiGetAppUserKey',
+    method: 'post',
+    data: {
+      domain: 'highLight',
+      keys: ['1']
+    }
+  }).then((res) => {
+    if (res && res.length > 0 && res[0].value) {
+      dialogToolData.lineHeight = JSON.parse(res[0].value)
+      scribeData.lineHeightList = JSON.parse(res[0].value)
+    }
+  })
+}
+
+//鍒犻櫎楂樹寒/鍒掔嚎
+//榧犳爣绉诲叆鏄剧ず鍒犻櫎鎸夐挳
+const showDeleteBox = (item, type) => {
+  if (type == 'note') {
+    if (item.deleteBox == false) {
+      scribeData.noteList.forEach((i) => {
+        i.deleteBox = false
+      })
+      item.deleteBox = true
+    }
+  }
+}
+//榧犳爣绉诲嚭
+const handleDeleteBox = (item) => {
+  item.deleteBox = false
+}
+//鍒犻櫎
+const deleteBtn = (item, type) => {
+  if (type == 'note') {
+    // 绉婚櫎
+    let index = scribeData.noteList.findIndex((itemData) => itemData.text == item.text)
+    if (index > -1) {
+      scribeData.noteList.splice(index, 1)
+      request({
+        url: '/identity/api/ApiAppUserSetKey',
+        method: 'post',
+        data: {
+          setKeyRequests: [
+            {
+              domain: 'notes',
+              key: '1',
+              value: JSON.stringify(scribeData.noteList)
+            }
+          ]
+        }
+      }).then((res) => {
+        ElMessage({
+          message: '鍒犻櫎绗旇鎴愬姛!',
+          type: 'success'
+        })
+        getNotesList()
+      })
+    }
+  }
 }
 
 //鍐呭鍖哄煙椤堕儴鏄剧ず
@@ -1004,8 +1417,7 @@
   minutes: 0,
   hours: 0,
   process: '42%',
-  pageSize: 100,
-  brushToolShow: true
+  pageSize: 100
 })
 //涓婅鏃堕暱璁℃椂鍣�
 const timer = ref(null)
@@ -1040,13 +1452,6 @@
     headerData.pageSize = Number(headerData.pageSize) + 5
   } else {
     headerData.pageSize = Number(headerData.pageSize) - 5
-  }
-}
-
-const brushToolShow = () => {
-  console.log(headerData.brushToolShow, 123)
-  if (headerData.brushToolShow) {
-    ctx = canvas.value.getContext('2d') as CanvasRenderingContext2D
   }
 }
 </script>
@@ -1101,6 +1506,12 @@
           margin-bottom: 4px;
         }
       }
+      .reload {
+        width: 80px;
+        position: absolute;
+        bottom: 100px;
+        text-align: center;
+      }
       .setting {
         width: 80px;
         position: absolute;
@@ -1120,15 +1531,56 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        .inputBox {
-          .custom-input {
-            border: 1px solid #0093ff !important;
-            border-radius: 50px;
-            overflow: hidden;
-          }
-          .is-focus,
-          .el-input__wrapper {
-            box-shadow: none !important;
+      }
+      .resourceBox {
+        width: 100%;
+        height: 60px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .resourceTab {
+        width: 100%;
+        height: 60px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 16px;
+        .hr {
+          height: 25px;
+          color: #dbdbdb !important;
+        }
+        .tabItem:first-child(1) {
+          border-right: 1px solid #707070;
+        }
+        .tabItem {
+          flex: 1;
+          text-align: center;
+          line-height: 57px;
+        }
+        .text {
+          width: 43px;
+          height: 3px;
+          margin: 0 auto;
+          background: #0093ff;
+          border-radius: 3px 3px 0px 0px;
+        }
+        .line {
+          height: 3px;
+        }
+      }
+      .inputBox {
+        .custom-input {
+          border: 1px solid #0093ff !important;
+          border-radius: 50px;
+          overflow: hidden;
+        }
+        .is-focus,
+        .el-input__wrapper {
+          box-shadow: none !important;
+          .el-input__inner {
+            border: none !important;
+            height: 34px !important;
           }
         }
       }
@@ -1185,10 +1637,68 @@
           border: 1px solid #0093ff;
         }
       }
+      .menuList {
+        height: calc(100% - 60px);
+        overflow-y: auto;
+        padding: 10px;
+      }
+      .list-box {
+        .listItem {
+          border-bottom: 1px solid rgba(212, 212, 212, 0.16);
+          position: relative;
+          padding: 10px;
+          line-height: 20px;
+          .textBox {
+            padding: 15px 10px;
+            .chapter {
+              color: #0093ff;
+            }
+            .chapterName{
+              float: right;
+            }
+          }
+          .noteText {
+            text-indent: 2ch;
+            margin-top: 5px;
+            .label {
+              width: 40px;
+              flex-shrink: 0;
+            }
+
+            .con {
+              max-height: 65px;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 3;
+              overflow: hidden;
+            }
+          }
+          .deleteBox {
+            position: absolute;
+            right: 0;
+            top: 0;
+            height: 100%;
+            width: 70px;
+            background-color: #0093ff;
+            color: #fff;
+            display: flex;
+            align-items: center;
+
+            span {
+              margin: 0 auto;
+            }
+
+            .el-icon {
+              margin-right: 5px;
+            }
+          }
+        }
+      }
     }
     .menuStateBox {
       width: 25px;
       height: 25px;
+      background: #fff;
       border-radius: 3px 0px 0px 3px;
       border: 1px solid #bce3ff;
       position: fixed;
@@ -1259,6 +1769,7 @@
       .pageBox-content {
         height: calc(100% - 57px);
         position: relative;
+        overflow-y: auto;
         #container {
           background: #fbf9f4;
           height: 100%;
@@ -1339,6 +1850,7 @@
         .el-tabs__item {
           flex: 1 !important;
           padding: 0 !important;
+          text-align: center;
         }
         .el-tabs__active-bar {
           width: 43px !important;
@@ -1392,7 +1904,8 @@
       width: 85px;
       background-image: linear-gradient(to bottom, #0093ff, #005dff);
       position: fixed;
-      height: 430px;
+      // height: 430px;
+      height: 130px;
       top: 300px;
       left: 400px;
       z-index: 999;
@@ -1413,6 +1926,9 @@
           margin-right: 5px;
         }
       }
+    }
+    .draggableBox:hover {
+      height: 430px;
     }
     .floatToolItem:hover {
       background-color: #fff;
@@ -1491,4 +2007,37 @@
     height: 100%;
   }
 }
+.myNoteDialogs {
+  width: 400px !important;
+}
+.myDialogs {
+  width: 628px;
+
+  .el-dialog__header {
+    padding: 15px;
+    margin-right: 0;
+    border-bottom: 1px solid #f4f4f4;
+  }
+
+  .el-dialog__title {
+    font-weight: bold;
+    font-size: 16px;
+  }
+
+  .el-dialog__headerbtn {
+    top: 6px;
+    right: 6px;
+  }
+
+  .el-dialog__footer {
+    padding: 15px;
+    border-top: 1px solid #f4f4f4;
+  }
+
+  .myDialogs-footer {
+    .el-button {
+      padding: 0 20px;
+    }
+  }
+}
 </style>

--
Gitblit v1.9.1