xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-10-03 02:36:39 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

积分兑换样式

Browse Source
This commit is contained in:
952108534@qq.com 2022-01-13 14:54:23 +08:00
parent 0034377d03
commit 782738fc9a
2 changed files with 198 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
rc-busness/assets/css/integral.less Normal file
View File

@ -0,0 +1,195 @@
@media screen and (max-width:768px){
.rc-button{
width: 100%;
height: 80px;
background: #FFFFFF;
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-top: 12px;
.rc-order{
width: 164px;
height: 48px;
border: 2px solid #E2001A;
border-radius: 30px;
background: #E2001A;
text-align: center;
align-items: center;
line-height: 48px;
span{
font-size: 16px;
display: block;
color: #FFFFFF;
}
}
}
.rc-usermain{
width: 92%;
margin: 0 auto;
ul{
height: 70px;
display: block;
border-bottom: 1px solid #D8D8D8;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 16px;
color: #444444;
li{
float: left;
width: 30%;
}
li:after{
// height: 2px;
// border: 1px solid red;
// display: block;
content:"|";
color: #707070;
margin-left: 5px;
}
li:last-child:after{
content:"";
}
}
ol{
li{
font-style: normal;
display: block;
height: 32px;
margin-top: 16px;
display: flex;
// justify-content: space-between;
align-items: center;
color: #666666;
font-size: 14px;
text-align: center;
i{
font-style: normal;
display: block;
width: 40%;
}
span{
font-style: normal;
display: block;
width: 36%;
}
em{
font-style: normal;
display: block;
width: 23%;
}
}
}
}
}
@media screen and (min-width: 769px)
{
.rc-button{
width: 100%;
height: 80px;
background: #FFFFFF;
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-top: 12px;
display: none;
.rc-order{
width: 164px;
height: 48px;
border: 2px solid #E2001A;
border-radius: 30px;
background: #E2001A;
text-align: center;
align-items: center;
line-height: 48px;
span{
font-size: 16px;
display: block;
color: #FFFFFF;
}
}
}
.rc-main{
width: 92%;
margin: 0 auto;
margin-top: 60px;
ul{
height: 64px;
background: #F6F6F6;
border: 1px solid #D7D7D7;
opacity: 1;
border-radius: 3px 3px 0px 0px;
display: block;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 16px;
color: #444444;
li{
float: left;
width: 42%;
}
}
ol{
li{
font-style: normal;
display: block;
height: 48px;
margin-top: 16px;
display: flex;
border: 1px solid #D7D7D7;
// justify-content: space-between;
align-items: center;
color: #666666;
font-size: 14px;
text-align: center;
i{
font-style: normal;
display: block;
width: 34%;
}
span{
font-style: normal;
display: block;
width: 34%;
}
em{
font-style: normal;
display: block;
width: 34%;
}
}
}
}
}

207
rc-busness/pages/personal/integral.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<Myheader></Myheader> <Myheader></Myheader>
<div class="rc-header">
<div class="rc-main"> <div class="rc-usermain ">
<ul> <ul>
<li v-for="(item,index) in userrecord" :key="index"> <li v-for="(item,index) in userrecord" :key="index">
{{item.title}} {{item.title}}
@ -20,7 +20,6 @@
</div> </div>
</div>
<div class="rc-button"> <div class="rc-button">
<div class="rc-order"> <div class="rc-order">
<span>积分兑换</span> <span>积分兑换</span>
@ -115,207 +114,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
ul li ol li em strong i { @import url("../../assets/css/integral.less");
list-style: none;
font-style: normal;
}
.rc-header {
width: 100%;
}
//手机端
@media screen and (max-width: 768px) {
.rc-button{
width: 100%;
height: 80px;
background: #FFFFFF;
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-top: 12px;
.rc-order{
width: 164px;
height: 48px;
border: 2px solid #E2001A;
border-radius: 30px;
background: #E2001A;
text-align: center;
align-items: center;
line-height: 48px;
span{
font-size: 16px;
display: block;
color: #FFFFFF;
}
}
}
.rc-main{
width: 92%;
margin: 0 auto;
ul{
height: 70px;
display: block;
border-bottom: 1px solid #D8D8D8;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 16px;
color: #444444;
li{
float: left;
width: 30%;
}
li:after{
// height: 2px;
// border: 1px solid red;
// display: block;
content:"|";
color: #707070;
margin-left: 5px;
}
li:last-child:after{
content:"";
}
}
ol{
li{
font-style: normal;
display: block;
height: 32px;
margin-top: 16px;
display: flex;
// justify-content: space-between;
align-items: center;
color: #666666;
font-size: 14px;
text-align: center;
i{
font-style: normal;
display: block;
width: 40%;
}
span{
font-style: normal;
display: block;
width: 36%;
}
em{
font-style: normal;
display: block;
width: 23%;
}
}
}
}
}
//pc端
@media screen and (min-width: 768px) and (max-width: 1920px) {
.rc-button{
width: 100%;
height: 80px;
background: #FFFFFF;
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-top: 12px;
display: none;
.rc-order{
width: 164px;
height: 48px;
border: 2px solid #E2001A;
border-radius: 30px;
background: #E2001A;
text-align: center;
align-items: center;
line-height: 48px;
span{
font-size: 16px;
display: block;
color: #FFFFFF;
}
}
}
.rc-main{
width: 92%;
margin: 0 auto;
margin-top: 60px;
ul{
height: 64px;
background: #F6F6F6;
border: 1px solid #D7D7D7;
opacity: 1;
border-radius: 3px 3px 0px 0px;
display: block;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 16px;
color: #444444;
li{
float: left;
width: 42%;
}
}
ol{
li{
font-style: normal;
display: block;
height: 48px;
margin-top: 16px;
display: flex;
border: 1px solid #D7D7D7;
// justify-content: space-between;
align-items: center;
color: #666666;
font-size: 14px;
text-align: center;
i{
font-style: normal;
display: block;
width: 34%;
}
span{
font-style: normal;
display: block;
width: 34%;
}
em{
font-style: normal;
display: block;
width: 34%;
}
}
}
}
}
</style> </style>