@ -38,7 +38,7 @@
< div class = "my-buttons " >
< div class = "collect" @click ="$nav('/edit-userinfo')" >
< span class = "mr1r" > 编辑资料 < / span >
< span class = "f10p" style = "color: darkgray" > 85 % < / span >
<!-- < span class = "f10p" style = "color: darkgray" > 85 % < / span > -- >
< / div >
< div class = "add-friend" @click ="$nav('/find-acquaintance')" >
< img src = "../../assets/img/icon/add-white.png" alt = "" >
@ -53,8 +53,29 @@
< span > 抖音号 ： 605128307 < / span >
< img src = "../../assets/img/icon/me/qrcode-gray.png" alt = "" @click.stop ="$nav('/my-card')" >
< / div >
< div class = "signature f12 mb1r" >
< span > 填写个性签名更容易获得别人关注哦 < / span >
< div class = "signature" @click ="$nav('/edit-userinfo-item',{type:3})" >
< template v-if ="!userinfo.desc" >
< template v-if ="false" >
<!-- 有个版本是这样子的 ， 应该是灰度测试 -- >
< span > 点击添加介绍 ， 让大家认识你 ... < / span >
< img src = "../../assets/img/icon/me/write-gray.png" alt = "" >
< / template >
< span > 你还没有填写个人简介 ， 点击添加 ... < / span >
< / template >
< span v -else class = "text" > { { userinfo . desc } } < / span >
< / div >
< div class = "more" >
< div class = "age item" v-if ="userinfo.birthday" >
< img v-if ="userinfo.sex === '女'" src="../../assets/img/icon/me/woman.png" alt="" >
< img v-if ="userinfo.sex === '男'" src="../../assets/img/icon/me/man.png" alt="" >
< span > { { filterAge ( userinfo . birthday ) } } 岁 < / span >
< / div >
< div class = "item" v-if ="userinfo.location" >
{ { userinfo . location } }
< / div >
< div class = "item" v-if ="userinfo.school.name" >
{ { userinfo . school . name } }
< / div >
< / div >
< div class = "heat" >
< div class = "text" > < span class = "num" > 8 < / span > 获赞 < / div >
@ -62,6 +83,22 @@
< div class = "text" > < span class = "num" > 8 < / span > 粉丝 < / div >
< / div >
< / div >
< div class = "other" >
< div class = "item" >
< img src = "../../assets/img/icon/me/shopping-cart-white.png" alt = "" >
< div class = "right" >
< div class = "top" > 抖音商城 < / div >
< div class = "bottom" > 发现超值好物 < / div >
< / div >
< / div >
< div class = "item" >
< img src = "../../assets/img/icon/me/music-white.png" alt = "" >
< div class = "right" >
< div class = "top" > 我的音乐 < / div >
< div class = "bottom" > 已收藏20首 < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< Indicator
@ -165,6 +202,9 @@
< / SlideRowList >
< / div >
< Footer v -bind :init-tab ="5" / >
< transition name = "fade" >
< div class = "mask" v-if ="baseActiveIndex === 1" @click="baseActiveIndex = 0" > < / div >
< / transition >
< / SlideItem >
< SlideItem style = "min-width: 70vw; overflow:auto;" >
< transition name = "fade1" >
@ -274,6 +314,7 @@ import Posters from '../../components/Posters'
import Footer from "../../components/Footer" ;
import Indicator from '../../components/Indicator'
import { nextTick } from 'vue'
import { mapState } from "vuex" ;
export default {
name : "Me" ,
@ -282,7 +323,6 @@ export default {
return {
contentIndex : 0 ,
baseActiveIndex : 0 ,
desc : null ,
tabContents : [ ] ,
indicatorFixed : false ,
floatFixed : false ,
@ -293,8 +333,8 @@ export default {
header : null ,
headerHeight : 0 ,
descHeight : 0 ,
videoSlide RowList Height: 0 ,
defaultVideoSlideRowList Height: 0
videoSlide Height: 0 ,
maxSlide Height: 0
} ,
videoItemHeight : 0 ,
startLocationY : 0 ,
@ -328,7 +368,7 @@ export default {
} ,
} ,
pageSize : 15 ,
slideRowList Height: 0 ,
initSlide Height: 0 ,
loadings : {
loading0 : false ,
loading1 : false ,
@ -345,8 +385,11 @@ export default {
return this . $store . state . bodyWidth
} ,
videoSlideRowListStyle ( ) {
return { height : this . refs . videoSlideRowListHeight !== 0 ? this . refs . videoSlideRowListHeight + 'px' : 'calc(100vh - 14.6rem)' }
}
return { height : this . refs . videoSlideHeight !== 0 ? this . refs . videoSlideHeight + 'px' : 'calc(100vh - 14.6rem)' }
} ,
... mapState ( {
userinfo : 'userinfo' ,
} )
} ,
watch : {
contentIndex ( newVal , oldVal ) {
@ -354,18 +397,24 @@ export default {
} ,
} ,
mounted ( ) {
this . slideRowListHeight = this . bodyHeight - 50 - 352 - 50
setTimeout ( ( ) => {
this . refs . header = this . $refs . header
this . refs . headerHeight = this . $refs . header . offsetHeight
this . refs . descHeight = this . $refs . desc . offsetHeight
this . refs . defaultVideoSlideRowListHeight = this . $refs . videoSlideRowList . wrapperHeight
this . refs . maxSlideHeight = this . $refs . videoSlideRowList . wrapperHeight
this . initSlideHeight = this . bodyHeight - 50 - this . refs . descHeight - 50
this . changeIndex ( 0 , null )
} )
this . videoItemHeight = this . bodyWidth / 3 * 1.2 + 2
/ / c o n s o l e . l o g ( ' v i d e o I t e m H e i g h t ' , t h i s . v i d e o I t e m H e i g h t )
} ,
methods : {
click ( e ) {
if ( this . baseActiveIndex === 0 ) return
if ( this . baseActiveIndex === 1 ) {
this . baseActiveIndex = 0
this . $stopPropagation ( e )
}
} ,
async getScrollAreaHeight ( index = this . contentIndex ) {
let scrollAreaHeight = 0
if ( index === 3 ) {
@ -386,6 +435,7 @@ export default {
break
}
}
/ / c o n s o l e . l o g ( ' s c r o l l A r e a H e i g h t ' , s c r o l l A r e a H e i g h t )
return scrollAreaHeight
} ,
async changeIndex ( newVal , oldVal ) {
@ -394,7 +444,7 @@ export default {
if ( newVal === 3 ) {
if ( videoOb . video . total === - 1 ) {
this . loadings [ 'loading' + newVal ] = true
let res = await this . $api . videos . collect ( { pageNo : this . videos . my . pageNo , pageSize : this . pageSize , } )
let res = await this . $api . videos . collect ( { pageNo : this . videos . collect . pageNo , pageSize : this . pageSize , } )
this . loadings [ 'loading' + newVal ] = false
if ( res . code === this . SUCCESS _CODE ) this . videos . collect = res . data
}
@ -408,11 +458,11 @@ export default {
if ( res . code === this . SUCCESS _CODE ) this . videos . my = res . data
break
case 1 :
res = await this . $api . videos . private ( { pageNo : this . videos . my . pageNo , pageSize : this . pageSize , } )
res = await this . $api . videos . private ( { pageNo : this . videos . private . pageNo , pageSize : this . pageSize , } )
if ( res . code === this . SUCCESS _CODE ) this . videos . private = res . data
break
case 2 :
res = await this . $api . videos . like ( { pageNo : this . videos . my . pageNo , pageSize : this . pageSize , } )
res = await this . $api . videos . like ( { pageNo : this . videos . like . pageNo , pageSize : this . pageSize , } )
if ( res . code === this . SUCCESS _CODE ) this . videos . like = res . data
break
}
@ -421,28 +471,30 @@ export default {
}
let scrollAreaHeight = await this . getScrollAreaHeight ( newVal )
/ / d e b u g g e r
if ( oldVal !== null ) {
let transformY = this . getTransform ( this . $refs . scroll )
/ / c o n s o l e . l o g ( ' t r a n s f o r m Y ' , t r a n s f o r m Y )
let screenSlideRowListHeight = this . slideRowListHeight + Math . abs ( transformY )
/ / c o n s o l e . l o g ( ' s l i d e R o w L i s t H e i g h t ' , s l i d e R o w L i s t H e i g h t )
let screenSlideHeight = this . initSlideHeight + Math . abs ( transformY )
/ / c o n s o l e . l o g ( ' s c r e e n S l i d e H e i g h t ' , s c r e e n S l i d e H e i g h t )
/ / c o n s o l e . l o g ( ' s c r o l l A r e a H e i g h t ' , s c r o l l A r e a H e i g h t )
/ / d e b u g g e r
if ( scrollAreaHeight < screenSlideRowListHeight ) {
this . refs . videoSlideRowListHeight = screenSlideRowListHeight
}
if ( scrollAreaHeight > screenSlideRowListHeight ) {
this . refs . videoSlideRowListHeight = scrollAreaHeight
}
if ( scrollAreaHeight > this . refs . defaultVideoSlideRowListHeight ) {
this . refs . videoSlideRowListHeight = this . refs . defaultVideoSlideRowListHeight
if ( this . indicatorFixed ) {
this . refs . videoSlideHeight = scrollAreaHeight > screenSlideHeight ? scrollAreaHeight : screenSlideHeight
if ( scrollAreaHeight > this . refs . maxSlideHeight ) {
this . refs . videoSlideHeight = this . refs . maxSlideHeight
}
} else {
this . refs . videoSlideHeight = scrollAreaHeight
if ( scrollAreaHeight > this . refs . maxSlideHeight ) {
this . refs . videoSlideHeight = this . refs . maxSlideHeight
}
}
} else {
if ( scrollAreaHeight < this . refs . defaultVideoSlideRowListHeight ) {
this . refs . videoSlide RowList Height = scrollAreaHeight
if ( scrollAreaHeight < this . refs . maxSlide Height) {
this . refs . videoSlide Height = scrollAreaHeight
} else {
this . refs . videoSlide RowList Height = this . refs . defaultVideoSlideRowList Height
this . refs . videoSlide Height = this . refs . maxSlide Height
}
}
} ,
@ -486,7 +538,7 @@ export default {
let scrollAreaHeight = await this . getScrollAreaHeight ( )
let SlideItems = document . querySelectorAll ( '.SlideItem' )
let SlideItem = SlideItems [ this . contentIndex ]
if ( scrollAreaHeight - this . refs . videoSlide RowList Height < SlideItem . scrollTop + 60 ) {
if ( scrollAreaHeight - this . refs . videoSlide Height < SlideItem . scrollTop + 60 ) {
this . loadMoreData ( )
}
}
@ -513,7 +565,7 @@ export default {
/ / 往 下 划 动
if ( touchMoveDistance > 0 ) {
/ / 如 果 可 滚 动 区 的 高 度 大 于 p o s t e r H e i g h t ， 并 且 移 动 超 过 3 0 ， 就 直 接 滚 到 顶
if ( this . refs . videoSlide RowList Height > scrollAreaHeight && Math . abs ( touchMoveDistance ) > 20 ) {
if ( this . refs . videoSlide Height > scrollAreaHeight && Math . abs ( touchMoveDistance ) > 20 ) {
this . $refs . scroll . style . transition = 'all .2s'
this . $refs . scroll . style . transform = ` translate3d(0,0,0) `
this . indicatorFixed = this . floatShowName = this . floatFixed = this . isScroll = false
@ -539,7 +591,7 @@ export default {
SlideItem . scrollTop = Math . abs ( pageMoveDistance ) - this . refs . descHeight + this . floatHeight
}
if ( scrollAreaHeight - this . refs . videoSlide RowList Height < SlideItem . scrollTop + 60 ) {
if ( scrollAreaHeight - this . refs . videoSlide Height < SlideItem . scrollTop + 60 ) {
this . loadMoreData ( )
}
@ -550,10 +602,11 @@ export default {
this . moveYDistance = - this . refs . descHeight + this . floatHeight
}
} else {
if ( this . slideRowListHeight > this . refs . videoSlideRowListHeight ) return
if ( this . refs . defaultVideoSlideRowListHeight > this . refs . videoSlideRowListHeight ) {
let endTransformY = Math . abs ( canTransformY ) - ( this . refs . defaultVideoSlideRowListHeight - this . refs . videoSlideRowListHeight )
console . log ( 'endTransformY' , endTransformY )
if ( this . initSlideHeight > this . refs . videoSlideHeight ) return
if ( this . refs . maxSlideHeight > this . refs . videoSlideHeight ) {
let endTransformY = Math . abs ( canTransformY ) - ( this . refs . maxSlideHeight - this . refs . videoSlideHeight )
/ / c o n s o l e . l o g ( ' c a n T r a n s f o r m Y ' , c a n T r a n s f o r m Y )
/ / c o n s o l e . l o g ( ' e n d T r a n s f o r m Y ' , e n d T r a n s f o r m Y )
let moveTransformY = Math . abs ( pageMoveDistance ) < Math . abs ( endTransformY ) ? pageMoveDistance : - endTransformY
this . $refs . scroll . style . transform = ` translate3d(0, ${ moveTransformY } px,0) `
this . floatFixed = Math . abs ( moveTransformY ) > 100
@ -577,7 +630,7 @@ export default {
let pageMoveDistance = this . moveYDistance + touchMoveDistance * 1.2
/ / c o n s o l e . l o g ( ' e n d - p a g e M o v e D i s t a n c e ' , p a g e M o v e D i s t a n c e )
let endTransformY = Math . abs ( canTransformY ) - ( this . refs . defaultVideoSlideRowList Height - this . refs . videoSlide RowList Height)
let endTransformY = Math . abs ( canTransformY ) - ( this . refs . maxSlide Height - this . refs . videoSlide Height)
if ( this . indicatorFixed ) {
this . moveYDistance = - canTransformY
this . isScroll = true
@ -590,7 +643,7 @@ export default {
this . floatShowName = this . floatFixed = this . isScroll = false
} else {
if ( this . slideRowList Height > this . refs . videoSlide RowList Height) {
if ( this . initSlide Height > this . refs . videoSlide Height) {
return this . moveYDistance = 0
}
let endTime = Date . now ( )
@ -659,7 +712,7 @@ export default {
} else {
/ / 往 下 划
this . $refs . scroll . style . transition = 'all .3s'
if ( this . refs . defaultVideoSlideRowList Height > this . refs . videoSlide RowList Height) {
if ( this . refs . maxSlide Height > this . refs . videoSlide Height) {
this . $refs . scroll . style . transform = ` translate3d(0, ${ - endTransformY } px,0) `
/ / t h i s . f l o a t S h o w N a m e = t h i s . f l o a t F i x e d = t r u e
this . floatFixed = Math . abs ( endTransformY ) > 100
@ -673,8 +726,8 @@ export default {
}
}
} else {
if ( this . refs . defaultVideoSlideRowList Height > this . refs . videoSlide RowList Height) {
let endTransformY = Math . abs ( canTransformY ) - ( this . refs . defaultVideoSlideRowList Height - this . refs . videoSlide RowList Height)
if ( this . refs . maxSlide Height > this . refs . videoSlide Height) {
let endTransformY = Math . abs ( canTransformY ) - ( this . refs . maxSlide Height - this . refs . videoSlide Height)
this . moveYDistance = - endTransformY
} else {
this . moveYDistance = pageMoveDistance
@ -693,6 +746,10 @@ export default {
/ / 当 前 的 t r a n s f o r m Y
transformY = parseInt ( transformY )
return transformY
} ,
filterAge ( age ) {
let date = new Date ( age )
return new Date ( ) . getFullYear ( ) - date . getFullYear ( )
}
}
}
@ -716,6 +773,17 @@ export default {
background : $main - bg ;
height : 100 % ;
width : 100 % ;
font - size : 1.4 rem ;
. mask {
background : # 0000004 f ;
position : absolute ;
top : 0 ;
left : 0 ;
width : 100 vw ;
height : 100 vh ;
z - index : 3 ;
}
. scroll {
@ -734,11 +802,13 @@ export default {
}
. collect {
padding : .7 rem ;
. video {
background : $active - main - bg ;
border - radius : .5 rem ;
margin : .7 rem ;
padding : 1 rem ;
margin - bottom : .7 rem ;
. top {
display : flex ;
@ -803,7 +873,6 @@ export default {
. audio {
background : $active - main - bg ;
border - radius : .5 rem ;
margin : .7 rem ;
padding : 1 rem ;
. top {
@ -857,7 +926,6 @@ export default {
}
. float {
position : fixed ;
top : 0 ;
@ -916,17 +984,15 @@ export default {
color : white ;
height : 12 rem ;
background - image : url ( '../../assets/img/header-bg.png' ) ;
/ / b a c k g r o u n d - i m a g e : u r l ( ' d a t a : i m a g e / j p e g ; b a s e 6 4 , / 9 j / 4 A A Q S k Z J R g A B A Q A A A Q A B A A D / 2 w C E A A k G B x A Q E B A Q E B A P E B A P E B A P D w 8 Q D w 8 N E A 8 O F R I W F h U R F R U Y H S g g G B o l G x U V I T E h J S k r L i 4 u F x 8 z O D M t N y g t L i s B C g o K D g 0 O G B A Q G C 0 d H R 0 t L S 0 r K y 0 t L S 0 t L S 0 t K y 0 t K y 0 t L S s t L S 0 t L S 0 t L S s t L S s t L S 0 t K y 0 t L S 0 t L S 0 t L i s r N / / A A B E I A K g B L A M B I g A C E Q E D E Q H / x A A b A A A C A w E B A Q A A A A A A A A A A A A A A A w E C B A U G B / / E A D 8 Q A A I B A g M F A w g I B Q Q D A A A A A A A B A g M R B B I h B S I x Q X F R Y b E G E y M y U n K B k R W C k q G i s s H R F E J i c / A k N I P h B z N T / 8 Q A G A E B A Q E B A Q A A A A A A A A A A A A A A A A E C A w T / x A A e E Q E B A Q E A A w E B A Q E A A A A A A A A A A R E C E i E x A 0 F R E / / a A A w D A Q A C E Q M R A D 8 A + Q g U T J T P S 4 m R L p i 4 s t F 6 h D E T A i I R B p i A E w Z c Z o R a J B K C L Z S b F 7 B Y u M a X Y m x e w W G G q W C x e w W G G q W C x e w W L h p e U L D L E N E w 1 S w W L W C x c N V s R Y v Y L D C U m t w + K K I v i v V + K F x Z n P b p L 6 M i W R C L N E X Q R Y s y A a V U i L Y + p w M 5 Y i A u Q y A J u R c L l b h U h c i 4 X C 6 o S i c p K Q Z 1 a B a B M U T B A 1 a J K I X E t Y J q S W W s S k B V E l 7 E q B U q 1 L V d B m Q S t H c 1 w S a u i u d L y h l G 5 Q y B C s p G U d l B x K E u J G U d l C w 0 J y h l H Z S H E B O Q M g 3 K G U a a V l I y j s o Z S r r H j I 7 j 6 o z U u B t 2 g t x 9 U Y s O t P i Y / r p z 8 P Q 1 R 0 K I e l o R d L a I s X Z E 0 D S p r Q z M 2 N G S S A o V L M q w I u Q w I Y U X J K k g M s C Q q n V 5 P Q c i / U s M i i 0 E Q u B a I A S i s i 1 M I Y T E E S V T X G 5 a k g o 9 h a U d T L N L q c S + H l Z 5 e T 4 d S M j J n T v 1 5 d T S V q s F i a E s y T 5 8 H 3 M v Y m s Y X Y i w 2 x G U a F W J y j F E t l G h O U L F q 1 W E F e U k r a 6 v U X Q x d O f q z T f Z e z + Q 1 f G p c S L D s p V x G s l W J s X y h l K M W 0 l 6 N 9 V 4 m T B R v C X U 3 b U X o n 1 j 4 m b Z m s J e + l 8 0 Z v 1 2 4 + D s H x 4 C Z L U f H g F L C Q M O Q E N G O o t W a 2 Z q v E s C W V Z e R R g V Z D J Z D I q C x U s B F W n d d 5 W j W t o y 1 S s k Z J O 5 O r 7 a 5 m x q q Y r k h K r y X M W k a K W F b 4 k + t Z O Y I Y m b 7 z V h 6 9 3 Z 6 F q d J R W i B w T e q L l j F s r V E m x l m p Q V 4 u 6 5 p k 0 M d G T s 9 G X U x t p a M 1 5 T P T 7 T Z S a 5 k q Y W o 2 L Z U O d i r c R r O F 0 t 2 X d L x N e Q y 1 J R t x 8 R 1 L H U 7 b 0 r N a P R k T D M h G Q j + P o + 3 + G X 7 E f S F H 2 / w y / Y S m L 5 B O N q + b p z n 7 K 0 7 3 y X z L / S F H 2 / w y / Y 5 f l B i o T p q M J N 7 2 Z 6 N X t w W v W / w L q 8 8 7 X n K k 3 J u U n d v V t 6 k L u 0 J U S 2 U y 9 T 0 m x 8 e q s c s n 6 R f i X b 1 O i 4 H j q L c W p R 0 a d 0 e j 2 f t Z S j 6 X R r h J J t S / Z l 1 5 + + P 7 G 3 I W V M X 9 J U f a f 2 Z f s S t q U P a f 2 Z F 1 j x Z d t Q t R l 1 j 4 m P Y s b w q e 8 v A 1 7 Y x 1 G d G U Y S b k 3 F p Z Z L g 0 Y t i Y m E I z U n a 8 l b R v S x N d O Z 6 N x M d 5 P t 1 L R 4 D a y U o p r q u g u J Z T q Z V J c y v I u + Y J a F Q p m e s j Q J r r g a R n Z R j G L Z K K s h k s h k a Q A A B m S b G K h p c f T g k T U 4 M n i 3 5 + 8 j G n Z n Q w 8 7 o 5 w / C V L O 3 a T m r 3 z s d F C 6 k 0 t W R U q Z T n 1 q r k z V r n z z p 1 f G S l o t E Z g L 0 a T m 7 I x u u 2 S R 2 d j S c o u / J 6 H V p L V G b A 0 F C K j 8 + p s j E r l 9 a f N K 3 A m F B N a p E 0 n o a a S 0 X Q x p 4 s U a E X m V l o 9 D N G j F V F m i m t b p q 6 6 n U o w 1 n 7 3 6 C c R R 3 1 3 p s S r 4 q 7 T w N N U Z S j C K e 7 Z p J f z I 2 f R t L / 5 w + y h G I l f D 1 I v l l t 0 z L Q 7 n m z N u L 4 P P b M w N N 0 0 3 C L e a a u 4 p v 1 2 Y 9 q b N U v P x h B X j S h K M U v 5 l K + n y s d / Y 9 L 0 X 1 6 n 5 2 c b a u 3 a W H x F R Z X U l k h B q O 6 o y W u r + K L O i c V 4 + d K U c r a t m V 1 3 o 0 4 L B T q X U Y 3 s r t 8 k u / w C R X a e 1 Z V n p C N O K b k o x u 9 X x d 3 + l g 2 Z t e p Q c r K M l O O W S d 1 p 1 X M 1 v p 0 x 0 s J s q T n D N B q O V 5 3 x S u n Z n V 2 Z s + C l V i 4 q S j J Z c 0 U 2 k 9 U K 2 b 5 U U L U 6 c 4 T h p G L m 8 r g n 2 v u O 5 g 6 X p c R 1 p / k M b / p 1 d m Y 5 2 K w U F U o J Q g l K U k 1 l W u 7 z H b S w F N U a r V O C a h J p q K u n Y 1 4 2 l 6 X D e / P 8 A I x 2 1 a f o K 3 9 u f g P J z n L i 7 X w d N Y P M o R U s t L e U U n q 1 z O f 5 N 4 e M o 1 M 0 U 7 N W u k + R 3 N t Q / 0 P 1 K X j E 5 f k x H d q d Y + B f L 0 3 4 r Y i m k 2 k r L s 7 j G 1 Z n S x 3 r / A F f 1 M N Z c z X L P c 9 F N F U W Z R M 6 O S k u I q q t B 0 x c u B R k Y t j J F G h U U Z D J Z D I 0 g A A B c a / a X d V N M z A Z 1 1 8 Y C Y O z T I I I 0 d X q 5 m K A C E m L U 4 O T S X M 7 + B w k Y R 7 X z Z z 9 n x i t b 6 s 7 F E 1 I 5 2 7 T q S N a j w 6 m W m b I c u p n p e Y u k a 8 O t 1 d E Z 5 L R m r C + q u h z 6 r f P K + F h r P 3 l 4 F c R G 1 S H f G Q 7 C e t U 9 5 e A Y m N 6 k f c k / A z v t 0 8 W H H 0 7 R k u 2 3 i e j h a S T X B 6 o 4 W N 1 g 3 0 8 T p b G q 3 i 4 P j B 6 d H / j H X z U z 2 j Y 8 P R f X q f n Z 8 s 2 v U z Y i v L t q 1 P z M + r 7 G X o v r 1 P z M + R 4 t 3 q V H 2 z m / x M c f S z I S F i Q b O u M I P p 3 k x e U M z 1 b p Y a 7 / A O J H z K J 9 M 8 i p Z q F 3 7 F J f Z i 1 + h j 9 P U b 5 m t u O h 6 X D e / P 8 A I x u 1 o + g r f 2 5 + B O P X p c N 7 8 / y M v t f / A G 9 b + 3 P w O W / G v F y t t L / Q / U o + M T k + T S 3 a v W P g z s b a / w B h / w A d H x i c b y b e 7 V 6 x 8 G a l 9 V M 9 j a L 9 L F d s P B m P F 1 L I b t S f p 6 f u t C q 0 F L R / s d u X P p g n W f a Z c V O 8 e P Y b J 4 S N / w C b 7 T O T U 0 b X Y 2 j b l P q t 3 3 h d 9 5 v w + H j K K b v d m G e j f U Y s q L s L m m j S T V 2 S 6 S G U 8 o y E j 5 Q R G U Y e R F w v 3 j n F E Z B h s Z w A D L o A A B a A A A Q S p N c D T R 2 h O P O / U y g N L H Y o b Z 9 q P x R 0 q e 2 K X t H l Q H 0 k x 7 X D 7 T p V b x g 9 U u D O n g 5 7 q 6 H z v D V n C S k u X g e u p Y 1 u E W n Z W R j r h u d S f X b w l X e q e 8 v A t O r 6 a C 7 Y T / Q 4 N L G S U p N P m r 3 5 6 D 6 e N v U h J 6 W j J e B j r i x 0 5 7 5 v p v x T e S S t / l z d s + M o V U 2 t 2 S c X q u P F G H E Y h O D t p d L x N N P G K 6 u 8 u t 9 d O B m 2 4 3 P z m / W 7 Y 0 l 5 r 6 9 T 8 7 P m H l B h / N Y q v D k q k m v d l v L 7 m j 3 + y c b B U 7 O U U 8 9 T n / W 7 H g / K W r n x d e X 9 d l 0 j F L 9 C / n v l W P 0 m c x z C Q A 9 E c E J H v / 8 A x 5 i H K l V i / w C S U E u j T a / U 8 C e i 8 k c e 6 f n Y q 6 v l n d d 1 1 b 7 z H 6 T e W + L l 9 v c 7 R q J V M O 3 o l O d 2 + W 4 y m 0 8 X T l Q r K M 4 t + b n p f X h 2 H D x m I z u n e c m 3 J + s 1 a O 6 c j F 7 Q h Z x i 8 1 0 0 2 l o v 3 5 n D n 8 9 + u 3 X W f x 2 f K P G S j h q M F l y 1 I R z X 4 7 q i 1 Y 8 / g N p T p K W X L a T j m v x d u z U V j s Z G c a a V 8 0 c y a f D l a x m p V N G d Z x k y u X X e 3 Y 6 G N x s a l W n K N + C T X Y 2 + B q k c B y s 0 + y z O 8 3 o d J 8 c + r p V U 4 V d b 0 u r O 7 M 4 e I W 8 + p q / H K f X Q w f q R O b U W 8 + r O l h f U j / n M 5 1 T i + r L f h P r X h v U X V k y J w q 3 P i w k a j F K Y t j J F G K R U A A i s o A B z x 3 A A B A A A F A A A M A A A I A 6 2 y 8 X a O V 6 2 4 d D k l q U 3 F p o a l e h o y u 5 P l x + 4 X t K c m o p L K 7 P u 0 0 O f / F T X q v j a / L W x W W I c t e a + / R a l 9 E 1 1 6 G 0 J x p 5 Z a u z t e 1 u O n A 1 Y j a l K b v a X v Z t P k c D f 0 v 0 / 6 L Q n F J 3 S 1 v q 1 o m Z 8 Z 9 b / A O n U m N r x j V 0 p O L z N p 2 g 1 b 4 t O 5 x 8 b N y q T k 9 c z z X s o 3 v r w X A 0 1 d H a 1 + d h d W h f V 3 i 3 r Z 9 n B e B c / x n W U B 6 w 3 f 9 w y G H S 7 + p r E 8 m Z U 2 + C G Y C v K n U T j o 2 n D X + p W v 8 7 P 4 G t I H Y X n U n e D + L q 2 b l K e l r X l L R 6 3 a M / n N V p x W u t 9 D U 5 X 4 2 f V J l Z U o u 2 j V u F t V q Z 8 V 8 p W W W l + 9 E 0 e Y 6 t h s s b 6 t 3 1 s r p L r y E 0 O f w C o l 6 y 7 2 v E 9 A + B w J + t H q v E 7 0 u f d + x Z G a o z i 4 j i + p 2 W z j 4 j 1 m V m N 2 G 9 S J z a n F 9 W d P D L c j 0 O Z V 4 v q W / G e f r f g / w D 1 / F k S J w T 3 P i y J G o z S p i 2 X k U Y p F Q A D N V l A A M O 4 A A A A A B o A A B 6 A A A U B B I G R e n r o a l T S 4 a 9 e F z C d f Z d W m 0 l N J t N 8 U i V r m b c L w 9 P W 8 s v C y y q M f n Z a l 6 O C b d 3 k t e / q 3 f R X 5 H S n 5 q z S j H h 7 K J n 5 t 8 N 3 o t P k S V 1 v 5 5 P q 1 K M V 3 P 7 2 c / a j v O 6 v o k t e 4 V i M R F p y v J y U r K 1 r W M v 8 U + d + 7 V m + Y 4 9 9 W z D C b m Z 1 u 4 i V Z m 9 c 8 a p S K q R n 8 6 D q s a Y 1 Z + o 1 S X F X 6 3 M C q s m N Z r 9 g Y 3 5 m 3 w 7 n p x X O 4 z 6 P X G L v 1 V j F H E v k l f q d L B Y x N a p J r s 1 u Y 7 9 e 4 6 f l J u V z p Q 3 1 f 2 l 4 n U q 1 4 7 1 m m y 1 T E w S u 1 f 4 I 5 1 b F O + 7 o u z L F G e b b / F / T m c / K v G o 9 b m G v L e Y x z d + J m q P V n S u M j r 4 V 7 k e h z K v r P q x + H q L K r m a o 9 X 1 F + J z P b Z h p b n x Z M p G a l L d + J L N S s 2 e z J M o 2 L Z F x q z l e 4 X F 3 A i + J Q B Y m x z d U A T Y i w A A W C w A A W C w A A W A u g A A I o A A A 0 0 M Z J a P V D 8 R W z J W 4 c z n 2 G 0 a r X Q G 1 E 0 V T G O z F y N M 4 G Q A W G q A A B o s m F y p I T F 6 c u I + l O 1 z O m T G Y X G m V U T J l c 5 V z B V 7 i p E 5 i r C Y Z F i 5 P U k g E i 8 X o W z C 0 w u X U 8 V 2 y L l A G r 4 r 3 C 5 Q B p g A A M N g A A A A A A A A A A A A A A A A A A A A A A A A A C Y A A A o A A A A A A A A A J g A A C g A A A A A A A A A A A A J g A A B j / 2 Q = = ' ) ;
background - size : cover ;
background - position : center ;
background - repeat : no - repeat ;
box - sizing : border - box ;
}
. detail {
background : $main - bg ;
padding : 0 2 0px ;
padding : 0 2 rem ;
. head {
width : 100 % ;
@ -934,32 +1000,41 @@ export default {
justify - content : space - between ;
align - items : center ;
box - sizing : border - box ;
transform : translateY ( - 2 0px ) ;
transform : translateY ( - 2 rem ) ;
. head - image {
background : black ;
padding : 2 px ;
padding : .3 rem ;
border - radius : 50 % ;
width : 80 px ;
height : 80 px ;
}
. my - buttons {
margin - left : 1 rem ;
flex : 1 ;
display : flex ;
div {
font - size : 1.2 rem ;
display : flex ;
align - items : center ;
justify - content : center ;
float : left ;
border - radius : 2 px ;
border - radius : .2 rem ;
background : $second - btn - color ;
margin - left : 5 px ;
padding : 0 1 0px ;
height : 3 0px ;
margin - left : .5 rem ;
padding : 0 1 rem ;
height : 3 rem ;
color : white ;
& : nth - child ( 0 ) {
flex : 2 ;
}
& : nth - child ( 1 ) {
padding : 0 25 px ;
flex : 1 ;
padding : 0 2.5 rem ;
}
img {
@ -974,7 +1049,41 @@ export default {
. description {
font - size : 1.2 rem ;
color : white ;
transform : translateY ( - 20 px ) ;
transform : translateY ( - 2 rem ) ;
. signature {
/ / c o l o r : $ s e c o n d - t e x t - c o l o r ;
color : white ;
font - size : 1.3 rem ;
display : flex ;
align - items : center ;
margin - bottom : .5 rem ;
img {
height : 1.2 rem ;
margin - left : .6 rem ;
}
}
. more {
color : $second - text - color ;
display : flex ;
. item {
padding : .2 rem .5 rem ;
border - radius : .2 rem ;
background : $second - btn - color - tran ;
font - size : 1 rem ;
display : flex ;
align - items : center ;
margin - right : .5 rem ;
img {
height : 1 rem ;
margin - right : .2 rem ;
}
}
}
. number {
color : $second - text - color ;
@ -984,27 +1093,61 @@ export default {
align - items : center ;
img {
width : 18 px ;
margin - left : 5 px ;
width : 1.6 rem ;
margin - left : .5 rem ;
}
}
. heat {
margin - top : 1 rem ;
color : darkgray ;
display : flex ;
align - items : center ;
. num {
color : white ;
font - size : 1. 8 rem ;
font - size : 1. 4 rem ;
font - weight : bold ;
margin - right : 3 px ;
margin - right : .3 rem ;
}
. text {
font - size : 1.4 rem ;
margin - right : 10 px ;
font - size : 1.2 rem ;
margin - right : 1 rem ;
}
}
}
. other {
display : flex ;
margin - bottom : 1 rem ;
. item {
margin - right : 2.5 rem ;
display : flex ;
img {
margin - right : .8 rem ;
border - radius : .4 rem ;
background : $second - btn - color - tran ;
padding : .8 rem ;
height : 2.2 rem ;
}
. right {
display : flex ;
justify - content : space - between ;
flex - direction : column ;
. top {
color : white ;
font - size : 1.4 rem ;
}
. bottom {
color : $second - text - color ;
font - size : 1.2 rem ;
}
}
}
}
zyronon