提交内容

src/router/index.ts

@@ -140,6 +140,11 @@ const router = new VueRouter({
           path: "/news",
           component: () => import("../views/news/index.vue"),
           meta: { title: "news" }
+        },
+        {
+            path: "/news/newsDetail",
+            component: () => import("../views/news/details.vue"),
+            meta: { title: "newsDetail" }
         }
       ]
     },

src/views/account/user/index.vue

@@ -9,10 +9,16 @@
         <el-col :span="6">
           <div class="userDiv">
             <div class="txDiv">
-              <img src="@assets/touxiang02.png" alt="" />
+              <img
+                v-if="loginAccount == ''"
+                src="@assets/touxiang01.png"
+                alt=""
+              />
+              <img v-else src="@assets/touxiang02.png" alt="" />
             </div>
             <div class="welInfo">
-              <span class="user">神码洛阳，</span>
+              <span class="user" v-if="loginAccount == ''">神码洛阳，</span>
+              <span class="user" v-else>{{ loginAccount }}，</span>
               <span class="wel">欢迎您</span>
             </div>
             <div class="btnDiv">
@@ -28,9 +34,9 @@
         </el-col>
       </el-row>
       <div class="infoTabDiv">
-        <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tabs v-model="activeName">
           <el-tab-pane label="我的关注" name="first">
-            <el-table class="qyrzgs" border :data="tableData">
+            <el-table class="qyrzgs" border :data="followListArr">
               <el-table-column
                 type="index"
                 label="序号"
@@ -68,54 +74,64 @@
             <el-pagination
               class="pageDiv"
               background
-              @current-change="handleCurrentChange"
-              :page-size="pageSize"
-              :current-page="currentPage"
+              @current-change="followPageChange"
+              :page-size="pageSize1"
+              :current-page="currentPage1"
               layout="prev, pager, next,total, jumper"
-              :total="total"
+              :total="total1"
             ></el-pagination>
           </el-tab-pane>
           <el-tab-pane label="我的需求" name="second">
-            <el-table class="qyrzgs" border :data="tableData">
+            <el-table class="qyrzgs" border :data="demandListArr">
               <el-table-column
                 type="index"
                 label="序号"
                 width="50"
               ></el-table-column>
-              <el-table-column prop="name" label="需求标题"></el-table-column>
-              <el-table-column prop="address" label="概要"></el-table-column>
               <el-table-column
-                prop="address"
-                label="发布时间"
+                prop="purchaseTitle"
+                label="需求标题"
               ></el-table-column>
               <el-table-column
-                prop="address"
-                label="目前状态"
+                prop="summaryOfNeeds"
+                label="概要"
+              ></el-table-column>
+              <el-table-column
+                prop="createTime"
+                label="发布时间"
               ></el-table-column>
+              <el-table-column label="目前状态">
+                <template slot-scope="scope">
+                  <span v-if="scope.row.status == 0">征集中</span>
+                  <span v-else>已结束</span>
+                </template>
+              </el-table-column>
               <el-table-column label="操作">
                 <template slot-scope="scope">
                   <el-button
                     class="textBtn"
-                    @click="handleClick(scope.row)"
+                    @click="cancelClick(scope.row)"
                     type="text"
                     size="small"
-                    >进入店铺</el-button
+                    >撤销</el-button
                   >
                   <span class="editline"></span>
-                  <el-button class="textBtn" type="text" size="small"
-                    >取消关注</el-button
-                  >
+                  <router-link to="/info/buy">
+                    <el-button class="textBtn" type="text" size="small"
+                      >再次发布</el-button
+                    >
+                  </router-link>
                 </template>
               </el-table-column>
             </el-table>
             <el-pagination
               class="pageDiv"
               background
-              @current-change="handleCurrentChange"
-              :page-size="pageSize"
-              :current-page="currentPage"
+              @current-change="demandPageChange"
+              :page-size="pageSize2"
+              :current-page="currentPage2"
               layout="prev, pager, next,total, jumper"
-              :total="total"
+              :total="total2"
             ></el-pagination>
           </el-tab-pane>
         </el-tabs>
