更新

src/views/detail/semDetail.vue

@@ -11,12 +11,10 @@
               <el-col :span="3" class="left">
                 浏览次数：1
               </el-col>
-              <el-col :span="21" class="right">
-                [专题] 2020年度“中德医疗交流项目”面试工作顺利进行
-              </el-col>
+              <el-col :span="21" class="right"> [专题] {{ detail.title }} </el-col>
             </el-col>
             <el-col :span="24" class="twoInfo">
-              <el-col class="list">
+              <el-col class="list" v-for="(item, index) in list" :key="index">
                 <el-col :span="3" class="left">
                   <el-col :span="24" class="leftTop">
                     会员名称
@@ -24,51 +22,39 @@
                   <el-col :span="24" class="leftDown">
                     <el-image :src="squareImage"></el-image>
                     <el-col :span="24" class="jobname">
-                      职位名称
+                      {{ item.name }}
                     </el-col>
                   </el-col>
                 </el-col>
                 <el-col :span="21" class="right">
                   <el-col :span="24" class="date">
                     <i class="el-icon-user icon"></i>
-                    <span>发表于2020-02-02</span>
-                    <span>1楼</span>
+                    <span>发表于{{ item.date }}</span>
+                    <span>{{ index + 1 }}楼</span>
                   </el-col>
                   <el-col :span="24" class="info">
-                    第二个
+                    <p>{{ item.content }}</p>
                   </el-col>
                   <el-col :span="24" class="jubao">
-                    第三个
+                    <span>举报</span>
                   </el-col>
                 </el-col>
               </el-col>
             </el-col>
-            <!-- <el-col :span="24" class="twoMess">
-              <el-col :span="24" class="list">
-                <el-col :span="3" class="left">
-                  <el-col :span="24" class="one">
-                    会员名称
-                  </el-col>
-                  <el-col :span="24" class="two">
-                    <el-image :src="squareImage"></el-image>
-                    <p>职位名称</p>
-                  </el-col>
-                </el-col>
-                <el-col :span="21" class="right"> </el-col>
-              </el-col>
-            </el-col> -->
-            <!-- <el-col :span="24" class="page">
+            <el-col :span="24" class="twoPage">
               <page :total="total" position="right"></page>
             </el-col>
-            <el-col :span="24" class="under">
-              <el-col :span="3" class="underleft"> </el-col>
-              <el-col :span="21" class="underright">
-                <el-col :span="24" class="input">
-                  <wang-editor v-model="inputInfo" ref="editor" class="huifu"></wang-editor>
-                  <el-button type="primary">发布评论</el-button>
+            <el-col :span="24" class="twoInput">
+              <el-col :span="3" class="left"> </el-col>
+              <el-col :span="21" class="right">
+                <el-col :span="24" class="waneditor">
+                  <wang-editor v-model="inputInfo" ref="editor"></wang-editor>
+                </el-col>
+                <el-col :span="24" class="btn">
+                  <el-button type="primary">发表评论</el-button>
                 </el-col>
               </el-col>
-            </el-col> -->
+            </el-col>
           </el-col>
         </el-col>
       </div>
