From 68c7bd737a57e23f228e1eb4aef8a76b2c6aa1e2 Mon Sep 17 00:00:00 2001
From: Wangwei <870653736@qq.com>
Date: Wed, 15 Feb 2023 11:45:15 +0800
Subject: [PATCH] =?UTF-8?q?update:=E7=9B=B4=E6=92=AD=E5=93=8D=E5=BA=94?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/m.css         |   3 +
 src/views/live/live.vue      |  35 ++++++--
 src/views/live/live_view.vue | 170 ++++++++++++++++++++++++++++++++---
 3 files changed, 193 insertions(+), 15 deletions(-)

diff --git a/src/assets/css/m.css b/src/assets/css/m.css
index 3577075..263b17b 100644
--- a/src/assets/css/m.css
+++ b/src/assets/css/m.css
@@ -3,6 +3,9 @@
         width: 100%;
         padding: 0 20px;
     }
+    .m-pd20{
+        padding: 0 20px;
+    }
 
     .w1200 {
         width: 100%;
diff --git a/src/views/live/live.vue b/src/views/live/live.vue
index ab23d65..4dea5cc 100644
--- a/src/views/live/live.vue
+++ b/src/views/live/live.vue
@@ -145,13 +145,13 @@
     </template>
     <template #default>
 
-      <div class="top-title" v-if="liveFocusListWap.length > 0">
+      <div class="top-title dn m-db" v-if="liveFocusListWap.length > 0">
         <span class="line"></span>
         <p>近期直播</p>
         <span class="line"></span>
       </div>
 
-      <div class="live-box">
+      <div class="live-box dn m-db">
 
         <li v-for="(item, i) in liveFocusListWap" :key="i" class="item">
           
@@ -179,10 +179,22 @@
             </div>
 
             <div class="rtbox flex-2 flex-1">
-              <a class="btn-hot f16" :href="'live/'+item.liveid">
-                <span v-if="item.playstate==1">直播中</span>
+
+              <!-- playstate=1直播中 已报名 去播放页 -->
+              <a class="btn-hot f16" :href="'live/play/'+item.liveid" v-if="item.playstate==1 && item.is_apply==1">
+                <span >{{item.playdate}}</span>
+              </a>
+
+              <!-- playstate=1直播中 未报名 去详情页 -->
+              <a class="btn-hot f16" :href="'live/'+item.liveid" v-else-if="item.playstate==1 && !item.is_apply">
+                <span >{{item.playdate}}</span>
+              </a>
+
+              <a class="btn-hot f16" :href="'live/'+item.liveid" v-else>
+                <span v-if="item.is_apply==1">立即观看</span>
                 <span v-else>立即报名</span>
               </a>
+
               <div v-html="item.downtime"></div>
             </div>
 
@@ -194,7 +206,7 @@
   </el-skeleton>
 
 
-  <div class="top-title">
+  <div class="top-title dn m-db">
     <span class="line"></span>
     <p>全部直播</p>
     <span class="line"></span>
@@ -478,6 +490,13 @@
             height: 100px;
             margin-right: 0 !important;
 
+            .btn-008 {
+              margin: 14px 0 16px;
+              padding: 12px 0;
+              width: 200px;
+              letter-spacing: 4px;
+            }
+
           }
         }
       }
@@ -851,6 +870,12 @@
               margin: 14px 0 16px;
               width: 100% !important;
             }
+            .btn-008 {
+              margin: 14px 0 16px;
+              padding: 12px 0;
+              width: 100% !important;
+              letter-spacing: 4px;
+            }
           }
         }
       }
diff --git a/src/views/live/live_view.vue b/src/views/live/live_view.vue
index dbac116..3782423 100644
--- a/src/views/live/live_view.vue
+++ b/src/views/live/live_view.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-wechat-title="basic.title + ' - ' +$route.meta.title"></div>
-  <div class="w1200">
+  <div class="w1200 m-pd20">
 
     <div style="padding: 50px 0 150px;" v-if="empty===-1">
       <el-empty :image-size="150" :description="msg"></el-empty>
@@ -36,7 +36,7 @@
 
         <template #default>
           <div class="rtinfo">
-            <h2 class="til">{{basic.title}}<i>直播课</i></h2>
+            <h2 class="til hide-txt2">{{basic.title}}<i>直播课</i></h2>
             <ul class="ulinfo flex-2">
               <li>直播时间：{{basic.start_time}}</li>
               <li>报名人数：{{basic.number_people}}人</li>
