gengxin

src/views/dynamic/dealDetail.vue

@@ -11,39 +11,15 @@
               <span></span>
             </el-col>
             <el-col :span="24" class="info">
-              <el-col :span="1" class="left">
+              <el-col :span="1" class="infoTop">
                 <p>项目详情</p>
-                <p></p>
+                <p><span></span></p>
               </el-col>
-              <el-col :span="22" class="center">
-                <!-- <el-col :span="7" class="centerStatus">
-                  <el-steps direction="vertical" :active="dealDetails.status">
-                    <el-step title="正在洽谈"></el-step>
-                    <el-step title="达成意向"></el-step>
-                    <el-step title="交易完成" description=""></el-step>
-                  </el-steps>
-                </el-col>
-                <el-col :span="17" class="centerInfo">
-                  <el-image :src="infoUrl"></el-image>
-                  <el-col :span="24" class="message">
-                    <el-col :span="12" class="messageLeft">
-                      <p>项目名称</p>
-                      <p>产品名称：{{ dealDetails.product_name }}</p>
-                      <p>发布时间：{{ dealDetails.meta | getDate }}</p>
-                      <p>产品说明：{{ dealDetails.description }}</p>
-                    </el-col>
-                    <el-col :span="12" class="messageRight">
-                      <p :span="24">购买人：{{ dealDetails.username }}</p>
-                      <el-col :span="24" v-if="dealDetails.pic">
-                        <el-image style="width:100%;height:400px;" :src="dealDetails.pic"></el-image>
-                      </el-col>
-                    </el-col>
-                  </el-col>
-                </el-col> -->
+              <el-col :span="22">
+                中間
               </el-col>
-              <el-col :span="1" class="right">
-                <p></p>
-                <p>项目详情</p>
+              <el-col :span="1">
+                右側
               </el-col>
             </el-col>
             <el-col :span="24" class="top down">
@@ -131,119 +107,24 @@ export default {
   height: 700px;
   overflow: hidden;
 }
-.main .two .info .left {
-  width: 20px;
-  height: 700px;
-}
-.main .two .info .left p:first-child {
-  float: left;
-  width: 100%;
-  height: 100px;
-  font-size: 18px;
-  color: #003e70;
-  font-weight: bold;
-}
-.main .two .info .left p:last-child {
-  float: left;
-  width: 2px;
-  height: 600px;
-  background: #003e70;
-  margin: 0;
-  position: relative;
-  left: 5px;
-}
-.main .two .info .center {
-  width: 97%;
-}
-.main .two .info .center .centerStatus {
+.main .two .info .infoTop {
   text-align: center;
-  padding: 0px 100px;
-  height: 400px;
-}
-/deep/.el-steps {
-  padding: 120px 0;
-}
-/deep/.el-step__title {
-  font-size: 30px;
-}
-/deep/.el-step__title.is-process {
-  color: #c3c3c3;
-}
-/deep/.el-step__title.is-finish {
-  color: #1c81bf;
-}
-.main .two .info .center .centerInfo {
-  padding: 50px 30px;
-  position: relative;
-}
-.main .two .info .center .centerInfo .message {
-  position: absolute;
-  top: 18%;
-  left: 14%;
-  width: 77%;
-  height: 455px;
+  height: 700px;
   overflow: hidden;
 }
-// .main .two .info .center .centerInfo .message .messageLeft {
-// }
-.main .two .info .center .centerInfo .message .messageLeft p:first-child {
+.main .two .info .infoTop p:first-child {
+  font-size: 20px;
+  height: 120px;
   text-align: center;
-  font-size: 30px;
-  font-family: 黑体;
-  letter-spacing: 10px;
-  padding: 0 0 15px 0;
-}
-.main .two .info .center .centerInfo .message .messageLeft p:nth-child(2) {
-  font-size: 22px;
-  font-family: 黑体;
-  padding: 0 10px 15px 10px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.main .two .info .center .centerInfo .message .messageLeft p:nth-child(3) {
-  font-size: 22px;
-  font-family: 黑体;
-  padding: 0 10px 15px 10px;
-}
-.main .two .info .center .centerInfo .message .messageLeft p:nth-child(4) {
-  font-size: 22px;
-  font-family: 黑体;
-  padding: 0 10px 15px 10px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 12;
-  word-break: break-all;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  line-height: 27px;
+  padding: 0 12px;
 }
-// .main .two .info .center .centerInfo .message .messageRight {
-// }
-.main .two .info .center .centerInfo .message .messageRight p {
-  font-size: 30px;
-  font-family: 黑体;
-  padding: 0 10px 15px 10px;
-}
-.main .two .info .right {
-  width: 20px;
-  height: 700px;
-}
-.main .two .info .right p:first-child {
-  float: left;
-  width: 2px;
-  height: 600px;
-  background: #003e70;
-  margin: 0;
-  position: relative;
-  left: 5px;
+.main .two .info .infoTop p:last-child {
+  text-align: center;
 }
-.main .two .info .right p:last-child {
-  float: left;
-  width: 100%;
-  height: 100px;
-  font-size: 18px;
-  color: #003e70;
-  font-weight: bold;
+.main .two .info .infoTop p:last-child span {
+  display: inline-block;
+  background: red;
+  width: 1px;
+  height: 580px;
 }
 </style>