Commit d304d4af authored by 夏敏伟's avatar 夏敏伟

导调控制模块前端搭建完成

parent aea663bd
This image diff could not be displayed because it is too large. You can view the blob instead.
This image diff could not be displayed because it is too large. You can view the blob instead.
This image diff could not be displayed because it is too large. You can view the blob instead.
This image diff could not be displayed because it is too large. You can view the blob instead.
<template> <template>
<div class="ddkz"> <div class="ddkz">
<div class="ddkz-pass"> <div class="tool">
<img :src="tool1" alt="">
<img :src="tool2" alt="">
<img :src="tool3" alt="">
<img :src="tool4" alt="">
<img :src="tool5" alt="">
</div>
<transition name="animate__animated animate__bounce" enter-active-class="animate__bounceInLeft"
leave-active-class="animate__bounceOutLeft" mode="out-in">
<div class="ddkz-list" v-if="isList" key="1">
<div class="everyDayNews" v-for="item in newsList">
<div class="everyDayTitle" @click="showCards(false)">
<div class="circle-light"></div>&emsp;
<span v-text="item.date"></span>&emsp;
<span v-text="item.week"></span>
</div>
<div class="everyDayNew">
<div class="everyTemplate">
<div class="everyDayNewCard" v-for="item1 in item.news">
<div class="everyDayNewCardTitle" v-text="item1.title"></div>
<div class="everyDayNewCardInfo">
<span v-text="item1.newsDate"></span>&emsp;
<span v-text="item1.location"></span>&emsp;
来源:<span class="newsSource" v-text="item1.source"></span>
</div>
<div class="everyDayNewCardContent" v-text="item1.content"></div>
</div>
</div>
</div>
</div>
</div>
<div class="ddkz-pass" v-else key="2">
<img class="goBack" :src="goBack" alt="" @click="showCards(true)">
<div class="ddkz-topic"> <div class="ddkz-topic">
<div class="topic-date" v-text="topic.date"></div> <div class="topic-date" v-text="topic.date"></div>
<div class="topic-subject" v-text="topic.subject"></div> <div class="topic-subject" v-text="topic.subject"></div>
...@@ -8,32 +40,43 @@ ...@@ -8,32 +40,43 @@
<div class="topic-bg"></div> <div class="topic-bg"></div>
</div> </div>
<div class="ddkz-left"> <div class="ddkz-left">
<div :id="'newsInfo' + index" class="newsInfo" v-for="(item, index) in leftInfo"> <div :id="'newsInfoLeft' + index" class="newsInfo" v-for="(item, index) in leftInfo">
<div class="ddkz-date" v-text="item.date"></div> <div class="ddkz-date" v-text="item.date"></div>
<div class="ddkz-date" v-text="item.title"></div> <div class="ddkz-title" v-text="item.title"></div>
<div class="ddkz-date" v-text="item.text"></div> <div class="ddkz-text" v-text="item.text"></div>
</div> </div>
</div> </div>
<div class="ddkz-right"> <div class="ddkz-right">
<div class="newsInfo" v-for="(item, index) in rightInfo"> <div :id="'newsInfoRight' + index" class="newsInfo" v-for="(item, index) in rightInfo">
<div class="ddkz-date" v-text="item.date"></div> <div class="ddkz-date" v-text="item.date"></div>
<div class="ddkz-date" v-text="item.title"></div> <div class="ddkz-title" v-text="item.title"></div>
<div class="ddkz-date" v-text="item.text"></div> <div class="ddkz-text" v-text="item.text"></div>
</div> </div>
</div> </div>
</div> </div>
</transition>
</div> </div>
</template> </template>
<script> <script>
import topic1 from '../../assets/img/ddkz/2.png'; import tool1 from '../../assets/img/ddkz/tool1.png';
import topic2 from '../../assets/img/ddkz/3.png'; import tool2 from '../../assets/img/ddkz/tool2.png';
import tool3 from '../../assets/img/ddkz/tool3.png';
import tool4 from '../../assets/img/ddkz/tool4.png';
import tool5 from '../../assets/img/ddkz/tool5.png';
import goBack from '../../assets/img/xjs/4.png';
// import VanillaTilt from "vanilla-tilt";
import "animate.css";
export default { export default {
data() { data() {
return { return {
topic1: topic1, tool1: tool1,
topic2: topic2, tool2: tool2,
tool3: tool3,
tool4: tool4,
tool5: tool5,
goBack: goBack,
topic: { topic: {
date: '2023年07月23日 星期日', date: '2023年07月23日 星期日',
subject: 'xxxxxxx话题', subject: 'xxxxxxx话题',
...@@ -42,17 +85,22 @@ export default { ...@@ -42,17 +85,22 @@ export default {
leftInfo: [ leftInfo: [
{ {
date: '2023-07-21 18:13:56', date: '2023-07-21 18:13:56',
title: '日本驻华使馆被扔砖头?外交部回应', title: '日本驻华使馆被扔砖头?外交部回应1',
text: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。' text: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
}, },
{ {
date: '2023-07-21 18:13:56', date: '2023-07-21 18:13:56',
title: '日本驻华使馆被扔砖头?外交部回应', title: '日本驻华使馆被扔砖头?外交部回应2',
text: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。' text: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
}, },
{ {
date: '2023-07-21 18:13:56', date: '2023-07-21 18:13:56',
title: '日本驻华使馆被扔砖头?外交部回应', title: '日本驻华使馆被扔砖头?外交部回应3',
text: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
},
{
date: '2023-07-21 18:13:56',
title: '日本驻华使馆被扔砖头?外交部回应4',
text: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。' text: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
} }
], ],
...@@ -72,8 +120,159 @@ export default { ...@@ -72,8 +120,159 @@ export default {
title: '日本驻华使馆被扔砖头?外交部回应', title: '日本驻华使馆被扔砖头?外交部回应',
text: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。' text: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
} }
],
newsList: [
{
date: '2023年07月13日',
week: '星期四',
news: [
{
title: '日本驻华使馆被扔砖头?外交部回应1',
newsDate: '2023年07月13日',
location: '山东',
source: '澎湃新闻·澎湃号·媒体',
content: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
},
{
title: '日本驻华使馆被扔砖头?外交部回应1',
newsDate: '2023年07月13日',
location: '山东',
source: '澎湃新闻·澎湃号·媒体',
content: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
},
{
title: '日本驻华使馆被扔砖头?外交部回应1',
newsDate: '2023年07月13日',
location: '山东',
source: '澎湃新闻·澎湃号·媒体',
content: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
},
{
title: '日本驻华使馆被扔砖头?外交部回应1',
newsDate: '2023年07月13日',
location: '山东',
source: '澎湃新闻·澎湃号·媒体',
content: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
},
{
title: '日本驻华使馆被扔砖头?外交部回应1',
newsDate: '2023年07月13日',
location: '山东',
source: '澎湃新闻·澎湃号·媒体',
content: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
}
]
},
{
date: '2023年07月13日',
week: '星期四',
news: [
{
title: '日本驻华使馆被扔砖头?外交部回应1',
newsDate: '2023年07月13日',
location: '山东',
source: '澎湃新闻·澎湃号·媒体',
content: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
},
{
title: '日本驻华使馆被扔砖头?外交部回应1',
newsDate: '2023年07月13日',
location: '山东',
source: '澎湃新闻·澎湃号·媒体',
content: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
},
{
title: '日本驻华使馆被扔砖头?外交部回应1',
newsDate: '2023年07月13日',
location: '山东',
source: '澎湃新闻·澎湃号·媒体',
content: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
},
{
title: '日本驻华使馆被扔砖头?外交部回应1',
newsDate: '2023年07月13日',
location: '山东',
source: '澎湃新闻·澎湃号·媒体',
content: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
},
{
title: '日本驻华使馆被扔砖头?外交部回应1',
newsDate: '2023年07月13日',
location: '山东',
source: '澎湃新闻·澎湃号·媒体',
content: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
}
] ]
}, {
date: '2023年07月13日',
week: '星期四',
news: [
{
title: '日本驻华使馆被扔砖头?外交部回应1',
newsDate: '2023年07月13日',
location: '山东',
source: '澎湃新闻·澎湃号·媒体',
content: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
},
{
title: '日本驻华使馆被扔砖头?外交部回应1',
newsDate: '2023年07月13日',
location: '山东',
source: '澎湃新闻·澎湃号·媒体',
content: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
},
{
title: '日本驻华使馆被扔砖头?外交部回应1',
newsDate: '2023年07月13日',
location: '山东',
source: '澎湃新闻·澎湃号·媒体',
content: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
},
{
title: '日本驻华使馆被扔砖头?外交部回应1',
newsDate: '2023年07月13日',
location: '山东',
source: '澎湃新闻·澎湃号·媒体',
content: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
},
{
title: '日本驻华使馆被扔砖头?外交部回应1',
newsDate: '2023年07月13日',
location: '山东',
source: '澎湃新闻·澎湃号·媒体',
content: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
} }
]
},
],
isList: true
}
},
methods: {
showCards(value) {
this.isList = value;
}
},
mounted() {
// let index = 0;
// setInterval(() => {
// index++;
// this.leftInfo.shift();
// // debugger
// // document.getElementById('newsInfo2').classList = ['newsInfo',index];
// // if()
// document.getElementById('newsInfo2').style.cssText = 'position:absolute;top: 80px;right: 220px;z-index: 9999;transition-duration:15s;scale:0.8;';
// document.getElementById('newsInfo2').id = 'newsInfo1';
// document.getElementById('newsInfo1').style.cssText = 'position:absolute;top: 0px;right: 80px;z-index: 9998;transition-duration:15s;scale:0.6;';
// document.getElementById('newsInfo1').id = 'newsInfo0';
// document.getElementById('newsInfo0').style.cssText = 'position:absolute;top: 160px;right: 456px;z-index: 10000;transition-duration:15s;scale:1;';
// document.getElementById('newsInfo0').id = 'newsInfo2';
// this.leftInfo.push({
// date: '2023-07-21 18:13:56',
// title: '日本驻华使馆被扔砖头?外交部回应' + (index + 3),
// text: '法新社记者提问,日本外相今天表示有人向日本的驻华大使馆投掷砖头,他对此表示非常遗憾和担忧,并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事?汪文斌表示,中方已就日方所谓关切作出回应,表明严正立场,并就中国驻日本使领馆遭受滋扰提出严正交涉。'
// });
// }, 2000)
} }
} }
</script> </script>
...@@ -87,12 +286,31 @@ export default { ...@@ -87,12 +286,31 @@ export default {
background-image: url(../../assets/img/ddkz/bg1.png); background-image: url(../../assets/img/ddkz/bg1.png);
background-size: 100% 100%; background-size: 100% 100%;
.tool {
width: 100%;
height: 60px;
text-align: right;
img {
width: 50px;
height: 50px;
margin-right: 10px;
}
}
.ddkz-pass { .ddkz-pass {
width: 100%; width: 100%;
height: 93%; height: calc(93% - 50px);
background-image: url(../../assets/img/ddkz/bg2.png); background-image: url(../../assets/img/ddkz/bg2.png);
background-size: 100% 100%; background-size: 100% 100%;
.goBack {
width: 50px;
height: 50px;
position: absolute;
right: 100px;
}
.ddkz-topic { .ddkz-topic {
width: 500px; width: 500px;
height: 200px; height: 200px;
...@@ -148,26 +366,148 @@ export default { ...@@ -148,26 +366,148 @@ export default {
position: absolute; position: absolute;
background-image: url(../../assets/img/ddkz/5.png); background-image: url(../../assets/img/ddkz/5.png);
background-size: 100% 100%; background-size: 100% 100%;
.ddkz-date {
margin-top: 10px;
font-weight: 800;
font-size: 14px;
color: #979797;
} }
#newsInfo0 { .ddkz-title {
margin-top: 10px;
font-size: 16px;
font-weight: 600;
color: white;
}
.ddkz-text {
margin-top: 10px;
font-size: 14px;
color: #ddd;
}
}
#newsInfoLeft0 {
position: absolute;
top: 160px;
right: 456px; right: 456px;
scale: 1;
z-index: 10000;
background-image: url(../../assets/img/ddkz/6.png);
background-size: 100% 100%;
animation: roate 20s infinite linear;
}
@keyframes roate {
0% {
position: absolute;
top: 160px; top: 160px;
z-index: 100000; right: 456px;
z-index: 10000;
scale: 1;
} }
#newsInfo1 { 100% {
right: 152px; position: absolute;
z-index: 9999; top: 0px;
scale: 0.9; right: 80px;
top: 99px; scale: 0.6;
z-index: 9998;
}
} }
#newsInfo2 { #newsInfoLeft1 {
right: 0px; position: absolute;
top: 160px;
right: 456px;
scale: 1;
z-index: 10000;
animation: roate1 20s 5s infinite linear;
}
@keyframes roate1 {
0% {
position: absolute;
top: 160px;
right: 456px;
z-index: 10000;
scale: 1;
}
100% {
position: absolute;
top: 0px;
right: 80px;
scale: 0.6;
z-index: 9998;
}
}
#newsInfoLeft2 {
position: absolute;
top: 160px;
right: 456px;
scale: 1;
z-index: 10000;
background-image: url(../../assets/img/ddkz/6.png);
background-size: 100% 100%;
animation: roate2 20s 10s infinite linear;
}
@keyframes roate2 {
0% {
position: absolute;
top: 160px;
right: 456px;
z-index: 10000;
scale: 1;
}
100% {
position: absolute;
top: 0px;
right: 80px;
scale: 0.6;
z-index: 9998; z-index: 9998;
scale: 0.8;
} }
}
#newsInfoLeft3 {
position: absolute;
top: 160px;
right: 456px;
scale: 1;
z-index: 10000;
background-image: url(../../assets/img/ddkz/6.png);
background-size: 100% 100%;
animation: roate3 20s 15s infinite linear;
}
@keyframes roate3 {
0% {
position: absolute;
top: 160px;
right: 456px;
z-index: 10000;
scale: 1;
}
100% {
position: absolute;
top: 0px;
right: 80px;
scale: 0.6;
z-index: 9998;
}
}
} }
.ddkz-right { .ddkz-right {
...@@ -185,7 +525,275 @@ export default { ...@@ -185,7 +525,275 @@ export default {
position: absolute; position: absolute;
background-image: url(../../assets/img/ddkz/4.png); background-image: url(../../assets/img/ddkz/4.png);
background-size: 100% 100%; background-size: 100% 100%;
.ddkz-date {
margin-top: 10px;
font-weight: 800;
font-size: 14px;
color: #979797;
}
.ddkz-title {
margin-top: 10px;
font-size: 16px;
font-weight: 600;
color: white;
}
.ddkz-text {
margin-top: 10px;
font-size: 14px;
color: #ddd;
}
}
// #newsInfo0 {
// left: 456px;
// top: 160px;
// z-index: 100000;
// background-image: url(../../assets/img/ddkz/4.png);
// background-size: 100% 100%;
// }
// #newsInfo1 {
// left: 152px;
// z-index: 9999;
// scale: 0.8;
// top: 99px;
// }
// #newsInfo2 {
// left: 0px;
// z-index: 9998;
// scale: 0.6;
// background-image: url(../../assets/img/ddkz/4.png);
// background-size: 100% 100%;
// }
#newsInfoRight0 {
position: absolute;
top: 160px;
left: 456px;
scale: 1;
z-index: 10000;
background-image: url(../../assets/img/ddkz/4.png);
background-size: 100% 100%;
animation: roate4 20s infinite linear;
}
@keyframes roate4 {
0% {
position: absolute;
top: 160px;
left: 456px;
z-index: 10000;
scale: 1;
}
100% {
position: absolute;
top: 0px;
left: 0px;
scale: 0.6;
z-index: 9998;
}
}
#newsInfoRight1 {
position: absolute;
top: 160px;
left: 456px;
scale: 1;
z-index: 10000;
background-image: url(../../assets/img/ddkz/4.png);
background-size: 100% 100%;
animation: roate5 20s 5s infinite linear;
}
@keyframes roate5 {
0% {
position: absolute;
top: 160px;
left: 456px;
z-index: 10000;
scale: 1;
}
100% {
position: absolute;
top: 0px;
left: 0px;
scale: 0.6;
z-index: 9998;
}
}
#newsInfoRight2 {
position: absolute;
top: 160px;
left: 456px;
scale: 1;
z-index: 10000;
background-image: url(../../assets/img/ddkz/4.png);
background-size: 100% 100%;
animation: roate6 20s 10s infinite linear;
}
@keyframes roate6 {
0% {
position: absolute;
top: 160px;
left: 456px;
z-index: 10000;
scale: 1;
}
100% {
position: absolute;
top: 0px;
left: 0px;
scale: 0.6;
z-index: 9998;
}
}
#newsInfoRight3 {
position: absolute;
top: 160px;
left: 456px;
scale: 1;
z-index: 10000;
background-image: url(../../assets/img/ddkz/4.png);
background-size: 100% 100%;
animation: roate7 20s 15s infinite linear;
} }
@keyframes roate7 {
0% {
position: absolute;
top: 160px;
left: 456px;
z-index: 10000;
scale: 1;
} }
100% {
position: absolute;
top: 0px;
left: 0px;
scale: 0.6;
z-index: 9998;
} }
}</style> }
\ No newline at end of file }
}
.ddkz-list {
width: 100%;
height: calc(93% - 50px);
padding: 50px 40px;
box-sizing: border-box;
background-image: url(../../assets/img/ddkz/bg3.png);
background-size: cover;
overflow-y: auto;
.everyDayNews {
width: 100%;
height: 230px;
margin-bottom: 20px;
padding: 6px 0px;
box-sizing: border-box;
background-image: url(../../assets/img/ddkz/bg5.png);
background-size: 100% 100%;
.everyDayTitle {
width: 100%;
height: 30px;
color: white;
font-size: 20px;
font-weight: 600;
cursor: pointer;
.circle-light {
width: 15px;
height: 15px;
float: left;
margin-top: 7.5px;
border-radius: 50%;
background: white;
box-shadow: 0px 0px 20px 6px white;
}
}
.everyDayNew {
width: 100%;
height: 160px;
padding: 0px 10px;
box-sizing: border-box;
overflow-x: auto;
overflow-y: hidden;
.everyTemplate {
width: 100%;
height: 100%;
padding-bottom: 10px;
box-sizing: border-box;
overflow-x: scroll;
overflow-y: hidden;
display: -webkit-box;
}
.everyDayNewCard {
width: calc(33% - 28px);
height: calc(100% - 20px);
float: left;
margin-top: 20px;
margin-left: 25px;
padding: 15px 15px;
box-sizing: border-box;
background-image: url(../../assets/img/ddkz/bg4.png);
background-size: 100% 100%;
.everyDayNewCardTitle {
width: 100%;
height: 24px;
font-size: 18px;
font-weight: 600;
}
.everyDayNewCardInfo {
width: 100%;
height: 20px;
margin-top: 5px;
font-size: 12px;
font-weight: 600;
color: #7b7b7bdd;
.newsSource {
color: red;
}
}
.everyDayNewCardContent {
width: 100%;
height: calc(100% - 58px);
margin-top: 5px;
font-size: 12px;
font-weight: 600;
color: #a19d9d;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/* 控制显示的行数 */
overflow: hidden;
}
}
}
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment