Merge branch 'liuqiang' into v3

src/components/IdentifyFont/IdentifyFont.vue

@@ -3,7 +3,7 @@
   <div class="container">
     <div v-if="thisStep === 'start'" class="up_box">
       <div class="left_box">
-        <div class="upimg_box">
+        <div class="upimg_box boder_box">
           <!-- TODO 拖拽设置不生效问题 ,但是测试那里可以实现拖拽，离大谱-->
           <el-upload
             v-if="!showImg"
@@ -14,7 +14,7 @@
             :on-success="handleAvatarSuccess"
             :before-upload="beforeUp"
           >
-            <img src="@/assets/images/add.png" class="avatar" />
+            <img src="@/assets/images/Frame427319159.png" class="avatar" />
             <span>将图片拖入框内/点击按钮上传图片</span>
           </el-upload>
           <div v-else class="img_show">
@@ -34,7 +34,7 @@
         </div>
       </div>
       <div class="right_box">
-        <div class="upimg_box">
+        <div class="upimg_box boder_box">
           <el-upload
             disabled
             class="avatar-uploader"
@@ -42,7 +42,7 @@
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
           >
-            <img src="@/assets/images/add.png" class="avatar" />
+            <img src="@/assets/images/FrameYun.png" class="avatar" />
             <span>点击按钮上传图片</span>
           </el-upload>
         </div>
@@ -54,14 +54,22 @@
         <img :src="toRaw(showImg)" class="avatar" />
         <div class="light"></div>
       </div>
+      <div class="text_box">
+        <span>请耐心等待扫描完成</span>
+        <Loading :small="true"></Loading>
+      </div>
     </div>
     <div v-if="thisStep === 'end'" class="end_box">
       <div class="left_box">
-        <div class="upimg_box">
-          <div class="img_show">
-            <img :src="toRaw(showImg)" class="avatar" />
+        <div class="boder_box">
+          <div class="title">原始图片</div>
+          <div class="upimg_box">
+            <div class="img_show">
+              <img :src="toRaw(showImg)" class="avatar" />
+            </div>
           </div>
         </div>
+
         <div class="sunmit_btn">
           <!-- <el-upload
                   class="avatar-uploader"
@@ -75,14 +83,17 @@
         </div>
       </div>
       <div class="right_box">
-        <div class="upimg_box">
-          <el-scrollbar>
-            <div class="text_box">
-              {{ textData }}
-            </div>
-          </el-scrollbar>
+        <div class="boder_box">
+          <div class="title">识别结果</div>
+          <div class="upimg_box">
+            <el-scrollbar>
+              <div class="text_box">
+                {{ textData }}
+              </div>
+            </el-scrollbar>
+          </div>
         </div>
-        <div class="sunmit_btn copy-qb" @click="copyQbUrl()">全部复制</div>
+        <div class="sunmit_btn copy-qb" @click="copyQbUrl()">复制结果</div>
       </div>
     </div>
   </div>
@@ -99,6 +110,7 @@
 import { onMounted, ref, toRaw, watch } from "vue";
 import { ElMessage } from "element-plus";
 import Clipboard from "clipboard";
+import Loading from "@/components/Loading/Loading.vue";
 import PicTree from "@/components/PicTree/PicTree.vue"; //选择文件发送的列表
 import { picTree } from "@/api/search/search.js";
 import { ocrRemark, preview } from "@/api/common/common.js";
