优化同城页面
This commit is contained in:
zyronon
parent
9af68e46f7
commit
d48c6cc84f
@ -1,5 +1,5 @@
|
||||
<!--<template>-->
|
||||
<!-- <video style="height: 100vh;width: 100vw;" :src="video.videoUrl" :poster="video.poster" ref="video" muted :autoplay="!disabled" loop>-->
|
||||
<!-- <video style="height: 100vh;width: 100vw;" :src="video.videoUrl" :poster="video.poster" refs="video" muted :autoplay="!disabled" loop>-->
|
||||
<!-- <p> 您的浏览器不支持 video 标签。</p>-->
|
||||
<!-- </video>-->
|
||||
<!--</template>-->
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
@touchstart="start"
|
||||
@touchmove="move"
|
||||
@touchend="end"
|
||||
@scroll="scroll"
|
||||
>
|
||||
<div ref="wrapper" class="wrapper"
|
||||
>
|
||||
@ -173,7 +174,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Loading :isFullScreen="false"></Loading>
|
||||
<Loading v-if="loading" :isFullScreen="false"></Loading>
|
||||
</div>
|
||||
</div>
|
||||
<Footer v-bind:init-tab="2" style="position: fixed;"/>
|
||||
@ -206,8 +207,12 @@ export default {
|
||||
},
|
||||
isTop: false,
|
||||
isFixed: true,
|
||||
isMove: false,
|
||||
loading: false,
|
||||
isRefresh: false,
|
||||
startLocationY: 0,
|
||||
ref: {
|
||||
topStartLocationY: 0,
|
||||
refs: {
|
||||
scroller: null,
|
||||
wrapper: null,
|
||||
header1: null,
|
||||
@ -271,71 +276,112 @@ export default {
|
||||
}
|
||||
this.items.push(temp)
|
||||
}
|
||||
this.items = this.items.concat(this.items)
|
||||
// this.$console(this.items)
|
||||
|
||||
setTimeout(() => {
|
||||
this.ref.scroller = this.$refs["scroller"]
|
||||
this.ref.wrapper = this.$refs["wrapper"]
|
||||
this.ref.header1 = this.$refs["header1"]
|
||||
this.refs.scroller = this.$refs["scroller"]
|
||||
this.refs.wrapper = this.$refs["wrapper"]
|
||||
this.refs.header1 = this.$refs["header1"]
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
start(e) {
|
||||
this.ref.header1.style.transition = this.ref.scroller.style.transition = this.ref.wrapper.style.transition = `none`
|
||||
this.startLocationY = e.touches[0].pageY
|
||||
this.refs.header1.style.transition = this.refs.scroller.style.transition = this.refs.wrapper.style.transition = `none`
|
||||
this.topStartLocationY = this.startLocationY = e.touches[0].pageY
|
||||
},
|
||||
move(e) {
|
||||
this.isTop = this.ref.scroller.scrollTop === 0
|
||||
let scrollTop = this.refs.scroller.scrollTop
|
||||
this.isTop = scrollTop === 0
|
||||
// console.log('scrollTop', scroller.scrollTop)
|
||||
let touchMoveDistance = e.touches[0].pageY - this.startLocationY
|
||||
// console.log('touchMoveDistance', touchMoveDistance)
|
||||
// let transformY = this.$getTransform(header)
|
||||
|
||||
|
||||
let headerHeight = 80
|
||||
let header1Height = 50
|
||||
if (touchMoveDistance > 0) {
|
||||
if (!this.isFixed) {
|
||||
if (Math.abs(touchMoveDistance) < header1Height) {
|
||||
this.ref.header1.style.transform = this.ref.scroller.style.transform = `translate3d(0,${touchMoveDistance - header1Height}px,0)`
|
||||
this.refs.header1.style.transform = this.refs.scroller.style.transform = `translate3d(0,${touchMoveDistance - header1Height}px,0)`
|
||||
} else {
|
||||
this.ref.header1.style.transform = this.ref.scroller.style.transform = `translate3d(0,${0}px,0)`
|
||||
this.refs.header1.style.transform = this.refs.scroller.style.transform = `translate3d(0,${0}px,0)`
|
||||
}
|
||||
}
|
||||
if (this.isTop) {
|
||||
this.ref.wrapper.style.transform = `translate3d(0,${touchMoveDistance > headerHeight ? headerHeight : touchMoveDistance}px,0)`
|
||||
if (this.isTop && (!this.isRefresh)) {
|
||||
let wrapperTouchMoveDistance = e.touches[0].pageY - this.topStartLocationY
|
||||
this.refs.wrapper.style.transform = `translate3d(0,${wrapperTouchMoveDistance > headerHeight ? headerHeight : wrapperTouchMoveDistance}px,0)`
|
||||
} else {
|
||||
// this.startLocationY = e.touches[0].pageY
|
||||
this.topStartLocationY = e.touches[0].pageY
|
||||
}
|
||||
} else {
|
||||
if (this.isFixed) {
|
||||
if (Math.abs(touchMoveDistance) < header1Height) {
|
||||
this.ref.header1.style.transform = this.ref.scroller.style.transform = `translate3d(0,${touchMoveDistance}px,0)`
|
||||
this.refs.header1.style.transform = this.refs.scroller.style.transform = `translate3d(0,${touchMoveDistance}px,0)`
|
||||
} else {
|
||||
this.ref.header1.style.transform = this.ref.scroller.style.transform = `translate3d(0,${-header1Height}px,0)`
|
||||
this.refs.header1.style.transform = this.refs.scroller.style.transform = `translate3d(0,${-header1Height}px,0)`
|
||||
}
|
||||
}
|
||||
let wrapperHeight = this.refs.wrapper.offsetHeight
|
||||
if (scrollTop + this.bodyHeight + 50 > wrapperHeight) {
|
||||
this.loadMore()
|
||||
this.refs.scroller.scrollTop = wrapperHeight
|
||||
}
|
||||
// let s = wrapperHeight - scrollTop
|
||||
// console.log(s)
|
||||
}
|
||||
// console.log('isTop', this.isTop)
|
||||
},
|
||||
end() {
|
||||
end(e) {
|
||||
this.refs.header1.style.transition = this.refs.scroller.style.transition = this.refs.wrapper.style.transition = `all .3s`
|
||||
let header1Height = 50
|
||||
this.ref.header1.style.transition = this.ref.scroller.style.transition = this.ref.wrapper.style.transition = `all .3s`
|
||||
this.ref.wrapper.style.transform = `translate3d(0,0,0)`
|
||||
let transformY = this.$getTransform(this.ref.header1)
|
||||
let headerHeight = 80
|
||||
let touchMoveDistance = e.changedTouches[0].pageY - this.startLocationY
|
||||
if (this.isTop && Math.abs(touchMoveDistance) > headerHeight / 2) {
|
||||
this.refs.wrapper.style.transform = `translate3d(0,${headerHeight}px,0)`
|
||||
this.refresh(() => {
|
||||
console.log('refresh-done')
|
||||
this.refs.wrapper.style.transform = `translate3d(0,0,0)`
|
||||
})
|
||||
} else {
|
||||
this.refs.wrapper.style.transform = `translate3d(0,${0}px,0)`
|
||||
}
|
||||
let transformY = this.$getTransform(this.refs.header1)
|
||||
if (Math.abs(transformY) > header1Height / 2) {
|
||||
this.isFixed = false
|
||||
this.ref.header1.style.transform = this.ref.scroller.style.transform = `translate3d(0,${-header1Height}px,0)`
|
||||
this.refs.header1.style.transform = this.refs.scroller.style.transform = `translate3d(0,${-header1Height}px,0)`
|
||||
} else {
|
||||
this.isFixed = true
|
||||
this.ref.header1.style.transform = this.ref.scroller.style.transform = `translate3d(0,${0}px,0)`
|
||||
this.refs.header1.style.transform = this.refs.scroller.style.transform = `translate3d(0,${0}px,0)`
|
||||
}
|
||||
},
|
||||
scroll(e) {
|
||||
if (this.isTop) {
|
||||
e.preventDefault();
|
||||
} else {
|
||||
let scrollTop = this.refs.scroller.scrollTop
|
||||
let wrapperHeight = this.refs.wrapper.offsetHeight
|
||||
if (scrollTop + this.bodyHeight + 50 > wrapperHeight) {
|
||||
this.loadMore()
|
||||
this.refs.scroller.scrollTop = wrapperHeight
|
||||
}
|
||||
}
|
||||
},
|
||||
async loadMore() {
|
||||
console.log('loadMore-start')
|
||||
if (this.loading) return
|
||||
this.loading = true
|
||||
await this.$sleep(1500)
|
||||
this.items = this.items.concat(this.items)
|
||||
this.loading = false
|
||||
},
|
||||
async refresh(done) {
|
||||
console.log('refresh-start')
|
||||
if (this.isRefresh) return
|
||||
this.isRefresh = true
|
||||
await this.$sleep(1500)
|
||||
this.isRefresh = false
|
||||
// this.items = []
|
||||
done()
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -363,7 +409,6 @@ export default {
|
||||
height: calc(100vh - 5rem);
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
background: black;
|
||||
|
||||
> .wrapper {
|
||||
position: absolute;
|
||||
@ -373,6 +418,9 @@ export default {
|
||||
z-index: 2;
|
||||
|
||||
> .header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
height: 8rem;
|
||||
}
|
||||
}
|
||||
@ -524,18 +572,36 @@ export default {
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
overflow: auto;
|
||||
background: black;
|
||||
//background: black;
|
||||
box-sizing: border-box;
|
||||
padding: 0 3px;
|
||||
|
||||
> .left, > .right {
|
||||
width: calc(50% - 1.5px);
|
||||
width: calc(50%);
|
||||
}
|
||||
|
||||
> .left {
|
||||
.item {
|
||||
padding: 0 2px 3px 3px;
|
||||
&:nth-last-child(1) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .right {
|
||||
.item {
|
||||
padding: 0 3px 3px 2px;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
background: black;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 3px;
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
|
||||
@ -1,665 +0,0 @@
|
||||
<template>
|
||||
<div id="attention">
|
||||
<header ref="header1">
|
||||
<span @click="$nav('/country-choose')">双流</span>
|
||||
<div class="arrow"></div>
|
||||
</header>
|
||||
<div class="scroller"
|
||||
ref="scroller"
|
||||
@touchstart="start"
|
||||
@touchmove="move"
|
||||
@touchend="end"
|
||||
>
|
||||
<div ref="wrapper" class="wrapper"
|
||||
>
|
||||
<div class="header" ref="header">
|
||||
<Loading :isFullScreen="false"></Loading>
|
||||
</div>
|
||||
<div class="ad" v-if="false">
|
||||
<div class="title">超值卖场 次日达</div>
|
||||
<div class="good-ctn">
|
||||
<div class="left">
|
||||
<div class="left-title">
|
||||
<span>限量秒杀</span>
|
||||
<div>低至0.99元</div>
|
||||
</div>
|
||||
<div class="goods">
|
||||
<div class="good">
|
||||
<img class="good-img" src="../../assets/img/poster/1.jpg"/>
|
||||
<div class="name">每日坚果5包</div>
|
||||
<div class="price">￥0.99</div>
|
||||
</div>
|
||||
<div class="good">
|
||||
<img class="good-img" src="../../assets/img/poster/1.jpg"/>
|
||||
<div class="name">每日坚果5包</div>
|
||||
<div class="price">￥0.99</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="goods">
|
||||
<div class="good">
|
||||
<div class="notice">
|
||||
<div class="ad-name">低价疯抢</div>
|
||||
<div class="ad-desc">统一方便面</div>
|
||||
</div>
|
||||
<img class="good-img" src="../../assets/img/poster/1.jpg"/>
|
||||
</div>
|
||||
<div class="good">
|
||||
<div class="notice">
|
||||
<div class="ad-name">低价疯抢</div>
|
||||
<div class="ad-desc">统一方便面</div>
|
||||
</div>
|
||||
<img class="good-img" src="../../assets/img/poster/1.jpg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="content" class="content">
|
||||
<div class="left">
|
||||
<div class="item" v-for="item in left">
|
||||
<template v-if="item.type === 0">
|
||||
<div class="wrapper">
|
||||
<img class="poster" :src="item.src"/>
|
||||
<img :src="item.author" alt="" class="author">
|
||||
</div>
|
||||
<div class="location" v-if="item.address">
|
||||
<div class="top">
|
||||
<img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
|
||||
<div class="name">{{ item.address.name }}</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="type">{{ item.address.type }}</div>
|
||||
<div class="line"></div>
|
||||
<div class="other">{{ item.address.number }}人想去</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="item.type === 1">
|
||||
<div class="wrapper" style="height: 49vw;overflow:hidden;">
|
||||
<img class="poster" :src="item.src"/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="item.type === 2">
|
||||
<div class="ranking-list">
|
||||
<div class="desc">
|
||||
<div class="top">
|
||||
<img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
|
||||
<div class="name">{{ item.desc }}</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
基于6亿抖音用户真实数据...
|
||||
</div>
|
||||
</div>
|
||||
<div class="ads">
|
||||
<div class="ad" v-for="(ad,index) in item.ads">
|
||||
<div class="left">
|
||||
<img class="ad-logo" :src="ad.src"/>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rank">TOP{{ index + 1 }}</div>
|
||||
<div class="name">{{ ad.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="item.type === 3">
|
||||
<div class="wrapper">
|
||||
<img class="poster" :src="item.src"/>
|
||||
<img :src="item.author" alt="" class="author">
|
||||
<div class="live">直播中</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="item" v-for="item in right">
|
||||
<template v-if="item.type === 0">
|
||||
<div class="wrapper">
|
||||
<img class="poster" :src="item.src"/>
|
||||
<img :src="item.author" alt="" class="author">
|
||||
</div>
|
||||
<div class="location" v-if="item.address">
|
||||
<div class="top">
|
||||
<img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
|
||||
<div class="name">{{ item.address.name }}</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="type">{{ item.address.type }}</div>
|
||||
<div class="line"></div>
|
||||
<div class="other">{{ item.address.number }}人想去</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="item.type === 1">
|
||||
<div class="wrapper" style="height: 49vw;overflow:hidden;">
|
||||
<img class="poster" :src="item.src"/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="item.type === 2">
|
||||
<div class="ranking-list">
|
||||
<div class="desc">
|
||||
<div class="top">
|
||||
<img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
|
||||
<div class="name">{{ item.desc }}</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
基于6亿抖音用户真实数据...
|
||||
</div>
|
||||
</div>
|
||||
<div class="ads">
|
||||
<div class="ad" v-for="(ad,index) in item.ads">
|
||||
<div class="left">
|
||||
<img class="ad-logo" :src="ad.src"/>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rank">TOP{{ index + 1 }}</div>
|
||||
<div class="name">{{ ad.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="item.type === 3">
|
||||
<div class="wrapper">
|
||||
<img class="poster" :src="item.src"/>
|
||||
<img :src="item.author" alt="" class="author">
|
||||
<div class="live">直播中</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Loading :isFullScreen="false"></Loading>
|
||||
</div>
|
||||
</div>
|
||||
<Footer v-bind:init-tab="2" style="position: fixed;"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
//TODO 还差个点击，返回后，定位到当前item最高点
|
||||
import Footer from '../../components/Footer.vue';
|
||||
import Loading from "../../components/Loading";
|
||||
|
||||
export default {
|
||||
name: "Attention",
|
||||
components: {
|
||||
Footer,
|
||||
Loading
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
items: [],
|
||||
height: 0,
|
||||
width: 0,
|
||||
footerHeight: 0,
|
||||
itemType: {
|
||||
VIDEO: 0,
|
||||
AD: 1,
|
||||
RANKING_LIST: 2,
|
||||
LIVE: 3,
|
||||
},
|
||||
isTop: false,
|
||||
isFixed: true,
|
||||
startLocationY: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.height = document.body.clientHeight;
|
||||
this.width = document.body.clientWidth;
|
||||
},
|
||||
computed: {
|
||||
left() {
|
||||
return this.items.filter((v, i) => {
|
||||
return i % 2 === 0
|
||||
})
|
||||
},
|
||||
right() {
|
||||
return this.items.filter((v, i) => {
|
||||
return i % 2 !== 0
|
||||
|
||||
})
|
||||
},
|
||||
bodyHeight() {
|
||||
return this.$store.state.bodyHeight
|
||||
},
|
||||
bodyWidth() {
|
||||
return this.$store.state.bodyWidth
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
for (let i = 1; i < 12; i++) {
|
||||
let temp = {
|
||||
src: require(`../../assets/img/poster/${i}.jpg`),
|
||||
author: require(`../../assets/img/avatar.png`),
|
||||
}
|
||||
temp.type = i - 1 > 3 ? 3 : i - 1
|
||||
if (temp.type === 2) {
|
||||
temp.desc = '成都市好友聚会美食榜'
|
||||
temp.ads = [
|
||||
{
|
||||
src: require(`../../assets/img/poster/${i}.jpg`),
|
||||
name: '烧江南烧肉'
|
||||
},
|
||||
{
|
||||
src: require(`../../assets/img/poster/${i}.jpg`),
|
||||
name: '欧叶无国界料理餐厅'
|
||||
},
|
||||
{
|
||||
src: require(`../../assets/img/poster/${i}.jpg`),
|
||||
name: '陆派玛歌庄园'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
if (i % 2 === 0) {
|
||||
temp.address = {
|
||||
name: '大源中央公园',
|
||||
type: '综合商场',
|
||||
number: 150
|
||||
}
|
||||
}
|
||||
this.items.push(temp)
|
||||
}
|
||||
this.items = this.items.concat(this.items)
|
||||
// this.$console(this.items)
|
||||
|
||||
},
|
||||
methods: {
|
||||
start(e) {
|
||||
let scroller = this.$refs["scroller"]
|
||||
let wrapper = this.$refs["wrapper"]
|
||||
let header1 = this.$refs["header1"]
|
||||
header1.style.transition = scroller.style.transition = wrapper.style.transition = `none`
|
||||
this.startLocationY = e.touches[0].pageY
|
||||
},
|
||||
move(e) {
|
||||
let scroller = this.$refs["scroller"]
|
||||
let wrapper = this.$refs["wrapper"]
|
||||
let header1 = this.$refs["header1"]
|
||||
this.isTop = scroller.scrollTop === 0
|
||||
// console.log('scrollTop', scroller.scrollTop)
|
||||
let touchMoveDistance = e.touches[0].pageY - this.startLocationY
|
||||
console.log('touchMoveDistance', touchMoveDistance)
|
||||
// let transformY = this.$getTransform(header)
|
||||
|
||||
let headerHeight = 80
|
||||
let header1Height = 50
|
||||
if (touchMoveDistance > 0) {
|
||||
if (this.isTop) {
|
||||
// wrapper.style.transform = `translate3d(0,${touchMoveDistance > headerHeight ? headerHeight : touchMoveDistance}px,0)`
|
||||
} else {
|
||||
if (!this.isFixed){
|
||||
if (Math.abs(touchMoveDistance) < header1Height) {
|
||||
scroller.style.marginTop = touchMoveDistance + 'px'
|
||||
header1.style.top = touchMoveDistance - header1Height + 'px'
|
||||
} else {
|
||||
scroller.style.marginTop = header1Height + 'px'
|
||||
header1.style.top = '0px'
|
||||
}
|
||||
}
|
||||
// this.startLocationY = e.touches[0].pageY
|
||||
}
|
||||
} else {
|
||||
if (this.isFixed){
|
||||
if (Math.abs(touchMoveDistance) < header1Height) {
|
||||
scroller.style.marginTop = header1Height + touchMoveDistance + 'px'
|
||||
header1.style.top = touchMoveDistance + 'px'
|
||||
} else {
|
||||
scroller.style.marginTop = '0px'
|
||||
header1.style.top = -header1Height + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log('isTop', this.isTop)
|
||||
},
|
||||
end() {
|
||||
let header1Height = 50
|
||||
|
||||
let scroller = this.$refs["scroller"]
|
||||
let wrapper = this.$refs["wrapper"]
|
||||
let header1 = this.$refs["header1"]
|
||||
header1.style.transition = scroller.style.transition = wrapper.style.transition = `all .3s`
|
||||
wrapper.style.transform = `translate3d(0,0,0)`
|
||||
let top = this.$getCss(header1, 'top')
|
||||
if (Math.abs(top) > header1Height / 2) {
|
||||
this.isFixed = false
|
||||
scroller.style.marginTop = '0px'
|
||||
header1.style.top = header1Height + 'px'
|
||||
} else {
|
||||
this.isFixed = true
|
||||
scroller.style.marginTop = header1Height + 'px'
|
||||
header1.style.top = '0px'
|
||||
}
|
||||
},
|
||||
scroll(e) {
|
||||
if (this.isTop) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
#attention {
|
||||
/*background: rgb(22，24，34);*/
|
||||
/*background: #161822;*/
|
||||
//抖音原色，感觉很暗
|
||||
@douyin-bg: #2e3244;
|
||||
background: @douyin-bg;
|
||||
color: #b8b9c1;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
//overflow: auto;
|
||||
|
||||
.scroller {
|
||||
height: calc(100vh - 5rem);
|
||||
margin-top: 5rem;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
background: black;
|
||||
|
||||
> .wrapper {
|
||||
position: absolute;
|
||||
top: -8rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
|
||||
> .header {
|
||||
height: 8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
position: absolute;
|
||||
background: @douyin-bg;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
font-size: 1.5rem;
|
||||
height: 5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@arrow-width: 5px;
|
||||
|
||||
.arrow {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
left: 5px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: @arrow-width solid white;
|
||||
border-right: @arrow-width solid transparent;
|
||||
border-bottom: @arrow-width solid transparent;
|
||||
border-left: @arrow-width solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
> .ad {
|
||||
padding: 10px;
|
||||
color: white;
|
||||
|
||||
.title {
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.good-ctn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.left, .right {
|
||||
width: calc(50% - 3px);
|
||||
}
|
||||
|
||||
|
||||
.left {
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(to bottom right, #bd5959 5%, #3f445c 50%);
|
||||
|
||||
|
||||
.left-title {
|
||||
font-weight: bold;
|
||||
font-size: 1.7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
div {
|
||||
background: linear-gradient(to top right, #e37c7c, #bd5959);
|
||||
padding: 0 4px 2px 4px;
|
||||
border-radius: 3px;
|
||||
font-size: 1rem;
|
||||
font-weight: lighter;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.goods {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.good {
|
||||
width: calc(50% - 5px);
|
||||
|
||||
.good-img {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.goods {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.good {
|
||||
height: calc(50% - 3px);
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(to bottom right, #6b267d 10%, #3f445c 50%);
|
||||
|
||||
&:nth-child(2) {
|
||||
background: linear-gradient(to bottom right, #283b53 5%, #3f445c 50%);
|
||||
}
|
||||
|
||||
.notice {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.ad-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ad-desc {
|
||||
font-size: 1rem;
|
||||
color: darkgray;
|
||||
}
|
||||
}
|
||||
|
||||
.good-img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
overflow: auto;
|
||||
background: black;
|
||||
box-sizing: border-box;
|
||||
padding: 0 3px;
|
||||
|
||||
> .left, > .right {
|
||||
width: calc(50% - 1.5px);
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 3px;
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
|
||||
.poster {
|
||||
width: 100%;
|
||||
max-height: 50vh;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.author {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
height: 3rem;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.live {
|
||||
position: absolute;
|
||||
padding: .2rem .5rem;
|
||||
border-radius: .2rem;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
color: white;
|
||||
background: @primary-btn-color;
|
||||
}
|
||||
}
|
||||
|
||||
.location {
|
||||
padding: 8px 10px 10px 10px;
|
||||
background: @douyin-bg;
|
||||
|
||||
.top, .bottom {
|
||||
font-size: 1.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 0 4px;
|
||||
width: 1px;
|
||||
height: .8rem;
|
||||
background: gray;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 2px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ranking-list {
|
||||
padding: 2rem 1rem;
|
||||
background: @douyin-bg;
|
||||
|
||||
.desc {
|
||||
.top {
|
||||
margin-bottom: .2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.logo {
|
||||
margin-right: .5rem;
|
||||
height: 1.4rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
//background: linear-gradient(to bottom right, #bd5959 5%, #3f445c 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ads {
|
||||
font-size: 1.2rem;
|
||||
|
||||
.ad {
|
||||
background: @second-btn-color;
|
||||
display: flex;
|
||||
margin-top: 1rem;
|
||||
|
||||
.left {
|
||||
margin-right: 1rem;
|
||||
|
||||
.ad-logo {
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.rank {
|
||||
color: @second-text-color;
|
||||
margin-bottom: .2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -42,7 +42,6 @@ import PasswordLogin from "../pages/login/PasswordLogin";
|
||||
import VerificationCode from "../pages/login/VerificationCode";
|
||||
import RetrievePassword from "../pages/login/RetrievePassword";
|
||||
import Help from "../pages/login/Help";
|
||||
import Attention2 from "../pages/home/Attention2";
|
||||
|
||||
const routes = [
|
||||
// {path: '', component: Music},
|
||||
@ -50,7 +49,6 @@ const routes = [
|
||||
{path: '/', component: Index2},
|
||||
{path: '/home', component: Index},
|
||||
{path: '/attention', component: Attention},
|
||||
// {path: '/attention', component: Attention2},
|
||||
{path: '/publish', component: Publish},
|
||||
{path: '/test', component: Test},
|
||||
{path: '/message', component: Message},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user