From a1f8fc2fdf89ab50cd46c5ad96f7fe3dbc333756 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期一, 13 五月 2024 14:53:23 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/TextbookReader

---
 src/views/home.vue | 1103 ++++++++++++++++++++++++++++++++++++++-------------------
 1 files changed, 737 insertions(+), 366 deletions(-)

diff --git a/src/views/home.vue b/src/views/home.vue
index 54bdea4..44c6920 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="homeBox">
     <div class="headerBox">
-      <div><img :src="logo" /></div>
+      <!-- <span class="logoTxt">鍖椾含甯堣寖澶у鍑虹増闆嗗洟</span> -->
+      <img :src="logo" />
       <div class="userInfoBox">
         <div></div>
         <div></div>
-        <div><div class="layout">閫�鍑�</div></div>
+        <div><div class="layout hover" @click="layoutBtn">閫�鍑�</div></div>
       </div>
     </div>
     <div class="contentBox">
@@ -24,14 +25,58 @@
         </div>
         <div class="reload hover" @click="reload()">鍒锋柊</div>
         <!-- 璁剧疆 -->
-        <el-popover placement="right" :width="200" trigger="click">
+        <el-popover placement="right" :width="300" trigger="click">
           <div class="settingBox">
             <el-form :model="settingForm" label-width="auto" style="max-width: 400px">
-              <el-form-item label="绛旈闊虫晥">
-                <el-switch v-model="settingForm.acoustics" />
+              <el-form-item label="瀛椾綋澶у皬">
+                <div class="lineStyle">
+                  <div class="lineTypeBox">
+                    <div
+                      v-for="item in settingForm.fontSizeList"
+                      :key="item.key"
+                      :class="
+                        settingForm.fontSizeActive == item.key
+                          ? 'typeItem lineTypeActive'
+                          : 'typeItem'
+                      "
+                      @click="fontSizeSelect(item)"
+                    >
+                      {{ item.lable }}
+                      <div class="activeIcon" v-if="settingForm.fontSizeActive == item.key">
+                        <img :src="xuanzhong" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </el-form-item>
-              <el-form-item label="绛旈鍔ㄧ敾">
-                <el-switch v-model="settingForm.animation" />
+              <div class="inline">
+                <el-form-item label="绛旈闊虫晥">
+                  <el-switch v-model="settingForm.acoustics" />
+                </el-form-item>
+                <el-form-item label="绛旈鍔ㄧ敾">
+                  <el-switch v-model="settingForm.animation" />
+                </el-form-item>
+              </div>
+              <el-form-item label="搴曡壊">
+                <div class="bgColor">
+                  <div
+                    v-for="item in settingForm.bgColorList"
+                    :key="item.key"
+                    class="flex1 hover"
+                    @click="bgColorSelect(item)"
+                  >
+                    <div
+                      :style="{
+                        background: item.key,
+                        'border-color':
+                          item.key == settingForm.bgColorActive ? '#0093FF' : '#EBEBEB'
+                      }"
+                      class="scribeItem"
+                    >
+                      <img :src="xuanzhong1" v-if="item.key == settingForm.bgColorActive" />
+                    </div>
+                  </div>
+                </div>
               </el-form-item>
             </el-form>
           </div>
@@ -94,32 +139,41 @@
               ></div>
             </div>
           </div>
-          <div class="list-box" v-loading="scribeData.loading">
+          <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">
-                <div class="itemBox noteStyle">
-                  <div class="textBox">
-                    <div class="title">
-                      <div class="title-con">
-                        <div class="round" :style="{ background: item.color }"></div>
-                        <span>{{ item.name }}</span>
-                      </div>
-                      <div>
-                        <el-icon size="18" color="#0093ff" @click="jumpContent('note' + index)"
-                          ><LocationInformation
-                        /></el-icon>
-                        <img :src="bianji" @click="update(item, 'note')" />
-                        <img :src="shanchu" @click="deleteBtn(item, 'note')" />
-                      </div>
+                <div class="textBox">
+                  <div class="title">
+                    <div class="title-con">
+                      <div class="border-left" :style="{ 'border-right-color': item.color }"></div>
+                      <span>{{ item.createDate }}</span>
                     </div>
-                    <div class="noteText">
-                      <div class="con">{{ item.note }}</div>
-                    </div>
-                    <div class="chapter">
-                      <span class="createDate">{{ item.createDate }}</span>
-                      <span class="chapterName">{{ item.chapter }}</span>
+                    <div>
+                      <img :src="bianji" @click="update(item, 'note')" />
+                      <img :src="shanchu" @click="deleteBtn(item, 'note')" />
                     </div>
                   </div>
+                  <div
+                    class="noteText hover"
+                    @click="jumpContent('note' + index)"
+                    :style="{
+                      background:
+                        item.color == '#F5E12A'
+                          ? 'rgba(255,234,41,0.1)'
+                          : item.color == '#76F0AE'
+                            ? 'rgba(83,255,162,0.1)'
+                            : item.color == '#59CFF5'
+                              ? 'rgba(93,216,255,0.1)'
+                              : item.color == '#CAA5FC'
+                                ? 'rgba(205,167,255,0.1)'
+                                : item.color == '#F5A0B9'
+                                  ? 'rgba(255,167,193,0.1)'
+                                  : item.color
+                    }"
+                  >
+                    <div class="con">{{ item.note }}</div>
+                  </div>
+                  <div class="chapter">{{ item.selectText }}</div>
                 </div>
               </div>
             </div>
@@ -156,20 +210,21 @@
             <div class="inputBox" v-if="!searchShow">
               <el-input class="custom-input" placeholder="璇疯緭鍏ュ唴瀹�" v-model="searchText">
                 <template #prefix>
-                  <el-icon @click="searchBook"><Search /></el-icon>
+                  <el-icon @click="searchBook" class="hover"><Search /></el-icon>
                 </template>
               </el-input>
             </div>
           </div>
           <div class="list-box">
-            <div v-if="resourceData.length > 0" class="resourceList">
+            <div v-if="resourceDataList.length > 0" class="resourceList">
               <el-row :gutter="20">
-                <el-col :span="12" v-for="(item, index) in resourceData" :key="item">
-                  <div class="resourceItem hover">
+                <el-col :span="12" v-for="(item, index) in resourceDataList" :key="item">
+                  <div class="resourceItem hover" @click="goResourceDetail(item)">
                     <div class="resourceImg">
                       <img :src="video" mode="" />
                     </div>
-                    <div class="rName" @click="goResourceDetail(item)">{{ item.name }}</div>
+                    <div class="rName" v-if="searchText != ''" v-html="item.name"></div>
+                    <div class="rName" v-else>{{ item.name }}</div>
                   </div>
                 </el-col>
               </el-row>
@@ -197,7 +252,10 @@
                 class="captureItem"
                 @click="getCapture(item)"
               >
-                <img :src="item.imgUrl" class="capture" mode="aspectFill" />
+                <div class="imgBox">
+                  <img :src="item.imgUrl" class="capture" mode="aspectFill" />
+                </div>
+                <div class="captureName">{{ item.name }}</div>
               </div>
             </div>
             <div v-else>
@@ -244,12 +302,7 @@
         <!-- 寰簲鐢ㄧ洅瀛� -->
         <div class="pageBox-content" @scroll="pageScroll">
           <div class="content-box">
