更新

src/views/live/roomDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="roomsDetail">
-    <el-row style="height: 100vh;">
+    <el-row style="height: 100vh;background: #FFF8DC1f">
       <el-col :span="24">
         <el-col :span="24" class="video" :style="{ height: oheight }"> </el-col>
       </el-col>
@@ -31,18 +31,14 @@
         </el-col>
       </el-col>
       <el-col :span="24" class="chatrow">
-        <el-col :span="24" class="info">
-          <el-col :span="12" class="num">
-            <span>观看：{{ total }}</span>
-          </el-col>
-          <el-col :span="12" class="meetBtn">
-            <el-button v-show="switchbtn" type="warning" round size="small" @click="roomMeetBtn()"
-              >小程序<i class="el-icon-camera el-icon--right"></i
-            ></el-button>
-          </el-col>
+        <el-col :span="12" class="num">
+          <span>观看：{{ total }}</span>
+        </el-col>
+        <el-col :span="12" class="meetBtn">
+          <el-button v-show="switchbtn" type="warning" round size="small" @click="roomMeetBtn()">小程序<i class="el-icon-camera el-icon--right"></i></el-button>
         </el-col>
       </el-col>
-      <el-col :span="24">
+      <el-col :span="24" class="gnanBtn">
         <van-tabs type="card" @click="tabsClick">
           <van-tab title="会议简介">
             <van-col :span="24">
@@ -57,56 +53,48 @@
             </van-col>
           </van-tab>
           <van-tab title="互动留言">
-            <el-row>
-              <el-col :span="24" class="info">
-                <el-col :span="24" class="chat">
-                  <el-col :span="24" class="chatInfo" id="chatSell">
-                    <el-col :span="24" class="list" v-for="(item, index) in dataList" :key="index">
-                      <p>
-                        <span :class="item.sendname == user.name ? 'selfColor' : ''">{{ item.sendname }}:</span>
-                        <span>{{ item.content }}</span>
-                      </p>
-                    </el-col>
-                  </el-col>
+            <el-col :span="24" class="hdly">
+              <el-col :span="24" class="chatInfo" id="chatSell">
+                <el-col :span="24" class="list" v-for="(item, index) in dataList" :key="index">
+                  <p>
+                    <span :class="item.sendname == user.name ? 'selfColor' : ''">{{ item.sendname }}:</span>
+                    <span>{{ item.content }}</span>
+                  </p>
+                </el-col>
+              </el-col>
+
+              <el-col :span="24" class="submit">
+                <el-col :span="20" class="input">
+                  <el-input type="textarea" maxlength="5000" :rows="1" v-model="content"></el-input>
                 </el-col>
-                <el-col :span="24" class="submit">
-                  <el-col :span="19" class="input">
-                    <el-input type="textarea" maxlength="5000" show-word-limit v-model="content"></el-input>
-                  </el-col>
-                  <el-col :span="5" class="btn">
-                    <el-button type="primary" size="mini" @click="chatCreate">发送</el-button>
-                  </el-col>
+                <el-col :span="4" class="btn">
+                  <el-button type="primary" size="mini" @click="chatCreate">发送</el-button>
                 </el-col>
               </el-col>
-            </el-row>
+            </el-col>
           </van-tab>
           <van-tab title="参与成员">
-            <van-col :span="24" class="userList">
-              <van-grid :column-num="3">
-                <van-grid-item v-for="(item, index) in userList" :key="index" icon="manager" :text="item.username" />
-              </van-grid>
-            </van-col>
+            <el-col :span="24" class="chry">
+              <el-col :span="6" class="userList" v-for="(item, index) in userList" :key="index">
+                <i class="el-icon-user-solid"></i>
+                <p>{{ item.username }}</p>
+              </el-col>
+            </el-col>
           </van-tab>
           <van-tab title="申请评分">