@@ -79,23 +65,55 @@
 <script>
 import wangEditor from '@/components/wang-editor.vue';
 import page from '@/components/pagination.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: news } = createNamespacedHelpers('news');
 export default {
   name: 'semDetail',
   props: {},
-  components: {},
+  components: { page, wangEditor },
   data: () => ({
     gongqiuImage: require('@/assets/live/111.png'),
     squareImage: require('@/assets/live/222.png'),
-    // fabiaolist: [
-    //   { time: '20:21', date: '2020-5-12', context: '内容' },
-    //   { time: '20:21', date: '2020-5-12', context: '内容' },
-    //   { time: '20:21', date: '2020-5-12', context: '内容' },
-    // ],
-    // total: 0,
+    detail: {},
+    list: [
+      {
+        name: '测试人员',
+        date: '2020-02-02',
+        content: '测试内容',
+      },
+      {
+        name: '测试人员',
+        date: '2020-02-02',
+        content: '测试内容',
+      },
+      {
+        name: '测试人员',
+        date: '2020-02-02',
+        content: '测试内容',
+      },
+    ],
+    total: 0,
+    inputInfo: '',
   }),
-  created() {},
-  computed: {},
-  methods: {},
+  created() {
+    this.search();
+  },
+  computed: {
+    id() {
+      return this.$route.query.id;
+    },
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  methods: {
+    ...news(['fetch']),
+    async search() {
+      const res = await this.fetch(this.id);
+      this.$set(this, `detail`, res.data);
+    },
+  },
 };
 </script>
 
@@ -151,7 +169,7 @@ export default {
 }
 .main .two .twoInfo .left {
   background: #5096d2;
-  border-bottom: 10px solid red;
+  border-bottom: 10px solid #044b79;
 }
 .main .two .twoInfo .left .leftTop {
   height: 60px;
@@ -162,7 +180,7 @@ export default {
   border-bottom: 1px dashed #ccc;
 }
 .main .two .twoInfo .left .leftDown {
-  height: 456px;
+  height: 420px;
 }
 .main .two .twoInfo .left .leftDown .el-image {
   width: 155px;
@@ -178,6 +196,7 @@ export default {
   padding: 0 20px;
 }
 .main .two .twoInfo .right .date {
+  padding: 0 20px;
   height: 60px;
   line-height: 60px;
   border-bottom: 1px dashed #ccc;
@@ -187,117 +206,65 @@ export default {
   color: #b6dd59;
 }
 .main .two .twoInfo .right .date span:nth-child(2) {
-  font-size: 25px;
-  padding: 0 15px;
+  font-size: 20px;
+  padding: 0px 10px;
+  position: relative;
+  top: -2px;
 }
 .main .two .twoInfo .right .date span:last-child {
-  font-size: 25px;
+  font-size: 20px;
   float: right;
 }
-// .list {
-//   float: left;
-//   width: 100%;
-// }
-// .list:nth-child(n) {
-//   float: left;
-//   width: 100%;
-//   border-bottom: 10px solid #5096d2;
-// }
-
-// .list .left {
-//   float: left;
-// }
-// .list .left .one {
-//   float: left;
-//   width: 100%;
-//   height: 60px;
-//   margin: 0;
-//   line-height: 60px;
-//   text-align: center;
-//   background-color: #5096d2;
-//   color: #fff;
-//   border-bottom: 1px dashed #ccc;
-// }
-// .list .left .two {
-//   float: left;
-//   width: 100%;
-//   height: 460px;
-//   background-color: #5096d2;
-//   text-align: center;
-// }
-
-// .list .left .two .el-image {
-//   // width: 155px;
-//   // height: 155px;
-//   padding: 8px 0 0 0;
-// }
-// .list .left .two p {
-//   padding: 20px 0 0 0;
-//   color: #fff;
-// }
-
-// .list .right .newtitle {
-//   font-size: 25px;
-//   margin: 15px 20px 0 20px;
-//   height: 45px;
-//   width: 97%;
-// }
-// .list .right .newtitle span:first-child {
-//   color: aquamarine;
-// }
-// .list .right .newtitle span:nth-child(2) {
-//   padding: 0 0 0 8px;
-// }
-// .list .right .context {
-//   margin: 0 20px 30px 20px;
-//   width: 97.5%;
-//   height: 400px;
-//   border-bottom: 1px dashed #f6dda4;
-//   border-top: 1px dashed #f6dda4;
-// }
-// .list .right .context .contextinfo {
-//   border: 1px solid #000000;
-//   margin: 40px 0 40px 0;
-//   height: 290px;
-//   border-radius: 20px;
-// }
-// .list .right .context .contextinfo p {
-//   word-break: break-all;
-//   padding: 20px 20px 20px 20px;
-//   height: 245px;
-//   display: -webkit-box;
-//   -webkit-box-orient: vertical;
-//   -webkit-line-clamp: 8;
-//   overflow: hidden;
-//   line-height: 30px;
-// }
-// .two .page {
-//   padding: 20px 0 20px 0;
-// }
-// .under .underleft {
-//   float: left;
-//   height: 360px;
-//   text-align: center;
-//   color: #00316e;
-//   background-color: #5096d2;
-// }
-
-// .under .underright {
-//   float: left;
-//   height: 360px;
-//   padding: 0 15px;
-//   font-size: 30px;
-//   color: #023658;
-//   border: 5px solid #5096d2;
-//   border-radius: 2px;
-// }
-
-// .under .underright .input {
-//   padding: 20px;
-//   width: 64%;
-// }
-
-// .under .underright .input .el-button {
-//   margin: 20px 0 0 0;
-// }
+.main .two .twoInfo .right .info {
+  height: 300px;
+  overflow: hidden;
+  border: 2px solid #044b79;
+  border-radius: 10px;
+  margin: 30px 0;
+  padding: 20px;
+}
+.main .two .twoInfo .right .info p {
+  font-size: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 8;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  line-height: 32px;
+}
+.main .two .twoInfo .right .jubao {
+  height: 70px;
+  line-height: 60px;
+  border-top: 1px dashed #ff8b0f;
+  border-bottom: 10px solid #5096d2;
+}
+.main .two .twoInfo .right .jubao span {
+  float: right;
+  color: #ff0000;
+  font-size: 20px;
+}
+.main .two .twoPage {
+  margin: 20px 0;
+}
+.main .two .twoInput {
+  height: 270px;
+  border: 2px solid #5096d2;
+}
+.main .two .twoInput .left {
+  height: 266px;
+  background-color: #5096d2;
+}
+.main .two .twoInput .right {
+  padding: 20px 20px 0 20px;
+}
+/deep/.main .two .twoInput .right .waneditor .w-e-text-container {
+  height: 140px !important;
+}
+.main .two .twoInput .right .btn {
+  margin: 10px 0;
+}
+/deep/.main .two .twoInput .right .btn .el-button {
+  margin: 10px 0;
+}
 </style>