开票通知模块css代码优化
This commit is contained in:
@ -59,6 +59,10 @@
|
|||||||
color: $col;
|
color: $col;
|
||||||
opacity: $alpha;
|
opacity: $alpha;
|
||||||
}
|
}
|
||||||
|
@mixin bgcolorOpa($col,$alpha){
|
||||||
|
background: $col;
|
||||||
|
opacity: $alpha;
|
||||||
|
}
|
||||||
@mixin radiusSizing($rad){
|
@mixin radiusSizing($rad){
|
||||||
border-radius: $rad;
|
border-radius: $rad;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -56,10 +56,7 @@ export default {
|
|||||||
pageSize:this.pageSize,
|
pageSize:this.pageSize,
|
||||||
...this.form,
|
...this.form,
|
||||||
})
|
})
|
||||||
// if(res.code=== 200){
|
this.detailList=res.data
|
||||||
this.detailList=res.data
|
|
||||||
// }
|
|
||||||
// console.log("resssss",res)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -75,22 +72,19 @@ export default {
|
|||||||
height: 46px;
|
height: 46px;
|
||||||
}
|
}
|
||||||
.contentWrap{
|
.contentWrap{
|
||||||
width: 100%;
|
@include wh(100%,400px);
|
||||||
height: 400px;
|
margin-left: 27px;
|
||||||
margin-left: 27px;
|
|
||||||
.item{
|
.item{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@include all-height(47px);
|
@include all-height(47px);
|
||||||
.itemContent{
|
.itemContent{
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
@include fontWeightSize(400,13px);
|
|
||||||
color: #323643;
|
color: #323643;
|
||||||
|
@include fontWeightSize(400,13px);
|
||||||
}
|
}
|
||||||
.line{
|
.line{
|
||||||
width: 100%;
|
@include wh(100%,1px);
|
||||||
height: 1px;
|
@include bgcolorOpa(#E9E9EA,0.6);
|
||||||
background: #E9E9EA;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="show"
|
<div class="empty" v-if="show">
|
||||||
style="width:100%;height:100%;background-color: #FAFAFA;display: flex;align-items: center;justify-content: center">
|
<img src="@/assets/empty.png" >
|
||||||
<img src="@/assets/empty.png" style="width:100%;">
|
|
||||||
</div>
|
</div>
|
||||||
<div class="wrap" v-else>
|
<div class="wrap" v-else>
|
||||||
<ul id="dataList" class="dataList">
|
<ul id="dataList" class="dataList">
|
||||||
@ -62,7 +61,14 @@ export default {
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@import "@/styles/mixin.scss";
|
@import "@/styles/mixin.scss";
|
||||||
@import "@/styles/common.scss";
|
@import "@/styles/common.scss";
|
||||||
|
.empty{
|
||||||
|
@include wh(100%,100%);
|
||||||
|
background-color: #FAFAFA;
|
||||||
|
@include flexTwoCenter;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
.wrap {
|
.wrap {
|
||||||
@include wh(100%, 100%);
|
@include wh(100%, 100%);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -114,15 +114,13 @@ export default {
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@import "@/styles/mixin.scss";
|
@import "@/styles/mixin.scss";
|
||||||
.wrap{
|
.wrap{
|
||||||
width: 100%;
|
@include wh(100%,100%);
|
||||||
height: 100%;
|
|
||||||
background-color: #F4F5F7;
|
background-color: #F4F5F7;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
.common{
|
.common{
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border-radius: 6px;
|
@include radiusSizing(6px);
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 11px 17px 15px 24px;
|
padding: 11px 17px 15px 24px;
|
||||||
}
|
}
|
||||||
.fontColor{
|
.fontColor{
|
||||||
@ -144,7 +142,6 @@ export default {
|
|||||||
.rightContent{
|
.rightContent{
|
||||||
height: 189px;
|
height: 189px;
|
||||||
width: calc(100% - 60px);
|
width: calc(100% - 60px);
|
||||||
//@include wh(90px,189px);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -152,9 +149,7 @@ export default {
|
|||||||
@include wh(100%,356px);
|
@include wh(100%,356px);
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
.item{
|
.item{
|
||||||
display: flex;
|
@include flexCenter;
|
||||||
align-items: center;
|
|
||||||
//line-height: 27px;
|
|
||||||
}
|
}
|
||||||
.infoContent{
|
.infoContent{
|
||||||
.leftTitle{
|
.leftTitle{
|
||||||
@ -169,8 +164,7 @@ export default {
|
|||||||
|
|
||||||
.vehicleRemark{
|
.vehicleRemark{
|
||||||
@include fontWeightSize(400,11px);
|
@include fontWeightSize(400,11px);
|
||||||
opacity: 0.55;
|
@include colorOpa(#121212,0.55);
|
||||||
color: #121212;
|
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
@ -181,9 +175,8 @@ export default {
|
|||||||
}
|
}
|
||||||
.title{
|
.title{
|
||||||
@include fontWeightSize(bold,14px);
|
@include fontWeightSize(bold,14px);
|
||||||
color: #323643;
|
@include colorOpa(#323643,0.6);
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
opacity: .6;
|
|
||||||
}
|
}
|
||||||
.line{
|
.line{
|
||||||
@include wh(100%,2px);
|
@include wh(100%,2px);
|
||||||
|
Reference in New Issue
Block a user