-            <div
-              id="container"
-              @mousedown="handleMouseDown"
-              @mousemove="handleMousemove"
-              @mouseup="handleMouseUp"
-            ></div>
+            <div id="container" @mousedown="handleMouseDown" @mousemove="handleMousemove"></div>
             <!-- 鐢荤瑪鐢诲竷 -->
             <div class="canvas-box" v-show="canvasShow">
               <canvas id="canvasRef" :width="canvasWith" :height="canvasheight"></canvas>
@@ -260,7 +313,7 @@
       <!-- 鏁欏缁勪欢 -->
       <div class="toolBox">
         <div class="toolTitle">
-          鏁欏缁勪欢
+          <span>{{ toolState.open ? '鏁欏缁勪欢' : '缁勪欢' }}</span>
           <div class="text"></div>
         </div>
         <div class="menuList">
@@ -332,34 +385,51 @@
         >
           <el-popover
             placement="right"
-            :width="
-              floatingToolData.activeToolData == '鏍囨敞'
-                ? 120
-                : floatingToolData.activeToolData == '娓呴櫎'
-                  ? 200
-                  : 250
-            "
+            width="120"
             trigger="click"
-            v-if="
-              floatingToolData.activeToolData == '鐢荤瑪' ||
-              floatingToolData.activeToolData == '娓呴櫎' ||
-              floatingToolData.activeToolData == '鏂囧瓧' ||
-              floatingToolData.activeToolData == '鏍囨敞'
-            "
+            v-if="floatingToolData.activeToolData == '鏍囨敞'"
           >
             <div class="popinnerBox">
-              <div class="brush" v-if="floatingToolData.activeToolData == '鐢荤瑪'">
+              <div class="label" v-if="floatingToolData.activeToolData == '鏍囨敞'">
+                <div class="labelItem hover" @click="labelShow('hide')">
+                  <img :src="hide" />
+                  <div>闅愯棌</div>
+                </div>
+                <div class="labelItem hover" @click="labelShow('show')">
+                  <img :src="show" />
+                  <div>鏄剧ず</div>
+                </div>
+              </div>
+            </div>
+            <template #reference>
+              <div :class="floatingToolData.activeToolData == item.name ? 'floatToolActive floatToolItem' : 'floatToolItem'">
+                <img :src="floatingToolData.activeToolData == item.name ? item.activeIcon : item.icon" alt="" />
+                <div class="text">{{ item.name }}</div>
+              </div>
+            </template>
+          </el-popover>
+          <div :class="floatingToolData.activeToolData == item.name ? 'floatToolActive floatToolItem' : 'floatToolItem'" v-else @click="floatItemHandle(item)">
+            <img :src="floatingToolData.activeToolData == item.name ? item.activeIcon : item.icon" alt="" />
+            <div class="text">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="brushBox" v-if="floatingToolData.activeToolData == '鐢荤瑪'">
+        <div class="toolList">
+          <el-popover placement="top" width="250" trigger="click">
+            <div class="popinnerBox">
+              <div class="brush" >
                 <div class="thickness">
                   <div
-                    :class="floatingToolData.thicknessActive == '1' ? 'small active' : 'small'"
+                    :class="toolSelectData.thicknessActive == '1' ? 'small active' : 'small'"
                     @click="selectThickness('1')"
                   ></div>
                   <div
-                    :class="floatingToolData.thicknessActive == '3' ? 'middle active' : 'middle'"
+                    :class="toolSelectData.thicknessActive == '3' ? 'middle active' : 'middle'"
                     @click="selectThickness('3')"
                   ></div>
                   <div
-                    :class="floatingToolData.thicknessActive == '5' ? 'large active' : 'large'"
+                    :class="toolSelectData.thicknessActive == '5' ? 'large active' : 'large'"
                     @click="selectThickness('5')"
                   ></div>
                 </div>
@@ -367,27 +437,27 @@
                   <div class="lineTypeBox">
                     <div
                       :class="
-                        floatingToolData.lineTypeActive == 'solid'
+                        toolSelectData.lineTypeActive == 'solid'
                           ? 'typeItem lineTypeActive'
                           : 'typeItem'
                       "
                       @click="selectLineType('solid')"
                     >
                       <div class="solid"></div>
-                      <div class="activeIcon" v-if="floatingToolData.lineTypeActive == 'solid'">
+                      <div class="activeIcon" v-if="toolSelectData.lineTypeActive == 'solid'">
                         <img :src="xuanzhong" />
                       </div>
                     </div>
                     <div
                       :class="
-                        floatingToolData.lineTypeActive == 'dashed'
+                        toolSelectData.lineTypeActive == 'dashed'
                           ? 'typeItem lineTypeActive'
                           : 'typeItem'
                       "
                       @click="selectLineType('dashed')"
                     >
                       <div class="dashed"></div>
-                      <div class="activeIcon" v-if="floatingToolData.lineTypeActive == 'dashed'">
+                      <div class="activeIcon" v-if="toolSelectData.lineTypeActive == 'dashed'">
                         <img :src="xuanzhong" />
                       </div>
                     </div>
@@ -400,38 +470,40 @@
                       @click="lineColorSelect(item)"
                     >
                       <div :style="{ background: item.key }" class="scribeItem">
-                        <img :src="xuanzhong" v-if="item.key == floatingToolData.lineColorActive" />
+                        <img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" />
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-              <div class="cleanup" v-if="floatingToolData.activeToolData == '娓呴櫎'">
-                <div class="cleanupItem hover" @click="cleanUpSelect('prev')">
-                  <img :src="clearPrevious" />
-                  <div>娓呴櫎涓婁竴姝�</div>
+            </div>
+            <template #reference>
+              <div class="floatToolItem" @click="toolSelectHandle('huabi')">
+                <div class="imgBox">
+                  <img :src="hide" alt="" />
                 </div>
-                <div class="cleanupItem hover" @click="cleanUpSelect('all')">
-                  <img :src="clear" />
-                  <div>娓呴櫎鍏ㄩ儴</div>
-                </div>
+                <div class="text">鐢荤瑪</div>
               </div>
-              <div class="write" v-if="floatingToolData.activeToolData == '鏂囧瓧'">
+            </template>
+          </el-popover>
+          <el-popover placement="top" width="250" trigger="click">
+            <div class="popinnerBox">
+              <div class="write">
                 <div class="characters">
                   <div
-                    :class="floatingToolData.fontSizeActive == '14' ? 'small active' : 'small'"
+                    :class="toolSelectData.fontSizeActive == '14' ? 'small active' : 'small'"
                     @click="selectfontSize('14')"
                   >
                     灏�
                   </div>
                   <div
-                    :class="floatingToolData.fontSizeActive == '16' ? 'middle active' : 'middle'"
+                    :class="toolSelectData.fontSizeActive == '16' ? 'middle active' : 'middle'"
                     @click="selectfontSize('16')"
                   >
                     涓�
                   </div>
                   <div
-                    :class="floatingToolData.fontSizeActive == '18' ? 'large active' : 'large'"
+                    :class="toolSelectData.fontSizeActive == '18' ? 'large active' : 'large'"
                     @click="selectfontSize('18')"
                   >
                     澶�
@@ -446,33 +518,99 @@
                       @click="lineColorSelect(item)"
                     >
                       <div :style="{ background: item.key }" class="scribeItem">
