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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue