save
This commit is contained in:
hhh
parent
3cc830560d
commit
c8e3412bdb
@ -24,8 +24,8 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: 5rem;
|
min-height: 50rem;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
|
|
||||||
&.no-active {
|
&.no-active {
|
||||||
&:active {
|
&:active {
|
||||||
@ -55,8 +55,8 @@
|
|||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
width: 1.5rem;
|
width: 15rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -68,8 +68,8 @@
|
|||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-left: .5rem;
|
margin-left: 5rem;
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -55,7 +55,7 @@ margin
|
|||||||
.m(5);
|
.m(5);
|
||||||
.m(@n, @i: 1) when (@i =< @n) {
|
.m(@n, @i: 1) when (@i =< @n) {
|
||||||
.m@{i}r {
|
.m@{i}r {
|
||||||
margin: (1rem * @i) !important;
|
margin: (10rem * @i) !important;
|
||||||
}
|
}
|
||||||
.m(@n, (@i + 1));
|
.m(@n, (@i + 1));
|
||||||
}
|
}
|
||||||
@ -63,7 +63,7 @@ margin
|
|||||||
.ml(5);
|
.ml(5);
|
||||||
.ml(@n, @i: 1) when (@i =< @n) {
|
.ml(@n, @i: 1) when (@i =< @n) {
|
||||||
.ml@{i}r {
|
.ml@{i}r {
|
||||||
margin-left: (1rem * @i) !important;
|
margin-left: (10rem * @i) !important;
|
||||||
}
|
}
|
||||||
.ml(@n, (@i + 1));
|
.ml(@n, (@i + 1));
|
||||||
}
|
}
|
||||||
@ -71,7 +71,7 @@ margin
|
|||||||
.mr(5);
|
.mr(5);
|
||||||
.mr(@n, @i: 1) when (@i =< @n) {
|
.mr(@n, @i: 1) when (@i =< @n) {
|
||||||
.mr@{i}r {
|
.mr@{i}r {
|
||||||
margin-right: (1rem * @i) !important;
|
margin-right: (10rem * @i) !important;
|
||||||
}
|
}
|
||||||
.mr(@n, (@i + 1));
|
.mr(@n, (@i + 1));
|
||||||
}
|
}
|
||||||
@ -79,7 +79,7 @@ margin
|
|||||||
.mt(5);
|
.mt(5);
|
||||||
.mt(@n, @i: 1) when (@i =< @n) {
|
.mt(@n, @i: 1) when (@i =< @n) {
|
||||||
.mt@{i}r {
|
.mt@{i}r {
|
||||||
margin-top: (1rem * @i) !important;
|
margin-top: (10rem * @i) !important;
|
||||||
}
|
}
|
||||||
.mt(@n, (@i + 1));
|
.mt(@n, (@i + 1));
|
||||||
}
|
}
|
||||||
@ -87,7 +87,7 @@ margin
|
|||||||
.mb(7);
|
.mb(7);
|
||||||
.mb(@n, @i: 1) when (@i =< @n) {
|
.mb(@n, @i: 1) when (@i =< @n) {
|
||||||
.mb@{i}r {
|
.mb@{i}r {
|
||||||
margin-bottom: (1rem * @i) !important;
|
margin-bottom: (10rem * @i) !important;
|
||||||
}
|
}
|
||||||
.mb(@n, (@i + 1));
|
.mb(@n, (@i + 1));
|
||||||
}
|
}
|
||||||
@ -101,7 +101,7 @@ padding
|
|||||||
.p(5);
|
.p(5);
|
||||||
.p(@n, @i: 1) when (@i =< @n) {
|
.p(@n, @i: 1) when (@i =< @n) {
|
||||||
.p@{i}r {
|
.p@{i}r {
|
||||||
padding: (1rem * @i) !important;
|
padding: (10rem * @i) !important;
|
||||||
}
|
}
|
||||||
.p(@n, (@i + 1));
|
.p(@n, (@i + 1));
|
||||||
}
|
}
|
||||||
@ -109,7 +109,7 @@ padding
|
|||||||
.pb(5);
|
.pb(5);
|
||||||
.pb(@n, @i: 1) when (@i =< @n) {
|
.pb(@n, @i: 1) when (@i =< @n) {
|
||||||
.pb@{i}r {
|
.pb@{i}r {
|
||||||
padding-bottom: (1rem * @i) !important;
|
padding-bottom: (10rem * @i) !important;
|
||||||
}
|
}
|
||||||
.pb(@n, (@i + 1));
|
.pb(@n, (@i + 1));
|
||||||
}
|
}
|
||||||
@ -117,7 +117,7 @@ padding
|
|||||||
.pt(5);
|
.pt(5);
|
||||||
.pt(@n, @i: 1) when (@i =< @n) {
|
.pt(@n, @i: 1) when (@i =< @n) {
|
||||||
.pt@{i}r {
|
.pt@{i}r {
|
||||||
padding-top: (1rem * @i) !important;
|
padding-top: (10rem * @i) !important;
|
||||||
}
|
}
|
||||||
.pt(@n, (@i + 1));
|
.pt(@n, (@i + 1));
|
||||||
}
|
}
|
||||||
@ -125,7 +125,7 @@ padding
|
|||||||
.pl(5);
|
.pl(5);
|
||||||
.pl(@n, @i: 1) when (@i =< @n) {
|
.pl(@n, @i: 1) when (@i =< @n) {
|
||||||
.pl@{i}r {
|
.pl@{i}r {
|
||||||
padding-left: (1rem * @i) !important;
|
padding-left: (10rem * @i) !important;
|
||||||
}
|
}
|
||||||
.pl(@n, (@i + 1));
|
.pl(@n, (@i + 1));
|
||||||
}
|
}
|
||||||
@ -133,7 +133,7 @@ padding
|
|||||||
.pr(5);
|
.pr(5);
|
||||||
.pr(@n, @i: 1) when (@i =< @n) {
|
.pr(@n, @i: 1) when (@i =< @n) {
|
||||||
.pr@{i}r {
|
.pr@{i}r {
|
||||||
padding-right: (1rem * @i) !important;
|
padding-right: (10rem * @i) !important;
|
||||||
}
|
}
|
||||||
.pr(@n, (@i + 1));
|
.pr(@n, (@i + 1));
|
||||||
}
|
}
|
||||||
|
|||||||
@ -36,11 +36,11 @@ export default {
|
|||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
|
|
||||||
.auto-input {
|
.auto-input {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 7rem;
|
max-height: 70rem;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
padding: 0 .5rem;
|
padding: 0 5rem;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -371,7 +371,7 @@ export default {
|
|||||||
.video-wrapper {
|
.video-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: black;
|
background: black;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
@ -382,8 +382,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.pause {
|
.pause {
|
||||||
width: 10rem;
|
width: 100rem;
|
||||||
height: 10rem;
|
height: 100rem;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
@ -490,7 +490,7 @@ export default {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
@width: 3.5rem;
|
@width: 35rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: @width;
|
width: @width;
|
||||||
@ -498,7 +498,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -520,25 +520,25 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.location {
|
.location {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 10rem;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
padding: .4rem;
|
padding: 4rem;
|
||||||
border-radius: .3rem;
|
border-radius: 3rem;
|
||||||
background: @second-btn-color-tran;
|
background: @second-btn-color-tran;
|
||||||
|
|
||||||
.gang {
|
.gang {
|
||||||
height: .8rem;
|
height: 8rem;
|
||||||
width: 1.5px;
|
width: 1.5px;
|
||||||
margin: 0 .5rem;
|
margin: 0 5rem;
|
||||||
background: gray;
|
background: gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-right: .7rem;
|
margin-right: 7rem;
|
||||||
width: 1.8rem;
|
width: 18rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -39,6 +39,6 @@ export default {
|
|||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
img {
|
img {
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -82,18 +82,18 @@ export default {
|
|||||||
|
|
||||||
.button {
|
.button {
|
||||||
color: white;
|
color: white;
|
||||||
height: 4rem;
|
height: 40rem;
|
||||||
line-height: 4rem;
|
line-height: 40rem;
|
||||||
border-radius: .3rem;
|
border-radius: 3rem;
|
||||||
//width: 100%;
|
//width: 100%;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.progress {
|
.progress {
|
||||||
border-radius: .3rem;
|
border-radius: 3rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -103,8 +103,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 1.6rem;
|
height: 16rem;
|
||||||
margin-right: .5rem;
|
margin-right: 5rem;
|
||||||
animation: animal .8s infinite linear;
|
animation: animal .8s infinite linear;
|
||||||
|
|
||||||
@keyframes animal {
|
@keyframes animal {
|
||||||
@ -236,9 +236,9 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.small {
|
&.small {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
width: 6.2rem;
|
width: 62rem;
|
||||||
height: 2.6rem;
|
height: 26rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -90,8 +90,8 @@ export default {
|
|||||||
|
|
||||||
.left {
|
.left {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 1rem;
|
left: 10rem;
|
||||||
top: 2rem;
|
top: 20rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > :nth-last-child(1) {
|
& > :nth-last-child(1) {
|
||||||
|
|||||||
@ -105,7 +105,7 @@ export default {
|
|||||||
|
|
||||||
.space {
|
.space {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 5rem;
|
width: 50rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -140,23 +140,23 @@ export default {
|
|||||||
.call-float {
|
.call-float {
|
||||||
transition-property: all;
|
transition-property: all;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
width: 7rem;
|
width: 70rem;
|
||||||
height: 9rem;
|
height: 90rem;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 20vh;
|
top: 20vh;
|
||||||
left: @padding-page;
|
left: @padding-page;
|
||||||
background: white;
|
background: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: .6rem;
|
border-radius: 6rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
color: #14BF5F;
|
color: #14BF5F;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 3rem;
|
width: 30rem;
|
||||||
margin-bottom: .2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -170,7 +170,7 @@ export default {
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
background: linear-gradient(to bottom, #262626, black);
|
background: linear-gradient(to bottom, #262626, black);
|
||||||
transition: all .3s;
|
transition: all .3s;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
|
|
||||||
.float {
|
.float {
|
||||||
transition: all .3s;
|
transition: all .3s;
|
||||||
@ -202,8 +202,8 @@ export default {
|
|||||||
|
|
||||||
img {
|
img {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
max-width: 2.4rem;
|
max-width: 24rem;
|
||||||
max-height: 2.4rem;
|
max-height: 24rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -212,19 +212,19 @@ export default {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
word-break: keep-all;
|
word-break: keep-all;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
width: 12%;
|
width: 12%;
|
||||||
max-width: 4rem;
|
max-width: 40rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
max-width: 2.4rem;
|
max-width: 24rem;
|
||||||
max-height: 2.4rem;
|
max-height: 24rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.option {
|
.option {
|
||||||
@ -237,7 +237,7 @@ export default {
|
|||||||
span {
|
span {
|
||||||
word-break: keep-all;
|
word-break: keep-all;
|
||||||
margin-top: 20%;
|
margin-top: 20%;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -253,7 +253,7 @@ export default {
|
|||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translate3d(-50%, -50%, 0);
|
transform: translate3d(-50%, -50%, 0);
|
||||||
width: 25%;
|
width: 25%;
|
||||||
max-width: 10rem;
|
max-width: 100rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -262,12 +262,12 @@ 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;
|
||||||
margin-bottom: 10%;
|
margin-bottom: 10%;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 15%;
|
width: 15%;
|
||||||
max-width: 5rem;
|
max-width: 50rem;
|
||||||
margin-bottom: 1%;
|
margin-bottom: 1%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -275,12 +275,12 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.small {
|
&.small {
|
||||||
width: 7rem;
|
width: 70rem;
|
||||||
height: 9rem;
|
height: 90rem;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 20vh;
|
top: 20vh;
|
||||||
left: @padding-page;
|
left: @padding-page;
|
||||||
border-radius: .6rem;
|
border-radius: 6rem;
|
||||||
|
|
||||||
.float {
|
.float {
|
||||||
> .header {
|
> .header {
|
||||||
|
|||||||
@ -37,7 +37,7 @@ export default {
|
|||||||
@import "../assets/less/index";
|
@import "../assets/less/index";
|
||||||
|
|
||||||
.check {
|
.check {
|
||||||
@width: 1.4rem;
|
@width: 14rem;
|
||||||
width: @width;
|
width: @width;
|
||||||
height: @width;
|
height: @width;
|
||||||
|
|
||||||
|
|||||||
@ -331,22 +331,22 @@ export default {
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 4rem;
|
height: 40rem;
|
||||||
padding: 0 1.5rem;
|
padding: 0 15rem;
|
||||||
background: white;
|
background: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
border-radius: 1rem 1rem 0 0;
|
border-radius: 10rem 10rem 0 0;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 1.3rem;
|
width: 13rem;
|
||||||
height: 1.3rem;
|
height: 13rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -355,18 +355,18 @@ export default {
|
|||||||
height: v-bind(height);
|
height: v-bind(height);
|
||||||
background: #fff;
|
background: #fff;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
border-radius: 1rem 1rem 0 0;
|
border-radius: 10rem 10rem 0 0;
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-top: 4rem;
|
padding-top: 40rem;
|
||||||
padding-bottom: 6rem;
|
padding-bottom: 60rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.items {
|
.items {
|
||||||
.item {
|
.item {
|
||||||
.main {
|
.main {
|
||||||
padding: .5rem 0;
|
padding: 5rem 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
@ -374,19 +374,19 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.head-image {
|
.head-image {
|
||||||
margin-left: 1.5rem;
|
margin-left: 15rem;
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
width: 3.5rem;
|
width: 35rem;
|
||||||
height: 3.5rem;
|
height: 35rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.replies {
|
.replies {
|
||||||
padding-left: 5.5rem;
|
padding-left: 55rem;
|
||||||
|
|
||||||
.reply {
|
.reply {
|
||||||
padding: .5rem 0 .5rem .5rem;
|
padding: 5rem 0 5rem 5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
@ -394,34 +394,34 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.head-image {
|
.head-image {
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.more {
|
.more {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
margin: .5rem;
|
margin: 5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
|
|
||||||
.gang {
|
.gang {
|
||||||
background: #d5d5d5;
|
background: #d5d5d5;
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow {
|
.arrow {
|
||||||
margin-left: .5rem;
|
margin-left: 5rem;
|
||||||
margin-top: .8rem;
|
margin-top: 8rem;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
border: .5rem solid transparent;
|
border: 5rem solid transparent;
|
||||||
border-top: .6rem solid @second-text-color;
|
border-top: 6rem solid @second-text-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -429,29 +429,29 @@ export default {
|
|||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
|
|
||||||
.comment-container {
|
.comment-container {
|
||||||
width: 85%;
|
width: 85%;
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: 5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
|
||||||
.reply-user {
|
.reply-user {
|
||||||
margin-left: .5rem;
|
margin-left: 5rem;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
border: .5rem solid transparent;
|
border: 5rem solid transparent;
|
||||||
border-left: .6rem solid gray;
|
border-left: 6rem solid gray;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail {
|
.detail {
|
||||||
margin-bottom: .5rem;
|
margin-bottom: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.time-wrapper {
|
.time-wrapper {
|
||||||
@ -460,7 +460,7 @@ export default {
|
|||||||
|
|
||||||
.time {
|
.time {
|
||||||
color: #c4c3c3;
|
color: #c4c3c3;
|
||||||
margin-right: 1.5rem;
|
margin-right: 15rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reply-text {
|
.reply-text {
|
||||||
@ -473,17 +473,17 @@ export default {
|
|||||||
.love {
|
.love {
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 3rem;
|
width: 30rem;
|
||||||
padding-right: 1rem;
|
padding-right: 10rem;
|
||||||
|
|
||||||
.love-image {
|
.love-image {
|
||||||
width: 2.5rem;
|
width: 25rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
transform: translateY(-.5rem);
|
transform: translateY(-5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -494,18 +494,18 @@ export default {
|
|||||||
@chat-bg-color: rgb(105, 143, 244);
|
@chat-bg-color: rgb(105, 143, 244);
|
||||||
|
|
||||||
.input-toolbar {
|
.input-toolbar {
|
||||||
border-radius: 1rem 1rem 0 0;
|
border-radius: 10rem 10rem 0 0;
|
||||||
background: white;
|
background: white;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
|
|
||||||
@space-width: 1.8rem;
|
@space-width: 18rem;
|
||||||
@icon-width: 4.8rem;
|
@icon-width: 48rem;
|
||||||
|
|
||||||
.call-friend {
|
.call-friend {
|
||||||
padding-top: 3rem;
|
padding-top: 30rem;
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding-right: @space-width;
|
padding-right: @space-width;
|
||||||
@ -515,7 +515,7 @@ export default {
|
|||||||
position: relative;
|
position: relative;
|
||||||
margin-left: @space-width;
|
margin-left: @space-width;
|
||||||
margin-bottom: @space-width;
|
margin-bottom: @space-width;
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -527,7 +527,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
margin-top: .5rem;
|
margin-top: 5rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: @icon-width;
|
width: @icon-width;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@ -539,18 +539,18 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: @icon-width - 1.5;
|
top: @icon-width - 1.5;
|
||||||
right: -2px;
|
right: -2px;
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar {
|
.toolbar {
|
||||||
@icon-width: 2.5rem;
|
@icon-width: 25rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 1rem 1.5rem;
|
padding: 10rem 15rem;
|
||||||
border-top: 1px solid #e2e1e1;
|
border-top: 1px solid #e2e1e1;
|
||||||
|
|
||||||
.input-wrapper {
|
.input-wrapper {
|
||||||
@ -559,9 +559,9 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: .5rem 1rem;
|
padding: 5rem 10rem;
|
||||||
background: #eee;
|
background: #eee;
|
||||||
border-radius: 2rem;
|
border-radius: 20rem;
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -569,7 +569,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.auto-input {
|
.auto-input {
|
||||||
width: calc(100vw - 18rem);
|
width: calc(100vw - 180rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -577,7 +577,7 @@ export default {
|
|||||||
width: @icon-width;
|
width: @icon-width;
|
||||||
height: @icon-width;
|
height: @icon-width;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-left: 1.5rem;
|
margin-left: 15rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -84,7 +84,7 @@ export default {
|
|||||||
.content {
|
.content {
|
||||||
background: white;
|
background: white;
|
||||||
width: 80vw;
|
width: 80vw;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 20rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.top {
|
.top {
|
||||||
@ -92,22 +92,22 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.desc {
|
.desc {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 20rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 1rem;
|
padding: 10rem;
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
font-size: 1.8rem;
|
font-size: 18rem;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.code {
|
.code {
|
||||||
width: 6rem;
|
width: 60rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -119,7 +119,7 @@ export default {
|
|||||||
width: 35vw;
|
width: 35vw;
|
||||||
height: calc(35vw * 1.5);
|
height: calc(35vw * 1.5);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 8rem;
|
top: 80rem;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -138,7 +138,7 @@ export default {
|
|||||||
.play {
|
.play {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
width: 4rem;
|
width: 40rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -146,17 +146,17 @@ export default {
|
|||||||
.toolbar {
|
.toolbar {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
background: black;
|
background: black;
|
||||||
border-radius: 1rem 1rem 0 0;
|
border-radius: 10rem 10rem 0 0;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
padding: 1rem;
|
padding: 10rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@space-width: 1.8rem;
|
@space-width: 18rem;
|
||||||
@icon-width: 4.5rem;
|
@icon-width: 45rem;
|
||||||
|
|
||||||
.shares {
|
.shares {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -176,7 +176,7 @@ export default {
|
|||||||
|
|
||||||
span {
|
span {
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@ -184,9 +184,9 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cancel {
|
.cancel {
|
||||||
font-size: 1.6rem;
|
font-size: 16rem;
|
||||||
background: rgb(38,38,38);
|
background: rgb(38,38,38);
|
||||||
padding: 1.5rem;
|
padding: 15rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -23,7 +23,7 @@ export default {
|
|||||||
|
|
||||||
&.normal {
|
&.normal {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 4rem;
|
height: 40rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -38,12 +38,12 @@ export default {
|
|||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 2.2rem;
|
width: 22rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.circle {
|
.circle {
|
||||||
width: 1rem;
|
width: 10rem;
|
||||||
height: 1rem;
|
height: 10rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -62,7 +62,7 @@ export default {
|
|||||||
transform: translate3d(0, 0, 0) scale(1);
|
transform: translate3d(0, 0, 0) scale(1);
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
transform: translate3d(1rem, 0, 0) scale(1.2);
|
transform: translate3d(10rem, 0, 0) scale(1.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -71,7 +71,7 @@ export default {
|
|||||||
transform: translate3d(0, 0, 0) scale(1);
|
transform: translate3d(0, 0, 0) scale(1);
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
transform: translate3d(-1rem, 0, 0) scale(1.2);
|
transform: translate3d(-10rem, 0, 0) scale(1.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -14,8 +14,8 @@ export default {
|
|||||||
@import "../assets/less/index";
|
@import "../assets/less/index";
|
||||||
|
|
||||||
.NoMore {
|
.NoMore {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
height: 6rem;
|
height: 60rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
@ -95,50 +95,50 @@ export default {
|
|||||||
|
|
||||||
.music {
|
.music {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
background: gold;
|
background: gold;
|
||||||
color: black;
|
color: black;
|
||||||
padding: .2rem .3rem;
|
padding: 2rem 3rem;
|
||||||
border-radius: .2rem;
|
border-radius: 2rem;
|
||||||
top: .7rem;
|
top: 7rem;
|
||||||
left: .7rem;
|
left: 7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.date {
|
.date {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: .5rem;
|
top: 5rem;
|
||||||
left: .5rem;
|
left: 5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
color: black;
|
color: black;
|
||||||
background: white;
|
background: white;
|
||||||
padding: .6rem;
|
padding: 6rem;
|
||||||
border-radius: .6rem;
|
border-radius: 6rem;
|
||||||
|
|
||||||
.day {
|
.day {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.month {
|
.month {
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -95,24 +95,24 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.rightTextColor {
|
.rightTextColor {
|
||||||
margin-left: 1.5rem;
|
margin-left: 15rem;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 3.6rem;
|
height: 36rem;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.search-icon {
|
.search-icon {
|
||||||
height: 2.2rem;
|
height: 22rem;
|
||||||
width: 2.2rem;
|
width: 22rem;
|
||||||
margin-left: .7rem;
|
margin-left: 7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
@ -122,7 +122,7 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
outline: none;
|
outline: none;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0 0 0 .7rem;
|
padding: 0 0 0 7rem;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|
||||||
&::-webkit-input-placeholder {
|
&::-webkit-input-placeholder {
|
||||||
@ -134,10 +134,10 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 1.5rem;
|
right: 15rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 1.5rem;
|
width: 15rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -273,11 +273,11 @@ export default {
|
|||||||
color: white;
|
color: white;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
@space-width: 1.8rem;
|
@space-width: 18rem;
|
||||||
@icon-width: 4.8rem;
|
@icon-width: 48rem;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -285,9 +285,9 @@ export default {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 1.4rem;
|
width: 14rem;
|
||||||
height: 1.4rem;
|
height: 14rem;
|
||||||
padding: .6rem;
|
padding: 6rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: @second-btn-color-tran;
|
background: @second-btn-color-tran;
|
||||||
//background: rgb(56, 58, 57);
|
//background: rgb(56, 58, 57);
|
||||||
@ -304,7 +304,7 @@ export default {
|
|||||||
position: relative;
|
position: relative;
|
||||||
margin-left: @space-width;
|
margin-left: @space-width;
|
||||||
margin-bottom: @space-width;
|
margin-bottom: @space-width;
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -316,7 +316,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
margin-top: .5rem;
|
margin-top: 5rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: @icon-width;
|
width: @icon-width;
|
||||||
//white-space: nowrap;
|
//white-space: nowrap;
|
||||||
@ -328,8 +328,8 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: @icon-width - 1.5;
|
top: @icon-width - 1.5;
|
||||||
right: -2px;
|
right: -2px;
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -341,7 +341,7 @@ export default {
|
|||||||
img {
|
img {
|
||||||
width: @icon-width - 2.6;
|
width: @icon-width - 2.6;
|
||||||
height: @icon-width - 2.6;
|
height: @icon-width - 2.6;
|
||||||
padding: 1.3rem;
|
padding: 13rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: @second-btn-color-tran;
|
background: @second-btn-color-tran;
|
||||||
//background: rgb(56, 58, 57);
|
//background: rgb(56, 58, 57);
|
||||||
@ -349,7 +349,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
@ -359,9 +359,9 @@ export default {
|
|||||||
.line {
|
.line {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: #1c1c1c;
|
background: #1c1c1c;
|
||||||
margin-left: 2rem;
|
margin-left: 20rem;
|
||||||
width: calc(100% - 4rem);
|
width: calc(100% - 40rem);
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shares {
|
.shares {
|
||||||
@ -383,7 +383,7 @@ export default {
|
|||||||
|
|
||||||
span {
|
span {
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@ -404,7 +404,7 @@ export default {
|
|||||||
img {
|
img {
|
||||||
width: @icon-width - 2;
|
width: @icon-width - 2;
|
||||||
height: @icon-width - 2;
|
height: @icon-width - 2;
|
||||||
padding: 1rem;
|
padding: 10rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
//background: @second-btn-color;
|
//background: @second-btn-color;
|
||||||
background: rgb(56, 58, 57);
|
background: rgb(56, 58, 57);
|
||||||
@ -412,7 +412,7 @@ export default {
|
|||||||
|
|
||||||
span {
|
span {
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@ -422,10 +422,10 @@ export default {
|
|||||||
.share2friend {
|
.share2friend {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
padding: 2rem;
|
padding: 20rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 18rem;
|
height: 180rem;
|
||||||
background: black;
|
background: black;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -444,23 +444,23 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.poster {
|
.poster {
|
||||||
margin-left: 2rem;
|
margin-left: 20rem;
|
||||||
height: 4rem;
|
height: 40rem;
|
||||||
width: 4rem;
|
width: 40rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-chat {
|
.create-chat {
|
||||||
font-size: 1.1rem;
|
font-size: 11rem;
|
||||||
margin: 1rem 0;
|
margin: 10rem 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
|
|
||||||
.check {
|
.check {
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
width: 1.6rem;
|
width: 16rem;
|
||||||
height: 1.6rem;
|
height: 16rem;
|
||||||
//transform: scale(1.2);
|
//transform: scale(1.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -400,7 +400,7 @@ export default {
|
|||||||
.video-wrapper {
|
.video-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: black;
|
background: black;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
@ -411,14 +411,13 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.pause {
|
.pause {
|
||||||
width: 10rem;
|
width: 100rem;
|
||||||
height: 10rem;
|
height: 100rem;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
animation: pause-animation 1.1s linear;
|
animation: pause-animation 1.1s linear;
|
||||||
@ -520,7 +519,7 @@ export default {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
@width: 3.5rem;
|
@width: 35rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: @width;
|
width: @width;
|
||||||
@ -528,7 +527,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -550,25 +549,25 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.location {
|
.location {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 10rem;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
padding: .4rem;
|
padding: 4rem;
|
||||||
border-radius: .3rem;
|
border-radius: 3rem;
|
||||||
background: @second-btn-color-tran;
|
background: @second-btn-color-tran;
|
||||||
|
|
||||||
.gang {
|
.gang {
|
||||||
height: .8rem;
|
height: 8rem;
|
||||||
width: 1.5px;
|
width: 1.5px;
|
||||||
margin: 0 .5rem;
|
margin: 0 5rem;
|
||||||
background: gray;
|
background: gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-right: .7rem;
|
margin-right: 7rem;
|
||||||
width: 1.8rem;
|
width: 18rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -100,20 +100,20 @@ export default {
|
|||||||
width: 70%;
|
width: 70%;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-size: 1.5rem;
|
font-size: 15rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.body {
|
.body {
|
||||||
padding: 2.5rem;
|
padding: 25rem;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 1.5rem;
|
font-size: 15rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
margin-top: 1rem;
|
margin-top: 10rem;
|
||||||
font-size: 1.3rem;
|
font-size: 13rem;
|
||||||
|
|
||||||
&.gray {
|
&.gray {
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
@ -122,10 +122,10 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
height: 4.6rem;
|
height: 46rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
border-top: 1px solid whitesmoke;
|
border-top: 1px solid whitesmoke;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
|
|
||||||
.cancel, .ok {
|
.cancel, .ok {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -145,11 +145,7 @@ export default {
|
|||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -27,10 +27,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>
|
||||||
|
|||||||
@ -61,7 +61,7 @@ export default {
|
|||||||
},
|
},
|
||||||
borderRadius: {
|
borderRadius: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '.5rem .5rem 0 0'
|
default: '5rem 5rem 0 0'
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@ -186,7 +186,7 @@ export default {
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding-top: 2.4rem;
|
padding-top: 24rem;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -210,13 +210,13 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.heng-gang {
|
.heng-gang {
|
||||||
border-radius: .5rem .5rem 0 0;
|
border-radius: 5rem 5rem 0 0;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
transform: translateY(-2.4rem);
|
transform: translateY(-24rem);
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
@ -246,8 +246,8 @@ export default {
|
|||||||
|
|
||||||
.content {
|
.content {
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
height: .4rem;
|
height: 4rem;
|
||||||
width: 3rem;
|
width: 30rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -75,20 +75,20 @@ export default {
|
|||||||
width: 70%;
|
width: 70%;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-size: 1.5rem;
|
font-size: 15rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.body {
|
.body {
|
||||||
padding: 2.5rem;
|
padding: 25rem;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 1.5rem;
|
font-size: 15rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
margin-top: 1rem;
|
margin-top: 10rem;
|
||||||
font-size: 1.3rem;
|
font-size: 13rem;
|
||||||
|
|
||||||
&.gray{
|
&.gray{
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
@ -97,12 +97,12 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
height: 4.6rem;
|
height: 46rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-top: 1px solid whitesmoke;
|
border-top: 1px solid whitesmoke;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
|
|
||||||
|
|
||||||
.cancel {
|
.cancel {
|
||||||
|
|||||||
@ -43,13 +43,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 {
|
||||||
|
|||||||
@ -67,16 +67,16 @@ export default {
|
|||||||
width: 80%;
|
width: 80%;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 1.5rem 2rem;
|
padding: 15rem 20rem;
|
||||||
font-size: 1.5rem;
|
font-size: 15rem;
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
margin-top: 2rem;
|
margin-top: 20rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
||||||
.cancel {
|
.cancel {
|
||||||
margin-right: 2.5rem;
|
margin-right: 25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -117,7 +117,7 @@ export default {
|
|||||||
@import "../../assets/less/index";
|
@import "../../assets/less/index";
|
||||||
|
|
||||||
.indicator-ctn {
|
.indicator-ctn {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: @indicator-height;
|
height: @indicator-height;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -132,7 +132,7 @@ export default {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
height: 4.5rem;
|
height: 45rem;
|
||||||
width: 45%;
|
width: 45%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -145,8 +145,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-left: .5rem;
|
margin-left: 5rem;
|
||||||
@width: 1.2rem;
|
@width: 12rem;
|
||||||
width: @width;
|
width: @width;
|
||||||
height: @width;
|
height: @width;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -118,7 +118,7 @@ export default {
|
|||||||
@import "../../assets/less/index";
|
@import "../../assets/less/index";
|
||||||
|
|
||||||
.indicator-ctn {
|
.indicator-ctn {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: @indicator-height;
|
height: @indicator-height;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -132,7 +132,7 @@ export default {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
height: 4.5rem;
|
height: 45rem;
|
||||||
width: 45%;
|
width: 45%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -145,8 +145,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-left: .5rem;
|
margin-left: 5rem;
|
||||||
@width: 1.2rem;
|
@width: 12rem;
|
||||||
width: @width;
|
width: @width;
|
||||||
height: @width;
|
height: @width;
|
||||||
}
|
}
|
||||||
@ -155,7 +155,7 @@ export default {
|
|||||||
|
|
||||||
.indicator {
|
.indicator {
|
||||||
height: 3px;
|
height: 3px;
|
||||||
width: 2.5rem;
|
width: 25rem;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@ -431,7 +431,7 @@ export default {
|
|||||||
|
|
||||||
.indicator-home {
|
.indicator-home {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
font-size: 1.6rem;
|
font-size: 16rem;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
|
|||||||
@ -21,9 +21,9 @@
|
|||||||
<img src="../../assets/img/icon/search-gray.png" alt=""
|
<img src="../../assets/img/icon/search-gray.png" alt=""
|
||||||
:style="{opacity:loading ? 0 : 1}"
|
:style="{opacity:loading ? 0 : 1}"
|
||||||
@click="$nav('/home/search')"
|
@click="$nav('/home/search')"
|
||||||
style="margin-top: .5rem;">
|
style="margin-top: 5rem;">
|
||||||
</div>
|
</div>
|
||||||
<Loading class="loading" style="width: 4rem;" :style="loadingStyle" :is-full-screen="false"/>
|
<Loading class="loading" style="width: 40rem;" :style="loadingStyle" :is-full-screen="false"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="indicator-bullets" v-if="indicatorType === 'bullets' && slideItems.length">
|
<div class="indicator-bullets" v-if="indicatorType === 'bullets' && slideItems.length">
|
||||||
@ -362,7 +362,7 @@ export default {
|
|||||||
|
|
||||||
.indicator-home {
|
.indicator-home {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
font-size: 1.6rem;
|
font-size: 16rem;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
@ -383,8 +383,8 @@ export default {
|
|||||||
|
|
||||||
.loading {
|
.loading {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
top: 1.3rem;
|
top: 13rem;
|
||||||
right: 1.5rem;
|
right: 15rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -396,7 +396,7 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
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;
|
||||||
@ -424,11 +424,11 @@ export default {
|
|||||||
.indicator {
|
.indicator {
|
||||||
//transition: left .3s;
|
//transition: left .3s;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -0.8rem;
|
bottom: -8rem;
|
||||||
height: .3rem;
|
height: 3rem;
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: .5rem;
|
border-radius: 5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -436,7 +436,7 @@ export default {
|
|||||||
|
|
||||||
.indicator-bullets {
|
.indicator-bullets {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 1rem;
|
bottom: 10rem;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
left: 0;
|
left: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -444,10 +444,10 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.bullet {
|
.bullet {
|
||||||
@width: .5rem;
|
@width: 5rem;
|
||||||
width: @width;
|
width: @width;
|
||||||
height: @width;
|
height: @width;
|
||||||
margin: 0 .3rem;
|
margin: 0 3rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: @second-btn-color;
|
background: @second-btn-color;
|
||||||
|
|
||||||
|
|||||||
@ -259,34 +259,34 @@ export default {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-radius: 1.5rem;
|
border-radius: 15rem;
|
||||||
//box-shadow: 0 0 2rem 0 #b3b3b3;
|
//box-shadow: 0 0 2rem 0 #b3b3b3;
|
||||||
padding: 1.5rem;
|
padding: 15rem;
|
||||||
color: black;
|
color: black;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.close {
|
.close {
|
||||||
top: 1.5rem;
|
top: 15rem;
|
||||||
right: 1.5rem;
|
right: 15rem;
|
||||||
width: 2.5rem;
|
width: 25rem;
|
||||||
height: 2.5rem;
|
height: 25rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
width: 12rem;
|
width: 120rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
margin-top: 2rem;
|
margin-top: 20rem;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 20rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 1.6rem;
|
font-size: 16rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.age {
|
.age {
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
background: #f1f1f1;
|
background: #f1f1f1;
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
@ -297,9 +297,9 @@ export default {
|
|||||||
color: black;
|
color: black;
|
||||||
border-top: 1px solid #f1f1f1;
|
border-top: 1px solid #f1f1f1;
|
||||||
border-bottom: 1px solid #f1f1f1;
|
border-bottom: 1px solid #f1f1f1;
|
||||||
padding: 1rem 0;
|
padding: 10rem 0;
|
||||||
margin: 1.5rem 0;
|
margin: 15rem 0;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -313,7 +313,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.poster-item {
|
.poster-item {
|
||||||
border-radius: .8rem;
|
border-radius: 8rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@ -326,17 +326,17 @@ export default {
|
|||||||
.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.2rem;
|
font-size: 12rem;
|
||||||
|
|
||||||
|
|
||||||
.love {
|
.love {
|
||||||
width: 1.2rem;
|
width: 12rem;
|
||||||
height: 1.2rem;
|
height: 12rem;
|
||||||
margin-right: .5rem;
|
margin-right: 5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -345,11 +345,11 @@ export default {
|
|||||||
|
|
||||||
.options {
|
.options {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 2rem;
|
bottom: 20rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
left: 1.5rem;
|
left: 15rem;
|
||||||
right: 1.5rem;
|
right: 15rem;
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
width: 49%;
|
width: 49%;
|
||||||
|
|||||||
@ -353,7 +353,7 @@ export default {
|
|||||||
.video-wrapper {
|
.video-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: black;
|
background: black;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
@ -364,8 +364,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.pause {
|
.pause {
|
||||||
width: 10rem;
|
width: 100rem;
|
||||||
height: 10rem;
|
height: 100rem;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
@ -473,7 +473,7 @@ export default {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
@width: 3.5rem;
|
@width: 35rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: @width;
|
width: @width;
|
||||||
@ -481,7 +481,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -503,25 +503,25 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.location {
|
.location {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 10rem;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
padding: .4rem;
|
padding: 4rem;
|
||||||
border-radius: .3rem;
|
border-radius: 3rem;
|
||||||
background: @second-btn-color-tran;
|
background: @second-btn-color-tran;
|
||||||
|
|
||||||
.gang {
|
.gang {
|
||||||
height: .8rem;
|
height: 8rem;
|
||||||
width: 1.5px;
|
width: 1.5px;
|
||||||
margin: 0 .5rem;
|
margin: 0 5rem;
|
||||||
background: gray;
|
background: gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-right: .7rem;
|
margin-right: 7rem;
|
||||||
width: 1.8rem;
|
width: 18rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -409,14 +409,14 @@ export default {
|
|||||||
//overflow: auto;
|
//overflow: auto;
|
||||||
|
|
||||||
.scroller {
|
.scroller {
|
||||||
//transform: translate3d(0, -5rem, 0);
|
//transform: translate3d(0, -50rem, 0);
|
||||||
height: calc(100vh - 5rem);
|
height: calc(100vh - 50rem);
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
|
|
||||||
> .wrapper {
|
> .wrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -8rem;
|
top: -80rem;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
@ -425,17 +425,17 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
height: 8rem;
|
height: 80rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
//transform: translate3d(0, -5rem, 0);
|
//transform: translate3d(0, -50rem, 0);
|
||||||
background: @douyin-bg;
|
background: @douyin-bg;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 1.5rem;
|
font-size: 15rem;
|
||||||
height: 5rem;
|
height: 50rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -461,7 +461,7 @@ export default {
|
|||||||
|
|
||||||
.title {
|
.title {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
font-size: 1.8rem;
|
font-size: 18rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -483,7 +483,7 @@ export default {
|
|||||||
|
|
||||||
.left-title {
|
.left-title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 1.7rem;
|
font-size: 17rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
@ -492,7 +492,7 @@ export default {
|
|||||||
background: linear-gradient(to top right, #e37c7c, #bd5959);
|
background: linear-gradient(to top right, #e37c7c, #bd5959);
|
||||||
padding: 0 4px 2px 4px;
|
padding: 0 4px 2px 4px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
@ -516,7 +516,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.price {
|
.price {
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -553,7 +553,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ad-desc {
|
.ad-desc {
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
color: darkgray;
|
color: darkgray;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -563,8 +563,6 @@ export default {
|
|||||||
height: 50px;
|
height: 50px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -620,17 +618,17 @@ export default {
|
|||||||
.author {
|
.author {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
height: 3rem;
|
height: 30rem;
|
||||||
bottom: 1rem;
|
bottom: 10rem;
|
||||||
left: 1rem;
|
left: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.live {
|
.live {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
padding: .2rem .5rem;
|
padding: 2rem 5rem;
|
||||||
border-radius: .2rem;
|
border-radius: 2rem;
|
||||||
top: 1rem;
|
top: 10rem;
|
||||||
left: 1rem;
|
left: 10rem;
|
||||||
color: white;
|
color: white;
|
||||||
background: @primary-btn-color;
|
background: @primary-btn-color;
|
||||||
}
|
}
|
||||||
@ -641,7 +639,7 @@ export default {
|
|||||||
background: @douyin-bg;
|
background: @douyin-bg;
|
||||||
|
|
||||||
.top, .bottom {
|
.top, .bottom {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
@ -658,31 +656,31 @@ export default {
|
|||||||
.line {
|
.line {
|
||||||
margin: 0 4px;
|
margin: 0 4px;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: .8rem;
|
height: 8rem;
|
||||||
background: gray;
|
background: gray;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom {
|
.bottom {
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ranking-list {
|
.ranking-list {
|
||||||
padding: 2rem 1rem;
|
padding: 20rem 10rem;
|
||||||
background: @douyin-bg;
|
background: @douyin-bg;
|
||||||
|
|
||||||
.desc {
|
.desc {
|
||||||
.top {
|
.top {
|
||||||
margin-bottom: .2rem;
|
margin-bottom: 2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
margin-right: .5rem;
|
margin-right: 5rem;
|
||||||
height: 1.4rem;
|
height: 14rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
@ -692,19 +690,19 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ads {
|
.ads {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
|
|
||||||
.ad {
|
.ad {
|
||||||
background: @second-btn-color;
|
background: @second-btn-color;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 1rem;
|
margin-top: 10rem;
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
|
|
||||||
.ad-logo {
|
.ad-logo {
|
||||||
height: 4rem;
|
height: 40rem;
|
||||||
width: 4rem;
|
width: 40rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -715,7 +713,7 @@ export default {
|
|||||||
|
|
||||||
.rank {
|
.rank {
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
margin-bottom: .2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
v-model:active-index="baseActiveIndex">
|
v-model:active-index="baseActiveIndex">
|
||||||
<SlideItem>
|
<SlideItem>
|
||||||
<SlideRowList
|
<SlideRowList
|
||||||
style="height: calc(100% - 5rem);"
|
style="height: calc(100% - 50rem);"
|
||||||
v-model:active-index="activeIndex"
|
v-model:active-index="activeIndex"
|
||||||
indicatorType="home"
|
indicatorType="home"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -238,7 +238,7 @@ export default {
|
|||||||
.send-gift {
|
.send-gift {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 63vh;
|
top: 63vh;
|
||||||
left: 1.5rem;
|
left: 15rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
animation: send-gift-anim 2s linear;
|
animation: send-gift-anim 2s linear;
|
||||||
@ -264,14 +264,14 @@ export default {
|
|||||||
|
|
||||||
.left {
|
.left {
|
||||||
background: linear-gradient(to right, @primary-btn-color, rgba(252, 47, 86, .2));
|
background: linear-gradient(to right, @primary-btn-color, rgba(252, 47, 86, .2));
|
||||||
padding: .5rem;
|
padding: 5rem;
|
||||||
border-radius: 5rem;
|
border-radius: 50rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
margin-right: .5rem;
|
margin-right: 5rem;
|
||||||
width: 4rem;
|
width: 40rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -285,11 +285,11 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sendto {
|
.sendto {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
color: yellow;
|
color: yellow;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -299,13 +299,13 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.gift-icon {
|
.gift-icon {
|
||||||
width: 4rem;
|
width: 40rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
font-size: 2.3rem;
|
font-size: 23rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-style: oblique;
|
font-style: oblique;
|
||||||
}
|
}
|
||||||
@ -317,7 +317,7 @@ export default {
|
|||||||
transform: translateX(100vw);
|
transform: translateX(100vw);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
animation: anim 5s linear;
|
animation: anim 5s linear;
|
||||||
|
|
||||||
@keyframes anim {
|
@keyframes anim {
|
||||||
@ -330,24 +330,24 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.type {
|
.type {
|
||||||
padding: .1rem .6rem;
|
padding: 1rem 6rem;
|
||||||
border: 1px solid white;
|
border: 1px solid white;
|
||||||
border-radius: 2rem;
|
border-radius: 20rem;
|
||||||
margin-right: .5rem;
|
margin-right: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-joined {
|
.user-joined {
|
||||||
@tag-bg: rgba(58, 58, 70, 0.3);
|
@tag-bg: rgba(58, 58, 70, 0.3);
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 70vh;
|
top: 70vh;
|
||||||
left: 1.5rem;
|
left: 15rem;
|
||||||
padding: .4rem .8rem;
|
padding: 4rem 8rem;
|
||||||
border-radius: 2rem;
|
border-radius: 20rem;
|
||||||
background: rgba(115, 114, 181, .7);
|
background: rgba(115, 114, 181, .7);
|
||||||
margin-bottom: .5rem;
|
margin-bottom: 5rem;
|
||||||
animation: user-joined-anim 3s linear;
|
animation: user-joined-anim 3s linear;
|
||||||
|
|
||||||
@keyframes user-joined-anim {
|
@keyframes user-joined-anim {
|
||||||
@ -357,7 +357,7 @@ export default {
|
|||||||
}
|
}
|
||||||
10% {
|
10% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateX(3rem);
|
transform: translateX(30rem);
|
||||||
}
|
}
|
||||||
90% {
|
90% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@ -378,22 +378,22 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
@color: rgb(130, 133, 185);
|
@color: rgb(130, 133, 185);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
border-radius: 1rem;
|
border-radius: 10rem;
|
||||||
margin-right: 0.5rem;
|
margin-right: 5rem;
|
||||||
padding: 0 .6rem;
|
padding: 0 6rem;
|
||||||
background: @color;
|
background: @color;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-right: 0.3rem;
|
margin-right: 3rem;
|
||||||
width: 1.2rem;
|
width: 12rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
margin-right: 0.5rem;
|
margin-right: 5rem;
|
||||||
font-size: 1.3rem;
|
font-size: 13rem;
|
||||||
color: @text-color;
|
color: @text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -410,7 +410,7 @@ export default {
|
|||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.live-wrapper {
|
.live-wrapper {
|
||||||
@ -436,7 +436,7 @@ export default {
|
|||||||
.top {
|
.top {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-top: 1rem;
|
margin-top: 10rem;
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
margin-left: @padding-page;
|
margin-left: @padding-page;
|
||||||
@ -445,15 +445,15 @@ export default {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: @second-btn-color-tran;
|
background: @second-btn-color-tran;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: .3rem .4rem .3rem .2rem;
|
padding: 3rem 4rem 3rem 2rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: 2rem;
|
border-radius: 20rem;
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 3rem;
|
width: 30rem;
|
||||||
height: 3rem;
|
height: 30rem;
|
||||||
margin-right: .4rem;
|
margin-right: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.desc {
|
.desc {
|
||||||
@ -464,10 +464,10 @@ export default {
|
|||||||
|
|
||||||
|
|
||||||
.desc-wrapper {
|
.desc-wrapper {
|
||||||
width: 8rem;
|
width: 80rem;
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@ -475,19 +475,19 @@ export default {
|
|||||||
|
|
||||||
.count {
|
.count {
|
||||||
color: gainsboro;
|
color: gainsboro;
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.follow-btn {
|
.follow-btn {
|
||||||
height: 3rem;
|
height: 30rem;
|
||||||
width: 4.5rem;
|
width: 45rem;
|
||||||
background: @primary-btn-color;
|
background: @primary-btn-color;
|
||||||
border-radius: 3rem;
|
border-radius: 30rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -495,20 +495,20 @@ export default {
|
|||||||
.left-bottom {
|
.left-bottom {
|
||||||
margin-top: calc(@padding-page / 2);
|
margin-top: calc(@padding-page / 2);
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
|
|
||||||
.tag {
|
.tag {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: .4rem 1rem;
|
padding: 4rem 10rem;
|
||||||
background: @tag-bg;
|
background: @tag-bg;
|
||||||
border-radius: 2rem;
|
border-radius: 20rem;
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-right: .5rem;
|
margin-right: 5rem;
|
||||||
width: 1rem;
|
width: 10rem;
|
||||||
height: 1rem;
|
height: 10rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -516,23 +516,23 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
margin-top: .3rem;
|
margin-top: 3rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.follower {
|
.follower {
|
||||||
@width: 3rem;
|
@width: 30rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.round {
|
.round {
|
||||||
width: @width;
|
width: @width;
|
||||||
height: @width;
|
height: @width;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-right: .3rem;
|
margin-right: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.count {
|
.count {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
background: @second-btn-color-tran;
|
background: @second-btn-color-tran;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -540,11 +540,11 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.close {
|
.close {
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
margin-left: .5rem;
|
margin-left: 5rem;
|
||||||
padding: 0.6rem;
|
padding: 6rem;
|
||||||
width: calc(@width - 1.2rem);
|
width: calc(@width - 12rem);
|
||||||
height: calc(@width - 1.2rem);
|
height: calc(@width - 12rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -553,16 +553,15 @@ export default {
|
|||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
border-radius: 1.3rem 0 0 1.3rem;
|
border-radius: 13rem 0 0 13rem;
|
||||||
padding: .2rem 0 .2rem 1rem;
|
padding: 2rem 0 2rem 10rem;
|
||||||
margin-top: 1.5rem;
|
margin-top: 15rem;
|
||||||
background: @tag-bg;
|
background: @tag-bg;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -572,7 +571,7 @@ export default {
|
|||||||
width: 100vw;
|
width: 100vw;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: @padding-page;
|
padding: @padding-page;
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 10rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
|
||||||
@ -580,7 +579,7 @@ export default {
|
|||||||
width: 87%;
|
width: 87%;
|
||||||
|
|
||||||
.comments {
|
.comments {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 10rem;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
height: 20vh;
|
height: 20vh;
|
||||||
|
|
||||||
@ -592,10 +591,10 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.comment {
|
.comment {
|
||||||
padding: .4rem .5rem;
|
padding: 4rem 5rem;
|
||||||
border-radius: 1rem;
|
border-radius: 10rem;
|
||||||
background: @tag-bg;
|
background: @tag-bg;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: 5rem;
|
||||||
|
|
||||||
@text-color: rgb(164, 234, 253);
|
@text-color: rgb(164, 234, 253);
|
||||||
|
|
||||||
@ -612,22 +611,22 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
@color: rgb(130, 133, 185);
|
@color: rgb(130, 133, 185);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
border-radius: 1rem;
|
border-radius: 10rem;
|
||||||
margin-right: 0.5rem;
|
margin-right: 5rem;
|
||||||
padding: 0 .6rem;
|
padding: 0 6rem;
|
||||||
background: @color;
|
background: @color;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-right: 0.3rem;
|
margin-right: 3rem;
|
||||||
width: 1.2rem;
|
width: 12rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
margin-right: 0.5rem;
|
margin-right: 5rem;
|
||||||
font-size: 1.3rem;
|
font-size: 13rem;
|
||||||
color: @text-color;
|
color: @text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -644,31 +643,31 @@ export default {
|
|||||||
.input {
|
.input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
color: #a2a2a2;
|
color: #a2a2a2;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
border-radius: 1.5rem;
|
border-radius: 15rem;
|
||||||
padding: .4rem 1rem;
|
padding: 4rem 10rem;
|
||||||
background: @tag-bg;
|
background: @tag-bg;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.more {
|
.more {
|
||||||
margin-left: 1rem;
|
margin-left: 10rem;
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
padding: .5rem;
|
padding: 5rem;
|
||||||
background: @tag-bg;
|
background: @tag-bg;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gift {
|
.gift {
|
||||||
margin-left: 1rem;
|
margin-left: 10rem;
|
||||||
width: 3.1rem;
|
width: 31rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -679,12 +678,12 @@ export default {
|
|||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
|
|
||||||
@width: 3.5rem;
|
@width: 35rem;
|
||||||
|
|
||||||
.avatar-wrapper {
|
.avatar-wrapper {
|
||||||
background: linear-gradient(to bottom, #000000, @primary-btn-color);
|
background: linear-gradient(to bottom, #000000, @primary-btn-color);
|
||||||
border-radius: 2rem;
|
border-radius: 20rem;
|
||||||
width: calc(@width + .2rem);
|
width: calc(@width + 2rem);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -698,27 +697,27 @@ export default {
|
|||||||
width: @width;
|
width: @width;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: white;
|
background: white;
|
||||||
padding: .15rem;
|
padding: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.follow {
|
.follow {
|
||||||
width: 3.2rem;
|
width: 32rem;
|
||||||
margin-top: .5rem;
|
margin-top: 5rem;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.options {
|
.options {
|
||||||
margin-top: .8rem;
|
margin-top: 8rem;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: 5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 1.8rem;
|
width: 18rem;
|
||||||
transition: all .8s;
|
transition: all .8s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -740,12 +739,9 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -229,7 +229,7 @@ export default {
|
|||||||
top: 0;
|
top: 0;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -238,14 +238,14 @@ export default {
|
|||||||
background: @main-bg;
|
background: @main-bg;
|
||||||
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;
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
font-size: 1.3rem;
|
font-size: 13rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
@ -258,34 +258,34 @@ export default {
|
|||||||
.logo {
|
.logo {
|
||||||
background: linear-gradient(to bottom, #794CFF 5%, #4C3EFE 50%);
|
background: linear-gradient(to bottom, #794CFF 5%, #4C3EFE 50%);
|
||||||
//padding: .2rem 1rem;
|
//padding: .2rem 1rem;
|
||||||
width: 8rem;
|
width: 80rem;
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
border-radius: 1rem;
|
border-radius: 10rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 2.4rem;
|
width: 24rem;
|
||||||
height: 2.4rem;
|
height: 24rem;
|
||||||
margin-left: 1.5rem;
|
margin-left: 15rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding-top: 6rem;
|
padding-top: 60rem;
|
||||||
|
|
||||||
.Scroll {
|
.Scroll {
|
||||||
height: calc(100vh - 6rem);
|
height: calc(100vh - 60rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.desc {
|
.desc {
|
||||||
padding: 1rem 1.5rem 3rem 1.5rem;
|
padding: 10rem 15rem 30rem 15rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 12rem;
|
height: 120rem;
|
||||||
|
|
||||||
.cover-wrapper {
|
.cover-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -294,82 +294,81 @@ export default {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
.play {
|
.play {
|
||||||
width: 4rem;
|
width: 40rem;
|
||||||
height: 4rem;
|
height: 40rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cover {
|
.cover {
|
||||||
width: 12rem;
|
width: 120rem;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: .3rem;
|
border-radius: 3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
margin-left: 1.5rem;
|
margin-left: 15rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
font-size: 1.8rem;
|
font-size: 18rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user, .peoples {
|
.user, .peoples {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 5rem;
|
||||||
color: #999999;
|
color: #999999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collection {
|
.collection {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 2.5rem;
|
height: 25rem;
|
||||||
width: 7rem;
|
width: 70rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background: @second-btn-color;
|
background: @second-btn-color;
|
||||||
border-radius: 0.2rem;
|
border-radius: 2rem;
|
||||||
font-size: 1.3rem;
|
font-size: 13rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-right: .5rem;
|
margin-right: 5rem;
|
||||||
width: 1.3rem;
|
width: 13rem;
|
||||||
height: 1.3rem;
|
height: 13rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.options {
|
.options {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 2rem;
|
bottom: 20rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
margin-right: .5rem;
|
margin-right: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-button {
|
.l-button {
|
||||||
margin-left: .5rem;
|
margin-left: 5rem;
|
||||||
margin-right: .5rem;
|
margin-right: 5rem;
|
||||||
width: 14rem;
|
width: 140rem;
|
||||||
border-radius: 5rem;
|
border-radius: 50rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 1.5rem 0;
|
padding: 15rem 0;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -432,12 +432,12 @@ export default {
|
|||||||
top: 0;
|
top: 0;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
|
|
||||||
.fixed-back {
|
.fixed-back {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 1rem;
|
left: 10rem;
|
||||||
top: 2rem;
|
top: 20rem;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -446,7 +446,7 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
height: 6rem;
|
height: 60rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -464,9 +464,9 @@ export default {
|
|||||||
.update-time {
|
.update-time {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: rgba(172, 107, 251, .5);
|
background: rgba(172, 107, 251, .5);
|
||||||
bottom: 2rem;
|
bottom: 20rem;
|
||||||
border-radius: .1rem;
|
border-radius: 1rem;
|
||||||
padding: .2rem 3rem;
|
padding: 2rem 30rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -481,7 +481,7 @@ export default {
|
|||||||
|
|
||||||
.list {
|
.list {
|
||||||
.item {
|
.item {
|
||||||
padding: 2rem 1.5rem;
|
padding: 20rem 15rem;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -492,11 +492,11 @@ export default {
|
|||||||
|
|
||||||
.rank-wrapper {
|
.rank-wrapper {
|
||||||
.rank {
|
.rank {
|
||||||
width: 1.8rem;
|
width: 18rem;
|
||||||
height: 1.8rem;
|
height: 18rem;
|
||||||
line-height: 1.8rem;
|
line-height: 18rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-right: 1.5rem;
|
margin-right: 15rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -510,21 +510,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;
|
||||||
@ -544,7 +544,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.author, .desc-bottom {
|
.author, .desc-bottom {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -552,7 +552,7 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.duration {
|
.duration {
|
||||||
margin-right: 1.4rem;
|
margin-right: 14rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
@ -572,9 +572,9 @@ export default {
|
|||||||
|
|
||||||
.option {
|
.option {
|
||||||
img {
|
img {
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
margin-left: 2rem;
|
margin-left: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -583,9 +583,9 @@ export default {
|
|||||||
|
|
||||||
.bottom {
|
.bottom {
|
||||||
background: @second-btn-color-tran;
|
background: @second-btn-color-tran;
|
||||||
padding: 1rem 1.5rem;
|
padding: 10rem 15rem;
|
||||||
margin-left: 3.3rem;
|
margin-left: 33rem;
|
||||||
margin-top: 1.5rem;
|
margin-top: 15rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -594,27 +594,27 @@ export default {
|
|||||||
.arrow {
|
.arrow {
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
border: .8rem solid transparent;
|
border: 8rem solid transparent;
|
||||||
border-bottom: .8rem solid @second-btn-color-tran;
|
border-bottom: 8rem solid @second-btn-color-tran;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 2rem;
|
left: 20rem;
|
||||||
top: -1.5rem;
|
top: -15rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
width: 3.5rem;
|
width: 35rem;
|
||||||
height: 3.5rem;
|
height: 35rem;
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
width: 6rem;
|
width: 60rem;
|
||||||
height: 2.5rem;
|
height: 25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,20 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="Publish">
|
<div class="Publish">
|
||||||
<video id="video" autoplay="autoplay" style="width: 100%;height:calc(100% - 6rem);"></video>
|
<video id="video" autoplay="autoplay" style="width: 100%;height:calc(100% - 60rem);"></video>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<SlideRowList v-model:active-index="activeIndex">
|
<SlideRowList v-model:active-index="activeIndex">
|
||||||
<SlideItem style="min-width: 20vw;min-height: 6rem;"></SlideItem>
|
<SlideItem style="min-width: 20vw;min-height: 60rem;"></SlideItem>
|
||||||
<SlideItem style="min-width: 20vw;min-height: 6rem;"></SlideItem>
|
<SlideItem style="min-width: 20vw;min-height: 60rem;"></SlideItem>
|
||||||
<SlideItem style="min-width: 25vw;min-height: 6rem;" @click="activeIndex = 0">
|
<SlideItem style="min-width: 25vw;min-height: 60rem;" @click="activeIndex = 0">
|
||||||
<span :class="activeIndex + 2 === 2?'active':''">分段拍</span>
|
<span :class="activeIndex + 2 === 2?'active':''">分段拍</span>
|
||||||
</SlideItem>
|
</SlideItem>
|
||||||
<SlideItem style="min-width: 20vw;min-height: 6rem;" @click="activeIndex = 1">
|
<SlideItem style="min-width: 20vw;min-height: 60rem;" @click="activeIndex = 1">
|
||||||
<span :class="activeIndex + 2 === 3?'active':''">快拍</span>
|
<span :class="activeIndex + 2 === 3?'active':''">快拍</span>
|
||||||
</SlideItem>
|
</SlideItem>
|
||||||
<SlideItem style="min-width: 20vw;min-height: 6rem;" @click="activeIndex = 2">
|
<SlideItem style="min-width: 20vw;min-height: 60rem;" @click="activeIndex = 2">
|
||||||
<span :class="activeIndex + 2 === 4?'active':''">影集</span>
|
<span :class="activeIndex + 2 === 4?'active':''">影集</span>
|
||||||
</SlideItem>
|
</SlideItem>
|
||||||
<SlideItem style="min-width: 20vw;min-height: 6rem;" @click="activeIndex = 3">
|
<SlideItem style="min-width: 20vw;min-height: 60rem;" @click="activeIndex = 3">
|
||||||
<span :class="activeIndex + 2 === 5?'active':''">开直播</span>
|
<span :class="activeIndex + 2 === 5?'active':''">开直播</span>
|
||||||
</SlideItem>
|
</SlideItem>
|
||||||
</SlideRowList>
|
</SlideRowList>
|
||||||
@ -98,7 +98,7 @@ export default {
|
|||||||
background: black;
|
background: black;
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
font-size: 1.5rem;
|
font-size: 15rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
|
|
||||||
@ -121,51 +121,49 @@ export default {
|
|||||||
|
|
||||||
.close {
|
.close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 2rem;
|
left: 20rem;
|
||||||
top: 2rem;
|
top: 20rem;
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.choose-music {
|
.choose-music {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 2rem;
|
top: 20rem;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
border-radius: 2rem;
|
border-radius: 20rem;
|
||||||
background: #333333;
|
background: #333333;
|
||||||
padding: .5rem 1.5rem;
|
padding: 5rem 15rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-right: .5rem;
|
margin-right: 5rem;
|
||||||
width: 1.2rem;
|
width: 12rem;
|
||||||
height: 1.2rem;
|
height: 12rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar {
|
.toolbar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 2rem;
|
top: 20rem;
|
||||||
right: 1rem;
|
right: 10rem;
|
||||||
|
|
||||||
.tool {
|
.tool {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 20rem;
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: 5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -134,27 +134,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 {
|
||||||
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.line {
|
.line {
|
||||||
width: calc(100% - 3rem);
|
width: calc(100% - 30rem);
|
||||||
margin-left: 1.5rem;
|
margin-left: 15rem;
|
||||||
background: @line-color;
|
background: @line-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -671,17 +671,17 @@ export default {
|
|||||||
top: 0;
|
top: 0;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
|
|
||||||
.type {
|
.type {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 1.6rem;
|
height: 16rem;
|
||||||
width: 1.6rem;
|
width: 16rem;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
margin-left: .5rem;
|
margin-left: 5rem;
|
||||||
border-radius: .2rem;
|
border-radius: 2rem;
|
||||||
|
|
||||||
&.hot {
|
&.hot {
|
||||||
background: @primary-btn-color;
|
background: @primary-btn-color;
|
||||||
@ -695,8 +695,8 @@ export default {
|
|||||||
.header {
|
.header {
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
background: @main-bg;
|
background: @main-bg;
|
||||||
height: 6rem;
|
height: 60rem;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
padding: 0 @padding-page;
|
padding: 0 @padding-page;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -713,22 +713,22 @@ export default {
|
|||||||
|
|
||||||
.scan {
|
.scan {
|
||||||
transform: scale(2);
|
transform: scale(2);
|
||||||
height: 1rem;
|
height: 10rem;
|
||||||
width: 1rem;
|
width: 10rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding-top: 6rem;
|
padding-top: 60rem;
|
||||||
|
|
||||||
.history {
|
.history {
|
||||||
.row {
|
.row {
|
||||||
min-height: 4rem;
|
min-height: 40rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-expand {
|
.history-expand {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 1rem;
|
padding: 10rem;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -737,8 +737,8 @@ export default {
|
|||||||
padding: 0 @padding-page;
|
padding: 0 @padding-page;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
padding: 1rem 0;
|
padding: 10rem 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -749,28 +749,28 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-right: .5rem;
|
margin-right: 5rem;
|
||||||
width: 1.3rem;
|
width: 13rem;
|
||||||
height: 1.3rem;
|
height: 13rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.keys {
|
.keys {
|
||||||
font-size: 1.6rem;
|
font-size: 16rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
.key {
|
.key {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: .8rem 0;
|
padding: 8rem 0;
|
||||||
width: 49%;
|
width: 49%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.desc {
|
.desc {
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -782,14 +782,14 @@ export default {
|
|||||||
|
|
||||||
.rank-list {
|
.rank-list {
|
||||||
.indicator {
|
.indicator {
|
||||||
padding: 1.5rem;
|
padding: 15rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
margin-right: 2rem;
|
margin-right: 20rem;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
@ -809,15 +809,15 @@ export default {
|
|||||||
|
|
||||||
.slide0 {
|
.slide0 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0 @padding-page 5rem @padding-page;
|
margin: 0 @padding-page 50rem @padding-page;
|
||||||
background: linear-gradient(to right, rgb(32, 29, 36), rgb(50, 29, 38));
|
background: linear-gradient(to right, rgb(32, 29, 36), rgb(50, 29, 38));
|
||||||
padding: @padding-page;
|
padding: @padding-page;
|
||||||
border-radius: 1rem;
|
border-radius: 10rem;
|
||||||
|
|
||||||
.l-row {
|
.l-row {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 1.6rem;
|
margin-bottom: 16rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
|
|
||||||
@ -826,11 +826,11 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.rank {
|
.rank {
|
||||||
width: 1.8rem;
|
width: 18rem;
|
||||||
height: 1.8rem;
|
height: 18rem;
|
||||||
line-height: 1.8rem;
|
line-height: 18rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-right: 1.5rem;
|
margin-right: 15rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -841,18 +841,18 @@ export default {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
width: calc(100vw - 14rem);
|
width: calc(100vw - 140rem);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
//padding: 0 1rem;
|
//padding: 0 1rem;
|
||||||
//flex: 1;
|
//flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
.desc {
|
.desc {
|
||||||
max-width: 85%;
|
max-width: 85%;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -860,7 +860,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.count {
|
.count {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -868,16 +868,16 @@ export default {
|
|||||||
|
|
||||||
.slide1 {
|
.slide1 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0 @padding-page 5rem @padding-page;
|
margin: 0 @padding-page 50rem @padding-page;
|
||||||
background: rgb(20, 22, 34);
|
background: rgb(20, 22, 34);
|
||||||
border: 1px solid rgba(31, 34, 52, 0.5);
|
border: 1px solid rgba(31, 34, 52, 0.5);
|
||||||
padding: @padding-page;
|
padding: @padding-page;
|
||||||
border-radius: 1rem;
|
border-radius: 10rem;
|
||||||
|
|
||||||
.l-row {
|
.l-row {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 10rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
|
|
||||||
@ -890,11 +890,11 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.rank {
|
.rank {
|
||||||
width: 1.8rem;
|
width: 18rem;
|
||||||
height: 1.8rem;
|
height: 18rem;
|
||||||
line-height: 1.8rem;
|
line-height: 18rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-right: 1.5rem;
|
margin-right: 15rem;
|
||||||
|
|
||||||
&.top {
|
&.top {
|
||||||
color: yellow;
|
color: yellow;
|
||||||
@ -909,18 +909,18 @@ export default {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
width: calc(100vw - 16rem);
|
width: calc(100vw - 160rem);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
//padding: 0 1rem;
|
//padding: 0 1rem;
|
||||||
//flex: 1;
|
//flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
.avatar-wrapper {
|
.avatar-wrapper {
|
||||||
@width: 3.5rem;
|
@width: 35rem;
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -932,48 +932,48 @@ export default {
|
|||||||
.avatar {
|
.avatar {
|
||||||
width: @width - 0.3;
|
width: @width - 0.3;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
padding: .1rem;
|
padding: 1rem;
|
||||||
background: black;
|
background: black;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.desc {
|
.desc {
|
||||||
max-width: 55%;
|
max-width: 55%;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.live-type {
|
.live-type {
|
||||||
height: 2.2rem;
|
height: 22rem;
|
||||||
padding: 0 .5rem;
|
padding: 0 5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
margin-left: .5rem;
|
margin-left: 5rem;
|
||||||
border-radius: .2rem;
|
border-radius: 2rem;
|
||||||
background: @second-btn-color-tran;
|
background: @second-btn-color-tran;
|
||||||
|
|
||||||
.type2 {
|
.type2 {
|
||||||
margin-right: .2rem;
|
margin-right: 2rem;
|
||||||
width: 1rem;
|
width: 10rem;
|
||||||
height: 1rem;
|
height: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.type1 {
|
.type1 {
|
||||||
margin-right: .2rem;
|
margin-right: 2rem;
|
||||||
width: 1.5rem;
|
width: 15rem;
|
||||||
height: 1rem;
|
height: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.count {
|
.count {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -981,16 +981,16 @@ export default {
|
|||||||
|
|
||||||
.slide2 {
|
.slide2 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0 @padding-page 5rem @padding-page;
|
margin: 0 @padding-page 50rem @padding-page;
|
||||||
background: rgb(20, 22, 34);
|
background: rgb(20, 22, 34);
|
||||||
border: 1px solid rgba(31, 34, 52, 0.5);
|
border: 1px solid rgba(31, 34, 52, 0.5);
|
||||||
padding: @padding-page;
|
padding: @padding-page;
|
||||||
border-radius: 1rem;
|
border-radius: 10rem;
|
||||||
|
|
||||||
.l-row {
|
.l-row {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 10rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
|
|
||||||
@ -1003,11 +1003,11 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.rank {
|
.rank {
|
||||||
width: 1.8rem;
|
width: 18rem;
|
||||||
height: 1.8rem;
|
height: 18rem;
|
||||||
line-height: 1.8rem;
|
line-height: 18rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-right: 1.5rem;
|
margin-right: 15rem;
|
||||||
|
|
||||||
&.top {
|
&.top {
|
||||||
color: yellow;
|
color: yellow;
|
||||||
@ -1022,28 +1022,28 @@ export default {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
width: calc(100vw - 15rem);
|
width: calc(100vw - 150rem);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
//padding: 0 1rem;
|
//padding: 0 1rem;
|
||||||
//flex: 1;
|
//flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
.avatar-wrapper {
|
.avatar-wrapper {
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
width: 3rem;
|
width: 30rem;
|
||||||
height: 3rem;
|
height: 30rem;
|
||||||
border-radius: .2rem;
|
border-radius: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.desc {
|
.desc {
|
||||||
max-width: 95%;
|
max-width: 95%;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -1054,12 +1054,12 @@ export default {
|
|||||||
.count {
|
.count {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-right: .2rem;
|
margin-right: 2rem;
|
||||||
width: 1.5rem;
|
width: 15rem;
|
||||||
height: 1.5rem;
|
height: 15rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1068,22 +1068,22 @@ export default {
|
|||||||
|
|
||||||
.slide3 {
|
.slide3 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0 @padding-page 5rem @padding-page;
|
margin: 0 @padding-page 50rem @padding-page;
|
||||||
border-radius: 1rem;
|
border-radius: 10rem;
|
||||||
|
|
||||||
.slide4-wrapper {
|
.slide4-wrapper {
|
||||||
padding: .5rem @padding-page;
|
padding: 5rem @padding-page;
|
||||||
|
|
||||||
.brands {
|
.brands {
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 15rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.brand {
|
.brand {
|
||||||
border-radius: .2rem;
|
border-radius: 2rem;
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
padding: .5rem 1rem;
|
padding: 5rem 10rem;
|
||||||
background: @second-btn-color-tran;
|
background: @second-btn-color-tran;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
@ -1094,9 +1094,9 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.l-row {
|
.l-row {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 10rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
|
|
||||||
@ -1109,11 +1109,11 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.rank {
|
.rank {
|
||||||
width: 1.8rem;
|
width: 18rem;
|
||||||
height: 1.8rem;
|
height: 18rem;
|
||||||
line-height: 1.8rem;
|
line-height: 18rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-right: 1.5rem;
|
margin-right: 15rem;
|
||||||
|
|
||||||
&.top {
|
&.top {
|
||||||
color: yellow;
|
color: yellow;
|
||||||
@ -1128,18 +1128,18 @@ export default {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
width: calc(100vw - 15rem);
|
width: calc(100vw - 150rem);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
//padding: 0 1rem;
|
//padding: 0 1rem;
|
||||||
//flex: 1;
|
//flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
.avatar-wrapper {
|
.avatar-wrapper {
|
||||||
@width: 3.5rem;
|
@width: 35rem;
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
|
|
||||||
&.living {
|
&.living {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -1157,7 +1157,7 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: .2rem solid @primary-btn-color;
|
border: 2rem solid @primary-btn-color;
|
||||||
animation: avatar-out-line 1s infinite;
|
animation: avatar-out-line 1s infinite;
|
||||||
|
|
||||||
@keyframes avatar-out-line {
|
@keyframes avatar-out-line {
|
||||||
@ -1166,13 +1166,13 @@ export default {
|
|||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
padding: .2rem;
|
padding: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
padding: .1rem;
|
padding: 1rem;
|
||||||
animation: avatar 1s infinite alternate;
|
animation: avatar 1s infinite alternate;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1188,10 +1188,10 @@ export default {
|
|||||||
|
|
||||||
@keyframes avatar {
|
@keyframes avatar {
|
||||||
from {
|
from {
|
||||||
padding: .1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
padding: .2rem;
|
padding: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1199,7 +1199,7 @@ export default {
|
|||||||
|
|
||||||
.desc {
|
.desc {
|
||||||
max-width: 95%;
|
max-width: 95%;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -1210,32 +1210,31 @@ export default {
|
|||||||
.count {
|
.count {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-right: .2rem;
|
margin-right: 2rem;
|
||||||
width: 1.5rem;
|
width: 15rem;
|
||||||
height: 1.5rem;
|
height: 15rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.ad {
|
.ad {
|
||||||
background: @second-btn-color-tran;
|
background: @second-btn-color-tran;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 10rem;
|
height: 100rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.more {
|
.more {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 20rem;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
padding: 1rem 1rem 0 1rem;
|
padding: 10rem 10rem 0 10rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: yellow;
|
color: yellow;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -83,33 +83,33 @@ 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 {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
padding: 1rem 1.5rem;
|
padding: 10rem 15rem;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
border-bottom: 1px solid #cccccc11;
|
border-bottom: 1px solid #cccccc11;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 1rem;
|
width: 10rem;
|
||||||
height: 1rem;
|
height: 10rem;
|
||||||
margin-right: .2rem;
|
margin-right: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-row {
|
.l-row {
|
||||||
padding: 0 1.5rem;
|
padding: 0 15rem;
|
||||||
|
|
||||||
.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;
|
||||||
|
|
||||||
|
|
||||||
@ -128,19 +128,19 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.text-num {
|
.text-num {
|
||||||
margin-top: .5rem;
|
margin-top: 5rem;
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-photo {
|
.upload-photo {
|
||||||
margin-top: .5rem;
|
margin-top: 5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0 1.5rem;
|
padding: 0 15rem;
|
||||||
|
|
||||||
@width: calc((100vw - 3vw - 3rem) / 4);
|
@width: calc((100vw - 3vw - 30rem) / 4);
|
||||||
|
|
||||||
.photo-wrapper {
|
.photo-wrapper {
|
||||||
width: @width;
|
width: @width;
|
||||||
@ -160,9 +160,9 @@ export default {
|
|||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
background: @second-btn-color;
|
background: @second-btn-color;
|
||||||
padding: .3rem;
|
padding: 3rem;
|
||||||
width: 1rem;
|
width: 10rem;
|
||||||
height: 1rem;
|
height: 10rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -173,13 +173,13 @@ export default {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: @second-btn-color-tran;
|
background: @second-btn-color-tran;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 3.5rem;
|
width: 35rem;
|
||||||
height: 3.5rem;
|
height: 35rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -187,9 +187,9 @@ export default {
|
|||||||
|
|
||||||
.button {
|
.button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 1.5rem;
|
left: 15rem;
|
||||||
right: 1.5rem;
|
right: 15rem;
|
||||||
bottom: 1.5rem;
|
bottom: 15rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -53,8 +53,8 @@ export default {
|
|||||||
@import "../../../assets/less/index";
|
@import "../../../assets/less/index";
|
||||||
|
|
||||||
.share-to-duoshan {
|
.share-to-duoshan {
|
||||||
padding: 3rem 2rem;
|
padding: 30rem 20rem;
|
||||||
min-height: calc(50vh - 6rem);
|
min-height: calc(50vh - 60rem);
|
||||||
//min-height: 50vh;
|
//min-height: 50vh;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -64,8 +64,8 @@ export default {
|
|||||||
|
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
height: 12rem;
|
height: 120rem;
|
||||||
width: 12rem;
|
width: 120rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
@ -73,15 +73,15 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.title2 {
|
.title2 {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 20rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 2rem;
|
font-size: 20rem;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -90,8 +90,8 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 2.2rem;
|
height: 22rem;
|
||||||
margin-right: .5rem;
|
margin-right: 5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
:show-heng-gang="false"
|
:show-heng-gang="false"
|
||||||
maskMode="dark"
|
maskMode="dark"
|
||||||
@cancel="cancel()"
|
@cancel="cancel()"
|
||||||
height="33rem"
|
height="330rem"
|
||||||
mode="light">
|
mode="light">
|
||||||
<div class="follow-setting-dialog">
|
<div class="follow-setting-dialog">
|
||||||
<div class="dialog-header">
|
<div class="dialog-header">
|
||||||
@ -92,12 +92,12 @@ export default {
|
|||||||
@import "../../../assets/less/index";
|
@import "../../../assets/less/index";
|
||||||
|
|
||||||
.follow-setting-dialog {
|
.follow-setting-dialog {
|
||||||
padding: 1.5rem;
|
padding: 15rem;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
|
|
||||||
.dialog-header {
|
.dialog-header {
|
||||||
color: rgb(81, 81, 89);
|
color: rgb(81, 81, 89);
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
@ -109,44 +109,44 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 1.8rem;
|
font-size: 18rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
margin-top: .5rem;
|
margin-top: 5rem;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
font-size: 1.3rem;
|
font-size: 13rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 1.4rem;
|
width: 14rem;
|
||||||
height: 1.4rem;
|
height: 14rem;
|
||||||
padding: .6rem;
|
padding: 6rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: rgba(187, 187, 194, 0.4);
|
background: rgba(187, 187, 194, 0.4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.options {
|
.options {
|
||||||
margin-top: 2rem;
|
margin-top: 20rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.option {
|
.option {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 1rem;
|
padding: 10rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
background: white;
|
background: white;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 23%;
|
width: 23%;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
border-radius: .8rem;
|
border-radius: 8rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-top: .5rem;
|
margin-top: 5rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 10rem;
|
||||||
@width: 2rem;
|
@width: 20rem;
|
||||||
width: @width;
|
width: @width;
|
||||||
height: @width;
|
height: @width;
|
||||||
}
|
}
|
||||||
@ -154,11 +154,11 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.l-rows {
|
.l-rows {
|
||||||
margin-top: 2rem;
|
margin-top: 20rem;
|
||||||
|
|
||||||
.l-row {
|
.l-row {
|
||||||
height: 4.5rem;
|
height: 45rem;
|
||||||
padding: 0 2rem;
|
padding: 0 20rem;
|
||||||
background: white;
|
background: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -166,17 +166,17 @@ export default {
|
|||||||
border-bottom: 1px solid rgba(222, 222, 222, 0.42);
|
border-bottom: 1px solid rgba(222, 222, 222, 0.42);
|
||||||
|
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
border-radius: 1rem 1rem 0 0;
|
border-radius: 10rem 10rem 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(3) {
|
&:nth-child(3) {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
border-radius: 0 0 1rem 1rem;
|
border-radius: 0 0 10rem 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
:show-heng-gang="false"
|
:show-heng-gang="false"
|
||||||
maskMode="dark"
|
maskMode="dark"
|
||||||
@cancel="cancel()"
|
@cancel="cancel()"
|
||||||
height="33rem"
|
height="330rem"
|
||||||
mode="light">
|
mode="light">
|
||||||
<div class="follow-setting-dialog">
|
<div class="follow-setting-dialog">
|
||||||
<div class="dialog-header">
|
<div class="dialog-header">
|
||||||
@ -75,12 +75,12 @@ export default {
|
|||||||
@import "../../../assets/less/index";
|
@import "../../../assets/less/index";
|
||||||
|
|
||||||
.follow-setting-dialog {
|
.follow-setting-dialog {
|
||||||
padding: 1.5rem;
|
padding: 15rem;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
|
|
||||||
.dialog-header {
|
.dialog-header {
|
||||||
color: rgb(81, 81, 89);
|
color: rgb(81, 81, 89);
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
@ -92,44 +92,44 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 1.8rem;
|
font-size: 18rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
margin-top: .5rem;
|
margin-top: 5rem;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
font-size: 1.3rem;
|
font-size: 13rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 1.4rem;
|
width: 14rem;
|
||||||
height: 1.4rem;
|
height: 14rem;
|
||||||
padding: .6rem;
|
padding: 6rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: rgba(187, 187, 194, 0.4);
|
background: rgba(187, 187, 194, 0.4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.options {
|
.options {
|
||||||
margin-top: 2rem;
|
margin-top: 20rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.option {
|
.option {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 1rem;
|
padding: 10rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
background: white;
|
background: white;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 23%;
|
width: 23%;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
border-radius: .8rem;
|
border-radius: 8rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-top: .5rem;
|
margin-top: 5rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 10rem;
|
||||||
@width: 2rem;
|
@width: 20rem;
|
||||||
width: @width;
|
width: @width;
|
||||||
height: @width;
|
height: @width;
|
||||||
}
|
}
|
||||||
@ -137,11 +137,11 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.l-rows {
|
.l-rows {
|
||||||
margin-top: 2rem;
|
margin-top: 20rem;
|
||||||
|
|
||||||
.l-row {
|
.l-row {
|
||||||
height: 4.5rem;
|
height: 45rem;
|
||||||
padding: 0 2rem;
|
padding: 0 20rem;
|
||||||
background: white;
|
background: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -149,17 +149,17 @@ export default {
|
|||||||
border-bottom: 1px solid rgba(222, 222, 222, 0.42);
|
border-bottom: 1px solid rgba(222, 222, 222, 0.42);
|
||||||
|
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
border-radius: 1rem 1rem 0 0;
|
border-radius: 10rem 10rem 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(3) {
|
&:nth-child(3) {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
border-radius: 0 0 1rem 1rem;
|
border-radius: 0 0 10rem 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -121,12 +121,12 @@ export default {
|
|||||||
@import "../../../assets/less/index";
|
@import "../../../assets/less/index";
|
||||||
|
|
||||||
.play-feedback {
|
.play-feedback {
|
||||||
max-height: 49rem;
|
max-height: 490rem;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: black;
|
color: black;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 5rem;
|
bottom: 50rem;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
||||||
@ -135,36 +135,36 @@ export default {
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background: white;
|
background: white;
|
||||||
height: 3rem;
|
height: 30rem;
|
||||||
padding: 1.5rem;
|
padding: 15rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 1.8rem;
|
font-size: 18rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding: 6rem 1.5rem 1.5rem 1.5rem;
|
padding: 60rem 15rem 15rem 15rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notice {
|
.notice {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-row {
|
.l-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: 5rem;
|
min-height: 50rem;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
border-bottom: 1px solid #f1f1f1;
|
border-bottom: 1px solid #f1f1f1;
|
||||||
|
|
||||||
|
|
||||||
.check {
|
.check {
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -176,9 +176,9 @@ export default {
|
|||||||
.textarea-ctn {
|
.textarea-ctn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #eae8e8;
|
background: #eae8e8;
|
||||||
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;
|
||||||
|
|
||||||
|
|
||||||
@ -197,9 +197,9 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.text-num {
|
.text-num {
|
||||||
margin-top: .8rem;
|
margin-top: 8rem;
|
||||||
margin-bottom: .8rem;
|
margin-bottom: 8rem;
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -235,24 +235,24 @@ export default {
|
|||||||
|
|
||||||
.option-dialog {
|
.option-dialog {
|
||||||
.buttons {
|
.buttons {
|
||||||
padding: 0 1.5rem;
|
padding: 0 15rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 2.2rem;
|
height: 22rem;
|
||||||
margin-right: .5rem;
|
margin-right: 5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog-friends {
|
.dialog-friends {
|
||||||
color: black;
|
color: black;
|
||||||
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;
|
||||||
|
|
||||||
> .dialog-friend {
|
> .dialog-friend {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: .8rem;
|
padding: 8rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -260,23 +260,23 @@ export default {
|
|||||||
|
|
||||||
img {
|
img {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 3.8rem;
|
width: 38rem;
|
||||||
height: 3.8rem;
|
height: 38rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
margin: 0 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.3rem;
|
font-size: 13rem;
|
||||||
color: white;
|
color: white;
|
||||||
height: 2.5rem;
|
height: 25rem;
|
||||||
width: 6rem;
|
width: 60rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -293,19 +293,19 @@ export default {
|
|||||||
|
|
||||||
.more {
|
.more {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 5.5rem;
|
height: 55rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-bottom: 1px solid #efefef;
|
border-bottom: 1px solid #efefef;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 15rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
margin: 0 2.2rem 0 1.5rem;
|
margin: 0 22rem 0 15rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -171,48 +171,48 @@ export default {
|
|||||||
@import "../../../assets/less/index";
|
@import "../../../assets/less/index";
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
width: 6.4rem;
|
width: 64rem;
|
||||||
height: 2.6rem !important;
|
height: 26rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@avatar-width: 3.8rem;
|
@avatar-width: 38rem;
|
||||||
|
|
||||||
.friend-list {
|
.friend-list {
|
||||||
padding: 0 1.5rem;
|
padding: 0 15rem;
|
||||||
|
|
||||||
.index {
|
.index {
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
height: 6rem;
|
height: 60rem;
|
||||||
line-height: 6rem;
|
line-height: 60rem;
|
||||||
font-size: 1.3rem;
|
font-size: 13rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.friend-item {
|
.friend-item {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 20rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
//background: #fff;
|
//background: #fff;
|
||||||
|
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
margin-top: 1rem;
|
margin-top: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
width: @avatar-width;
|
width: @avatar-width;
|
||||||
height: @avatar-width;
|
height: @avatar-width;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-right: 1.5rem;
|
margin-right: 15rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -222,28 +222,28 @@ export default {
|
|||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
.create-chat {
|
.create-chat {
|
||||||
padding-bottom: 4rem;
|
padding-bottom: 40rem;
|
||||||
background: @main-bg;
|
background: @main-bg;
|
||||||
|
|
||||||
.search-ctn {
|
.search-ctn {
|
||||||
padding: 0 1.5rem;
|
padding: 0 15rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.joined-chat-group-nav {
|
.joined-chat-group-nav {
|
||||||
border-bottom: 1px solid @line-color;
|
border-bottom: 1px solid @line-color;
|
||||||
height: 5rem;
|
height: 50rem;
|
||||||
padding: 0 1.5rem;
|
padding: 0 15rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
width: 2.2rem;
|
width: 22rem;
|
||||||
height: 2.2rem;
|
height: 22rem;
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -263,15 +263,15 @@ export default {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 20rem;
|
||||||
width: calc(100% - 4rem);
|
width: calc(100% - 40rem);
|
||||||
height: 4rem;
|
height: 40rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: #3f445c;
|
background: #3f445c;
|
||||||
border-radius: .2rem;
|
border-radius: 2rem;
|
||||||
|
|
||||||
&.primary {
|
&.primary {
|
||||||
background: @primary-btn-color;
|
background: @primary-btn-color;
|
||||||
@ -287,12 +287,12 @@ export default {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.notice-h1 {
|
.notice-h1 {
|
||||||
font-size: 1.6rem;
|
font-size: 16rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notice-h2 {
|
.notice-h2 {
|
||||||
margin-top: 1rem;
|
margin-top: 10rem;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -303,17 +303,17 @@ export default {
|
|||||||
background: @main-bg;
|
background: @main-bg;
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
font-size: 1.6rem;
|
font-size: 16rem;
|
||||||
padding: 1.5rem;
|
padding: 15rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-list {
|
.chat-list {
|
||||||
padding: 0 1.5rem;
|
padding: 0 15rem;
|
||||||
|
|
||||||
.chat-item {
|
.chat-item {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 20rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -324,18 +324,18 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
margin-top: 1rem;
|
margin-top: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
width: @avatar-width;
|
width: @avatar-width;
|
||||||
height: @avatar-width;
|
height: @avatar-width;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-right: 1.5rem;
|
margin-right: 15rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -355,13 +355,13 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.num {
|
.num {
|
||||||
margin-left: .5rem;
|
margin-left: 5rem;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 1.5rem;
|
height: 15rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -259,19 +259,19 @@ export default {
|
|||||||
.video-share {
|
.video-share {
|
||||||
height: 60vh;
|
height: 60vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 1rem 1rem 0 0;
|
border-radius: 10rem 10rem 0 0;
|
||||||
color: white;
|
color: white;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
.friends {
|
.friends {
|
||||||
border-radius: 1rem;
|
border-radius: 10rem;
|
||||||
margin: 1rem;
|
margin: 10rem;
|
||||||
padding: 0 @padding-page;
|
padding: 0 @padding-page;
|
||||||
@avatar-width: 3.8rem;
|
@avatar-width: 38rem;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
background: white;
|
background: white;
|
||||||
|
|
||||||
@item-width: 5.5rem;
|
@item-width: 55rem;
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
height: @item-width;
|
height: @item-width;
|
||||||
@ -284,18 +284,18 @@ export default {
|
|||||||
width: @avatar-width;
|
width: @avatar-width;
|
||||||
height: @avatar-width;
|
height: @avatar-width;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-right: 1.5rem;
|
margin-right: 15rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -309,19 +309,19 @@ export default {
|
|||||||
border-bottom: 1px solid #f3f3f3;
|
border-bottom: 1px solid #f3f3f3;
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-left: 1rem;
|
margin-left: 10rem;
|
||||||
margin-right: 2rem;
|
margin-right: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@icon-width: 5.8rem;
|
@icon-width: 58rem;
|
||||||
|
|
||||||
:deep(.shares) {
|
:deep(.shares) {
|
||||||
@space-width: 1.5rem;
|
@space-width: 15rem;
|
||||||
|
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -336,8 +336,8 @@ export default {
|
|||||||
background: white;
|
background: white;
|
||||||
width: @icon-width;
|
width: @icon-width;
|
||||||
height: @icon-width;
|
height: @icon-width;
|
||||||
padding: 1.2rem;
|
padding: 12rem;
|
||||||
border-radius: 1.5rem;
|
border-radius: 15rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -349,9 +349,9 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
margin-top: .7rem;
|
margin-top: 7rem;
|
||||||
color: black;
|
color: black;
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@ -383,10 +383,7 @@ export default {
|
|||||||
border: @border-width solid #514F56;
|
border: @border-width solid #514F56;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -296,7 +296,7 @@
|
|||||||
<img class="left" :src="$imgPreview(item.avatar)" alt="">
|
<img class="left" :src="$imgPreview(item.avatar)" alt="">
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<span>{{ item.name }}</span>
|
<span>{{ item.name }}</span>
|
||||||
<Check mode="red" style="height: 2rem;width: 2rem;" v-model="item.select"/>
|
<Check mode="red" style="height: 20rem;width: 20rem;" v-model="item.select"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -507,7 +507,7 @@ export default {
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
background: @main-bg;
|
background: @main-bg;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
@ -516,70 +516,70 @@ export default {
|
|||||||
|
|
||||||
.create-chat-wrapper {
|
.create-chat-wrapper {
|
||||||
min-height: 70vh;
|
min-height: 70vh;
|
||||||
padding-bottom: 6rem;
|
padding-bottom: 60rem;
|
||||||
|
|
||||||
.joined-chat {
|
.joined-chat {
|
||||||
border-bottom: 1px solid @line-color;
|
border-bottom: 1px solid @line-color;
|
||||||
height: 5rem;
|
height: 50rem;
|
||||||
padding: 0 2rem;
|
padding: 0 20rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
width: 2.2rem;
|
width: 22rem;
|
||||||
height: 2.2rem;
|
height: 22rem;
|
||||||
margin-left: 1rem;
|
margin-left: 10rem;
|
||||||
margin-right: 2rem;
|
margin-right: 20rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 1.5rem;
|
height: 15rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.friend-list {
|
.friend-list {
|
||||||
padding: 0 2rem;
|
padding: 0 20rem;
|
||||||
|
|
||||||
.index {
|
.index {
|
||||||
height: 6rem;
|
height: 60rem;
|
||||||
line-height: 6rem;
|
line-height: 60rem;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.friend-item {
|
.friend-item {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 20rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
//background: #fff;
|
//background: #fff;
|
||||||
|
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
margin-top: 1rem;
|
margin-top: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
width: 4.8rem;
|
width: 48rem;
|
||||||
height: 4.8rem;
|
height: 48rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -597,15 +597,15 @@ export default {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 20rem;
|
||||||
width: calc(100% - 4rem);
|
width: calc(100% - 40rem);
|
||||||
height: 4rem;
|
height: 40rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: #3f445c;
|
background: #3f445c;
|
||||||
border-radius: .2rem;
|
border-radius: 2rem;
|
||||||
|
|
||||||
&.primary {
|
&.primary {
|
||||||
background: @primary-btn-color;
|
background: @primary-btn-color;
|
||||||
@ -614,26 +614,26 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.search-result {
|
.search-result {
|
||||||
padding: 0 2rem;
|
padding: 0 20rem;
|
||||||
|
|
||||||
.search-result-item {
|
.search-result-item {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 20rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
margin-top: 1rem;
|
margin-top: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
width: 4.8rem;
|
width: 48rem;
|
||||||
height: 4.8rem;
|
height: 48rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -644,17 +644,17 @@ export default {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account {
|
.account {
|
||||||
font-size: 1.3rem;
|
font-size: 13rem;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -668,12 +668,12 @@ export default {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.notice-h1 {
|
.notice-h1 {
|
||||||
font-size: 1.6rem;
|
font-size: 16rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notice-h2 {
|
.notice-h2 {
|
||||||
margin-top: 1rem;
|
margin-top: 10rem;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -684,21 +684,21 @@ export default {
|
|||||||
min-height: 70vh;
|
min-height: 70vh;
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
font-size: 1.7rem;
|
font-size: 17rem;
|
||||||
padding: 2rem;
|
padding: 20rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-list {
|
.chat-list {
|
||||||
padding: 0 2rem;
|
padding: 0 20rem;
|
||||||
|
|
||||||
.chat-item {
|
.chat-item {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 20rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -709,18 +709,18 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
margin-top: 1rem;
|
margin-top: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
width: 4.8rem;
|
width: 48rem;
|
||||||
height: 4.8rem;
|
height: 48rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -735,13 +735,13 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.num {
|
.num {
|
||||||
margin-left: .5rem;
|
margin-left: 5rem;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 1.5rem;
|
height: 15rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -763,28 +763,28 @@ export default {
|
|||||||
.friends {
|
.friends {
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
|
|
||||||
.friend {
|
.friend {
|
||||||
&:nth-last-child(1) {
|
&:nth-last-child(1) {
|
||||||
img {
|
img {
|
||||||
margin: 0 1rem;
|
margin: 0 10rem;
|
||||||
padding: 1.7rem;
|
padding: 17rem;
|
||||||
background: @second-btn-color-tran;
|
background: @second-btn-color-tran;
|
||||||
width: 3rem;
|
width: 30rem;
|
||||||
height: 3rem;
|
height: 30rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-bottom: .6rem;
|
margin-bottom: 6rem;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: .6rem;
|
margin-bottom: 6rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
@width: 6.4rem;
|
@width: 64rem;
|
||||||
width: @width;
|
width: @width;
|
||||||
height: @width;
|
height: @width;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
@ -792,9 +792,9 @@ export default {
|
|||||||
|
|
||||||
&.on-line::before {
|
&.on-line::before {
|
||||||
content: ' ';
|
content: ' ';
|
||||||
border: .4rem solid black;
|
border: 4rem solid black;
|
||||||
width: 1.8rem;
|
width: 18rem;
|
||||||
height: 1.8rem;
|
height: 18rem;
|
||||||
background: rgb(115, 254, 73);
|
background: rgb(115, 254, 73);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -806,8 +806,8 @@ export default {
|
|||||||
|
|
||||||
|
|
||||||
span {
|
span {
|
||||||
width: 6.4rem;
|
width: 64rem;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
color: lightgray;
|
color: lightgray;
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -837,9 +837,9 @@ export default {
|
|||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.head-image {
|
.head-image {
|
||||||
margin-left: 2rem;
|
margin-left: 20rem;
|
||||||
margin-right: 1.5rem;
|
margin-right: 15rem;
|
||||||
@width: 4.5rem;
|
@width: 45rem;
|
||||||
width: @width;
|
width: @width;
|
||||||
height: @width;
|
height: @width;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
@ -847,14 +847,14 @@ export default {
|
|||||||
|
|
||||||
&.on-line::before {
|
&.on-line::before {
|
||||||
content: ' ';
|
content: ' ';
|
||||||
border: .3rem solid black;
|
border: 3rem solid black;
|
||||||
width: 1.2rem;
|
width: 12rem;
|
||||||
height: 1.2rem;
|
height: 12rem;
|
||||||
background: rgb(115, 254, 73);
|
background: rgb(115, 254, 73);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 1.5rem;
|
right: 15rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -863,38 +863,38 @@ export default {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@padding: 1.4rem;
|
@padding: 14rem;
|
||||||
padding: @padding 0 @padding 0;
|
padding: @padding 0 @padding 0;
|
||||||
border-bottom: 1px solid @line-color2;
|
border-bottom: 1px solid @line-color2;
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
.name {
|
.name {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
color: white;
|
color: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
||||||
.tag {
|
.tag {
|
||||||
margin-left: .5rem;
|
margin-left: 5rem;
|
||||||
font-size: 1rem;
|
font-size: 10rem;
|
||||||
background: @second-btn-color-tran;
|
background: @second-btn-color-tran;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
padding: .2rem .5rem;
|
padding: 2rem 5rem;
|
||||||
border-radius: .2rem;
|
border-radius: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail {
|
.detail {
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
margin-top: .4rem;
|
margin-top: 4rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.point {
|
.point {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: .8rem;
|
margin-left: 8rem;
|
||||||
margin-right: .8rem;
|
margin-right: 8rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 1.5px;
|
width: 1.5px;
|
||||||
height: 1.5px;
|
height: 1.5px;
|
||||||
@ -902,38 +902,34 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sent {
|
.sent {
|
||||||
width: 1rem;
|
width: 10rem;
|
||||||
height: 1rem;
|
height: 10rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
margin-right: 3rem;
|
margin-right: 30rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.arrow {
|
.arrow {
|
||||||
width: 1.5rem;
|
width: 15rem;
|
||||||
height: 1.5rem;
|
height: 15rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.camera {
|
.camera {
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.not-more {
|
.not-more {
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 2rem;
|
padding: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -954,7 +950,7 @@ export default {
|
|||||||
background: white;
|
background: white;
|
||||||
width: 85vw;
|
width: 85vw;
|
||||||
height: 80vh;
|
height: 80vh;
|
||||||
border-radius: 1.2rem;
|
border-radius: 12rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.dialog-header {
|
.dialog-header {
|
||||||
@ -970,13 +966,13 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
& > img {
|
& > img {
|
||||||
margin-left: .3rem;
|
margin-left: 3rem;
|
||||||
width: 1.5rem;
|
width: 15rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > img {
|
& > img {
|
||||||
width: 2rem;
|
width: 20rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -984,11 +980,11 @@ export default {
|
|||||||
.dialog-body {
|
.dialog-body {
|
||||||
padding: @padding-page;
|
padding: @padding-page;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
height: calc(80vh - 5rem);
|
height: calc(80vh - 50rem);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
.scroll {
|
.scroll {
|
||||||
height: calc(80vh - 5rem);
|
height: calc(80vh - 50rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-button {
|
.l-button {
|
||||||
@ -1013,7 +1009,7 @@ export default {
|
|||||||
.sub-title {
|
.sub-title {
|
||||||
margin-top: @padding-page;
|
margin-top: @padding-page;
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -1034,11 +1030,11 @@ export default {
|
|||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
padding: 1.3rem;
|
padding: 13rem;
|
||||||
background: @second-btn-color-tran;
|
background: @second-btn-color-tran;
|
||||||
width: 2.2rem;
|
width: 22rem;
|
||||||
height: 2.2rem;
|
height: 22rem;
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
@ -1053,7 +1049,7 @@ export default {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.second-text-color {
|
.second-text-color {
|
||||||
margin-top: .5rem;
|
margin-top: 5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -550,7 +550,7 @@ export default {
|
|||||||
top: 0;
|
top: 0;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
|
|
||||||
.chat-content {
|
.chat-content {
|
||||||
> .header {
|
> .header {
|
||||||
@ -559,15 +559,15 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: @header-height;
|
height: @header-height;
|
||||||
padding: 0 1rem;
|
padding: 0 10rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-bottom: 1px solid @line-color;
|
border-bottom: 1px solid @line-color;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
margin: 0 1rem;
|
margin: 0 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
@ -577,8 +577,8 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
display: block;
|
display: block;
|
||||||
padding: 1px 6px;
|
padding: 1px 6px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
@ -593,11 +593,11 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.message-wrapper {
|
.message-wrapper {
|
||||||
height: calc(100vh - 12.5rem);
|
height: calc(100vh - 125rem);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
&.expand {
|
&.expand {
|
||||||
height: calc(100vh - (12.5rem + 30vh));
|
height: calc(100vh - (125rem + 30vh));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -606,7 +606,7 @@ export default {
|
|||||||
@typing-bg-color: whitesmoke;
|
@typing-bg-color: whitesmoke;
|
||||||
background: @main-bg;
|
background: @main-bg;
|
||||||
@normal-bg-color: rgb(35, 38, 47);
|
@normal-bg-color: rgb(35, 38, 47);
|
||||||
padding: 1rem 0;
|
padding: 10rem 0;
|
||||||
border-top: 1px solid @second-btn-color-tran;
|
border-top: 1px solid @second-btn-color-tran;
|
||||||
|
|
||||||
&.typing {
|
&.typing {
|
||||||
@ -623,18 +623,18 @@ export default {
|
|||||||
|
|
||||||
.toolbar {
|
.toolbar {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 4.4rem;
|
height: 44rem;
|
||||||
margin: 0 1rem;
|
margin: 0 10rem;
|
||||||
padding: .5rem;
|
padding: 5rem;
|
||||||
background: @normal-bg-color;
|
background: @normal-bg-color;
|
||||||
border-radius: 2rem;
|
border-radius: 20rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 2.4rem;
|
width: 24rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-left: 1.5rem;
|
margin-left: 15rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
@ -646,9 +646,9 @@ export default {
|
|||||||
|
|
||||||
.camera {
|
.camera {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: .5rem;
|
margin-right: 5rem;
|
||||||
width: 1.4rem;
|
width: 14rem;
|
||||||
padding: .5rem;
|
padding: 5rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: @chat-bg-color;
|
background: @chat-bg-color;
|
||||||
}
|
}
|
||||||
@ -657,35 +657,35 @@ export default {
|
|||||||
|
|
||||||
.record {
|
.record {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 4.4rem;
|
height: 44rem;
|
||||||
margin: 0 1rem;
|
margin: 0 10rem;
|
||||||
padding: 1rem .5rem;
|
padding: 10rem 5rem;
|
||||||
background: @normal-bg-color;
|
background: @normal-bg-color;
|
||||||
border-radius: 2rem;
|
border-radius: 20rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
right: .5rem;
|
right: 5rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 2.4rem;
|
width: 24rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-left: 1.5rem;
|
margin-left: 15rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.options {
|
.options {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
padding: 1.5rem;
|
padding: 15rem;
|
||||||
height: 30vh;
|
height: 30vh;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
.option-wrapper {
|
.option-wrapper {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@grid-width: calc((100vw - 3rem) / 4);
|
@grid-width: calc((100vw - 30rem) / 4);
|
||||||
color: black;
|
color: black;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns:@grid-width @grid-width @grid-width @grid-width;
|
grid-template-columns:@grid-width @grid-width @grid-width @grid-width;
|
||||||
@ -695,14 +695,14 @@ export default {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 10rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
border-radius: .4rem;
|
border-radius: 4rem;
|
||||||
background: whitesmoke;
|
background: whitesmoke;
|
||||||
padding: 1rem;
|
padding: 10rem;
|
||||||
width: 3rem;
|
width: 30rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 10rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -727,7 +727,7 @@ export default {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 2.2rem;
|
width: 22rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -738,23 +738,23 @@ export default {
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -33%;
|
margin-left: -33%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
border-radius: .6rem;
|
border-radius: 6rem;
|
||||||
//padding: 1rem;
|
//padding: 1rem;
|
||||||
background: rgb(55, 58, 67);
|
background: rgb(55, 58, 67);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.options {
|
.options {
|
||||||
width: 4.5rem;
|
width: 45rem;
|
||||||
height: 6rem;
|
height: 60rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-bottom: .4rem;
|
margin-bottom: 4rem;
|
||||||
width: 1.8rem;
|
width: 18rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -766,15 +766,15 @@ export default {
|
|||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
|
|
||||||
&.bottom {
|
&.bottom {
|
||||||
top: -1.4rem;
|
top: -14rem;
|
||||||
border: .7rem solid transparent;
|
border: 7rem solid transparent;
|
||||||
border-bottom: .7rem solid @second-btn-color;
|
border-bottom: 7rem solid @second-btn-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.top {
|
&.top {
|
||||||
bottom: -1.4rem;
|
bottom: -14rem;
|
||||||
border: .7rem solid transparent;
|
border: 7rem solid transparent;
|
||||||
border-top: .7rem solid @second-btn-color;
|
border-top: 7rem solid @second-btn-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -809,7 +809,7 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 2rem;
|
padding: 20rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -825,41 +825,41 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
margin-top: 6rem;
|
margin-top: 60rem;
|
||||||
width: 5.5rem;
|
width: 55rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 20rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.money {
|
.money {
|
||||||
color: rgb(193, 135, 79);
|
color: rgb(193, 135, 79);
|
||||||
font-size: 4rem;
|
font-size: 40rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-top: 1.5rem;
|
margin-top: 15rem;
|
||||||
margin-bottom: 6.5rem;
|
margin-bottom: 65rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.belong {
|
.belong {
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 30rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.password {
|
.password {
|
||||||
font-size: 1.6rem;
|
font-size: 16rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.notice {
|
.notice {
|
||||||
margin-top: 15rem;
|
margin-top: 150rem;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-button {
|
.l-button {
|
||||||
font-size: 1.6rem;
|
font-size: 16rem;
|
||||||
border-radius: .5rem;
|
border-radius: .50rem;
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 30rem;
|
||||||
padding: 1.2rem 0;
|
padding: 12rem 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -872,8 +872,8 @@ export default {
|
|||||||
background: rgb(228, 77, 58);
|
background: rgb(228, 77, 58);
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 1.8rem;
|
width: 18rem;
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
animation: animal .8s infinite linear;
|
animation: animal .8s infinite linear;
|
||||||
|
|
||||||
@keyframes animal {
|
@keyframes animal {
|
||||||
@ -887,13 +887,12 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.close {
|
.close {
|
||||||
bottom: -8vh;
|
bottom: -8vh;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 3rem;
|
width: 30rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -138,13 +138,13 @@ 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;
|
||||||
|
|
||||||
.peoples {
|
.peoples {
|
||||||
padding: 0 2rem;
|
padding: 0 20rem;
|
||||||
|
|
||||||
.People {
|
.People {
|
||||||
border-bottom: 1px solid @second-btn-color-tran;
|
border-bottom: 1px solid @second-btn-color-tran;
|
||||||
@ -153,16 +153,16 @@ export default {
|
|||||||
.add-people {
|
.add-people {
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 7rem;
|
height: 70rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: 1px solid @second-btn-color-tran;
|
border-bottom: 1px solid @second-btn-color-tran;
|
||||||
|
|
||||||
.head-image {
|
.head-image {
|
||||||
margin-right: 1.5rem;
|
margin-right: 15rem;
|
||||||
width: 4.5rem;
|
width: 45rem;
|
||||||
height: 4.5rem;
|
height: 45rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -171,22 +171,20 @@ export default {
|
|||||||
|
|
||||||
.setting {
|
.setting {
|
||||||
.row {
|
.row {
|
||||||
padding-left: 2rem;
|
padding-left: 20rem;
|
||||||
padding-right: 2rem;
|
padding-right: 20rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
height: 4rem;
|
height: 40rem;
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
img {
|
img {
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -200,7 +200,7 @@ export default {
|
|||||||
.People {
|
.People {
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 7rem;
|
height: 70rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -210,18 +210,18 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.head-image {
|
.head-image {
|
||||||
margin-right: 1.5rem;
|
margin-right: 15rem;
|
||||||
width: 4.5rem;
|
width: 45rem;
|
||||||
height: 4.5rem;
|
height: 45rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.add {
|
.add {
|
||||||
background: @second-btn-color-tran;
|
background: @second-btn-color-tran;
|
||||||
margin-right: 1.5rem;
|
margin-right: 15rem;
|
||||||
padding: 1.5rem;
|
padding: 15rem;
|
||||||
width: 1.8rem;
|
width: 18rem;
|
||||||
height: 1.8rem;
|
height: 18rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -233,14 +233,14 @@ export default {
|
|||||||
|
|
||||||
.left {
|
.left {
|
||||||
.name {
|
.name {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
margin-bottom: .2rem;
|
margin-bottom: 2rem;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail {
|
.detail {
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -250,18 +250,18 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.l-button {
|
.l-button {
|
||||||
margin-left: .8rem;
|
margin-left: 8rem;
|
||||||
border-radius: .2rem;
|
border-radius: 2rem;
|
||||||
background: rgb(58, 58, 67);
|
background: rgb(58, 58, 67);
|
||||||
font-size: 1.2rem;
|
font-size: 12rem;
|
||||||
padding: .5rem 0;
|
padding: 5rem 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 5.8rem;
|
width: 58rem;
|
||||||
|
|
||||||
&:only-child {
|
&:only-child {
|
||||||
width: 7rem;
|
width: 70rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.red {
|
&.red {
|
||||||
@ -271,8 +271,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 1.8rem;
|
height: 18rem;
|
||||||
margin-left: 2rem;
|
margin-left: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -281,15 +281,15 @@ export default {
|
|||||||
z-index: 9;
|
z-index: 9;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -100%;
|
bottom: -100%;
|
||||||
right: 1rem;
|
right: 10rem;
|
||||||
border-radius: .8rem;
|
border-radius: 8rem;
|
||||||
background: @second-btn-color;
|
background: @second-btn-color;
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
font-size: 1.4rem;
|
font-size: 14rem;
|
||||||
padding: 0 4rem 0 1rem;
|
padding: 0 40rem 0 10rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 4rem;
|
height: 40rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-bottom: 1px solid @line-color;
|
border-bottom: 1px solid @line-color;
|
||||||
|
|
||||||
@ -299,19 +299,19 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-right: 1rem;
|
margin-right: 10rem;
|
||||||
height: 2rem;
|
height: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow {
|
.arrow {
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
border: .7rem solid transparent;
|
border: 7rem solid transparent;
|
||||||
border-bottom: .7rem solid @second-btn-color;
|
border-bottom: 7rem solid @second-btn-color;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 1rem;
|
right: 10rem;
|
||||||
top: -1.4rem;
|
top: -14rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user