pimhwang
/
douyin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完善me页面

pull/19/head
zyronon 4 years ago
parent
ebb57554ff
commit
ff5c6b474f
3 changed files with 494 additions and 163 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 60
      src/components/Posters.vue
  2. 553
      src/pages/home/Me.vue
  3. 44
      src/pages/home/SlideList.vue

60
src/components/Posters.vue
Unescape View File

@ -0,0 +1,60 @@ @@ -0,0 +1,60 @@
<template>
<div class="posters">
<div class="poster-item" v-for="i in list">
<img class="poster" src="../assets/img/poster/2.jpg" alt="">
<div class="num">
<img class="love" src="../assets/img/icon/love.svg" alt="">
<span>123.2w</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Posters",
props: {
list: {
type: [Array, Number],
default: () => {
return 5
}
}
}
}
</script>
<style scoped lang="scss">
.posters {
display: grid;
grid-template-columns: 33.33vw 33.33vw 33.33vw;
grid-template-rows:calc(33.33vw * 1.2);
}
.poster-item {
border: 1px solid black;
overflow: hidden;
position: relative;
.poster {
width: 100%;
display: block;
}
.num {
color: white;
position: absolute;
bottom: 5px;
left: 5px;
display: flex;
align-items: center;
font-size: 1.4rem;
.love {
width: 14px;
height: 14px;
margin-right: 5px;
}
}
}
</style>

553
src/pages/home/Me.vue
Unescape View File

