样式修改

src/views/data/InforList.vue

@@ -2,13 +2,20 @@
   <div>
     <div class="upload_record" v-if="initialPage">
       <h1>资料列表</h1>
-      <div class="searchBox">
+      <div class="search HeadLeft">
+        <div class="input">
+          <img src="../../img/search.png" />
+          <input type="text" name="" id="" placeholder="请输入要搜索的资料名" />
+          <button>搜索</button>
+        </div>
+      </div>
+   <!--    <div class="searchBox">
         <div class="search_inside">
           <span><img src="" alt="" /></span>
           <input type="text" name="" id="" placeholder="请输入要搜索的资料名" />
           <button>搜索</button>
         </div>
-      </div>
+      </div> -->
       <div class="sortBox">
         <div class="sort_inside">
           <span>是否下载</span>
@@ -74,6 +81,7 @@
           @change_page="changePage"
           @jump_page="jumpPage"
         />
+        <p>共{{1}}页，共{{3}}条数据</p>
       </div>
     </div>
     <div v-else>
@@ -335,4 +343,37 @@ export default {
   justify-content: space-around;
   align-items: center;
 }
+/* 搜索栏 */
+.search {
+  padding: 10px 15px 10px 10px;
+  display: flex;
+  align-items: center;
+  .input {
+    background-color: #fff;
+    padding: 2px;
+    display: flex;
+    img {
+      width: 16px;
+      height: 16px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+    input {
+      background-color: #fff;
+      border: 0px solid #ccc;
+      padding-left: 4px;
+      color: #555;
+      font-size: 12px;
+    }
+  }
+}
+.pageD{
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 10px;
+}
+.pageD p{
+  margin-left: 16px;
+}
 </style>

src/views/data/UploadLink.vue

@@ -107,18 +107,20 @@
     <div class="timeLimitStyle">
       <span>仅可对上传时间为{{ feedbackTimeLimit }}个月内的资料进行反馈</span>
     </div>
-    <div class="fileOperation">
-      <span class="operationStyle">导入模板</span>
-      <button @click="toggleModal4()">导入</button>
-      <button>导出</button>
-    </div>
-     <TablePage
+    <div class="pageBottom">
+      <div class="fileOperation">
+        <span class="operationStyle">导入模板</span>
+        <button @click="toggleModal3()">导入</button>
+        <button>导出</button>
+      </div>
+      <TablePage
         :currentPage="currentPage"
         :totalPage="totalPage"
         @change_page="changePage"
         @jump_page="jumpPage"
         class="tablePageStyle"
       ></TablePage>
+    </div>
 
     <!-- 弹窗： 上传链接超过剩余限制数量，请修改后重新导入 -->
     <div class="modal-backdrop" v-show="showModal3">
@@ -143,7 +145,7 @@
           <div class="bodyRow">资料名称无法匹配，请修改后重新导入</div>
           <div class="bodyRow">成功{{ 1 }}条，失败{{ 1 }}条</div>
         </div>
-        <div class="modal-footer">
+        <div class="modal-footer" style="position: relative; top: 95px;">
           <button type="button" class="btn-confirm" @click="closeme4()">
             确定
           </button>
@@ -402,9 +404,14 @@ export default {
 .table_gray {
   background-color: #00549f;
 }
-
+.tableBox table{
+  border-collapse: collapse;
+  border: 0px;
+}
 .tableBox table td {
   border: 1px solid #ccc;
+  border-right: 0px;
+  border-bottom: 0px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -480,6 +487,9 @@ export default {
   margin: 10px;
   align-items: center;
 }
+.fileOperation button{
+  border-radius: 4px;
+}
 .timeLimitStyle {
   padding: 10px;
 }
@@ -558,4 +568,9 @@ export default {
   position: relative;
   left: 266px;
 } */
+.pageBottom{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 </style>

src/views/data/UploadLinks.vue

@@ -33,7 +33,7 @@
       <table class="distributorLinkTable">
         <thead class="theadStyle">
           <tr class="tableHeadStyle1">
-            <td>基础信息</td>
+            <td style="width: 1069px">基础信息</td>
             <td>论坛传播情况汇总</td>
           </tr>
           <tr class="tableHeadStyle2">
@@ -50,22 +50,25 @@
             :class="{ table_gray: !discolor && index % 2 === 0 }"
           >
             <td v-if="flag">{{ index + 1 }}</td>
-            <td v-for="(item, i) in obj" :key="i">{{item}}</td>
+            <td v-for="(item, i) in obj" :key="i">{{ item }}</td>
           </tr>
         </tbody>
       </table>
     </div>
-     <TablePage
-      :currentPage='currentPage'
-      :totalPage='totalPage'
-      @change_page='changePage'
-      @jump_page='jumpPage'
-    ></TablePage>
+    <div class="pageBottom">
+      <button>导出</button>
+      <TablePage
+        :currentPage="currentPage"
+        :totalPage="totalPage"
+        @change_page="changePage"
+        @jump_page="jumpPage"
+      ></TablePage>
+    </div>
   </div>
 </template>
 
 <script>
-import TablePage from '../../components/TablePage';
+import TablePage from "../../components/TablePage";
 export default {
   props: {
     isManufacturer: {
@@ -74,11 +77,11 @@ export default {
     },
   },
   components: {
-    TablePage
+    TablePage,
   },
   data() {
     return {
-      inputValue: '请输入要搜索的资料名',
+      inputValue: "请输入要搜索的资料名",
       // 表格配置
       sum: 240, // 一共有多少条数据
       pageSize: 20, // 每页展示的数据
@@ -154,10 +157,10 @@ export default {
       flag: true,
     };
   },
-  computed:{
+  computed: {
     // 表格总页数
     totalPage() {
-      return Math.ceil(this.sum/this.pageSize);
+      return Math.ceil(this.sum / this.pageSize);
     },
   },
   methods: {
@@ -172,8 +175,8 @@ export default {
       console.log("inGetIndex", index);
     },
     // 点击上一页，下一页，首页，尾页
-    jumpPage: function(item) {
-      switch(item) {
+    jumpPage: function (item) {
+      switch (item) {
         case 1:
           this.currentPage = 1;
           break;
@@ -189,7 +192,7 @@ export default {
       }
       console.log(this.currentPage);
     },
-    changePage: function(page) {
+    changePage: function (page) {
       this.currentPage = page;
       console.log(page);
     },
@@ -209,32 +212,21 @@ export default {
 .tableBox {
   width: 1030px;
   overflow: auto;
-}
-.tableBox {
   text-align: center;
-  .table {
-    table-layout: fixed;
-    background-color: #fff;
-    border-collapse: collapse;
-    border: none;
-    td {
-      border: 1px solid #ccc;
-    }
-    span {
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
+}
+.tableBox table {
+  border-collapse: collapse;
+  border: none;
 }
 .table_gray {
   background-color: #00549f;
 }
-
-.tableBox table td {
+.tableBox td {
   border: 1px solid #ccc;
-  border-right: 0px;
   border-bottom: 0px;
+  border-right: 0px;
+}
+.tableBox table td {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -242,67 +234,62 @@ export default {
 // 表头样式
 .theadStyle tr td {
   color: white;
+  background-color: #8d9092;
 }
 .tableHeadStyle1 {
   background: #848484;
-  height: 30px;
   color: #fff;
   display: flex;
   align-items: center;
 }
 .tableHeadStyle1 td {
   width: 100%;
-  padding: 7px 5px;
 }
-.tableHeadStyle1 td:nth-child(1) {
+/* .tableHeadStyle1 td:nth-child(1) {
   border-right: 0px;
   border-bottom: 0px;
-}
-.tableHeadStyle1 td:nth-child(2) {
+} */
+/* .tableHeadStyle1 td:nth-child(2) {
   border-right: 0px;
   border-bottom: 0px;
-}
+} */
 .tableHeadStyle2 {
   background: #848484;
-  height: 30px;
   color: #fff;
   display: flex;
   align-items: center;
 }
 .tableHeadStyle2 td {
   width: 60px;
-  padding: 7px 5px;
 }
 .tableHeadStyle2 td:nth-child(10) {
   width: 100px;
-  padding: 7px 5px;
 }
 .tableHeadStyle2 td:nth-child(11) {
   width: 100px;
-  padding: 7px 5px;
 }
 .tableHeadStyle2 td:nth-child(12) {
   width: 100px;
-  padding: 7px 5px;
 }
 .tableHeadStyle2 td:nth-child(2) {
   width: 100px;
-  padding: 7px 5px;
 }
 .tableHeadStyle2 td:nth-child(3) {
   width: 100px;
-  padding: 7px 5px;
 }
 .bodyStyle {
   display: block;
   background-color: #fff;
 }
+/* .bodyStyle tr:nth-child(1) {
+  border-top: 0px;
+} */
 .bodyContent td {
   background-color: #fff;
   height: 20px;
 }
 .bodyContent td:last-child {
-  color: #027DB4;
+  color: #027db4;
 }
 
 /* 搜索栏 */
@@ -354,7 +341,22 @@ export default {
 .tableTitle {
   margin-bottom: 4px;
 }
-.distributorLinkTable{
+.distributorLinkTable {
   height: 600px;
 }
+.distributorLinkTable td {
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0px 10px;
+}
+.pageBottom{
+  display: flex;
+  justify-content: space-between;
+}
+.pageBottom button{
+  border-radius: 4px;
+  width: 80px;
+}
 </style>

src/views/data/components/InfoListItemDetail.vue

@@ -6,43 +6,46 @@
     <div class="content">
       <div class="content_datail">
         <div class="detail">
-          <p style="width: 80px">资料名称：</p>
-          <p>{{ detailData[nowIndex].informationName }}</p>
+          <span>资料名称：</span>
+          <span>{{ detailData[nowIndex].informationName }}</span>
         </div>
         <div class="detail">
-          <p style="width: 80px">上传时间：</p>
-          <p>{{ detailData[nowIndex].time }}</p>
+          <span>上传时间：</span>
+          <span>{{ detailData[nowIndex].time }}</span>
         </div>
         <div class="multiDetail">
-          <div class="time">
-            <span style="width: 80px">车系：</span>
-            <span>{{ detailData[nowIndex].carSeries }}</span>
+          <div class="firstColumn">
+            <span>车系：</span>
+            <!-- carSeries -->
+            <span>{{
+              detailData[nowIndex].spread
+            }}</span>
           </div>
-          <div class="range">
-            <p style="width: 80px">车型：</p>
-            <p style="margin-right: 10px">
-              {{ detailData[nowIndex].carSeries }}
-            </p>
+          <div class="secondColumn">
+            <span>车型：</span>
+            <span>
+              {{ detailData[nowIndex].spread }}
+            </span>
           </div>
         </div>
         <div class="multiDetail">
-          <div class="time">
-            <span style="width: 80px">素材时间：</span>
-            <span>{{ detailData[nowIndex].carSeries }}</span>
+          <div class="firstColumn">
+            <span>素材时间：</span>
+            <span>{{ detailData[nowIndex].spread }}</span>
           </div>
-          <div class="range">
-            <p style="width: 80px">经销商范围：</p>
-            <p style="margin-right: 10px">
-              {{ detailData[nowIndex].carSeries }}
-            </p>
+          <div class="secondColumn">
+            <span>经销商范围：</span>
+            <span>
+              {{ detailData[nowIndex].spread }}
+            </span>
           </div>
         </div>
         <div class="detail">
-          <p style="width: 80px">资料描述：</p>
-          <p>{{ detailData[nowIndex].carSeries }}</p>
+          <span>资料描述：</span>
+          <span>{{ detailData[nowIndex].spread }}</span>
         </div>
-        <div class="files">
-          <p style="width: 80px">附件：</p>
+        <div class="filesStyle multiDetail">
+          <span>附件：</span>
           <div class="filesName">
             <p
               v-for="(item, index) in dataObj.files"
@@ -50,7 +53,7 @@
               @click="downloadFile(index)"
             >
               {{ item.name }}
-            </p>
+            </p>附件附件
           </div>
         </div>
       </div>
@@ -110,68 +113,53 @@ export default {
   }
   .content {
     display: flex;
-    // justify-content: ;
     border: 1px solid #ccc;
     padding: 20px;
     .content_datail {
-      width: 420px;
-      height: 390px;
+      width: 100%;
       padding: 20px 50px 0;
       .detail {
         width: 100%;
-        min-height: 50px;
+        height: 50px;
         display: flex;
-      }
-      .multiDetail {
-        display: flex;
-        min-height: 50px;
-        .time {
-          width: 126px;
-          display: flex;
-        }
-        .range {
-          display: flex;
-          width: 268px;
-          span {
-            color: #0056a0;
-            margin: 0 10px;
-            &:hover {
-              cursor: pointer;
-            }
-          }
-        }
-      }
-      .files {
-        display: flex;
-        .filesName {
-          p {
-            color: #0056a0;
-          }
-        }
-      }
-    }
-    .table {
-      width: 568px;
-      height: 390px;
-      background-color: #fff;
-      padding: 10px;
-      .table_option {
-        height: 28px;
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        select {
-          width: 144px;
-          height: 28px;
-          border: 1px solid #ccc;
-          color: #555;
-        }
-      }
-      .count {
-        display: flex;
-        justify-content: flex-end;
+        align-items: center;
       }
     }
   }
 }
+.multiDetail {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+}
+.firstColumn, .secondColumn {
+  display: flex;
+  align-items: center;
+}
+.firstColumn span:nth-child(1) {
+ /*  width: 80px; */
+  display: block;
+  margin-right: 16px;
+}
+.secondColumn span:nth-child(1) {
+/*   width: 80px; */
+  display: block;
+  margin-left: 40px;
+  margin-right: 16px;
+}
+.detail span:nth-child(1) {
+  /* width: 80px; */
+  margin-right: 16px;
+}
+.filesStyle span:nth-child(1) {
+  /* width: 80px; */
+  margin-right: 16px;
+}
+/* .detail span:nth-child(2){
+  width: 150px;
+} */
+.filesName{
+  color: #4B8EC7;
+}
 </style>