mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-03 18:56:39 +08:00
721 lines
14 KiB
Plaintext
721 lines
14 KiB
Plaintext
// 手机端
|
|
@media screen and(min-width: 320px) and(max-width:768px) {
|
|
.rc-button{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
position: fixed;
|
|
justify-content: center;
|
|
height: 60px;
|
|
bottom: 0;
|
|
background-color: white;
|
|
|
|
span{
|
|
width: 160px;
|
|
height: 48px;
|
|
background: #E2001A;
|
|
border-radius: 30px;
|
|
font-size: 16px;
|
|
color:#FFFFFF;
|
|
display: block;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
span:last-child{
|
|
margin-left: 40px;
|
|
}
|
|
}
|
|
.rc-headera{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
justify-content: center;
|
|
h3{
|
|
color:#333333;
|
|
font-size: 26px;
|
|
}
|
|
.rc-title{
|
|
img{
|
|
width: 96px;
|
|
height: 96px;
|
|
|
|
}
|
|
}
|
|
.userer{
|
|
span{
|
|
width: 130px;
|
|
height: 40px;
|
|
border: 2px solid #E2001A;
|
|
border-radius: 30px;
|
|
display: block;
|
|
color: #E2001A;
|
|
line-height: 40px;
|
|
margin-top: 42px;
|
|
font-size: 14px;
|
|
}
|
|
i{
|
|
font-size: 18px;
|
|
font-style: normal;
|
|
display: block;
|
|
margin-top: 32px;
|
|
color: #E1001A;
|
|
}
|
|
}
|
|
}
|
|
/deep/.el-dialog {
|
|
width: 80%;
|
|
position: relative;
|
|
}
|
|
.rc-discount {
|
|
position: relative;
|
|
width: 100%;
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.rc-contair {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.rc-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #e1001a;
|
|
padding-right: 21px;
|
|
width: 30%;
|
|
float: left;
|
|
height: 100%;
|
|
i {
|
|
font-style: normal;
|
|
font-size: 12px;
|
|
}
|
|
span {
|
|
font-size: 26px;
|
|
}
|
|
strong {
|
|
font-style: normal;
|
|
font-size: 12px;
|
|
display: block;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
.rc-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 36px;
|
|
justify-content: center;
|
|
height: 100%;
|
|
i {
|
|
font-style: normal;
|
|
font-size: 16px;
|
|
color: #e1001a;
|
|
}
|
|
.rc-main {
|
|
color: #999999;
|
|
font-size: 12px;
|
|
}
|
|
span {
|
|
display: block;
|
|
margin-top: 8px;
|
|
}
|
|
em {
|
|
font-style: normal;
|
|
}
|
|
}
|
|
.rc-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-right: 10px;
|
|
span {
|
|
width: 72px;
|
|
height: 25px;
|
|
background: #e2001a;
|
|
text-align: center;
|
|
line-height: 25px;
|
|
font-size: 12px;
|
|
color: #ffffff;
|
|
margin-bottom: 8px;
|
|
border-radius: 100px;
|
|
margin-right: 8px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
.active{
|
|
border: 2px solid #E2001A;
|
|
color:#666666;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
.unactive{
|
|
border: 2px solid #808285;
|
|
color:#666666;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
.rc-footimage{
|
|
overflow: hidden;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
img{
|
|
width: 100%;
|
|
}
|
|
|
|
}
|
|
.rc-header {
|
|
width: 100%;
|
|
.rc-title {
|
|
width: 100%;
|
|
h2 {
|
|
font-size: 22px;
|
|
color: #e1001a;
|
|
}
|
|
}
|
|
.productdetails {
|
|
|
|
margin-top: 19px;
|
|
.rc-productdetail {
|
|
display: flex;
|
|
align-items: center;
|
|
i {
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
|
|
color: #333333;
|
|
}
|
|
|
|
span {
|
|
font-size: 18px;
|
|
margin-left: 8px;
|
|
color: #e1001a;
|
|
}
|
|
}
|
|
.rc-productdetai {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
i {
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #333333;
|
|
}
|
|
span {
|
|
font-size: 14px;
|
|
color: #666666;
|
|
margin-left: 8px;
|
|
}
|
|
em {
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
margin-left: 68px;
|
|
color: #e2001a;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rc-productdeta {
|
|
margin-top: 20px;
|
|
.rc-prodtop {
|
|
display: flex;
|
|
align-items: center;
|
|
span {
|
|
font-size: 14px;
|
|
color: #333333;
|
|
}
|
|
em {
|
|
font-style: normal;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 59px;
|
|
font-size: 16px;
|
|
margin-left: 4px;
|
|
height: 39px;
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
}
|
|
.rc-produnnum {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-bottom: 20px;
|
|
margin-top: 16px;
|
|
span {
|
|
font-size: 14px;
|
|
color: #333333;
|
|
}
|
|
img {
|
|
width: 29px;
|
|
height: 29px;
|
|
display: block;
|
|
margin-left: 5px;
|
|
|
|
}
|
|
.rc-message {
|
|
width: 29px;
|
|
margin-left: 8px;
|
|
height: 29px;
|
|
display: block;
|
|
}
|
|
|
|
strong {
|
|
font-style: normal;
|
|
list-style: none;
|
|
width: 30px;
|
|
height: 30px;
|
|
border: 1px solid #d7d7d7;
|
|
opacity: 1;
|
|
border-radius: 3px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
margin: 0 5px 0 5px;
|
|
color: #666666;
|
|
}
|
|
}
|
|
.certification {
|
|
.rc-button{
|
|
width: 100%;
|
|
padding-top: 33px;
|
|
display: flex;
|
|
align-items: center;
|
|
span{
|
|
width: 160px;
|
|
height: 48px;
|
|
background: #E2001A;
|
|
border-radius: 30px;
|
|
font-size: 16px;
|
|
color:#FFFFFF;
|
|
display: block;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
span:last-child{
|
|
margin-left: 40px;
|
|
}
|
|
}
|
|
margin-top: 16px;
|
|
ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height: 30px;
|
|
li {
|
|
float: left;
|
|
width: 100%;
|
|
text-align: left;
|
|
span {
|
|
font-size: 14px;
|
|
color: #333333;
|
|
}
|
|
i{
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #666666;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// /* 最小768px最大1920 *pc端/
|
|
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
|
.rc-headera{
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
justify-content: center;
|
|
h3{
|
|
color:#333333;
|
|
font-size: 26px;
|
|
}
|
|
.rc-title{
|
|
img{
|
|
width: 96px;
|
|
height: 96px;
|
|
|
|
}
|
|
}
|
|
.userer{
|
|
span{
|
|
width: 130px;
|
|
height: 40px;
|
|
border: 2px solid #E2001A;
|
|
border-radius: 30px;
|
|
display: block;
|
|
color: #E2001A;
|
|
line-height: 40px;
|
|
margin-top: 42px;
|
|
font-size: 14px;
|
|
}
|
|
i{
|
|
font-size: 18px;
|
|
font-style: normal;
|
|
display: block;
|
|
margin-top: 32px;
|
|
color: #E1001A;
|
|
}
|
|
}
|
|
}
|
|
.rc-header{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
h3{
|
|
color:#333333;
|
|
font-size: 26px;
|
|
}
|
|
.rc-title{
|
|
img{
|
|
width: 96px;
|
|
height: 96px;
|
|
|
|
}
|
|
}
|
|
.userer{
|
|
img{
|
|
width: 210px;
|
|
height: 210px;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
span{
|
|
font-size: 16px;
|
|
|
|
color: #333333;
|
|
}
|
|
i{
|
|
font-size: 18px;
|
|
font-style: normal;
|
|
display: block;
|
|
margin-top: 32px;
|
|
color: #E1001A;
|
|
}
|
|
}
|
|
}
|
|
/deep/.el-dialog {
|
|
width: 440px;
|
|
height: 432px;
|
|
position: relative;
|
|
}
|
|
|
|
.rc-discount {
|
|
position: relative;
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.rc-contair {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.rc-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #e1001a;
|
|
padding-right: 21px;
|
|
width: 30%;
|
|
float: left;
|
|
height: 100%;
|
|
i {
|
|
font-style: normal;
|
|
font-size: 12px;
|
|
}
|
|
span {
|
|
font-size: 26px;
|
|
}
|
|
strong {
|
|
font-style: normal;
|
|
font-size: 12px;
|
|
display: block;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
.rc-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 36px;
|
|
justify-content: center;
|
|
height: 100%;
|
|
i {
|
|
font-style: normal;
|
|
font-size: 16px;
|
|
color: #e1001a;
|
|
}
|
|
.rc-main {
|
|
color: #999999;
|
|
font-size: 12px;
|
|
}
|
|
span {
|
|
display: block;
|
|
margin-top: 8px;
|
|
}
|
|
em {
|
|
font-style: normal;
|
|
}
|
|
}
|
|
.rc-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-right: 10px;
|
|
span {
|
|
width: 72px;
|
|
height: 25px;
|
|
background: #e2001a;
|
|
text-align: center;
|
|
line-height: 25px;
|
|
font-size: 12px;
|
|
color: #ffffff;
|
|
margin-bottom: 8px;
|
|
border-radius: 100px;
|
|
margin-right: 8px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
.rc-usermain{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.active{
|
|
border: 2px solid #E2001A;
|
|
color:#666666;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
.unactive{
|
|
border: 2px solid #808285;
|
|
color:#666666;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
.rc-header {
|
|
width: 100%;
|
|
margin-left: 80px;
|
|
.rc-footimage{
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
img{
|
|
width: 100%;
|
|
}
|
|
}
|
|
.rc-title {
|
|
height: 85px;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid #d8d8d8;
|
|
h2 {
|
|
|
|
font-size: 30px;
|
|
color: #e1001a;
|
|
}
|
|
}
|
|
.productdetails {
|
|
.rc-button{
|
|
width: 100%;
|
|
padding-top: 33px;
|
|
display: flex;
|
|
align-items: center;
|
|
span{
|
|
width: 160px;
|
|
height: 48px;
|
|
background: #E2001A;
|
|
border-radius: 30px;
|
|
font-size: 16px;
|
|
color:#FFFFFF;
|
|
display: block;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
span:last-child{
|
|
margin-left: 40px;
|
|
}
|
|
}
|
|
margin-top: 19px;
|
|
.rc-productdetail {
|
|
display: flex;
|
|
align-items: center;
|
|
i {
|
|
font-style: normal;
|
|
font-size: 18px;
|
|
|
|
color: #333333;
|
|
}
|
|
|
|
span {
|
|
font-size: 18px;
|
|
margin-left: 8px;
|
|
color: #e1001a;
|
|
}
|
|
}
|
|
.rc-productdetai {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
border-bottom: 1px solid #d7d7d7;
|
|
padding-bottom: 17px;
|
|
i {
|
|
font-style: normal;
|
|
|
|
|
|
font-size: 18px;
|
|
color: #333333;
|
|
}
|
|
span {
|
|
|
|
font-size: 20px;
|
|
color: #666666;
|
|
margin-left: 8px;
|
|
}
|
|
em {
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
width: 40%;
|
|
text-align: right;
|
|
display: block;
|
|
color: #E2001A;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rc-productdeta {
|
|
margin-top: 16px;
|
|
.rc-prodtop {
|
|
display: flex;
|
|
align-items: center;
|
|
span {
|
|
|
|
font-size: 18px;
|
|
color: #333333;
|
|
}
|
|
em {
|
|
font-style: normal;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 59px;
|
|
font-size: 16px;
|
|
margin-left: 10px;
|
|
height: 39px;
|
|
border-radius: 3px;
|
|
color:#666666;
|
|
}
|
|
}
|
|
}
|
|
.rc-produnnum {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-bottom: 20px;
|
|
margin-top: 16px;
|
|
border-bottom: 1px solid #d7d7d7;
|
|
span {
|
|
font-size: 18px;
|
|
color: #333333;
|
|
}
|
|
img {
|
|
width: 29px;
|
|
height: 29px;
|
|
display: block;
|
|
}
|
|
.rc-message {
|
|
width: 29px;
|
|
margin-left: 8px;
|
|
height: 29px;
|
|
display: block;
|
|
}
|
|
|
|
strong {
|
|
font-style: normal;
|
|
list-style: none;
|
|
width: 30px;
|
|
height: 30px;
|
|
border: 1px solid #d7d7d7;
|
|
opacity: 1;
|
|
border-radius: 3px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
margin: 0 5px 0 5px;
|
|
color: #666666;
|
|
}
|
|
}
|
|
.certification {
|
|
.rc-button{
|
|
width: 100%;
|
|
padding-top: 33px;
|
|
display: flex;
|
|
align-items: center;
|
|
span{
|
|
width: 160px;
|
|
height: 48px;
|
|
background: #E2001A;
|
|
border-radius: 30px;
|
|
font-size: 16px;
|
|
color:#FFFFFF;
|
|
display: block;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
span:last-child{
|
|
margin-left: 40px;
|
|
}
|
|
}
|
|
margin-top: 16px;
|
|
ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height:40px;
|
|
text-align: left;
|
|
li {
|
|
width: 100%;
|
|
float: left;
|
|
span {
|
|
font-size: 18px;
|
|
color: #333333;
|
|
}
|
|
i{
|
|
font-style: normal;
|
|
font-size: 16px;
|
|
color: #666666;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
} |