-                        <img :src="xuanzhong" v-if="item.key == floatingToolData.lineColorActive" />
+                        <img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" />
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-              <div class="label" v-if="floatingToolData.activeToolData == '鏍囨敞'">
-                <div class="labelItem hover" @click="labelShow('hide')">
-                  <img :src="hide" />
-                  <div>闅愯棌</div>
+            </div>
+            <template #reference>
+              <div class="floatToolItem" @click="toolSelectHandle('wenzi')">
+                <div class="imgBox">
+                <img :src="wenzi2" alt="" />
                 </div>
-                <div class="labelItem hover" @click="labelShow('show')">
-                  <img :src="show" />
-                  <div>鏄剧ず</div>
+                <div class="text">鏂囧瓧</div>
+              </div>
+            </template>
+          </el-popover>
+          <el-popover placement="top" width="250" trigger="click">
+            <div class="popinnerBox">
+              <div class="write">
+                <div class="characters">
+                  <div
+                    :class="floatingToolData.fontSizeActive == '14' ? 'small active' : 'small'"
+                    @click="selectfontSize('14')"
+                  >
+                    灏�
+                  </div>
+                  <div
+                    :class="toolSelectData.fontSizeActive == '16' ? 'middle active' : 'middle'"
+                    @click="selectfontSize('16')"
+                  >
+                    涓�
+                  </div>
+                  <div
+                    :class="toolSelectData.fontSizeActive == '18' ? 'large active' : 'large'"
+                    @click="selectfontSize('18')"
+                  >
+                    澶�
+                  </div>
+                </div>
+                <div class="lineStyle">
+                  <div class="colorSelectBox">
+                    <div
+                      v-for="item in colorSelectList"
+                      :key="item.key"
+                      class="flex1 hover"
+                      @click="lineColorSelect(item)"
+                    >
+                      <div :style="{ background: item.key }" class="scribeItem">
+                        <img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" />
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
             <template #reference>
-              <div class="floatToolItem">
-                <img :src="item.icon" alt="" />
-                <div class="text">{{ item.name }}</div>
+              <div class="floatToolItem"  @click="toolSelectHandle('tuxing')">
+                <div class="imgBox">
+                  <img :src="tuxing" alt="" />
+                </div>
+                <div class="text">鍥惧舰</div>
               </div>
             </template>
           </el-popover>
-          <div class="floatToolItem" v-else @click="floatItemHandle(item)">
-            <img :src="item.icon" alt="" />
-            <div class="text">{{ item.name }}</div>
+          <div class="floatToolItem"  @click="toolSelectHandle('xiangpi')">
+            <div class="imgBox">
+              <img :src="clearPrevious" alt="" />
+            </div>
+            <div class="text">姗＄毊鎿�</div>
+          </div>
+          <div class="floatToolItem" @click="toolSelectHandle('chexiao')">
+            <div class="imgBox">
+              <img :src="clear" alt="" />
+            </div>
+            <div class="text">鎾ら攢</div>
+          </div>
+          <div class="floatToolItem" @click="toolSelectHandle('chongzuo')">
+            <div class="imgBox">
+              <img :src="hide" alt="" />
+            </div>
+            <div class="text">閲嶅仛</div>
+          </div>
+          <div class="floatToolItem" @click="toolSelectHandle('qingchu')">
+            <div class="imgBox">
+              <img :src="hide" alt="" />
+            </div>
+            <div class="text">娓呴櫎</div>
+          </div>
+          <div class="floatToolItem layOutTool" @click="toolSelectHandle('tuichu')">
+            <div class="imgBox">
+              <img :src="tuichu" alt="" />
+            </div>
+            <div class="text">閫�鍑�</div>
           </div>
         </div>
       </div>
@@ -483,10 +621,7 @@
         v-show="showToolBox"
         :style="{ top: `${dialogToolData.top}px`, left: `${dialogToolData.left}px` }"
       >
-        <div
-          class="colorSelectBox"
-          v-show="toolActive == '楂樹寒' || toolActive == '鍒掔嚎' || toolActive == '绗旇'"
-        >
+        <div class="colorSelectBox" v-show="toolActive == '楂樹寒' || toolActive == '鍒掔嚎'">
           <div
             v-for="item in colorSelectList"
             :key="item.key"
@@ -494,11 +629,11 @@
             @click="clickSelect(item)"
           >
             <div :style="{ background: item.key }" class="scribeItem">
-              <img :src="xuanzhong" v-if="item.key == colorActive" />
+              <img :src="xuanzhong1" v-if="item.key == colorActive" />
             </div>
           </div>
         </div>
-        <div class="toolSelectBox">
+        <div class="toolSelectBox" v-show="!(toolActive == '楂樹寒' || toolActive == '鍒掔嚎')">
           <div
             :class="item.name == toolActive ? 'dialogToolItem active' : 'dialogToolItem'"
             v-for="item in dialogToolList"
@@ -514,7 +649,7 @@
       </div>
     </div>
   </div>
-  <el-dialog title="璧勬簮" align-center v-model="resourVisble" width="840">
+  <el-dialog title="璧勬簮" align-center v-model="resourVisble" width="845" class="resourDialog">
     <div class="videoBox" v-if="resourType == 'video'">
       <video controls object-fit="fill" :src="testVideo"></video>
     </div>
@@ -530,14 +665,24 @@
     class="myNoteDialogs"
   >
     <div class="formBox">
-      <el-form ref="form" :model="formData" label-width="80px">
-        <el-form-item label="绗旇鏍囬">
-          <el-input v-model="formData.name"></el-input>
-        </el-form-item>
-        <el-form-item label="绗旇鍐呭">
-          <el-input type="textarea" v-model="formData.desc"></el-input>
-        </el-form-item>
-      </el-form>
+      <el-input
+        type="textarea"
+        :rows="4"
+        v-model="formData.desc"
+        placeholder="璇疯緭鍏ョ瑪璁板唴瀹�"
+      ></el-input>
+    </div>
+    <div class="noteColorSelectBox">
+      <div
+        v-for="item in colorSelectList"
+        :key="item.key"
+        class="flex1 hover"
+        @click="clickSelect(item)"
+      >
+        <div :style="{ background: item.key }" class="scribeItem">
+          <img :src="xuanzhong" v-if="item.key == colorActive" />
+        </div>
+      </div>
     </div>
     <template #footer>
       <span class="dialog-footer">
@@ -552,9 +697,33 @@
     width="60%"
     :closeOnClickModal="false"
     title="鍥剧墖"
+    class="resourDialog"
   >
     <div class="imgUrlBox">
       <img :src="imgUrl" mode="aspectFill" />
+    </div>
+  </el-dialog>
+  <el-dialog
+    title="淇濆瓨鎴浘"
+    align-center
+    v-model="screenshotVisble"
+    :before-close="screenshotClose"
+    width="400"
+    class="resourDialog"
+  >
+    <div class="formBox">
+      <el-input v-model="nameData" placeholder="璇疯緭鍏ユ埅鍥惧悕绉�"></el-input>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="screenshotClose">鍙� 娑�</el-button>
+        <el-button type="primary" @click="addScreenshot">纭� 瀹�</el-button>
+      </span>
+    </template>
+  </el-dialog>
+  <el-dialog title="鐧惧害鐧剧" align-center v-model="baiduVisible" width="60%" class="myDialogs">
+    <div class="wendabox">
+      <iframe :src="'https://baike.baidu.com/item/' + selectText" frameborder="0"></iframe>
     </div>
   </el-dialog>
   <el-dialog title="AI鏅鸿兘闂瓟" align-center v-model="wendaVisible" width="26%" class="myDialogs">
