杂类
1. 获取当前日期和30天前日期
getData ( ) {
let nowDate = new Date ( )
let date = {
year : nowDate. getFullYear ( ) ,
month : ( nowDate. getMonth ( ) + 1 ) < 10 ? '0' + ( nowDate. getMonth ( ) + 1 ) : ( nowDate. getMonth ( ) + 1 ) ,
date : nowDate. getDate ( ) < 10 ? '0' + nowDate. getDate ( ) : nowDate. getDate ( ) ,
hours : nowDate. getHours ( ) < 10 ? '0' + nowDate. getHours ( ) : nowDate. getHours ( ) ,
minutes : nowDate. getMinutes ( ) < 10 ? '0' + nowDate. getMinutes ( ) : nowDate. getMinutes ( ) ,
seconds : nowDate. getSeconds ( ) < 10 ? '0' + nowDate. getSeconds ( ) : nowDate. getSeconds ( ) ,
}
let systemDate =
date. year + '-' + date. month + '-' + date. date + ' ' + date. hours + ':' + date. minutes + ':' + date. seconds
var beforedate = new Date ( nowDate)
beforedate. setDate ( nowDate. getDate ( ) - 30 )
let date2 = {
year : beforedate. getFullYear ( ) ,
month : ( beforedate. getMonth ( ) + 1 ) < 10 ? '0' + ( beforedate. getMonth ( ) + 1 ) : ( beforedate. getMonth ( ) + 1 ) ,
date : beforedate. getDate ( ) < 10 ? '0' + beforedate. getDate ( ) : beforedate. getDate ( ) ,
hours : beforedate. getHours ( ) < 10 ? '0' + beforedate. getHours ( ) : beforedate. getHours ( ) ,
minutes : beforedate. getMinutes ( ) < 10 ? '0' + beforedate. getMinutes ( ) : beforedate. getMinutes ( ) ,
seconds : beforedate. getSeconds ( ) < 10 ? '0' + beforedate. getSeconds ( ) : beforedate. getSeconds ( ) ,
}
let systemDateBegin = date2. year + '-' + date2. month + '-' + date2. date + ' ' + date2. hours + ':' + date2. minutes + ':' + date2. seconds
return {
beginTime : systemDateBegin,
endTime : systemDate,
}
} ,
2.将ant-ui moment时间转化成字符串’YYYY-MM-DD HH:mm:ss’格式
transformTimestamp ( timestamp ) {
let a = new Date ( timestamp) . getTime ( ) ;
const date = new Date ( a) ;
const Y = date. getFullYear ( ) + '-' ;
const M = ( date. getMonth ( ) + 1 < 10 ? '0' + ( date. getMonth ( ) + 1 ) : date. getMonth ( ) + 1 ) + '-' ;
const D = ( date. getDate ( ) < 10 ? '0' + date. getDate ( ) : date. getDate ( ) ) + ' ' ;
const h = ( date. getHours ( ) < 10 ? '0' + date. getHours ( ) : date. getHours ( ) ) + ':' ;
const m = ( date. getMinutes ( ) < 10 ? '0' + date. getMinutes ( ) : date. getMinutes ( ) ) + ':' ;
const s = ( date. getSeconds ( ) < 10 ? '0' + date. getSeconds ( ) : date. getSeconds ( ) ) ;
const dateString = Y + M + D + h + m + s;
return dateString;
} ,
3.在原数组对象中遍历数组对象处理数据
arrList. forEach ( ( item, index ) => {
item. index = index
} )
4.滚动条样式修改
.global-scroll-bar::-webkit-scrollbar {
width : 8px;
height : 5px;
}
.global-scroll-bar::-webkit-scrollbar-thumb {
background-color : rgba ( 0, 0, 0, 0.08) !important ;
border-radius : 4px;
}
.global-scroll-bar::-webkit-scrollbar-track {
box-shadow : none !important ;
}
5.行溢出…
.tree-title {
max-width : 80vw;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
}
6.渐变色背景
.curtom-arrow--left {
background : linear-gradient ( 90deg , rgb ( 15, 14, 14) , transparent) ;
}
7.纯css轮播效果
< script lang= "ts" >
export default {
name : "EnvAppearance" ,
} ;
< / script>
< script setup lang= "ts" >
import { reactive, ref } from "vue" ;
import { pgEnvAppearances } from "@/api/env" ;
import { ResultPage } from "@/types/reqAndRes" ;
import { pgEnvAppearance } from "@/types/env" ;
import { useTimer } from "@/hooks/timer/useTimer" ;
const dataList = ref< Array< pgEnvAppearance>> ( [ ] ) ;
const partyGroupsInfo = async ( ) => {
const res = await pgEnvAppearances< ResultPage< pgEnvAppearance>> ( {
pageNo : 1 ,
pageSize : 20 ,
} ) ;
dataList. value = [ ] ;
for await ( const item of res. records) {
dataList. value. push ( item) ;
}
console. log ( dataList, "村容" ) ;
} ;
useTimer ( partyGroupsInfo, 10 ) ;
partyGroupsInfo ( ) ;
< / script>
< template>
< div class = "env-appearance" >
< div class = "bg-color-black" >
< div class = "d-flex pl-2" >
< div class = "title" > 村容村貌< / div>
< / div>
< div class = "d-flex body-box scroll-box" style= "padding: 10px;margin-top:40px" >
< div
class = "data-list d-flex"
: style= "`animation-duration: ${dataList.length * 4}s;`"
>
< template v- if = "dataList.length > 0" >
< template v- for = "(item, i) in dataList" : key= "i" >
< div
v- if = "i % 2 != 1"
style= "width: 100px; height: 200px; margin: 0 20px"
>
< div class = "icon-box-min" > < / div>
< div class = "icon-box-item" >
< p class = "span-one" > { { item. name } } < / p>
< p class = "span-two" style= "color: #06C1D4;" > { { item. num } } < span style= "color:#d3d6dd;" > 个< / span> < / p>
< / div>
< / div>
< div v- else style= "width: 100px; height: 200px; margin: 0 20px" >
< div class = "icon-box-item" >
< p class = "span-one" > { { item. name } } < / p>
< p class = "span-two" style= "color: #06C1D4;" > { { item. num } } < span style= "color:#d3d6dd;" > 个< / span> < / p>
< / div>
< div class = "icon-box-min" > < / div>
< / div>
< / template>
< template v- for = "(item, i) in dataList" : key= "i + 'copy'" >
< div
v- if = "i % 2 != 1"
style= "width: 100px; height: 200px; margin: 0 20px"
>
< div class = "icon-box-min" > < / div>
< div class = "icon-box-item" >
< p class = "span-one" > { { item. name } } < / p>
< p class = "span-two" style= "color: #06C1D4;" > { { item. num } } < span style= "color:#d3d6dd;" > 个< / span> < / p>
< / div>
< / div>
< div v- else style= "width: 100px; height: 200px; margin: 0 20px" >
< div class = "icon-box-item" >
< p class = "span-one" > { { item. name } } < / p>
< p class = "span-two" style= "color: #06C1D4;" > { { item. num } } < span style= "color:#d3d6dd;" > 个< / span> < / p>
< / div>
< div class = "icon-box-min" > < / div>
< / div>
< / template>
< / template>
< / div>
< / div>
< / div>
< / div>
< / template>
< style lang= "scss" scoped>
$box- height: 360px;
$box- width: 100 % ;
. title {
width : 184px;
height : 36px;
background- image: url ( . . / . . / assets/ title- bg- min. png) ;
margin : 0 auto;
font- size: 22px;
color : #ffffff;
letter- spacing: 0 ;
text- align: center;
line- height: 36px;
font- weight: 500 ;
}
. min- title {
font- family: PingFangSC- Medium;
font- size: 18px;
letter- spacing: 0 ;
text- align: center;
font- weight: 500 ;
}
. icon- box- item {
padding- top: 30px;
width : 88px;
height : 90px;
background- image: url ( "../../assets/icon/village-bg-icon.png" ) ;
background- position: center;
text- align: center;
. span- one {
font- size: 16px;
}
. span- two {
}
}
. icon- box- min {
margin : 30px auto;
width : 30px;
height : 30px;
background- image: url ( "../../assets/icon/bg-mini01.png" ) ;
background- position: center;
text- align: center;
}
. env- appearance {
padding : 16px;
padding- top: 20px;
height : $box- height;
width : $box- width;
border- radius: 5px;
. bg- color- black {
height : $box- height - 30px;
border- radius: 10px;
}
. text {
color : #c3cbde;
}
. body- box {
border- radius: 10px;
overflow : hidden;
. dv- scr- board {
width : 520px;
height : 240px;
}
}
}
. scroll- box {
width : $box- width;
height : 200px;
overflow : hidden;
. data- list {
width : fit- content;
white- space: nowrap;
animation- name: seamless- scrolling;
animation- timing- function : linear;
animation- iteration- count: infinite;
}
}
@keyframes seamless- scrolling {
0 % {
transform : translateX ( 0px) ;
}
100 % {
transform : translateX ( - 50 % ) ;
}
}
< / style>