Merge pull request #117 from jamebal/style

perf: 优化grid视图下的文件件名称

prettier.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  singleQuote: true,
+  semi: false,
+  trailingComma: 'es6',
+  tabWidth: 2,
+  printWidth: 80,
+  endOfLine: 'lf'
+}

public/index.html

@@ -17,8 +17,8 @@
     <!--axios.js-->
     <script src="<%= htmlWebpackPlugin.options.path %>/resource/axios@0.21.1.js"></script>
     <!--vant.js-->
-    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.path %>/resource/vant@2.12.css"/>
-    <script src="<%= htmlWebpackPlugin.options.path %>/resource/vant@2.12.js"></script>
+    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.path %>/resource/vant@2.12.54.css"/>
+    <script src="<%= htmlWebpackPlugin.options.path %>/resource/vant@2.12.54.js"></script>
     <!--element-ui.js-->
     <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.path %>/resource/element-ui@2.13.0.css">
     <script src="<%= htmlWebpackPlugin.options.path %>/resource/element-ui@2.13.0.js"></script>

src/App.vue

@@ -5,22 +5,21 @@
 </template>
 
 <script>
-
-const pcList = ['/','/s']
-const mobileList = ['/_m','/_m/','/s_m','/s_m/']
+const pcList = ['/', '/s']
+const mobileList = ['/_m', '/_m/', '/s_m', '/s_m/']
 export default {
   name: 'App',
   components: {},
   watch: {
     $route: function(to) {
       const path = to.path
-      if(pcList.includes(path) && !this.$pc){
-        this.$router.push({path: path+'_m', query: to.query})
+      if (pcList.includes(path) && !this.$pc) {
+        this.$router.push({ path: path + '_m', query: to.query })
       }
-      if(mobileList.includes(path) && this.$pc){
-        this.$router.push({path: path.split('_m')[0], query: to.query})
+      if (mobileList.includes(path) && this.$pc) {
+        this.$router.push({ path: path.split('_m')[0], query: to.query })
       }
-    }
-  }
+    },
+  },
 }
 </script>

src/components/Icon/IconFile.vue

@@ -1,5 +1,5 @@
 <template>
-  <span>
+  <span :style="{position: grid ? 'relative': 'unset'}">
     <div v-if="item.isFavorite && !public">
         <div v-if="pc">
           <svg-icon v-if="!grid" class="pc list icon-favorite" icon-class="Favoritestarrate"/>
@@ -32,7 +32,7 @@
     </div>
     <div v-if="item.tags && item.tags.length > 0 && !public">
         <div v-if="pc">
-          <svg-icon v-if="grid" class="pc grid icon-tag" icon-class="tag2" :style="{left: 14 * index + 'px', color: tag.color}" v-for="(tag,index) in item.tags.slice(0, 3)" :key="tag.tagId"/>
+          <svg-icon v-if="grid" class="pc grid icon-tag" icon-class="tag2" :style="{left: 14 * index + 10 + 'px', color: tag.color}" v-for="(tag,index) in item.tags.slice(0, 3)" :key="tag.tagId"/>
           <!--     列表模式下只能显示一个标签     -->
           <svg-icon v-else class="pc list icon-tag" icon-class="tag2" :style="{color: tag.color}" v-for="tag in item.tags.slice(0, 1)" :key="tag.tagId"/>
         </div>
@@ -59,7 +59,7 @@
         </div>
         <el-image lazy v-if="grid" :style="{'height':details?'110px':(gridWidth-35) + 'px'}" fit="contain"
                   :src="item.fileId ? (audioCoverUrl+item.fileId) : (audioCoverUrl+item.id)">
-          <div slot="error" class="image-slot">
+          <div slot="error" class="image-slot-error">
             <svg-icon icon-class="video"/>
           </div>
         </el-image>
@@ -77,7 +77,7 @@
         <div v-if="item.music.name !== null">
           <el-image v-if="grid" :style="{'height':details?'110px':(gridWidth-35) + 'px'}" fit="contain"
                     :src="item.fileId ? (audioCoverUrl+item.fileId) : (audioCoverUrl+item.id)">
-          <div slot="error" class="image-slot">
+          <div slot="error" class="image-slot-error">
             <svg-icon icon-class="audio"/>
           </div>
         </el-image>
@@ -94,7 +94,7 @@
     <div v-else-if="item.contentType && item.contentType.startsWith('image')">
       <el-image v-if="grid || grid === 'details'" :style="{'height':details?'110px':(gridWidth-35) + 'px'}"
                 fit="contain" :src="item.fileId ? (imageUrl+item.fileId) : (imageUrl+item.id)">
-        <div slot="error" class="image-slot">
+        <div slot="error" class="image-slot-error">
           <svg-icon icon-class="image"/>
         </div>
       </el-image>
@@ -191,6 +191,10 @@ export default {
   line-height: 35px;
 }
 
+>>> .image-slot-error {
+  margin-top: 10px;
+}
+
 .icon-favorite {
   position: absolute;
   color: #f5222d;

src/styles/home-index.scss

@@ -293,6 +293,21 @@
 }
 
 >>> .grid-item-text {
+  margin-top: 5px;
+  cursor: default;
+  text-align: center;
+  color: #606266;
+  font-size: smaller;
+  //flex: 1;
+  //align-items: center;
+  justify-content: space-evenly;
+  display: flex;
+  word-break: break-word;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+>>> .grid-item-text-input {
   cursor: default;
   text-align: center;
   color: #606266;
@@ -330,20 +345,16 @@
 }
 >>> .grid-item {
   border-radius: 5px;
-  padding: 0 8px;
   border: solid 1px #ccc0;
   .grid-item-icon{
-    text-align: center;
-    position: absolute;
-    top: 5px;
-    //margin: 9px auto 0;
-    //width: 84px;
-    //height: 84px;
+    //text-align: center;
+    //position: absolute;
+    //top: 0;
   }
   .grid-item-icon-image {
     width: 100%;
     height: 100%;
-    top: 0px;
+    top: 0;
     border-radius: 5px;
     margin: 0;
     -webkit-backdrop-filter: contrast(0.5);