-
![]()
+
![]()
{{ item.name }}
@@ -578,101 +540,86 @@ export default {
dynamicList: [],
superviseObject: [
{
- title: "政府网站",
+ title: "核心网评员",
num: 0,
className: "item1",
- url: require("@/assets/privateOrder/general/icon-政府网站.png"),
+ url: require("@/assets/sentimeent/核心网评员.png"),
},
{
- title: "监管单位",
+ title: "网络大V",
num: 0,
className: "item2",
- url: require("@/assets/privateOrder/general/icon-监管单位.png"),
+ url: require("@/assets/sentimeent/网络 (2).png"),
type: 1,
},
{
- title: "网站监测",
+ title: "骨干网评员",
num: 0,
className: "item3",
- url: require("@/assets/privateOrder/general/icon-网站监测.png"),
+ url: require("@/assets/sentimeent/骨干网评员.png"),
type: 2,
},
{
- title: "IDC单位",
+ title: "网络文明志愿者",
num: 0,
className: "item4",
- url: require("@/assets/privateOrder/general/icon-IDC单位.png"),
+ url: require("@/assets/sentimeent/网络文明志愿者.png"),
},
{
- title: "等保系统",
+ title: "普通网评员",
num: 0,
className: "item5",
- url: require("@/assets/privateOrder/general/icon-等保系统.png"),
+ url: require("@/assets/sentimeent/普通网评员.png"),
},
{
- title: "等保单位",
+ title: "网络民情责任人",
num: 0,
className: "item6",
- url: require("@/assets/privateOrder/general/icon-等保单位.png"),
+ url: require("@/assets/sentimeent/网络民情责任人.png"),
+ },
+ {
+ title: "网络安全官",
+ num: 0,
+ className: "item7",
+ url: require("@/assets/sentimeent/网络安全官.png"),
+ },
+ {
+ title: "网络安全支撑单位",
+ num: 0,
+ className: "item8",
+ url: require("@/assets/sentimeent/网络安全支撑单位.png"),
},
],
zoologyIconList: [
{
- name: "网站",
- num: 0,
- subList: [],
+ name: "微博",
type: 1,
- url: require("@/assets/ecosphere/icon-网站.png"),
+ url: require("@/assets/sentimeent/icon-微博.png"),
},
{
- name: "抖音",
- num: 0,
- subList: [],
+ name: "头条",
type: 2,
- url: require("@/assets/ecosphere/icon-抖音.png"),
+ url: require("@/assets/sentimeent/icon-头条.png"),
},
{
- name: "微信",
- num: 0,
- subList: [],
+ name: "抖音",
type: 3,
- url: require("@/assets/ecosphere/icon-微信.png"),
+ url: require("@/assets/sentimeent/icon-抖音.png"),
},
{
- name: "微博",
- num: 0,
- subList: [],
+ name: "微信",
type: 4,
- url: require("@/assets/ecosphere/icon微博.png"),
+ url: require("@/assets/sentimeent/icon-微信.png"),
},
-
{
- name: "今日头条",
- num: 0,
- subList: [],
+ name: "知乎",
type: 5,
- url: require("@/assets/ecosphere/icon-头条.png"),
+ url: require("@/assets/sentimeent/icon-知乎.png"),
},
{
- name: "快手",
- num: 0,
- subList: [],
+ name: "网站",
type: 6,
- url: require("@/assets/ecosphere/icon-快手.png"),
- },
- {
- name: "B站",
- num: 0,
- subList: [],
- type: 7,
- url: require("@/assets/ecosphere/icon-b站.png"),
- },
- {
- name: "小红书",
- num: 0,
- subList: [],
- type: 8,
- url: require("@/assets/ecosphere/icon-小红书.png"),
+ url: require("@/assets/sentimeent/icon-网站.png"),
},
],
zoologyIconData: [],
@@ -701,23 +648,103 @@ export default {
dongtaiTotal: 0,
isdevelopment: false,
firewallStats: [
- { number: 4, unit: '起', department: 'xxxx局' },
- { number: 4, unit: '起', department: 'xxxx局' },
- { number: 4, unit: '起', department: 'xxxx局' }
+ {
+ number: 4,
+ unit: "起",
+ department: "xxxx局",
+ url: require("@/assets/sentimeent/icon-翻墙管理.png"),
+ },
+ {
+ number: 4,
+ unit: "起",
+ department: "xxxx局",
+ url: require("@/assets/sentimeent/icon-翻墙管理.png"),
+ },
+ {
+ number: 4,
+ unit: "起",
+ department: "xxxx局",
+ url: require("@/assets/sentimeent/icon-翻墙管理.png"),
+ },
],
firewallData: [
- { time: '2025-01-08 12:30:34', department: 'xx局', address: '172.16.32.14', event: '违规外联' },
- { time: '2025-01-13 11:23:12', department: 'xx局', address: '172.16.31.23', event: '违规外联' },
- { time: '2025-01-18 15:42:54', department: 'xx局', address: '172.17.43.36', event: '违规外联' },
- { time: '2025-01-23 10:20:32', department: 'xx局', address: '172.16.24.66', event: '违规外联' },
- { time: '2025-01-25 16:43:21', department: 'xx局', address: '172.16.24.148', event: '违规外联' },
- { time: '2025-01-28 14:15:50', department: 'xx局', address: '172.16.27.195', event: '违规外联' },
- { time: '2025-02-08 14:40:26', department: 'xx局', address: '172.16.26.212', event: '违规外联' },
- { time: '2025-02-12 09:35:42', department: 'xx局', address: '172.16.33.75', event: '违规外联' },
- { time: '2025-02-15 13:22:18', department: 'xx局', address: '172.16.29.201', event: '违规外联' },
- { time: '2025-02-20 16:14:53', department: 'xx局', address: '172.16.30.89', event: '违规外联' },
- { time: '2025-02-25 11:05:37', department: 'xx局', address: '172.17.45.112', event: '违规外联' },
- { time: '2025-03-03 15:47:29', department: 'xx局', address: '172.16.28.165', event: '违规外联' }
+ {
+ time: "2025-01-08 12:30:34",
+ department: "xx局",
+ address: "172.16.32.14",
+ event: "违规外联",
+ },
+ {
+ time: "2025-01-13 11:23:12",
+ department: "xx局",
+ address: "172.16.31.23",
+ event: "违规外联",
+ },
+ {
+ time: "2025-01-18 15:42:54",
+ department: "xx局",
+ address: "172.17.43.36",
+ event: "违规外联",
+ },
+ {
+ time: "2025-01-23 10:20:32",
+ department: "xx局",
+ address: "172.16.24.66",
+ event: "违规外联",
+ },
+ {
+ time: "2025-01-25 16:43:21",
+ department: "xx局",
+ address: "172.16.24.148",
+ event: "违规外联",
+ },
+ {
+ time: "2025-01-28 14:15:50",
+ department: "xx局",
+ address: "172.16.27.195",
+ event: "违规外联",
+ },
+ {
+ time: "2025-02-08 14:40:26",
+ department: "xx局",
+ address: "172.16.26.212",
+ event: "违规外联",
+ },
+ {
+ time: "2025-02-12 09:35:42",
+ department: "xx局",
+ address: "172.16.33.75",
+ event: "违规外联",
+ },
+ {
+ time: "2025-02-15 13:22:18",
+ department: "xx局",
+ address: "172.16.29.201",
+ event: "违规外联",
+ },
+ {
+ time: "2025-02-20 16:14:53",
+ department: "xx局",
+ address: "172.16.30.89",
+ event: "违规外联",
+ },
+ {
+ time: "2025-02-25 11:05:37",
+ department: "xx局",
+ address: "172.17.45.112",
+ event: "违规外联",
+ },
+ {
+ time: "2025-03-03 15:47:29",
+ department: "xx局",
+ address: "172.16.28.165",
+ event: "违规外联",
+ },
+ ],
+ inventoryList: [
+ { id: 1, title: "重点企业名录清单", iconActive: "icon-指挥手册-act.png", url: "重点领域监管清单.png"},
+ { id: 2, title: "重点领域监管清单", iconActive: "icon-责任清单-act.png", url: "重点领域监管清单.png"},
+ { id: 3, title: "重点工作项目清单", iconActive: "icon-负面清单-act.png", url: "重点领域监管清单.png"},
],
};
},
@@ -745,7 +772,7 @@ export default {
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};
- }
+ },
},
watch: {},
created() {},
@@ -755,20 +782,13 @@ export default {
clearInterval(this.time2);
},
mounted() {
- this.zoologyIconData = this.zoologyIconList.slice(0, 4);
+ // No need to slice anymore, use the full list
+ this.zoologyIconData = this.zoologyIconList;
// this.getZoologyData() // 网络平台信息获取
this.getZoologyChange(); // 网络平台按钮切换
this.inventoryChange(); // 三份清单自动切换
this.getDynamicData(); // 工作动态信息获取
-
- // this.time2 = setInterval(() => { // 安全隐患列表
- // if (this.dynamicList.length >= this.dongtaiTotal) {
- // clearInterval(this.time2)
- // } else {
- // this.getDynamicData()
- // }
- // }, 500)
},
methods: {
// 工作动态信息获取
@@ -1479,7 +1499,7 @@ export default {
// justify-content: space-between;
align-content: space-between;
.section-superviseObject {
- width: 786px;
+ width: 50%;
height: 361px;
}
.section-process {
@@ -1644,30 +1664,47 @@ export default {
}
}
.section-inventory {
- width: 520px;
+ width: 50%;
height: 462px;
.three-inventory {
- width: 483px;
+ width: 100%;
height: 382px;
margin-top: 30px;
display: flex;
- justify-content: center;
+ justify-content: space-around;
.three-inventory-item {
width: 160px;
margin: 0 10px;
display: flex;
flex-direction: column;
align-items: center;
-
+ justify-content: center;
+ background: url("~@/assets/sentimeent/三份清单(背景图).png");
+ background-size: 100% 100%;
+ padding: 20px;
+ .inventory-title {
+ background: url("~@/assets/sentimeent/三份清单(文字背景图).png");
+ background-size: 100% 100%;
+ padding: 10px;
+ // width: 118px;
+ // height: 70px;
+ font-family: AlibabaPuHuiTiB;
+ font-size: 12px;
+ color: #b9ccdf;
+ line-height: 42px;
+ text-align: justifyLeft;
+ font-style: normal;
+ text-transform: none;
+ }
.icon-container {
position: relative;
margin-bottom: 10px;
-
+
.hex-icon {
- width: 110px;
- height: 110px;
+ width: 115px;
+ height: 140px;
}
-
+
.arrow-down {
position: absolute;
bottom: -15px;
@@ -1680,7 +1717,7 @@ export default {
border-top: 15px solid #68cff9;
}
}
-
+
div:last-child {
margin-top: 15px;
text-align: center;
@@ -1712,91 +1749,89 @@ export default {
}
}
.section-dynamic {
- width: 719px;
+ width: 48%;
height: 484px;
margin-right: 22px;
- padding-top: 40px;
-
+ // padding-top: 40px;
+
.firewall-container {
margin-top: 20px;
-
+
// 顶部卡片区域
.firewall-stats {
display: flex;
- justify-content: space-between;
+ justify-content: space-around;
margin-bottom: 20px;
-
+
.stat-card {
width: 230px;
height: 90px;
- background-color: rgba(18, 40, 69, 0.7);
- border: 1px solid #193859;
- border-radius: 4px;
+ // background-color: rgba(18, 40, 69, 0.7);
+ // border: 1px solid #193859;
+ // border-radius: 4px;
display: flex;
align-items: center;
- padding: 10px;
- box-shadow: 0 0 10px rgba(0, 110, 255, 0.2);
-
+ // padding: 10px;
+ // box-shadow: 0 0 10px rgba(0, 110, 255, 0.2);
+ padding-left: 10px;
+ justify-content: space-between;
.stat-icon {
- width: 55px;
- height: 55px;
- margin-right: 10px;
+ width: 40%;
+ height: 100px;
+ margin-right: -10px;
position: relative;
-
+
.cube-icon {
width: 100%;
height: 100%;
// background: url("~@/assets/ecosphere/icon-cube.png") no-repeat center;
background-size: contain;
}
-
- &:after {
- content: '';
- position: absolute;
- bottom: -5px;
- left: 0;
- width: 100%;
- height: 8px;
- background: rgba(33, 150, 243, 0.4);
- filter: blur(4px);
- border-radius: 50%;
- }
}
-
+
.stat-content {
+ background: url("~@/assets/sentimeent/icon-翻墙管理(头背景).png")
+ no-repeat;
+ background-size: 100% 100%;
+ width: calc(100% - 88px);
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
.stat-number {
font-size: 32px;
font-weight: bold;
- color: #09F0FF;
+ color: #09f0ff;
display: flex;
align-items: baseline;
-
+
.stat-unit {
font-size: 18px;
font-weight: normal;
margin-left: 5px;
}
}
-
+
.stat-dept {
font-size: 16px;
- color: #9BB8D5;
+ color: #9bb8d5;
margin-top: 5px;
}
}
}
}
-
+
// 表格区域
.firewall-table {
width: 100%;
border-radius: 4px;
overflow: hidden;
-
+ height: 340px;
.table-header {
display: flex;
- background-color: #1A3B6E;
-
+ background-color: #1a3b6e;
+
.header-cell {
padding: 12px;
color: #ffffff;
@@ -1806,38 +1841,38 @@ export default {
text-align: center;
}
}
-
+
.scroll-container {
height: 340px;
overflow: hidden;
}
-
+
.table-body {
width: 100%;
-
+
.table-row {
display: flex;
background-color: rgba(18, 40, 69, 0.5);
border-bottom: 1px solid #193859;
-
+
&:hover {
background-color: rgba(33, 150, 243, 0.1) !important;
}
-
+
&.odd-row {
background-color: rgba(18, 40, 69, 0.7);
}
-
+
.cell {
padding: 12px;
- color: #9BB8D5;
+ color: #9bb8d5;
font-size: 16px;
flex: 1;
text-align: center;
}
-
+
.violation-text {
- color: #09F0FF;
+ color: #09f0ff;
}
}
}
@@ -1845,114 +1880,78 @@ export default {
}
}
.section-ecosphere {
- width: 720px;
- height: 484px;
- padding-top: 40px;
+ width: 50%;
+ // height: 100%;
+ margin-top: 20px;
.title-main {
- width: 420px;
display: flex;
- .title-right {
- display: flex;
- align-items: center;
- text-indent: 30px;
- cursor: pointer;
- width: 130px;
- height: 50px;
- font-family: SourceHanSansCN-Medium, sans-serif;
- font-size: 25px;
- color: #ffffff;
- background: url("~@/assets/ecosphere/btn-其他.png") no-repeat;
- position: absolute;
- right: 180px;
- bottom: 470px;
- }
- .title-back {
- display: flex;
- align-items: center;
- text-indent: 30px;
- cursor: pointer;
- width: 130px;
- height: 50px;
- font-family: SourceHanSansCN-Medium, sans-serif;
- font-size: 25px;
- color: #ffffff;
- background: url("~@/assets/ecosphere/btn-返回.png") no-repeat;
+ align-items: center;
+ width: 100%;
+ position: relative;
+ margin-bottom: 20px;
+ font-size: 18px;
+ color: #fff;
+ padding-left: 10px;
+
+ &::before {
+ content: '';
position: absolute;
- right: 180px;
- bottom: 470px;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 4px;
+ height: 18px;
+ background-color: #00aaff;
}
}
+
.zoology-box {
- width: 700px;
- display: flex;
- flex-wrap: wrap;
- }
- .zoology-icon {
- text-align: center;
- width: 336px;
- height: 170px;
- line-height: 170px;
- margin-top: 34px;
- margin-left: 7px;
display: flex;
- align-items: center;
- box-sizing: border-box;
- border: 1px solid #132d56;
- border-radius: 3px;
- div {
- font-family: SourceHanSansCN-Regular;
- font-size: 28px;
- font-weight: normal;
- font-stretch: normal;
- letter-spacing: 1px;
- color: #ffffff;
- }
- .icon-bk {
- position: relative;
- left: 46px;
- width: 110px;
- height: 110px;
- background: url("~@/assets/ecosphere/icon-bg-默认.png") no-repeat;
- background-size: 100% 100%;
+ justify-content: space-between;
+ width: 100%;
+ height: 100%;
+ padding: 0 10px;
+
+ .zoology-icon {
+ // flex: 1;
display: flex;
+ flex-direction: column;
align-items: center;
- justify-content: center;
- }
- .zoology-icon-name {
- width: 170px;
- text-align: center;
+ box-sizing: border-box;
position: relative;
- top: 0px;
- left: 54px;
- font-family: SourceHanSansCN-Regular, sans-serif;
- font-size: 33px;
- letter-spacing: 1px;
- color: #68cff9;
- }
-
- &:hover {
cursor: pointer;
- }
- }
- .active {
- background: url("~@/assets/ecosphere/bg-选中.png") no-repeat;
- div {
- opacity: 1;
- }
- .zoology-icon-name {
- font-family: SourceHanSansCN-Regular, sans-serif;
- font-size: 33px;
- font-weight: normal;
- font-stretch: normal;
- letter-spacing: 1px;
- color: #fffffe;
- }
- .arrow {
- background: url("~@/assets/ecosphere/箭头-选中.png") no-repeat;
- }
- .icon-bk {
- background: url("~@/assets/ecosphere/icon-bg-选中.png") no-repeat;
- background-size: 100% 100%;
+ margin: 0 5px;
+
+ .icon-bk {
+ width: 100%;
+ height: 120px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ img {
+ width: 90%;
+ height: 90%;
+ // object-fit: contain;
+ }
+ }
+
+ .zoology-icon-name {
+ width: 100%;
+ height: 35px;
+ background: url("~@/assets/sentimeent/网络平台(字体背景).png") no-repeat center;
+ background-size: 100% 100%;
+ font-size: 14px;
+ color: #68cff9;
+ text-align: center;
+ line-height: 35px;
+ }
+
+ &:hover {
+ .zoology-icon-name {
+ color: #ffffff;
+ }
+ }
}
}
}
@@ -2123,14 +2122,14 @@ export default {
height: 364px;
width: 100%;
display: flex;
- flex-direction: column;
+ // flex-direction: column;
justify-content: center;
.section-bg {
position: relative;
top: 54px;
- width: 95%;
+ width: 70%;
height: 351px;
- background: url("~@/assets/privateOrder/general/circle.png") no-repeat;
+ background: url("~@/assets/sentimeent/底.png") no-repeat;
background-size: 100% 100%;
.section-object-item {
position: absolute;
@@ -2145,7 +2144,7 @@ export default {
transform: scale(1.1);
transition: 0.2s;
}
-
+
.circle-platform {
position: relative;
width: 120px;
@@ -2153,24 +2152,24 @@ export default {
display: flex;
justify-content: center;
align-items: center;
-
+
.user-icon {
position: absolute;
- width: 70px;
- height: 70px;
+ width: 49px;
+ height: 38px;
border-radius: 50%;
background-color: #0e86d4;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
-
+
i {
font-size: 40px;
color: #ffffff;
}
}
-
+
.platform-glow {
position: absolute;
width: 120px;
@@ -2183,123 +2182,148 @@ export default {
box-shadow: 0 0 20px 10px rgba(14, 134, 212, 0.3);
}
}
-
+
.item-content {
- margin-top: 15px;
+ width: 100%;
+ margin-bottom: 15px;
display: flex;
flex-direction: column;
align-items: center;
-
- .item-content-title {
- font-family: SourceHanSansCN-Regular;
- font-size: 24px;
- color: #ffffff;
- }
+ justify-content: center;
+ text-align: center;
+ width: 58px;
+ height: 12px;
+ font-family: AlibabaPuHuiTiB;
+ font-size: 14px;
+ color: #b9ccdf;
+ line-height: 11px;
+ white-space: nowrap;
}
}
.section-center {
position: absolute;
- top: 72px;
- left: 336px;
- width: 73px;
- height: 100px;
- background: url("~@/assets/privateOrder/general/icon-监管.png");
- background-size: 100%;
+ top: 15%;
+ left: 38%;
+ width: 150px;
+ height: 140px;
+ background: url("~@/assets/sentimeent/上.png");
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
}
}
}
.section-bg:hover {
.item1 {
- animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -26.75s infinite alternate,
- animY 15s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
+ animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -35.75s infinite alternate,
+ animY 15s cubic-bezier(0.36, 0, 0.64, 1) -28.5s infinite alternate,
scale 30s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
- animation-play-state: paused;
- -webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
.item2 {
animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -32.25s infinite alternate,
- animY 15s cubic-bezier(0.36, 0, 0.64, 1) -24.5s infinite alternate,
+ animY 15s cubic-bezier(0.36, 0, 0.64, 1) -24.75s infinite alternate,
scale 30s cubic-bezier(0.36, 0, 0.64, 1) -2.5s infinite alternate;
- animation-play-state: paused;
- -webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
.item3 {
- animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -7.25s infinite alternate,
- animY 15s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
+ animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -28.75s infinite alternate,
+ animY 15s cubic-bezier(0.36, 0, 0.64, 1) -21.75s infinite alternate,
scale 30s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
- animation-play-state: paused;
- -webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
.item4 {
- animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -11.75s infinite alternate,
- animY 15s cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate,
+ animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -9.5s infinite alternate,
+ animY 15s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate,
scale 30s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate;
- animation-play-state: paused;
- -webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
.item5 {
- animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -17s infinite alternate,
- animY 15s cubic-bezier(0.36, 0, 0.64, 1) -9.5s infinite alternate,
+ animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -13.25s infinite alternate,
+ animY 15s cubic-bezier(0.36, 0, 0.64, 1) -5.75s infinite alternate,
scale 30s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
- animation-play-state: paused;
- -webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
.item6 {
- animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -21.75s infinite alternate,
- animY 15s cubic-bezier(0.36, 0, 0.64, 1) -14.5s infinite alternate,
+ animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -17s infinite alternate,
+ animY 15s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate,
+ scale 30s cubic-bezier(0.36, 0, 0.64, 1) -12.5s infinite alternate;
+ }
+ .item7 {
+ animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -25s infinite alternate,
+ animY 15s cubic-bezier(0.36, 0, 0.64, 1) -17.75s infinite alternate,
+ scale 30s cubic-bezier(0.36, 0, 0.64, 1) -12.5s infinite alternate;
+ }
+ .item8 {
+ animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -21.25s infinite alternate,
+ animY 15s cubic-bezier(0.36, 0, 0.64, 1) -13.75s infinite alternate,
+ scale 30s cubic-bezier(0.36, 0, 0.64, 1) -12.5s infinite alternate;
+ }
+ .item9 {
+ animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -9.5s infinite alternate,
+ animY 15s cubic-bezier(0.36, 0, 0.64, 1) -1.5s infinite alternate,
scale 30s cubic-bezier(0.36, 0, 0.64, 1) -12.5s infinite alternate;
- animation-play-state: paused;
- -webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
}
+
.item1 {
- animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -26.75s infinite alternate,
- animY 15s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
+ animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -35.75s infinite alternate,
+ animY 15s cubic-bezier(0.36, 0, 0.64, 1) -28.5s infinite alternate,
scale 30s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
}
.item2 {
animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -32.25s infinite alternate,
- animY 15s cubic-bezier(0.36, 0, 0.64, 1) -24.5s infinite alternate,
+ animY 15s cubic-bezier(0.36, 0, 0.64, 1) -24.75s infinite alternate,
scale 30s cubic-bezier(0.36, 0, 0.64, 1) -2.5s infinite alternate;
}
.item3 {
- animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -7.25s infinite alternate,
- animY 15s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
+ animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -28.75s infinite alternate,
+ animY 15s cubic-bezier(0.36, 0, 0.64, 1) -21.75s infinite alternate,
scale 30s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
}
.item4 {
- animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -11.75s infinite alternate,
- animY 15s cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate,
+ animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -9.5s infinite alternate,
+ animY 15s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate,
scale 30s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate;
}
.item5 {
- animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -17s infinite alternate,
- animY 15s cubic-bezier(0.36, 0, 0.64, 1) -9.5s infinite alternate,
+ animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -13.25s infinite alternate,
+ animY 15s cubic-bezier(0.36, 0, 0.64, 1) -5.75s infinite alternate,
scale 30s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
}
.item6 {
- animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -21.75s infinite alternate,
- animY 15s cubic-bezier(0.36, 0, 0.64, 1) -14.5s infinite alternate,
+ animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -17s infinite alternate,
+ animY 15s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate,
+ scale 30s cubic-bezier(0.36, 0, 0.64, 1) -12.5s infinite alternate;
+}
+.item7 {
+ animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -25s infinite alternate,
+ animY 15s cubic-bezier(0.36, 0, 0.64, 1) -17.75s infinite alternate,
+ scale 30s cubic-bezier(0.36, 0, 0.64, 1) -12.5s infinite alternate;
+}
+.item8 {
+ animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -21.25s infinite alternate,
+ animY 15s cubic-bezier(0.36, 0, 0.64, 1) -13.75s infinite alternate,
+ scale 30s cubic-bezier(0.36, 0, 0.64, 1) -12.5s infinite alternate;
+}
+.item9 {
+ animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -9.5s infinite alternate,
+ animY 15s cubic-bezier(0.36, 0, 0.64, 1) -1.5s infinite alternate,
scale 30s cubic-bezier(0.36, 0, 0.64, 1) -12.5s infinite alternate;
}
@keyframes animX {
0% {
- left: -100px;
+ left: -130px;
}
100% {
- left: 600px;
+ left: 410px;
}
}
@keyframes animY {
0% {
- top: -35px;
+ top: -60px;
}
100% {
- top: 270px;
+ top: 280px;
}
}
@keyframes scale {
}
+
::v-deep .el-pagination__total {
color: #fff;
}