@ -1,137 +1,177 @@ @@ -1,137 +1,177 @@
<template>
<div class="Me">
<SlideList key1="父" style="width: 100vw;">
<SlideItem style="overflow:auto;">
<div ref="desc">
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<p>我页面</p>
<SlideList style="width: 100vw;"
@first="first"
@end="end"
v-model:active-index="baseActiveIndex"
>
<SlideItem style="overflow:auto;" @scroll="scroll">
<div ref="desc" class="desc">
<header ref="header">
<img src="../../assets/img/icon/next.svg" alt="" @click="$emit('back')">
<img src="../../assets/img/icon/more.svg" alt="">
</header>
<div class="detail">
<div class="head">
<img src="../../assets/img/icon/head-image.jpeg" class="head-image">
<div class="other-buttons" v-if="false">
<div class="attention">
关注
</div>
<div class="more-attention">
-
</div>
</div>
<div class="my-buttons ">
<div class="collect">
<img src="../../assets/img/icon/collect-white.svg" alt="">
<span class="mr5p">收藏</span>
</div>
<div class="add-friend">
<img src="../../assets/img/icon/add-friend-white.svg" alt="">
</div>
<div class="qr-code">
<img src="../../assets/img/icon/qr-code-white.svg" alt="">
</div>
</div>
</div>
<div class="description">
<p class="name f22 mt5p mb5p">ttentau</p>
<div class="number mb10p">
<span>抖音号：605128307</span>
<div class="jrtt">
<img src="../../assets/img/icon/sina.svg" alt="">
<span>头条主页</span>
<img src="../../assets/img/icon/next.svg" alt="">
</div>
</div>
<div class="signature f12 mb10p">
<span>填写个性签名更容易获得别人关注哦</span>
</div>
<div class="info f10 mb10p">
<div class="age">
<img src="../../assets/img/icon/person.svg" alt="">
<span>22岁</span>
</div>
<div class="location">
<span>上海</span>
</div>
<div class="school">
四川理工大学
</div>
</div>
<div class="heat">
<span>8获赞</span>
<span>38关注</span>
<span>42粉丝</span>
</div>
</div>
</div>
</div>
<div ref="content">
<div ref="content" style="margin-bottom: 60px;">
<SlideList
:show-indicator="true"
:indicator-fixed="indicatorFixed"
indicator-type="me"
v-model:active-index="contentIndex">
<SlideItem>
<div ref="tab-content1">1</div>
<div ref="tab-content1">
<div class="posters">
<Posters></Posters>
<div class="no-more">暂时没有更多了</div>
</div>
</div>
</SlideItem>
<SlideItem>
<div ref="tab-content2">2</div>
<div ref="tab-content2">
<Posters :list="15"></Posters>
<div class="no-more">暂时没有更多了</div>
</div>
</SlideItem>
<SlideItem>
<div class="content" ref="tab-content3">
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<p>喜欢</p>
<div ref="tab-content3">
<Posters :list="5"></Posters>
<div class="no-more">暂时没有更多了</div>
</div>
</SlideItem>
</SlideList>
</div>
<Footer v-bind:init-tab="5"/>
</SlideItem>
<SlideItem style="min-width: 60vw;line-height: 50px; overflow:auto;">
<p>设置页</p>
<p>设置页</p>
<p>设置页</p>
<p>设置页</p>
<p>设置页</p>
<p>设置页</p>
<p>设置页</p>
<p>设置页</p>
<p>设置页</p>
<p>设置页</p>
<p>设置页</p>
<p>设置页</p>
<p>设置页</p>
<p>设置页</p>
<p>设置页</p>
<p>设置页</p>
<p>设置页</p>
<p>设置页</p>
<p>设置页</p>
<ul>
<li @click="$nav('MyCard')">
<img src="../../assets/img/icon/card-gray.png" alt="">
<span>个人名片</span>
</li>
<li @click="$nav('MyCollect')">
<img src="../../assets/img/icon/collect-gray.png" alt="">
<span>我的收藏</span>
</li>
<div class="line"></div>
<li>
<img src="../../assets/img/icon/wallet-gray.png" alt="">
<span>钱包</span>
</li>
<li>
<img src="../../assets/img/icon/order-gray.png" alt="">
<span>订单</span>
</li>
<li class="exception" @click="toggleService()">
<div class="d-flex align-items-center">
<img src="../../assets/img/icon/category-gray.png" alt="">
<span>服务</span>
</div>
<div class="triangle"></div>
</li>
<div class="service">
<li>
<img src="../../assets/img/icon/order-gray.png" alt="" class="op0">
<span>购物助手</span>
</li>
<li>
<img src="../../assets/img/icon/order-gray.png" alt="" class="op0">
<span>生活服务订单</span>
</li>
<li>
<img src="../../assets/img/icon/order-gray.png" alt="" class="op0">
<span>DOU+ 上热门</span>
</li>
<li>
<img src="../../assets/img/icon/order-gray.png" alt="" class="op0">
<span>彩铃服务</span>
</li>
<li>
<img src="../../assets/img/icon/order-gray.png" alt="" class="op0">
<span>免流量看抖音</span>
</li>
</div>
<div class="line"></div>
<li>
<img src="../../assets/img/icon/link-gray.png" alt="">
<span>小程序</span>
</li>
<li>
<img src="../../assets/img/icon/juan-gray.png" alt="">
<span>卡卷</span>
</li>
<div class="line"></div>
<li>
<img src="../../assets/img/icon/umbrella-gray.png" alt="">
<span>未成年保护工具</span>
</li>
<div class="line"></div>
<li>
<img src="../../assets/img/icon/setting-gray.png" alt="">
<span>设置</span>
</li>
</ul>
</SlideItem>
</SlideList>
</div>
@ -139,21 +179,31 @@ @@ -139,21 +179,31 @@
<script>
import SlideList from "./SlideList.vue";
import SlideItem from "./SlideItem.vue";
import Posters from '../../components/Posters'
import Footer from "../../components/Footer";
export default {
name: "Me",
components: {SlideList, SlideItem},
components: {SlideList, SlideItem, Posters,Footer},
data() {
return {
serviceEl: {},
serviceHeight: 0,
contentIndex: 0,
desc: null
baseActiveIndex: 0,
desc: null,
tabContents: [],
indicatorHeight: 42,
indicatorFixed: false,
refs: {
header: null,
headerHeight: 0,
}
}
},
watch:{
contentIndex(){
this.changeIndex()
watch: {
contentIndex(newVal, oldVal) {
this.changeIndex(newVal, oldVal)
}
},
computed: {
@ -162,38 +212,60 @@ export default { @@ -162,38 +212,60 @@ export default {
}
},
mounted() {
this.changeIndex()
setTimeout(() => {
this.refs.header = this.$refs.header
this.refs.headerHeight = this.$refs.header.offsetHeight
this.changeIndex(0, null)
})
},
methods:{
changeIndex(){
methods: {
scroll() {
let top = this.tabContents[this.contentIndex].getBoundingClientRect().top
this.indicatorFixed = top < this.indicatorHeight;
},
changeIndex(newVal, oldVal) {
let desc = this.$refs.desc
// console.log(desc.clientHeight)
let content = this.$refs['content']
let tabContent1 = this.$refs['tab-content1']
let tabContent2 = this.$refs['tab-content2']
let tabContent3 = this.$refs['tab-content3']
switch (this.contentIndex) {
case 0:
if (this.bodyHeight - desc.clientHeight > tabContent1.clientHeight) {
content.style.height = this.bodyHeight - desc.clientHeight + 'px'
} else {
content.style.height = tabContent1.clientHeight + 'px'
}
break
case 1:
if (this.bodyHeight - desc.clientHeight > tabContent2.clientHeight) {
content.style.height = this.bodyHeight - desc.clientHeight + 'px'
}else {
content.style.height = tabContent2.clientHeight + 'px'
}
break
case 2:
if (this.bodyHeight - desc.clientHeight > tabContent3.clientHeight) {
content.style.height = this.bodyHeight - desc.clientHeight + 'px'
}else {
content.style.height = tabContent3.clientHeight + 'px'
}
break
if (!this.tabContents.length) {
this.tabContents = [this.$refs['tab-content1'], this.$refs['tab-content2'], this.$refs['tab-content3']]
}
// debugger
let moveDistance = 0
if (oldVal !== null) {
moveDistance = this.bodyHeight - this.tabContents[oldVal].getBoundingClientRect().top
} else {
moveDistance = 0
}
// console.log('moveDistance', moveDistance)
if (moveDistance > this.tabContents[newVal].clientHeight) {
if (moveDistance + this.indicatorHeight > this.bodyHeight) {
content.style.height = this.bodyHeight + 'px'
} else {
content.style.height = moveDistance + this.indicatorHeight + 'px'
}
} else {
if (this.bodyHeight - desc.clientHeight > this.tabContents[this.contentIndex].clientHeight + this.indicatorHeight) {
content.style.height = this.bodyHeight - desc.clientHeight + this.indicatorHeight + 'px'
} else {
return content.style.height = this.tabContents[this.contentIndex].clientHeight + this.indicatorHeight + 'px'
// if (this.tabContents[this.contentIndex].clientHeight + this.indicatorHeight > this.bodyHeight) {
// content.style.height = this.bodyHeight + 'px'
// } else {
// content.style.height = this.tabContents[this.contentIndex].clientHeight + this.indicatorHeight + 'px'
// }
}
}
},
first(e) {
if (this.baseActiveIndex !== 0) return
this.refs.header.style.transition = 'all 0s'
this.refs.header.style.height = this.refs.headerHeight + (e / 3) + 'px'
},
end() {
if (this.baseActiveIndex !== 0) return
this.refs.header.style.transition = 'all .3s'
this.refs.header.style.height = this.refs.headerHeight + 'px'
}
}
}
@ -206,5 +278,188 @@ $right-bg-color: #2e3244; @@ -206,5 +278,188 @@ $right-bg-color: #2e3244;
font-size: 1.6rem;
height: 100%;
width: 100%;
.no-more {
font-size: 1.4rem;
padding: 10px;
color: gray;
text-align: center;
}
.desc {
header {
height: 150px;
/* background-image: url('./imgs/header2.jpg'); */
background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxAQEBAQEBAPEBAPEBAPDw8QDw8NEA8OFRIWFhURFRUYHSggGBolGxUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGBAQGC0dHR0tLS0rKy0tLS0tLS0tKy0tKy0tLSstLS0tLS0tLSstLSstLS0tKy0tLS0tLS0tLisrN//AABEIAKgBLAMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAAAwECBAUGB//EAD8QAAIBAgMFAwgIBQQDAAAAAAABAgMRBBIhBSIxQXFRYbEGEyMyUnKBkRWCkqGissHRFEJic/AkNIPhBzNT/8QAGAEBAQEBAQAAAAAAAAAAAAAAAAECAwT/xAAeEQEBAQEAAwEBAQEAAAAAAAAAARECEiExA0FRE//aAAwDAQACEQMRAD8A+QgUTJTPS4mRLpi4stF6hDETAiIRBpiAEwZcZoRaJBKCLZSbF7BYuMaXYmxewWGGqWCxewWGGqWCxewWLhpeULDLENEw1SwWLWCxcNVsRYvYLDCUmtw+KKIvivV+KFxZnPbpL6MiWRCLNEXQRYsyAaVUiLY+pwM5YiAuQyAJuRcLlbhUhci4XC6oSicpKQZ1aBaBMUTBA1aJKIXEtYJqSWWsSkBVEl7EqBUq1LVdBmQStHc1wSauiudLyhlG5QyBCspGUdlBxKEuJGUdlCw0JyhlHZSHEBOQMg3KGUaaVlIyjsoZSrrHjI7j6ozUuBt2gtx9UYsOtPiY/rpz8PQ1R0KIeloRdLaIsXZE0DSprQzM2NGSSAoVLMqwIuQwIYUXJKkgMsCQqnV5PQci/UsMii0EQuBaIASisi1MIYTEESVTXG5akgo9haUdTLNLqcS+HlZ5eT4dSMjJnTv15dTSVqsFiaEsyT58H3MvYmsYXYiw2xGUaFWJyjFEtlGhOULFq1WEFeUkra6vUXQxdOfqzTfZez+Q1fGpcSLDspVxGslWJsXyhlKMW0l6N9V4mTBRvCXU3bUXon1j4mbZmsJe+l80Zv124+DsHx4CZLUfHgFLCQMOQENGOotWa2ZqvEsCWVZeRRgVZDJZDIqCxUsBFWndd5WjWtoy1SskZJO5Or7a5mxqqYrkhKryXMWkaKWFb4k+tZOYIYmb7zVh693Z6FqdJRWiBwTeqLljFsrVEmxlmpQV4u65pk0MdGTs9GXUxtpaM15TPT7TZSa5kqYWo2LZUOdircRrOF0t2XdLxNeQy1JRtx8R1LHU7b0rNaPRkTDMhGQj+Po+3+GX7EfSFH2/wy/YSmL5BONq+bpzn7K073yXzL/SFH2/wy/Y5flBioTpqMJN72Z6NXtwWvW/wLq887XnKk3JuUndvVt6kLu0JUS2Uy9T0mx8eqscsn6RfiXb1Oi4HjqLcWpR0ad0ej2ftZSj6XRrhJJtS/Zl15++P7G3IWVMX9JUfaf2ZfsStqUPaf2ZF1jxZdtQtRl1j4mPYsbwqe8vA17Yx1GdGUYSbk3FpZZLg0YtiYmEIzUna8lbRvSxNdOZ6NxMd5Pt1LR4DayUoprquguJZTqZVJcyvIu+YJaFQpmesjQJrrgaRnZRjGLZKKshkshkaQAABmSbGKhpcfTgkTU4Mni35+8jGnZnQw87o5w/CVLO3aTmr3zsdFC6k0tWRUqZTn1qrkzVrnzzp1fGSlotEZgL0aTm7Ixuu2SR2djScou/J6HVpLVGbA0FCKj8+psjErl9afNK3AmFBNapE0noaaS0XQxp4sUaEXmVlo9DNGjFVFmimtbpq66nUow1n736CcRR313psSr4q7TwNNUZSjCKe7ZpJfzI2fRtL/5w+yhGIlfD1Ivllt0zLQ7nmzNuL4PPbMwNN003CLeaau4pv12Y9qbNUvPxhBXjShKMUv5lK+nysd/Y9L0X16n52cbau3aWHxFRZXUlkhBqO6oyWur+KLOicV4+dKUcratmV13o04LBTqXUY3srt8ku/wCRXae1ZVnpCNOKbkoxu9Xxd3+lg2ZtepQcrKMlOOWSd1p1XM1vp0x0sJsqTnDNBqOV53xSunZnV2Zs+ClVi4qSjJZc0U2k9UK2b5UULU6c4ThpGLm8rgn2vuO5g6XpcR1p/kMb/p1dmY52KwUFUoJQglKUk1lWu7zHbSwFNUarVOCahJpqKunY142l6XDe/P8AIx21afoK39ufgPJznLi7XwdNYPMoRUstLeUUnq1zOf5N4eMo1M0U7NWuk+R3NtQ/0P1KXjE5fkxHdqdY+BfL034rYimk2krLs7jG1ZnSx3r/AFf1MNZczXLPc9FNFUWZRM6OSkuIqqtB0xcuBRkYtjJFGhUUZDJZDI0gAABca/aXdVNMzAZ118YCYOzTIII0dXq5mKACEmLU4OTSXM7+BwkYR7XzZz9nxitb6s7FE1I527TqSNajw6mWmbIcupnpeYuka8Ot1dEZ5LRmrC+quhz6rfPK+FhrP3l4FcRG1SHfGQ7CetU95eAYmN6kfck/Azvt08WHH07Rku23iejhaSTXB6o4WN1g308TpbGq3i4PjB6dH/jHXzUz2jY8PRfXqfnZ8s2vUzYivLtq1PzM+r7GXovr1PzM+R4t3qVH2zm/xMcfSzISFiQbOuMIPp3kxeUMz1bpYa7/AOJHzKJ9M8ipZqF37FJfZi1+hj9PUb5mtuOh6XDe/P8AIxu1o+grf25+BOPXpcN78/yMvtf/AG9b+3PwOW/GvFyttL/Q/Uo+MTk+TS3avWPgzsba/wBh/wAdHxicbybe7V6x8Gal9VM9jaL9LFdsPBmPF1LIbtSfp6futCq0FLR/sduXPpgnWfaZcVO8ePYbJ4SN/wCb7TOTU0bXY2jblPqt33hd95vw+HjKKbvdmGejfUYsqLsLmmjSTV2S6SGU8oyEj5QRGUYeRFwv3jnFEZBhsZwADLoAABaAAAQSpNcDTR2hOPO/UygNLHYobZ9qPxR0qe2KXtHlQH0kx7XD7TpVbxg9UuDOng57q6HzvDVnCSkuXgeupY1uEWnZWRjrhudSfXbwlXeqe8vAtOr6aC7YT/Q4NLGSUpNPmr356D6eNvUhJ6WjJeBjrix0575vpvxTeSSt/lzds+MoVU2t2ScXquPFGHEYhODtpdLxNNPGK6u8ut9dOBm243Pzm/W7Y0l5r69T87PmHlBh/NYqvDkqkmvdlvL7mj3+ycbBU7OUU89Tn/W7Hg/KWrnxdeX9dl0jFL9C/nvlWP0mcxzCQA9EcEJHv/8Ax5iHKlVi/wCSUEujTa/U8Cei8kce6fnYq6vlndd11b7zH6TeW+Ll9vc7RqJVMO3olOd2+W4ym08XTlQrKM4t+bnpfXh2HDxmIzunecm3J+s1aO6cjF7QhZxi81002lov35nDn89+u3XWfx2fKPGSjhqMFly1IRzX47qi1Y8/gNpTpKWXLaTjmvxduzUVjsZGcaaV80cyafDlaxmpVNGdZxkyuXXe3Y6GNxsalWnKN+CTXY2+BqkcBys0+yzO83odJ8c+rpVU4Vdb0urO7M4eIW8+pq/HKfXQwfqRObUW8+rOlhfUj/nM51Ti+rLfhPrXhvUXVkyJwq3PiwkajFKYtjJFGKRUAAisoABzx3AABAAAFAAAMAAAIA62y8XaOV624dDklqU3Fpoalehoyu5Plx+4XtKcmopLK7Pu00Of/FTXqvja/LWxWWIctea+/Ral9E116G0Jxp5Zauzte1uOnA1YjalKbvaXvZtPkcDf0v0/6LQnFJ3S1vq1omZ8Z9b/AOnUmNrxjV0pOLzNp2g1b4tO5x8bNyqTk9czzXso3vrwXA01dHa1+dhdWhfV3i3rZ9nBeBc/xnWUB6w3f9wyGHS7+prE8mZU2+CGYCvKnUTjo2nDX+pWv87P4GtIHYXnUneD+Lq2blKelrXlLR63aM/nNVpxWut9DU5X42fVJlZUou2jVuFtVqZ8V8pWWWl+9E0eY6thssb6t31srpLryE0OfwCol6y72vE9A+BwJ+tHqvE70ufd+xZGaozi4ji+p2Wzj4j1mVmN2G9SJzanF9WdPDLcj0OZV4vqW/Gefrfg/wD1/FkSJwT3PiyJGozSpi2XkUYpFQADNVlAAMO4AAAAABoAAB6AAAUBBIGRenroalTS4a9eFzCdfZdWm0lNJtN8UiVrmbcLw9PW8svCyyqMfnZal6OCbd3kte/q3fRX5HSn5qzSjHh7KJn5t8N3otPkSV1v55Pq1KMV3P72c/ajvO6vokte4ViMRFpyvJyUrK1rWMv8U+d+7Vm+Y499WzDCbmZ1u4iVZm9c8apSKqRn86DqsaY1Z+o1SXFX63MCqsmNZr9gY35m3w7npxXO4z6PXGLv1VjFHEvklfqdLBYxNapJrs1uY79e46flJuVzpQ31f2l4nUq1471mmy1TEwSu1f4I51bFO+7ouzLFGebb/F/Tmc/KvGo9bmGvLeYxzd+JmqPVnSuMjr4V7kehzKvrPqx+HqLKrmao9X1F+JzPbZhpbnxZMpGalLd+JLNSs2ezJMo2LZFxqzle4XF3Ai+JQBYmxzdUATYiwAAWCwAAWCwAAWAugAAIoAAA00MZJaPVD8RWzJW4czn2G0arXQG1E0VTGOzFyNM4GQAWGqAABosmFypITF6cuI+lO1zOmTGYXGmVUTJlc5VzBV7ipE5irCYZFi5PUkgEi8XoWzC0wuXU8V2yLlAGr4r3C5QBpgAAMNgAAAAAAAAAAAAAAAAAAAAAAAAACYAAAoAAAAAAAAAJgAACgAAAAAAAAAAAAJgAABj/2Q==');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
justify-content: space-between;
/*background: url("../../assets/img/icon/top-bg.jpg");*/
padding: 20px;
box-sizing: border-box;
img {
border-radius: 50%;
padding: 5px;
background: #524a4a;
height: 20px;
width: 20px;
&:nth-child(1) {
transform: rotate(180deg);
}
}
}
.detail {
background: $left-bg-color;
padding: 0 20px;
.head {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
transform: translateY(-20px);
.head-image {
background: black;
padding: 5px;
border-radius: 50%;
width: 80px;
height: 80px;
}
.my-buttons {
div {
display: flex;
align-items: center;
float: left;
border-radius: 2px;
background: #676767;
margin-right: 5px;
img {
padding: 6px;
height: 20px;
}
span {
color: #cdcdcd;
}
}
}
}
.description {
color: white;
transform: translateY(-20px);
.number {
padding-bottom: 10px;
border-bottom: 1px solid gray;
.jrtt {
float: right;
img {
height: 10px;
width: 10px;
}
span {
margin: 0 5px;
}
}
}
.info {
display: flex;
align-items: center;
div {
display: flex;
align-items: center;
float: left;
border-radius: 2px;
background: #676767;
margin-right: 5px;
padding: 2px 4px;
img {
height: 10px;
margin-right: 3px;
}
span {
color: #cdcdcd;
}
}
}
.heat {
span {
margin-right: 10px;
}
}
}
}
}
ul {
height: 100%;
overflow: auto;
padding: 0;
.line {
height: 1px;
background: #cccccc;
opacity: .1;
margin: 5px 20px;
}
.service {
transition: all .3s;
overflow: hidden;
}
li {
background: $right-bg-color;
padding: 20px;
list-style: none;
display: flex;
align-items: center;
&:active {
background: #454b65;
}
img {
height: 30px;
width: 30px;
margin-right: 20px;
}
&.exception {
justify-content: space-between;
.triangle {
transform: translateY(3px);
width: 0;
height: 0;
border-top: 7px solid #cccccc;
border-right: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7px solid transparent;
}
}
}
}
}
</style>

44
src/pages/home/SlideList.vue
Unescape View File

@ -20,27 +20,27 @@ @@ -20,27 +20,27 @@
</div>
<div class="loading" :style="loadingStyle">AA</div>
</div>
<div class="indicator-me" v-if="showIndicator && indicatorType === 'me'">
<div class="indicator-me" :class="indicatorFixed?'fixed':''" v-if="showIndicator && indicatorType === 'me'">
<div class="tabs" ref="tabs">
<div class="tab"
:class="currentSlideItemIndex === 0?'active':''"
@click="changeIndex(false,0)">
<span>关注</span></div>
<span>作品</span></div>
<div class="tab"
:class="currentSlideItemIndex === 1?'active':''"
@click.stop="changeIndex(false,1)">
<span>推荐</span>
<span>私密</span>
</div>
<div class="tab"
:class="currentSlideItemIndex === 2?'active':''"
@click="changeIndex(false,2)">
<span>推荐</span>
@click="changeIndex(false,2,$event)">
<span>喜欢</span>
</div>
</div>
<div class="indicator" ref="indicator"></div>
</div>
<div id="base-slide-list" ref="slideList"
:style="{'flex-direction':direction}"
:style="{'flex-direction':direction,marginTop:indicatorFixed?'42px':'0'}"
@touchstart="touchStart($event)"
@touchmove="touchMove($event)"
@touchend="touchEnd($event)">
@ -61,6 +61,10 @@ export default { @@ -61,6 +61,10 @@ export default {
type: Boolean,
default: () => false
},
indicatorFixed: {
type: Boolean,
default: () => false
},
indicatorType: {
type: String,
default: () => 'home'
@ -152,6 +156,7 @@ export default { @@ -152,6 +156,7 @@ export default {
},
watch: {
activeIndex() {
// console.log('activeIndex')
this.changeIndex()
},
},
@ -161,8 +166,7 @@ export default { @@ -161,8 +166,7 @@ export default {
this.changeIndex(true)
},
methods: {
changeIndex(init = false, index = null) {
console.log(111)
changeIndex(init = false, index = null, e) {
this.currentSlideItemIndex = index !== null ? index : this.activeIndex
!init && this.$setCss(this.slideList, 'transition-duration', `300ms`)
if (this.direction === 'row') {
@ -173,6 +177,8 @@ export default { @@ -173,6 +177,8 @@ export default {
} else {
this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex) + this.moveYDistance}px, 0px)`)
}
this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
},
initTabs() {
let tabs = this.$refs.tabs
@ -225,6 +231,10 @@ export default { @@ -225,6 +231,10 @@ export default {
this.homeLoadingMoveYDistance = this.moveYDistance
}
if (!this.isDrawDown) {
this.$attrs['onFirst'] && this.$emit('first', this.moveYDistance)
}
if (this.direction === 'row') {
if (this.isCanRightWiping) {
// //禁止在index=0页面的时候，向左划
@ -240,10 +250,8 @@ export default { @@ -240,10 +250,8 @@ export default {
}
} else {
if (this.isCanDownWiping) {
if (this.currentSlideItemIndex === 0 && !this.isDrawDown) {//在第一个item，并且想往下划。
this.$attrs['onFirst'] && this.$emit('first', this.moveYDistance)
return
}
if (this.currentSlideItemIndex === 0 && !this.isDrawDown)return; //在第一个item，并且想往下划。
if (this.virtual) {
if (this.currentSlideItemIndex === this.total - 1 && this.isDrawDown) return
} else {
@ -279,9 +287,13 @@ export default { @@ -279,9 +287,13 @@ export default {
if (this.direction === 'row') {
if (this.currentSlideItemIndex === 0 && !this.isDrawRight) return
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) return
// console.log('row-end')
this.$stopPropagation(e)//todo 如果是嵌套竖状的slide，会出问题,会到moveYDistance停下，不会移到
//21/06/28 发现一个bug，就是会把所有的点击事件，给失效了。。。//已解决
// this.$stopPropagation(e)//todo 如果是嵌套竖状的slide，会出问题,会到moveYDistance停下，不会移到
//this.getWidth(this.currentSlideItemIndex)位置，但是不禁示冒泡的话，又会出现划动过快，把父级也会移动。
if (this.moveXDistance !== 0) {
this.$stopPropagation(e)
}
if (Math.abs(this.moveXDistance) < 20) gapTime = 1000
if (Math.abs(this.moveXDistance) > (this.wrapperWidth / 3)) gapTime = 100
if (gapTime < 150) {
@ -501,6 +513,10 @@ export default { @@ -501,6 +513,10 @@ export default {
}
}
.indicator-me.fixed {
position: fixed;
}
}
</style>
Write Preview
Loading…
Cancel
Save