Skip to content

X
xxx_phase2_web
Commit d304d4af authored by 夏敏伟's avatar 夏敏伟
Browse files
Options

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

parent aea663bd
Show whitespace changes
Inline Side-by-side
Showing with 694 additions and 86 deletions
src/assets/img/ddkz/bg3.png 0 → 100644
View file @ d304d4af
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/img/ddkz/bg4.png 0 → 100644
View file @ d304d4af
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/img/ddkz/bg5.png 0 → 100644
View file @ d304d4af
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/img/login/text3.png
View replaced file @ aea663bd View file @ d304d4af
This image diff could not be displayed because it is too large. You can view the blob instead.
src/view/ddkz/ddkzzs.vue
View file @ d304d4af
<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