style: 优化样式和布局

src/components/ShowFile/ShowFile.vue

@@ -2426,7 +2426,7 @@ export default {
       if (!file.exif && !file.video) {
         return ''
       }
-      return "\r\n" + formatExif(file.exif) + formatVideo(file.video, '<br>')
+      return formatExif(file.exif, '<br>') + formatVideo(file.video, '<br>')
     },
     upload() {
       // 打开文件选择框

src/components/preview/FileDetails.vue

@@ -271,7 +271,7 @@ export default {
       return formatSize(size)
     },
     formatExif(exifInfo) {
-      return formatExif(exifInfo)
+      return formatExif(exifInfo, '\r\n')
     },
     formatVideo(videoInfo) {
       return formatVideo(videoInfo, '\r\n')

src/utils/media.js

@@ -1,55 +1,56 @@
-export function formatExif(exifInfo) {
+export function formatExif(exifInfo, lineBreak) {
   if (!exifInfo) {
     return ''
   }
+  lineBreak = lineBreak || '\r\n'
   let exifStr = ''
   if (exifInfo['dateTimeOriginal']) {
     exifStr += `内容创作时间: ${exifInfo['dateTimeOriginal']}`
   }
   if (exifInfo['resolution']) {
-    exifStr += `\r\n分辨率: ${exifInfo['resolution']}`
+    exifStr += `${lineBreak}分辨率: ${exifInfo['resolution']}`
   }
   if (exifInfo['make']) {
-    exifStr += `\r\n设备制造商: ${exifInfo['make']}`
+    exifStr += `${lineBreak}设备制造商: ${exifInfo['make']}`
   }
   if (exifInfo['model']) {
-    exifStr += `\r\n设备型号: ${exifInfo['model']}`
+    exifStr += `${lineBreak}设备型号: ${exifInfo['model']}`
   }
   if (exifInfo['aperture']) {
-    exifStr += `\r\n光圈值: ${exifInfo['aperture']}`
+    exifStr += `${lineBreak}光圈值: ${exifInfo['aperture']}`
   }
   if (exifInfo['exposureTime']) {
-    exifStr += `\r\n曝光时间: ${exifInfo['exposureTime']}`
+    exifStr += `${lineBreak}曝光时间: ${exifInfo['exposureTime']}`
   }
   if (exifInfo['focalLength']) {
-    exifStr += `\r\n焦距: ${exifInfo['focalLength']} 毫米`
+    exifStr += `${lineBreak}焦距: ${exifInfo['focalLength']} 毫米`
   }
   if (exifInfo['isoEquivalent']) {
-    exifStr += `\r\nISO感光度: ${exifInfo['isoEquivalent']}`
+    exifStr += `${lineBreak}ISO感光度: ${exifInfo['isoEquivalent']}`
   }
   if (exifInfo['flash']) {
-    exifStr += `\r\n闪光灯: ${exifInfo['flash']}`
+    exifStr += `${lineBreak}闪光灯: ${exifInfo['flash']}`
   }
   if (exifInfo['fNumber']) {
-    exifStr += `\r\n光圈数: ${exifInfo['fNumber']}`
+    exifStr += `${lineBreak}光圈数: ${exifInfo['fNumber']}`
   }
   if (exifInfo['exposureProgram']) {
-    exifStr += `\r\n曝光程序: ${exifInfo['exposureProgram']}`
+    exifStr += `${lineBreak}曝光程序: ${exifInfo['exposureProgram']}`
   }
   if (exifInfo['meteringMode']) {
-    exifStr += `\r\n测光模式: ${exifInfo['meteringMode']}`
+    exifStr += `${lineBreak}测光模式: ${exifInfo['meteringMode']}`
   }
   if (exifInfo['whiteBalanceMode']) {
-    exifStr += `\r\n白平衡: ${exifInfo['whiteBalanceMode']}`
+    exifStr += `${lineBreak}白平衡: ${exifInfo['whiteBalanceMode']}`
   }
   if (exifInfo['software']) {
-    exifStr += `内容创作者: ${exifInfo['software']}`
+    exifStr += `${lineBreak}内容创作者: ${exifInfo['software']}`
   }
   if (exifInfo['longitude']) {
-    exifStr += `\r\n经度: ${exifInfo['longitude']}`
+    exifStr += `${lineBreak}经度: ${exifInfo['longitude']}`
   }
   if (exifInfo['latitude']) {
-    exifStr += `\r\n纬度: ${exifInfo['latitude']}`
+    exifStr += `${lineBreak}纬度: ${exifInfo['latitude']}`
   }
   return exifStr
 }

src/views/public/share/shareList.vue

@@ -50,10 +50,12 @@
       <div class="popper-arrow"></div>
       <ul v-for="item in menus" :key="item.label">
         <li class="menu-option" @click="menusOperations(item.operation)">
-          <label class="menuitem">
+          <div class="menuitem home-contextmenu">
             <svg-icon :icon-class="item.iconClass"/>
-            <span class="menuitem text">{{ item.label }}</span>
+            <div class="home-contextmenu-title">
-          </label>
+              <span class="menuitem text">{{ item.label }}</span>
+            </div>
+          </div>
         </li>
       </ul>
     </e-vue-contextmenu>
@@ -270,8 +272,8 @@
       :sharer="sharerUsername"
       :status.sync="iframePreviewVisible"
     ></iframe-preview>
-    <el-divider v-if="!linkFailed && !showShareCode" class="grid-divider" content-position="center"><i
+    <el-divider v-if="!linkFailed && !showShareCode" class="grid-divider" content-position="center">
-      class="el-icon-folder-opened"></i>&nbsp;{{ summaries }}
+      <i class="el-icon-folder-opened"></i>&nbsp;{{ summaries }}
     </el-divider>
     <el-pagination
       background
@@ -1144,7 +1146,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "src/styles/home-index";
+@import 'src/styles/index';
+@import 'src/styles/home-index';
 /*.el-breadcrumb {*/
 /*margin: 50px;*/
 .dashboard-container {
@@ -1228,9 +1231,10 @@ export default {
 }
 
 .grid-divider {
-  height: 0;
+  height: 30px;
   text-align: center;
   width: auto;
+  background: unset;
 
   > > > .el-divider__text {
   }
@@ -1315,8 +1319,11 @@ export default {
   margin-left: 5px !important;
 }
 
->>> .van-grid-item__content .svg-icon{
+>>> .van-grid-item__content {
-  font-size: 4.5rem;
+  padding: 8px;
+  .svg-icon{
+    font-size: 4.5rem;
+  }
 }
 
 >>> .grid-file-text {

src/views/share/index.vue

@@ -562,7 +562,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/styles/home-index";
+@import 'src/styles/index';
+@import 'src/styles/home-index';
   .container {
     min-width: 1024px;
   }