jiangyuying
2 years ago
21 changed files with 1457 additions and 19 deletions
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,308 @@ |
|||||
|
<template> |
||||
|
<div class="screen-custom-table" |
||||
|
@mouseenter="tableMouseEnter" |
||||
|
@mouseleave="tableMouseLeave" |
||||
|
:style="{'--pageSize': pageSize}"> |
||||
|
<ul> |
||||
|
<li class="table-header" |
||||
|
:style="{height:headerHeight}"> |
||||
|
<div class="table-td" |
||||
|
@click="sortTable(item, index)" |
||||
|
v-for="(item, index) in headerList" |
||||
|
:style="{width: Object.prototype.toString.call(item) == '[object Object]' ? item.width : '100%', |
||||
|
color: columnIndex === index ? columnHoverColor : Object.prototype.toString.call(item) == '[object Object]' ? item.color ? item.color : headerColor : headerColor, |
||||
|
fontSize: headerFontSize, |
||||
|
cursor: Object.prototype.toString.call(item) == '[object Object]' ? item.sort ? 'pointer' : 'default' : 'default'}" |
||||
|
:key="index">{{Object.prototype.toString.call(item) == '[object Object]' ? item.title : item}} |
||||
|
<svg-icon icon-class="paixu" |
||||
|
v-if="item.sort" |
||||
|
:fill="columnIndex === index ? columnHoverColor : 'rgb(42, 112, 225)'"> |
||||
|
</svg-icon> |
||||
|
</div> |
||||
|
</li> |
||||
|
<div class="loading-box" |
||||
|
v-if="dataList.length === 0 && !noData"> |
||||
|
<screen-loading>加载中, 请稍后...</screen-loading> |
||||
|
</div> |
||||
|
<li class="table-body" |
||||
|
v-else-if="dataList.length > 0"> |
||||
|
<div class="scroll-view" |
||||
|
id="scroll-view" |
||||
|
:style="{top: top, transition: transition}"> |
||||
|
<div class="table-tr" |
||||
|
:style="{background: isChangeColor ?rowColor:'', |
||||
|
'--isChangeColor': isChangeColor}" |
||||
|
v-for="(item, index) in dataList" |
||||
|
:key="index"> |
||||
|
<div class="table-td" |
||||
|
:style="{ |
||||
|
width: Object.prototype.toString.call(headerList[order]) == '[object Object]' ? headerList[order].width : '100%', |
||||
|
color:bodyTdColor,fontSize:bodyTdFontSize |
||||
|
}" |
||||
|
v-for="(td, order) in item" |
||||
|
:key="order" |
||||
|
v-html="td"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
<div v-else |
||||
|
class="no-data">暂无数据~</div> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'screen-custom-table', |
||||
|
data () { |
||||
|
return { |
||||
|
top: 0, |
||||
|
scrollTime: 0, |
||||
|
transition: 'top 1s linear', |
||||
|
timer: '', |
||||
|
sort: 'asc', |
||||
|
columnIndex: '', |
||||
|
columnHoverColor: '#29cdff' |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
headerList: { |
||||
|
type: Array, |
||||
|
required: true, |
||||
|
default: () => [] |
||||
|
}, |
||||
|
dataList: { |
||||
|
type: Array, |
||||
|
required: true, |
||||
|
default: () => [] |
||||
|
}, |
||||
|
//列表内容高度，用于滚动时计算向上滚动的高度 |
||||
|
tableHeight: { |
||||
|
type: Number, |
||||
|
default: 99 |
||||
|
}, |
||||
|
pageSize: { |
||||
|
type: Number, |
||||
|
default: 8 |
||||
|
}, |
||||
|
noData: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// 表头高度 |
||||
|
headerHeight: { |
||||
|
type: String, |
||||
|
default: '35px' |
||||
|
}, |
||||
|
// 表头字体颜色 |
||||
|
headerColor: { |
||||
|
type: String, |
||||
|
default: '#2a70e1' |
||||
|
}, |
||||
|
// 表头字体大小 |
||||
|
headerFontSize: { |
||||
|
type: String, |
||||
|
default: '#2a70e1' |
||||
|
}, |
||||
|
// 表单字体颜色 |
||||
|
bodyTdColor: { |
||||
|
type: String, |
||||
|
default: '#fff' |
||||
|
}, |
||||
|
// 表单字体大小 |
||||
|
bodyTdFontSize: { |
||||
|
type: String, |
||||
|
default: '14px' |
||||
|
}, |
||||
|
// 是否隔行换色 |
||||
|
isChangeColor: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// 隔行换色更换的颜色 |
||||
|
rowColor: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
// 是否调用动画 |
||||
|
animationShow: { |
||||
|
type: Boolean, |
||||
|
default: true // true 调用 false 不调用 |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
dataList: { |
||||
|
immediate: true, |
||||
|
handler: function (newvalue) { |
||||
|
if (newvalue.length > 0) { |
||||
|
if (!this.animationShow) return |
||||
|
this.scrollView() |
||||
|
} else { |
||||
|
clearInterval(this.timer) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
scrollView () { |
||||
|
clearInterval(this.timer) |
||||
|
this.timer = setInterval(() => { |
||||
|
|
||||
|
if (this.dataList.length % this.pageSize === 0) { |
||||
|
|
||||
|
if (this.scrollTime < this.dataList.length / this.pageSize - 1) { |
||||
|
this.transition = 'top 1s linear' |
||||
|
this.scrollTime += 1 |
||||
|
this.top = `-${this.tableHeight * this.scrollTime}%` |
||||
|
} else { |
||||
|
this.transition = 'top 1s ease-in-out' |
||||
|
this.top = '0px' |
||||
|
this.scrollTime = 0 |
||||
|
} |
||||
|
} else { |
||||
|
if ( |
||||
|
this.scrollTime < Math.floor(this.dataList.length / this.pageSize) |
||||
|
) { |
||||
|
this.transition = 'top 1s linear' |
||||
|
this.scrollTime += 1 |
||||
|
this.top = `-${this.tableHeight * this.scrollTime}%` |
||||
|
} else { |
||||
|
this.transition = 'top 1s ease-in-out' |
||||
|
this.top = '0px' |
||||
|
this.scrollTime = 0 |
||||
|
} |
||||
|
} |
||||
|
}, 5000) |
||||
|
}, |
||||
|
tableMouseEnter () { |
||||
|
clearInterval(this.timer) |
||||
|
}, |
||||
|
tableMouseLeave () { |
||||
|
this.scrollView() |
||||
|
}, |
||||
|
sortTable (item, index) { |
||||
|
clearInterval(this.timer) |
||||
|
this.top = '0px' |
||||
|
this.scrollTime = 0 |
||||
|
this.sort = this.sort === 'asc' ? 'desc' : 'asc' |
||||
|
if (Object.prototype.hasOwnProperty.call(item, 'sort') && item.sort) { |
||||
|
if (this.sort === 'asc') { |
||||
|
this.dataList.sort((a, b) => { |
||||
|
return this.splitInnerHtml(b[index]) - this.splitInnerHtml(a[index]) |
||||
|
}) |
||||
|
} else if (this.sort === 'desc') { |
||||
|
this.dataList.sort((a, b) => this.splitInnerHtml(a[index]) - this.splitInnerHtml(b[index])) |
||||
|
} |
||||
|
this.$emit('sortTable', this.dataList) |
||||
|
this.columnIndex = index |
||||
|
} |
||||
|
}, |
||||
|
splitInnerHtml (str) { |
||||
|
if (str.toString().indexOf('>') > -1 && str.toString().lastIndexOf('<') > -1 && str.toString().indexOf('>') <= str.toString().lastIndexOf('<')) { |
||||
|
return str.toString().substring(str.toString().indexOf('>') + 1, str.toString().lastIndexOf('<')) |
||||
|
} else { |
||||
|
return str |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
ul, |
||||
|
li { |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
list-style: none; |
||||
|
} |
||||
|
.screen-custom-table { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
box-sizing: border-box; |
||||
|
ul { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
.table-header { |
||||
|
height: 35px; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
color: #2a70e1; |
||||
|
font-size: 15px; |
||||
|
background-image: url("./../../assets/icon/headerBg.png"); |
||||
|
background-size: 100% 100%; |
||||
|
|
||||
|
.table-td { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
text-align: center; |
||||
|
padding: 0 5px; |
||||
|
} |
||||
|
} |
||||
|
.table-body { |
||||
|
width: 100%; |
||||
|
height: 399px; |
||||
|
// height: calc(100% - 35px); |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
.scroll-view { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: absolute; |
||||
|
left: 0px; |
||||
|
top: 0px; |
||||
|
.table-tr { |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
// height: calc(100% / var(--pageSize)); |
||||
|
height: 30px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
margin-top: 19px; |
||||
|
|
||||
|
.table-td { |
||||
|
padding: 0 5px; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
text-align: center; |
||||
|
// display: flex; |
||||
|
align-items: start; |
||||
|
justify-content: center; |
||||
|
color: #fff; |
||||
|
font-size: 14px; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
line-height: 18px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
& + .table-tr { |
||||
|
border-top: 1px solid #47556f9b; |
||||
|
} |
||||
|
// &:hover { |
||||
|
// background: rgba(255, 255, 255, 0.1); |
||||
|
// } |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.loading-box { |
||||
|
width: 100%; |
||||
|
height: calc(100% - 35px); |
||||
|
} |
||||
|
.no-data { |
||||
|
width: 100%; |
||||
|
height: calc(100% - 35px); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
color: rgba(255, 255, 255, 0.8); |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,68 @@ |
|||||
|
<template> |
||||
|
<div class="screen-loading"> |
||||
|
<svg width="50px" |
||||
|
height="50px"> |
||||
|
<circle cx="25" |
||||
|
cy="25" |
||||
|
r="20" |
||||
|
fill="transparent" |
||||
|
stroke-width="3" |
||||
|
stroke-dasharray="31.415, 31.415" |
||||
|
stroke="#29cdff" |
||||
|
stroke-linecap="round"> |
||||
|
<animateTransform attributeName="transform" |
||||
|
type="rotate" |
||||
|
values="0, 25 25;360, 25 25" |
||||
|
dur="1.5s" |
||||
|
repeatCount="indefinite" /> |
||||
|
<animate attributeName="stroke" |
||||
|
values="#02bcfe;#3be6cb;#02bcfe" |
||||
|
dur="3s" |
||||
|
repeatCount="indefinite" /> |
||||
|
</circle> |
||||
|
|
||||
|
<circle cx="25" |
||||
|
cy="25" |
||||
|
r="10" |
||||
|
fill="transparent" |
||||
|
stroke-width="3" |
||||
|
stroke-dasharray="15.7, 15.7" |
||||
|
stroke="#29cdff" |
||||
|
stroke-linecap="round"> |
||||
|
<animateTransform attributeName="transform" |
||||
|
type="rotate" |
||||
|
values="360, 25 25;0, 25 25" |
||||
|
dur="1.5s" |
||||
|
repeatCount="indefinite" /> |
||||
|
<animate attributeName="stroke" |
||||
|
values="#3be6cb;#02bcfe;#3be6cb" |
||||
|
dur="3s" |
||||
|
repeatCount="indefinite" /> |
||||
|
</circle> |
||||
|
</svg> |
||||
|
<div class="loading-tip"> |
||||
|
<slot></slot> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'DvLoading' |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.screen-loading { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
.loading-tip { |
||||
|
font-size: 14px; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,198 @@ |
|||||
|
export function loadLjhdList() { |
||||
|
let ljhdList = [ |
||||
|
{ |
||||
|
gridName: '第一网格', |
||||
|
title: '标题标题标题标题标题标题标题标题标题标题', |
||||
|
unitName: '单位', |
||||
|
member: 10, |
||||
|
data: '2023-03-22' |
||||
|
}, |
||||
|
{ |
||||
|
gridName: '第二网格第二网格第二网格第二网格第二网格第二网格', |
||||
|
title: '标题', |
||||
|
unitName: '单位', |
||||
|
member: 10, |
||||
|
data: '2023-03-22' |
||||
|
}, |
||||
|
{ |
||||
|
gridName: '第三网格', |
||||
|
title: '标题', |
||||
|
unitName: '单位单位单位单位单位单位', |
||||
|
member: 10, |
||||
|
data: '2023-03-22' |
||||
|
}, |
||||
|
{ |
||||
|
gridName: '第四网格', |
||||
|
title: '标题', |
||||
|
unitName: '单位', |
||||
|
member: 10, |
||||
|
data: '2023-03-22' |
||||
|
}, |
||||
|
{ |
||||
|
gridName: '第一网格', |
||||
|
title: '标题标题标题标题标题标题标题标题标题标题', |
||||
|
unitName: '单位', |
||||
|
member: 10, |
||||
|
data: '2023-03-22' |
||||
|
}, |
||||
|
{ |
||||
|
gridName: '第二网格第二网格第二网格第二网格第二网格第二网格', |
||||
|
title: '标题', |
||||
|
unitName: '单位', |
||||
|
member: 10, |
||||
|
data: '2023-03-22' |
||||
|
}, |
||||
|
{ |
||||
|
gridName: '第三网格', |
||||
|
title: '标题', |
||||
|
unitName: '单位单位单位单位单位单位', |
||||
|
member: 10, |
||||
|
data: '2023-03-22' |
||||
|
}, |
||||
|
{ |
||||
|
gridName: '第四网格', |
||||
|
title: '标题', |
||||
|
unitName: '单位', |
||||
|
member: 10, |
||||
|
data: '2023-03-22' |
||||
|
}, |
||||
|
{ |
||||
|
gridName: '第二页-01', |
||||
|
title: '标题标题标题标题标题标题标题标题标题标题', |
||||
|
unitName: '单位', |
||||
|
member: 10, |
||||
|
data: '2023-03-22' |
||||
|
}, |
||||
|
{ |
||||
|
gridName: '第二页-02', |
||||
|
title: '标题', |
||||
|
unitName: '单位', |
||||
|
member: 10, |
||||
|
data: '2023-03-22' |
||||
|
}, |
||||
|
{ |
||||
|
gridName: '第二页-03', |
||||
|
title: '标题', |
||||
|
unitName: '单位单位单位单位单位单位', |
||||
|
member: 10, |
||||
|
data: '2023-03-22' |
||||
|
}, |
||||
|
{ |
||||
|
gridName: '第二页-04', |
||||
|
title: '标题', |
||||
|
unitName: '单位', |
||||
|
member: 10, |
||||
|
data: '2023-03-22' |
||||
|
}, |
||||
|
{ |
||||
|
gridName: '第二页-05', |
||||
|
title: '标题标题标题标题标题标题标题标题标题标题', |
||||
|
unitName: '单位', |
||||
|
member: 10, |
||||
|
data: '2023-03-22' |
||||
|
}, |
||||
|
{ |
||||
|
gridName: '第二页-06', |
||||
|
title: '标题', |
||||
|
unitName: '单位', |
||||
|
member: 10, |
||||
|
data: '2023-03-22' |
||||
|
}, |
||||
|
{ |
||||
|
gridName: '第二页-07', |
||||
|
title: '标题', |
||||
|
unitName: '单位单位单位单位单位单位', |
||||
|
member: 10, |
||||
|
data: '2023-03-22' |
||||
|
}, |
||||
|
{ |
||||
|
gridName: '第二页-08', |
||||
|
title: '标题', |
||||
|
unitName: '单位', |
||||
|
member: 10, |
||||
|
data: '2023-03-22' |
||||
|
}, |
||||
|
{ |
||||
|
gridName: '第三页-01', |
||||
|
title: '标题', |
||||
|
unitName: '单位单位单位单位单位单位', |
||||
|
member: 10, |
||||
|
data: '2023-03-22' |
||||
|
}, |
||||
|
{ |
||||
|
gridName: '第三页-02', |
||||
|
title: '标题', |
||||
|
unitName: '单位', |
||||
|
member: 10, |
||||
|
data: '2023-03-22' |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
return ljhdList |
||||
|
} |
||||
|
|
||||
|
export function loadYtalList() { |
||||
|
let ytalList = [ |
||||
|
{ |
||||
|
detail: |
||||
|
'1-1小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的' |
||||
|
}, |
||||
|
{ |
||||
|
detail: '1-2很多烟头，看到很多吸烟人员都不往垃圾桶里投放，请尽快处理。' |
||||
|
}, |
||||
|
{ |
||||
|
detail: |
||||
|
'1-3小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的' |
||||
|
}, |
||||
|
{ |
||||
|
detail: |
||||
|
'1-4小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的' |
||||
|
}, |
||||
|
{ |
||||
|
detail: |
||||
|
'1-5小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的' |
||||
|
}, |
||||
|
{ |
||||
|
detail: |
||||
|
'1-6小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的' |
||||
|
}, |
||||
|
{ |
||||
|
detail: |
||||
|
'1-7小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的' |
||||
|
}, |
||||
|
{ |
||||
|
detail: |
||||
|
'2-1小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的' |
||||
|
}, |
||||
|
{ |
||||
|
detail: |
||||
|
'2-2小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的' |
||||
|
}, |
||||
|
{ |
||||
|
detail: |
||||
|
'2-3小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的' |
||||
|
}, |
||||
|
{ |
||||
|
detail: |
||||
|
'2-4小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的' |
||||
|
}, |
||||
|
{ |
||||
|
detail: |
||||
|
'2-5小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的' |
||||
|
}, |
||||
|
{ |
||||
|
detail: |
||||
|
'2-6小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的' |
||||
|
}, |
||||
|
{ |
||||
|
detail: |
||||
|
'2-7小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的' |
||||
|
}, |
||||
|
{ |
||||
|
detail: |
||||
|
'3-1小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的小区4号楼3单元房顶漏水很严重,目前还是没有相关人员去治理，楼下水淹的' |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
return ytalList |
||||
|
} |
||||
@ -0,0 +1,136 @@ |
|||||
|
.left3 { |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
|
||||
|
.b-ljdw { |
||||
|
height: 461px; |
||||
|
} |
||||
|
|
||||
|
//饼图(外面的容器) |
||||
|
.container { |
||||
|
position: relative; |
||||
|
// width: 100%; |
||||
|
// height: 100%; |
||||
|
|
||||
|
//饼图的大小 |
||||
|
.chartsGl { |
||||
|
position: absolute; |
||||
|
top: 59px; |
||||
|
left: 130px; |
||||
|
// margin-top: -150px; |
||||
|
// margin-left: 18%; |
||||
|
height: 370px; |
||||
|
width: 450px; |
||||
|
} |
||||
|
//饼图底座（我也想给你们底座图片 可是我不知道咋给） |
||||
|
.buttomCharts { |
||||
|
background: center top url(/src/assets/icon/chartBg.png) no-repeat; |
||||
|
background-size: cover; |
||||
|
height: 172px; |
||||
|
width: 402px; |
||||
|
// margin-top: -150px; |
||||
|
// margin-left: 18%; |
||||
|
position: absolute; |
||||
|
top: 149px; |
||||
|
left: 80px; |
||||
|
} |
||||
|
.legend { |
||||
|
position: absolute; |
||||
|
left: 110px; |
||||
|
top: 340px; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
width: 450px; |
||||
|
|
||||
|
.legend-item { |
||||
|
display: flex; |
||||
|
margin-top: 12px; |
||||
|
width: 142px; |
||||
|
|
||||
|
.item-icon { |
||||
|
width: 10px; |
||||
|
height: 10px; |
||||
|
border-radius: 2px; |
||||
|
} |
||||
|
|
||||
|
.item-name { |
||||
|
flex: 0 0 122px; |
||||
|
margin-left: 2px; |
||||
|
font-size: 14px; |
||||
|
font-family: Alibaba PuHuiTi; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
line-height: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.static { |
||||
|
position: absolute; |
||||
|
top: 33px; |
||||
|
left: 32px; |
||||
|
|
||||
|
&-num { |
||||
|
font-size: 32px; |
||||
|
font-family: Arial; |
||||
|
font-weight: bold; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
&-title { |
||||
|
font-size: 18px; |
||||
|
font-family: Alibaba PuHuiTi; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.b-ljhd { |
||||
|
height: 461px; |
||||
|
|
||||
|
.table { |
||||
|
box-sizing: border-box; |
||||
|
padding: 17px 11px; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
box-sizing: border-box; |
||||
|
.screen-custom-table { |
||||
|
::v-deep ul { |
||||
|
.table-body .scroll-view .table-tr + .table-tr { |
||||
|
border: none; |
||||
|
} |
||||
|
.table-header { |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang-SC-Bold; |
||||
|
} |
||||
|
.table-body { |
||||
|
.table-tr { |
||||
|
background-image: url('./../assets/icon/tableTdBg.png'); |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
// .table-tr:nth-child(2n) { |
||||
|
// background: rgba(11, 68, 135, 0.1); |
||||
|
// &:hover { |
||||
|
// .table-td { |
||||
|
// color: #fff !important; |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
// .table-tr:nth-child(2n + 1) { |
||||
|
// &:hover { |
||||
|
// .table-td { |
||||
|
// color: #fff !important; |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
// .table-tr { |
||||
|
// .table-td:nth-child(2) { |
||||
|
// white-space: nowrap; |
||||
|
// overflow: hidden; |
||||
|
// text-overflow: ellipsis; |
||||
|
// } |
||||
|
// } |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,116 @@ |
|||||
|
.right1 { |
||||
|
margin-left: 12px; |
||||
|
} |
||||
|
.b-qzys { |
||||
|
height: 628px; |
||||
|
|
||||
|
.main { |
||||
|
box-sizing: border-box; |
||||
|
padding: 33px 75px; |
||||
|
|
||||
|
.item { |
||||
|
margin-top: 22px; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
// align-content: center; |
||||
|
align-items: center; |
||||
|
|
||||
|
&:first-child { |
||||
|
margin-top: 0px; |
||||
|
} |
||||
|
|
||||
|
.item-icon { |
||||
|
width: 70px; |
||||
|
height: 70px; |
||||
|
} |
||||
|
|
||||
|
.item-arrow { |
||||
|
margin-left: 7px; |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
} |
||||
|
|
||||
|
.item-line { |
||||
|
margin-left: 7px; |
||||
|
flex: 0 0 63px; |
||||
|
// width: 63px; |
||||
|
height: 0px; |
||||
|
border-bottom: 1px dashed #2df3ff; |
||||
|
} |
||||
|
|
||||
|
.item-right { |
||||
|
margin-left: 7px; |
||||
|
width: 300px; |
||||
|
text-align: center; |
||||
|
|
||||
|
.item-title { |
||||
|
margin-bottom: -24px; |
||||
|
font-size: 20px; |
||||
|
font-family: Alibaba PuHuiTi; |
||||
|
font-weight: 500; |
||||
|
color: #ffffff; |
||||
|
line-height: 38px; |
||||
|
} |
||||
|
|
||||
|
.item-bg { |
||||
|
width: 300px; |
||||
|
height: 54px; |
||||
|
} |
||||
|
.item-content { |
||||
|
margin-top: -26px; |
||||
|
font-size: 18px; |
||||
|
font-family: Alibaba PuHuiTi; |
||||
|
font-weight: 400; |
||||
|
color: #aacbe2; |
||||
|
line-height: 38px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.b-ytal { |
||||
|
.ytal-list { |
||||
|
margin-top: 19px; |
||||
|
margin-left: 18px; |
||||
|
// padding: 19px 18px; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
height: 258px; |
||||
|
|
||||
|
.ytal-list-tran { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: absolute; |
||||
|
left: 0px; |
||||
|
top: 0px; |
||||
|
|
||||
|
.ytal-item { |
||||
|
margin-top: 8px; |
||||
|
|
||||
|
.ytal-item-detail { |
||||
|
width: 571px; |
||||
|
font-size: 16px; |
||||
|
font-family: Alibaba PuHuiTi; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
|
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
|
||||
|
.ytal-item-line { |
||||
|
height: 0px; |
||||
|
border-bottom: 1px dashed #609ab9; |
||||
|
margin-top: 8px; |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
|
||||
|
&:first-child { |
||||
|
margin-top: 0px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -1,32 +1,145 @@ |
|||||
<template> |
<template> |
||||
<div class="bg-content right1"> |
<div class="bg-content right1"> |
||||
<div class='b-qzys'> |
<div class='b-qzys'> |
||||
<screen-title :titleName="'群众议事'"></screen-title> |
<screen-title :titleName="'群众议事'"> </screen-title> |
||||
|
<div class="main"> |
||||
|
<div class="item" |
||||
|
v-for="(item,index) in qzysList" |
||||
|
:key="index"> |
||||
|
<img class="item-icon" |
||||
|
:src="item.src" /> |
||||
|
<img class="item-arrow" |
||||
|
src="./../../assets/icon/qzys-arrow.png" /> |
||||
|
<div class="item-line"></div> |
||||
|
<div class="item-right"> |
||||
|
<div class="item-title">{{item.title}}</div> |
||||
|
<img class="item-bg" |
||||
|
src="./../../assets/icon/qzys-bg.png" /> |
||||
|
<div class="item-content">{{item.content}}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
</div> |
</div> |
||||
<div class='b-ytal'> |
<div class='b-ytal'> |
||||
<screen-title :titleName="'议题案例'"></screen-title> |
<screen-title :titleName="'议题案例'"></screen-title> |
||||
|
<div @mouseenter="tableMouseEnter" |
||||
|
@mouseleave="tableMouseLeave" |
||||
|
class="ytal-list"> |
||||
|
<div class="ytal-list-tran" |
||||
|
:style="{top: top, transition: transition}"> |
||||
|
<div class="ytal-item" |
||||
|
v-for="(item,index) in ytalList" |
||||
|
:key="index"> |
||||
|
<div class="ytal-item-detail">{{item.detail}}</div> |
||||
|
<div class="ytal-item-line"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import { loadYtalList } from './../../data/index' |
||||
|
|
||||
export default { |
export default { |
||||
name: "screen-right1", |
name: "screen-right1", |
||||
data () { |
data () { |
||||
return { |
return { |
||||
|
qzysList: [ |
||||
|
{ |
||||
|
src: require("./../../assets/icon/qzys-1.png"), |
||||
|
title: '提出议题', |
||||
|
content: '群众议事出题目' |
||||
|
}, |
||||
|
{ |
||||
|
src: require("./../../assets/icon/qzys-2.png"), |
||||
|
title: '线上讨论', |
||||
|
content: '党群评议想办法' |
||||
|
}, |
||||
|
{ |
||||
|
src: require("./../../assets/icon/qzys-3.png"), |
||||
|
title: '形成诉求', |
||||
|
content: '综合研判成诉求' |
||||
|
}, |
||||
|
{ |
||||
|
src: require("./../../assets/icon/qzys-4.png"), |
||||
|
title: '推动实施', |
||||
|
content: '综合研判成诉求' |
||||
|
}, |
||||
|
{ |
||||
|
src: require("./../../assets/icon/qzys-5.png"), |
||||
|
title: '效果评估', |
||||
|
content: '群众来把满意评' |
||||
|
}, |
||||
|
], |
||||
|
ytalList: [], |
||||
|
|
||||
|
top: 0, |
||||
|
scrollTime: 0, |
||||
|
transition: 'top 1s linear', |
||||
|
timer: '', |
||||
|
pageSize: 7, |
||||
|
tableHeight: 104, |
||||
} |
} |
||||
|
}, |
||||
|
mounted () { |
||||
|
this.ytalList = loadYtalList() |
||||
|
}, |
||||
|
watch: { |
||||
|
ytalList: { |
||||
|
immediate: true, |
||||
|
handler: function (newvalue) { |
||||
|
if (newvalue.length > 0) { |
||||
|
|
||||
|
this.scrollView() |
||||
|
} else { |
||||
|
clearInterval(this.timer) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
tableMouseEnter () { |
||||
|
clearInterval(this.timer) |
||||
|
}, |
||||
|
tableMouseLeave () { |
||||
|
this.scrollView() |
||||
|
}, |
||||
|
scrollView () { |
||||
|
clearInterval(this.timer) |
||||
|
this.timer = setInterval(() => { |
||||
|
|
||||
|
if (this.ytalList.length % this.pageSize === 0) { |
||||
|
|
||||
|
if (this.scrollTime < this.ytalList.length / this.pageSize - 1) { |
||||
|
this.transition = 'top 1s linear' |
||||
|
this.scrollTime += 1 |
||||
|
this.top = `-${this.tableHeight * this.scrollTime}%` |
||||
|
} else { |
||||
|
this.transition = 'top 1s ease-in-out' |
||||
|
this.top = '0px' |
||||
|
this.scrollTime = 0 |
||||
|
} |
||||
|
} else { |
||||
|
if ( |
||||
|
this.scrollTime < Math.floor(this.ytalList.length / this.pageSize) |
||||
|
) { |
||||
|
this.transition = 'top 1s linear' |
||||
|
this.scrollTime += 1 |
||||
|
this.top = `-${this.tableHeight * this.scrollTime}%` |
||||
|
} else { |
||||
|
this.transition = 'top 1s ease-in-out' |
||||
|
this.top = '0px' |
||||
|
this.scrollTime = 0 |
||||
|
} |
||||
|
} |
||||
|
}, 5000) |
||||
|
}, |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
<style lang="scss" src="style/right1.scss" scoped></style> |
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.right1 { |
|
||||
margin-left: 12px; |
|
||||
} |
|
||||
.b-qzys { |
|
||||
height: 653px; |
|
||||
} |
|
||||
</style> |
</style> |
||||
Loading…
Reference in new issue