@@ -223,11 +235,23 @@ const reClick = () => {
     justify-content: center;
   }
   .left_box {
-    width: 30%;
+    width: 45%;
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-right: 48px;
+    .boder_box {
+      border: 1px solid #c1cce3;
+    }
+    .title {
+      width: 100%;
+      height: 40px;
+      background: #ebeff6;
+      line-height: 40px;
+      font-size: 16px;
+      font-weight: 400;
+      text-align: center;
+    }
     .img_show {
       width: 100%;
       height: 100%;
@@ -243,7 +267,7 @@ const reClick = () => {
     .upimg_box {
       width: 100%;
       height: 500px;
-      border: 1px solid #c1cce3;
+
       display: flex;
       align-items: center;
       justify-content: center;
@@ -262,14 +286,26 @@ const reClick = () => {
     }
   }
   .right_box {
-    width: 30%;
+    width: 45%;
     display: flex;
     flex-direction: column;
     align-items: center;
+    .boder_box {
+      border: 1px solid #c1cce3;
+    }
+    .title {
+      width: 100%;
+      height: 40px;
+      background: #ebeff6;
+      line-height: 40px;
+      font-size: 16px;
+      font-weight: 400;
+      text-align: center;
+    }
     .upimg_box {
       width: 100%;
       height: 500px;
-      border: 1px solid #c1cce3;
+      // border: 1px solid #c1cce3;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -287,6 +323,7 @@ const reClick = () => {
       text-align: center;
     }
     .text_box {
+      padding:16px ;
       font-size: 14px;
       font-weight: 500;
       color: #000000;
@@ -296,27 +333,40 @@ const reClick = () => {
   .load-box {
     display: flex;
     align-items: center;
-    justify-content: center;
+    // justify-content: center;
+    flex-direction: column;
+    .text_box{
+      width: 100%;
+      margin-top: 20px;
+      color: #06286C;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      span{
+        margin-right: 15px;
+      }
+    }
     .light_box {
       width: 500px;
       height: 500px;
-      background-image: url("@/assets/images/light.png");
+      background-image: url("@/assets/images/light_boder.png");
       background-repeat: no-repeat;
       background-size: contain;
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
+      padding:0 15px;
       img {
         width: 100%;
         // height: 100%;
       }
       .light {
-        width: 100%;
+        width: calc(100% - 30px);
         height: 1px;
         position: absolute;
         top: 0;
-        left: 0;
+        left: 15px;
         right: 0;
         bottom: 0;
         background-color: rgba(0, 255, 255, 0.7);
@@ -356,8 +406,8 @@ const reClick = () => {
   display: flex;
   flex-direction: column;
   img {
-    width: 40px;
-    height: 40px;
+    width: 220;
+    height: 220px;
     margin-bottom: 16px;
   }
   span {

src/components/Loading/Loading.vue

@@ -0,0 +1,134 @@
+<template>
+      <div class="loading-medium">
+        <span v-for="item in 8" :key="item"></span>
+      </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+/* 动画 */
+@keyframes load {
+    0% {
+        transform: scale(1);
+        background-color: #efefef;
+    }
+    50% {
+        transform: scale(1.2);
+        background-color: #2E6BC8;
+    }
+    100% {
+        transform: scale(1);
+        background-color: #efefef;
+    }
+}
+/* 
+    小：.loading-small
+    中:.loading-medium
+    大：.loading-large
+*/
+.loading-medium {
+    width: 30px;
+    height: 30px;
+    position: relative;
+}
+.loading-medium.loading-small {
+    width: 25px;
+    height: 25px;
+}
+
+.loading-medium span {
+    position: absolute;
+    width: 5px;
+    height: 5px;
+    background-color: #efefef;
+    border-radius: 50%;
+    animation: load 1s linear infinite;
+}
+.loading-medium.loading-small span {
+    width: 4px;
+    height: 4px;
+}
+
+/* 每个圈圈的位置设置，和动画执行的时间 */
+.loading-medium span:first-child {
+    top: 0;
+    left: 50%;
+    margin-left: -2.5px;
+    margin-top: -2.5px;
+    animation-delay: 0s;
+}
+
+.loading-medium span:nth-child(2) {
+    top: 25%;
+    left: 25%;
+    margin-top: -6.5px;
+    margin-left: -7px;
+    animation-delay: 0.125s;
+}
+.loading-medium.loading-small span:nth-child(2) {
+    margin-top: -5px;
+    margin-left: -5px;
+}
+
+.loading-medium span:nth-child(3) {
+    top: 50%;
+    left: 0;
+    margin-top: -2.5px;
+    margin-left: -2.5px;
+    animation-delay: 0.25s;
+}
+
+.loading-medium span:nth-child(4) {
+    bottom: 25%;
+    left: 25%;
+    margin-left: -7px;
+    margin-bottom: -6.5px;
+    animation-delay: 0.375s;
+}
+.loading-medium.loading-small span:nth-child(4) {
+    margin-bottom: -5px;
+    margin-left: -5px;
+}
+
+.loading-medium span:nth-child(5) {
+    bottom: 0;
+    left: 50%;
+    margin-left: -2.5px;
+    margin-bottom: -2.5px;
+    animation-delay: 0.5s;
+}
+
+.loading-medium span:nth-child(6) {
+    bottom: 25%;
+    right: 25%;
+    margin-bottom: -6.5px;
+    margin-right: -7px;
+    animation-delay: 0.625s;
+}
+.loading-medium.loading-small span:nth-child(6) {
+    margin-bottom: -5px;
+    margin-right: -5px;
+}
+
+.loading-medium span:nth-child(7) {
+    top: 50%;
+    right: 0;
+    margin-top: -2.5px;
+    margin-right: -2.5px;
+    animation-delay: 0.75s;
+}
+
+.loading-medium span:last-child {
+    top: 25%;
+    right: 25%;
+    margin-top: -6.5px;
+    margin-right: -7px;
+    animation-delay: 0.875s;
+}
+.loading-medium.loading-small span:last-child {
+    margin-top: -5px;
+    margin-right: -5px;
+}
+</style>

src/layout/indexCommon.vue

@@ -181,7 +181,7 @@ const toSearch = async () => {
     // console.log("res", res);
     // console.log("router", route.path);
     if (route.path != "/search") {
-      router.replace({
+      router.push({
         path: "/search",
         query: {
           searchData: JSON.stringify(res),

src/views/search/index.vue

@@ -2,7 +2,7 @@
   <div class="container">
     <!-- 搜索标题 -->
     <div class="searchTitle">
-      <el-icon>
+      <el-icon @click="goBack">
         <ArrowLeftBold />
       </el-icon>
       <div class="colLine"></div>
@@ -129,7 +129,7 @@
 import { onMounted, ref, toRaw, inject } from "vue";
 import { search } from "@/api/search/search.js";
 import { flieSearch } from "@/api/search/search.js";
-import { useRoute } from "vue-router";
+import { useRoute,useRouter } from "vue-router";
 const searchFor = ref("1"); //搜索范围
 const searchType = ref("doc"); //搜索对象
 const checkState = ref(false); //勾选框状态
@@ -140,6 +140,7 @@ const total = ref(0); //数据总条数
 const searchText = ref(""); //搜索ipt的值
 const baseData = ref(); //搜索出的原始数据
 const isAsc = ref("asc");
+const router = useRouter(); //注册路由
 
 
 const reload = inject("reload");
@@ -196,6 +197,10 @@ const changeSort = async () => {
 const fliterListData = (dataList) => {
   return dataList;
 };
+// 回退
+const goBack = ()=>{
+  router.back()
+}
 // 设置图标
 const setIcon = (fileType) => {
   switch (fileType) {