zyronon
4 years ago
6 changed files with 865 additions and 312 deletions
@ -0,0 +1,167 @@ |
|||||||
|
<script> |
||||||
|
import bus from "../../utils/bus"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "IndicatorLight", |
||||||
|
props: { |
||||||
|
activeIndex: { |
||||||
|
type: Number, |
||||||
|
default: () => 0 |
||||||
|
}, |
||||||
|
tabStyleWidth: { |
||||||
|
type: String, |
||||||
|
default: () => '' |
||||||
|
}, |
||||||
|
tabTexts: { |
||||||
|
type: Array, |
||||||
|
default: () => [] |
||||||
|
}, |
||||||
|
tabRender: { |
||||||
|
type: Function, |
||||||
|
default: null |
||||||
|
}, |
||||||
|
//用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件 |
||||||
|
name: { |
||||||
|
type: String, |
||||||
|
default: () => '' |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
currentSlideItemIndex: this.activeIndex, |
||||||
|
tabIndicatorRelationActiveIndexLefts: [],//指标和slideItem的index的对应left, |
||||||
|
indicatorSpace: 0,//indicator之间的间距 |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
render() { |
||||||
|
/* |
||||||
|
* <div class="tabs" ref="tabs"> |
||||||
|
<div class="tab" |
||||||
|
style="{width : tabStyleWidth}" |
||||||
|
v-for="(item,index) in tabTexts" |
||||||
|
:class="currentSlideItemIndex === index?'active':''" |
||||||
|
@click="changeIndex(index)"> |
||||||
|
<span>{{ item }}</span></div> |
||||||
|
</div> |
||||||
|
* */ |
||||||
|
return ( |
||||||
|
<div className='indicator-ctn'> |
||||||
|
{this.tabRender ? |
||||||
|
this.tabRender() : |
||||||
|
<div className="tabs" ref="tabs"> |
||||||
|
{ |
||||||
|
this.tabTexts.map((item, index) => { |
||||||
|
return ( |
||||||
|
<div className={this.currentSlideItemIndex === index ? 'active tab' : 'tab'} |
||||||
|
style={{width: this.tabStyleWidth || 100 / this.tabTexts.length + '%'}} |
||||||
|
onClick={e => this.changeIndex(index)} |
||||||
|
> |
||||||
|
< span> {item}</span> |
||||||
|
</div> |
||||||
|
) |
||||||
|
}) |
||||||
|
} |
||||||
|
</div> |
||||||
|
} |
||||||
|
<div className="indicator" ref="indicator"/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initTabs() |
||||||
|
bus.on(this.name + '-moved', this.move) |
||||||
|
bus.on(this.name + '-end', this.end) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
changeIndex(index) { |
||||||
|
this.currentSlideItemIndex = index |
||||||
|
this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex) |
||||||
|
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`) |
||||||
|
this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px') |
||||||
|
}, |
||||||
|
initTabs() { |
||||||
|
let tabs = this.$refs.tabs |
||||||
|
this.indicatorRef = this.$refs.indicator |
||||||
|
let indicatorWidth = this.$getCss(this.indicatorRef, 'width') |
||||||
|
for (let i = 0; i < tabs.children.length; i++) { |
||||||
|
let item = tabs.children[i] |
||||||
|
this.tabWidth = this.$getCss(item, 'width') |
||||||
|
this.tabIndicatorRelationActiveIndexLefts.push( |
||||||
|
item.getBoundingClientRect().x - tabs.children[0].getBoundingClientRect().x + (this.tabWidth * 0.5 - indicatorWidth / 2)) |
||||||
|
} |
||||||
|
|
||||||
|
this.indicatorSpace = this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0] |
||||||
|
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`) |
||||||
|
this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px') |
||||||
|
}, |
||||||
|
move(e) { |
||||||
|
this.$setCss(this.indicatorRef, 'left', |
||||||
|
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] - |
||||||
|
e.x.distance / (this.$store.state.bodyWidth / this.indicatorSpace) + 'px') |
||||||
|
}, |
||||||
|
end(index) { |
||||||
|
// console.log(index) |
||||||
|
this.currentSlideItemIndex = index |
||||||
|
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`) |
||||||
|
this.$setCss(this.indicatorRef, 'left', |
||||||
|
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px') |
||||||
|
setTimeout(() => { |
||||||
|
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`) |
||||||
|
}, 300) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="less"> |
||||||
|
@import "../../assets/less/index"; |
||||||
|
|
||||||
|
.indicator-ctn { |
||||||
|
font-size: 1.4rem; |
||||||
|
width: 100%; |
||||||
|
height: @indicator-height; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
z-index: 1; |
||||||
|
|
||||||
|
.tabs { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
font-weight: bold; |
||||||
|
|
||||||
|
.tab { |
||||||
|
height: 4.5rem; |
||||||
|
width: 45%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
color: @second-text-color; |
||||||
|
transition: color .3s; |
||||||
|
|
||||||
|
&.active { |
||||||
|
color: white; |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
margin-left: .5rem; |
||||||
|
@width: 1.2rem; |
||||||
|
width: @width; |
||||||
|
height: @width; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.indicator { |
||||||
|
height: 3px; |
||||||
|
width: 2.5rem; |
||||||
|
background: #fff; |
||||||
|
border-radius: 5px; |
||||||
|
position: relative; |
||||||
|
transition: all .3s; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,432 @@ |
|||||||
|
<template> |
||||||
|
<div class="SlideItemMusic"> |
||||||
|
<div v-show="!isFullLyrics"> |
||||||
|
<div class="cover"> |
||||||
|
<img v-lazy="$imgPreview(currentMusic.cover)" alt=""> |
||||||
|
</div> |
||||||
|
<div class="lyrics-wrapper" ref="lyrics-wrapper" @click="isFullLyrics = true"> |
||||||
|
<div class="container"> |
||||||
|
<div class="lyrics" v-for="item in lyricsFullTexts">{{ item.c }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- <div class="lyrics-mask" @click="isFullLyrics = true"></div>--> |
||||||
|
</div> |
||||||
|
<div class="lyrics-full" v-show="isFullLyrics" @click="isFullLyrics = false"> |
||||||
|
<div class="list" style="overflow:auto;"> |
||||||
|
<div class="item" v-for="item in lyricsFullTexts">{{ item.c }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="bottom"> |
||||||
|
<div class="desc"> |
||||||
|
<div class="left"> |
||||||
|
<div class="name">{{ currentMusic.name }}</div> |
||||||
|
<div class="author">{{ currentMusic.author }}</div> |
||||||
|
</div> |
||||||
|
<div class="right"> |
||||||
|
<div class="btn"> |
||||||
|
<img src="@/assets/img/icon/star-white.png" v-show="!isCollect" @click="isCollect = !isCollect"> |
||||||
|
<img src="@/assets/img/icon/star-yellow.png" v-show="isCollect" @click="isCollect = !isCollect"> |
||||||
|
<span>收藏</span> |
||||||
|
</div> |
||||||
|
<div class="btn"> |
||||||
|
<img src="@/assets/img/icon/share-white-full.png" alt=""> |
||||||
|
<span>分享</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="progress"> |
||||||
|
<div class="start">{{ $durationTime(currentTime) }}</div> |
||||||
|
<div class="bar"> |
||||||
|
<div class="slide-bar" |
||||||
|
ref="slideBar" |
||||||
|
@touchstart="start" |
||||||
|
@touchmove="move" |
||||||
|
@touchend="end"></div> |
||||||
|
<div class="bar-line" :style="durationStyle(1)"></div> |
||||||
|
<div class="bar-point" :style="durationStyle(2)"></div> |
||||||
|
</div> |
||||||
|
<div class="end">{{ $durationTime(duration) }}</div> |
||||||
|
</div> |
||||||
|
<div class="options"> |
||||||
|
<img v-show="isLoop" src="@/assets/img/icon/me/loop.png" @click="isLoop = !isLoop"> |
||||||
|
<img v-show="!isLoop" src="@/assets/img/icon/me/play-normal.png" @click="isLoop = !isLoop"> |
||||||
|
<div class="center"> |
||||||
|
<img src="@/assets/img/icon/me/previous.png" @click="t"> |
||||||
|
<!-- <img v-show="isPlay" class="control" src="@/assets/img/icon/me/pause.png" @click="togglePlay">--> |
||||||
|
<!-- <img v-show="!isPlay" class="control" src="@/assets/img/icon/me/play.png" @click="togglePlay">--> |
||||||
|
<img v-show="currentMusic.is_play" class="control" src="@/assets/img/icon/me/pause.png" |
||||||
|
@click="togglePlay()"> |
||||||
|
<img v-show="!currentMusic.is_play" class="control" src="@/assets/img/icon/me/play.png" |
||||||
|
@click="togglePlay()"> |
||||||
|
<img src="@/assets/img/icon/me/next.png"> |
||||||
|
</div> |
||||||
|
<img src="@/assets/img/icon/me/music-list.png"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import {nextTick} from "_vue@3.2.4@vue"; |
||||||
|
import globalMethods from "../../../utils/global-methods"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "SlideItemMusic", |
||||||
|
components: {}, |
||||||
|
props: { |
||||||
|
modelValue: false |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
slideIndex: 1, |
||||||
|
currentMusic: { |
||||||
|
name: '告白气球', |
||||||
|
mp3: 'https://mp32.9ku.com/upload/128/2017/02/05/858423.mp3', |
||||||
|
cover: require('../../../assets/img/music-cover/7.png'), |
||||||
|
author: '周杰伦', |
||||||
|
duration: 60, |
||||||
|
use_count: 37441000, |
||||||
|
is_collect: false, |
||||||
|
is_play: false, |
||||||
|
}, |
||||||
|
collectMusic: [], |
||||||
|
recommendMusic: [], |
||||||
|
guessMusic: [], |
||||||
|
lyricsTexts: [], |
||||||
|
lyricsFullTexts: [], |
||||||
|
isShowCollectDialog: false, |
||||||
|
isPlay: false, |
||||||
|
isAutoPlay: true, |
||||||
|
isLoop: false, |
||||||
|
isMove: false, |
||||||
|
isCollect: false, |
||||||
|
isFullLyrics: false, |
||||||
|
lastPageX: 0, |
||||||
|
pageX: 0, |
||||||
|
audio: new Audio(), |
||||||
|
duration: 0, |
||||||
|
currentTime: 0, |
||||||
|
step: 0, |
||||||
|
startX: 0, |
||||||
|
slideBarWidth: 0 |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
created() { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
playMusic(item) { |
||||||
|
this.collectMusic.map(v => v.is_play = false) |
||||||
|
this.recommendMusic.map(v => v.is_play = false) |
||||||
|
item.is_play = true |
||||||
|
this.currentMusic = item |
||||||
|
this.audio.src = this.currentMusic.mp3 |
||||||
|
this.togglePlay(true) |
||||||
|
}, |
||||||
|
togglePlay(state) { |
||||||
|
this.currentMusic.is_play = state || !this.currentMusic.is_play |
||||||
|
if (this.currentMusic.is_play) { |
||||||
|
this.audio.play() |
||||||
|
} else { |
||||||
|
this.audio.pause() |
||||||
|
} |
||||||
|
}, |
||||||
|
async getCollectMusic() { |
||||||
|
this.loading = true |
||||||
|
let res = await this.$api.videos.collect() |
||||||
|
this.loading = false |
||||||
|
if (res.code === this.SUCCESS) { |
||||||
|
this.collectMusic = res.data.music.list.slice(0, 2) |
||||||
|
this.guessMusic = this.recommendMusic = res.data.music.list.slice(2, -1) |
||||||
|
} |
||||||
|
}, |
||||||
|
createLrcObj(lrc) { |
||||||
|
let oLRC = { |
||||||
|
ti: "", //歌曲名 |
||||||
|
ar: "", //演唱者 |
||||||
|
al: "", //专辑名 |
||||||
|
by: "", //歌词制作人 |
||||||
|
offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置 |
||||||
|
ms: [] //歌词数组{t:时间,c:歌词} |
||||||
|
}; |
||||||
|
if (lrc.length === 0) return; |
||||||
|
let lrcs = lrc.split('\n');//用回车拆分成数组 |
||||||
|
for (let i in lrcs) {//遍历歌词数组 |
||||||
|
lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前后空格 |
||||||
|
let t = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]"));//取[]间的内容 |
||||||
|
let s = t.split(":");//分离:前后文字 |
||||||
|
if (isNaN(parseInt(s[0]))) { //不是数值 |
||||||
|
for (let i in oLRC) { |
||||||
|
if (i != "ms" && i == s[0].toLowerCase()) { |
||||||
|
oLRC[i] = s[1]; |
||||||
|
} |
||||||
|
} |
||||||
|
} else { //是数值 |
||||||
|
let arr = lrcs[i].match(/\[(\d+:.+?)\]/g);//提取时间字段，可能有多个 |
||||||
|
let start = 0; |
||||||
|
for (let k in arr) { |
||||||
|
start += arr[k].length; //计算歌词位置 |
||||||
|
} |
||||||
|
let content = lrcs[i].substring(start);//获取歌词内容 |
||||||
|
for (let k in arr) { |
||||||
|
let t = arr[k].substring(1, arr[k].length - 1);//取[]间的内容 |
||||||
|
let s = t.split(":");//分离:前后文字 |
||||||
|
oLRC.ms.push({//对象{t:时间,c:歌词}加入ms数组 |
||||||
|
t: (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3), |
||||||
|
c: content |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
oLRC.ms.sort(function (a, b) {//按时间顺序排序 |
||||||
|
return a.t - b.t; |
||||||
|
}); |
||||||
|
return oLRC |
||||||
|
/* |
||||||
|
for(let i in oLRC){ //查看解析结果 |
||||||
|
console.log(i,":",oLRC[i]); |
||||||
|
}*/ |
||||||
|
}, |
||||||
|
t(txt) { |
||||||
|
// if (this.test.length === 2) return |
||||||
|
this.lyricsTexts.push(txt) |
||||||
|
nextTick(() => { |
||||||
|
let comments = this.$refs['lyrics-wrapper'] |
||||||
|
comments.scrollTo({top: comments.scrollHeight - comments.clientHeight, behavior: 'smooth'}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
start(e) { |
||||||
|
this.startX = e.touches[0].pageX |
||||||
|
}, |
||||||
|
move(e) { |
||||||
|
this.isMove = true |
||||||
|
this.pageX = this.lastPageX + (e.touches[0].pageX - this.startX) |
||||||
|
if (this.pageX < 0) this.pageX = 0 |
||||||
|
if (this.pageX > this.slideBarWidth) this.pageX = this.slideBarWidth - 5 |
||||||
|
this.currentTime = Math.ceil(this.pageX / this.step) |
||||||
|
globalMethods.$stopPropagation(e) |
||||||
|
}, |
||||||
|
end(e) { |
||||||
|
this.lastPageX = this.pageX |
||||||
|
this.currentTime = Math.ceil(this.pageX / this.step) |
||||||
|
this.audio.currentTime = this.currentTime |
||||||
|
this.audio.play() |
||||||
|
this.isMove = false |
||||||
|
globalMethods.$stopPropagation(e) |
||||||
|
}, |
||||||
|
$durationTime(time) { |
||||||
|
if (time === 0) return '00:00' |
||||||
|
else { |
||||||
|
return this.$duration(time) |
||||||
|
} |
||||||
|
}, |
||||||
|
durationStyle(type) { |
||||||
|
// return {} |
||||||
|
if (type === 1) { |
||||||
|
return {width: this.pageX + 'px'} |
||||||
|
} |
||||||
|
return {left: this.pageX + 'px'} |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="less"> |
||||||
|
@import "@/assets/less/index.less"; |
||||||
|
|
||||||
|
.SlideItemMusic { |
||||||
|
color: white; |
||||||
|
font-size: 1.4rem; |
||||||
|
min-width: 100vw; |
||||||
|
min-height: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
position: relative; |
||||||
|
background: linear-gradient(to bottom right, rgba(136, 132, 133, 1), rgba(136, 132, 133, .7)); |
||||||
|
|
||||||
|
|
||||||
|
.cover { |
||||||
|
margin-top: 8rem; |
||||||
|
width: 80vw; |
||||||
|
height: 80vw; |
||||||
|
|
||||||
|
img { |
||||||
|
border-radius: 2.5rem; |
||||||
|
object-fit: cover; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.lyrics-wrapper { |
||||||
|
margin-top: 3rem; |
||||||
|
overflow: auto; |
||||||
|
height: 8rem; |
||||||
|
|
||||||
|
.container { |
||||||
|
min-height: 8rem; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: flex-end; |
||||||
|
} |
||||||
|
|
||||||
|
.lyrics { |
||||||
|
height: 4rem; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.lyrics-mask { |
||||||
|
top: calc(80vw + 7rem); |
||||||
|
height: 8rem; |
||||||
|
width: 100vw; |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
|
||||||
|
.lyrics-full { |
||||||
|
width: 100vw; |
||||||
|
height: 60vh; |
||||||
|
display: flex; |
||||||
|
//align-items: center; |
||||||
|
justify-content: center; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.list { |
||||||
|
.item { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
height: 4rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.bottom { |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
width: 100vw; |
||||||
|
|
||||||
|
.desc { |
||||||
|
width: 100vw; |
||||||
|
padding: @padding-page; |
||||||
|
box-sizing: border-box; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: flex-end; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 3.5rem; |
||||||
|
} |
||||||
|
|
||||||
|
.left { |
||||||
|
.name { |
||||||
|
font-size: 1.8rem; |
||||||
|
margin-bottom: .4rem; |
||||||
|
} |
||||||
|
|
||||||
|
.author { |
||||||
|
font-size: 1.4rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.right { |
||||||
|
.btn { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
margin-top: 2rem; |
||||||
|
font-size: 1.2rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.progress { |
||||||
|
width: 100vw; |
||||||
|
font-size: 1.2rem; |
||||||
|
padding: 0 @padding-page; |
||||||
|
box-sizing: border-box; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
color: gainsboro; |
||||||
|
|
||||||
|
.bar { |
||||||
|
margin: 0 .6rem; |
||||||
|
flex: 1; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.slide-bar { |
||||||
|
position: absolute; |
||||||
|
height: 2rem; |
||||||
|
width: 100%; |
||||||
|
top: -1rem; |
||||||
|
z-index: 11; |
||||||
|
} |
||||||
|
|
||||||
|
&:before { |
||||||
|
z-index: 9; |
||||||
|
content: ' '; |
||||||
|
height: 1.5px; |
||||||
|
width: 100%; |
||||||
|
background: gray; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.bar-line { |
||||||
|
z-index: 10; |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
height: 1.5px; |
||||||
|
width: 50vw; |
||||||
|
background: white; |
||||||
|
} |
||||||
|
|
||||||
|
.bar-point { |
||||||
|
z-index: 10; |
||||||
|
position: absolute; |
||||||
|
left: 50vw; |
||||||
|
top: -3px; |
||||||
|
height: .8rem; |
||||||
|
width: .8rem; |
||||||
|
border-radius: 50%; |
||||||
|
background: white; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.options { |
||||||
|
width: 100vw; |
||||||
|
padding: @padding-page; |
||||||
|
box-sizing: border-box; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 3.8rem; |
||||||
|
height: 3.8rem; |
||||||
|
} |
||||||
|
|
||||||
|
.center { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
img { |
||||||
|
margin: 0 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
.control { |
||||||
|
width: 5.5rem; |
||||||
|
height: 5.5rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
Loading…
Reference in new issue