Merge branch 'master' of http://git.cc-lotus.info/service-platform/web-test

src/views/detail/semDetail.vue

@@ -16,7 +16,7 @@
               </el-col>
             </el-col>
             <el-col :span="24" class="twoMess">
-              <el-col :span="24" class="list">
+              <el-col :span="24" class="list" v-for="(item, index) in fabiaolist" :key="index">
                 <el-col :span="3" class="left">
                   <el-col :span="24" class="one">
                     会员名称
@@ -26,11 +26,30 @@
                     <p>职位名称</p>
                   </el-col>
                 </el-col>
-                <el-col :span="21" class="right">右侧</el-col>
+                <el-col :span="21" class="right">
+                  <el-col class="newtitle" :span="24"
+                    ><span><i class="el-icon-user-solid"></i></span><span>发表于：{{ item.date }}{{ item.time }}</span></el-col
+                  >
+                  <el-col :span="24" class="context">
+                    <el-col :span="24" class="contextinfo">
+                      <p>{{ item.context }}</p>
+                    </el-col>
+                  </el-col>
+                </el-col>
               </el-col>
             </el-col>
-            <el-col :span="24" class="twoInput">
-              输入
+            <el-col :span="24" class="page">
+              <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>
+              </el-col>
             </el-col>
           </el-col>
         </el-col>
@@ -40,13 +59,21 @@
 </template>
 
 <script>
+import wangEditor from '@/components/wang-editor.vue';
+import page from '@/components/pagination.vue';
 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,
   }),
   created() {},
   computed: {},
@@ -75,11 +102,16 @@ export default {
   float: left;
   width: 100%;
 }
+
+main .two .twoMess {
+  height: 460px;
+}
 .main .two .twoTop {
   float: left;
   width: 100%;
   height: 60px;
-  border-bottom: 10px solid red;
+
+  border-bottom: 10px solid #5096d2;
 }
 
 .main .two .twoTop .left {
@@ -99,10 +131,17 @@ export default {
   font-size: 30px;
   color: #023658;
 }
+
 .list {
   float: left;
   width: 100%;
 }
+.list:nth-child(n) {
+  float: left;
+  width: 100%;
+  border-bottom: 10px solid #5096d2;
+}
+
 .list .left {
   float: left;
 }
@@ -122,9 +161,81 @@ export default {
   width: 100%;
   height: 460px;
   background-color: #5096d2;
+  text-align: center;
 }
+
 .list .left .two .el-image {
-  width: 155px;
-  height: 155px;
+  // 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;
 }
 </style>