政策订阅 样式修改

src/views/PolicyDirect/components/policySubscription.vue

@@ -98,10 +98,10 @@
     <div class="PolicySubscription-content">
       <template v-if="cardList.length > 0">
         <el-row class="title">
-          <el-col :span="2">
+          <el-col :span="1">
             <span>#</span>
           </el-col>
-          <el-col :span="10">
+          <el-col :span="11">
             <span>标题</span>
           </el-col>
           <el-col :span="6">
@@ -122,25 +122,25 @@
             @click="gotoDetails(item.id)"
           >
             <el-row class="row">
-              <el-col :span="2">
+              <el-col class="index" :span="1">
                 <span>{{ index + 1 }}</span>
               </el-col>
-              <el-col :span="10" style="cursor: pointer">
-                <span style=" color: #018FD6;font-weight: bold">[{{
+              <el-col class="title-text" :span="11" style="cursor: pointer">
+                <div class="level">【{{
                   findLabelSingle(item.level, 'policyLevel')
-                }}]</span>
-                <span style="white-space: pre-wrap">{{ item.title }}</span>
+                }}】</div>
+                <div class="title-detail" style="white-space: pre-wrap">{{ item.title }}</div>
               </el-col>
-              <el-col :span="6">
+              <el-col class="support-amount" :span="6">
                 <span>{{
                   item.isSupport === undefined || item.isSupport === null || item.isSupport === '0' ? '根据实际情况给予扶持' : item.supportAmount + '万元'
                 }}</span>
               </el-col>
-              <el-col :span="3">
+              <el-col class="release-time" :span="3">
                 <span v-if="item.releaseDate">{{ item.releaseDate | transformDateByFormat('YYYY/MM/DD') }}</span>
                 <span v-else>{{ nothingTip }}</span>
               </el-col>
-              <el-col :span="3">
+              <el-col class="declare-end-time" :span="3">
                 <!--<span v-if="item.declareBeginTime != null && item.declareEndTime != null">{{
                   item.declareBeginTime | transformDateByFormat('YYYY/MM/DD')
                 }} ~ {{ item.declareEndTime | transformDateByFormat('YYYY/MM/DD') }}</span>
@@ -158,17 +158,18 @@
             </el-row>
           </div>
         </div>
+        <pagination
+          :page.sync="searchForm.pageNum"
+          :limit.sync="searchForm.pageSize"
+          :rows="[10, 20, 30, 50]"
+          :total="total"
+          @pagination="handleQuery"
+        />
       </template>
       <div v-else class="no-data">
         <el-image :src="images.ZanWuShuJu" />
       </div>
-      <pagination
-        :page.sync="searchForm.pageNum"
-        :limit.sync="searchForm.pageSize"
-        :rows="[10, 20, 30, 50]"
-        :total="total"
-        @pagination="handleQuery"
-      />
+
     </div>
     <el-dialog
       class="policy-subscription-add-subscription-dialog"
@@ -777,6 +778,8 @@ export default {
 
 <style scoped lang="scss">
 .PolicySubscription-module {
+  font-size: 15px;
+  color: #333333;
 
   .search {
     background-color: #FFFFFF;
@@ -833,11 +836,13 @@ export default {
 
   .PolicySubscription-content {
     margin: 20px 0;
+    background-color: #FFFFFF;
+    padding: 25px 40px;
 
     .title {
-      padding: 0 15px;
-      margin: 20px 0;
+      padding: 0 10px 19px;
       background-color: #FFFFFF;
+      border-bottom: 1px solid #E4E4E4;
       font-size: 17px;
       font-family: Source Han Sans CN-Bold, Source Han Sans CN,serif;
       font-weight: bold;
@@ -856,16 +861,25 @@ export default {
 
     .pc-card {
       .pc-cardChild {
-        padding: 15px;
-        margin-bottom: 10px;
-        background-color: #FFFFFF;
-
+        padding: 20px 10px;
+        border-bottom: 1px solid #E4E4E4;
         .row {
-          padding: 5px 0;
 
           .row-label {
             font-weight: bold;
           }
+          .title-text {
+            display: flex;
+            padding-right: 70px;
+            .level {
+              min-width: 5.1rem;
+              text-align: center;
+              color: #1A78E5;
+            }
+            .title-detail {
+
+            }
+          }
         }
       }
     }