更新

src/views/hall/hallDetail.vue

@@ -227,4 +227,164 @@ export default {
 .hallDetailInput .el-input {
   width: 70%;
 }
+
+.w_1200 {
+  margin: auto;
+  width: 1200px;
+}
+.livetop {
+  width: 100%;
+  height: 487px;
+  overflow: hidden;
+  background-image: url(../../assets/live/top_3.png);
+}
+
+.livetop .title {
+  text-align: center;
+  color: #fff;
+  font-size: 45px;
+  position: relative;
+  top: 65px;
+}
+
+.livetop .zhuban {
+  position: relative;
+  top: 140px;
+  color: #fff;
+  text-align: center;
+  width: 100%;
+  font-size: 25px;
+}
+
+.livetop .zhuban span:first-child {
+  font-weight: bold;
+}
+
+.livetop .num {
+  position: relative;
+  top: 190px;
+  color: #fff;
+}
+
+.livetop .num p {
+  float: left;
+  width: 186px;
+  background: #fff;
+  margin: 0 14px 0 0 !important;
+  color: #000;
+  height: 50px;
+  line-height: 50px;
+  border-radius: 30px;
+}
+
+.livetop .num p:last-child {
+  margin: 0;
+}
+
+.livetop .num p span:first-child {
+  display: inline-block;
+  width: 93px;
+  text-align: center;
+  height: 50px;
+  line-height: 50px;
+  font-size: 16px;
+  background: red;
+  border-radius: 30px;
+  color: #fff;
+  font-weight: bold;
+}
+
+.livetop .num p span:last-child {
+  display: inline-block;
+  width: 89px;
+  text-align: center;
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.livemain {
+  position: relative;
+  top: -55px;
+  z-index: 999;
+}
+
+.liveList {
+  min-height: 850px;
+  background: #8e2321;
+  float: left;
+  width: 100%;
+  margin: 0 0 20px 0;
+  position: relative;
+  top: -50px;
+}
+.liveList .liveListInfo {
+  position: absolute;
+  top: 50px;
+}
+.liveListInfo .liveLisTop {
+  width: 100%;
+  text-align: center;
+  padding: 34px 0;
+  font-size: 40px;
+  color: #fff;
+}
+.liveListInfo .liveLisTop span:first-child {
+  font-size: 40px;
+  font-weight: bold;
+}
+.liveListInfo .liveLisTop span:last-child {
+  padding: 0 0 0 15px;
+  color: yellow;
+  font-family: monospace;
+  font-weight: bold;
+}
+.liveLisMain {
+  float: left;
+  width: 100%;
+  height: 470px;
+  overflow: hidden;
+}
+.liveLisMain ul li {
+  float: left;
+  border-bottom: 1px dashed #ccc;
+  width: 98%;
+  font-size: 20px;
+  padding: 10px 0;
+  margin: 0 10px;
+  color: #fff;
+}
+.liveLisMain ul li span:first-child {
+  color: #ffff00;
+  padding: 0 15px 0 0;
+  display: inline-block;
+}
+.liveLisMain ul li span:nth-child(2) {
+  display: inline-block;
+  width: 420px;
+}
+.liveLisMain ul li span:nth-child(3) {
+  display: inline-block;
+  width: 100px;
+}
+.liveLisMain ul li span:nth-child(4) {
+  display: inline-block;
+  width: 420px;
+}
+.liveLisDown {
+  float: left;
+  width: 100%;
+  height: 260px;
+  font-size: 16px;
+  padding: 25px 0 0 0;
+}
+.liveLisDown p {
+  padding: 10px 0 5px 10px;
+}
+.liveLisDown p span:first-child {
+  color: #fc3;
+  letter-spacing: 15px;
+}
+.liveLisDown p span:last-child {
+  color: #fff;
+}
 </style>

src/views/hall/liveApply.vue

@@ -156,6 +156,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import '~@/style/style.css';
 .liveApply {
   float: left;
   margin: 30px 0;

src/views/hall/liveList.vue

@@ -110,6 +110,7 @@ export default {
   data: () => ({
     liveList: [],
     total: 0,
+    beijingPic: require('@a/live/top_3.png'),
   }),
   created() {
     this.search();
@@ -142,6 +143,86 @@ export default {
 <style lang="less">
 @import '~@/style/style.css';
 // 直播中心
+.w_1200 {
+  margin: auto;
+  width: 1200px;
+}
+.livetop {
+  width: 100%;
+  height: 487px;
+  overflow: hidden;
+  background-image: url(../../assets/live/top_3.png);
+}
+
+.livetop .title {
+  text-align: center;
+  color: #fff;
+  font-size: 45px;
+  position: relative;
+  top: 65px;
+}
+
+.livetop .zhuban {
+  position: relative;
+  top: 140px;
+  color: #fff;
+  text-align: center;
+  width: 100%;
+  font-size: 25px;
+}
+
+.livetop .zhuban span:first-child {
+  font-weight: bold;
+}
+
+.livetop .num {
+  position: relative;
+  top: 190px;
+  color: #fff;
+}
+
+.livetop .num p {
+  float: left;
+  width: 186px;
+  background: #fff;
+  margin: 0 14px 0 0 !important;
+  color: #000;
+  height: 50px;
+  line-height: 50px;
+  border-radius: 30px;
+}
+
+.livetop .num p:last-child {
+  margin: 0;
+}
+
+.livetop .num p span:first-child {
+  display: inline-block;
+  width: 93px;
+  text-align: center;
+  height: 50px;
+  line-height: 50px;
+  font-size: 16px;
+  background: red;
+  border-radius: 30px;
+  color: #fff;
+  font-weight: bold;
+}
+
+.livetop .num p span:last-child {
+  display: inline-block;
+  width: 89px;
+  text-align: center;
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.livemain {
+  position: relative;
+  top: -55px;
+  z-index: 999;
+}
+
 .liveList {
   min-height: 850px;
   background: #8e2321;