@@ -564,7 +733,8 @@
   </el-dialog>
   <el-dialog title="璇嶅吀" align-center v-model="cidianVisible" width="60%" class="myDialogs">
     <div class="wendabox">
-      <iframe src="https://www.vocabulary.com/" frameborder="0"></iframe>
+      <!-- <iframe src="https://www.vocabulary.com/" frameborder="0"></iframe> -->
+      <dictionary :searchCon="selectText" />
     </div>
   </el-dialog>
   <el-dialog
@@ -592,15 +762,18 @@
 
 <script setup lang="ts">
 import { ref, reactive, watch, onMounted, inject } from 'vue'
+import { ctxUrl } from '@/assets/js/config'
 import { useRouter, useRoute } from 'vue-router'
 import useClipboard from 'vue-clipboard3'
 const { toClipboard } = useClipboard()
 const request = inject('request')
+const qiankunActions = inject('qiankunActions')
 //鑾峰彇璺敱鍣�
-let $router = useRouter()
+let router = useRouter()
 //鑾峰彇褰撳墠璺敱鐨勪俊鎭�
-let $route = useRoute()
+let route = useRoute()
 import moment from 'moment'
+import dictionary from '@/views/components/dictionary.vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import logo from '@/assets/images/header/logo.png'
 import mulu from '@/assets/images/menu/mulu.png'
@@ -640,6 +813,7 @@
 import qingchu1 from '../assets/images/operation/Clearaway-b.png'
 import wenzi from '../assets/images/operation/wenzi-w.png'
 import wenzi1 from '../assets/images/operation/wenzi-b.png'
+import wenzi2 from '../assets/images/operation/wenzi.png'
 import biaoqianw from '../assets/images/operation/biaoqian-w.png'
 import biaoqian1 from '../assets/images/operation/biaoqian-b.png'
 import baiban from '../assets/images/operation/baiban-w.png'
@@ -652,6 +826,8 @@
 import clearPrevious from '../assets/images/operation/clearPrevious.png'
 import hide from '../assets/images/operation/hide.png'
 import show from '../assets/images/operation/show.png'
+import tuichu from '../assets/images/operation/tuichu.png'
+import tuxing from '../assets/images/operation/tuxing.png'
 
 import gaoliang from '../assets/images/operation/gaoliang.png'
 import gaoliang1 from '../assets/images/operation/gaoliang-b.png'
@@ -667,9 +843,12 @@
 import AIyuedu1 from '../assets/images/operation/AIyuedu-b.png'
 import cidian2 from '../assets/images/operation/cidian.png'
 import cidian1 from '../assets/images/operation/cidian-b.png'
+import baidu from '../assets/images/operation/baidu.png'
+import baidu1 from '../assets/images/operation/baidu-b.png'
 import yuyinyuedu from '../assets/images/operation/yuyinyuedu.png'
 import yuyinyuedu1 from '../assets/images/operation/yuyinyuedu-b.png'
 import xuanzhong from '../assets/images/operation/xuanzhong.png'
+import xuanzhong1 from '../assets/images/operation/xuanzhong1.png'
 
 import zoomIn from '../assets/images/operation/zoomIn.png'
 import zoomOut from '../assets/images/operation/zoomOut.png'
@@ -687,9 +866,16 @@
 import { start } from 'qiankun'
 import axios from 'axios'
 import { fabric } from 'fabric'
+
+import { loadMicroApp } from 'qiankun'
+import { microApps } from '@/child.ts'
 const canvasWith = ref(1000)
 const canvasheight = ref(3000)
+const screenWidth = ref(
+  window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+)
 
+let microApp = null // 寰簲鐢ㄥ疄渚�
 onMounted(() => {
   // canvasWith.value = window.innerWidth - 540
   // canvasheight.value = window.innerHeight - 110
@@ -703,12 +889,48 @@
   //   canvasWith.value = document.getElementById('container').offsetWidth
   //   canvasheight.value = document.getElementById('container').offsetHeight
   // }, 5000)
+  if (screenWidth.value < 1180) {
+    menuState.open = false
+    toolState.open = false
+  }
+  window.onresize = () => {
+    return (() => {
+      screenWidth.value =
+        window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+    })()
+  }
+
+  // 鍔犺浇寰簲鐢�
+  microApp = loadMicroApp(microApps.book1, {
+    sandbox: {
+      strictStyleIsolation: true,
+      experimentalStyleIsolation: true
+    }
+  })
+
+  window.qiankunActions.setGlobalState({
+    state: 1, // 鍔犺浇瀛愬簲鐢�
+    windowSelection: (data) => { // 缁戝畾瀛愬簲鐢ㄩ�夋嫨鐩戝惉浜嬩欢
+      console.log(data, '瀛愬簲鐢ㄩ�夋嫨')
+    }
+  })
 })
+
+watch(
+  () => screenWidth.value,
+  (val) => {
+    screenWidth.value = val
+    if (screenWidth.value < 1180) {
+      menuState.open = false
+      toolState.open = false
+    }
+  }
+)
 //鑾峰彇鐩綍
 const catalogueData = ref([])
 const getCatalogueData = () => {
   axios
-    .get('http://182.92.203.7:3007/books/test/information.json')
+    .get(ctxUrl + '/books/test/information.json')
     .then(function (response) {
       var json = response.data
       // 澶勭悊鑾峰彇鍒扮殑json鏁版嵁
@@ -752,20 +974,26 @@
   }
 ])
 const activeClassify = ref('image')
