Merge branch 'master' of http://121.40.40.223:3000/zizhong.wang/Lexus-media

src/App.vue

@@ -36,7 +36,7 @@ export default {
     return {
       navTitle1: ' > 数据管理',
       navTitle2: '',
-      isManufacturer: 'manufacturer', // distributor 经销商 manufacturer 厂商
+      isManufacturer: 'distributor', // distributor 经销商 manufacturer 厂商
     }
   },
   methods: {

src/components/Modal.vue

@@ -3,7 +3,7 @@
     <div class="modal">
       <!--  id="unloadFile" :style="mainStyles"-->
       <div class="modal-header">
-        <h3>编辑</h3>
+        <span>编辑</span>
       </div>
       <div class="modal-body">
         <div class="bodyRow">
@@ -12,11 +12,9 @@
             <option value="">请选择</option>
           </select>
         </div>
-        <div class="bodyRow">
+        <div class="bodyRow timeWidth">
           <span>发布时间</span
-          ><select name="" id="">
-            <option value="">请选择</option>
-          </select>
+          ><input type="datetime" placeholder="选择时间">
         </div>
         <div class="bodyRow">
           <div class="contentCol1">
@@ -35,9 +33,8 @@
         <div class="bodyRow">
           <div class="contentCol1">
             <span>发布平台</span
-            ><select name="" id="">
-              <option value="">请选择</option>
-            </select>
+            >
+            <div>汽车之家</div>
           </div>
 
           <div class="contentCol2">
@@ -74,7 +71,7 @@
         </div>
         <div class="bodyRow">
           <span>链接</span>
-          <input type="text" placeholder="文章链接" v-model="dataset_link" />
+          <input type="text" placeholder="文章发布地址" v-model="dataset_link" />
         </div>
       </div>
       <div class="modal-footer">
@@ -146,7 +143,6 @@ export default {
         }); */
     },
     edit: function () {
-      // 数据发送给父组件
       this.$emit("update", this.dataset_title)  ;
       this.book = "";
       console.log("modal:", this.dataset_title);
@@ -163,18 +159,18 @@ export default {
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: #7D9191;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .modal {
-  background-color: #eeeeee;
+  background-color:#EEEEEE;
   box-shadow: 2px 2px 20px 1px;
   overflow-x: auto;
   display: flex;
   flex-direction: column;
-  border-radius: 16px;
+  border-radius: 0px;
   width: 1030px;
 }
 .modal-header {
@@ -183,6 +179,11 @@ export default {
   justify-content: space-between;
   padding: 15px;
   display: flex;
+  border-bottom: 1px solid #E3E3E3;
+}
+.modal-header span{
+  font-size: 16px;
+  font-weight: bold;
 }
 .modal-footer {
   border-top: 1px solid #eee;
@@ -190,10 +191,21 @@ export default {
   padding: 15px;
   display: flex;
 }
+.modal-footer button{
+  width: 90px;
+  margin-left: 0px;
+}
+.modal-footer button:nth-child(1){
+  margin-right: 80px;
+}
 .modal-body {
   position: relative;
-  padding: 20px 150px 20px 150px;
+  padding: 20px 120px 20px 180px;
 }
+.modal-body span,select,input,div{
+  font-size: 14px;
+}
+
 .btn-close,
 .btn-confirm {
   border-radius: 8px;
@@ -215,6 +227,7 @@ export default {
   display: flex;
   justify-content: flex-start;
   align-items: center;
+  padding: 4px;
 }
 .bodyRow span {
   width: 80px;
@@ -226,6 +239,9 @@ export default {
 .bodyRow input {
   width: 480px;
 }
+.bodyRow select,input {
+  padding: 2px;
+}
 .contentCol1 {
   display: flex;
   justify-content: flex-start;
@@ -235,11 +251,17 @@ export default {
   width: 80px;
   margin: 10px;
 }
+.contentCol1 div {
+  width: 120px;
+}
 .contentCol2 {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   width: 363px;
 }
+.timeWidth input{
+  width: 150px;
+}
 </style>
  

src/components/Modal2.vue

@@ -1,15 +1,45 @@
 <template>
   <div class="modal-backdrop">
     <div class="modal">
-      <!--  id="unloadFile" :style="mainStyles"-->
-      <!-- <div class="modal-header">
-        <h3>编辑</h3>
-      </div> -->
+      <div class="modal-header">
+        <span>编辑</span>
+      </div>
       <div class="modal-body">
-        <div class="bodyRow">确认删除？</div>
+        <div class="bodyRow">
+          <div class="contentCol1">
+            <span>平台名称</span>
+            <div>{{ 1 }}</div>
+          </div>
+        </div>
+        <div class="bodyRow">
+          <div class="contentCol1">
+            <span>平台账号</span>
+            <input type="text" placeholder="输入平台账号" v-model="a"/>
+          </div>
+        </div>
+        <div class="bodyRow">
+          <div class="contentCol1">
+            <span>是否认证</span
+            ><select name="identify" id="">
+              <option value="">请选择</option>
+            </select>
+          </div>
+        </div>
+        <div class="bodyRow">
+          <div class="contentCol1">
+            <span>粉丝数</span>
+            <input type="number" placeholder="输入整数" v-model="a" />
+          </div>
+        </div>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn-confirm" @click="confirm">确认</button>
+        <button
+          type="button"
+          class="btn-confirm"
+          @click="confirm('form')"
+        >
+          确认
+        </button>
         <button type="button" class="btn-close" @click="closeSelf">取消</button>
       </div>
     </div>
@@ -20,41 +50,59 @@
 export default {
   name: "Modal",
   props: {
-    itemIndex: {
-      type: Number,
-      default: -1,
-    },
   },
   data() {
     return {
-      confirmFlag: {
-        type: Boolean,
-        default: false,
-      },
+      formData: new FormData(),
     };
   },
   methods: {
     closeSelf() {
-      this.$emit("closeme2");
-      this.confirmFlag = false;
+      this.$emit("closeme");
     },
     confirm() {
-      this.confirmFlag = true;
-      this.$emit("del", this.itemIndex);
-      this.confirmFlag = false;
+      /* this.formData.append("dataset_title", this.dataset_title);
+      this.formData.append("dataset_link", this.dataset_link);
+
+      this.$http({
+        method: "post",
+        url: "/auth/checkSign",
+        data: {
+          //  token: token,  
+          //this.$http.post("/datasets/", this.formData) 
+        },
+      })
+        .then((r) => {
+          console.log(r);
+          this.$notify({
+            title: "成功",
+            message: "这是一条成功的提示消息",
+            type: "success",
+          });
+          this.$router.push({ path: "/filemanage/data" });
+        })
+        .catch((e) => {
+          console.log(e);
+          this.$notify.error({
+            title: "失败",
+            message: "创建数据集失败",
+          });
+        }); */
+        this.$emit("closeme");
     },
   },
+  computed: {},
 };
 </script>
 
-<style>
+<style scoped lang="less">
 .modal-backdrop {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(241, 241, 241, 0.5);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -65,8 +113,8 @@ export default {
   overflow-x: auto;
   display: flex;
   flex-direction: column;
-  border-radius: 16px;
-  width: 1030px;
+  border-radius: 0px;
+  width: 663px;
 }
 .modal-header {
   border-bottom: 1px solid #eee;
@@ -74,6 +122,11 @@ export default {
   justify-content: space-between;
   padding: 15px;
   display: flex;
+  border-bottom: 1px solid #e3e3e3;
+}
+.modal-header span {
+  font-size: 16px;
+  font-weight: bold;
 }
 .modal-footer {
   border-top: 1px solid #eee;
@@ -81,10 +134,24 @@ export default {
   padding: 15px;
   display: flex;
 }
+.modal-footer button {
+  width: 90px;
+  margin-left: 0px;
+}
+.modal-footer button:nth-child(1) {
+  margin-right: 80px;
+}
 .modal-body {
   position: relative;
-  padding: 20px 150px 20px 150px;
+  padding: 20px 100px 20px 100px;
 }
+.modal-body span,
+select,
+input,
+div {
+  font-size: 14px;
+}
+
 .btn-close,
 .btn-confirm {
   border-radius: 8px;
@@ -106,6 +173,44 @@ export default {
   display: flex;
   justify-content: flex-start;
   align-items: center;
+  padding: 4px;
+}
+.bodyRow span {
+  width: 80px;
+  margin: 10px;
+}
+.bodyRow select {
+  width: 120px;
+}
+/* .bodyRow input {
+  width: 480px;
+} */
+.bodyRow select,
+input {
+  padding: 2px;
+}
+.contentCol1 {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.contentCol1 span {
+  width: 80px;
+  margin: 10px;
+  margin-right: 30px;
+}
+.contentCol1 div,
+input {
+  width: 240px;
+}
+.contentCol2 {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 363px;
+}
+.timeWidth input {
+  width: 150px;
 }
 </style>
  

src/views/account/AccountManage.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 经销商账号管理 -->
   <div class="upload_record">
-    <h1>自媒体/社交媒体账号开通情况</h1>
+    <div>自媒体/社交媒体账号开通情况</div>
     <div class="tableBox">
       <table class="accountTable">
         <thead>
@@ -12,40 +12,98 @@
           </tr>
         </thead>
         <tbody>
-          <tr
-            class="tbodyStyle"
-            v-for="(obj, index) in tableData"
-            :key="index"
-            :class="{ table_gray: !discolor && index % 2 === 0 }"
-          >
-            <td>
-              {{ obj.releaseTime }}
-            </td>
-            <td>
+          <tr class="tbodyStyle">
+            <td>微信订阅号</td>
+            <td v-for="(obj, i) in tableData" :key="i">
               {{ obj.dataName }}
             </td>
-            <td>
-              {{ obj.carSeries }}
+            <td v-for="(obj, i) in tableData" :key="i">
+              {{ obj.dataName }}
+            </td>
+            <td v-for="(obj, i) in tableData" :key="i">
+              {{ obj.dataName }}
+            </td>
+            <td class="operationStyle" @click="toggleModal">
+              <span>编辑</span>
+            </td>
+          </tr>
+          <tr class="tbodyStyle">
+            <td>微信服务号</td>
+            <td v-for="(obj, i) in tableData" :key="i">
+              {{ obj.dataName }}
+            </td>
+            <td v-for="(obj, i) in tableData" :key="i">
+              {{ obj.dataName }}
+            </td>
+            <td v-for="(obj, i) in tableData" :key="i">
+              {{ obj.dataName }}
+            </td>
+            <td class="operationStyle" @click="toggleModal">
+              <span>编辑</span>
+            </td>
+          </tr>
+          <tr class="tbodyStyle">
+            <td>今日头条</td>
+            <td v-for="(obj, i) in tableData" :key="i">
+              {{ obj.dataName }}
+            </td>
+            <td v-for="(obj, i) in tableData" :key="i">
+              {{ obj.dataName }}
+            </td>
+            <td v-for="(obj, i) in tableData" :key="i">
+              {{ obj.dataName }}
+            </td>
+            <td class="operationStyle" @click="toggleModal">
+              <span>编辑</span>
+            </td>
+          </tr>
+          <tr class="tbodyStyle">
+            <td>抖音</td>
+            <td v-for="(obj, i) in tableData" :key="i">
+              {{ obj.dataName }}
+            </td>
+            <td v-for="(obj, i) in tableData" :key="i">
+              {{ obj.dataName }}
+            </td>
+            <td v-for="(obj, i) in tableData" :key="i">
+              {{ obj.dataName }}
+            </td>
+            <td class="operationStyle" @click="toggleModal">
+              <span>编辑</span>
+            </td>
+          </tr>
+          <tr class="tbodyStyle">
+            <td>微信视频号</td>
+            <td v-for="(obj, i) in tableData" :key="i">
+              {{ obj.dataName }}
+            </td>
+            <td v-for="(obj, i) in tableData" :key="i">
+              {{ obj.dataName }}
             </td>
-            <td>
-              {{ obj.carType }}
+            <td v-for="(obj, i) in tableData" :key="i">
+              {{ obj.dataName }}
             </td>
-            <td class="operationStyle">
+            <td class="operationStyle" @click="toggleModal">
               <span>编辑</span>
             </td>
           </tr>
         </tbody>
       </table>
+      <Modal v-if="showModal" v-on:closeme="closeme"></Modal>
     </div>
   </div>
 </template>
 
 <script>
+import Modal from "../../components/Modal2"
 export default {
   props: {},
-  components: {},
+  components: {
+    Modal
+  },
   data() {
     return {
+      showModal: false,
       discolor: false, // false是隔行变色
       tableHeader: ["平台名称", "平台账号", "是否认证", "粉丝数", "操作"],
       tableData: [
@@ -68,6 +126,12 @@ export default {
     EditForm: () => {
       alert("编辑");
     },
+    toggleModal: function () {
+      this.showModal = !this.showModal;
+    },
+    closeme: function () {
+      this.showModal = !this.showModal;
+    },
   },
 };
 </script>
@@ -75,17 +139,29 @@ export default {
 <style scoped lang="less">
 .accountTable {
   width: 1030px;
+  border-collapse: collapse;
 }
-.accountTable td{
+.accountTable td {
   width: 20%;
+  height: 35px;
+  text-align: center;
+  border: 1px solid #818181;
 }
-.theadStyle{
+.theadStyle {
   background-color: grey;
   border: 1px 1px 0px 0px;
   text-align: center;
 }
-.theadStyle td{
+.theadStyle td {
   color: black;
   padding: 7px 5px;
+  border: 1px solid #797979;
+}
+.operationStyle span {
+  color: #027db4;
+}
+.upload_record div:nth-child(1){
+  margin: 16px;
+  margin-left: 0px;
 }
 </style>

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

@@ -61,25 +61,18 @@
             </td>
             <td class="operationStyle">
               <span @click="toggleModal">编辑</span>
-              <!-- <span @click="toDel(index)">删除</span> -->
               <span
                 @click="
                   toggleModal2();
-                  getIndex(index);
                   nowIndex = index;
                 "
                 >删除</span
               >
-              <!--       <Modal2
-                v-show="showModal2"
-                v-on:closeme2="closeme2"
-                v-on:del="toDel2"
-                :itemIndex="index"
-              ></Modal2> -->
+              <!-- 弹窗： 确定删除？ -->
               <div class="modal-backdrop" v-show="showModal2">
                 <div class="modal">
                   <div class="modal-body">
-                    <div class="bodyRow">确认删除？</div>
+                    <div class="bodyRow">确定删除？</div>
                   </div>
                   <div class="modal-footer">
                     <button
@@ -90,7 +83,7 @@
                         closeme2();
                       "
                     >
-                      确认
+                      确定
                     </button>
                     <button type="button" class="btn-close" @click="closeme2">
                       取消
@@ -103,26 +96,71 @@
         </tbody>
       </table>
     </div>
+    <!-- 弹窗： 编辑表格内容 -->
     <Modal
       v-show="showModal"
       v-on:closeme="closeme"
       :dataset_title="tableData.articleTitle"
       @update="editTitle"
     ></Modal>
+
     <div class="timeLimitStyle">
       <span>仅可对上传时间为{{ feedbackTimeLimit }}个月内的资料进行反馈</span>
     </div>
-    <div class="fileOperation">
-      <span class="operationStyle">导入模板</span>
-      <button>导入</button>
-      <button>导出</button>
+    <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">
+      <div class="modal">
+        <div class="modal-body">
+          <div class="bodyRow">上传链接超过剩余限制数量，请修改后重新导入</div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn-confirm" @click="closeme3()">
+            确定
+          </button>
+          <button type="button" class="btn-close" @click="closeme3">
+            取消
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- 弹窗： 资料名称无法匹配，请修改后重新导入 -->
+    <div class="modal-backdrop" v-show="showModal4">
+      <div class="modal">
+        <div class="modal-body">
+          <div class="bodyRow">资料名称无法匹配，请修改后重新导入</div>
+          <div class="bodyRow">成功{{ 1 }}条，失败{{ 1 }}条</div>
+        </div>
+        <div class="modal-footer" style="position: relative; top: 95px;">
+          <button type="button" class="btn-confirm" @click="closeme4()">
+            确定
+          </button>
+          <button type="button" class="btn-close" @click="closeme4">
+            取消
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import Modal from "../../components/Modal";
-/* import Modal2 from "../../components/Modal2"; */
+import TablePage from "../../components/TablePage";
 export default {
   props: {
     isManufacturer: {
@@ -132,13 +170,15 @@ export default {
   },
   components: {
     Modal,
-    /*     Modal2, */
+    TablePage,
   },
   data() {
     return {
       feedbackTimeLimit: 6,
       showModal: false,
       showModal2: false,
+      showModal3: false,
+      showModal4: false,
       sonConsfirmFlag: false,
       // 表格配置
       sum: 240, // 一共有多少条数据
@@ -230,6 +270,12 @@ export default {
       ],
     };
   },
+  computed: {
+    // 表格总页数
+    totalPage() {
+      return Math.ceil(this.sum / this.pageSize);
+    },
+  },
   methods: {
     EditForm: () => {
       alert("编辑");
@@ -237,6 +283,7 @@ export default {
     showDetail: () => {
       alert("展示详情");
     },
+    /*toggleModal：点击编辑后弹窗； toggleModal2：点击删除后弹窗； toggleModal3：点击导入后弹窗；  */
     toggleModal: function () {
       this.showModal = !this.showModal;
     },
@@ -249,6 +296,18 @@ export default {
     closeme2: function () {
       this.showModal2 = !this.showModal2;
     },
+    toggleModal3: function () {
+      this.showModal3 = !this.showModal3;
+    },
+    closeme3: function () {
+      this.showModal3 = !this.showModal3;
+    },
+    toggleModal4: function () {
+      this.showModal4 = !this.showModal4;
+    },
+    closeme4: function () {
+      this.showModal4 = !this.showModal4;
+    },
     editTitle: function (val) {
       this.dataset_title = new Array(val);
       console.log("inEditTitle:", this.dataset_title);
@@ -285,6 +344,29 @@ export default {
     getIndex: function (index) {
       console.log("inGetIndex", index);
     },
+    /* 表格翻页 */
+    changePage: function (page) {
+      this.currentPage = page;
+      console.log(page);
+    },
+    // 点击上一页，下一页，首页，尾页
+    jumpPage: function (item) {
+      switch (item) {
+        case 1:
+          this.currentPage = 1;
+          break;
+        case 2:
+          this.currentPage = this.currentPage - 1;
+          break;
+        case 3:
+          this.currentPage = this.currentPage + 1;
+          break;
+        case 4:
+          this.currentPage = this.totalPage;
+          break;
+      }
+      console.log(this.currentPage);
+    },
   },
 };
 </script>
@@ -300,7 +382,7 @@ export default {
 }
 .tableBox {
   width: 1030px;
-  overflow: auto;
+  overflow-y: hidden;
 }
 .tableBox {
   text-align: center;
@@ -322,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;
@@ -379,6 +466,9 @@ export default {
   display: block;
   background-color: #fff;
 }
+.bodyStyle tr > td:nth-last-child(2) {
+  color: #0000ff;
+}
 .bodyContent td {
   background-color: #fff;
   height: 20px;
@@ -397,6 +487,9 @@ export default {
   margin: 10px;
   align-items: center;
 }
+.fileOperation button{
+  border-radius: 4px;
+}
 .timeLimitStyle {
   padding: 10px;
 }
@@ -413,28 +506,46 @@ export default {
   align-items: center;
 }
 .modal {
-  background-color: #eeeeee;
+  background-color: #ffffff;
   box-shadow: 2px 2px 20px 1px;
   overflow-x: auto;
   display: flex;
   flex-direction: column;
   width: 500px;
+  border-radius: 0px;
+  height: 230px;
 }
 .modal-footer {
   border-top: 1px solid #eee;
-  justify-content: center;
-  padding: 15px;
+  position: relative;
+  top: 124px;
+  left: 232px;
+  width: 208px;
   display: flex;
+  justify-content: space-between;
+  padding: 0px;
+}
+.modal-footer button {
+  border-radius: 4px;
+  margin-left: 0px;
+  width: 80px;
+  font-size: 14px;
+}
+
+.modal-footer button:nth-child(1) {
+  background-color: #0056a0;
+}
+.modal-footer button:nth-child(2) {
+  background-color: #eeeeee;
 }
 .modal-body {
   position: relative;
-  padding: 20px 150px 20px 150px;
-  /* display: flex;
-  justify-content: flex-start; */
+  top: 64px;
+  margin-left: 50px;
+  padding: 0px;
 }
 .btn-close,
 .btn-confirm {
-  /*  border-radius: 8px; */
   margin-left: 16px;
   width: 56px;
   height: 36px;
@@ -449,9 +560,17 @@ export default {
   color: #fff;
   background-color: #2d8cf0;
 }
-/* .bodyRow {
+.bodyRow {
+  font-size: 16px;
+  font-family: Arial;
+}
+/* .tablePageStyle{
+  position: relative;
+  left: 266px;
+} */
+.pageBottom{
   display: flex;
-  justify-content: flex-start;
+  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,15 +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>
+    <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";
 export default {
   props: {
     isManufacturer: {
@@ -66,10 +76,12 @@ export default {
       default: "distributor",
     },
   },
-  components: {},
+  components: {
+    TablePage,
+  },
   data() {
     return {
-      inputValue: '请输入要搜索的资料名',
+      inputValue: "请输入要搜索的资料名",
       // 表格配置
       sum: 240, // 一共有多少条数据
       pageSize: 20, // 每页展示的数据
@@ -145,6 +157,12 @@ export default {
       flag: true,
     };
   },
+  computed: {
+    // 表格总页数
+    totalPage() {
+      return Math.ceil(this.sum / this.pageSize);
+    },
+  },
   methods: {
     focusInput: function () {
       this.inputValue = "";
@@ -156,6 +174,28 @@ export default {
     getIndex: function (index) {
       console.log("inGetIndex", index);
     },
+    // 点击上一页，下一页，首页，尾页
+    jumpPage: function (item) {
+      switch (item) {
+        case 1:
+          this.currentPage = 1;
+          break;
+        case 2:
+          this.currentPage = this.currentPage - 1;
+          break;
+        case 3:
+          this.currentPage = this.currentPage + 1;
+          break;
+        case 4:
+          this.currentPage = this.totalPage;
+          break;
+      }
+      console.log(this.currentPage);
+    },
+    changePage: function (page) {
+      this.currentPage = page;
+      console.log(page);
+    },
   },
 };
 </script>
@@ -172,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;
@@ -205,65 +234,63 @@ 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;
+}
 
 /* 搜索栏 */
 .search {
@@ -314,7 +341,22 @@ export default {
 .tableTitle {
   margin-bottom: 4px;
 }
-.distributorLinkTable{
-  height: 800px;
+.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>