提交样式调整

jydocs-pc/src/components/SelectedRecommend.vue

@@ -1,34 +1,34 @@
 <template>
   <div class="keep-group">
-      <div class="flex-r-c">
-          <div class="title-group flex-r-c center left">
-              <h5>{{ title }}</h5>
-          </div>
+    <div class="flex-r-c">
+      <div class="title-group flex-r-c center left">
+        <h5>{{ title }}</h5>
       </div>
-      <div class="hot-keep-group flex-r-c wrap">
-        <div class="card-item flex-r-c"  v-for="item in options" :key="item.id" @click="goContent(item)">
-          <div class="mini-img-group">
-            <img :src="item.img" alt="" @error="handleError">
-            <i :class="'el-icon-jy-' + item.type" />
+    </div>
+    <div class="hot-keep-group flex-r-c wrap">
+      <div class="card-item flex-r-c" v-for="item in options" :key="item.id" @click="goContent(item)">
+        <div class="mini-img-group">
+          <img :src="item.img" alt="" @error="handleError">
+          <i :class="'el-icon-jy-' + item.type" />
+        </div>
+        <div class="flex-c-c">
+          <div class="flex">
+            <div class="title-text van-multi-ellipsis--l2">{{ item.title }}</div>
           </div>
-          <div class="flex-c-c">
-            <div class="flex">
-              <div class="title-text van-multi-ellipsis--l2">{{item.title}}</div>
-            </div>
-            <div class="money-group center left">
-              {{ item.docTags }}
-            </div>
-            <div class="flex-c-c info-text">
-              <span v-if="item.contribution">贡献者: {{item.contribution}}</span>
-              <div class="info-text-group flex-r-c center left">
-                <span v-if="item.viewTimes">{{ SetViewUnit(item.viewTimes) }}浏览</span>
-                <span v-if="item.page">共{{item.page}}页</span>
-                <span v-if="item.size">{{item.size | sizeFormatter}}</span>
-              </div>
+          <div class="money-group center left">
+            {{ item.docTags }}
+          </div>
+          <div class="flex-c-c info-text">
+            <span v-if="item.contribution">贡献者: {{ item.contribution }}</span>
+            <div class="info-text-group flex-r-c center left">
+              <span v-if="item.viewTimes">{{ SetViewUnit(item.viewTimes) }}浏览</span>
+              <span v-if="item.page">共{{ item.page }}页</span>
+              <span v-if="item.size">{{ item.size | sizeFormatter }}</span>
             </div>
           </div>
         </div>
       </div>
+    </div>
   </div>
 </template>
 
@@ -45,14 +45,14 @@ export default {
       default: () => []
     }
   },
-  data () {
+  data() {
     return {}
   },
   methods: {
-    handleError (img) {
+    handleError(img) {
       img.target.src = require('../assets/images/error.png')
     },
-    SetViewUnit (num) {
+    SetViewUnit(num) {
       let newNum = 0
       if (!num) return 0
       if (num > 10000) {
@@ -62,7 +62,7 @@ export default {
       }
       return newNum
     },
-    goContent (item) {
+    goContent(item) {
       this.$emit('click', item)
     }
   }
@@ -79,8 +79,10 @@ export default {
   @include diy-icon('word', 24);
   @include diy-icon('excel', 24);
   @include diy-icon('ppt', 24);
+
   .title-group {
     margin-bottom: 16px;
+
     h5 {
       color: #1D1D1D;
       font-family: Microsoft YaHei;
@@ -92,6 +94,7 @@ export default {
       margin-right: 9px;
     }
   }
+
   .card-item {
     cursor: pointer;
     justify-content: flex-start;
@@ -103,6 +106,7 @@ export default {
         color: #2ABED1;
       }
     }
+
     .money-group {
       display: block;
       margin-top: 18px;
@@ -114,6 +118,7 @@ export default {
       line-height: 22px;
       color: #999999;
     }
+
     .mini-img-group {
       flex-shrink: 0;
       position: relative;
@@ -127,23 +132,28 @@ export default {
       flex-direction: row;
       align-items: center;
       justify-content: center;
+
       img {
         width: 100%;
       }
+
       i {
         position: absolute;
         right: 0;
         bottom: 0;
       }
     }
+
     .info-text-group {
       span {
         display: inline-block;
+
         &:last-child {
           &::after {
             content: unset;
           }
         }
+
         &::after {
           content: "|";
           padding: 0 4px;
@@ -151,6 +161,7 @@ export default {
         }
       }
     }
+
     .info-text {
       font-family: Microsoft YaHei;
       font-style: normal;
@@ -159,6 +170,7 @@ export default {
       line-height: 24px;
       color: #999999;
     }
+
     .red-text {
       color: #FF3A20;
       font-family: Microsoft YaHei;
@@ -167,6 +179,7 @@ export default {
       font-size: 18px;
       line-height: 28px;
     }
+
     .title-text {
       width: 183px;
       font-family: Microsoft YaHei;
@@ -178,6 +191,7 @@ export default {
       word-wrap: break-word;
     }
   }
+
   .van-ellipsis {
     overflow: hidden;
     white-space: nowrap;
@@ -192,6 +206,7 @@ export default {
     -webkit-box-orient: vertical;
 
   }
+
   .hot-keep-group {
     .card-item {
       width: 279px;
@@ -199,21 +214,24 @@ export default {
     }
   }
 }
-.in-app{ // 工作台内适配
-  .hot-keep-group{
+
+.in-app {
+
+  // 工作台内适配
+  .hot-keep-group {
     justify-content: flex-start !important;
+
     @media screen and (max-width: 1248px) {
-    .word-recommend-ad-list {
-      .card-item{
-         margin-right: 45px;
-      }
+        .card-item {
+          margin-right: 45px;
+        }
     }
-  }
-  @media screen and (min-width: 1248px) {
-    .card-item{
-      margin-right: 104px;
+
+    @media screen and (min-width: 1248px) {
+      .card-item {
+        margin-right: 104px;
+      }
     }
   }
-  }
 }
 </style>