更新

src/views/detail/semDetail.vue

@@ -15,33 +15,51 @@
                 [专题] 2020年度“中德医疗交流项目”面试工作顺利进行
               </el-col>
             </el-col>
-            <el-col :span="24" class="twoMess">
-              <el-col :span="24" class="list" v-for="(item, index) in fabiaolist" :key="index">
+            <el-col :span="24" class="twoInfo">
+              <el-col class="list">
                 <el-col :span="3" class="left">
-                  <el-col :span="24" class="one">
+                  <el-col :span="24" class="leftTop">
                     会员名称
                   </el-col>
-                  <el-col :span="24" class="two">
+                  <el-col :span="24" class="leftDown">
                     <el-image :src="squareImage"></el-image>
-                    <p>职位名称</p>
+                    <el-col :span="24" class="jobname">
+                      职位名称
+                    </el-col>
                   </el-col>
                 </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 :span="24" class="date">
+                    <i class="el-icon-user icon"></i>
+                    <span>发表于2020-02-02</span>
+                    <span>1楼</span>
+                  </el-col>
+                  <el-col :span="24" class="info">
+                    第二个
+                  </el-col>
+                  <el-col :span="24" class="jubao">
+                    第三个
                   </el-col>
                 </el-col>
               </el-col>
             </el-col>
-            <el-col :span="24" class="page">
+            <!-- <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">
               <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">
@@ -50,7 +68,7 @@
                   <el-button type="primary">发布评论</el-button>
                 </el-col>
               </el-col>
-            </el-col>
+            </el-col> -->
           </el-col>
         </el-col>
       </div>
@@ -64,16 +82,16 @@ import page from '@/components/pagination.vue';
 export default {
   name: 'semDetail',
   props: {},
-  components: { page, wangEditor },
+  components: {},
   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,
+    // 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: {},
@@ -102,140 +120,184 @@ export default {
   float: left;
   width: 100%;
 }
-
-main .two .twoMess {
-  height: 460px;
-}
 .main .two .twoTop {
   float: left;
   width: 100%;
   height: 60px;
-
-  border-bottom: 10px solid #5096d2;
 }
 
 .main .two .twoTop .left {
   float: left;
-  height: 50px;
+  height: 60px;
   line-height: 50px;
   text-align: center;
   font-size: 18px;
   color: #00316e;
   background: #a5d2f5;
+  border-bottom: 10px solid #044b79;
 }
 .main .two .twoTop .right {
   float: left;
-  height: 50px;
+  height: 60px;
   line-height: 50px;
   padding: 0 15px;
   font-size: 30px;
   color: #023658;
+  border-bottom: 10px solid #5096d2;
 }
-
-.list {
+.main .two .twoInfo {
   float: left;
   width: 100%;
 }
-.list:nth-child(n) {
-  float: left;
-  width: 100%;
-  border-bottom: 10px solid #5096d2;
+.main .two .twoInfo .left {
+  background: #5096d2;
+  border-bottom: 10px solid red;
 }
-
-.list .left {
-  float: left;
-}
-.list .left .one {
-  float: left;
-  width: 100%;
+.main .two .twoInfo .left .leftTop {
   height: 60px;
-  margin: 0;
   line-height: 60px;
   text-align: center;
-  background-color: #5096d2;
   color: #fff;
+  font-size: 22px;
   border-bottom: 1px dashed #ccc;
 }
-.list .left .two {
-  float: left;
-  width: 100%;
-  height: 460px;
-  background-color: #5096d2;
+.main .two .twoInfo .left .leftDown {
+  height: 456px;
+}
+.main .two .twoInfo .left .leftDown .el-image {
+  width: 155px;
+  height: 155px;
+  margin: 40px 18px;
+}
+.main .two .twoInfo .left .leftDown .jobname {
   text-align: center;
+  font-size: 22px;
+  color: #fffcae;
 }
-
-.list .left .two .el-image {
-  // width: 155px;
-  // height: 155px;
-  padding: 8px 0 0 0;
+.main .two .twoInfo .right {
+  padding: 0 20px;
 }
-.list .left .two p {
-  padding: 20px 0 0 0;
-  color: #fff;
+.main .two .twoInfo .right .date {
+  height: 60px;
+  line-height: 60px;
+  border-bottom: 1px dashed #ccc;
 }
-
-.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;
+.main .two .twoInfo .right .date .icon {
+  font-size: 30px;
+  color: #b6dd59;
 }
-
-.under .underright {
-  float: left;
-  height: 360px;
+.main .two .twoInfo .right .date span:nth-child(2) {
+  font-size: 25px;
   padding: 0 15px;
-  font-size: 30px;
-  color: #023658;
-  border: 5px solid #5096d2;
-  border-radius: 2px;
 }
-
-.under .underright .input {
-  padding: 20px;
-  width: 64%;
+.main .two .twoInfo .right .date span:last-child {
+  font-size: 25px;
+  float: right;
 }
+// .list {
+//   float: left;
+//   width: 100%;
+// }
+// .list:nth-child(n) {
+//   float: left;
+//   width: 100%;
+//   border-bottom: 10px solid #5096d2;
+// }
 
-.under .underright .input .el-button {
-  margin: 20px 0 0 0;
-}
+// .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;
+// }
 </style>