xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-11-21 01:46:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Floating right component added, personal pages style fixed

Browse Source
This commit is contained in:
Vion
2022-01-21 23:34:49 +08:00
parent 64d4b856c0
commit 60c6a6b8b4
15 changed files with 384 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
rc-busness/pages/personal/usermember.vue
View File

@@ -1,7 +1,8 @@
<template>
<div>
<Myheader></Myheader>
<div class="rc-header">
<div class="rc-top"></div>
<div class="rc-full-width rc-max-width--xl rc-padding-y--lg">
<div class="rc-main">
<div class="rc-center" >
@@ -42,13 +43,15 @@
</div>
</div>
</div>
<Myfooter></Myfooter>
</div>
</template>
<script>
import Myheader from '~/components/header.vue'
import Myheader from '~/components/header.vue'
import Myfooter from '~/components/rc-footer.vue'
export default {
data(){
@@ -246,7 +249,8 @@ methods:{
},
components:{
Myheader
Myheader,
Myfooter
},
mounted(){
console.log(this.$refs.userblock);
@@ -293,216 +297,6 @@ mounted(){
</script>
<style lang="less" scoped>
ul li ol li em strong i {
list-style: none;
font-style: normal;
}
.rc-header {
width: 100%;
}
//手机端
@media screen and (max-width: 768px) {
.rc-main {
width: 92%;
margin: 0 auto;
overflow: hidden;
.rc-center {
width: 100%;
height: 180px;
img {
width: 100%;
height: 100%;
display: block;
}
}
.rc-userorder{
display: flex;
align-items: center;
height: 100%;
}
.rc-order{
padding: 16px 0 16px 0 ;
width: 100%;
display: flex;
align-items: center;
font-size: 14px;
color: #333333;
font-weight: 500;
border-bottom: 1px solid #D8D8D8;
margin-top: 22px;
}
.rc-cordd{
color:#666666;
font-size: 14px;
margin-top: 16px;
span{
display: block;
margin-top: 16px;
}
.block{
height: 8px;
background: #D7D7D7;
margin-top: 16px;
border-radius: 4px;
.r-block{
width: 0%;
height: 100%;
background: #008900;
}
}
.rc-value{
display: flex;
justify-content: space-between;
}
}
.usermember{
width: 100%;
height: 80px;
border-bottom: 1px solid #D8D8D8;
display: flex;
align-items: center;
.rc-image{
height: 100%;
display: flex;
align-items: center;
}
img{
width: 48px;
height: 48px;
display: block;
}
em{
font-style: normal;
font-size: 16px;
display: block;
margin-left:16px;
font-weight: bold;
color: #531c1c;
}
span{
color: #666666;
font-size: 14px;
margin-left: 8px;
}
}
}
}
@media screen and (min-width: 768px) and (max-width: 1920px) {
.rc-main {
width: 92%;
margin: 0 auto;
overflow: hidden;
.rc-center {
width: 100%;
height: 180px;
display: none;
img {
width: 100%;
height: 100%;
display: block;
}
}
.rc-order{
padding: 16px 0 16px 0 ;
width: 100%;
display: flex;
align-items: center;
font-size: 26px;
color: #333333;
font-weight: 500;
}
.rc-cordd{
color:#666666;
margin-top: 16px;
span{
display: block;
margin-top: 16px;
font-size: 16px;
}
.block{
height: 8px;
background: #D7D7D7;
margin-top: 16px;
border-radius: 4px;
.r-block{
width: 0%;
height: 100%;
background: #008900;
}
}
.rc-value{
display: flex;
justify-content: space-between;
}
}
.usermember{
width: 23%;
float: left;
height: 160px;
border: 1px solid #D7D7D7;
margin-top: 80px;
margin-left: 19px;
.rc-image{
float: right;
overflow: hidden;
height: 100%;
display: flex;
align-items: center;
margin-right:20px;
}
img{
width: 80px;
height: 80px;
display: block;
}
em{
font-style: normal;
font-size: 20px;
display: block;
font-weight: 500;
color: #333333;
}
span{
color: #999999;
font-size: 14px;
}
}
.rc-userorder{
width: 60%;
float: left;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
span{
margin-top: 8px;
width: 54%;
}
}
}
}
@import url("../../assets/css/usermember.less");
</style>