修改分页样式，添加图标

2 years ago · f4428f524c
parent 84e5467b90
commit f4428f524c
5 changed files with 102 additions and 15 deletions
--- a/assets/images/fileIcon2.png
+++ b/assets/images/fileIcon2.png
--- a/assets/images/fileIcon3.png
+++ b/assets/images/fileIcon3.png
--- a/assets/images/fileIcon4.png
+++ b/assets/images/fileIcon4.png
--- a/assets/images/fileIcon5.png
+++ b/assets/images/fileIcon5.png
--- a/pages/translate.vue
+++ b/pages/translate.vue
@ -29,7 +29,7 @@
      <el-button v-if="radio1==4" @click="translate3">识别</el-button>
      <div class="select_wrap" v-if="currentLangModalStatus" ref="tanchuang1">
        <el-input placeholder="搜索语言" v-model="searchLanguage"
-                  @keyup.enter="inputChange"></el-input>
+                  @input="inputChange"></el-input>
        <div class="hr"></div>
        <div class="language_wrap">
          <el-scrollbar class="scrollbar">
@ -43,7 +43,7 @@
      </div>
      <div class="select_wrap" v-if="targetLangModalStatus" ref="tanchuang2">
        <el-input placeholder="搜索语言" v-model="searchLanguage2"
-                  @keyup.enter="inputChange2"></el-input>
+                  @input="inputChange2"></el-input>
        <div class="hr"></div>
        <div class="language_wrap">
          <el-scrollbar class="scrollbar">
@ -77,14 +77,37 @@
          :on-change="uploadChange"
          :on-success="uploadSuccess"
          :on-error="uploadError"
-          accept=".docx,.xls,.xlsx,.ppt,.pptx,.pdf"
+          accept=".doc,.docx,.xls,.xlsx,.txt,.pdf"
          action="/api/common/upload">
-          <img style="width:64px;height:64px;marginLeft:45px" src="../assets/images/fileIcon.png" alt="">
+          <div class="fileIcon">
+            <div class="fileIconItem">
+              <img  src="../assets/images/fileIcon2.png" alt="">
+              <span class="fileIcon_text">pdf</span>
+
+            </div>
+            <!-- <div class="fileIconItem">
+              <img style="width:55px;height:45px;marginLeft:45px" src="../assets/images/fileIcon2.png" alt="">
+              <span>jpg/jpeg/png/bmp</span>
+
+            </div> -->
+            <div class="fileIconItem">
+              <img  src="../assets/images/fileIcon3.png" alt="">
+              <span class="fileIcon_text">txt</span>
+            </div>
+            <div class="fileIconItem">
+              <img  src="../assets/images/fileIcon4.png" alt="">
+              <span class="fileIcon_text">xls/xlsx</span>
+            </div>
+            <div class="fileIconItem">
+              <img  src="../assets/images/fileIcon5.png" alt="">
+              <span class="fileIcon_text">doc/docx</span>
+            </div>
+          </div>
          <div class="el-upload__text">
            点击文件上传
          </div>
          <div class="el-upload__text2">
-            支持扩展名：docx、xls、xlsx、ppt、pptx、pdf格式
+            支持扩展名：doc、docx、xls、xlsx、txt、pdf格式
          </div>
        </el-upload>
        <el-upload
@ -99,7 +122,30 @@
          :on-error="uploadError"
          accept=".pdf,.jpg,.jpeg,.png,.bmp"
          action="/api/common/upload">
-          <img style="width:64px;height:64px;marginLeft:45px" src="../assets/images/fileIcon.png" alt="">
+          <div class="fileIcon">
+            <div class="fileIconItem">
+              <img  src="../assets/images/fileIcon2.png" alt="">
+              <span class="fileIcon_text">pdf</span>
+
+            </div>
+            <div class="fileIconItem">
+              <img  src="../assets/images/fileIcon.png" alt="">
+              <span class="fileIcon_text">jpg/jpeg/png/bmp</span>
+
+            </div>
+            <!-- <div class="fileIconItem">
+              <img style="width:55px;height:45px;marginLeft:45px" src="../assets/images/fileIcon3.png" alt="">
+              <span>txt</span>
+            </div>
+            <div class="fileIconItem">
+              <img style="width:55px;height:45px;marginLeft:45px" src="../assets/images/fileIcon4.png" alt="">
+              <span>xls/xlsx</span>
+            </div>
+            <div class="fileIconItem">
+              <img style="width:55px;height:45px;marginLeft:45px" src="../assets/images/fileIcon5.png" alt="">
+              <span>doc/docx</span>
+            </div> -->
+          </div>
          <div class="el-upload__text">
            点击文件上传
          </div>
