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