Browse Source

update:直播响应式

pull/2/head
Wangwei 2 years ago
parent
commit
68c7bd737a
  1. 3
      src/assets/css/m.css
  2. 35
      src/views/live/live.vue
  3. 170
      src/views/live/live_view.vue

3
src/assets/css/m.css

@ -3,6 +3,9 @@
width: 100%;
padding: 0 20px;
}
.m-pd20{
padding: 0 20px;
}
.w1200 {
width: 100%;

35
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;
}
}
}
}

170
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>
Loading…
Cancel
Save