@ -149,7 +195,7 @@
        </el-row>

      </el-form>
-      <el-table v-loading="loading" size="large" border :data="content" :empty-text="'暂无数据'"
+      <el-table v-loading="loading" size="large"  :data="content" :empty-text="'暂无数据'"
        :header-cell-style="{background: '#f5f5f5', color:'#333333'}">
        <el-table-column show-overflow-tooltip align="center" label="时间" prop="date"></el-table-column>
        <el-table-column show-overflow-tooltip align="center" label="名称" prop="name">
@ -239,6 +285,8 @@ const upload = ref()
 const fileUrl = ref('')
 const uid = ref('')
 const timer2 = ref(1)
+const timer3 = ref(1)
+const timer4 = ref(1)
 const socket = ref(null)

 watch(currentLangModalStatus, (val) => {
@ -283,13 +331,19 @@ watchEffect(() => {


 async function inputChange() {
-  const {data: data} = await translateApi.getAllLanguage({keyword: searchLanguage.value})
-  language.value = data
+  clearTimeout(timer3.value)
+  timer3.value = setTimeout(async()=>{
+    const {data: data} = await translateApi.getAllLanguage({keyword: searchLanguage.value})
+    language.value = data
+  },1000)
 }

 async function inputChange2() {
-  const {data: data} = await translateApi.getAllLanguage({keyword: searchLanguage2.value})
-  language2.value = data
+  clearTimeout(timer4.value)
+  timer4.value = setTimeout(async()=>{
+    const {data: data} = await translateApi.getAllLanguage({keyword: searchLanguage2.value})
+    language2.value = data
+  },1000)
 }

 function changeTranslate(val: any) {
@ -316,10 +370,10 @@ function beforeUpload(file: any) {
    console.log(typeof fileExtName)
    if(
        fileExtName === 'docx' ||
+        fileExtName === 'doc' ||
        fileExtName === 'xls' ||
        fileExtName === 'xlsx' ||
-        fileExtName === 'ppt' ||
-        fileExtName === 'pptx' ||
+        fileExtName === 'txt' ||
        fileExtName === 'pdf'
    ){
       //进行上传成功的一些操作;
@ -332,7 +386,7 @@ function beforeUpload(file: any) {
      }
    }else{
         // 提醒只能上传的文件类型
-        ElMessage.warning('只能上传.docx,.xls,.xlsx,.ppt,.pptx,.pdf类型的文件！');
+        ElMessage.warning('只能上传.docx,.xls,.xlsx,.txt,.pdf类型的文件！');
        return false;
    }
 }
@ -812,7 +866,7 @@ allLanguage()
  font-weight: 600;
  color: #333333;
  line-height: 22px;
-  margin-bottom: 49px;
+  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
@ -907,4 +961,37 @@ allLanguage()
  border-radius: 16px;
  background-color: #fff;
 }
+.mt-32{
+      height: 140px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 40px;
+    background-color: #fff;
+    margin: 0;
+}
+.fileIcon{
+  display: flex;
+  // justify-content: center;
+  align-items: center;
+  margin-top: -10px;
+  margin-bottom: 15px;
+  .fileIconItem{
+    margin-left: 45px;
+    img{
+      width: 64px;
+      height: 64px;
+    }
+  }
+  .fileIcon_text{
+    font-size: 12px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #999999;
+    line-height: 17px;
+  }
+  .fileIcon_text2{
+    margin-top: -10px;
+  }
+}
 </style>