1 #185
18
src/App.vue
18
src/App.vue
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app" :class="isMobile?'mobile':''">
|
||||||
<router-view />
|
<router-view />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -7,6 +7,7 @@
|
|||||||
export default {
|
export default {
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
|
isMobile:false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created(){
|
created(){
|
||||||
@ -16,6 +17,15 @@
|
|||||||
window.addEventListener("beforeunload",()=>{ //在页面刷新时将vuex里的信息保存到sessionStorage里
|
window.addEventListener("beforeunload",()=>{ //在页面刷新时将vuex里的信息保存到sessionStorage里
|
||||||
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
|
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
|
||||||
})
|
})
|
||||||
|
if (
|
||||||
|
navigator.userAgent.match(
|
||||||
|
/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
this.isMobile=true
|
||||||
|
} else {
|
||||||
|
this.isMobile=false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
let inputList = document.querySelectorAll('input');
|
let inputList = document.querySelectorAll('input');
|
||||||
@ -56,6 +66,12 @@ input::-webkit-inner-spin-button {
|
|||||||
min-height: 900px;
|
min-height: 900px;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
&.mobile{
|
||||||
|
min-width: unset;
|
||||||
|
min-height: unset;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: Oswald;
|
font-family: Oswald;
|
||||||
|
|||||||
BIN
src/assets/wx/add.png
Normal file
BIN
src/assets/wx/add.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 589 B |
BIN
src/assets/wx/add_act.png
Normal file
BIN
src/assets/wx/add_act.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 487 B |
BIN
src/assets/wx/direction_keys.png
Normal file
BIN
src/assets/wx/direction_keys.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
src/assets/wx/down_arrow.png
Normal file
BIN
src/assets/wx/down_arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 713 B |
BIN
src/assets/wx/down_arrow_act.png
Normal file
BIN
src/assets/wx/down_arrow_act.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/wx/left_arrow.png
Normal file
BIN
src/assets/wx/left_arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 501 B |
BIN
src/assets/wx/left_arrow_act.png
Normal file
BIN
src/assets/wx/left_arrow_act.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/wx/right_arrow.png
Normal file
BIN
src/assets/wx/right_arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 312 B |
BIN
src/assets/wx/right_arrow_act.png
Normal file
BIN
src/assets/wx/right_arrow_act.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/assets/wx/subtract.png
Normal file
BIN
src/assets/wx/subtract.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 362 B |
BIN
src/assets/wx/subtract_act.png
Normal file
BIN
src/assets/wx/subtract_act.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 356 B |
BIN
src/assets/wx/up_arrow.png
Normal file
BIN
src/assets/wx/up_arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 438 B |
BIN
src/assets/wx/up_arrow_act.png
Normal file
BIN
src/assets/wx/up_arrow_act.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/wx/videoLive.png
Normal file
BIN
src/assets/wx/videoLive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 367 KiB |
@ -5,8 +5,8 @@ const baseSize = 100;
|
|||||||
function setRem() {
|
function setRem() {
|
||||||
// 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
|
// 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
|
||||||
const scale = window.innerWidth / 1920;
|
const scale = window.innerWidth / 1920;
|
||||||
|
|
||||||
|
|
||||||
// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
|
// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
|
||||||
document.documentElement.style.fontSize = baseSize * scale + "px";
|
document.documentElement.style.fontSize = baseSize * scale + "px";
|
||||||
}
|
}
|
||||||
|
|||||||
@ -29,6 +29,11 @@ const routes = [
|
|||||||
name: 'largeScreen',
|
name: 'largeScreen',
|
||||||
component: () => import('../views/page/largeScreen.vue')
|
component: () => import('../views/page/largeScreen.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/videoLive',
|
||||||
|
name: 'videoLive',
|
||||||
|
component: () => import('../views/videoLive.vue')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/largeScreen1',
|
path: '/largeScreen1',
|
||||||
name: 'largeScreen1',
|
name: 'largeScreen1',
|
||||||
|
|||||||
621
src/views/videoLive.vue
Normal file
621
src/views/videoLive.vue
Normal file
@ -0,0 +1,621 @@
|
|||||||
|
<template>
|
||||||
|
<div class="videoLive">
|
||||||
|
<div class="center">
|
||||||
|
<div class="video_live monitor" ref="monitor">
|
||||||
|
<img v-if="imgUrl" class="video-js" :src="imgUrl" alt="">
|
||||||
|
<div v-if="!imgUrl" ref="videoPlayer" class="video-js">
|
||||||
|
<div id="video-js"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="skills">
|
||||||
|
<div class="left">
|
||||||
|
<img src="../assets/wx/direction_keys.png" mode=""></img>
|
||||||
|
<div :class="directionFlag == 0 ? 'left_arrow_item_act' : 'left_arrow_item'"
|
||||||
|
@touchstart.stop.prevent='touchstart(2)' @touchend.stop.prevent='touchend(2)'>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div :class="directionFlag == 1 ? 'right_arrow_item_act' : 'right_arrow_item'"
|
||||||
|
@touchstart.stop.prevent='touchstart(3)' @touchend.stop.prevent='touchend(3)'>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div :class="directionFlag == 2 ? 'up_arrow_item_act' : 'up_arrow_item'"
|
||||||
|
@touchstart.stop.prevent='touchstart(0)' @touchend.stop.prevent='touchend(0)'>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div :class="directionFlag == 3 ? 'down_arrow_item_act' : 'down_arrow_item'"
|
||||||
|
@touchstart.stop.prevent='touchstart(1)' @touchend.stop.prevent='touchend(1)'>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="right_item">
|
||||||
|
<div :class="flag1 ? 'add_act' : 'add'" @touchstart.stop.prevent='touchstart(10)'
|
||||||
|
@touchend.stop.prevent='touchend(10)'>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="focus">
|
||||||
|
焦距
|
||||||
|
</div>
|
||||||
|
<div :class="flag1 ? 'subtract' : 'subtract_act'" @touchstart.stop.prevent='touchstart(11)'
|
||||||
|
@touchend.stop.prevent='touchend(11)'>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right_item">
|
||||||
|
<div :class="flag2 ? 'add_act' : 'add'" @touchstart.stop.prevent='touchstart(8)'
|
||||||
|
@touchend.stop.prevent='touchend(8)'>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="focus">
|
||||||
|
缩放
|
||||||
|
</div>
|
||||||
|
<div :class="flag2 ? 'subtract' : 'subtract_act'" @touchstart.stop.prevent='touchstart(9)'
|
||||||
|
@touchend.stop.prevent='touchend(9)'>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import EZUIKit from 'ezuikit-js';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 头部导航背景
|
||||||
|
background: {
|
||||||
|
backgroundColor: '#24B383',
|
||||||
|
},
|
||||||
|
directionFlag: 5,
|
||||||
|
flag1: true,
|
||||||
|
flag2: true,
|
||||||
|
cameraid: '',
|
||||||
|
channelid: '',
|
||||||
|
accesstoken: '',
|
||||||
|
src: '',
|
||||||
|
url:'',
|
||||||
|
imgUrl:'',
|
||||||
|
player: null,
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// console.log(options,'00');
|
||||||
|
// this.cameraSerialNumber = options.cameraSerialNumber;
|
||||||
|
// this.cameraChannelNumber = options.cameraChannelNumber
|
||||||
|
// this.getVideoData(this.cameraSerialNumber, this.cameraChannelNumber)
|
||||||
|
|
||||||
|
var router = this.$route.query
|
||||||
|
if (router.token && router.userid) {
|
||||||
|
localStorage.setItem('token', router.token)
|
||||||
|
|
||||||
|
this.cameraid = router.cameraSerialNumber;
|
||||||
|
this.channelid = router.cameraChannelNumber
|
||||||
|
this.getVideoData(cameraid, channelid)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
const that = this;
|
||||||
|
// 销毁播放器
|
||||||
|
if (this.player) {
|
||||||
|
// this.player.dispose();
|
||||||
|
this.player.stop()
|
||||||
|
this.player.destroy()
|
||||||
|
this.player = null
|
||||||
|
}
|
||||||
|
clearInterval(this.statusInterval) && this.statusInterval
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
// 获取摄像头得地址
|
||||||
|
getVideoData(cameraid, channelid) {
|
||||||
|
var data2 = {
|
||||||
|
cameraid: cameraid,
|
||||||
|
channelid: channelid
|
||||||
|
}
|
||||||
|
|
||||||
|
this.api.getGethls(data2).then(res => {
|
||||||
|
// console.log(res.data, 11);
|
||||||
|
if (res.data.code == 200) {
|
||||||
|
this.url = res.data.data.ezopen
|
||||||
|
this.imgUrl=''
|
||||||
|
this.createVideoNew(res.data.data.accesstoken)
|
||||||
|
} else {
|
||||||
|
this.imgUrl=require('../assets/wx/videoLive.png')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
createVideoNew(accessToken) {
|
||||||
|
// divW和divH是获取了父级宽高 使播放容器能铺满div
|
||||||
|
let divW = this.$refs.videoPlayer.clientWidth
|
||||||
|
let divH = this.$refs.videoPlayer.clientHeight
|
||||||
|
this.player = new EZUIKit.EZUIKitPlayer({
|
||||||
|
id: 'video-js', // 视频容器ID
|
||||||
|
accessToken: accessToken,
|
||||||
|
url: this.url,
|
||||||
|
// 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
|
||||||
|
// 播放主题 simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
|
||||||
|
template: 'security',
|
||||||
|
useHardDev: true,// 开启高性能模式 依赖需高于7.7.x 截止到2023.11.7 建议保持最新版本为7.7.6
|
||||||
|
// plugin: ["talk"], // 加载插件，talk-对讲 非必填
|
||||||
|
width: divW, // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px
|
||||||
|
height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
|
||||||
|
})
|
||||||
|
window.onresize = () => {
|
||||||
|
this.player.reSize(
|
||||||
|
this.$refs.videoPlayer.clientWidth,
|
||||||
|
this.$refs.videoPlayer.clientHeight
|
||||||
|
);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
touchstart(num) {
|
||||||
|
const that = this
|
||||||
|
if (num == 2) {
|
||||||
|
this.directionFlag = 0;
|
||||||
|
} else if (num == 3) {
|
||||||
|
this.directionFlag = 1;
|
||||||
|
} else if (num == 0) {
|
||||||
|
this.directionFlag = 2;
|
||||||
|
} else if (num == 1) {
|
||||||
|
this.directionFlag = 3;
|
||||||
|
} else if (num == 10) {
|
||||||
|
this.flag1 = true;
|
||||||
|
} else if (num == 11) {
|
||||||
|
this.flag1 = false;
|
||||||
|
} else if (num == 8) {
|
||||||
|
this.flag2 = true;
|
||||||
|
} else if (num == 9) {
|
||||||
|
this.flag2 = false;
|
||||||
|
}
|
||||||
|
// let that = this;
|
||||||
|
// uni.request({
|
||||||
|
// url: 'https://open.ys7.com/api/lapp/device/ptz/start',
|
||||||
|
// method: 'POST',
|
||||||
|
// data:{
|
||||||
|
// accessToken: that.accesstoken,
|
||||||
|
// deviceSerial: that.cameraSerialNumber,
|
||||||
|
// channelNo: that.cameraChannelNumber,
|
||||||
|
// direction:num,
|
||||||
|
// speed: 1,
|
||||||
|
// },
|
||||||
|
// header: {
|
||||||
|
// 'Content-Type': 'application/x-www-form-urlencoded',
|
||||||
|
// },
|
||||||
|
// success: (res) => {
|
||||||
|
// // console.log(res);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
this.api.cameraStart(this.cameraid, this.channelid, num).then(res => {
|
||||||
|
setTimeout(() => {
|
||||||
|
that.touchend(num)
|
||||||
|
}, 10000);
|
||||||
|
})
|
||||||
|
// this.$http({
|
||||||
|
// url: this.api.camera_start + '?cameraid=' + this.cameraSerialNumber + '&channelid=' + this.cameraChannelNumber + '&direction=' + num,
|
||||||
|
// method: 'POST',
|
||||||
|
// }).then(res=>{
|
||||||
|
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
|
||||||
|
touchend(num) {
|
||||||
|
this.directionFlag = 5
|
||||||
|
// let that = this;
|
||||||
|
// uni.request({
|
||||||
|
// url:'https://open.ys7.com/api/lapp/device/ptz/stop',
|
||||||
|
// method: 'POST',
|
||||||
|
// data:{
|
||||||
|
// accessToken: that.accesstoken,
|
||||||
|
// deviceSerial: that.cameraSerialNumber,
|
||||||
|
// channelNo: that.cameraChannelNumber,
|
||||||
|
// direction:num,
|
||||||
|
// speed: 1,
|
||||||
|
// },
|
||||||
|
// header: {
|
||||||
|
// 'Content-Type': 'application/x-www-form-urlencoded',
|
||||||
|
// },
|
||||||
|
// success: (res) => {
|
||||||
|
// // console.log(res);
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
if (num != -1) {
|
||||||
|
this.api.cameraStop(this.cameraid, this.channelid, num).then(res => {
|
||||||
|
this.nowNum = -1
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// this.$http({
|
||||||
|
// url: this.api.camera_stop + '?cameraid=' + this.cameraSerialNumber + '&channelid=' + this.cameraChannelNumber + '&direction=' + num,
|
||||||
|
// method: 'POST',
|
||||||
|
// }).then(res=>{
|
||||||
|
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.videoLive {
|
||||||
|
width: 7.5rem;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #F5F6FA;
|
||||||
|
|
||||||
|
.center {
|
||||||
|
|
||||||
|
.video_live {
|
||||||
|
width: 7.5rem;
|
||||||
|
height: 9.7rem;
|
||||||
|
|
||||||
|
>img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
>div{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: .61rem 0 0 .4rem;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
width: 3.4rem;
|
||||||
|
height: 3.4rem;
|
||||||
|
position: relative;
|
||||||
|
margin-right: .6rem;
|
||||||
|
|
||||||
|
.left_arrow,
|
||||||
|
.right_arrow {
|
||||||
|
width: .15rem;
|
||||||
|
height: .28rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.up_arrow,
|
||||||
|
.down_arrow {
|
||||||
|
width: .27rem;
|
||||||
|
height: .15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 左箭头
|
||||||
|
.left_arrow_item {
|
||||||
|
width: .51rem;
|
||||||
|
height: .51rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 1.45rem;
|
||||||
|
left: .29rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left_arrow_item_act {
|
||||||
|
width: .51rem;
|
||||||
|
height: .51rem;
|
||||||
|
background: #24B383;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 1.45rem;
|
||||||
|
left: .29rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left_arrow_item::after {
|
||||||
|
content: '';
|
||||||
|
width: .15rem;
|
||||||
|
height: .28rem;
|
||||||
|
background: url('../assets/wx/left_arrow.png') center no-repeat;
|
||||||
|
background-size: .15rem .28rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.left_arrow_item_act::after {
|
||||||
|
content: '';
|
||||||
|
width: .15rem;
|
||||||
|
height: .28rem;
|
||||||
|
background: url('../assets/wx/left_arrow_act.png') center no-repeat;
|
||||||
|
background-size: .15rem .28rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 右箭头
|
||||||
|
.right_arrow_item {
|
||||||
|
width: .51rem;
|
||||||
|
height: .51rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 1.45rem;
|
||||||
|
right: .29rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right_arrow_item_act {
|
||||||
|
width: .51rem;
|
||||||
|
height: .51rem;
|
||||||
|
background: #24B383;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 1.45rem;
|
||||||
|
right: .29rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right_arrow_item::after {
|
||||||
|
content: '';
|
||||||
|
width: .15rem;
|
||||||
|
height: .28rem;
|
||||||
|
background: url('../assets/wx/right_arrow.png') center no-repeat;
|
||||||
|
background-size: .15rem .28rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.right_arrow_item_act::after {
|
||||||
|
content: '';
|
||||||
|
width: .15rem;
|
||||||
|
height: .28rem;
|
||||||
|
background: url('../assets/wx/right_arrow_act.png') center no-repeat;
|
||||||
|
background-size: .15rem .28rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 上箭头
|
||||||
|
.up_arrow_item {
|
||||||
|
width: .51rem;
|
||||||
|
height: .51rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
top: .29rem;
|
||||||
|
left: 1.46rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.up_arrow_item_act {
|
||||||
|
width: .51rem;
|
||||||
|
height: .51rem;
|
||||||
|
background: #24B383;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
top: .29rem;
|
||||||
|
left: 1.46rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.up_arrow_item::after {
|
||||||
|
content: '';
|
||||||
|
width: .27rem;
|
||||||
|
height: .15rem;
|
||||||
|
background: url('../assets/wx/up_arrow.png') center no-repeat;
|
||||||
|
background-size: .27rem .15rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.up_arrow_item_act::after {
|
||||||
|
content: '';
|
||||||
|
width: .27rem;
|
||||||
|
height: .15rem;
|
||||||
|
background: url('../assets/wx/up_arrow_act.png') center no-repeat;
|
||||||
|
background-size: .27rem .15rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下箭头
|
||||||
|
.down_arrow_item {
|
||||||
|
width: .51rem;
|
||||||
|
height: .51rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
bottom: .28rem;
|
||||||
|
left: 1.46rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.down_arrow_item_act {
|
||||||
|
width: .51rem;
|
||||||
|
height: .51rem;
|
||||||
|
background: #24B383;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
bottom: .28rem;
|
||||||
|
left: 1.46rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.down_arrow_item::after {
|
||||||
|
content: '';
|
||||||
|
width: .27rem;
|
||||||
|
height: .15rem;
|
||||||
|
background: url('../assets/wx/down_arrow.png') center no-repeat;
|
||||||
|
background-size: .27rem .15rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.down_arrow_item_act::after {
|
||||||
|
content: '';
|
||||||
|
width: .27rem;
|
||||||
|
height: .15rem;
|
||||||
|
background: url('../assets/wx/down_arrow_act.png') center no-repeat;
|
||||||
|
background-size: .27rem .15rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
>img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: .1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.right_item {
|
||||||
|
width: 2.4rem;
|
||||||
|
height: .8rem;
|
||||||
|
background: #EFFAF6;
|
||||||
|
border: .02rem solid rgba(36, 179, 131, 0.35);
|
||||||
|
border-radius: .4rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: .07rem;
|
||||||
|
margin-bottom: .4rem;
|
||||||
|
|
||||||
|
.add {
|
||||||
|
width: .66rem;
|
||||||
|
height: .66rem;
|
||||||
|
background: #EFFAF6;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add_act {
|
||||||
|
width: .66rem;
|
||||||
|
height: .66rem;
|
||||||
|
background: #24B383;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add::after {
|
||||||
|
content: '';
|
||||||
|
width: .38rem;
|
||||||
|
height: .38rem;
|
||||||
|
background: url('../assets/wx/add.png') center no-repeat;
|
||||||
|
background-size: .38rem .38rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.add_act::after {
|
||||||
|
content: '';
|
||||||
|
width: .38rem;
|
||||||
|
height: .38rem;
|
||||||
|
background: url('../assets/wx/add_act.png') center no-repeat;
|
||||||
|
background-size: .38rem .38rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.focus {
|
||||||
|
font-size: .3rem;
|
||||||
|
font-family: PingFang SC;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #24B383;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtract {
|
||||||
|
width: .66rem;
|
||||||
|
height: .66rem;
|
||||||
|
background: #EFFAF6;
|
||||||
|
border: .02rem solid rgba(36, 179, 131, 0.35);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtract_act {
|
||||||
|
width: .66rem;
|
||||||
|
height: .66rem;
|
||||||
|
background: #24B383;
|
||||||
|
border: .02rem solid rgba(36, 179, 131, 0.35);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtract::after {
|
||||||
|
content: '';
|
||||||
|
width: .38rem;
|
||||||
|
height: .08rem;
|
||||||
|
background: url('../assets/wx/subtract.png') center no-repeat;
|
||||||
|
background-size: .38rem .08rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtract_act::after {
|
||||||
|
content: '';
|
||||||
|
width: .38rem;
|
||||||
|
height: .08rem;
|
||||||
|
background: url('../assets/wx/subtract_act.png') center no-repeat;
|
||||||
|
background-size: .38rem .08rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user