@@ -132,40 +148,85 @@ export default {
   data() {
     return {
       activeName: "first",
-      tableData: [
-        {
-          date: "2016-05-02",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄"
-        },
-        {
-          date: "2016-05-04",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1517 弄"
-        },
-        {
-          date: "2016-05-01",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1519 弄"
-        },
-        {
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1516 弄"
-        }
-      ],
-      pageSize: 10,
-      currentPage: 1,
-      total: 24
+      followListArr: [],
+      demandListArr: [],
+      pageSize1: 10,
+      currentPage1: 1,
+      total1: 24,
+      pageSize2: 10,
+      currentPage2: 1,
+      total2: 24,
+      loginAccount: ""
     };
   },
   methods: {
-    handleCurrentChange(val) {
-      this.currentPage = val;
+    followPageChange(val) {
+      this.currentPage2 = val;
+      this.followList();
+    },
+    demandPageChange(val) {
+      this.currentPage2 = val;
+      this.demandList();
     },
     handleClick(row) {
       console.log(row);
+    },
+    followList() {
+      var that = this;
+      that
+        .$post("/member/follow/getMemberFollowList", {
+          pageNum: that.currentPage1,
+          pageSize: that.pageSize1
+        })
+        .then(function(res) {
+          console.log(res);
+          if (!res[0]) {
+            that.memberData = res[1].noticeSupply;
+          }
+        });
+    },
+    demandList() {
+      var that = this;
+      that
+        .$post("demand/info/getMemberDemandList", {
+          pageNum: that.currentPage2,
+          pageSize: that.pageSize2
+        })
+        .then(function(res) {
+          console.log(res);
+          if (!res[0]) {
+            that.demandListArr = res[1].rows;
+            that.total2 = res[1].total;
+          }
+        });
+    },
+    cancelClick(row) {
+      console.log(row);
+      var that = this;
+      that
+        .$post("demand/info/cancleMemberDemandInfo", {
+          id: row.id
+        })
+        .then(function(res) {
+          console.log(res);
+          if (!res[0]) {
+            that.demandList();
+            that.$message({
+              message: "恭喜你，撤销成功！",
+              type: "success"
+            });
+          }
+        });
     }
+  },
+  activated() {
+    if (this.$store.state.user.UserInfo) {
+      this.loginAccount = this.$store.state.user.UserInfo.loginAccount;
+    }
+  },
+  mounted() {
+    this.followList();
+    this.demandList();
   }
 };
 </script>

src/views/home/index.vue

@@ -36,9 +36,11 @@
           <div class="noticeDiv">
             <div class="noticeTitle">
               通知公告
-              <span class="more"
-                >more<i class="el-icon-d-arrow-right"></i
-              ></span>
+              <router-link to="/news?active=first">
+                <span class="more"
+                  >more<i class="el-icon-d-arrow-right"></i
+                ></span>
+              </router-link>
             </div>
             <div
               class="notice"
@@ -100,22 +102,30 @@
       <!-- 广告位 -->
       <div class="ggzw bg-84 mt2rem">办公系列广告占位</div>
       <div class="partTitle">
-        <span class="orangeLine"></span>热门商品<span class="more"
-          >more<i class="el-icon-d-arrow-right"></i
-        ></span>
+        <span class="orangeLine"></span>热门商品
+        <router-link to="/mall">
+          <span class="more">more<i class="el-icon-d-arrow-right"></i></span>
+        </router-link>
       </div>
       <div class="rmsp">
-        <div class="rmspItem" v-for="item in 5" :key="item">
-          <div class="imgDiv">
-            <img src="@assets/shangpin.png" alt />
-          </div>
-          <div class="name">钢制家具柜文件柜B20-J</div>
-          <div class="money">
-            ¥
-            <span>1833</span>
+        <router-link
+          :to="`/shop/${item.companyId}/${item.id}`"
+          class="product"
+          v-for="item in hotlistArr"
+          :key="item.id"
+        >
+          <div class="rmspItem">
+            <div class="imgDiv">
+              <img :src="item.cover" alt />
+            </div>
+            <div class="name">{{ item.name }}</div>
+            <div class="money">
+              ¥
+              <span>{{ item.price }}</span>
+            </div>
+            <div class="company mt15px">{{ item.companyName }}</div>
           </div>
-          <div class="company mt15px">洛阳花都家具集团有限公司</div>
-        </div>
+        </router-link>
       </div>
       <div class="partTitle">
         <span class="orangeLine"></span>品牌商家<span class="more"
@@ -140,28 +150,44 @@
           <div class="xqDiv">
             <div class="xqTitle">
               <img src="@assets/xuqiu.png" alt />需求
-              <span class="more"
-                >more<i class="el-icon-d-arrow-right"></i
-              ></span>
-            </div>
-            <div class="xq" v-for="item in demandList" :key="item.id">
-              <div class="con">【求购】{{ item.purchaseTitle }}</div>
-              <div class="date">{{ item.releaseTime }}</div>
+              <router-link to="/info?active=demand">
+                <span class="more"
+                  >more<i class="el-icon-d-arrow-right"></i
+                ></span>
+              </router-link>
             </div>
+            <router-link
+              :to="`/info/buyDetail?id=${item.id}`"
+              v-for="item in demandList"
+              :key="item.id"
+            >
+              <div class="xq">
+                <div class="con">【求购】{{ item.purchaseTitle }}</div>
+                <div class="date">{{ item.releaseTime }}</div>
+              </div>
+            </router-link>
           </div>
         </el-col>
         <el-col :span="10">
           <div class="xqDiv">
             <div class="xqTitle">
               <img src="@assets/gongyingshang.png" alt />供应商
-              <span class="more"
-                >more<i class="el-icon-d-arrow-right"></i
-              ></span>
-            </div>
-            <div class="xq" v-for="item in supplyList" :key="item.id">
-              <div class="con">【供应】{{ item.supplyTitle }}</div>
-              <div class="date">{{ item.releaseTime }}</div>
+              <router-link to="/info?active=supply">
+                <span class="more"
+                  >more<i class="el-icon-d-arrow-right"></i
+                ></span>
+              </router-link>
             </div>
+            <router-link
+              :to="`/info/supplyDetail?id=${item.id}`"
+              v-for="item in supplyList"
+              :key="item.id"
+            >
+              <div class="xq">
+                <div class="con">【供应】{{ item.supplyTitle }}</div>
+                <div class="date">{{ item.releaseTime }}</div>
+              </div>
+            </router-link>
           </div>
         </el-col>
       </el-row>
@@ -170,9 +196,12 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <div class="partTitle">
-            <span class="orangeLine"></span>行业资讯<i
-              class="el-icon-d-arrow-right"
-            ></i>
+            <span class="orangeLine"></span>行业资讯
+            <router-link to="/news?active=second">
+              <span class="more"
+            >more<i class="el-icon-d-arrow-right"></i
+            ></span>
+            </router-link>
           </div>
           <div class="hyzxDiv">
             <div class="topDiv">
@@ -196,9 +225,12 @@
         </el-col>
         <el-col :span="12">
           <div class="partTitle">
-            <span class="orangeLine"></span>家具保养<i
-              class="el-icon-d-arrow-right"
-            ></i>
+            <span class="orangeLine"></span>家具保养
+            <router-link to="/news?active=third">
+              <span class="more"
+            >more<i class="el-icon-d-arrow-right"></i
+            ></span>
+            </router-link>
           </div>
           <div class="hyzxDiv">
             <div class="topDiv">
@@ -244,7 +276,8 @@ export default {
       noticeListJjby: [],
       jjbyFirst: {},
       jjbyOther: [],
-      loginAccount: ""
+      loginAccount: "",
+      hotlistArr: []
     };
   },
   methods: {
@@ -256,9 +289,7 @@ export default {
           noticeType: noticeType
         })
         .then(function(res) {
-          if (res[0]) {
-            that.$message("数据请求错误！");
-          } else {
+          if (!res[0]) {
             for (let i = 0; i < res[1].list.length; i++) {
               res[1].list[i].fmzFileUrl =
                 that.$basePath + res[1].list[i].fmzFileUrl;
@@ -282,9 +313,7 @@ export default {
       var that = this;
       that.$post("/demand/info/getDemandInfoTenList").then(function(res) {
         console.log(res);
-        if (res[0]) {
-          that.$message("数据请求错误！");
-        } else {
+        if (!res[0]) {
           that.demandList = res[1].demandList;
         }
       });
@@ -294,24 +323,37 @@ export default {
       var that = this;
       that.$post("/supply/info/getSupplyInfoTenLsit").then(function(res) {
         console.log(res);
-        if (res[0]) {
-          that.$message("数据请求错误！");
-        } else {
+        if (!res[0]) {
           that.supplyList = res[1].supplyList;
         }
       });
+    },
+    // 热门商品 liuqiwen
+    hotlist() {
+      var that = this;
+      that.$post("/goods/info/hotlist").then(function(res) {
+        console.log(res);
+        if (!res[0]) {
+          for (let i = 0; i < res[1].list.length; i++) {
+            res[1].list[i].cover = that.$basePath + res[1].list[i].cover;
+          }
+          that.hotlistArr = res[1].list;
+        }
+      });
     }
   },
   activated() {
-    this.loginAccount = this.$store.state.user.UserInfo.loginAccount;
+    if (this.$store.state.user.UserInfo) {
+      this.loginAccount = this.$store.state.user.UserInfo.loginAccount;
+    }
   },
   mounted() {
-    console.log(this.$store.state.user.UserInfo);
     this.noticeList(1);
     this.noticeList(2);
     this.noticeList(3);
     this.demandInfoTenList();
     this.supplyInfoTenLsit();
+    this.hotlist();
   }
 };
 </script>

src/views/info/details/buy.vue

@@ -88,11 +88,14 @@ export default {
               .$post("/demand/info/insertDemandInfo", that.form)
               .then(function(res) {
                 console.log(res);
-                // if (res[0]) {
-                //     that.$message("数据请求错误！");
-                // } else {
-                //     that.demandInfo = res[1].demandInfo;
-                // }
+                if (!res[0]) {
+                  that.$message({
+                    message: "恭喜你，需求发布成功！",
+                    type: "success"
+                  });
+                  // that.$message("需求发布成功！");
+                  that.$refs[formName].resetFields();
+                }
               });
           }
         });

src/views/info/details/buyDetail.vue

@@ -53,17 +53,17 @@ export default {
         })
         .then(function(res) {
           console.log(res);
-          if (res[0]) {
-            that.$message("数据请求错误！");
-          } else {
+          if (!res[0]) {
             that.demandInfo = res[1].demandInfo;
           }
         });
     }
   },
   activated() {
-    this.id = parseInt(this.$route.query.id);
-    this.detailData();
+    if (this.$route.query.id) {
+      this.id = parseInt(this.$route.query.id);
+      this.detailData();
+    }
   },
   mounted() {
     this.id = parseInt(this.$route.query.id);

src/views/info/details/supplyDetail.vue

@@ -77,9 +77,7 @@ export default {
         })
         .then(function(res) {
           console.log(res);
-          if (res[0]) {
-            that.$message("数据请求错误！");
-          } else {
+          if (!res[0]) {
             that.noticeSupply = res[1].noticeSupply;
           }
         });

src/views/info/index.vue

@@ -73,7 +73,7 @@ export default {
     };
   },
   methods: {
-    tabChange(tab, event) {
+    tabChange() {
       var that = this;
       that.currentPage = 1;
       if (that.activeName == "demand") {
@@ -100,9 +100,7 @@ export default {
         })
         .then(function(res) {
           console.log(res);
-          if (res[0]) {
-            that.$message("数据请求错误！");
-          } else {
+          if (!res[0]) {
             that.demandAllList = res[1].rows;
             that.total = res[1].total;
           }
@@ -118,15 +116,19 @@ export default {
         })
         .then(function(res) {
           console.log(res);
-          if (res[0]) {
-            that.$message("数据请求错误！");
-          } else {
+          if (!res[0]) {
             that.supplyAllList = res[1].rows;
             that.total = res[1].total;
           }
         });
     }
   },
+  activated() {
+    if (this.$route.query.active) {
+      this.activeName = this.$route.query.active;
+      this.tabChange();
+    }
+  },
   mounted() {
     this.demandInfoAllList();
   }

src/views/news/details.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="bgF5">
+    <div class="container">
+      <div class="desDiv">
+        <div class="title">
+          {{ detailObj.noticeTitle }}
+        </div>
+        <div class="deptDiv">
+          <span>时间：{{ detailObj.createTime }}</span>
+        </div>
+        <div class="desCon" v-html="detailObj.noticeContent"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Component, Vue, Watch } from "vue-property-decorator";
+export default {
+    name: "app",
+    components: {},
+    data() {
+        return {
+            noticeId:'',
+            detailObj:{},
+        };
+    },
+    methods: {
+        detail() {
+            var that = this;
+            that
+                .$post("/interface/notice/getNoticeListById", {
+                    noticeId: that.noticeId
+                })
+                .then(function(res) {
+                    console.log(res);
+                    if (!res[0]) {
+                        that.detailObj = res[1];
+                    }
+                });
+        },
+    },
+    activated() {
+        if (this.$route.query.noticeId) {
+            this.noticeId = this.$route.query.noticeId;
+            this.detail();
+        }
+    },
+    mounted() {
+        if (this.$route.query.noticeId) {
+            this.noticeId = this.$route.query.noticeId;
+            this.detail();
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.container {
+  padding-bottom: 1rem;
+}
+.desDiv {
+  background: #fff;
+  padding: 2rem;
+  border-radius: 0.3rem;
+  box-sizing: border-box;
+  box-shadow: 2px 2px 12px #ddd;
+  margin: 1rem 0;
+  .title {
+    height: 3rem;
+    line-height: 3rem;
+    font-size: 1.8rem;
+    font-weight: bolder;
+    text-align: center;
+  }
+  .deptDiv {
+    padding: 1rem 0 2rem 0;
+    font-size: 1.2rem;
+    color: #666;
+    text-align: center;
+    border-bottom: 0.1rem solid #efefef;
+    span {
+      margin: 0 1rem;
+    }
+  }
+  .desCon {
+    line-height: 2rem;
+    font-size: 1.2rem;
+    text-indent: 2em;
+    padding: 1rem 0;
+    word-break: break-all;
+  }
+}
+</style>

src/views/news/index.vue

@@ -1,10 +1,278 @@
 <template>
-  <div>
-    新闻咨询
+  <div class="bg-F5">
+    <div class="container">
+      <div class="infoTabDiv">
+        <el-tabs v-model="activeName" @tab-click="tabChange">
+          <el-tab-pane label="通知公告" name="first">
+            <div class="listDiv">
+              <ul class="listUl">
+                <li v-for="item in tzggArr" :key="item.noticeId">
+                  <div class="dateDiv">
+                    <div class="day">{{item.createDay}}</div>
+                    <div>{{item.createMonth}}</div>
+                  </div>
+                  <router-link class="conDiv" :to="`/home`">
+                    <div class="tit">{{item.noticeTitle}}</div>
+                    <div class="detail">
+                      <div v-html="item.noticeContent"></div>
+                      <span class="xq"
+                        >详情<i class="el-icon-d-arrow-right"></i
+                      ></span>
+                    </div>
+                  </router-link>
+                </li>
+              </ul>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="行业资讯" name="second">
+            <div class="listDiv">
+              <ul class="listUl">
+                <li v-for="item in hyzxArr" :key="item.noticeId">
+                  <div class="dateDiv">
+                    <div class="day">{{item.createDay}}</div>
+                    <div>{{item.createMonth}}</div>
+                  </div>
+                  <router-link class="conDiv" :to="`/home`">
+                    <div class="tit">{{item.noticeTitle}}</div>
+                    <div class="detail">
+                      <div v-html="item.noticeContent"></div>
+                      <span class="xq"
+                      >详情<i class="el-icon-d-arrow-right"></i
+                      ></span>
+                    </div>
+                  </router-link>
+                </li>
+              </ul>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="家具保养" name="third">
+            <div class="listDiv">
+              <ul class="listUl">
+                <li v-for="item in jjbyArr" :key="item.noticeId">
+                  <div class="dateDiv">
+                    <div class="day">{{item.createDay}}</div>
+                    <div>{{item.createMonth}}</div>
+                  </div>
+                  <router-link class="conDiv" :to="`/news/newsDetail?noticeId=${item.noticeId}`">
+                    <div class="tit">{{item.noticeTitle}}</div>
+                    <div class="detail">
+                      <div v-html="item.noticeContent"></div>
+                      <span class="xq"
+                      >详情<i class="el-icon-d-arrow-right"></i
+                      ></span>
+                    </div>
+                  </router-link>
+                </li>
+              </ul>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+      <el-pagination
+              class="pageDiv"
+              background
+              @current-change="handleCurrentChange"
+              :page-size="pageSize"
+              :current-page="currentPage"
+              layout="prev, pager, next,total, jumper"
+              :total="total"
+      ></el-pagination>
+    </div>
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
-@Component
-export default class extends Vue {}
+export default {
+  name: "app",
+  components: {},
+  data() {
+    return {
+      activeName: "first",
+      tzggArr:[],
+      hyzxArr:[],
+      jjbyArr:[],
+      currentPage:1,
+      pageSize:10,
+      total:0,
+    };
+  },
+  methods: {
+      tabChange() {
+          var that = this;
+          that.currentPage = 1;
+          if (that.activeName == "first") {
+              that.listAll(1);
+          } else if (that.activeName == "second") {
+              that.listAll(2);
+          }else if(that.activeName == "third"){
+              that.listAll(3);
+          }
+      },
+      handleCurrentChange(val) {
+          this.currentPage = val;
+          if (that.activeName == "first") {
+              that.listAll(1);
+          } else if (that.activeName == "second") {
+              that.listAll(2);
+          }else{
+              that.listAll(3);
+          }
+      },
+      listAll(noticeType) {
+          var that = this;
+          that
+              .$post("interface/notice/getNoticeListAll", {
+                  pageNum: that.currentPage1,
+                  pageSize: that.pageSize1,
+                  noticeType:noticeType
+              })
+              .then(function(res) {
+                  console.log(res);
+                  if (!res[0]) {
+                      res[1].rows.forEach(function(item,index){
+                          let date = [];
+                          let dateTime = [];
+                          if(item.createTime){
+                              dateTime = item.createTime.split(" ");
+                              date = dateTime[0].split("-");
+                              item.createDay = date[2];
+                              item.createMonth =  date[0]+'-'+date[1];
+                          }
+                      })
+                      that.total = res[1].total;
+                      if(noticeType == 1){
+                          that.tzggArr = res[1].rows;
+                      }else if(noticeType == 2){
+                          that.hyzxArr = res[1].rows;
+                      }else{
+                          that.jjbyArr = res[1].rows;
+                      }
+
+                  }
+              });
+      },
+  },
+  activated() {
+      if (this.$route.query.active) {
+          this.activeName = this.$route.query.active;
+          this.tabChange();
+      }
+  },
+  mounted() {
+      this.listAll(1);
+      this.listAll(2);
+      this.listAll(3);
+  }
+};
 </script>
+<style scoped lang="scss">
+.listDiv {
+  width: 100%;
+  padding-left: 4rem;
+  box-sizing: border-box;
+}
+.listUl {
+  list-style: none;
+  width: 100%;
+  border-left: 0.1rem solid #e5e5e5;
+}
+.listUl li {
+  width: 100%;
+  min-height: 7rem;
+  position: relative;
+  padding-left: 7rem;
+  margin-top: 2rem;
+  box-sizing: border-box;
+
+  .dateDiv {
+    height: 8rem;
+    width: 8rem;
+    color: #fff;
+    text-align: center;
+    background: #fd5522;
+    border-radius: 0.5rem;
+    position: absolute;
+    left: -3.5rem;
+    top: 0;
+
+    > div {
+      font-size: 1.6rem;
+      height: 2.8rem;
+      line-height: 2.8rem;
+    }
+
+    .day {
+      height: 5rem;
+      line-height: 5rem;
+      font-size: 2.5em;
+      font-weight: bolder;
+      border-bottom: 0.1rem solid #fff;
+    }
+  }
+  .conDiv {
+    width: 100%;
+    display: block;
+    height: 100%;
+    padding: 0 1rem;
+    background: #fff;
+    box-shadow: 2px 2px 12px #ddd;
+    box-sizing: border-box;
+    border-radius: 0.3rem;
+
+    .tit {
+      height: 3rem;
+      line-height: 3rem;
+      font-size: 1.6rem;
+      font-weight: bolder;
+    }
+
+    .detail {
+      height: 5rem;
+      line-height: 1.6rem;
+      div{
+        height: 3.2rem;
+        line-height: 1.6rem;
+        font-size: 1.2rem;
+        color: #666;
+        word-break: break-all;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: normal;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+      .xq {
+        color: #fd5522;
+        margin-left: 1rem;
+      }
+    }
+  }
+}
+.pageDiv {
+  text-align: right;
+  margin-top: 0.5rem;
+  padding: 3rem 0;
+}
+</style>
+<style lang="scss">
+.infoTabDiv {
+  .el-tabs__nav-scroll {
+    padding: 0 1.6rem;
+    box-sizing: border-box;
+  }
+  .el-tabs__item {
+    height: 5rem;
+    line-height: 5rem;
+  }
+  .el-tabs__item:hover {
+    color: #fd5522;
+  }
+  .el-tabs__item.is-active {
+    color: #fd5522;
+  }
+  .el-tabs__active-bar {
+    background-color: #fd5522;
+  }
+}
+</style>