-const searchShow = ref(false)
-const resourceData = ref([])
+const searchShow = ref(true)
+const resourceData = ref({})
+const resourceDataList = ref([])
 const resourVisble = ref(false)
 const resourType = ref('')
 const testVideo = ref('') //瑙嗛閾炬帴
 const testWord = ref('') //word閾炬帴
 const getResourceData = () => {
   axios
-    .get('http://182.92.203.7:3007/books/test/resource.json')
+    .get(ctxUrl + '/books/test/resource.json')
     .then(function (response) {
       var json = response.data
       // 澶勭悊鑾峰彇鍒扮殑json鏁版嵁
       console.log(json, '璧勬簮')
       resourceData.value = json
+      resourceDataList.value = json.imgList
+      classifySelectList[0].count = json.imgList.length
+      classifySelectList[1].count = json.audioList.length
+      classifySelectList[2].count = json.videoList.length
+      classifySelectList[3].count = json.attachmentList.length
     })
     .catch(function (error) {
       console.log(error)
@@ -773,18 +1001,34 @@
 }
 
 const goResourceDetail = (data) => {
-  console.log(data, 23)
   resourVisble.value = true
   resourType.value = data.type
   if (data.type == 'video') {
-    testVideo.value = 'http://182.92.203.7:3007/books/test/resourceData/' + data.name
+    testVideo.value = ctxUrl + '/books/test/resourceData/' + data.name
   } else if (data.type == 'word') {
-    testWord.value = 'http://182.92.203.7:3007/books/test/resourceData/' + data.name
+    testWord.value = ctxUrl + '/books/test/resourceData/' + data.name
   }
 }
 
 const classifyClick = (item) => {
   activeClassify.value = item.key
+  resourceDataList.value = []
+  searchText.value = ''
+  switch (item.key) {
+    case 'image':
+      resourceDataList.value = resourceData.value.imgList
+      break
+    case 'audio':
+      resourceDataList.value = resourceData.value.audioList
+      break
+    case 'video':
+      resourceDataList.value = resourceData.value.videoList
+      break
+    case 'other':
+      resourceDataList.value = resourceData.value.attachmentList
+      break
+  }
+  console.log(resourceDataList.value)
 }
 const searchBtn = () => {
   if (searchShow.value) {
@@ -847,7 +1091,17 @@
 }
 //鍒锋柊褰撳墠椤甸潰
 const reload = () => {
-  location.reload()
+  if (microApp) {
+    microApp.unmount() // 鍗歌浇寰簲鐢�
+    microApp = loadMicroApp(microApps.book1, {
+      sandbox: {
+        strictStyleIsolation: true,
+        experimentalStyleIsolation: true
+      }
+    })
+  } else {
+    location.reload()
+  }
 }
 
 const selectResourceType = (type) => {
@@ -860,9 +1114,50 @@
 })
 
 const settingForm = reactive({
+  fontSizeList: [
+    {
+      lable: '灏�',
+      key: '14'
+    },
+    {
+      lable: '涓�',
+      key: '16'
+    },
+
+    {
+      lable: '澶�',
+      key: '20'
+    }
+  ],
+  fontSizeActive: '16',
   acoustics: false,
-  animation: false
+  animation: false,
+  bgColorList: [
+    {
+      lable: '榛�',
+      key: '#FBF9F4'
+    },
+    {
+      lable: '缁�',
+      key: '#F2FFF7'
+    },
+    {
+      lable: '绱�',
+      key: '#F6F4FC'
+    },
+    {
+      lable: '绮�',
+      key: '#FFFAF9'
+    }
+  ],
+  bgColorActive: '#FBF9F4'
 })
+const fontSizeSelect = (item) => {
+  settingForm.fontSizeActive = item.key
+}
+const bgColorSelect = (item) => {
+  settingForm.bgColorActive = item.key
+}
 //绗旇棰滆壊绛涢��
 const searchClick = (item) => {
   if (item != 'all') {
@@ -875,6 +1170,22 @@
 const searchBook = async () => {
   if (activeMenu.value == 1) {
     getNotesList()
+  }
+  if (activeMenu.value == 2) {
+    let dataList = JSON.parse(JSON.stringify(resourceDataList.value))
+    if (searchText.value) {
+      resourceDataList.value = []
+      searchText.value = searchText.value.replace(/^\s*|\s*$/g, '')
+      let text = searchText.value.replace(/^\s*|\s*$/g, '')
+      dataList.forEach((item) => {
+        if (item.name.indexOf(text) > -1) {
+          let replaceStr = "<span style='background:#F5E12A'>" + text + '</span>'
+          let htmlStr = item.name.split(text).join(replaceStr)
+          item.name = '<p>' + htmlStr + '</p>'
+          resourceDataList.value.push(item)
+        }
+      })
+    }
   }
 }
 
@@ -925,6 +1236,7 @@
     icon: moxinggongju
   }
 ])
+const baiduVisible = ref(false)
 const wendaVisible = ref(false)
 const cidianVisible = ref(false)
 const functionVisible = ref(false)
@@ -984,29 +1296,26 @@
 const floatingToolBox = reactive([
   {
     icon: huabi,
+    activeIcon: huabi1,
     name: '鐢荤瑪'
   },
   {
-    icon: qingchu,
-    name: '娓呴櫎'
-  },
-  {
-    icon: wenzi,
-    name: '鏂囧瓧'
-  },
-  {
-    icon: biaozhu,
-    name: '鏍囨敞'
-  },
-  {
-    icon: biaoqianw,
-    name: '鏍囩'
-  },
-  {
+    activeIcon: baiban1,
     icon: baiban,
     name: '鐧芥澘'
   },
   {
+    activeIcon: biaozhu1,
+    icon: biaozhu,
+    name: '鏍囨敞'
+  },
+  {
+    activeIcon: biaoqian1,
+    icon: biaoqianw,
+    name: '鏍囩'
+  },
+  {
+    activeIcon: jieping1,
     icon: jieping,
     name: '鎴睆'
   }
@@ -1034,22 +1343,16 @@
       floatingToolBox[0].icon = huabi1
       break
     case 1:
-      floatingToolBox[1].icon = qingchu1
+      floatingToolBox[1].icon = baiban1
       break
     case 2:
-      floatingToolBox[2].icon = wenzi1
+      floatingToolBox[2].icon = biaozhu1
       break
     case 3:
-      floatingToolBox[3].icon = biaozhu1
+      floatingToolBox[3].icon = biaoqian1
       break
     case 4:
-      floatingToolBox[4].icon = biaoqian1
-      break
-    case 5:
-      floatingToolBox[5].icon = baiban1
-      break
-    case 6:
-      floatingToolBox[6].icon = jieping1
+      floatingToolBox[4].icon = jieping1
       break
   }
 }
@@ -1060,22 +1363,16 @@
       floatingToolBox[0].icon = huabi
       break
     case 1:
-      floatingToolBox[1].icon = qingchu
+      floatingToolBox[1].icon = baiban
       break
     case 2:
-      floatingToolBox[2].icon = wenzi
+      floatingToolBox[2].icon = biaozhu
       break
     case 3:
-      floatingToolBox[3].icon = biaozhu
+      floatingToolBox[3].icon = biaoqianw
       break
     case 4:
-      floatingToolBox[4].icon = biaoqianw
-      break
-    case 5:
-      floatingToolBox[5].icon = baiban
-      break
-    case 6:
-      floatingToolBox[6].icon = jieping
+      floatingToolBox[4].icon = jieping
       break
   }
 }
@@ -1084,7 +1381,9 @@
 const nameRef = ref()
 const imgUrl = ref()
 const confirmDialog = ref<Boolean>(false)
-const nameData = ref({ name: '' })
+const screenshotVisble = ref<Boolean>(false)
+const nameData = ref('') //鎴浘鍚嶇О
+const urlData = ref('') //鎴浘base64
 const screenshotList = ref([])
 
 //娴獥宸ュ叿鏍忕偣鍑讳簨浠�
@@ -1093,7 +1392,6 @@
   switch (item.name) {
     case '鐢荤瑪':
       canvasShow.value = true
-      init()
       break
     case '鎴睆':
       jitT()
@@ -1113,20 +1411,38 @@
   floatingToolData.startclientx = e.clientX
   floatingToolData.startclienty = e.clientY
 }
