更新

src/views/detail/semDetail.vue

@@ -4,23 +4,29 @@
       <div class="w_1200">
         <el-col :span="24" class="semDetail">
           <el-col :soan="24"> <el-image :src="gongqiuImage" class="gongqiuImage" style="width:100%;height:160px;"></el-image></el-col>
-          <el-col :span="24"  > </el-col>
+          <el-col :span="24" class="title"
+            ><span>浏览次数:{{ plany.cishu }}</span
+            ><span>{{ plany.title }}</span></el-col
+          >
+          <el-col :span="24" v-for="(item, index) in fabiaolist" :key="index" class="list">
+            <el-col :span="4" class="lefts">
+              <el-col :span="24" class="name">会员名称</el-col>
+              <el-image :src="squareImage" style="width:65%;height: 128px;padding:5px 0 0 0;"></el-image>
+              <p>
+                <span>{{ item.name }}</span>
+              </p>
+            </el-col>
+            <el-col :span="19" class="under">
+              <el-col :span="24" class="underspan"
+                ><span style="color:green"><i class="el-icon-user-solid"></i></span><span>{{ item.ceng }}&nbsp;&nbsp;{{ item.date }}</span></el-col
+              >
+              <p>{{ item.context }}</p>
+              <p></p>
+            </el-col>
+          </el-col>
           <el-col :span="24" class="chatInfo">
             <el-col :span="24" class="message">
-              <el-col :span="24" class="info chat_frame" id="chat">
-                <el-col :span="24" v-for="(item, index) in fabiaolist" :key="index" class="list">
-                  <el-col :span="4" class="lefts">
-                    <el-image :src="squareImage" style="width:65%;height: 128px;"></el-image>
-                    <p>
-                      <span>{{ item.name }}</span>
-                    </p>
-                  </el-col>
-                  <el-col :span="19" class="under">
-                    <p>{{ item.context }}</p>
-                    <p>{{ item.ceng }}&nbsp;&nbsp;{{ item.date }}</p>
-                  </el-col>
-                </el-col>
-              </el-col>
+              <el-col :span="24" class="info chat_frame" id="chat"> </el-col>
             </el-col>
             <el-col :span="24" class="input">
               <el-col :span="24" class="title"><i class="el-icon-edit"></i> 发布评论 </el-col>
@@ -45,9 +51,11 @@ export default {
     wangEditor,
   },
   data: () => ({
+    plany: { cishu: '100', title: '2020年度中德医疗项目顺利进行' },
+
     detailinfo: {},
     gongqiuImage: require('@/assets/live/111.png'),
-    squareImage: require('@/assets/live/circle.png'),
+    squareImage: require('@/assets/live/222.png'),
     inputInfo: '',
     fabiaolist: [{ name: '测试1', context: '测试内容', ceng: '1楼', date: '2020-03-05' }],
   }),
@@ -84,103 +92,55 @@ export default {
   min-height: 600px;
   margin: 30px 0;
 }
-.semDetail .messInfo {
-  float: left;
-  width: 100%;
-  height: 400px;
-  overflow: hidden;
-}
-.messInfo .left p {
-  float: left;
-  width: 100%;
-  font-size: 18px;
-  padding: 5px 0 10px 0;
-  color: gold;
-  letter-spacing: 0;
-}
-.messInfo .left p:nth-child(2) {
+.semDetail .title {
+  height: 60px;
+  border-bottom: 10px solid #5096d2;
+}
+.semDetail .title span:first-child {
+  background-color: #a5d2f5;
+  height: 50px;
+  display: inline-block;
+  color: #5096d2;
+  line-height: 50px;
+  padding: 0 0 0 30px;
+  width: 11%;
+  border-bottom: 10px solid #5096d2;
+}
+.semDetail .title span:nth-child(2) {
+  height: 40px;
+  display: inline-block;
+  line-height: 40px;
+  text-align: center;
+  width: 80%;
+  font-size: 20px;
   font-weight: bold;
+  letter-spacing: 8px;
 }
-.messInfo .right {
-  font-size: 18px;
-  line-height: 35px;
-  text-indent: 2rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 11;
-  word-break: break-all;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  padding: 0 30px;
-  border-bottom: 1px solid red;
-  border-right: 1px solid red;
-  height: 380px;
-}
-.semDetail .chatInfo {
-  float: left;
-  width: 100%;
-  min-height: 400px;
-}
-.chatInfo .message {
-  float: left;
-  min-height: 190px;
-  margin: 0 0 30px 0;
-}
-.list {
-  border-bottom: 1px solid #fff;
-  border-left: 1px solid #fff;
-  min-height: 200px;
-  background-color: #e5e5e5;
-  padding: 15px 0 0 0;
-  margin: 1px 0 0 1px;
-}
-.lefts {
-  padding: 20px 0 0 20px;
-}
-.lefts p {
+
+.semDetail .list .lefts {
+  background-color: #a5d2f5;
+  height: 220px;
   text-align: center;
-  width: 70%;
+  overflow: hidden;
 }
-
-.under {
-  padding: 20px;
-  width: 80%;
-  background-color: #fff;
-  min-height: 160px;
+.semDetail .list .lefts .name {
+  padding: 20px 0 5px 0;
+  color: #fff;
+  font-weight: bold;
+  font-size: 18px;
+  border-bottom: 1px dashed #fff;
 }
-.under p:first-child {
-  float: left;
-  width: 100%;
+.semDetail .list .lefts span {
+  padding: 5px 0 5px 0;
+  color: #fff;
   font-size: 18px;
-  height: 105px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 4;
-  word-break: break-all;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  line-height: 26px;
+  font-weight: bold;
 }
-.under p:last-child {
-  text-align: right;
+
+.under .underspan {
   font-size: 16px;
-}
-.chatInfo .input {
-  float: left;
-  height: 340px;
-  overflow: hidden;
-  text-align: center;
-  padding: 0 10%;
-  background-color: #e5e5e5;
-}
-.huifu {
-  background-color: #ffffff;
-}
-.title {
-  text-align: left;
-  padding: 5px 0 10px 0;
-  background-color: #e5e5e5;
-  color: #ff7f42;
+  margin: 0 20px 0 20px;
+  border-bottom: 1px dashed red;
 }
 .chatInfo .input .el-button {
   margin: 20px 0 0 0;