update
init
This commit is contained in:
@@ -0,0 +1,13 @@
|
||||
@import url(./common.css);
|
||||
@import url(./icon.scss);
|
||||
html, body, #app, .app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.app{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(135deg, #F1F4F7 0%, #EDF5FF 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -0,0 +1,324 @@
|
||||
#preloadedImages {
|
||||
background: linear-gradient(135deg, #F1F4F7 0%, #EDF5FF 100%) no-repeat;
|
||||
background-size: cover;
|
||||
background-image: url("https://web.sdk.qcloud.com/im/assets/images/background-zip.png");
|
||||
}
|
||||
|
||||
.home {
|
||||
&-header {
|
||||
.menu {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
.logo {
|
||||
border-bottom: 1px solid #EAECF2;
|
||||
|
||||
&-name {
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
|
||||
&::before {
|
||||
background: #dddddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-main {
|
||||
&-title {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.menu-main-list {
|
||||
&-item {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
|
||||
label {
|
||||
color: #B5B5B5;
|
||||
}
|
||||
|
||||
.step {
|
||||
background: rgba(81, 94, 136, 0.04);
|
||||
border: 1px solid #D2D6DC;
|
||||
color: #93989F;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #147AFF;
|
||||
}
|
||||
}
|
||||
|
||||
.complete {
|
||||
label {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
span {
|
||||
background: #147AFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-footer {
|
||||
&-list {
|
||||
&-item {
|
||||
a {
|
||||
span {
|
||||
background: #147AFF;
|
||||
box-shadow: 0 0.19rem 0.25rem 0 rgba(255, 255, 255, .7), 0 0.13rem 0.38rem 0 rgba(20, 122, 255, .55);
|
||||
|
||||
text {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
h1 {
|
||||
font-family: PingFangSC-Regular;
|
||||
color: #000000;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-TUIKit {
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 11px 20px 0 rgba(0, 0, 0, .3);
|
||||
|
||||
.setting {
|
||||
background: #e8e8e9;
|
||||
|
||||
&-main {
|
||||
.userInfo {
|
||||
&-main {
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 1px 10px 0 rgba(2, 16, 43, 0.15);
|
||||
}
|
||||
|
||||
.TUIProfile {
|
||||
background: rgba(0, 0, 0, .3);
|
||||
|
||||
main {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
.selected {
|
||||
background: #dddddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
.conversation {
|
||||
border-right: 1px solid #F4F5F9;
|
||||
|
||||
.TUI-search {
|
||||
border-bottom: 1px solid #F4F5F9;
|
||||
}
|
||||
}
|
||||
|
||||
.chat {
|
||||
&-default {
|
||||
h1 {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
background: #CFD7E0;
|
||||
}
|
||||
|
||||
.status text {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.showmore {
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 1px 10px 0 rgba(2, 16, 43, .15);
|
||||
}
|
||||
|
||||
.show-profile span {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.show-about span {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.show-cut {
|
||||
border: 1px solid #E8E8E9;
|
||||
}
|
||||
|
||||
.show-quit span {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.show-about-box {
|
||||
background: #FFFFFF;
|
||||
|
||||
main {
|
||||
header {
|
||||
h1 {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
a {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #006EFF;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.cancellation-box {
|
||||
background: #FFFFFF;
|
||||
|
||||
main {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
letter-spacing: 0;
|
||||
|
||||
text {
|
||||
color: #006EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
|
||||
.title {
|
||||
h1 {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: none;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
|
||||
&-submit {
|
||||
border: 1px solid #E54545;
|
||||
color: #E54545;
|
||||
}
|
||||
|
||||
&-default {
|
||||
background: #006EFF;
|
||||
border: 1px solid #006EFF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disclaimer-box {
|
||||
background: #FFFFFF;
|
||||
|
||||
main {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.home-h5 {
|
||||
.dialog {
|
||||
.btn {
|
||||
&-default {
|
||||
background: none;
|
||||
color: #006EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 公共样式
|
||||
.bottom-line {
|
||||
border-bottom: 1px solid #EAECF2;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
cursor: pointer;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #006EFF;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
|
||||
.login-sale{
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
background: url('../assets/image/adv-bg.svg') no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.login{
|
||||
background: #ffffff;
|
||||
&-header {
|
||||
.logo {
|
||||
&-name {
|
||||
color: #000000;
|
||||
}
|
||||
p {
|
||||
&::before {
|
||||
background: #dddddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-main {
|
||||
&-content {
|
||||
background: url('../assets/image/login-background.png') no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
&-adv {
|
||||
p {
|
||||
a{
|
||||
color: #2985FF;
|
||||
}
|
||||
}
|
||||
&-introduce {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
.checked-text {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #BBBBBB;
|
||||
letter-spacing: 0;
|
||||
a {
|
||||
color: #006EF0;
|
||||
}
|
||||
}
|
||||
&-footer{
|
||||
box-sizing: border-box;
|
||||
background: rgba(231,242,255,0.40);
|
||||
}
|
||||
}
|
||||
&-form {
|
||||
header {
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.login-title p {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.login-from-item{
|
||||
.el-select {
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
.el-input__inner {
|
||||
background: #FFFFFF;
|
||||
border: 1.2px solid #DDDDDD;
|
||||
}
|
||||
&-disabled {
|
||||
cursor: pointer;
|
||||
background: #F4F5F9;
|
||||
border: 1.2px solid #DDDDDD;
|
||||
color: #111111;
|
||||
letter-spacing: 0;
|
||||
label {
|
||||
cursor: pointer;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-footer {
|
||||
a {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #0365EB;
|
||||
letter-spacing: 0;
|
||||
&:last-child {
|
||||
&::before {
|
||||
background: #C9D6E7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-btn {
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 3rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #006EFF;
|
||||
border-radius: 5px;
|
||||
color: #006EFF;
|
||||
&:disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
&-primary {
|
||||
background: #006EFF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttom-mask-top{
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #006EFF;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.buttom-mask-under{
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.buttom-mask-longunder{
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.code-box {
|
||||
color: #006EFF;
|
||||
border: none !important;
|
||||
border-right: 1px solid #dddddd !important;
|
||||
}
|
||||
|
||||
.el-input-group__append button{
|
||||
background: #ffffff;
|
||||
color: #006EFF;
|
||||
border: 1px solid #dddddd !important;
|
||||
border-left: none;
|
||||
}
|
||||
.el-input-group__append button:hover {
|
||||
background: #ffffff;
|
||||
color: #006EFF;
|
||||
border: 1px solid #dddddd !important;
|
||||
border-left: none;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
body,div,ul,ol,dl,dt,dd,li,dl,h1,h2,h3,h4,p,input,textarea{
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-style: normal;
|
||||
font-family: PingFangSC-Regular;
|
||||
/* font:12px/22px"\5B8B\4F53",Arial,Helvetica,sans-serif; */
|
||||
}
|
||||
ol,ul,li{
|
||||
list-style:none;
|
||||
}
|
||||
img{
|
||||
border:0;
|
||||
vertical-align:middle;
|
||||
}
|
||||
body{
|
||||
color:#000000;
|
||||
background:#FFF;
|
||||
}
|
||||
.clear{
|
||||
clear:both;
|
||||
height:1px;
|
||||
width:100%;
|
||||
overflow:hidden;
|
||||
margin-top:-1px;
|
||||
}
|
||||
a{
|
||||
color:#000000;
|
||||
text-decoration:none;
|
||||
cursor: pointer;
|
||||
}
|
||||
a:hover{
|
||||
text-decoration:none;
|
||||
}
|
||||
@@ -0,0 +1,383 @@
|
||||
.home-h5 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
background: #FFFFFF;
|
||||
background-image: none !important;
|
||||
|
||||
.menu-h5 {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
cursor: auto;
|
||||
font-size: 18px;
|
||||
line-height: 27px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
padding: 0 23px 23px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: static;
|
||||
border-radius: 12px 12px 0 0;
|
||||
margin-top: 40px;
|
||||
max-height: calc(100% - 40px);
|
||||
|
||||
&-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 27px 0 4px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #FFFFFF;
|
||||
|
||||
h1 {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
letter-spacing: 0;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
&-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
&-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
background-size: 100% 100%;
|
||||
|
||||
&:last-child {
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
padding: 5px 20px;
|
||||
background: #147AFF;
|
||||
box-shadow: 0 4px 5px 0 rgba(255, 255, 255, 0.70), 0 3px 8px 0 rgba(20, 122, 255, 0.55);
|
||||
border-radius: 30.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
h1 {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.message {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 18px;
|
||||
border-bottom: 1px solid #F4F5F9;
|
||||
}
|
||||
|
||||
&-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 12px 18px;
|
||||
display: flex;
|
||||
|
||||
&-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
background: #EBF0F6;
|
||||
box-shadow: 0 0 18px 0 #F0F6FF;
|
||||
border-radius: 9px;
|
||||
|
||||
&-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 9px 0;
|
||||
|
||||
label {
|
||||
padding-top: 4px;
|
||||
line-height: 16px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #A0A3A6;
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: #006EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-profile {
|
||||
background: #EFEFEF;
|
||||
|
||||
&-list {
|
||||
&-item {
|
||||
margin: 8px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #FFFFFF;
|
||||
padding: 14px 18px;
|
||||
|
||||
label {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
letter-spacing: 0;
|
||||
line-height: 27px;
|
||||
}
|
||||
|
||||
&-receipt {
|
||||
padding-right: 10px;
|
||||
|
||||
&-cont {
|
||||
height: 68px;
|
||||
padding-top: 2px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #999999;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
&-online-status {
|
||||
padding-right: 10px;
|
||||
|
||||
&-cont {
|
||||
padding-top: 2px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #999999;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
border: none;
|
||||
padding: 14px 0;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 19px;
|
||||
color: #E54545;
|
||||
text-align: center;
|
||||
line-height: 29px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.title {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 15px 18px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-about-box,
|
||||
.cancellation-box,
|
||||
.disclaimer-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.show-about-box {
|
||||
main {
|
||||
header {
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
width: 33vw;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 10px;
|
||||
font-size: 38px;
|
||||
line-height: 41px;
|
||||
}
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cancellation-box {
|
||||
align-items: center;
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
padding: 72px 40px 52px;
|
||||
}
|
||||
|
||||
footer {
|
||||
flex-direction: column;
|
||||
|
||||
.btn {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disclaimer-box {
|
||||
main {
|
||||
padding-top: 36px;
|
||||
font-size: 16px;
|
||||
|
||||
header {
|
||||
padding: 16px 0;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
article {
|
||||
padding: 0 23px;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch {
|
||||
width: 48px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
background-color: #DCDFE6;
|
||||
box-shadow: #dfdfdf 0 0 0 0 inset;
|
||||
border-radius: 20px;
|
||||
background-clip: content-box;
|
||||
display: inline-block;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.switch::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
left: 2px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.switch:checked {
|
||||
background-color: #007AFF;
|
||||
transition: .6s;
|
||||
}
|
||||
|
||||
.switch:checked::before {
|
||||
left: 20px;
|
||||
transition: .3s;
|
||||
}
|
||||
@@ -0,0 +1,232 @@
|
||||
.login-h5 {
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
padding: 17px 0;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.login {
|
||||
&-header {
|
||||
padding: 0 23px;
|
||||
|
||||
.logo {
|
||||
p {
|
||||
padding-left: 12px;
|
||||
|
||||
&::before {
|
||||
left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&-name {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
flex-direction: column;
|
||||
padding: 60px 0 18px;
|
||||
|
||||
p {
|
||||
padding-left: 0;
|
||||
font-size: 27px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&-form {
|
||||
flex: 1;
|
||||
|
||||
&-item {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 14px 0;
|
||||
|
||||
a {
|
||||
font-size: 16px;
|
||||
line-height: 27px;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-from-item-disabled {
|
||||
font-size: 18px;
|
||||
line-height: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
padding: 0;
|
||||
|
||||
&-content {
|
||||
padding: 0 23px;
|
||||
background: url('../assets/image/h5/login-bg.png') no-repeat;
|
||||
background-size: 65%;
|
||||
background-position-x: right;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.checked-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&-btn {
|
||||
padding-top: 16px;
|
||||
margin-bottom: 0;
|
||||
|
||||
button {
|
||||
height: auto !important;
|
||||
font-size: 20px;
|
||||
line-height: 27px;
|
||||
padding: 13px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
background: none;
|
||||
padding: 10px 10px;
|
||||
|
||||
&-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
&-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
background: url('../assets/image/h5/adv-more.svg') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border: solid #96C3FF 1px;
|
||||
|
||||
&:last-child {
|
||||
background: url('../assets/image/h5/adv-im.svg') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
|
||||
span {
|
||||
padding: 5px 20px;
|
||||
background: #147AFF;
|
||||
box-shadow: 0 4px 5px 0 rgba(255, 255, 255, 0.70), 0 3px 8px 0 rgba(20, 122, 255, 0.55);
|
||||
border-radius: 30.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
h1 {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.sub {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.text-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
padding: 20px 20px;
|
||||
width: 84px;
|
||||
font-family: 'PingFang SC';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: #BBBBBB;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
width: 120px;
|
||||
height: 1px;
|
||||
background: #DBDBDB
|
||||
}
|
||||
|
||||
&-image {
|
||||
display: flex;
|
||||
|
||||
.platform {
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
padding: 0 20px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9;
|
||||
|
||||
&-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
padding-top: 10px;
|
||||
height: 27px;
|
||||
opacity: 0.8;
|
||||
font-family: TencentSansW7;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@import "./color/home.scss";
|
||||
@import "./web/home.scss";
|
||||
@import "./h5/home.scss";
|
||||
@@ -0,0 +1,89 @@
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.icon-global {
|
||||
background: url('../assets/icon/global.png') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.icon-arrow-down {
|
||||
width: 10px !important;
|
||||
height: 10px !important;
|
||||
background: url('../assets/icon/arrow-down.png') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-menu {
|
||||
background: url('../assets/icon/menu.png') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-message-selected {
|
||||
background: url('../assets/icon/message-selected.svg') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.icon-message {
|
||||
background: url('../assets/icon/message.svg') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.icon-message-real {
|
||||
background: url('../assets/icon/message-real.svg') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-group {
|
||||
background: url('https://web.sdk.qcloud.com/component/TUIKit/assets/group_avatar.png') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-setting {
|
||||
background: url('../assets/icon/setting.png') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.icon-relation {
|
||||
background: url('../assets/icon/relation.svg') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-relation-real {
|
||||
background: url('../assets/icon/relation-real.svg') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-relation-selected {
|
||||
background: url('../assets/icon/relation-selected.svg') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-profile {
|
||||
background: url('../assets/icon/profile.svg') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-profile-real {
|
||||
background: url('../assets/icon/profile.svg') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-profile-selected {
|
||||
background: url('../assets/icon/profile-selected.svg') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-adv-arrow {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url('../assets/icon/adv-arrow.svg') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-warn {
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
background: url('../assets/icon/warn.svg') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
|
||||
@import "./color/login.scss";
|
||||
@import "./web/login.scss";
|
||||
@import "./h5/login.scss";
|
||||
|
||||
.btn {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.code-box {
|
||||
padding: 0 20px;
|
||||
color: #006EFF;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
font-weight: normal;
|
||||
}
|
||||
@@ -0,0 +1,764 @@
|
||||
#preloadedImages {
|
||||
background: linear-gradient(135deg, #F1F4F7 0%, #EDF5FF 100%) no-repeat;
|
||||
background-size: cover;
|
||||
background-image: url("https://web.sdk.qcloud.com/im/assets/images/background-zip.png");
|
||||
}
|
||||
|
||||
.home {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//min-width: 1024px;
|
||||
background-size: contain;
|
||||
|
||||
&-header {
|
||||
width: 100%;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
|
||||
.dropdown {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
|
||||
label {
|
||||
padding: 0 18px;
|
||||
}
|
||||
|
||||
&-open {
|
||||
padding-left: 265px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
position: fixed;
|
||||
z-index: 11;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 30px;
|
||||
padding-top: 0;
|
||||
overflow-y: auto;
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
&-name {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
font-size: 14px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
bottom: 0;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.txc-logo {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.im-logo {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-main {
|
||||
flex: 1;
|
||||
|
||||
&-title {
|
||||
padding: 20px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.menu-main-list {
|
||||
padding-bottom: 14px;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 16px;
|
||||
font-size: 14px;
|
||||
|
||||
.step {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
font-size: 11.67px;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: 0 12px;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-footer {
|
||||
&-list {
|
||||
&-item {
|
||||
min-height: 72px;
|
||||
background-size: cover;
|
||||
border: 1px solid #96C3FF;
|
||||
border-radius: 4px;
|
||||
padding-bottom: 15px;
|
||||
display: flex;
|
||||
background: url('../assets/image/h5/adv-more.svg') no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
&:last-child {
|
||||
background: url('../assets/image/h5/adv-im.svg') no-repeat;
|
||||
background-size: contain;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
background-size: cover;
|
||||
|
||||
span {
|
||||
padding: 1px 7px;
|
||||
border-radius: 0.88rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
|
||||
text {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
margin-left: 10px;
|
||||
|
||||
h1 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sub {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&-box {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
//min-width: 968px;
|
||||
padding: 3rem 6rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-open {
|
||||
padding-left: 290px;
|
||||
}
|
||||
}
|
||||
|
||||
&-TUIKit {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
//min-height: 640px;
|
||||
flex: 1;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
|
||||
.setting {
|
||||
box-sizing: border-box;
|
||||
width: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 56px 0 17px;
|
||||
border-top-left-radius: 12px;
|
||||
border-bottom-left-radius: 12px;
|
||||
|
||||
&-main {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.userInfo {
|
||||
position: relative;
|
||||
padding: 0 12px;
|
||||
|
||||
.avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.userInfo-main {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
display: none;
|
||||
min-width: 165px;
|
||||
max-width: 200px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 99.9%;
|
||||
z-index: 5;
|
||||
padding: 14px 20px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.TUIProfile {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
max-width: none !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
main {
|
||||
width: 550px;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
padding: 13px 0;
|
||||
|
||||
&-item {
|
||||
padding: 13px 0;
|
||||
text-align: center;
|
||||
line-height: 100%;
|
||||
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
.conversation {
|
||||
min-width: 285px;
|
||||
flex: 0 0 24%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.TUI-search {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
&-default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 40px;
|
||||
padding-top: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: url('../assets/image/login-background.png') no-repeat;
|
||||
background-size: cover;
|
||||
background-position-x: -17px;
|
||||
background-position-y: 173px;
|
||||
|
||||
h1 {
|
||||
font-size: 1.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 2.5rem;
|
||||
height: 1.63rem;
|
||||
padding-left: 0.98rem;
|
||||
padding-right: 0.98rem
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
padding-top: 1.88rem;
|
||||
max-width: 393px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.logo-mask {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.logo {
|
||||
width: 50%;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-TUIKit-chat {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-choosed {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.status {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.status text {
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.setting-more {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.showmore {
|
||||
min-width: 11.25rem;
|
||||
border-radius: 0 4px 4px 0;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 202%;
|
||||
z-index: 2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.setting-more-li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.setting-more-item {
|
||||
height: 40px;
|
||||
padding-left: 14px;
|
||||
padding-right: 8px;
|
||||
display: flex;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&-next {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
width: 11.25rem;
|
||||
height: 80px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
bottom: 10px;
|
||||
z-index: 2;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 2px 1px 6px 0px rgba(2, 16, 43, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.setting-more-item:hover {
|
||||
background-color: rgba(0, 110, 255, 0.1);
|
||||
}
|
||||
|
||||
.show-profile:hover,
|
||||
.show-about:hover,
|
||||
.show-receipt:hover,
|
||||
.show-online-status:hover,
|
||||
.show-quit:hover {
|
||||
background-color: rgba(0, 110, 255, 0.1);
|
||||
}
|
||||
|
||||
.show-profile {
|
||||
height: 40px;
|
||||
padding-left: 14px;
|
||||
display: flex;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.show-profile span {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.show-about,
|
||||
.show-receipt,
|
||||
.show-online-status {
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
padding-left: 14px;
|
||||
padding-right: 8px;
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.show-about span,
|
||||
.show-receipt span,
|
||||
.show-online-status span {
|
||||
height: 24px;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.receipt-select {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
width: 11.25rem;
|
||||
height: 80px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
bottom: 10px;
|
||||
z-index: 2;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 2px 1px 6px 0px rgba(2, 16, 43, 0.15);
|
||||
}
|
||||
|
||||
.online-status-select {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 40px;
|
||||
width: 11.25rem;
|
||||
height: 80px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
bottom: 10px;
|
||||
z-index: 2;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 2px 1px 6px 0px rgba(2, 16, 43, 0.15);
|
||||
}
|
||||
|
||||
.show-cut-box {
|
||||
display: flex;
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
.show-cut {
|
||||
width: calc(100% - 10px);
|
||||
border: none;
|
||||
border-bottom: 1px solid #E8E8E9;
|
||||
}
|
||||
|
||||
.show-quit {
|
||||
height: 40px;
|
||||
padding-left: 14px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.show-quit span {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding-top: 6px;
|
||||
height: 24px;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.show-about-box {
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 100px 180px;
|
||||
padding-bottom: 0;
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 126px;
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 28px;
|
||||
|
||||
img {
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.line {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 10px;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
padding: 0 10px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 80%;
|
||||
background: #EEEEEE;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
&:last-child:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
padding: 25px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cancellation-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 55px 42px;
|
||||
max-width: 566px;
|
||||
border-radius: 8px;
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
span {
|
||||
padding-top: 16px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #444444;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 46px 23px 0;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
border-radius: 5px;
|
||||
margin-top: 14px;
|
||||
padding: 13px 0;
|
||||
margin-right: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disclaimer-box {
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
main {
|
||||
width: 33rem;
|
||||
font-size: 1rem;
|
||||
padding: 3.5rem 4rem 3.5rem;
|
||||
|
||||
header {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
padding: 4rem 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 46px 23px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 公共样式
|
||||
.flex-justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.moreMask {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
line-height: 27px;
|
||||
}
|
||||
|
||||
.language-intl {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.callkit-drag-container {
|
||||
left: calc(50% - 25rem);
|
||||
top: calc(50% - 18rem);
|
||||
width: 50rem;
|
||||
height: 36rem;
|
||||
border-radius: 16px;
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
&-left {
|
||||
left: calc(50% - 25rem + 150px);
|
||||
}
|
||||
|
||||
&-H5 {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.callkit-drag-container-mini {
|
||||
width: 168px;
|
||||
height: 56px;
|
||||
right: 10px;
|
||||
top: 70px;
|
||||
}
|
||||
@@ -0,0 +1,324 @@
|
||||
.login-sale {
|
||||
margin-top: 40px;
|
||||
padding: 8px 16px;
|
||||
font-size: 1.4rem;
|
||||
line-height: 2rem;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.login {
|
||||
min-width: 980px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-header {
|
||||
background: none;
|
||||
width: 100%;
|
||||
|
||||
.logo {
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
&-name {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-left: 40px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
bottom: 0;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 0 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 5vw 6vh;
|
||||
|
||||
&-content {
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: 100rem;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-adv {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
a {
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&-introduce {
|
||||
font-size: 3rem;
|
||||
line-height: 4.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.small-txt {
|
||||
width: 42rem;
|
||||
font-size: 2.6rem;
|
||||
line-height: 3.6rem;
|
||||
}
|
||||
|
||||
.checked-text {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.73rem;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
box-sizing: border-box;
|
||||
padding: 0 1.6rem;
|
||||
width: 100%;
|
||||
max-width: 100rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&-form {
|
||||
box-sizing: border-box;
|
||||
width: 22.41rem;
|
||||
|
||||
&-footer {
|
||||
padding-top: 0.5rem;
|
||||
|
||||
a {
|
||||
font-size: 1.13rem;
|
||||
padding: 0 1.2rem;
|
||||
|
||||
&:last-child {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1.65rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
font-weight: 500;
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.7rem;
|
||||
padding-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.login-title img {
|
||||
width: 4.61rem;
|
||||
height: 3.23rem;
|
||||
}
|
||||
|
||||
.login-title p {
|
||||
padding-left: 10.5px;
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.7rem;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.login-from-item {
|
||||
margin: 18px 0;
|
||||
|
||||
.el-select {
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
padding-top: 28px;
|
||||
line-height: 1.73rem;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
width: 356.4px;
|
||||
height: 54px;
|
||||
margin-top: 12px;
|
||||
border-radius: 4.8px;
|
||||
}
|
||||
|
||||
.input-with-select {
|
||||
margin-top: 14px;
|
||||
|
||||
input {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
border-radius: 4.8px;
|
||||
width: 100%;
|
||||
margin-top: 28px;
|
||||
padding: 14px 11px;
|
||||
box-sizing: border-box;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2rem;
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-btn {
|
||||
button {
|
||||
flex: 1;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
.login-main-content {
|
||||
background-position: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.options-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login-main-middle {
|
||||
height: 130px;
|
||||
width: 100%;
|
||||
padding: 0 1.6rem 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
||||
&-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.buttom-mask {
|
||||
flex: 0 0 25%;
|
||||
padding: 1.6rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.buttom-mask-top {
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
font-size: 3rem;
|
||||
height: 4.19rem;
|
||||
}
|
||||
|
||||
.buttom-mask-under {
|
||||
opacity: 0.49;
|
||||
font-weight: 400;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.buttom-mask-longunder {
|
||||
min-width: 190px;
|
||||
height: 24px;
|
||||
opacity: 0.49;
|
||||
font-size: 16.8px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.code-box {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 1rem;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.el-input-group__prepend p {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.el-input.is-disabled .el-input__inner {
|
||||
height: 40px !important;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.el-input-group__append button {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.language-intl {
|
||||
color: inherit;
|
||||
}
|
||||
Reference in New Issue
Block a user