+//鐢荤瑪鎿嶄綔鏍忎簨浠�
+const toolSelectData = reactive({
+  activeTool:'',
+  fontSizeActive: '16',
+  thicknessActive: '3', //鐢荤瑪閫変腑绮楃粏
+  lineTypeActive: 'solid', //鐢荤瑪閫変腑绾跨被鍨�
+  lineColorActive: '#333' //鐢荤瑪閫変腑绾块鑹�
+})
+const toolSelectHandle = (title) => {
+  toolSelectData.activeTool = title
+  switch (title) {
+    case 'huabi':
+    init()
+      break
+    case 'wenzi':
+      break
+  }
+}
 
 //閫変腑鐢荤瑪绮楃粏
 const selectThickness = (str) => {
-  floatingToolData.thicknessActive = str
+  toolSelectData.thicknessActive = str
   init()
 }
 
 const selectLineType = (str) => {
-  floatingToolData.lineTypeActive = str
+  toolSelectData.lineTypeActive = str
   init()
 }
 //鐢荤瑪棰滆壊閫夋嫨
 const lineColorSelect = (item) => {
-  floatingToolData.lineColorActive = item.key
+  toolSelectData.lineColorActive = item.key
   init()
 }
 //鐢诲竷灞炴��
@@ -1134,24 +1450,17 @@
   canvas.value = new fabric.Canvas('canvasRef', {
     isDrawingMode: true // 鍚敤缁樼敾妯″紡
   })
-  canvas.value.freeDrawingBrush.color = floatingToolData.lineColorActive
-  canvas.value.freeDrawingBrush.width = floatingToolData.thicknessActive
+  canvas.value.freeDrawingBrush.color = toolSelectData.lineColorActive
+  canvas.value.freeDrawingBrush.width = toolSelectData.thicknessActive
 }
 
-//娓呴櫎涓婁竴姝�/鍏ㄩ儴
-const cleanUpSelect = (str) => {
-  if (str == 'all') {
-    canvasShow.value = false
-  } else {
-    console.log(history.value)
-  }
-}
+
 //鏍囩鏄剧ず闅愯棌
 const labelShow = (str) => {}
 
 //鏂囧瓧澶у皬
 const selectfontSize = (str) => {
-  floatingToolData.fontSizeActive = str
+  toolSelectData.fontSizeActive = str
 }
 
 //鎴浘
@@ -1166,36 +1475,42 @@
 }
 //纭鍥炶皟
 const callback = (val: any) => {
-  ElMessageBox.confirm('纭瑕佷繚瀛樻埅鍥�?', '鎻愮ず', {
-    confirmButtonText: '纭',
-    cancelButtonText: '鍙栨秷'
-  })
-    .then(() => {
-      screenshotList.value.push({
-        createDate: new Date(),
-        imgUrl: val.base64
-      })
-      request({
-        url: '/identity/api/ApiAppUserSetKey',
-        method: 'post',
-        data: {
-          setKeyRequests: [
-            {
-              domain: 'screenshot',
-              key: '1',
-              value: JSON.stringify(screenshotList.value)
-            }
-          ]
-        }
-      }).then((res) => {
-        getScreenshotList()
-      })
-    })
-    .catch(() => {})
+  screenshotVisble.value = true
+  urlData.value = val.base64
 }
 //鍙栨秷鍥炶皟
 const closeFn = (base64: any) => {
   console.log(base64)
+}
+const addScreenshot = () => {
+  if (nameData.value) {
+    screenshotList.value.push({
+      createDate: new Date(),
+      imgUrl: urlData.value,
+      name: nameData.value
+    })
+    request({
+      url: '/identity/api/ApiAppUserSetKey',
+      method: 'post',
+      data: {
+        setKeyRequests: [
+          {
+            domain: 'screenshot',
+            key: '2358',
+            value: JSON.stringify(screenshotList.value)
+          }
+        ]
+      }
+    }).then((res) => {
+      getScreenshotList()
+      screenshotVisble.value = false
+    })
+  } else {
+    ElMessage.error('鎴浘鍚嶇О涓嶈兘涓虹┖!')
+  }
+}
+const screenshotClose = () => {
+  screenshotVisble.value = false
 }
 
 const getScreenshotList = () => {
@@ -1204,7 +1519,7 @@
     method: 'post',
     data: {
       domain: 'screenshot',
-      keys: ['1']
+      keys: ['2358']
     }
   }).then((res) => {
     if (res && res.length > 0 && res[0].value) {
@@ -1246,23 +1561,22 @@
   }
 }
 
-const handleMouseUp = (e) => {
-  if (move.value) {
-    const txt = window.getSelection()?.toString()
-    selectText.value = txt
-    const node = window.getSelection()
-    let html = node.anchorNode.parentNode.parentNode
-    dialogToolData.chapter = html.firstChild.innerHTML
-    console.log(dialogToolData.chapter)
-    if (txt) {
-      showToolBox.value = true
-      dialogToolData.top = e.y
-      dialogToolData.left = e.x
-    }
-    isMouseDown.value = false
-  }
-  move.value = false
-}
+// const handleMouseUp = (e) => {
+//   if (move.value) {
+//     const txt = window.getSelection()?.toString()
+//     selectText.value = txt
+//     const node = window.getSelection()
+//     let html = node.anchorNode.parentNode.parentNode
+//     dialogToolData.chapter = html.firstChild.innerHTML
+//     if (txt) {
+//       showToolBox.value = true
+//       dialogToolData.top = e.y
+//       dialogToolData.left = e.x
+//     }
+//     isMouseDown.value = false
+//   }
+//   move.value = false
+// }
 
 const pageScroll = (e) => {
   showToolBox.value = false
@@ -1279,8 +1593,9 @@
   { icon: biji2, activeIcon: biji1, name: '绗旇' },
   { icon: biaozhu2, activeIcon: biaozhu3, name: '鏍囨敞' },
   { icon: fuzhi, activeIcon: fuzhi1, name: '澶嶅埗' },
-  { icon: AIyuedu, activeIcon: AIyuedu1, name: 'AI闃呰' }
-  // { icon: cidian2, activeIcon: cidian1, name: '璇嶅吀' },
+  { icon: AIyuedu, activeIcon: AIyuedu1, name: 'AI闃呰' },
+  { icon: cidian2, activeIcon: cidian1, name: '璇嶅吀' },
+  { icon: baidu, activeIcon: cidian1, name: '鐧剧' }
   // { icon: yuyinyuedu, activeIcon: yuyinyuedu1, name: '璇煶闃呰' }
   // { icon: cidian2, activeIcon: cidian1, name: '缈昏瘧' }
 ])
@@ -1299,7 +1614,7 @@
   },
   {
     label: '绱壊',
-    key: '#CAA5FC '
+    key: '#CAA5FC'
   },
   {
     label: '绮夎壊',
@@ -1310,7 +1625,6 @@
 //绗旇寮圭獥
 const addNoteVisble = ref(false)
 const formData = reactive({
-  name: '',
   desc: ''
 })
 //绗旇寮圭獥鍏抽棴
@@ -1357,7 +1671,7 @@
       dialogToolList[6].icon = cidian1
       break
     case 7:
-      dialogToolList[7].icon = yuyinyuedu1
+      dialogToolList[7].icon = baidu1
       break
   }
 }
@@ -1387,7 +1701,7 @@
       dialogToolList[6].icon = cidian2
       break
     case 7:
-      dialogToolList[7].icon = yuyinyuedu
+      dialogToolList[7].icon = baidu
       break
   }
 }
@@ -1405,8 +1719,9 @@
     case '楂樹寒':
       break
     case '绗旇':
-      formData.name = ''
       formData.desc = ''
+      addNoteVisble.value = true
+      showToolBox.value = false
       break
     case '鏍囨敞':
       break
@@ -1428,21 +1743,20 @@
     case '璇嶅吀':
       cidianVisible.value = true
       break