@@ -133,8 +133,7 @@
               <el-popover placement="top" :width="300" trigger="click">
                 <p style="padding: 12px 0 16px; text-align: center;" class="f14">您还未登录哦~~登录后再报名吧！</p>
                 <div style="text-align: center; padding: 14px 0;">
-                  <a :href="com_login_url"
-                    class="el-btn medium">立即登录</a>
+                  <a :href="com_login_url" class="el-btn medium">立即登录</a>
                 </div>
                 <template #reference>
                   <a href="javascript:;" class="plbtn">立即报名</a>
@@ -169,7 +168,7 @@
       </div>
 
       <!-- 右侧 -->
-      <div class="rt-box">
+      <div class="rt-box m-dn">
         <div class="rtbox">
           <h2>活动组织者</h2>
           <ul class="bbom" style="line-height: 32px;">
@@ -1159,13 +1158,164 @@
   }
 </style>
 
+<style lang="scss">
+  /*响应式-移动端*/
+  @import '~@/assets/css/m.css';
+
+  @media screen and (max-width: 1200px) {
+
+    .basic {
+      display: flex;
+      margin: 24px 0 24px;
+      height: auto !important;
+      background-color: #F3F8FF;
+      border-radius: 16px;
+
+      .lfinfo {
+        width: 47% !important;
+        height: 240px !important;
+
+        .img {
+          width: 100%;
+          height: 100%;
+          border-radius: 16px;
+        }
+      }
+
+
+      .rtinfo {
+        width: 53% !important;
+        padding: 14px 24px 14px 24px !important;
+        line-height: 1;
+
+        .til {
+          font-size: 16px !important;
+          line-height: 24px !important;
+          padding-bottom: 0 !important;
+          margin-bottom: 12px;
+
+          i {
+            display: inline-block;
+            vertical-align: middle;
+            margin-left: 8px;
+            color: #fff;
+            font-size: 12px;
+            padding: 0 10px;
+            width: 56px;
+            height: 20px !important;
+            line-height: 20px !important;
+            white-space: nowrap;
+            background: linear-gradient(270deg, #FF7C6B 0%, #FF4B72 100%);
+            border-radius: 12px;
+          }
+        }
+
+        .ulinfo {
+
+          li {
+            padding-bottom: 10px !important;
+            font-size: 14px !important;
+            color: #808696;
+
+            .fxweixin {
+              display: none;
+            }
+
+            .dateFormat {
+              &.f16 {
+                font-size: 14px !important;
+              }
+
+              .f20 {
+                font-size: 16px !important;
+              }
+
+            }
+
+            &.nopb {
+              padding-bottom: 0;
+            }
+
+            &.price {
+              .saleprice {
+                font-size: 32px;
+              }
+
+              del {
+                margin-left: 8px;
+                color: #B3C1D3;
+                font-size: 18px;
+              }
+
+              .free {
+                font-size: 24px;
+              }
+            }
+
+            .fxweixin {
+              cursor: pointer;
+              margin-left: 14px;
+
+              &:hover {
+                color: #28C346;
+              }
+            }
+
+            .fxurl {
+              cursor: pointer;
+
+              &:hover {
+                color: #409EFF;
+              }
+            }
+
+
+          }
+
+
+        }
+
+        .plbtn {
+          letter-spacing: 4px;
+          margin-top: 0px !important;
+          display: block;
+          color: #fff;
+          text-align: center;
+          font-size: 16px !important;
+          width: 80% !important;
+          height: 40px !important;
+          line-height: 40px !important;
+          background: linear-gradient(270deg, #FF7C6B 0%, #FF4B72 100%);
+          border-radius: 8px;
+        }
+
+        .plbtn2 {
+          letter-spacing: 4px;
+          margin-top: 6px;
+          display: block;
+          text-align: center;
+          font-size: 20px;
+          width: 360px;
+          height: 58px;
+          line-height: 58px;
+          background: #D2DCE7;
+          color: #7E8FA3;
+          border-radius: 8px;
+        }
+
+      }
+    }
+
+  }
+</style>
+
 <style lang="scss">
   .sign-form-ok {
     width: 500px;
   }
 
   /*响应式-移动端*/
-  @media screen and (max-width: 500px) {
+  @media screen and (max-width: 650px) {
     .w1200 {
       width: 100%;
       padding: 0 12px;
@@ -1325,13 +1475,13 @@
         .plbtn2 {
           display: block;
           margin: 6px auto 10px auto;
-          font-size: 18px !important;
+          font-size: 16px !important;
           width: 100% !important;
-          height: 48px !important;
-          line-height: 48px !important;
+          height: 42px !important;
+          line-height: 42px !important;
         }
 
       }
     }
   }
-</style>
+</style>
\ No newline at end of file