-            <van-col :span="24">
-              <van-field v-model="form.hosname" left-icon="wap-home-o" name="hosname" label="单位" placeholder="请填写单位名称" />
-            </van-col>
-            <van-col :span="24">
-              <van-field v-model="form.deptname" left-icon="apps-o" name="deptname" label="科室" placeholder="请填写科室名称" />
-            </van-col>
-            <van-col :span="24">
-              <van-field v-model="form.level" left-icon="gem-o" name="level" label="职称" placeholder="请填写职称" />
-            </van-col>
-            <van-col :span="24">
-              <van-field v-model="form.major" left-icon="user-o" name="major" label="专业" placeholder="请填写专业" />
-            </van-col>
-            <van-col :span="24">
-              <van-field v-model="form.isxf" name="isxf" left-icon="star-o" label="学分" type="number" placeholder="请填写需要授予学分" />
-            </van-col>
-            <van-col :span="24" style="text-align:center">
-              <van-button icon="star-o" type="primary" @click="sqClick">
-                申请
-              </van-button>
+            <van-col span="24">
+              <van-form @submit="sqClick">
+                <van-field v-model="form.hosname" left-icon="wap-home-o" name="hosname" label="单位" placeholder="请填写单位名称" />
+                <van-field v-model="form.deptname" left-icon="apps-o" name="deptname" label="科室" placeholder="请填写科室名称" />
+                <van-field v-model="form.level" left-icon="gem-o" name="level" label="职称" placeholder="请填写职称" />
+                <van-field v-model="form.major" left-icon="user-o" name="major" label="专业" placeholder="请填写专业" />
+                <van-field v-model="form.isxf" name="isxf" left-icon="star-o" label="学分" type="number" placeholder="请填写需要授予学分" />
+                <div style="margin: 16px;">
+                  <van-button round block type="info" native-type="sqClick">
+                    申请
+                  </van-button>
+                </div>
+              </van-form>
             </van-col>
           </van-tab>
         </van-tabs>
@@ -949,56 +937,10 @@ export default {
   width: 100%;
 }
 .content {
+  height: 425px;
+  overflow: auto;
   padding: 10px;
-}
-.info {
-  .title {
-    text-align: center;
-    padding: 10px 0;
-    font-size: 16px;
-    font-weight: bold;
-  }
-  .num {
-    padding: 10px 0;
-    font-size: 16px;
-  }
-  .advert {
-    background: #fff;
-    padding: 10px;
-  }
-  .chat {
-    min-height: 280px;
-    max-height: 300px;
-    overflow-y: auto;
-    padding: 0 0 50px 0;
-    .chatInfo {
-      .list {
-        margin: 10px 0 10px 0;
-        span:first-child {
-          float: left;
-          width: 17%;
-          text-align: center;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          // font-weight: bold;
-        }
-        span:last-child {
-          float: right;
-          width: 82%;
-        }
-      }
-    }
-  }
-  .submit {
-    width: 100%;
-    position: absolute;
-    bottom: 0px;
-    .el-button {
-      width: 100%;
-      padding: 20px 0;
-    }
-  }
+  text-indent: 2rem;
 }
 .my-swipe .van-swipe-item {
   color: #fff;
@@ -1049,13 +991,6 @@ export default {
   z-index: 999;
   padding: 0 10px;
 }
-.userList {
-  height: 300px;
-  min-height: 300px;
-  overflow-y: auto;
-  padding: 0 10px;
-  margin: 0 0 10px 0;
-}
 .questpopup {
   padding: 10px 10px;
 }
@@ -1073,7 +1008,38 @@ export default {
   padding: 10px 0 15px 0;
 }
 /deep/.van-cell {
-  padding: 25px 16px;
+  padding: 10px 15px;
   font-size: 16px;
+  background-color: #ffffff1f;
+}
+.chatrow {
+  padding: 10px 15px;
+}
+.gnanBtn {
+  min-height: 425px;
+}
+.van-tabs {
+  min-height: 425px;
+}
+/deep/.van-tabs__nav--card {
+  margin: 0 10px;
+}
+.hdly {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+}
+/deep/.el-button--mini,
+.el-button--mini.is-round {
+  padding: 9px 18px;
+}
+.chry {
+  padding: 10px;
+  .userList {
+    text-align: center;
+    padding: 10px 0;
+    box-shadow: 0 0 5px #ccc;
+    border-radius: 5px;
+  }
 }
 </style>