MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
zyronon 2023-02-08 01:41:40 +08:00
parent e0990c78e3
commit dfec5e34f3
31 changed files with 525 additions and 585 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/assets/less/custom.less
View File

@ -74,66 +74,6 @@
} }
} }
.button {
color: white;
height: 4rem;
line-height: 4rem;
text-align: center;
border-radius: .3rem;
//width: 100%;
font-size: 1.4rem;
&.primary {
background: @primary-btn-color;
&:active {
background: @disable-primary-btn-color;
}
}
&.no-active {
&:active {
&.primary {
background: @primary-btn-color;
}
&.dark {
background: @second-btn-color;
}
&.white {
background: white;
}
}
}
&.disabled {
&.primary {
background: gainsboro;
color: white;
}
&:active {
&.primary {
background: gainsboro;
}
}
}
&.dark {
background: @second-btn-color;
&:active {
background: @second-btn-color-tran;
}
}
&.white {
background: white;
color: black;
border: 1px solid gainsboro;
}
}
.not-read { .not-read {
@width: .7rem; @width: .7rem;

206
src/pages/me/Me.less
View File

@ -7,7 +7,7 @@
.fade1-enter-from, .fade1-enter-from,
.fade1-leave-to { .fade1-leave-to {
transform: translateY(10px); transform: translateY(10rem);
opacity: 0; opacity: 0;
} }
@ -15,7 +15,7 @@
background: @main-bg; background: @main-bg;
height: 100%; height: 100%;
width: 100%; width: 100%;
font-size: 1.4rem; font-size: 14rem;
.preview-img { .preview-img {
position: fixed; position: fixed;
@ -35,11 +35,11 @@
.download { .download {
position: absolute; position: absolute;
bottom: 2rem; bottom: 20rem;
right: 2rem; right: 20rem;
padding: .3rem; padding: 3rem;
background: @second-btn-color-tran; background: @second-btn-color-tran;
width: 2rem; width: 20rem;
} }
} }
@ -56,33 +56,33 @@
.scroll { .scroll {
.notice { .notice {
font-size: 1.2rem; font-size: 12rem;
height: 4rem; height: 40rem;
color: @second-text-color; color: @second-text-color;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img { img {
height: 1.2rem; height: 12rem;
margin-right: .5rem; margin-right: 5rem;
} }
} }
.collect { .collect {
padding: .7rem; padding: 7rem;
.video { .video {
background: @active-main-bg; background: @active-main-bg;
border-radius: .5rem; border-radius: 5rem;
padding: 1rem; padding: 10rem;
margin-bottom: .7rem; margin-bottom: 7rem;
.top { .top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 10rem;
.left { .left {
display: flex; display: flex;
@ -90,20 +90,20 @@
color: gainsboro; color: gainsboro;
img { img {
height: 2rem; height: 20rem;
margin-right: .5rem; margin-right: 5rem;
} }
} }
.right { .right {
font-size: 1.4rem; font-size: 14rem;
display: flex; display: flex;
align-items: center; align-items: center;
color: @second-text-color; color: @second-text-color;
img { img {
height: 1.5rem; height: 15rem;
width: 1.5rem; width: 15rem;
} }
} }
} }
@ -114,13 +114,13 @@
.item { .item {
height: calc(33.33vw * 1.3); height: calc(33.33vw * 1.3);
padding: .2rem; padding: 2rem;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
.poster { .poster {
object-fit: cover; object-fit: cover;
border-radius: .4rem; border-radius: 4rem;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
@ -129,16 +129,16 @@
.num { .num {
color: white; color: white;
position: absolute; position: absolute;
bottom: .5rem; bottom: 5rem;
left: .5rem; left: 5rem;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 1.4rem; font-size: 14rem;
.love { .love {
width: 1.4rem; width: 14rem;
height: 1.4rem; height: 14rem;
margin-right: .5rem; margin-right: 5rem;
} }
} }
} }
@ -147,14 +147,14 @@
.music { .music {
background: @active-main-bg; background: @active-main-bg;
border-radius: .5rem; border-radius: 5rem;
padding: 1rem; padding: 10rem;
.top { .top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 10rem;
.left { .left {
display: flex; display: flex;
@ -162,8 +162,8 @@
color: gainsboro; color: gainsboro;
img { img {
height: 1.5rem; height: 15rem;
margin-right: .5rem; margin-right: 5rem;
} }
} }
@ -173,8 +173,8 @@
color: @second-text-color; color: @second-text-color;
img { img {
height: 1.5rem; height: 15rem;
width: 1.5rem; width: 15rem;
} }
} }
} }
@ -184,19 +184,19 @@
grid-template-columns: 33.33% 33.33% 33.33%; grid-template-columns: 33.33% 33.33% 33.33%;
.item { .item {
padding: .2rem; padding: 2rem;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
.poster { .poster {
border-radius: .4rem; border-radius: 4rem;
width: 100%; width: 100%;
height: calc((100vw - 3.4rem) / 3); height: calc((100vw - 34rem) / 3);
display: block; display: block;
} }
.title { .title {
margin-top: .5rem; margin-top: 5rem;
color: @second-text-color; color: @second-text-color;
} }
} }
@ -214,8 +214,8 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 4.6rem; height: 46rem;
padding: 0 1.5rem; padding: 0 15rem;
background: transparent; background: transparent;
transition: all .2s; transition: all .2s;
@ -232,28 +232,28 @@
} }
.left { .left {
font-size: 1.2rem; font-size: 12rem;
height: 2.6rem; height: 26rem;
display: flex; display: flex;
padding-right: 1.3rem; padding-right: 13rem;
padding-left: .5rem; padding-left: 5rem;
align-items: center; align-items: center;
border-radius: 2rem; border-radius: 20rem;
background: rgba(82, 80, 80, 0.5); background: rgba(82, 80, 80, 0.5);
img { img {
padding: .6rem; padding: 6rem;
width: 1.8rem; width: 18rem;
} }
} }
.right { .right {
img { img {
margin-left: 2rem; margin-left: 20rem;
border-radius: 50%; border-radius: 50%;
background: rgba(82, 80, 80, 0.5); background: rgba(82, 80, 80, 0.5);
padding: .6rem; padding: 6rem;
width: 1.8rem; width: 18rem;
} }
} }
} }
@ -261,7 +261,7 @@
.desc { .desc {
header { header {
color: white; color: white;
height: 12rem; height: 120rem;
background-image: url('../../assets/img/header-bg.png'); background-image: url('../../assets/img/header-bg.png');
//background-image: url('data:image/jpeg;base64,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'); //background-image: url('data:image/jpeg;base64,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');
background-size: cover; background-size: cover;
@ -272,10 +272,10 @@
} }
.detail { .detail {
transform: translateY(-1rem); transform: translateY(-10rem);
background: @main-bg; background: @main-bg;
padding: 0 2rem 0 2rem; padding: 0 20rem 0 20rem;
border-radius: 1rem 1rem 0 0; border-radius: 10rem 10rem 0 0;
.head { .head {
width: 100%; width: 100%;
@ -283,34 +283,34 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
transform: translateY(-2rem); transform: translateY(-20rem);
.head-image { .head-image {
background: black; background: black;
padding: 2px; padding: 2px;
border-radius: 50%; border-radius: 50%;
width: 8rem; width: 80rem;
height: 8rem; height: 80rem;
} }
.heat { .heat {
margin-top: 1rem; margin-top: 10rem;
width: calc(100% - 12rem); width: calc(100% - 120rem);
color: @second-text-color; color: @second-text-color;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.num { .num {
margin-top: .5rem; margin-top: 5rem;
color: white; color: white;
font-size: 1.6rem; font-size: 16rem;
font-weight: bold; font-weight: bold;
margin-right: 3px; margin-right: 3px;
} }
.text { .text {
font-size: 1.2rem; font-size: 12rem;
margin-right: 10px; margin-right: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -322,20 +322,20 @@
} }
.description { .description {
font-size: 1.2rem; font-size: 12rem;
color: white; color: white;
transform: translateY(-2rem); transform: translateY(-20rem);
.number { .number {
color: @second-text-color; color: @second-text-color;
padding-bottom: 1rem; padding-bottom: 10rem;
border-bottom: 1px solid @line-color; border-bottom: 1px solid @line-color;
display: flex; display: flex;
align-items: center; align-items: center;
img { img {
width: 1.4rem; width: 14rem;
margin-left: .5rem; margin-left: 5rem;
} }
} }
@ -345,11 +345,11 @@
color: @second-text-color; color: @second-text-color;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: .5rem; margin-bottom: 5rem;
img { img {
height: 1.2rem; height: 12rem;
margin-left: .6rem; margin-left: 6rem;
} }
.text { .text {
@ -362,17 +362,17 @@
display: flex; display: flex;
.item { .item {
padding: .2rem .5rem; padding: 2rem 5rem;
border-radius: .2rem; border-radius: 2rem;
background: @second-btn-color-tran; background: @second-btn-color-tran;
font-size: 1rem; font-size: 10rem;
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: .5rem; margin-right: 5rem;
img { img {
height: 1rem; height: 10rem;
margin-right: .2rem; margin-right: 2rem;
} }
} }
} }
@ -384,17 +384,17 @@
.button { .button {
position: relative; position: relative;
width: 49%; width: 49%;
font-size: 1.2rem; font-size: 12rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: .2rem; border-radius: 2rem;
background: @second-btn-color; background: @second-btn-color;
height: 3rem; height: 30rem;
color: white; color: white;
.not-read { .not-read {
right: 4.5rem; right: 45rem;
position: absolute; position: absolute;
} }
} }
@ -403,18 +403,18 @@
.other { .other {
display: flex; display: flex;
margin-bottom: 2rem; margin-bottom: 20rem;
.item { .item {
margin-right: 2.5rem; margin-right: 25rem;
display: flex; display: flex;
img { img {
margin-right: .8rem; margin-right: 8rem;
border-radius: .4rem; border-radius: 4rem;
background: @second-btn-color-tran; background: @second-btn-color-tran;
padding: .8rem; padding: 8rem;
height: 2.2rem; height: 22rem;
} }
.right { .right {
@ -424,12 +424,12 @@
.top { .top {
color: white; color: white;
font-size: 1.4rem; font-size: 14rem;
} }
.bottom { .bottom {
color: @second-text-color; color: @second-text-color;
font-size: 1.2rem; font-size: 12rem;
} }
} }
} }
@ -439,7 +439,7 @@
.ul { .ul {
font-size: 1.4rem; font-size: 14rem;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
@ -461,11 +461,11 @@
box-sizing: border-box; box-sizing: border-box;
background: @main-bg; background: @main-bg;
width: 100%; width: 100%;
padding: 1rem 2rem; padding: 10rem 20rem;
list-style: none; list-style: none;
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 4rem; line-height: 40rem;
&:nth-last-child(1) { &:nth-last-child(1) {
margin-bottom: 90px; margin-bottom: 90px;
@ -485,13 +485,13 @@
.more-function { .more-function {
box-sizing: border-box; box-sizing: border-box;
font-size: 1.2rem; font-size: 12rem;
width: 100%; width: 100%;
position: absolute; position: absolute;
background: @main-bg; background: @main-bg;
.title { .title {
padding: 2rem 0 1rem 2rem; padding: 20rem 0 10rem 20rem;
color: gray; color: gray;
} }
@ -511,8 +511,8 @@
img { img {
border-radius: 50%; border-radius: 50%;
background: @second-btn-color-tran; background: @second-btn-color-tran;
padding: .6rem; padding: 6rem;
height: 1.6rem; height: 16rem;
margin-bottom: 15px; margin-bottom: 15px;
} }
} }
@ -520,7 +520,7 @@
} }
.button-ctn { .button-ctn {
font-size: 1.4rem; font-size: 14rem;
z-index: 99999; z-index: 99999;
width: 70vw; width: 70vw;
position: absolute; position: absolute;
@ -529,10 +529,10 @@
.button { .button {
box-sizing: border-box; box-sizing: border-box;
width: calc(100% - 4rem); width: calc(100% - 40rem);
background: @second-btn-color; background: @second-btn-color;
margin: 2rem; margin: 20rem;
height: 4.5rem; height: 45rem;
border-radius: 3px; border-radius: 3px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -540,9 +540,9 @@
color: white; color: white;
img { img {
height: 25px; height: 25rem;
width: 25px; width: 25rem;
margin-right: 15px; margin-right: 15rem;
} }
} }
} }

2
src/pages/me/Me.vue
View File

@ -420,7 +420,7 @@ export default {
return this.$store.state.bodyWidth return this.$store.state.bodyWidth
}, },
videoSlideRowListStyle() { videoSlideRowListStyle() {
return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(100vh - 14.6rem)'} return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(100vh - 146rem)'}
}, },
SlideItemStyle() { SlideItemStyle() {
if (this.tempScroll || this.isScroll) return {overflow: 'auto'} if (this.tempScroll || this.isScroll) return {overflow: 'auto'}

30
src/pages/me/MyCard.vue
View File

@ -105,7 +105,7 @@ export default {
bottom: 0; bottom: 0;
top: 0; top: 0;
overflow: auto; overflow: auto;
font-size: 1.4rem; font-size: 14rem;
.header { .header {
position: fixed; position: fixed;
@ -113,16 +113,16 @@ export default {
top: 0; top: 0;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 0 1.5rem; padding: 0 15rem;
height: 6rem; height: 60rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.share { .share {
width: 2.4rem; width: 24rem;
height: 2.4rem; height: 24rem;
margin-left: 1.5rem; margin-left: 15rem;
} }
} }
@ -153,15 +153,15 @@ export default {
.name { .name {
font-weight: bold; font-weight: bold;
margin-top: 2rem; margin-top: 20rem;
font-size: 1.6rem; font-size: 16rem;
color: white; color: white;
} }
.notice { .notice {
color: white; color: white;
font-size: 1.4rem; font-size: 14rem;
margin-top: 2rem; margin-top: 20rem;
opacity: .4; opacity: .4;
} }
@ -170,7 +170,7 @@ export default {
.footer { .footer {
position: absolute; position: absolute;
bottom: 3rem; bottom: 30rem;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
width: 100%; width: 100%;
@ -180,20 +180,20 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
font-size: 1.2rem; font-size: 12rem;
.wrapper { .wrapper {
background: rgba(252, 250, 250, 0.3); background: rgba(252, 250, 250, 0.3);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
padding: 1.8rem; padding: 18rem;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 1rem; margin-bottom: 10rem;
} }
img { img {
width: 2.6rem; width: 26rem;
} }
} }
} }

74
src/pages/me/MyMusic.vue
View File

@ -211,14 +211,14 @@ export default {
top: 0; top: 0;
overflow: auto; overflow: auto;
color: white; color: white;
font-size: 1.4rem; font-size: 14rem;
.header { .header {
z-index: 9; z-index: 9;
position: fixed; position: fixed;
width: 100vw; width: 100vw;
top: 0; top: 0;
height: 5rem; height: 50rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -236,17 +236,17 @@ export default {
} }
.my-collect { .my-collect {
margin-top: 5rem; margin-top: 50rem;
color: rgba(88, 88, 96); color: rgba(88, 88, 96);
position: relative; position: relative;
.wrapper { .wrapper {
padding: @padding-page; padding: @padding-page;
padding-bottom: 8rem; padding-bottom: 80rem;
} }
.play-all { .play-all {
margin-bottom: 2rem; margin-bottom: 20rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -257,19 +257,19 @@ export default {
align-items: center; align-items: center;
img { img {
width: 3rem; width: 30rem;
margin-right: 1rem; margin-right: 10rem;
} }
.num { .num {
font-size: 1.3rem; font-size: 13rem;
color: gray; color: gray;
margin-left: .5rem; margin-left: 5rem;
} }
} }
.menu { .menu {
height: 2rem; height: 20rem;
} }
} }
@ -278,21 +278,21 @@ export default {
color: white; color: white;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 1.5rem; margin-bottom: 15rem;
.left { .left {
display: flex; display: flex;
.cover-wrapper { .cover-wrapper {
margin-right: 1rem; margin-right: 10rem;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.cover { .cover {
border-radius: .2rem; border-radius: 2rem;
@width: 6rem; @width: 60rem;
width: @width; width: @width;
object-fit: cover; object-fit: cover;
height: @width; height: @width;
@ -312,7 +312,7 @@ export default {
} }
.author, .desc-bottom { .author, .desc-bottom {
font-size: 1.2rem; font-size: 12rem;
color: @second-text-color; color: @second-text-color;
} }
@ -321,14 +321,14 @@ export default {
align-items: center; align-items: center;
.tag { .tag {
font-size: 1rem; font-size: 10rem;
background: @second-btn-color-tran; background: @second-btn-color-tran;
padding: .2rem .5rem; padding: 2rem 5rem;
margin-right: .5rem; margin-right: 5rem;
} }
.duration { .duration {
margin-right: 1.4rem; margin-right: 14rem;
position: relative; position: relative;
} }
} }
@ -340,14 +340,14 @@ export default {
align-items: center; align-items: center;
.playing-icon { .playing-icon {
width: 2.4rem; width: 24rem;
} }
.collect-icon { .collect-icon {
margin-left: 3rem; margin-left: 30rem;
img { img {
width: 2.4rem; width: 24rem;
} }
} }
} }
@ -357,7 +357,7 @@ export default {
.recommend { .recommend {
color: white; color: white;
margin: 3rem 0; margin: 30rem 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -368,9 +368,9 @@ export default {
justify-content: space-between; justify-content: space-between;
.auto-play { .auto-play {
font-size: 1.3rem; font-size: 13rem;
color: @second-text-color; color: @second-text-color;
margin-right: 1rem; margin-right: 10rem;
} }
} }
@ -386,7 +386,7 @@ export default {
background: rgba(56, 59, 68); background: rgba(56, 59, 68);
.playing-wrapper { .playing-wrapper {
transform: translateY(-1rem); transform: translateY(-10rem);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -394,13 +394,13 @@ export default {
.cover-wrapper { .cover-wrapper {
background: rgba(56, 59, 68); background: rgba(56, 59, 68);
padding: .7rem; padding: 7rem;
border-radius: 50%; border-radius: 50%;
.cover { .cover {
background: rgba(97, 98, 103); background: rgba(97, 98, 103);
padding: .3rem; padding: 3rem;
@width: 5rem; @width: 50rem;
height: @width; height: @width;
width: @width; width: @width;
object-fit: cover; object-fit: cover;
@ -409,20 +409,20 @@ export default {
} }
.name { .name {
margin: 0 1rem; margin: 0 10rem;
flex: 1; flex: 1;
} }
.option { .option {
width: 3.8rem; width: 38rem;
height: 3.8rem; height: 38rem;
margin-right: 2rem; margin-right: 20rem;
} }
.menu-list { .menu-list {
width: 2.8rem; width: 28rem;
height: 2.8rem; height: 28rem;
} }
} }
} }
@ -437,13 +437,13 @@ export default {
.dialog-header { .dialog-header {
z-index: 9; z-index: 9;
font-size: 1.6rem; font-size: 16rem;
position: fixed; position: fixed;
top: 0; top: 0;
width: 100vw; width: 100vw;
padding: @padding-page; padding: @padding-page;
box-sizing: border-box; box-sizing: border-box;
height: 5rem; height: 50rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;

12
src/pages/me/MyRequestUpdate.vue
View File

@ -50,17 +50,17 @@ export default {
top: 0; top: 0;
overflow: auto; overflow: auto;
color: white; color: white;
font-size: 1.4rem; font-size: 14rem;
.content { .content {
padding: 6rem 1.5rem 6rem 1.5rem; padding: 60rem 15rem 60rem 15rem;
.request { .request {
.list { .list {
.item { .item {
padding: 1rem 0; padding: 10rem 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -69,18 +69,18 @@ export default {
.left { .left {
display: flex; display: flex;
align-items: center; align-items: center;
@width: 4.2rem; @width: 42rem;
img { img {
width: @width; width: @width;
height: @width; height: @width;
border-radius: 50%; border-radius: 50%;
margin-right: 1rem; margin-right: 10rem;
} }
} }
.time{ .time{
font-size: 1.2rem; font-size: 12rem;
color: @second-text-color; color: @second-text-color;
} }
} }

38
src/pages/me/RequestUpdate.vue
View File

@ -6,7 +6,7 @@
</template> </template>
<template v-slot:right> <template v-slot:right>
<div> <div>
<img src="../../assets/img/icon/menu-gray.png" style="width: 2rem;" @click="isShowOption = true"> <img src="../../assets/img/icon/menu-gray.png" style="width: 20rem;" @click="isShowOption = true">
</div> </div>
</template> </template>
</BaseHeader> </BaseHeader>
@ -40,7 +40,7 @@
<from-bottom-dialog <from-bottom-dialog
page-id="RequestUpdate" page-id="RequestUpdate"
height="16rem" height="160rem"
:show-heng-gang="false" :show-heng-gang="false"
mode="white" mode="white"
v-model="isShowOption"> v-model="isShowOption">
@ -107,10 +107,10 @@ export default {
top: 0; top: 0;
overflow: auto; overflow: auto;
color: white; color: white;
font-size: 1.4rem; font-size: 14rem;
.content { .content {
padding: 6rem 1.5rem 6rem 1.5rem; padding: 60rem 15rem 60rem 15rem;
.none { .none {
display: flex; display: flex;
@ -118,8 +118,8 @@ export default {
align-items: center; align-items: center;
img { img {
margin-top: 10rem; margin-top: 100rem;
height: 12rem; height: 120rem;
} }
} }
@ -128,7 +128,7 @@ export default {
margin-top: @padding-page; margin-top: @padding-page;
.item { .item {
padding: 1rem 0; padding: 10rem 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -137,18 +137,18 @@ export default {
.left { .left {
display: flex; display: flex;
align-items: center; align-items: center;
@width: 4.2rem; @width: 42rem;
img { img {
width: @width; width: @width;
height: @width; height: @width;
border-radius: 50%; border-radius: 50%;
margin-right: 1rem; margin-right: 10rem;
} }
} }
.time { .time {
font-size: 1.2rem; font-size: 12rem;
color: @second-text-color; color: @second-text-color;
} }
} }
@ -156,19 +156,19 @@ export default {
} }
.title { .title {
margin-top: 1rem; margin-top: 10rem;
font-size: 1.6rem; font-size: 16rem;
} }
.subtitle { .subtitle {
margin-top: 1rem; margin-top: 10rem;
font-size: 1.4rem; font-size: 14rem;
color: @second-text-color; color: @second-text-color;
} }
} }
.l-row { .l-row {
padding: 1.5rem; padding: 15rem;
color: black; color: black;
text-align: center; text-align: center;
@ -178,13 +178,13 @@ export default {
} }
.space { .space {
height: 1rem; height: 10rem;
background: whitesmoke; background: whitesmoke;
} }
.buttons { .buttons {
position: fixed; position: fixed;
padding: 0 1.5rem 1.5rem 1.5rem; padding: 0 15rem 15rem 15rem;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
@ -196,11 +196,11 @@ export default {
flex: 1; flex: 1;
&:nth-child(1) { &:nth-child(1) {
margin-right: 0.5rem; margin-right: 5rem;
} }
&:nth-child(2) { &:nth-child(2) {
margin-left: 0.5rem; margin-left: 5rem;
} }
} }
} }

250
src/pages/me/Uploader.less
View File

@ -21,7 +21,7 @@
background: @main-bg; background: @main-bg;
height: 100%; height: 100%;
width: 100%; width: 100%;
font-size: 1.4rem; font-size: 14rem;
.preview-img { .preview-img {
z-index: 3; z-index: 3;
@ -40,11 +40,11 @@
.download { .download {
position: absolute; position: absolute;
bottom: 2rem; bottom: 20rem;
right: 2rem; right: 20rem;
padding: .3rem; padding: 3rem;
background: @second-btn-color-tran; background: @second-btn-color-tran;
width: 2rem; width: 20rem;
} }
} }
@ -60,33 +60,33 @@
.scroll { .scroll {
.notice { .notice {
font-size: 1.2rem; font-size: 12rem;
height: 4rem; height: 40rem;
color: @second-text-color; color: @second-text-color;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img { img {
height: 1.2rem; height: 12rem;
margin-right: .5rem; margin-right: 5rem;
} }
} }
.collect { .collect {
padding: .7rem; padding: 7rem;
.video { .video {
background: @active-main-bg; background: @active-main-bg;
border-radius: .5rem; border-radius: 5rem;
padding: 1rem; padding: 10rem;
margin-bottom: .7rem; margin-bottom: 7rem;
.top { .top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 10rem;
.left { .left {
display: flex; display: flex;
@ -94,8 +94,8 @@
color: gainsboro; color: gainsboro;
img { img {
height: 2rem; height: 20rem;
margin-right: .5rem; margin-right: 5rem;
} }
} }
@ -112,12 +112,12 @@
.item { .item {
height: calc(33.33vw * 1.3); height: calc(33.33vw * 1.3);
padding: .2rem; padding: 2rem;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
.poster { .poster {
border-radius: .4rem; border-radius: 4rem;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
@ -126,16 +126,16 @@
.num { .num {
color: white; color: white;
position: absolute; position: absolute;
bottom: .5rem; bottom: 5rem;
left: .5rem; left: 5rem;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 1.4rem; font-size: 14rem;
.love { .love {
width: 1.4rem; width: 14rem;
height: 1.4rem; height: 14rem;
margin-right: .5rem; margin-right: 5rem;
} }
} }
} }
@ -144,14 +144,14 @@
.audio { .audio {
background: @active-main-bg; background: @active-main-bg;
border-radius: .5rem; border-radius: 5rem;
padding: 1rem; padding: 10rem;
.top { .top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 10rem;
.left { .left {
display: flex; display: flex;
@ -159,8 +159,8 @@
color: gainsboro; color: gainsboro;
img { img {
height: 1.5rem; height: 15rem;
margin-right: .5rem; margin-right: 5rem;
} }
} }
@ -176,19 +176,19 @@
grid-template-columns: 33.33% 33.33% 33.33%; grid-template-columns: 33.33% 33.33% 33.33%;
.item { .item {
padding: .2rem; padding: 2rem;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
.poster { .poster {
border-radius: .4rem; border-radius: 4rem;
width: 100%; width: 100%;
height: calc((100vw - 3.4rem) / 3); height: calc((100vw - 34rem) / 3);
display: block; display: block;
} }
.title { .title {
margin-top: .5rem; margin-top: 5rem;
color: @second-text-color; color: @second-text-color;
} }
} }
@ -205,8 +205,8 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 4.6rem; height: 46rem;
padding: 0 1.5rem; padding: 0 15rem;
background: transparent; background: transparent;
transition: all .2s; transition: all .2s;
@ -230,18 +230,18 @@
transform: rotate(180deg); transform: rotate(180deg);
border-radius: 50%; border-radius: 50%;
background: rgba(82, 80, 80, 0.5); background: rgba(82, 80, 80, 0.5);
padding: .6rem; padding: 6rem;
width: 1.8rem; width: 18rem;
} }
} }
.follow-btn { .follow-btn {
color: white; color: white;
position: absolute; position: absolute;
font-size: 1.2rem; font-size: 12rem;
padding: .3rem 1.2rem; padding: 3rem 12rem;
border-radius: .2rem; border-radius: 2rem;
right: 6rem; right: 60rem;
background: @primary-btn-color; background: @primary-btn-color;
&.followed { &.followed {
@ -257,27 +257,27 @@
position: relative; position: relative;
.request { .request {
font-size: 1.2rem; font-size: 12rem;
height: 2.6rem; height: 26rem;
display: flex; display: flex;
padding-right: 1.3rem; padding-right: 13rem;
padding-left: .5rem; padding-left: 5rem;
align-items: center; align-items: center;
border-radius: 2rem; border-radius: 20rem;
background: rgba(82, 80, 80, 0.5); background: rgba(82, 80, 80, 0.5);
img { img {
padding: .6rem; padding: 6rem;
width: 1.8rem; width: 18rem;
} }
} }
.menu { .menu {
margin-left: 1.5rem; margin-left: 15rem;
border-radius: 50%; border-radius: 50%;
background: rgba(82, 80, 80, 0.5); background: rgba(82, 80, 80, 0.5);
padding: .6rem; padding: 6rem;
width: 1.8rem; width: 18rem;
} }
} }
} }
@ -285,7 +285,7 @@
.desc { .desc {
header { header {
color: white; color: white;
height: 12rem; height: 120rem;
background-image: url('../../assets/img/header-bg.png'); background-image: url('../../assets/img/header-bg.png');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -294,12 +294,12 @@
} }
.detail { .detail {
transform: translateY(-1rem); transform: translateY(-10rem);
background: @main-bg; background: @main-bg;
border-radius: 1rem 1rem 0 0; border-radius: 10rem 10rem 0 0;
.detail-wrapper { .detail-wrapper {
padding: 0 2rem 1.5rem 2rem; padding: 0 20rem 15rem 20rem;
.head { .head {
width: 100%; width: 100%;
@ -307,34 +307,34 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
transform: translateY(-2rem); transform: translateY(-20rem);
.head-image { .head-image {
background: black; background: black;
padding: 2px; padding: 2px;
border-radius: 50%; border-radius: 50%;
width: 8rem; width: 80rem;
height: 8rem; height: 80rem;
} }
.heat { .heat {
margin-top: 1rem; margin-top: 10rem;
width: calc(100% - 12rem); width: calc(100% - 120rem);
color: @second-text-color; color: @second-text-color;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.num { .num {
margin-top: .5rem; margin-top: 5rem;
color: white; color: white;
font-size: 1.6rem; font-size: 16rem;
font-weight: bold; font-weight: bold;
margin-right: 3px; margin-right: 3px;
} }
.text { .text {
font-size: 1.2rem; font-size: 12rem;
margin-right: 10px; margin-right: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -345,20 +345,20 @@
} }
.description { .description {
font-size: 1.2rem; font-size: 12rem;
color: white; color: white;
transform: translateY(-2rem); transform: translateY(-20rem);
.number, .certification { .number, .certification {
margin-bottom: 1rem; margin-bottom: 10rem;
padding-bottom: 1rem; padding-bottom: 10rem;
border-bottom: 1px solid @line-color; border-bottom: 1px solid @line-color;
display: flex; display: flex;
align-items: center; align-items: center;
img { img {
width: 1.4rem; width: 14rem;
margin-left: .5rem; margin-left: 5rem;
} }
} }
@ -366,14 +366,14 @@
color: @second-text-color; color: @second-text-color;
img { img {
margin-left: .5rem; margin-left: 5rem;
} }
} }
.certification { .certification {
img { img {
width: 1.4rem; width: 14rem;
margin-right: .5rem; margin-right: 5rem;
} }
} }
} }
@ -382,11 +382,11 @@
color: white; color: white;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: .5rem; margin-bottom: 5rem;
img { img {
height: 1.2rem; height: 12rem;
margin-left: .6rem; margin-left: 6rem;
} }
.text { .text {
@ -399,35 +399,35 @@
display: flex; display: flex;
.item { .item {
padding: .2rem .5rem; padding: 2rem 5rem;
border-radius: .2rem; border-radius: 2rem;
background: @second-btn-color-tran; background: @second-btn-color-tran;
font-size: 1rem; font-size: 10rem;
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: .5rem; margin-right: 5rem;
img { img {
height: 1rem; height: 10rem;
margin-right: .2rem; margin-right: 2rem;
} }
} }
} }
.other { .other {
display: flex; display: flex;
margin-bottom: 2rem; margin-bottom: 20rem;
.item { .item {
margin-right: 2.5rem; margin-right: 25rem;
display: flex; display: flex;
img { img {
margin-right: .8rem; margin-right: 8rem;
border-radius: .4rem; border-radius: 4rem;
background: @second-btn-color-tran; background: @second-btn-color-tran;
padding: .8rem; padding: 8rem;
height: 2.2rem; height: 22rem;
} }
.right { .right {
@ -437,24 +437,24 @@
.top { .top {
color: white; color: white;
font-size: 1.4rem; font-size: 14rem;
} }
.bottom { .bottom {
color: @second-text-color; color: @second-text-color;
font-size: 1.2rem; font-size: 12rem;
} }
} }
} }
} }
.my-buttons { .my-buttons {
margin-top: 2rem; margin-top: 20rem;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
@width: 3.6rem; @width: 36rem;
.follow-display { .follow-display {
flex: 1; flex: 1;
@ -471,19 +471,19 @@
} }
.no-follow { .no-follow {
width: calc(100% - 0.5rem); width: calc(100% - 5rem);
color: white; color: white;
border-radius: .2rem; border-radius: 2rem;
background: @primary-btn-color; background: @primary-btn-color;
height: @width; height: @width;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-right: .5rem; margin-right: 5rem;
box-sizing: border-box; box-sizing: border-box;
span { span {
margin-left: .2rem; margin-left: 2rem;
} }
} }
@ -495,18 +495,18 @@
.l-button { .l-button {
color: white; color: white;
border-radius: .2rem; border-radius: 2rem;
background: @second-btn-color; background: @second-btn-color;
height: @width; height: @width;
width: 50%; width: 50%;
margin-right: .5rem; margin-right: 5rem;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
span { span {
margin-left: .2rem; margin-left: 2rem;
} }
img { img {
@ -517,7 +517,7 @@
} }
img { img {
@width: 1.4rem; @width: 14rem;
width: @width; width: @width;
height: @width; height: @width;
} }
@ -528,11 +528,11 @@
position: relative; position: relative;
width: @width; width: @width;
height: @width; height: @width;
font-size: 1.2rem; font-size: 12rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: .2rem; border-radius: 2rem;
background: @second-btn-color; background: @second-btn-color;
color: white; color: white;
@ -544,7 +544,7 @@
} }
.loading { .loading {
@width: 1.2rem; @width: 12rem;
width: @width; width: @width;
height: @width; height: @width;
animation: rotate .6s linear infinite; animation: rotate .6s linear infinite;
@ -562,7 +562,7 @@
.arrow { .arrow {
transition: transform .3s ease; transition: transform .3s ease;
transform: rotate(180deg); transform: rotate(180deg);
@width: 1.6rem; @width: 16rem;
width: @width; width: @width;
height: @width; height: @width;
} }
@ -573,7 +573,7 @@
.recommend { .recommend {
transition: all .3s ease; transition: all .3s ease;
height: 22rem; height: 220rem;
overflow: hidden; overflow: hidden;
&.hidden { &.hidden {
@ -581,8 +581,8 @@
} }
.title { .title {
padding: 0 2rem 0 2rem; padding: 0 20rem 0 20rem;
font-size: 1.2rem; font-size: 12rem;
color: @second-text-color; color: @second-text-color;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -593,9 +593,9 @@
} }
img { img {
margin-left: .3rem; margin-left: 3rem;
width: 1.3rem; width: 13rem;
height: 1.3rem; height: 13rem;
} }
.right { .right {
@ -605,56 +605,56 @@
} }
.friends { .friends {
padding-left: 2rem; padding-left: 20rem;
margin-top: 1rem; margin-top: 10rem;
display: flex; display: flex;
overflow-x: scroll; overflow-x: scroll;
.friend { .friend {
position: relative; position: relative;
background: @second-btn-color-tran; background: @second-btn-color-tran;
margin-right: 1rem; margin-right: 10rem;
padding: 1rem; padding: 10rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.avatar { .avatar {
@width: 10rem; @width: 100rem;
border-radius: 50%; border-radius: 50%;
width: @width; width: @width;
height: @width; height: @width;
} }
.name { .name {
margin-top: 1rem; margin-top: 10rem;
font-size: 1.2rem; font-size: 12rem;
color: white; color: white;
} }
.tips { .tips {
margin-top: .5rem; margin-top: 5rem;
font-size: 1.2rem; font-size: 12rem;
color: @second-text-color; color: @second-text-color;
} }
.button { .button {
margin-top: 1rem; margin-top: 10rem;
width: 15rem; width: 150rem;
height: 2.6rem; height: 26rem;
font-size: 1.2rem; font-size: 12rem;
} }
.close { .close {
position: absolute; position: absolute;
top: .2rem; top: 2rem;
right: .2rem; right: 2rem;
} }
} }
.more { .more {
.notice { .notice {
width: 10rem; width: 100rem;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

2
src/pages/me/Uploader.vue
View File

@ -324,7 +324,7 @@ export default {
return this.$store.state.bodyWidth return this.$store.state.bodyWidth
}, },
videoSlideRowListStyle() { videoSlideRowListStyle() {
return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(100vh - 9.6rem)'} return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(100vh - 96rem)'}
}, },
SlideItemStyle() { SlideItemStyle() {
if (this.tempScroll || this.isScroll) return {overflow: 'auto'} if (this.tempScroll || this.isScroll) return {overflow: 'auto'}

46
src/pages/me/VideoDetail.vue
View File

@ -389,16 +389,16 @@ export default {
.search-wrapper { .search-wrapper {
z-index: 9; z-index: 9;
position: fixed; position: fixed;
top: 1rem; top: 10rem;
left: 1.5rem; left: 15rem;
right: 1.5rem; right: 15rem;
display: flex; display: flex;
align-items: center; align-items: center;
.back { .back {
width: 2rem; width: 20rem;
height: 2rem; height: 20rem;
margin-right: 1rem; margin-right: 10rem;
} }
.search-ctn { .search-ctn {
@ -444,7 +444,7 @@ export default {
.right { .right {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 1.4rem; font-size: 14rem;
img { img {
margin-right: 10px; margin-right: 10px;
@ -465,12 +465,12 @@ export default {
.share-dialog { .share-dialog {
.collection { .collection {
background: white; background: white;
margin: 0 1rem 1rem 1rem; margin: 0 10rem 10rem 10rem;
width: calc(100% - 2rem); width: calc(100% - 20rem);
border-radius: 6px; border-radius: 6px;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 1.6rem; font-size: 16rem;
font-weight: bold; font-weight: bold;
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
@ -485,8 +485,8 @@ export default {
} }
.friends { .friends {
margin: 1rem 1rem 0 1rem; margin: 10rem 10rem 0 10rem;
width: calc(100% - 2rem); width: calc(100% - 20rem);
background: white; background: white;
border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
@ -507,14 +507,14 @@ export default {
.right { .right {
margin: 0 5px 0 15px; margin: 0 5px 0 15px;
font-size: 1.6rem; font-size: 16rem;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.share-btn { .share-btn {
font-size: 1.4rem; font-size: 14rem;
color: white; color: white;
padding: 5px 20px; padding: 5px 20px;
background: @primary-btn-color; background: @primary-btn-color;
@ -528,14 +528,14 @@ export default {
.permission-dialog { .permission-dialog {
.space { .space {
height: 1rem; height: 10rem;
background: whitesmoke; background: whitesmoke;
} }
.setting { .setting {
background: white; background: white;
box-sizing: border-box; box-sizing: border-box;
padding: 1rem 2rem; padding: 10rem 20rem;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -544,24 +544,24 @@ export default {
img { img {
border-radius: 50%; border-radius: 50%;
width: 3rem; width: 30rem;
height: 3rem; height: 30rem;
} }
.right { .right {
margin: 0 .5rem 0 1.5rem; margin: 0 5rem 0 15rem;
font-size: 1.4rem; font-size: 14rem;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.share-btn { .share-btn {
font-size: 1.4rem; font-size: 14rem;
color: white; color: white;
padding: .5rem 2rem; padding: 5rem 20rem;
background: @primary-btn-color; background: @primary-btn-color;
border-radius: .2rem; border-radius: 2rem;
} }
} }
} }

42
src/pages/me/collect/MusicCollect.vue
View File

@ -143,14 +143,14 @@ export default {
top: 0; top: 0;
overflow: auto; overflow: auto;
color: white; color: white;
font-size: 1.4rem; font-size: 14rem;
.content { .content {
padding-top: 6rem; padding-top: 60rem;
.list { .list {
.item { .item {
padding: 2rem 1.5rem; padding: 20rem 15rem;
padding-bottom: 0; padding-bottom: 0;
display: flex; display: flex;
align-items: center; align-items: center;
@ -160,21 +160,21 @@ export default {
display: flex; display: flex;
.cover-wrapper { .cover-wrapper {
margin-right: 1rem; margin-right: 10rem;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.play { .play {
width: 3rem; width: 30rem;
height: 3rem; height: 30rem;
position: absolute; position: absolute;
} }
.cover { .cover {
border-radius: .2rem; border-radius: 2rem;
@width: 6rem; @width: 60rem;
width: @width; width: @width;
object-fit: cover; object-fit: cover;
height: @width; height: @width;
@ -194,7 +194,7 @@ export default {
} }
.author, .desc-bottom { .author, .desc-bottom {
font-size: 1.2rem; font-size: 12rem;
color: @second-text-color; color: @second-text-color;
} }
@ -202,7 +202,7 @@ export default {
display: flex; display: flex;
.duration { .duration {
margin-right: 1.4rem; margin-right: 14rem;
position: relative; position: relative;
} }
} }
@ -211,9 +211,9 @@ export default {
.option { .option {
img { img {
width: 2rem; width: 20rem;
height: 2rem; height: 20rem;
margin-left: 2rem; margin-left: 20rem;
} }
} }
@ -242,7 +242,7 @@ export default {
.music-wrapper { .music-wrapper {
width: 100vw; width: 100vw;
border-top: 1px solid #414141; border-top: 1px solid #414141;
padding: 1rem 1.5rem; padding: 10rem 15rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -251,22 +251,22 @@ export default {
display: flex; display: flex;
.cover-wrapper { .cover-wrapper {
margin-right: 1rem; margin-right: 10rem;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.play { .play {
width: 3rem; width: 30rem;
height: 3rem; height: 30rem;
position: absolute; position: absolute;
} }
.cover { .cover {
border-radius: .2rem; border-radius: 2rem;
object-fit: cover; object-fit: cover;
@width: 5rem; @width: 50rem;
width: @width; width: @width;
height: @width; height: @width;
} }
@ -285,7 +285,7 @@ export default {
} }
.author, .desc-bottom { .author, .desc-bottom {
font-size: 1.2rem; font-size: 12rem;
color: @second-text-color; color: @second-text-color;
} }
@ -293,7 +293,7 @@ export default {
display: flex; display: flex;
.duration { .duration {
margin-right: 1.4rem; margin-right: 14rem;
position: relative; position: relative;
} }
} }

2
src/pages/me/collect/VideoCollect.vue
View File

@ -71,7 +71,7 @@ export default {
top: 0; top: 0;
overflow: auto; overflow: auto;
color: white; color: white;
font-size: 1.4rem; font-size: 14rem;
.content { .content {
padding-top: @header-height; padding-top: @header-height;

36
src/pages/me/components/CollectMusic.vue
View File

@ -18,7 +18,7 @@
<from-bottom-dialog <from-bottom-dialog
mask-mode="lightgray" mask-mode="lightgray"
page-id="CollectMusic" page-id="CollectMusic"
border-radius="1.5rem 1.5rem 0 0" border-radius="15rem 15rem 0 0"
:show-heng-gang="false" :show-heng-gang="false"
height="70vh" height="70vh"
v-model="isShowList"> v-model="isShowList">
@ -169,7 +169,7 @@ export default {
top: 0; top: 0;
overflow: auto; overflow: auto;
color: white; color: white;
font-size: 1.4rem; font-size: 14rem;
} }
.music-list-dialog { .music-list-dialog {
@ -186,34 +186,34 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 5rem; height: 50rem;
padding: 0 @padding-page; padding: 0 @padding-page;
border-radius: 1.5rem 1.5rem 0 0; border-radius: 15rem 15rem 0 0;
z-index: 9; z-index: 9;
.left { .left {
font-size: 1.6rem; font-size: 16rem;
} }
.right { .right {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 1.2rem; font-size: 12rem;
img { img {
width: 2rem; width: 20rem;
margin-right: .5rem; margin-right: 5rem;
} }
} }
} }
.wrapper { .wrapper {
padding-top: 5rem; padding-top: 50rem;
} }
.l-row { .l-row {
background: @bg-color; background: @bg-color;
height: 5rem; height: 50rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -228,38 +228,38 @@ export default {
align-items: center; align-items: center;
.author { .author {
font-size: 1.2rem; font-size: 12rem;
color: @second-text-color; color: @second-text-color;
margin-left: 2rem; margin-left: 20rem;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
&:after { &:after {
content: ''; content: '';
width: .6rem; width: 6rem;
height: .5px; height: .5px;
background: @second-text-color; background: @second-text-color;
position: absolute; position: absolute;
left: -1.2rem; left: -12rem;
} }
} }
.play-icon { .play-icon {
width: 1.5rem; width: 15rem;
margin-right: 1rem; margin-right: 10rem;
} }
} }
.right { .right {
width: 1.5rem; width: 15rem;
} }
} }
.footer { .footer {
background: @bg-color; background: @bg-color;
border-top: 1px solid #2a2828; border-top: 1px solid #2a2828;
height: 6rem; height: 60rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

36
src/pages/me/components/GuessMusic.vue
View File

@ -18,7 +18,7 @@
<from-bottom-dialog <from-bottom-dialog
mask-mode="lightgray" mask-mode="lightgray"
page-id="GuessMusic" page-id="GuessMusic"
border-radius="1.5rem 1.5rem 0 0" border-radius="15rem 15rem 0 0"
:show-heng-gang="false" :show-heng-gang="false"
height="70vh" height="70vh"
v-model="isShowList"> v-model="isShowList">
@ -151,7 +151,7 @@ export default {
top: 0; top: 0;
overflow: auto; overflow: auto;
color: white; color: white;
font-size: 1.4rem; font-size: 14rem;
} }
.music-list-dialog { .music-list-dialog {
@ -168,34 +168,34 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 5rem; height: 50rem;
padding: 0 @padding-page; padding: 0 @padding-page;
border-radius: 1.5rem 1.5rem 0 0; border-radius: 15rem 15rem 0 0;
z-index: 9; z-index: 9;
.left { .left {
font-size: 1.6rem; font-size: 16rem;
} }
.right { .right {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 1.2rem; font-size: 12rem;
img { img {
width: 2rem; width: 20rem;
margin-right: .5rem; margin-right: 5rem;
} }
} }
} }
.wrapper { .wrapper {
padding-top: 5rem; padding-top: 50rem;
} }
.l-row { .l-row {
background: @bg-color; background: @bg-color;
height: 5rem; height: 50rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -210,38 +210,38 @@ export default {
align-items: center; align-items: center;
.author { .author {
font-size: 1.2rem; font-size: 12rem;
color: @second-text-color; color: @second-text-color;
margin-left: 2rem; margin-left: 20rem;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
&:after { &:after {
content: ''; content: '';
width: .6rem; width: 6rem;
height: .5px; height: .5px;
background: @second-text-color; background: @second-text-color;
position: absolute; position: absolute;
left: -1.2rem; left: -12rem;
} }
} }
.play-icon { .play-icon {
width: 1.5rem; width: 15rem;
margin-right: 1rem; margin-right: 10rem;
} }
} }
.right { .right {
width: 1.5rem; width: 15rem;
} }
} }
.footer { .footer {
background: @bg-color; background: @bg-color;
border-top: 1px solid #2a2828; border-top: 1px solid #2a2828;
height: 6rem; height: 60rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

58
src/pages/me/components/SlideItemMusic.vue
View File

@ -286,7 +286,7 @@ export default {
.SlideItemMusic { .SlideItemMusic {
color: white; color: white;
font-size: 1.4rem; font-size: 14rem;
min-width: 100vw; min-width: 100vw;
min-height: 100%; min-height: 100%;
display: flex; display: flex;
@ -297,34 +297,34 @@ export default {
.cover { .cover {
margin-top: 8rem; margin-top: 80rem;
width: 80vw; width: 80vw;
height: 80vw; height: 80vw;
img { img {
border-radius: 2.5rem; border-radius: 25rem;
object-fit: cover; object-fit: cover;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-shadow: 0 0 1.5rem .5rem #514f4f; box-shadow: 0 0 15rem 5rem #514f4f;
} }
} }
.lyrics-wrapper { .lyrics-wrapper {
margin-top: 3rem; margin-top: 30rem;
overflow: auto; overflow: auto;
height: 8rem; height: 80rem;
.container { .container {
min-height: 8rem; min-height: 80rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
} }
.lyrics { .lyrics {
height: 4rem; height: 40rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -332,14 +332,14 @@ export default {
} }
.lyrics-mask { .lyrics-mask {
top: calc(80vw + 7rem); top: calc(80vw + 70rem);
height: 8rem; height: 80rem;
width: 100vw; width: 100vw;
position: absolute; position: absolute;
} }
.lyrics-full { .lyrics-full {
margin-top: 8rem; margin-top: 80rem;
width: 100vw; width: 100vw;
height: 60vh; height: 60vh;
display: flex; display: flex;
@ -351,7 +351,7 @@ export default {
.item { .item {
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 4rem; height: 40rem;
} }
} }
@ -371,17 +371,17 @@ export default {
align-items: flex-end; align-items: flex-end;
img { img {
width: 3.5rem; width: 35rem;
} }
.left { .left {
.name { .name {
font-size: 1.8rem; font-size: 18rem;
margin-bottom: .4rem; margin-bottom: 4rem;
} }
.author { .author {
font-size: 1.4rem; font-size: 14rem;
} }
} }
@ -390,15 +390,15 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
margin-top: 2rem; margin-top: 20rem;
font-size: 1.2rem; font-size: 12rem;
} }
} }
} }
.progress { .progress {
width: 100vw; width: 100vw;
font-size: 1.2rem; font-size: 12rem;
padding: 0 @padding-page; padding: 0 @padding-page;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -407,15 +407,15 @@ export default {
color: gainsboro; color: gainsboro;
.bar { .bar {
margin: 0 .6rem; margin: 0 6rem;
flex: 1; flex: 1;
position: relative; position: relative;
.slide-bar { .slide-bar {
position: absolute; position: absolute;
height: 2rem; height: 20rem;
width: 100%; width: 100%;
top: -1rem; top: -10rem;
z-index: 9; z-index: 9;
} }
@ -444,8 +444,8 @@ export default {
position: absolute; position: absolute;
left: 50vw; left: 50vw;
top: -3px; top: -3px;
height: .8rem; height: 8rem;
width: .8rem; width: 8rem;
border-radius: 50%; border-radius: 50%;
background: white; background: white;
} }
@ -461,8 +461,8 @@ export default {
justify-content: space-between; justify-content: space-between;
img { img {
width: 3.8rem; width: 38rem;
height: 3.8rem; height: 38rem;
} }
.center { .center {
@ -470,12 +470,12 @@ export default {
align-items: center; align-items: center;
img { img {
margin: 0 1rem; margin: 0 10rem;
} }
.control { .control {
width: 5.5rem; width: 55rem;
height: 5.5rem; height: 55rem;
} }
} }
} }

10
src/pages/me/rightMenu/LookHistory.vue
View File

@ -141,10 +141,10 @@ export default {
top: 0; top: 0;
overflow: auto; overflow: auto;
color: white; color: white;
font-size: 1.4rem; font-size: 14rem;
.content { .content {
padding-top: 6rem; padding-top: 60rem;
.SlideRowList, .Scroll { .SlideRowList, .Scroll {
height: calc(100vh - @indicator-height - @header-height) !important; height: calc(100vh - @indicator-height - @header-height) !important;
@ -158,12 +158,12 @@ export default {
flex-direction: column; flex-direction: column;
img { img {
height: 12rem; height: 120rem;
} }
.title { .title {
font-size: 1.3rem; font-size: 13rem;
margin-top: 1rem; margin-top: 10rem;
color: @second-text-color; color: @second-text-color;
} }
} }

22
src/pages/me/rightMenu/MinorProtection/DetailSetting.vue
View File

@ -96,7 +96,7 @@ export default {
top: 0; top: 0;
overflow: auto; overflow: auto;
color: white; color: white;
font-size: 1.4rem; font-size: 14rem;
.content { .content {
padding-top: @header-height; padding-top: @header-height;
@ -104,29 +104,29 @@ export default {
.footer { .footer {
position: fixed; position: fixed;
bottom: 1.5rem; bottom: 15rem;
left: 1rem; left: 10rem;
right: 1rem; right: 10rem;
.notice { .notice {
font-size: 1.3rem; font-size: 13rem;
margin-bottom: 1.5rem; margin-bottom: 15rem;
} }
} }
.type1 { .type1 {
.notice { .notice {
margin: 6rem 0; margin: 60rem 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
font-size: 1.6rem; font-size: 16rem;
color: @second-text-color; color: @second-text-color;
img { img {
width: 1.5rem; width: 15rem;
margin-bottom: 1.5rem; margin-bottom: 15rem;
} }
} }
@ -134,7 +134,7 @@ export default {
.type2 { .type2 {
.desc { .desc {
margin-top: 4rem; margin-top: 40rem;
width: 100%; width: 100%;
} }
} }

4
src/pages/me/rightMenu/MinorProtection/Index.vue
View File

@ -54,10 +54,10 @@ export default {
top: 0; top: 0;
overflow: auto; overflow: auto;
color: white; color: white;
font-size: 1.4rem; font-size: 14rem;
.content { .content {
padding-top: 6rem; padding-top: 60rem;
} }
} }
</style> </style>

2
src/pages/me/rightMenu/MinorProtection/TriggerTime.vue
View File

@ -68,7 +68,7 @@ export default {
color: white; color: white;
.content { .content {
padding-top: 6rem; padding-top: 60rem;
} }
} }
</style> </style>

16
src/pages/me/rightMenu/Setting.vue
View File

@ -208,27 +208,27 @@ export default {
top: 0; top: 0;
overflow: auto; overflow: auto;
color: white; color: white;
font-size: 1.4rem; font-size: 14rem;
.content { .content {
padding-top: 6rem; padding-top: 60rem;
.title { .title {
color: @second-text-color; color: @second-text-color;
font-size: 1.3rem; font-size: 13rem;
margin: 2rem 0 0 2rem; margin: 20rem 0 0 20rem;
} }
.version { .version {
color: @second-text-color; color: @second-text-color;
font-size: 1.3rem; font-size: 13rem;
margin: 4rem; margin: 40rem;
text-align: center; text-align: center;
} }
.line { .line {
width: calc(100% - 3rem); width: calc(100% - 30rem);
margin-left: 1.5rem; margin-left: 15rem;
background: @line-color; background: @line-color;
} }
} }

2
src/pages/me/userinfo/AddSchool.vue
View File

@ -173,7 +173,7 @@ export default {
color: white; color: white;
.content { .content {
padding-top: 6rem; padding-top: 60rem;
} }
} }

18
src/pages/me/userinfo/ChooseCity.vue
View File

@ -79,29 +79,29 @@ export default {
overflow: auto; overflow: auto;
.content { .content {
padding-top: 6rem; padding-top: 60rem;
.nearby { .nearby {
.title { .title {
padding: 1rem 2rem; padding: 10rem 20rem;
img { img {
width: 1rem; width: 10rem;
height: 1rem; height: 10rem;
margin-right: .2rem; margin-right: 2rem;
} }
} }
} }
.row { .row {
padding: 0 1.5rem; padding: 0 15rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 5rem; height: 50rem;
font-size: 1.4rem; font-size: 14rem;
transition: all .1s; transition: all .1s;
background: @main-bg; background: @main-bg;
@ -112,7 +112,7 @@ export default {
color: @second-text-color; color: @second-text-color;
img { img {
margin-left: 1rem; margin-left: 10rem;
width: 15px; width: 15px;
} }
} }

8
src/pages/me/userinfo/ChooseDepartment.vue
View File

@ -65,12 +65,12 @@ export default {
.content { .content {
padding-top: 6rem; padding-top: 60rem;
.item { .item {
padding: 0 2rem; padding: 0 20rem;
font-size: 1.4rem; font-size: 14rem;
height: 5rem; height: 50rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;

12
src/pages/me/userinfo/ChooseLocation.vue
View File

@ -1218,20 +1218,20 @@ export default {
overflow: auto; overflow: auto;
.content { .content {
padding-top: 6rem; padding-top: 60rem;
.nearby { .nearby {
} }
.title { .title {
font-size: 1.2rem; font-size: 12rem;
padding: 1rem 1.5rem; padding: 10rem 15rem;
color: @second-text-color; color: @second-text-color;
img { img {
width: 1rem; width: 10rem;
height: 1rem; height: 10rem;
margin-right: .2rem; margin-right: 2rem;
} }
} }
} }

10
src/pages/me/userinfo/ChooseProvince.vue
View File

@ -48,17 +48,17 @@ export default {
overflow: auto; overflow: auto;
.content { .content {
padding-top: 6rem; padding-top: 60rem;
.nearby { .nearby {
.title { .title {
padding: 1rem 2rem; padding: 10rem 20rem;
img { img {
width: 1rem; width: 10rem;
height: 1rem; height: 10rem;
margin-right: .2rem; margin-right: 2rem;
} }
} }

34
src/pages/me/userinfo/ChooseSchool.vue
View File

@ -29,7 +29,7 @@
</div> </div>
<div v-else class="item">无法获取</div> <div v-else class="item">无法获取</div>
</div> </div>
<div class="line" style="width: calc(100% - 4rem);margin-left: 2rem;"></div> <div class="line" style="width: calc(100% - 40rem);margin-left: 20rem;"></div>
<div class="schools" v-if="!isSearch"> <div class="schools" v-if="!isSearch">
<div class="item" v-for="item in schools" <div class="item" v-for="item in schools"
@click="setSchool(item)" @click="setSchool(item)"
@ -110,26 +110,26 @@ export default {
.content { .content {
padding-top: 12rem; padding-top: 120rem;
.nearby { .nearby {
.title { .title {
padding: 1rem 2rem; padding: 10rem 20rem;
img { img {
width: 1rem; width: 10rem;
height: 1rem; height: 10rem;
margin-right: .2rem; margin-right: 2rem;
} }
} }
} }
.item { .item {
padding: 0 2rem; padding: 0 20rem;
font-size: 1.4rem; font-size: 14rem;
height: 5rem; height: 50rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -146,27 +146,27 @@ export default {
text-align: center; text-align: center;
.title { .title {
margin-top: 6rem; margin-top: 60rem;
font-size: 1.8rem; font-size: 18rem;
} }
.sub-title { .sub-title {
color: @second-text-color; color: @second-text-color;
margin-top: 2rem; margin-top: 20rem;
font-size: 1.4rem; font-size: 14rem;
} }
img { img {
margin-top: 6rem; margin-top: 60rem;
height: 10rem; height: 100rem;
border-radius: 50%; border-radius: 50%;
} }
.btn { .btn {
margin-top: 15rem; margin-top: 150rem;
display: inline-block; display: inline-block;
background: @second-btn-color; background: @second-btn-color;
padding: 1.5rem 4rem; padding: 15rem 40rem;
border-radius: 2px; border-radius: 2px;
} }
} }

28
src/pages/me/userinfo/DeclareSchool.vue
View File

@ -69,7 +69,7 @@ export default {
.content { .content {
padding: 7rem 2rem 0 2rem; padding: 70rem 20rem 0 20rem;
.row { .row {
display: flex; display: flex;
@ -77,13 +77,13 @@ export default {
.label { .label {
color: white; color: white;
font-size: 1.6rem; font-size: 16rem;
margin-right: 3rem; margin-right: 30rem;
} }
input { input {
flex: 1; flex: 1;
height: 4rem; height: 40rem;
background: transparent; background: transparent;
outline: none; outline: none;
border-top: none; border-top: none;
@ -101,19 +101,19 @@ export default {
.label { .label {
color: white; color: white;
font-size: 1.6rem; font-size: 16rem;
margin-right: 3rem; margin-right: 30rem;
} }
.right { .right {
padding: 1.2rem 0; padding: 12rem 0;
display: flex; display: flex;
align-items: center; align-items: center;
color: @second-text-color; color: @second-text-color;
img { img {
margin-left: 5px; margin-left: 5px;
width: 1.2rem; width: 12rem;
} }
} }
@ -121,20 +121,20 @@ export default {
} }
.notice { .notice {
margin-top: 2rem; margin-top: 20rem;
color: @second-text-color; color: @second-text-color;
} }
.btn { .btn {
position: fixed; position: fixed;
bottom: 2rem; bottom: 20rem;
left: 2rem; left: 20rem;
right: 2rem; right: 20rem;
color: white; color: white;
font-size: 1.6rem; font-size: 16rem;
background: @primary-btn-color; background: @primary-btn-color;
text-align: center; text-align: center;
padding: 1rem 0; padding: 10rem 0;
border-radius: 2px; border-radius: 2px;
} }
} }

2
src/pages/me/userinfo/DisplayType.vue
View File

@ -63,7 +63,7 @@ export default {
color: white; color: white;
.content { .content {
padding-top: 6rem; padding-top: 60rem;
} }
} }

26
src/pages/me/userinfo/EditUserInfo.vue
View File

@ -169,7 +169,7 @@ export default {
bottom: 0; bottom: 0;
top: 0; top: 0;
overflow: auto; overflow: auto;
font-size: 1.4rem; font-size: 14rem;
} }
.title { .title {
@ -201,16 +201,16 @@ export default {
.download { .download {
position: absolute; position: absolute;
bottom: 2rem; bottom: 20rem;
right: 2rem; right: 20rem;
padding: .3rem; padding: 3rem;
background: @second-btn-color-tran; background: @second-btn-color-tran;
width: 2rem; width: 20rem;
} }
} }
.userinfo { .userinfo {
padding-top: 6rem; padding-top: 60rem;
color: white; color: white;
.change-avatar { .change-avatar {
@ -218,15 +218,15 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
margin: 3rem 0; margin: 30rem 0;
@avatar-width: 8rem; @avatar-width: 80rem;
.avatar-ctn { .avatar-ctn {
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 10rem;
width: @avatar-width; width: @avatar-width;
height: @avatar-width; height: @avatar-width;
@ -240,7 +240,7 @@ export default {
} }
.change { .change {
width: 2.8rem; width: 28rem;
z-index: 9; z-index: 9;
position: relative; position: relative;
} }
@ -265,13 +265,13 @@ export default {
.content { .content {
background: white; background: white;
width: 80%; width: 80%;
padding: .5rem 0; padding: 5rem 0;
border-radius: 2px; border-radius: 2px;
box-sizing: border-box; box-sizing: border-box;
.item { .item {
font-size: 1.5rem; font-size: 15rem;
padding: 1.5rem 2rem; padding: 15rem 20rem;
transition: all .2s; transition: all .2s;
&:active { &:active {

20
src/pages/me/userinfo/EditUserInfoItem.vue
View File

@ -27,7 +27,7 @@
</div> </div>
<div class="l-row" v-if="type === 2"> <div class="l-row" v-if="type === 2">
<div class="notice">我的抖音号</div> <div class="notice">我的抖音号</div>
<div class="input-ctn" style="margin-bottom: 1rem;"> <div class="input-ctn" style="margin-bottom: 10rem;">
<input type="text" v-model="localUserinfo.unique_id"> <input type="text" v-model="localUserinfo.unique_id">
<img <img
v-if="localUserinfo.unique_id" style="transform: scale(2)" v-if="localUserinfo.unique_id" style="transform: scale(2)"
@ -122,11 +122,11 @@ export default {
} }
.content { .content {
padding: 2rem; padding: 20rem;
padding-top: 7rem; padding-top: 70rem;
.notice, .num { .notice, .num {
font-size: 1.2rem; font-size: 12rem;
color: @second-text-color; color: @second-text-color;
} }
@ -137,9 +137,9 @@ export default {
align-items: center; align-items: center;
input { input {
margin: .5rem 0; margin: 5rem 0;
color: white; color: white;
height: 3rem; height: 30rem;
width: 100%; width: 100%;
outline: none; outline: none;
border: none; border: none;
@ -153,17 +153,17 @@ export default {
.close { .close {
position: absolute; position: absolute;
right: 0; right: 0;
top: 1.5rem; top: 15rem;
width: 1rem; width: 10rem;
} }
} }
.textarea-ctn { .textarea-ctn {
width: 100%; width: 100%;
background: @active-main-bg; background: @active-main-bg;
padding: 1.5rem; padding: 15rem;
box-sizing: border-box; box-sizing: border-box;
margin-top: 1rem; margin-top: 10rem;
border-radius: 2px; border-radius: 2px;

2
src/pages/me/我的动态.vue
View File

@ -108,7 +108,7 @@ export default {
color: #b8b9c1; color: #b8b9c1;
header { header {
font-size: 1.5rem; font-size: 15rem;
height: 50px; height: 50px;
display: flex; display: flex;
justify-content: center; justify-content: center;