ashan
2 years ago
15 changed files with 1222 additions and 1 deletions
|
After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 764 B |
|
After Width: | Height: | Size: 834 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 602 B |
|
After Width: | Height: | Size: 980 B |
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,176 @@ |
|||
<template> |
|||
<div :class="className" :style="{ height: height, width: width }" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from "./mixins/resize"; |
|||
|
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: "chart", |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: "100%", |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: "100%", |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null, |
|||
}; |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.setOptions(val); |
|||
}, |
|||
}, |
|||
height: { |
|||
deep: true, |
|||
handler(val) { |
|||
console.log(val); |
|||
}, |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart(); |
|||
}); |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return; |
|||
} |
|||
this.chart.dispose(); |
|||
this.chart = null; |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, "macarons"); |
|||
this.setOptions(this.chartData); |
|||
}, |
|||
setOptions({ |
|||
title, |
|||
xAxis, |
|||
series, |
|||
legend, |
|||
unit, |
|||
rotate, |
|||
time, |
|||
serviceData, |
|||
serviceData2, |
|||
} = {}) { |
|||
this.chart.setOption({ |
|||
color: ['#ff9900', '#10aeff'], |
|||
legend: { |
|||
top: 10, |
|||
left: "center", |
|||
itemWidth: 10, |
|||
itemHeight: 10, |
|||
// padding: [5, 10], |
|||
textStyle: { |
|||
fontSize: 14, |
|||
color: "#000", |
|||
padding: [3, 0, 0, 0], |
|||
}, |
|||
data: ['常温仓', '供应链仓'], |
|||
}, |
|||
grid: { |
|||
left: "0%", |
|||
right: "0%", |
|||
bottom: "5%", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
axisLabel: { |
|||
color: "#96A4F4", |
|||
}, |
|||
nameTextStyle: { |
|||
// y轴name的样式调整 |
|||
color: "#f00", |
|||
fontSize: 10, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#96A4F4", |
|||
}, |
|||
|
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
data: ['12/1', '12/2', '12/3', '12/4', '12/5', '12/6', '12/7', '12/8', '12/9','12/10','12/11','12/12','12/13'], |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
axisLabel: { |
|||
color: "#96A4F4", |
|||
}, |
|||
|
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#96A4F4", |
|||
}, |
|||
width: 5, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: "rgba(000, 000, 000, 0.3)", |
|||
}, |
|||
width:5 |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "常温仓", |
|||
type: "bar", |
|||
stack: "总量", |
|||
barWidth: "45%", |
|||
label: { |
|||
show: false, |
|||
position: "insideRight", |
|||
}, |
|||
data: [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500], |
|||
}, |
|||
{ |
|||
name: "供应链仓", |
|||
type: "bar", |
|||
stack: "总量", |
|||
barWidth: "45%", |
|||
label: { |
|||
show: false, |
|||
position: "insideRight", |
|||
}, |
|||
data: [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500], |
|||
}, |
|||
], |
|||
}); |
|||
this.chart.on("click", function (param) { |
|||
this.callParents(param); |
|||
}); |
|||
}, |
|||
// 调用父组件 |
|||
callParents(name) { |
|||
this.$emit("pieChartFunction", name); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,56 @@ |
|||
import { debounce } from '@/utils' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
$_sidebarElm: null |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$_initResizeEvent() |
|||
this.$_initSidebarResizeEvent() |
|||
}, |
|||
beforeDestroy() { |
|||
this.$_destroyResizeEvent() |
|||
this.$_destroySidebarResizeEvent() |
|||
}, |
|||
// to fixed bug when cached by keep-alive
|
|||
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
|
|||
activated() { |
|||
this.$_initResizeEvent() |
|||
this.$_initSidebarResizeEvent() |
|||
}, |
|||
deactivated() { |
|||
this.$_destroyResizeEvent() |
|||
this.$_destroySidebarResizeEvent() |
|||
}, |
|||
methods: { |
|||
// use $_ for mixins properties
|
|||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
|||
$_resizeHandler() { |
|||
return debounce(() => { |
|||
if (this.chart) { |
|||
this.chart.resize() |
|||
} |
|||
}, 100)() |
|||
}, |
|||
$_initResizeEvent() { |
|||
window.addEventListener('resize', this.$_resizeHandler) |
|||
}, |
|||
$_destroyResizeEvent() { |
|||
window.removeEventListener('resize', this.$_resizeHandler) |
|||
}, |
|||
$_sidebarResizeHandler(e) { |
|||
if (e.propertyName === 'width') { |
|||
this.$_resizeHandler() |
|||
} |
|||
}, |
|||
$_initSidebarResizeEvent() { |
|||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0] |
|||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler) |
|||
}, |
|||
$_destroySidebarResizeEvent() { |
|||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler) |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,165 @@ |
|||
<template> |
|||
<div :class="className" :style="{ height: height, width: width }" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from "./mixins/resize"; |
|||
|
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: "chart", |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: "100%", |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: "100%", |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null, |
|||
}; |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.setOptions(val); |
|||
}, |
|||
}, |
|||
height: { |
|||
deep: true, |
|||
handler(val) { |
|||
console.log(val); |
|||
}, |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart(); |
|||
}); |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return; |
|||
} |
|||
this.chart.dispose(); |
|||
this.chart = null; |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, "macarons"); |
|||
this.setOptions(this.chartData); |
|||
}, |
|||
setOptions({ |
|||
title, |
|||
xAxis, |
|||
series, |
|||
legend, |
|||
unit, |
|||
rotate, |
|||
time, |
|||
serviceData, |
|||
serviceData2, |
|||
} = {}) { |
|||
this.chart.setOption({ |
|||
title: [ |
|||
{ |
|||
text: '75.62%', |
|||
subtext: '质押率50%', |
|||
textStyle:{ |
|||
fontSize:20, |
|||
color:"#ff7e4b" |
|||
}, |
|||
subtextStyle: { |
|||
fontSize: 18, |
|||
color: '#bbbaba' |
|||
}, |
|||
textAlign:"center", |
|||
x: '34.5%', |
|||
y: '43%', |
|||
}], |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter:function (parms){ |
|||
var str= |
|||
parms.marker+""+parms.data.name+"</br>"+ |
|||
"价值："+ parms.data.value+"</br>"+ |
|||
"占比："+ parms.percent+"%"; |
|||
return str ; |
|||
} |
|||
}, |
|||
legend: { |
|||
type:"plain", |
|||
icon:'rect', |
|||
orient: 'vertical', |
|||
left:'70%', |
|||
align:'left', |
|||
top:'middle', |
|||
layout:'horizontal', |
|||
itemGap:30, |
|||
padding:[20,29,40,0], |
|||
textStyle: { |
|||
color:'#333', |
|||
fontSize:14, |
|||
padding:[0,10] |
|||
}, |
|||
height:'auto', |
|||
itemWidth:20, |
|||
itemHeight:20 |
|||
}, |
|||
series: [ |
|||
{ |
|||
name:'标题', |
|||
type:'pie', |
|||
center: ['35%', '50%'], |
|||
radius: ['40%', '65%'], |
|||
clockwise: false, //饼图的扇区是否是顺时针排布 |
|||
avoidLabelOverlap: false, |
|||
label: { |
|||
normal: { |
|||
show: false, |
|||
} |
|||
}, |
|||
|
|||
labelLine: { |
|||
normal: { |
|||
length:5, |
|||
length2:3, |
|||
smooth:true, |
|||
} |
|||
}, |
|||
data: [ |
|||
{value:335, legendname:'种类01',name:"账户余额",itemStyle:{color:"#5087ec"}}, |
|||
{value:310, legendname:'种类02',name:"应收账款",itemStyle:{color:"#68bbc4"}}, |
|||
{value:234, legendname:'种类03',name:"物质库存价值",itemStyle:{color:"#58a55c"}}, |
|||
{value:154, legendname:'种类04',name:"在途货物价值",itemStyle:{color:"#f2bd42"}}, |
|||
{value:335, legendname:'种类05',name:"预付款",itemStyle:{color:"#ee752f"}}, |
|||
|
|||
] |
|||
} |
|||
] |
|||
}); |
|||
this.chart.on("click", function (param) { |
|||
this.callParents(param); |
|||
}); |
|||
}, |
|||
// 调用父组件 |
|||
callParents(name) { |
|||
this.$emit("pieChartFunction", name); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,810 @@ |
|||
<template> |
|||
<div class="mortgage"> |
|||
<div class="mortgage_tit">山海能源光伏动产质押项目</div> |
|||
<div class="mortgage_top"> |
|||
<div class="mortgage_top_item"> |
|||
<div class="mortgage_top_item_tit"> |
|||
<div class="mortgage_top_item_tit_left"> |
|||
<span> |
|||
<svg-icon |
|||
slot="prefix" |
|||
icon-class="word" |
|||
class="el-input__icon" |
|||
style="height: 16px; width: 16px" |
|||
/> |
|||
</span> |
|||
数据总览 |
|||
</div> |
|||
<div class="mortgage_top_item_tit_right"> |
|||
<el-select v-model="times" placeholder="请选择日期"> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
<div class="mortgage_top_item_coner"> |
|||
<div class="mortgage_top_item_coner_eat"> |
|||
<pieLineEachartsVue |
|||
:width="`100%`" |
|||
:height="`100%`" |
|||
></pieLineEachartsVue> |
|||
</div> |
|||
<div class="mortgage_top_item_coner_con"> |
|||
<span> 授信：2398712元 </span> |
|||
|
|||
<span> 用信：2398712元 </span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="mortgage_top_item"> |
|||
<div class="mortgage_top_item_tit" style="margin-bottom: 10px"> |
|||
<div class="mortgage_top_item_tit_left"> |
|||
<span> |
|||
<svg-icon |
|||
slot="prefix" |
|||
icon-class="home" |
|||
class="el-input__icon" |
|||
style="height: 16px; width: 16px" |
|||
/> |
|||
</span> |
|||
仓库安防 |
|||
</div> |
|||
<div class="mortgage_top_item_tit_right"> |
|||
<el-select v-model="wareValue" placeholder="请选择日期"> |
|||
<el-option |
|||
v-for="item in warehouse" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
<div class="mortgage_top_item_cons"> |
|||
<div class="mortgage_top_item_cons_left"> |
|||
<div class="mortgage_top_item_top"> |
|||
<img src="@/assets/mprtgage/tablist.jpg" alt="" /> |
|||
</div> |
|||
<div class="mortgage_top_item_bom"> |
|||
<div class="mortgage_top_item_bom_left"> |
|||
<div class="mortgage_top_item_bom_left_item"> |
|||
<span> |
|||
<svg-icon |
|||
slot="prefix" |
|||
icon-class="video" |
|||
class="el-input__icon" |
|||
style="height: 16px; width: 16px" |
|||
/> |
|||
</span> |
|||
视频监控 |
|||
</div> |
|||
</div> |
|||
<div class="mortgage_top_item_bom_right"> |
|||
<div class="mortgage_top_item_bom_right_item"> |
|||
正常<span> |
|||
<svg-icon |
|||
slot="prefix" |
|||
icon-class="diannao" |
|||
class="el-input__icon" |
|||
style="height: 16px; width: 16px" |
|||
/> |
|||
</span> |
|||
<p>4</p> |
|||
</div> |
|||
<div class="mortgage_top_item_bom_right_item"> |
|||
正常<span> |
|||
<svg-icon |
|||
slot="prefix" |
|||
icon-class="diannao" |
|||
class="el-input__icon" |
|||
style="height: 16px; width: 16px" |
|||
/> |
|||
</span> |
|||
<p>4</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="mortgage_top_item_cons_right"> |
|||
<div class="mortgage_top_item_cons_right_top"> |
|||
<div class="mortgage_top_item_cons_right_top_video"></div> |
|||
<div class="mortgage_top_item_cons_right_top_foor"> |
|||
<div class="invie">东北角摄像头1</div> |
|||
|
|||
<div class="huishie"> |
|||
回放 |
|||
<span> |
|||
<svg-icon |
|||
icon-class="huifang" |
|||
class="el-input__icon" |
|||
style="height: 16px; width: 16px" |
|||
/> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="mortgage_top_item_cons_right_bom"> |
|||
<div class="titele"> |
|||
<div class="titele_left"> |
|||
<span> |
|||
<svg-icon |
|||
icon-class="alarm" |
|||
class="el-input__icon" |
|||
style="height: 16px; width: 16px" |
|||
/> |
|||
</span> |
|||
警告信息 |
|||
</div> |
|||
<div class="titele_right"></div> |
|||
</div> |
|||
<div class="containers"> |
|||
<div class="container_item"> |
|||
2023-11-19 19:33:21 摄像头1号离线 |
|||
</div> |
|||
<div class="container_item"> |
|||
2023-11-19 19:33:21 摄像头1号离线 |
|||
</div> |
|||
<div class="container_item"> |
|||
2023-11-19 19:33:21 摄像头1号离线 |
|||
</div> |
|||
<div class="container_item"> |
|||
2023-11-19 19:33:21 摄像头1号离线 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="mortgage_bom"> |
|||
<div class="mortgage_bom_item"> |
|||
<div class="mortgage_bom_item_tit"> |
|||
<div class="mortgage_bom_item_tit_left"> |
|||
<span> |
|||
<svg-icon |
|||
icon-class="jianguan" |
|||
class="el-input__icon" |
|||
style="height: 16px; width: 16px" |
|||
/> |
|||
</span> |
|||
监管数据 |
|||
</div> |
|||
<div class="mortgage_bom_item_tit_right"></div> |
|||
</div> |
|||
<div class="mortgage_bom_item_cont"> |
|||
<div class="mortgage_bom_item_cont_item"> |
|||
<div class="mortgage_bom_item_cont_item_left">账户余额</div> |
|||
<div class="mortgage_bom_item_cont_item_right">12123432.22元</div> |
|||
</div> |
|||
<div class="mortgage_bom_item_cont_item"> |
|||
<div class="mortgage_bom_item_cont_item_left">账户余额</div> |
|||
<div class="mortgage_bom_item_cont_item_right">12123432.22元</div> |
|||
</div> |
|||
<div class="mortgage_bom_item_cont_item"> |
|||
<div class="mortgage_bom_item_cont_item_left">账户余额</div> |
|||
<div class="mortgage_bom_item_cont_item_right">12123432.22元</div> |
|||
</div> |
|||
<div class="mortgage_bom_item_cont_item"> |
|||
<div class="mortgage_bom_item_cont_item_left">账户余额</div> |
|||
<div class="mortgage_bom_item_cont_item_right">12123432.22元</div> |
|||
</div> |
|||
<div class="mortgage_bom_item_cont_item"> |
|||
<div class="mortgage_bom_item_cont_item_left">账户余额</div> |
|||
<div class="mortgage_bom_item_cont_item_right">12123432.22元</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="mortgage_bom_item"> |
|||
<div class="mortgage_bom_item_tit"> |
|||
<div class="mortgage_bom_item_tit_left"> |
|||
<span> |
|||
<svg-icon |
|||
icon-class="data" |
|||
class="el-input__icon" |
|||
style="height: 16px; width: 16px" |
|||
/> |
|||
</span> |
|||
库存分析图 |
|||
</div> |
|||
<div class="mortgage_bom_item_tit_right"> |
|||
<el-select v-model="dayValue" placeholder="请选择日期"> |
|||
<el-option |
|||
v-for="item in day" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
<div class="mortgage_bom_item_cont"> |
|||
<barlineEachartsVue |
|||
:width="`100%`" |
|||
:height="`100%`" |
|||
></barlineEachartsVue> |
|||
</div> |
|||
</div> |
|||
<div class="mortgage_bom_item"> |
|||
<div class="mortgage_bom_item_tit"> |
|||
<div class="mortgage_bom_item_tit_left"> |
|||
<span> |
|||
<svg-icon |
|||
icon-class="lines" |
|||
class="el-input__icon" |
|||
style="height: 16px; width: 16px" |
|||
/> |
|||
</span> |
|||
仓库库存表 |
|||
</div> |
|||
<div class="mortgage_bom_item_tit_right"></div> |
|||
</div> |
|||
<div class="mortgage_bom_item_cont"> |
|||
<div class="mortgage_bom_item_cont_item"> |
|||
<div class="mortgage_bom_item_cont_item_left">常温仓</div> |
|||
<div class="mortgage_bom_item_cont_item_right">12123432.22元</div> |
|||
</div> |
|||
<div class="mortgage_bom_item_cont_item"> |
|||
<div class="mortgage_bom_item_cont_item_left">门店</div> |
|||
<div class="mortgage_bom_item_cont_item_right">12123432.22元</div> |
|||
</div> |
|||
<div class="ditus"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import barlineEachartsVue from "../echarts/barlineEacharts.vue"; |
|||
import pieLineEachartsVue from "../echarts/pieLineEacharts.vue"; |
|||
export default { |
|||
components: { barlineEachartsVue, pieLineEachartsVue }, |
|||
data() { |
|||
return { |
|||
options: [ |
|||
{ |
|||
value: "选项1", |
|||
label: "2023-11-14", |
|||
}, |
|||
{ |
|||
value: "选项2", |
|||
label: "2023-11-14", |
|||
}, |
|||
{ |
|||
value: "选项3", |
|||
label: "2023-11-14", |
|||
}, |
|||
{ |
|||
value: "选项4", |
|||
label: "2023-11-14", |
|||
}, |
|||
{ |
|||
value: "选项5", |
|||
label: "2023-11-14", |
|||
}, |
|||
], |
|||
times: "", |
|||
warehouse: [ |
|||
{ |
|||
value: "选项1", |
|||
label: "常温仓", |
|||
}, |
|||
{ |
|||
value: "选项2", |
|||
label: "供应链仓", |
|||
}, |
|||
], |
|||
wareValue: "", |
|||
day: [ |
|||
{ |
|||
value: "选项1", |
|||
label: "15日", |
|||
}, |
|||
{ |
|||
value: "选项2", |
|||
label: "7日", |
|||
}, |
|||
], |
|||
dayValue: "", |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.mortgage { |
|||
width: 100%; |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
padding: 20px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
position: relative; |
|||
.mortgage_tit { |
|||
line-height: 50px; |
|||
font-size: 24px; |
|||
font-weight: bold; |
|||
color: #000; |
|||
} |
|||
.mortgage_top { |
|||
width: 100%; |
|||
height: calc((100% - 25px) / 2); |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 20px; |
|||
.mortgage_top_item { |
|||
height: 100%; |
|||
position: relative; |
|||
&:nth-of-type(1) { |
|||
width: 26%; |
|||
::v-deep .el-select { |
|||
width: 150px; |
|||
.el-input { |
|||
.el-input__inner { |
|||
background: transparent; |
|||
border: transparent; |
|||
} |
|||
} |
|||
} |
|||
.mortgage_top_item_tit_right { |
|||
flex: 1; |
|||
position: relative; |
|||
justify-content: right; |
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
bottom: 5px; |
|||
border-bottom: solid 4px #dadada; |
|||
} |
|||
} |
|||
} |
|||
&:nth-of-type(2) { |
|||
width: 73%; |
|||
box-sizing: border-box; |
|||
padding-right: 50px; |
|||
.mortgage_top_item_tit { |
|||
.mortgage_top_item_tit_left { |
|||
width: auto; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
::v-deep .el-select { |
|||
width: 150px; |
|||
.el-input { |
|||
.el-input__inner { |
|||
background: transparent; |
|||
border: transparent; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.mortgage_top_item_tit_right { |
|||
flex: 1; |
|||
position: relative; |
|||
justify-content: right; |
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
bottom: 5px; |
|||
border-bottom: solid 4px #dadada; |
|||
} |
|||
} |
|||
.mortgage_top_item_tit { |
|||
height: 40px; |
|||
display: flex; |
|||
position: relative; |
|||
justify-content: space-between; |
|||
.mortgage_top_item_tit_left { |
|||
width: auto; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-right: 10px; |
|||
font-size: 20px; |
|||
span { |
|||
margin-right: 10px; |
|||
} |
|||
::v-deep .svg-icon { |
|||
cursor: pointer; |
|||
width: 24px !important; |
|||
height: 24px !important; |
|||
} |
|||
} |
|||
.mortgage_top_item_tit_right { |
|||
width: 50%; |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: right; |
|||
align-items: center; |
|||
span { |
|||
margin-right: 20px; |
|||
} |
|||
} |
|||
} |
|||
.mortgage_top_item_coner { |
|||
width: 100%; |
|||
height: calc(100% - 40px); |
|||
position: relative; |
|||
.mortgage_top_item_coner_eat { |
|||
width: 100%; |
|||
height: 90%; |
|||
} |
|||
.mortgage_top_item_coner_con { |
|||
width: 100%; |
|||
height: 10%; |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
padding-left: 30px; |
|||
justify-content: space-between; |
|||
span { |
|||
color: #49a6e2; |
|||
font-weight: bold; |
|||
font-size: 18px; |
|||
} |
|||
} |
|||
} |
|||
.mortgage_top_item_top { |
|||
width: 100%; |
|||
height: 85%; |
|||
position: relative; |
|||
img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
.mortgage_top_item_cons { |
|||
width: 100%; |
|||
height: calc(100% - 50px); |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.mortgage_top_item_cons_left { |
|||
width: 58%; |
|||
height: 100%; |
|||
position: relative; |
|||
} |
|||
.mortgage_top_item_cons_right { |
|||
width: 40%; |
|||
height: 100%; |
|||
position: relative; |
|||
.mortgage_top_item_cons_right_top { |
|||
height: 50%; |
|||
width: 100%; |
|||
margin-bottom: 10px; |
|||
position: relative; |
|||
.mortgage_top_item_cons_right_top_video { |
|||
width: 100%; |
|||
height: 85%; |
|||
background: #f00; |
|||
position: relative; |
|||
} |
|||
.mortgage_top_item_cons_right_top_foor { |
|||
width: 100%; |
|||
height: 15%; |
|||
display: flex; |
|||
position: relative; |
|||
.invie { |
|||
width: auto; |
|||
height: 100%; |
|||
color: #999; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.huishie { |
|||
flex: 1; |
|||
height: 100%; |
|||
display: flex; |
|||
color: #999; |
|||
align-items: center; |
|||
justify-content: right; |
|||
span { |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.mortgage_top_item_cons_right_bom { |
|||
height: calc(50% - 10px); |
|||
width: 100%; |
|||
position: relative; |
|||
.titele { |
|||
width: 100%; |
|||
height: 40px; |
|||
display: flex; |
|||
align-items: center; |
|||
.titele_left { |
|||
width: auto; |
|||
height: 100%; |
|||
line-height: 40px; |
|||
margin-right: 5px; |
|||
} |
|||
.titele_right { |
|||
flex: 1; |
|||
position: relative; |
|||
height: 100%; |
|||
&::after { |
|||
content: ""; |
|||
position: absolute; |
|||
bottom: 13px; |
|||
left: 0px; |
|||
width: 100%; |
|||
height: 100%; |
|||
border-bottom: solid 4px #dadada; |
|||
} |
|||
} |
|||
} |
|||
.containers { |
|||
width: 100%; |
|||
height: calc(100% - 40px); |
|||
position: relative; |
|||
display: flex; |
|||
background: transparent; |
|||
justify-content: center; |
|||
flex-wrap: wrap; |
|||
.container_item { |
|||
width: 100%; |
|||
height: 30px; |
|||
line-height: 30px; |
|||
color: #999; |
|||
font-size: 18px; |
|||
box-sizing: border-box; |
|||
padding-left: 20px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.mortgage_top_item_bom { |
|||
height: 15%; |
|||
width: 100%; |
|||
display: flex; |
|||
position: relative; |
|||
.mortgage_top_item_bom_left { |
|||
display: flex; |
|||
width: auto; |
|||
height: 100%; |
|||
align-items: flex-end; |
|||
.mortgage_top_item_bom_left_item { |
|||
width: 130px; |
|||
display: flex; |
|||
height: 45px; |
|||
cursor: pointer; |
|||
background: #018ad2; |
|||
color: #fff; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-right: solid 1px #dadada; |
|||
|
|||
::v-deep .svg-icon { |
|||
cursor: pointer; |
|||
width: 16px !important; |
|||
height: 16px !important; |
|||
} |
|||
&:nth-of-type(1) { |
|||
span { |
|||
width: 30px; |
|||
height: 30px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 50%; |
|||
background: #11c155; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
&:nth-of-type(2) { |
|||
span { |
|||
width: 30px; |
|||
height: 30px; |
|||
border-radius: 50%; |
|||
background: #f57f19; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
&:nth-of-type(3) { |
|||
span { |
|||
width: 30px; |
|||
height: 30px; |
|||
border-radius: 50%; |
|||
background: #5b9cf7; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.mortgage_top_item_bom_right { |
|||
flex: 1; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
justify-content: right; |
|||
.mortgage_top_item_bom_right_item { |
|||
width: 130px; |
|||
height: 45px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: #e9f7fa; |
|||
border: solid #71b9f1 1px; |
|||
|
|||
::v-deep .svg-icon { |
|||
cursor: pointer; |
|||
width: 24px !important; |
|||
height: 24px !important; |
|||
} |
|||
&:nth-of-type(1) { |
|||
color: #6082fc; |
|||
span { |
|||
background: #1d62e2; |
|||
width: 30px; |
|||
height: 30px; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin: 0px 3px; |
|||
} |
|||
p { |
|||
color: #6082fc; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
&:nth-of-type(2) { |
|||
color: #6e7173; |
|||
span { |
|||
background: #4b4b4b; |
|||
width: 30px; |
|||
height: 30px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 50%; |
|||
margin: 0px 3px; |
|||
} |
|||
p { |
|||
color: #4d4d4e; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.mortgage_bom { |
|||
width: 100%; |
|||
height: calc((100% - 45px) / 2); |
|||
display: flex; |
|||
align-items: center; |
|||
position: relative; |
|||
.mortgage_bom_item { |
|||
height: 100%; |
|||
&:nth-of-type(1) { |
|||
width: 26%; |
|||
.mortgage_bom_item_cont { |
|||
box-sizing: border-box; |
|||
padding-left: 25px; |
|||
.mortgage_bom_item_cont_item { |
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
&:nth-of-type(2) { |
|||
width: 43%; |
|||
box-sizing: border-box; |
|||
padding: 0px 30px 0px 20px; |
|||
} |
|||
&:nth-of-type(3) { |
|||
width: 28%; |
|||
.mortgage_bom_item_cont { |
|||
box-sizing: border-box; |
|||
padding-left: 25px; |
|||
.mortgage_bom_item_cont_item { |
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.mortgage_bom_item_tit { |
|||
height: 40px; |
|||
width: 100%; |
|||
position: relative; |
|||
margin-bottom: 10px; |
|||
display: flex; |
|||
.mortgage_bom_item_tit_left { |
|||
width: auto; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-right: 5px; |
|||
height: 100%; |
|||
font-size: 20px; |
|||
span { |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
.mortgage_bom_item_tit_right { |
|||
flex: 1; |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: right; |
|||
height: 100%; |
|||
|
|||
::v-deep .el-select { |
|||
width: 150px; |
|||
.el-input { |
|||
.el-input__inner { |
|||
background: transparent; |
|||
border: transparent; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.mortgage_bom_item_tit_right::before { |
|||
content: ""; |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
border-bottom: solid 4px #dadada; |
|||
bottom: 5px; |
|||
left: 0px; |
|||
} |
|||
} |
|||
.mortgage_bom_item_cont { |
|||
width: 100%; |
|||
height: calc(100% - 50px); |
|||
position: relative; |
|||
|
|||
.mortgage_bom_item_cont_item { |
|||
width: 100%; |
|||
height: 40px; |
|||
position: relative; |
|||
display: flex; |
|||
border-bottom: solid 1px #dadada; |
|||
.mortgage_bom_item_cont_item_left { |
|||
width: 50%; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
color: #333; |
|||
} |
|||
.mortgage_bom_item_cont_item_right { |
|||
width: 50%; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: right; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
.ditus { |
|||
height: 150px; |
|||
width: 100%; |
|||
background: #f00; |
|||
} |
|||
} |
|||
} |
|||
::v-deep .svg-icon { |
|||
cursor: pointer; |
|||
width: 30px !important; |
|||
height: 30px !important; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue