Skip to content

N
newLive
Commit 1849a1b1 authored by jyh's avatar jyh
Browse files
Options

支付弹框布局

parent 87556e15
Hide whitespace changes
Inline Side-by-side
Showing with 12773 additions and 10 deletions
package-lock.json
View file @ 1849a1b1
This source diff could not be displayed because it is too large. You can view the blob instead.
src/router/index.js
View file @ 1849a1b1
...@@ -7,6 +7,9 @@ import register from '../views/register' ...@@ -7,6 +7,9 @@ import register from '../views/register'
import live from '../views/live' import live from '../views/live'
import pdf from '../views/pdf' import pdf from '../views/pdf'
import fullScreen from '../views/fullScreen' import fullScreen from '../views/fullScreen'
// import bullet from '../views/bullet'
// import login from '../views/login' // import login from '../views/login'
// import monthlyReport from '@/components/monthlyReport'//月报 // import monthlyReport from '@/components/monthlyReport'//月报
// import personnelManagement from '@/components/personnelManagement'//人员管理 // import personnelManagement from '@/components/personnelManagement'//人员管理
...@@ -63,6 +66,13 @@ const router = new Router({ ...@@ -63,6 +66,13 @@ const router = new Router({
component: fullScreen, component: fullScreen,
}, },
// {
// path: '/bullet',
// name: 'bullet',
// component: bullet,
// },
// { // {
// path: '/login', // path: '/login',
// name: 'login', // name: 'login',
......
src/views/bullet.vue 0 → 100644
View file @ 1849a1b1
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
\ No newline at end of file
src/views/live.vue
View file @ 1849a1b1
...@@ -16,7 +16,9 @@ ...@@ -16,7 +16,9 @@
<mt-tab-item id="1">讨论</mt-tab-item> <mt-tab-item id="1">讨论</mt-tab-item>
<mt-tab-item id="2">主播</mt-tab-item> <mt-tab-item id="2">主播</mt-tab-item>
<mt-tab-item id="3">回放</mt-tab-item> <mt-tab-item id="3">回放</mt-tab-item>
<mt-tab-item>支付</mt-tab-item>
</mt-navbar> </mt-navbar>
<mt-tab-container v-model="selected"> <mt-tab-container v-model="selected">
<mt-tab-container-item id="1"> <mt-tab-container-item id="1">
<div class="firstBody1" :style="{'height':getClientHeight}"> <div class="firstBody1" :style="{'height':getClientHeight}">
...@@ -78,6 +80,107 @@ ...@@ -78,6 +80,107 @@
</mt-tab-container-item> </mt-tab-container-item>
</mt-tab-container> </mt-tab-container>
<div class="p_conte">
<div class="conten">
<div>
<ul>
<li class="live_b">
<div class="one_day">畅听1天</div>
<div class="Plef">
<div class="div_p">次卡</div>
<img src="../assets/niu.png" alt="">
<span>20</span>
<div>
<img src="../assets/niu.png" alt="">
<span>220</span>
</div>
</div>
</li>
<li class="live_b">
<div class="one_day_six">畅听7天</div>
<div class="Plef_six">
<div class="div_p_six">次卡</div>
<img src="../assets/niu.png" alt="">
<span>20</span>
</div>
</li>
<li class="live_b">
<div class="one_day_thr">畅听30天</div>
<div class="Plef_thr">
<div class="div_p_thr">次卡</div>
<img src="../assets/niu.png" alt="">
<span>20</span>
</div>
</li>
<li class="live_b">
<div class="one_day_thr">畅听30天</div>
<div class="Plef_thr">
<div class="div_p_thr">次卡</div>
<img src="../assets/niu.png" alt="">
<span>20</span>
</div>
</li>
<li class="live_b">
<div class="one_day_thr">畅听30天</div>
<div class="Plef_thr">
<div class="div_p_thr">次卡</div>
<img src="../assets/niu.png" alt="">
<span>20</span>
</div>
</li>
</ul>
</div>
<div class="Lent">
<div class="Usret">
<span class="buy">购买者</span><span class="name">王小军</span>
</div>
<div class="Usret_p">
<span class="buy">购买项目</span><span class="name">xxxx谁的直播间</span>
</div>
<div class="Lpin">支付方式 <span>(1元=1金牛)</span></div>
<!--牛币-->
<div class="ov">
<div>
<img src="../assets/niu.png" alt="">
<span>金牛（账户余额：20金牛）</span>
</div>
<img src="../assets/noxuanzhong.png" alt="" class="Ig">
</div>
<!--微信-->
<div class="ov">
<div>
<img src="../assets/niu.png" alt="">
<span>微信</span>
</div>
<img src="../assets/noxuanzhong.png" alt="" class="Ig">
</div>
<!--支付宝-->
<div class="ov">
<div>
<img src="../assets/niu.png" alt="">
<span>支付宝</span>
</div>
<img src="../assets/noxuanzhong.png" alt="" class="Ig">
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -554,7 +657,7 @@ display: block; ...@@ -554,7 +657,7 @@ display: block;
overflow-y:auto; overflow-y:auto;
margin-top: 2vw; margin-top: 2vw;
height: 125vw; height: 125vw;
/* background: red; */ background: #0C0A16;
} }
.mq-message1{ .mq-message1{
/* height: 10vw; */ /* height: 10vw; */
...@@ -624,4 +727,193 @@ height: 125vw; ...@@ -624,4 +727,193 @@ height: 125vw;
opacity: 0.6; opacity: 0.6;
line-height: 10vw; line-height: 10vw;
} }
.live_b{
background:url('../assets/payone.png') no-repeat;
width: 32.2vw;
height: 41.86667vw;
display:flex;
}
.conten{
position:fixed;
top:21%;
left:0%;
width:100%;
/* background:red */
background: white;
height:100%
}
.p_conte{
position: relative;
}
.Plef_six span{
#F79D2E: #41A9FF;
}
.Plef_thr span{
color: #F79D2E
}
.div_p{
width: 17px;
height: 50px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #FF7874;
line-height: 25px;
margin-left: 21px;
margin-top: 20px;
}
.div_p_thr{
width: 17px;
height: 50px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #F79D2E;
line-height: 25px;
margin-left: 21px;
margin-top: 20px;
}
.div_p_six{
width: 17px;
height: 50px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #41A9FF;
line-height: 25px;
margin-left: 21px;
margin-top: 20px;
}
.one_day{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FF7874;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
}
.one_day_thr{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F79D2E;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
}
.one_day_six{
width:20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #41A9FF;
line-height: 17px;
margin-top: 20px;
margin-left: 2vw;
}
.Plef_thr img{
width:20px;
height:20px;
margin-left:12px;
}
.Plef img{
/* width:20px; */
height:20px;
margin-left:12px;
/* margin-top:10px; */
margin-right:6px
}
.Plef_six img{
width:20px;
height:20px;
margin-left:12px;
}
.Plef_six span{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #41A9FF;
}
.Plef span {
width: 16px;
height: 16px;
font-size: 14px;
font-family: HelveticaNeue;
color: #FF7874;
line-height: 16px;
}
.conten ul{
width: 76.33333vw;
display: flex;
overflow-x: auto;
padding-left: 5.33333vw;
padding-top: 7.73333vw;
border: 1px solid red;
margin: 0 auto;
}
.Lent{
height:100%;
margin-left:20px;
margin-right:20px;
}
.name{
float:right
}
.buy{
float:left
}
.ov{
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid #F5F5F5;
padding-bottom: 20px;
}
.Ig{
width:20px;
height:20px
}
.Lpin{
margin-top:20px;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 22px;
}
.Lpin span{
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #E31D1A;
line-height: 22px;
}
.Usret{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.Usret_p{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top:14px
}
</style> </style>
vue.config.js
View file @ 1849a1b1
...@@ -25,4 +25,5 @@ assetsDir: 'assets', // build时放置生成的静态资源 (js、css、img、fo ...@@ -25,4 +25,5 @@ assetsDir: 'assets', // build时放置生成的静态资源 (js、css、img、fo
filenameHashing: true, // 默认在生成的静态资源文件名中包含hash以控制缓存 filenameHashing: true, // 默认在生成的静态资源文件名中包含hash以控制缓存
runtimeCompiler: false, // 是否使用包含运行时编译器的 Vue 构建版本 runtimeCompiler: false, // 是否使用包含运行时编译器的 Vue 构建版本
productionSourceMap: true, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建 productionSourceMap: true, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
lintOnSave:false//关闭语法错误
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment