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 {
@width: .7rem;

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

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

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

@ -420,7 +420,7 @@ export default {
return this.$store.state.bodyWidth
},
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() {
if (this.tempScroll || this.isScroll) return {overflow: 'auto'}

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

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

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

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

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

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

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

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

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

@ -324,7 +324,7 @@ export default {
return this.$store.state.bodyWidth
},
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() {
if (this.tempScroll || this.isScroll) return {overflow: 'auto'}

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

@ -389,16 +389,16 @@ export default {
.search-wrapper {
z-index: 9;
position: fixed;
top: 1rem;
left: 1.5rem;
right: 1.5rem;
top: 10rem;
left: 15rem;
right: 15rem;
display: flex;
align-items: center;
.back {
width: 2rem;
height: 2rem;
margin-right: 1rem;
width: 20rem;
height: 20rem;
margin-right: 10rem;
}
.search-ctn {
@ -444,7 +444,7 @@ export default {
.right {
display: flex;
align-items: center;
font-size: 1.4rem;
font-size: 14rem;
img {
margin-right: 10px;
@ -465,12 +465,12 @@ export default {
.share-dialog {
.collection {
background: white;
margin: 0 1rem 1rem 1rem;
width: calc(100% - 2rem);
margin: 0 10rem 10rem 10rem;
width: calc(100% - 20rem);
border-radius: 6px;
display: flex;
align-items: center;
font-size: 1.6rem;
font-size: 16rem;
font-weight: bold;
padding: 10px;
box-sizing: border-box;
@ -485,8 +485,8 @@ export default {
}
.friends {
margin: 1rem 1rem 0 1rem;
width: calc(100% - 2rem);
margin: 10rem 10rem 0 10rem;
width: calc(100% - 20rem);
background: white;
border-radius: 6px 6px 0 0;
@ -507,14 +507,14 @@ export default {
.right {
margin: 0 5px 0 15px;
font-size: 1.6rem;
font-size: 16rem;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.share-btn {
font-size: 1.4rem;
font-size: 14rem;
color: white;
padding: 5px 20px;
background: @primary-btn-color;
@ -528,14 +528,14 @@ export default {
.permission-dialog {
.space {
height: 1rem;
height: 10rem;
background: whitesmoke;
}
.setting {
background: white;
box-sizing: border-box;
padding: 1rem 2rem;
padding: 10rem 20rem;
width: 100%;
display: flex;
align-items: center;
@ -544,24 +544,24 @@ export default {
img {
border-radius: 50%;
width: 3rem;
height: 3rem;
width: 30rem;
height: 30rem;
}
.right {
margin: 0 .5rem 0 1.5rem;
font-size: 1.4rem;
margin: 0 5rem 0 15rem;
font-size: 14rem;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.share-btn {
font-size: 1.4rem;
font-size: 14rem;
color: white;
padding: .5rem 2rem;
padding: 5rem 20rem;
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;
overflow: auto;
color: white;
font-size: 1.4rem;
font-size: 14rem;
.content {
padding-top: 6rem;
padding-top: 60rem;
.list {
.item {
padding: 2rem 1.5rem;
padding: 20rem 15rem;
padding-bottom: 0;
display: flex;
align-items: center;
@ -160,21 +160,21 @@ export default {
display: flex;
.cover-wrapper {
margin-right: 1rem;
margin-right: 10rem;
position: relative;
display: flex;
align-items: center;
justify-content: center;
.play {
width: 3rem;
height: 3rem;
width: 30rem;
height: 30rem;
position: absolute;
}
.cover {
border-radius: .2rem;
@width: 6rem;
border-radius: 2rem;
@width: 60rem;
width: @width;
object-fit: cover;
height: @width;
@ -194,7 +194,7 @@ export default {
}
.author, .desc-bottom {
font-size: 1.2rem;
font-size: 12rem;
color: @second-text-color;
}
@ -202,7 +202,7 @@ export default {
display: flex;
.duration {
margin-right: 1.4rem;
margin-right: 14rem;
position: relative;
}
}
@ -211,9 +211,9 @@ export default {
.option {
img {
width: 2rem;
height: 2rem;
margin-left: 2rem;
width: 20rem;
height: 20rem;
margin-left: 20rem;
}
}
@ -242,7 +242,7 @@ export default {
.music-wrapper {
width: 100vw;
border-top: 1px solid #414141;
padding: 1rem 1.5rem;
padding: 10rem 15rem;
display: flex;
align-items: center;
justify-content: space-between;
@ -251,22 +251,22 @@ export default {
display: flex;
.cover-wrapper {
margin-right: 1rem;
margin-right: 10rem;
position: relative;
display: flex;
align-items: center;
justify-content: center;
.play {
width: 3rem;
height: 3rem;
width: 30rem;
height: 30rem;
position: absolute;
}
.cover {
border-radius: .2rem;
border-radius: 2rem;
object-fit: cover;
@width: 5rem;
@width: 50rem;
width: @width;
height: @width;
}
@ -285,7 +285,7 @@ export default {
}
.author, .desc-bottom {
font-size: 1.2rem;
font-size: 12rem;
color: @second-text-color;
}
@ -293,7 +293,7 @@ export default {
display: flex;
.duration {
margin-right: 1.4rem;
margin-right: 14rem;
position: relative;
}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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