+    case '鐧剧':
+      baiduVisible.value = true
+      break
   }
 }
 
 const clickSelect = (item) => {
   colorActive.value = item.key
-  if (toolActive.value == '绗旇') {
-    addNoteVisble.value = true
-  }
   if (toolActive.value == '楂樹寒') {
     dialogToolData.lineHeight.push({
       selectNode: selectNode.value,
       selectText: selectText.value,
       color: colorActive.value,
       chapter: dialogToolData.chapter,
-      color: item.key,
       createDate: new Date()
     })
     request({
@@ -1452,8 +1766,8 @@
         setKeyRequests: [
           {
             domain: 'highLight',
-            key: '1',
-            value: JSON.stringify([dialogToolData.lineHeight])
+            key: '2358',
+            value: JSON.stringify(dialogToolData.lineHeight)
           }
         ]
       }
@@ -1470,7 +1784,6 @@
       selectText: selectText.value,
       color: colorActive.value,
       chapter: dialogToolData.chapter,
-      color: item.key,
       createDate: new Date()
     })
     request({
@@ -1480,7 +1793,7 @@
         setKeyRequests: [
           {
             domain: 'underline',
-            key: '1',
+            key: '2358',
             value: JSON.stringify(dialogToolData.scribeList)
           }
         ]
@@ -1497,47 +1810,40 @@
 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({
-          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
-      }
+      dialogToolData.notesList.push({
+        selectText: selectText.value,
+        color: colorActive.value,
+        chapter: dialogToolData.chapter,
+        createDate: new Date(),
+        note: formData.desc.replace(/^\s*|\s*$/g, '')
+      })
+      request({
+        url: '/identity/api/ApiAppUserSetKey',
+        method: 'post',
+        data: {
+          setKeyRequests: [
+            {
+              domain: 'notes',
+              key: '2358',
+              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
@@ -1553,14 +1859,13 @@
     method: 'post',
     data: {
       domain: 'notes',
-      keys: ['1']
+      keys: ['2358']
     }
   }).then((res) => {
     if (res && res.length > 0 && res[0].value) {
       dialogToolData.notesList = JSON.parse(res[0].value)
       let list = JSON.parse(res[0].value)
       let textDom1 = document.getElementById('container')
-      console.log(list, '绗旇')
       if (list.length > 0) {
         list.forEach((item, index) => {
           item.createDate = moment(item.createDate).format('YYYY-MM-DD')
@@ -1590,13 +1895,13 @@
           let rHtml1 = ''
           rHtml1 = text1.replace(
             rReg1,
-            `<span style="text-decoration:underline;text-underline-thickness:2px;text-underline-offset:4px;text-decoration-color:${item.color}" class="underline">${item.selectText}</span><img src="${biji1}" style="cursor: pointer" onclick="notesVisbleShow('${item.selectText}')"/>`
+            `<span style="padding-bottom:2px; border-bottom: 2px solid;border-bottom-color:${item.color}" class="underline">${item.selectText}</span><img src="${biji1}" style="cursor: pointer" onclick="notesVisbleShow('${item.selectText}')"/>`
           )
           textDom1.innerHTML = rHtml1
         })
       }
-      scribeData.loading = false
     }
+    scribeData.loading = false
   })
 }
 //鍒掔嚎
@@ -1607,7 +1912,7 @@
     method: 'post',
     data: {
       domain: 'underline',
-      keys: ['1']
+      keys: ['2358']
     }
   }).then((res) => {
     if (res && res.length > 0 && res[0].value) {
@@ -1642,7 +1947,7 @@
     method: 'post',
     data: {
       domain: 'highLight',
-      keys: ['1']
+      keys: ['2358']
     }
   }).then((res) => {
     if (res && res.length > 0 && res[0].value) {
@@ -1674,7 +1979,6 @@
 window.notesVisbleShow = function (txt) {
   addNoteVisble.value = true
   let notes = dialogToolData.notesList.find((item) => item.selectText == txt)
-  formData.name = notes.name
   formData.desc = notes.note
 }
 window.deleteScribeShow = function (txt) {
@@ -1687,7 +1991,7 @@
       setKeyRequests: [
         {
           domain: 'underline',
-          key: '1',
+          key: '2358',
           value: JSON.stringify(list)
         }
       ]
@@ -1707,7 +2011,7 @@
       setKeyRequests: [
         {
           domain: 'highLight',
-          key: '1',
+          key: '2358',
           value: JSON.stringify(list)
         }
       ]
@@ -1729,7 +2033,6 @@
   selectText.value = item.selectText
   colorActive.value = item.color
   dialogToolData.chapter = item.chapter
-  formData.name = item.name
   formData.desc = item.note
   addNoteVisble.value = true
 }
@@ -1746,7 +2049,7 @@
         setKeyRequests: [
           {
             domain: 'notes',
-            key: '1',
+            key: '2358',
             value: JSON.stringify(list)
           }
         ]
@@ -1806,44 +2109,49 @@
     headerData.pageSize = Number(headerData.pageSize) - 5
   }
 }
+
+const layoutBtn = () => {
+  localStorage.clear()
+  console.log(888)
+  router.push('/login')
+}
 </script>
 
 <style lang="less">
 .homeBox {
   width: 100%;
   height: 100%;
-  background:#C6C6C6;
+  background: #87ccff;
   border-radius: 10px;
   display: flex;
   flex-direction: column;
-  padding:0 15px;
+  padding: 0 15px;
   .headerBox {
     height: 48px;
     // background-image: url('@/assets/images/header/top-bg.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
     padding: 0 20px;
-    display:flex;
+    display: flex;
     justify-content: space-between;
     align-items: center;
-    p {
+    .logoTxt {
       font-size: 24px;
-      color: #ffffff;
+      color: #333;
       letter-spacing: 2px;
       font-weight: bold;
     }
-    .userInfoBox{
-      display:flex;
+    .userInfoBox {
+      display: flex;
       align-items: center;
-      .layout{
+      .layout {
         width: 69px;
         height: 30px;
-        background: #0093FF;
+        background: #0093ff;
         border-radius: 15px;
-        color:#fff;
-        text-align:center;
-        line-height:30px;
-
+        color: #fff;
+        text-align: center;
+        line-height: 30px;
       }
     }
   }
@@ -1859,14 +2167,14 @@
       box-sizing: border-box;
       position: relative;
       box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.07);
-      background:#fff;
-      border-radius:16px 0px 0px 0px;
+      background: #fff;
+      border-radius: 16px 0px 0px 0px;
       .menuItem {
         text-align: center;
         line-height: 1;
         cursor: pointer;
         padding: 5px 0 10px 0;
-        width:63px;
+        width: 63px;
         margin: 10px auto;
         border-radius: 10px;
         &.active,
@@ -1998,7 +2306,7 @@
           border: 1px solid #0093ff !important;
           border-radius: 50px;
           overflow: hidden;
-          background:#fff;
+          background: #fff;
         }
         .is-focus,
         .el-input__wrapper {
@@ -2028,22 +2336,22 @@
 
         .all {
           width: 50px;
-          height: 20px;
+          height: 22px;
           border-radius: 17px;
           margin: 10px 10px 10px 0;
           border: 1px solid #d8d8d8;
           text-align: center;
-          line-height: 17px;
+          line-height: 20px;
           font-size: 12px;
         }
 
         .allActive {
           width: 50px;
-          height: 20px;
+          height: 22px;
           border-radius: 17px;
           margin: 10px 10px 10px 0;
           text-align: center;
-          line-height: 17px;
+          line-height: 20px;
           color: #fff;
           background: #0093ff;
           border: 1px solid #0093ff;
@@ -2053,7 +2361,7 @@
         .scribeItem {
           width: 18px;
           height: 18px;
-          border-radius: 50%;
+          border-radius: 3px;
           margin: 10px auto;
           border: none;
         }
@@ -2077,7 +2385,7 @@
               width: 130px;
               height: 80px;
               background: #fff;
-              border-radius:5px;
+              border-radius: 5px;
               overflow: hidden;
               img {
                 height: 100%;
@@ -2087,7 +2395,7 @@
             }
 
             .rName {
-              margin-top:10px;
+              margin-top: 10px;
               height: 20px;
               line-height: 20px;
               display: -webkit-box;
@@ -2105,12 +2413,26 @@
           flex-wrap: wrap;
           justify-content: space-between;
           .captureItem {
-            border: 1px solid #d8d8d8;
             margin-bottom: 10px;
             width: 46%;
-            .capture {
+            .imgBox {
+              border: 1px solid #d8d8d8;
               width: 100%;
               height: 80px;
+              margin-bottom: 5px;
+            }
+            // .capture {
+            //   width: 100%;
+            // }
+            .captureName {
+              height: 20px;
+              line-height: 20px;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 1;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              color: #000;
             }
           }
         }
@@ -2120,15 +2442,25 @@
           position: relative;
           margin: 10px;
           line-height: 20px;
+          background: #fff;
+          border-radius: 5px;
+          padding: 10px 0;
           .textBox {
-            padding: 0 5px 10px 5px;
             .title {
               display: flex;
               justify-content: space-between;
               align-items: center;
+              margin-right: 10px;
+              .border-left {
+                height: 25px;
+                border-right: 4px solid;
+                border-radius: 0 5px 5px 0;
+                margin-right: 10px;
+              }
               .title-con {
                 display: flex;
                 align-items: center;
+                color: #949494;
                 .round {
                   width: 10px;
                   height: 10px;
@@ -2143,50 +2475,28 @@
             }
             .chapter {
               color: #b7b7b7;
-              margin-top: 5px;
-            }
-            .chapterName {
-              float: right;
-              width: 150px;
+              margin: 5px 5px 5px 14px;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 1;
               overflow: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              text-align: right;
+              border-left: 3px solid #b7b7b7;
+              border-left-radius: 20px;
+              padding: 0 5px;
             }
           }
           .noteText {
-            text-indent: 2ch;
-            margin-top: 5px;
-            .label {
-              width: 40px;
-              flex-shrink: 0;
-            }
-
+            margin: 10px 10px 10px 15px;
+            border-radius: 3px;
+            padding: 2px 5px;
+            // opacity: 0.1;
             .con {
+              all: initial;
               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;
             }
           }
         }
@@ -2235,13 +2545,12 @@
             margin: 0 5px;
           }
         }
-        .progress{
-          text-align:center;
-          .bookName{
-            font-weight:bold;
-            margin-bottom:3px;
+        .progress {
+          text-align: center;
+          .bookName {
+            font-weight: bold;
+            margin-bottom: 3px;
           }
-
         }
         .rightBox {
           display: flex;
@@ -2295,8 +2604,8 @@
     .toolBox {
       position: relative;
       box-shadow: -3px 0px 6px 1px rgba(0, 0, 0, 0.07);
-      background:#fff;
-      border-radius:0px 16px 0px 0px;
+      background: #fff;
+      border-radius: 0px 16px 0px 0px;
       .toolTitle {
         height: 57px;
         line-height: 53px;
@@ -2339,7 +2648,7 @@
         position: absolute;
         line-height: 22px;
         top: 50%;
-        right: 65px;
+        right: 50px;
         text-align: center;
         box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
         img {
@@ -2348,7 +2657,7 @@
         }
       }
       .right {
-        right: 174px !important;
+        right: 184px !important;
         border-radius: 0px 3px 3px 0px !important;
       }
       .classRoomBox {
@@ -2415,7 +2724,7 @@
       width: 85px;
       background-image: linear-gradient(to bottom, #0093ff, #005dff);
       position: fixed;
-      height: 430px;
+      height: 310px;
       top: 300px;
       left: 450px;
       z-index: 99;
@@ -2436,11 +2745,47 @@
           margin-right: 5px;
         }
       }
+      .floatToolItem:hover ,.floatToolActive{
+        background-color: #fff;
+        color: #0093ff;
+      }
     }
 
-    .floatToolItem:hover {
-      background-color: #fff;
-      color: #0093ff;
+
+    
+    .brushBox{
+      position: fixed;
+      left: 500px;
+      bottom:20px;
+      z-index: 99;
+      border-radius: 5px;
+      background:#fff;
+      // padding: 10px;
+      overflow: hidden;
+      border:1px solid #0093FF;
+      .toolList{
+        display:flex;
+        justify-content: center;
+        align-items: center;
+        .floatToolItem {
+          margin:10px;
+          width:48px;
+          border-radius: 5px;
+          text-align:center;
+          flex:1;
+          .imgBox{
+            height:22px;
+            width:22px;
+            text-align:center;
+            margin:0 auto;
+            margin-bottom:5px;
+          }
+        }
+        .layOutTool{
+          padding-left:15px;
+          border-left:1px solid #E0E0E0
+        }
+      }
     }
 
     .dialogToolBox {
@@ -2515,16 +2860,18 @@
     height: 100%;
   }
 }
-.myNoteDialogs {
-  width: 400px !important;
-}
-.myDialogs {
-  width: 628px;
+
+.myDialogs,
+.myNoteDialogs,
+.resourDialog {
+  padding: 0 !important;
+  border-radius: 10px !important;
+  overflow: hidden;
 
   .el-dialog__header {
-    padding: 15px;
-    margin-right: 0;
-    border-bottom: 1px solid #f4f4f4;
+    padding: 10px;
+    text-align: center;
+    background: #f4f5f9;
   }
 
   .el-dialog__title {
@@ -2533,18 +2880,39 @@
   }
 
   .el-dialog__headerbtn {
-    top: 6px;
-    right: 6px;
+    top: 0px !important;
+    right: 0px !important;
   }
-
+  .el-dialog__body {
+    padding: 20px !important;
+  }
   .el-dialog__footer {
-    padding: 15px;
-    border-top: 1px solid #f4f4f4;
+    padding: 10px 20px 20px !important;
+    text-align: right;
+    box-sizing: border-box;
   }
-
-  .myDialogs-footer {
-    .el-button {
-      padding: 0 20px;
+}
+.myDialogs {
+  width: 628px;
+}
+.myNoteDialogs {
+  width: 500px !important;
+}
+.noteColorSelectBox {
+  margin-top: 10px;
+  width: 190px;
+  display: flex;
+  .flex1 {
+    flex: 1;
+    .scribeItem {
+      width: 18px;
+      height: 18px;
+      border-radius: 3px;
+      margin: 10px auto;
+      border: none;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
   }
 }
@@ -2557,5 +2925,8 @@
 .imgUrlBox {
   width: 100%;
   text-align: center;
+  img {
+    width: 100%;
+  }
 }
 </style>

--
Gitblit v1.9.1