Skip to content

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

修改导调控制模块前端页面 完善新技术模块

parent d304d4af
Hide whitespace changes
Inline Side-by-side
Showing with 2149 additions and 861 deletions
src/view/ddkz/components/noticeDialog.vue 0 → 100644
View file @ 257ec75e
<template>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
<div class="notice">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="标题">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="内容">
<el-input type="textarea" v-model="form.content"></el-input>
</el-form-item>
<el-form-item label="附件">
<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-form-item>
</el-form>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
form: {
name: '',
content: '',
}
}
},
props: {
visible: Boolean
},
methods: {
handleClose() {
this.$emit('handleCancel');
}
},
mounted() {
this.dialogVisible = this.$props.visible;
}
}
</script>
\ No newline at end of file
src/view/ddkz/ddkzzs.vue
View file @ 257ec75e
<template> <template>
<div class="ddkz"> <div class="ddkz">
<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" <transition name="animate__animated animate__bounce" enter-active-class="animate__bounceInLeft"
leave-active-class="animate__bounceOutLeft" mode="out-in"> leave-active-class="animate__bounceOutLeft" mode="out-in">
<div class="ddkz-list" v-if="isList" key="1"> <div class="ddkz-all" v-if="!isInfo">
<div class="everyDayNews" v-for="item in newsList"> <div class="ddkz-selection">
<div class="everyDayTitle" @click="showCards(false)"> <el-form ref="form" :inline="true" :model="form" label-width="80px" class="demo-form-inline">
<div class="circle-light"></div>&emsp; <el-form-item>
<span v-text="item.date"></span>&emsp; <el-date-picker v-model="form.date" type="daterange" range-separator="至"
<span v-text="item.week"></span> start-placeholder="开始日期" end-placeholder="结束日期">
</div> </el-date-picker>
<div class="everyDayNew"> </el-form-item>
<div class="everyTemplate"> <el-form-item>
<div class="everyDayNewCard" v-for="item1 in item.news"> <el-input v-model="form.name" placeholder="请输入关键词" suffix-icon="el-icon-search"></el-input>
<div class="everyDayNewCardTitle" v-text="item1.title"></div> </el-form-item>
<div class="everyDayNewCardInfo"> </el-form>
<span v-text="item1.newsDate"></span>&emsp; </div>
<span v-text="item1.location"></span>&emsp; <div class="ddkz-content">
来源：<span class="newsSource" v-text="item1.source"></span> <div v-for="item in analogData" class="content-card" @click="showInfo(true)">
</div> <div class="card-title" v-text="item.title" :title="item.title"></div>
<div class="everyDayNewCardContent" v-text="item1.content"></div> <div class="card-date" v-text="item.date"></div>
<div class="card-text" v-text="item.text" :title="item.text"></div>
<div class="card-tags">
<div v-show="item.isRed">
<div class="isRed circle"></div>
</div>
<div v-show="item.isBlue">
<div class="isBlue circle"></div>
</div> </div>
<div v-show="item.isYellow">
<div class="isYellow circle"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="ddkz-pass" v-else key="2"> <div class="ddkz-info" v-else-if="isInfo">
<img class="goBack" :src="goBack" alt="" @click="showCards(true)"> <div class="ddkz-info-selection">
<div class="ddkz-topic"> <el-form ref="form" :inline="true" :model="formInfo" class="demo-form-inline">
<div class="topic-date" v-text="topic.date"></div> <el-form-item>
<div class="topic-subject" v-text="topic.subject"></div> <el-select v-model="formInfo.topic" placeholder="请选择">
<div class="topic-stage" v-text="topic.stage"></div> <el-option v-for="item in options" :key="item.value" :label="item.label"
<div class="topic-bg"></div> :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="formInfo.step" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<img class="goBack" :src="goBack" alt="" @click="showInfo(false)">
</el-form-item>
</el-form>
</div> </div>
<div class="ddkz-left"> <div class="ddkz-info-content">
<div :id="'newsInfoLeft' + index" class="newsInfo" v-for="(item, index) in leftInfo"> <div class="info-content-left">
<div class="ddkz-date" v-text="item.date"></div> <div class="everyDayNews" v-for="item in newsList">
<div class="ddkz-title" v-text="item.title"></div> <div class="everyDayTitle" @click="showCards(false)">
<div class="ddkz-text" v-text="item.text"></div> <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', 'cardType' + item1.dirction]"
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>
<div class="info-content-right">
</div> <div class="info-personInfo">
<div class="ddkz-right"> <div class="title">
<div :id="'newsInfoRight' + index" class="newsInfo" v-for="(item, index) in rightInfo"> <img :src="arrow" alt="">
<div class="ddkz-date" v-text="item.date"></div> <span>人员情况</span>
<div class="ddkz-title" v-text="item.title"></div> </div>
<div class="ddkz-text" v-text="item.text"></div> <div class="personInfo-content">
<div v-for="item in personList" class="everyPersonList">
<span v-for="item1 in item" @click="selectPerson(item1);">
<span v-text="item1.name"></span>
<span
:style="{ backgroundColor: item1.isLine ? '#30d64d' : '#686a6b' }"></span>&nbsp;
</span>
</div>
</div>
</div>
<div class="info-messageInfo">
<div class="title">
<img :src="arrow" alt="">
<span>内部通讯</span>
</div>
<div class="messageInfo-content">
<div class="chatPerson">
<span :style="{ backgroundColor: chatPerson.isLine ? '#30d64d' : '#686a6b' }"
v-show="chatPerson.isLine != undefined"></span>&nbsp;
<span v-text="chatPerson.name"></span>
</div>
<div id="chatContent" class="chatContent">
<div v-for="item in chatMessageList" class="everyMessage">
<div v-for="item1 in item.list"
:style="{ justifyContent: item.isMe ? 'flex-end' : 'flex-start' }">
<template v-if="!item.isMe">
<img :src="avatar" alt="">
<div v-text="item1" style="background-color:white"></div>
</template>
<template v-else-if="item.isMe">
<div v-text="item1" style="background-color: #85ce61;"></div>
<img :src="avatar" alt="">
</template>
</div>
</div>
</div>
<div class="chatSendMessage">
<div class="messageContent">
<el-input type="textarea" autosize placeholder="请输入内容" v-model="sendMessage">
</el-input>
</div>
<div class="sendMessageButtonList">
<el-button size="mini" type="info" @click="sendNotice">发送公告</el-button>
<el-button size="mini" type="info">邮箱</el-button>
<el-button size="mini" type="success" @click="sendMessageFn">发送</el-button>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</transition> </transition>
<noticeDialog-a v-if="visible" :visible="visible" @handleCancel="closeDialog"></noticeDialog-a>
</div> </div>
</template> </template>
<script> <script>
import tool1 from '../../assets/img/ddkz/tool1.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"; import "animate.css";
import goBack from '../../assets/img/xjs/4.png';
import arrow from '../../assets/img/ddkz/8.png';
import avatar from '../../assets/img/ddkz/headPhoto.jpg';
import NoticeDialog from '../../view/ddkz/components/noticeDialog.vue';
export default { export default {
data() { data() {
return { return {
tool1: tool1, form: {
tool2: tool2, keyWord: '',
tool3: tool3, date: ''
tool4: tool4, },
tool5: tool5, formInfo: {
goBack: goBack, topic: '',
topic: { step: ''
date: '2023年07月23日 星期日',
subject: 'xxxxxxx话题',
stage: '阶段一'
}, },
leftInfo: [ analogData: [
{ {
date: '2023-07-21 18:13:56', title: '马克龙:G20宣言不是俄方“外交胜利”',
title: '日本驻华使馆被扔砖头?外交部回应1', date: '2023-09-12 08:54:00',
text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
isRed: true,
isBlue: false,
isYellow: true
}, },
{ {
date: '2023-07-21 18:13:56', title: '马克龙:G20宣言不是俄方“外交胜利”',
title: '日本驻华使馆被扔砖头?外交部回应2', date: '2023-09-12 08:54:00',
text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
isRed: true,
isBlue: true,
isYellow: true
}, },
{ {
date: '2023-07-21 18:13:56', title: '马克龙:G20宣言不是俄方“外交胜利”',
title: '日本驻华使馆被扔砖头?外交部回应3', date: '2023-09-12 08:54:00',
text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
isRed: true,
isBlue: true,
isYellow: true
}, },
{ {
date: '2023-07-21 18:13:56', title: '马克龙:G20宣言不是俄方“外交胜利”',
title: '日本驻华使馆被扔砖头?外交部回应4', date: '2023-09-12 08:54:00',
text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
} isRed: false,
], isBlue: true,
rightInfo: [ isYellow: true
},
{ {
date: '2023-07-21 18:13:56', title: '马克龙:G20宣言不是俄方“外交胜利”',
title: '日本驻华使馆被扔砖头?外交部回应', date: '2023-09-12 08:54:00',
text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
isRed: true,
isBlue: false,
isYellow: true
}, },
{ {
date: '2023-07-21 18:13:56', title: '马克龙:G20宣言不是俄方“外交胜利”',
title: '日本驻华使馆被扔砖头?外交部回应', date: '2023-09-12 08:54:00',
text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
isRed: false,
isBlue: false,
isYellow: true
}, },
{ {
date: '2023-07-21 18:13:56', title: '马克龙:G20宣言不是俄方“外交胜利”',
title: '日本驻华使馆被扔砖头?外交部回应', date: '2023-09-12 08:54:00',
text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
} isRed: true,
isBlue: true,
isYellow: true
},
{
title: '马克龙:G20宣言不是俄方“外交胜利”',
date: '2023-09-12 08:54:00',
text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
isRed: false,
isBlue: true,
isYellow: true
},
{
title: '马克龙:G20宣言不是俄方“外交胜利”',
date: '2023-09-12 08:54:00',
text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
isRed: false,
isBlue: false,
isYellow: true
},
{
title: '马克龙:G20宣言不是俄方“外交胜利”',
date: '2023-09-12 08:54:00',
text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
isRed: false,
isBlue: false,
isYellow: true
},
{
title: '马克龙:G20宣言不是俄方“外交胜利”',
date: '2023-09-12 08:54:00',
text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
isRed: false,
isBlue: false,
isYellow: true
},
{
title: '马克龙:G20宣言不是俄方“外交胜利”',
date: '2023-09-12 08:54:00',
text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
isRed: false,
isBlue: false,
isYellow: true
},
{
title: '马克龙:G20宣言不是俄方“外交胜利”',
date: '2023-09-12 08:54:00',
text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
isRed: false,
isBlue: false,
isYellow: true
},
{
title: '马克龙:G20宣言不是俄方“外交胜利”',
date: '2023-09-12 08:54:00',
text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
isRed: false,
isBlue: false,
isYellow: true
},
{
title: '马克龙:G20宣言不是俄方“外交胜利”',
date: '2023-09-12 08:54:00',
text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
isRed: false,
isBlue: false,
isYellow: true
},
{
title: '马克龙:G20宣言不是俄方“外交胜利”',
date: '2023-09-12 08:54:00',
text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
isRed: false,
isBlue: false,
isYellow: true
},
], ],
isInfo: false,
options: [{
value: '2023081501',
label: '2023年08月15日******课题'
}, {
value: '2023081502',
label: '2023年08月15日******课题'
}, {
value: '2023081503',
label: '2023年08月15日******课题'
}, {
value: '2023081504',
label: '2023年08月15日******课题'
}, {
value: '2023081505',
label: '2023年08月15日******课题'
}],
goBack: goBack,
newsList: [ newsList: [
{ {
date: '2023年07月13日', date: '2023年07月13日',
...@@ -131,6 +321,7 @@ export default { ...@@ -131,6 +321,7 @@ export default {
newsDate: '2023年07月13日', newsDate: '2023年07月13日',
location: '山东', location: '山东',
source: '澎湃新闻·澎湃号·媒体', source: '澎湃新闻·澎湃号·媒体',
dirction: 0,
content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
}, },
{ {
...@@ -138,6 +329,7 @@ export default { ...@@ -138,6 +329,7 @@ export default {
newsDate: '2023年07月13日', newsDate: '2023年07月13日',
location: '山东', location: '山东',
source: '澎湃新闻·澎湃号·媒体', source: '澎湃新闻·澎湃号·媒体',
dirction: 1,
content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
}, },
{ {
...@@ -145,6 +337,7 @@ export default { ...@@ -145,6 +337,7 @@ export default {
newsDate: '2023年07月13日', newsDate: '2023年07月13日',
location: '山东', location: '山东',
source: '澎湃新闻·澎湃号·媒体', source: '澎湃新闻·澎湃号·媒体',
dirction: 2,
content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
}, },
{ {
...@@ -152,6 +345,7 @@ export default { ...@@ -152,6 +345,7 @@ export default {
newsDate: '2023年07月13日', newsDate: '2023年07月13日',
location: '山东', location: '山东',
source: '澎湃新闻·澎湃号·媒体', source: '澎湃新闻·澎湃号·媒体',
dirction: 0,
content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
}, },
{ {
...@@ -159,6 +353,7 @@ export default { ...@@ -159,6 +353,7 @@ export default {
newsDate: '2023年07月13日', newsDate: '2023年07月13日',
location: '山东', location: '山东',
source: '澎湃新闻·澎湃号·媒体', source: '澎湃新闻·澎湃号·媒体',
dirction: 1,
content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
} }
] ]
...@@ -172,6 +367,7 @@ export default { ...@@ -172,6 +367,7 @@ export default {
newsDate: '2023年07月13日', newsDate: '2023年07月13日',
location: '山东', location: '山东',
source: '澎湃新闻·澎湃号·媒体', source: '澎湃新闻·澎湃号·媒体',
dirction: 1,
content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
}, },
{ {
...@@ -179,6 +375,7 @@ export default { ...@@ -179,6 +375,7 @@ export default {
newsDate: '2023年07月13日', newsDate: '2023年07月13日',
location: '山东', location: '山东',
source: '澎湃新闻·澎湃号·媒体', source: '澎湃新闻·澎湃号·媒体',
dirction: 1,
content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
}, },
{ {
...@@ -186,6 +383,7 @@ export default { ...@@ -186,6 +383,7 @@ export default {
newsDate: '2023年07月13日', newsDate: '2023年07月13日',
location: '山东', location: '山东',
source: '澎湃新闻·澎湃号·媒体', source: '澎湃新闻·澎湃号·媒体',
dirction: 2,
content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
}, },
{ {
...@@ -193,6 +391,7 @@ export default { ...@@ -193,6 +391,7 @@ export default {
newsDate: '2023年07月13日', newsDate: '2023年07月13日',
location: '山东', location: '山东',
source: '澎湃新闻·澎湃号·媒体', source: '澎湃新闻·澎湃号·媒体',
dirction: 0,
content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
}, },
{ {
...@@ -200,6 +399,7 @@ export default { ...@@ -200,6 +399,7 @@ export default {
newsDate: '2023年07月13日', newsDate: '2023年07月13日',
location: '山东', location: '山东',
source: '澎湃新闻·澎湃号·媒体', source: '澎湃新闻·澎湃号·媒体',
dirction: 0,
content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
} }
] ]
...@@ -212,6 +412,7 @@ export default { ...@@ -212,6 +412,7 @@ export default {
newsDate: '2023年07月13日', newsDate: '2023年07月13日',
location: '山东', location: '山东',
source: '澎湃新闻·澎湃号·媒体', source: '澎湃新闻·澎湃号·媒体',
dirction: 2,
content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
}, },
{ {
...@@ -219,6 +420,7 @@ export default { ...@@ -219,6 +420,7 @@ export default {
newsDate: '2023年07月13日', newsDate: '2023年07月13日',
location: '山东', location: '山东',
source: '澎湃新闻·澎湃号·媒体', source: '澎湃新闻·澎湃号·媒体',
dirction: 2,
content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
}, },
{ {
...@@ -226,6 +428,7 @@ export default { ...@@ -226,6 +428,7 @@ export default {
newsDate: '2023年07月13日', newsDate: '2023年07月13日',
location: '山东', location: '山东',
source: '澎湃新闻·澎湃号·媒体', source: '澎湃新闻·澎湃号·媒体',
dirction: 2,
content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
}, },
{ {
...@@ -233,6 +436,7 @@ export default { ...@@ -233,6 +436,7 @@ export default {
newsDate: '2023年07月13日', newsDate: '2023年07月13日',
location: '山东', location: '山东',
source: '澎湃新闻·澎湃号·媒体', source: '澎湃新闻·澎湃号·媒体',
dirction: 1,
content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
}, },
{ {
...@@ -240,560 +444,649 @@ export default { ...@@ -240,560 +444,649 @@ export default {
newsDate: '2023年07月13日', newsDate: '2023年07月13日',
location: '山东', location: '山东',
source: '澎湃新闻·澎湃号·媒体', source: '澎湃新闻·澎湃号·媒体',
dirction: 0,
content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。' content: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
} }
] ]
}, },
], ],
isList: true arrow: arrow,
personList: [[
{
name: '部长 李叔',
isLine: true
},
{
name: '副部长 李文',
isLine: false
},
{
name: '助理 李叔文',
isLine: true
}
], [
{
name: '部长 李叔',
isLine: false
},
{
name: '副部长 李文',
isLine: true
},
{
name: '助理 李叔文',
isLine: true
}
], [
{
name: '部长 李叔',
isLine: true
},
{
name: '副部长 李文',
isLine: false
},
{
name: '助理 李叔文',
isLine: false
}
]],
chatPerson: {
name: '',
isLine: undefined
},
chatMessageList: [
{ id: 1, name: 'xxx', isMe: false, list: ['会议主题是xxx', '主要强调两个方面'] },
{ id: 2, name: 'summer', isMe: true, list: ['确定主题', '同意'] },
{ id: 1, name: 'xxx', isMe: false, list: ['会议主题是xxx', '主要强调两个方面'] },
{ id: 2, name: 'summer', isMe: true, list: ['确定主题', '同意'] },
{ id: 1, name: 'xxx', isMe: false, list: ['会议主题是xxx', '主要强调两个方面'] },
{ id: 2, name: 'summer', isMe: true, list: ['确定主题', '同意'] }
],
// messageList: ([
// { id: 1, img: headPhoto, name: '月月', content: [{ isWe: true, time: '2023/05/30 23:41', message: '吃饭了吗?' }, { isWe: false, time: '2023/05/30 23:41', message: '关你屁事?' }, { isWe: false, time: '2023/05/30 23:41', message: '关你屁ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss事?' }] },
// { id: 2, img: headPhoto, name: '月月', content: [{ isWe: true, time: '2023/05/30 23:41', message: '吃饭了吗?' }, { isWe: false, time: '2023/05/30 23:41', message: '关你屁事1?' }] },
// { id: 3, img: headPhoto, name: '月月', content: [{ isWe: true, time: '2023/05/30 23:41', message: '吃饭了吗?' }, { isWe: false, time: '2023/05/30 23:41', message: '关你屁事1?' }] },
// { id: 4, img: headPhoto, name: '月月', content: [{ isWe: true, time: '2023/05/30 23:41', message: '吃饭了吗?' }, { isWe: false, time: '2023/05/30 23:41', message: '关你屁1事?' }] },
// { id: 5, img: headPhoto, name: '月月', content: [{ isWe: true, time: '2023/05/30 23:41', message: '吃饭了吗?' }, { isWe: false, time: '2023/05/30 23:41', message: '关你屁事1?' }] },
// { id: 6, img: headPhoto, name: '月月', content: [{ isWe: true, time: '2023/05/30 23:41', message: '吃饭了吗?' }, { isWe: false, time: '2023/05/30 23:41', message: '关你屁事?' }] },
// { id: 7, img: headPhoto, name: '月月', content: [{ isWe: true, time: '2023/05/30 23:41', message: '吃饭了吗?' }, { isWe: false, time: '2023/05/30 23:41', message: '关你屁事?' }] },
// { id: 8, img: headPhoto, name: '月月', content: [{ isWe: true, time: '2023/05/30 23:41', message: '吃饭了吗?' }, { isWe: false, time: '2023/05/30 23:41', message: '关你屁事?' }] },
// { id: 9, img: headPhoto, name: '月月', content: [{ isWe: true, time: '2023/05/30 23:41', message: '吃饭了吗?' }, { isWe: false, time: '2023/05/30 23:41', message: '关你屁事?' }] },
// { id: 10, img: headPhoto, name: '月月', content: [{ isWe: true, time: '2023/05/30 23:41', message: '吃饭了吗?' }, { isWe: false, time: '2023/05/30 23:41', message: '关你屁事?' }] },
// { id: 11, img: headPhoto, name: '月月', content: [{ isWe: true, time: '2023/05/30 23:41', message: '吃饭了吗?' }, { isWe: false, time: '2023/05/30 23:41', message: '关你屁事?' }] },
// { id: 12, img: headPhoto, name: '月月', content: [{ isWe: true, time: '2023/05/30 23:41', message: '吃饭了吗?' }, { isWe: false, time: '2023/05/30 23:41', message: '关你屁事?' }] }
// ]),
avatar: avatar,
sendMessage: '',
visible: false
} }
}, },
components: {
'noticeDialog-a': NoticeDialog
},
methods: { methods: {
showCards(value) { onSearch() {
this.isList = value;
},
showInfo(value) {
this.isInfo = value;
},
selectPerson(item) {
this.chatPerson = item;
},
sendMessageFn() {
if (this.sendMessage.trim().length > 0) {
this.chatMessageList.push({ id: 1, name: 'xxx', isMe: true, list: [this.sendMessage] });
setTimeout(() => {
this.keepBottom();
this.sendMessage = '';
}, 100);
}else{
this.$message.warning('不能发送空白信息');
}
},
keepBottom() {
const divscll = document.getElementById('chatContent');
divscll.scrollTop = divscll.scrollHeight;
},
closeDialog() {
this.visible = false;
},
sendNotice() {
this.visible = true;
} }
}, },
mounted() { 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>
<style lang="scss"> <style lang="scss">
.ddkz { .ddkz {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: url(../../assets/img/ddkz/bg1.png);
background-size: 100% 100%;
.tool { .ddkz-all {
width: 100%; width: 100%;
height: 60px; height: 100%;
text-align: right;
img {
width: 50px;
height: 50px;
margin-right: 10px;
}
}
.ddkz-pass {
width: 100%;
height: calc(93% - 50px);
background-image: url(../../assets/img/ddkz/bg2.png);
background-size: 100% 100%;
.goBack {
width: 50px;
height: 50px;
position: absolute;
right: 100px;
}
.ddkz-topic { .ddkz-selection {
width: 500px; width: 100%;
height: 200px; height: 40px;
position: absolute; text-align: right;
top: calc(50% - 47px);
left: calc(50% - 244px);
background-image: url(../../assets/img/ddkz/2.png);
background-size: 100% 100%;
text-align: center;
.topic-bg {
width: 700px;
height: 200px;
position: relative;
top: -27%;
left: -19%;
background-image: url(../../assets/img/ddkz/3.png);
background-size: 100% 100%;
}
.topic-date { .el-input {
margin-top: 10px; float: left;
font-size: 12px; width: 200px;
color: #d3d7d8; margin-right: 30px;
font-weight: 600;
}
.topic-subject { .el-input__inner {
height: 50px; background: none;
line-height: 60px; color: #ffff;
font-size: 25px; border: 1px solid #3a5f94c9 !important;
font-weight: 600; }
} }
.topic-stage { .el-date-editor {
margin-top: 7px; background: none;
font-size: 14px;
font-weight: 600;
}
}
.ddkz-left { span {
width: 50%; color: white;
height: 50%; }
float: left;
position: absolute;
bottom: 0px;
.newsInfo {
width: 400px;
height: 200px;
padding: 30px 20px 20px 20px;
position: absolute;
background-image: url(../../assets/img/ddkz/5.png);
background-size: 100% 100%;
.ddkz-date {
margin-top: 10px;
font-weight: 800;
font-size: 14px;
color: #979797;
}
.ddkz-title { .el-range-input {
margin-top: 10px; color: white;
font-size: 16px; background: none;
font-weight: 600; }
color: white;
} }
.ddkz-text { .el-input__inner {
margin-top: 10px; border: 1px solid #3a5f94c9 !important;
font-size: 14px;
color: #ddd;
} }
} }
.ddkz-content {
width: 100%;
height: calc(93% - 60px);
overflow-y: auto;
.content-card {
width: calc(20% - 30px);
height: 185px;
padding: 0px 20px;
box-sizing: border-box;
float: left;
margin-top: 30px;
margin-left: 15px;
margin-right: 15px;
background-image: url(../../assets/img/ddkz/new5.png);
background-size: 100% 100%;
#newsInfoLeft0 { &:hover {
position: absolute; cursor: pointer;
top: 160px; background-image: url(../../assets/img/ddkz/new4.png);
right: 456px; background-size: 100% 100%;
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;
right: 456px;
z-index: 10000;
scale: 1;
}
100% {
position: absolute;
top: 0px;
right: 80px;
scale: 0.6;
z-index: 9998;
}
}
#newsInfoLeft1 { .card-title {
position: absolute; width: 90%;
top: 160px; height: 55px;
right: 456px; line-height: 70px;
scale: 1; font-weight: 600;
z-index: 10000; word-break: break-all; //在恰当的断字点进行换行
animation: roate1 20s 5s infinite linear; overflow: hidden; //文字超出的进行隐藏
text-overflow: ellipsis; //超出的文字用省略号表示
display: -webkit-box; //将元素设为盒子伸缩模型显示
text-overflow: ellipsis; //利用盒子模型
-webkit-box-orient: vertical; //伸缩方向设为垂直方向
-webkit-line-clamp: 1; //设定一共3行，超出的部分隐藏，并用省略号来表示
}
} .card-date {
width: 100%;
height: 30px;
line-height: 30px;
font-size: 12px;
color: #838081;
border-top: 1px solid #838081;
}
@keyframes roate1 { .card-text {
0% { width: 100%;
position: absolute; font-size: 13px;
top: 160px; color: #ddd;
right: 456px; word-break: break-all; //在恰当的断字点进行换行
z-index: 10000; overflow: hidden; //文字超出的进行隐藏
scale: 1; text-overflow: ellipsis; //超出的文字用省略号表示
} display: -webkit-box; //将元素设为盒子伸缩模型显示
text-overflow: ellipsis; //利用盒子模型
-webkit-box-orient: vertical; //伸缩方向设为垂直方向
-webkit-line-clamp: 3; //设定一共3行，超出的部分隐藏，并用省略号来表示
}
.card-tags {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
&>div {
width: 22px;
height: 22px;
border-radius: 50%;
padding: 4px;
margin: 0px 5px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
}
100% { .isRed {
position: absolute; background-color: #9a3c3c;
top: 0px; }
right: 80px;
scale: 0.6;
z-index: 9998;
}
}
#newsInfoLeft2 { .isBlue {
position: absolute; background-color: #61a9ed;
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 { .isYellow {
0% { background-color: #f4c659;
position: absolute; }
top: 160px; }
right: 456px;
z-index: 10000;
scale: 1;
}
100% { &>div:first-child {
position: absolute; background-color: #9a3c3c87;
top: 0px; }
right: 80px;
scale: 0.6;
z-index: 9998;
}
} &>div:nth-child(2) {
background-color: #61a9ed7d;
}
#newsInfoLeft3 { &>div:last-child {
position: absolute; background-color: #f4c65978;
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-info {
width: 50%; width: 100%;
height: 50%; height: 100%;
float: left;
position: absolute;
bottom: 0px;
right: 0px;
.newsInfo {
width: 400px;
height: 200px;
padding: 30px 20px 20px 20px;
position: absolute;
background-image: url(../../assets/img/ddkz/4.png);
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 { .ddkz-info-selection {
margin-top: 10px; width: 100%;
font-size: 14px; height: 40px;
color: #ddd; text-align: right;
}
}
// #newsInfo0 { .el-input {
// left: 456px; float: left;
// top: 160px; width: 200px;
// z-index: 100000; margin-right: 30px;
// 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 { .el-input__inner {
0% { background: none;
position: absolute; color: #ffff;
top: 160px; border: 1px solid #3a5f94c9 !important;
left: 456px; }
z-index: 10000;
scale: 1;
} }
100% { .goBack {
position: absolute; width: 40px;
top: 0px; height: 40px;
left: 0px; margin-right: 35px;
scale: 0.6; cursor: pointer;
z-index: 9998;
} }
} }
#newsInfoRight1 { .ddkz-info-content {
position: absolute; width: 100%;
top: 160px; height: calc(93% - 60px);
left: 456px; margin-top: 20px;
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 { .info-content-left {
0% { width: calc(100% - 420px);
position: absolute; height: 100%;
top: 160px; float: left;
left: 456px; padding-left: 35px;
z-index: 10000; box-sizing: border-box;
scale: 1; background-image: url(../../assets/img/ddkz/bg3.png);
} background-size: cover;
overflow-y: auto;
100% { .everyDayNews {
position: absolute; width: 100%;
top: 0px; height: 230px;
left: 0px; margin-bottom: 50px;
scale: 0.6; padding: 6px 0px;
z-index: 9998; box-sizing: border-box;
}
}
.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;
}
}
#newsInfoRight2 { .everyDayNew {
position: absolute; width: 100%;
top: 160px; height: 220px;
left: 456px; padding: 0px 10px;
scale: 1; box-sizing: border-box;
z-index: 10000; overflow-x: auto;
background-image: url(../../assets/img/ddkz/4.png); overflow-y: hidden;
background-size: 100% 100%;
animation: roate6 20s 10s infinite linear; .everyTemplate {
} width: 100%;
height: 100%;
padding-bottom: 10px;
box-sizing: border-box;
overflow-x: scroll;
overflow-y: hidden;
display: -webkit-box;
}
@keyframes roate6 { .everyDayNewCard {
0% { width: calc(33% - 28px);
position: absolute; height: calc(100% - 20px);
top: 160px; float: left;
left: 456px; margin-top: 20px;
z-index: 10000; margin-left: 25px;
scale: 1; padding: 15px 30px;
} box-sizing: border-box;
background-image: url(../../assets/img/ddkz/new3.png);
background-size: 100% 100%;
.everyDayNewCardTitle {
width: 100%;
height: 30px;
font-size: 18px;
font-weight: 600;
border-bottom: 1px solid #7b7b7bdd;
}
.everyDayNewCardInfo {
width: 100%;
height: 20px;
margin-top: 10px;
font-size: 12px;
font-weight: 600;
color: white;
.newsSource {
color: red;
}
}
.everyDayNewCardContent {
width: 100%;
// height: calc(100% - 58px);
margin-top: 5px;
font-size: 12px;
font-weight: 600;
color: white;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
/* 控制显示的行数 */
overflow: hidden;
}
}
100% { .cardType0 {
position: absolute; background-image: url(../../assets/img/ddkz/new3.png);
top: 0px; background-size: 100% 100%;
left: 0px; }
scale: 0.6;
z-index: 9998;
}
}
#newsInfoRight3 { .cardType1 {
position: absolute; background-image: url(../../assets/img/ddkz/new1.png);
top: 160px; background-size: 100% 100%;
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 { .cardType2 {
0% { background-image: url(../../assets/img/ddkz/new2.png);
position: absolute; background-size: 100% 100%;
top: 160px; }
left: 456px; }
z-index: 10000; }
scale: 1;
}
100% {
position: absolute;
top: 0px;
left: 0px;
scale: 0.6;
z-index: 9998;
} }
}
}
}
.info-content-right {
width: 400px;
height: 100%;
float: left;
margin-left: 20px;
border: 1px solid #445771;
border-left: 4px solid #445771;
padding: 10px 20px;
box-sizing: border-box;
.info-personInfo {
width: 100%;
height: 30%;
.ddkz-list { .title {
width: 100%; width: 100%;
height: calc(93% - 50px); height: 30px;
padding: 50px 40px; line-height: 30px;
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%;
img {
width: 20px;
height: 20px;
}
.everyDayTitle { span {
width: 100%; font-size: 16px;
height: 30px; font-weight: 500;
color: white; color: white;
font-size: 20px; vertical-align: text-bottom;
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 { .personInfo-content {
width: 100%; width: 100%;
height: 160px; height: calc(100% - 30px);
padding: 0px 10px;
box-sizing: border-box; .everyPersonList {
overflow-x: auto; width: 100%;
overflow-y: hidden; height: 35px;
line-height: 35px;
.everyTemplate { margin-top: 10px;
width: 100%; padding: 0px 10px;
height: 100%; font-size: 13px;
padding-bottom: 10px; color: #f1f1f7;
box-sizing: border-box; box-sizing: border-box;
overflow-x: scroll;
overflow-y: hidden; &:nth-child(3n) {
display: -webkit-box; background-image: url(../../assets/img/ddkz/12.png);
} background-size: 100% 100%;
}
&:nth-child(3n+1) {
background-image: url(../../assets/img/ddkz/13.png);
background-size: 100% 100%;
}
&:nth-child(3n+2) {
background-image: url(../../assets/img/ddkz/14.png);
background-size: 100% 100%;
}
&>span {
float: left;
margin-left: 10px;
&:hover {
color: green;
cursor: pointer;
}
&>span:first-child {
float: left;
}
&>span:last-child {
width: 10px;
height: 10px;
border-radius: 50%;
display: block;
float: left;
margin-top: 12.5px;
margin-left: 5px;
}
}
}
.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 { .info-messageInfo {
width: 100%; width: 100%;
height: 20px; height: 70%;
margin-top: 5px;
font-size: 12px; .title {
font-weight: 600; width: 100%;
color: #7b7b7bdd; height: 30px;
line-height: 30px;
img {
width: 20px;
height: 20px;
}
.newsSource { span {
color: red; font-size: 16px;
font-weight: 500;
color: white;
vertical-align: text-bottom;
}
} }
}
.everyDayNewCardContent { .messageInfo-content {
width: 100%; width: 100%;
height: calc(100% - 58px); height: calc(100% - 40px);
margin-top: 5px; margin-top: 10px;
font-size: 12px; padding: 0px 10px;
font-weight: 600; border: 1px solid #254751;
color: #a19d9d; box-sizing: border-box;
display: -webkit-box;
-webkit-box-orient: vertical; .chatPerson {
-webkit-line-clamp: 2; width: 100%;
/* 控制显示的行数 */ height: 40px;
overflow: hidden; line-height: 40px;
display: flex;
justify-content: center;
font-size: 13px;
border-bottom: 1px solid #37383f;
&>span:first-child {
width: 10px;
height: 10px;
border-radius: 50%;
display: block;
float: left;
margin-top: 15px;
margin-left: 5px;
}
&>span:last-child {
float: left;
margin-left: 10px;
}
}
.chatContent {
width: 100%;
height: 60%;
border-bottom: 1px solid #37383f;
padding: 10px 0px;
box-sizing: border-box;
overflow-y: auto;
.everyMessage {
width: 100%;
margin-top: 10px;
&>div {
width: 100%;
display: flex;
align-items: center;
margin-top: 10px;
font-size: 13px;
img {
width: 20px;
height: 20px;
margin: 0px 10px;
}
&>div {
padding: 5px 10px;
border-radius: 5px;
color: black;
}
}
}
}
.chatSendMessage {
width: 100%;
height: calc(40% - 42px);
position: relative;
.messageContent {
width: 100%;
height: 100%;
padding: 5px;
box-sizing: border-box;
.el-textarea__inner {
height: 100% !important;
color: white !important;
background-color: transparent !important;
border: 1px solid #37383f !important;
}
}
.sendMessageButtonList {
position: absolute;
right: 10px;
bottom: 10px;
}
}
}
} }
} }
} }
} }
}
} }
</style> </style>
\ No newline at end of file
src/view/ddkz/ddkzzsSaved.vue 0 → 100644
View file @ 257ec75e
<template>
<div class="ddkz">
<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="isList" key="2">
<img class="goBack" :src="goBack" alt="" @click="showCards(true)">
<div class="ddkz-topic">
<div class="topic-date" v-text="topic.date"></div>
<div class="topic-subject" v-text="topic.subject"></div>
<div class="topic-stage" v-text="topic.stage"></div>
<div class="topic-bg"></div>
</div>
<div class="ddkz-left">
<div :id="'newsInfoLeft' + index" class="newsInfo" v-for="(item, index) in leftInfo">
<div class="ddkz-date" v-text="item.date"></div>
<div class="ddkz-title" v-text="item.title"></div>
<div class="ddkz-text" v-text="item.text"></div>
</div>
</div>
<div class="ddkz-right">
<div :id="'newsInfoRight' + index" class="newsInfo" v-for="(item, index) in rightInfo">
<div class="ddkz-date" v-text="item.date"></div>
<div class="ddkz-title" v-text="item.title"></div>
<div class="ddkz-text" v-text="item.text"></div>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
import tool1 from '../../assets/img/ddkz/tool1.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 {
data() {
return {
tool1: tool1,
tool2: tool2,
tool3: tool3,
tool4: tool4,
tool5: tool5,
goBack: goBack,
topic: {
date: '2023年07月23日 星期日',
subject: 'xxxxxxx话题',
stage: '阶段一'
},
leftInfo: [
{
date: '2023-07-21 18:13:56',
title: '日本驻华使馆被扔砖头?外交部回应1',
text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
},
{
date: '2023-07-21 18:13:56',
title: '日本驻华使馆被扔砖头?外交部回应2',
text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
},
{
date: '2023-07-21 18:13:56',
title: '日本驻华使馆被扔砖头?外交部回应3',
text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
},
{
date: '2023-07-21 18:13:56',
title: '日本驻华使馆被扔砖头?外交部回应4',
text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
}
],
rightInfo: [
{
date: '2023-07-21 18:13:56',
title: '日本驻华使馆被扔砖头?外交部回应',
text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
},
{
date: '2023-07-21 18:13:56',
title: '日本驻华使馆被扔砖头?外交部回应',
text: '法新社记者提问，日本外相今天表示有人向日本的驻华大使馆投掷砖头，他对此表示非常遗憾和担忧，并督促中方呼吁民众在福岛核污染水排放问题上保持冷静。中方是否会向民众呼吁冷静对待此事？汪文斌表示，中方已就日方所谓关切作出回应，表明严正立场，并就中国驻日本使领馆遭受滋扰提出严正交涉。'
},
{
date: '2023-07-21 18:13:56',
title: '日本驻华使馆被扔砖头?外交部回应',
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>
<style lang="scss">
$left-x-start: 0%;
$left-y-start: 0%;
$left-x-end: 50%;
$left-y-end: 50%;
$right-x-start: 0%;
$right-y-start: 0%;
$right-x-end: 50%;
$right-y-end: 50%;
$zIndex-start: 10;
$zIndex-end: 8;
$scale-start: 1;
$scale-end: 0.8;
.ddkz {
width: 100%;
height: 100%;
background-image: url(../../assets/img/ddkz/bg1.png);
background-size: 100% 100%;
.tool {
width: 100%;
height: 60px;
text-align: right;
img {
width: 50px;
height: 50px;
margin-right: 10px;
}
}
.ddkz-pass {
width: 100%;
height: calc(93% - 60px);
position: relative;
background-image: url(../../assets/img/ddkz/bg2.png);
background-size: 100% 100%;
.goBack {
width: 50px;
height: 50px;
position: absolute;
right: 10px;
}
.ddkz-topic {
width: 500px;
height: 200px;
position: absolute;
top: calc(50% - 47px);
left: calc(50% - 244px);
background-image: url(../../assets/img/ddkz/2.png);
background-size: 100% 100%;
text-align: center;
.topic-bg {
width: 700px;
height: 200px;
position: relative;
top: -27%;
left: -19%;
background-image: url(../../assets/img/ddkz/3.png);
background-size: 100% 100%;
}
.topic-date {
margin-top: 10px;
font-size: 12px;
color: #d3d7d8;
font-weight: 600;
}
.topic-subject {
height: 50px;
line-height: 60px;
font-size: 25px;
font-weight: 600;
}
.topic-stage {
margin-top: 7px;
font-size: 14px;
font-weight: 600;
}
}
.ddkz-left {
width: 50%;
height: 50%;
position: absolute;
bottom: 0px;
.newsInfo {
width: 400px;
height: 200px;
padding: 30px 20px 20px 20px;
position: absolute;
background-image: url(../../assets/img/ddkz/5.png);
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;
}
}
#newsInfoLeft0 {
position: absolute;
bottom: $left-y-start;
left: $left-x-start;
scale: $scale-start;
z-index: $zIndex-start;
background-image: url(../../assets/img/ddkz/6.png);
background-size: 100% 100%;
animation: roate 20s infinite linear;
}
@keyframes roate {
0% {
position: absolute;
bottom: $left-y-start;
left: $left-x-start;
z-index: $zIndex-start;
scale: $scale-start;
}
100% {
position: absolute;
bottom: $left-y-end;
left: $left-x-end;
scale: $scale-end;
z-index: $zIndex-end;
}
}
#newsInfoLeft1 {
position: absolute;
bottom: $left-y-start;
left: $left-x-start;
scale: $scale-start;
z-index: $zIndex-start;
animation: roate1 20s 5s infinite linear;
}
@keyframes roate1 {
0% {
position: absolute;
bottom: $left-y-start;
left: $left-x-start;
z-index: $zIndex-start;
scale: $scale-start;
}
100% {
position: absolute;
bottom: $left-y-end;
left: $left-x-end;
scale: $scale-end;
z-index: $zIndex-end;
}
}
#newsInfoLeft2 {
position: absolute;
bottom: $left-y-start;
left: $left-x-start;
scale: $scale-start;
z-index: $zIndex-start;
background-image: url(../../assets/img/ddkz/6.png);
background-size: 100% 100%;
animation: roate2 20s 10s infinite linear;
}
@keyframes roate2 {
0% {
position: absolute;
bottom: $left-y-start;
left: $left-x-start;
z-index: $zIndex-start;
scale: $scale-start;
}
100% {
position: absolute;
bottom: $left-y-end;
left: $left-x-end;
scale: $scale-end;
z-index: $zIndex-end;
}
}
#newsInfoLeft3 {
position: absolute;
bottom: $left-y-start;
left: $left-x-start;
scale: $scale-start;
z-index: $zIndex-start;
background-image: url(../../assets/img/ddkz/6.png);
background-size: 100% 100%;
animation: roate3 20s 15s infinite linear;
}
@keyframes roate3 {
0% {
position: absolute;
bottom: $left-y-start;
left: $left-x-start;
z-index: $zIndex-start;
scale: $scale-start;
}
100% {
position: absolute;
bottom: $left-y-end;
left: $left-x-end;
scale: $scale-end;
z-index: $zIndex-end;
}
}
}
.ddkz-right {
width: 50%;
height: 50%;
position: absolute;
bottom: 0px;
right: 0px;
.newsInfo {
width: 400px;
height: 200px;
padding: 30px 20px 20px 20px;
position: absolute;
background-image: url(../../assets/img/ddkz/4.png);
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;
}
}
#newsInfoRight0 {
position: absolute;
bottom: $right-y-start;
right: $right-x-start;
scale: $scale-start;
z-index: $zIndex-start;
background-image: url(../../assets/img/ddkz/4.png);
background-size: 100% 100%;
animation: roate4 20s infinite linear;
}
@keyframes roate4 {
0% {
position: absolute;
bottom: $right-y-start;
right: $right-x-start;
z-index: $zIndex-start;
scale: $scale-start;
}
100% {
position: absolute;
bottom: $right-y-end;
right: $right-x-end;
scale: $scale-end;
z-index: $zIndex-end;
}
}
#newsInfoRight1 {
position: absolute;
bottom: $right-y-start;
right: $right-x-start;
scale: $scale-start;
z-index: $zIndex-start;
background-image: url(../../assets/img/ddkz/4.png);
background-size: 100% 100%;
animation: roate5 20s 5s infinite linear;
}
@keyframes roate5 {
0% {
position: absolute;
bottom: $right-y-start;
right: $right-x-start;
z-index: $zIndex-start;
scale: $scale-start;
}
100% {
position: absolute;
bottom: $right-y-end;
right: $right-x-end;
scale: $scale-end;
z-index: $zIndex-end;
}
}
#newsInfoRight2 {
position: absolute;
bottom: $right-y-start;
right: $right-x-start;
scale: $scale-start;
z-index: $zIndex-start;
background-image: url(../../assets/img/ddkz/4.png);
background-size: 100% 100%;
animation: roate6 20s 10s infinite linear;
}
@keyframes roate6 {
0% {
position: absolute;
bottom: $right-y-start;
right: $right-x-start;
z-index: $zIndex-start;
scale: $scale-start;
}
100% {
position: absolute;
bottom: $right-y-end;
right: $right-x-end;
scale: $scale-end;
z-index: $zIndex-end;
}
}
#newsInfoRight3 {
position: absolute;
bottom: $right-y-start;
right: $right-x-start;
scale: $scale-start;
z-index: $zIndex-start;
background-image: url(../../assets/img/ddkz/4.png);
background-size: 100% 100%;
animation: roate7 20s 15s infinite linear;
}
@keyframes roate7 {
0% {
position: absolute;
bottom: $right-y-start;
right: $right-x-start;
z-index: $zIndex-start;
scale: $scale-start;
}
100% {
position: absolute;
bottom: $right-y-end;
right: $right-x-end;
scale: $scale-end;
z-index: $zIndex-end;
}
}
}
}
.ddkz-list {
width: 100%;
height: calc(93% - 60px);
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
src/view/xjssy/xjsyf.vue
View file @ 257ec75e
<template> <template>
<div id="xjsyf"> <div id="xjsyf">
<transition <transition name="animate__animated animate__bounce" enter-active-class="animate__bounceInLeft"
name="animate__animated animate__bounce" leave-active-class="animate__bounceOutLeft" mode="out-in">
enter-active-class="animate__bounceInLeft" <div class="tab-div" v-if="!xqIsShow" key="1">
leave-active-class="animate__bounceOutLeft" <div class="left-divs">
mode="out-in" <div class="bg-divs"></div>
> </div>
<div class="tab-div" v-if="!xqIsShow" key="1"> <div class="center-divs">
<div class="left-divs"> <template v-for="(item, index) in tableData">
<div class="bg-divs"></div> <div class="cards-div animate__animated bk-xjs-animation animate__zoomIn" @click="eyes(item)">
</div> <div :class="['tilts']">
<div class="center-divs"> <div style="width: 80%; height: 72%; padding: 10%">
<template v-for="(item, index) in tableData"> <div class="top-div">
<div <!-- <img class="tx-bg" :src="item.photos" :onerror="errimg" /> -->
class="cards-div animate__animated bk-xjs-animation animate__zoomIn" <div class="animate__animated animate__infinite animate__pulse animate__slower">
@click="eyes(item)" <span>
> {{ item.title.toUpperCase() }}
<div :class="['tilts']"> </span>
<div style="width: 80%; height: 72%; padding: 10%">
<div class="top-div">
<!-- <img class="tx-bg" :src="item.photos" :onerror="errimg" /> -->
<div
class="animate__animated animate__infinite animate__pulse animate__slower"
>
<span>
{{ item.title.toUpperCase() }}
</span>
</div>
</div>
<el-divider></el-divider>
<div class="subtitle-div">
{{ item.subtitle }}
</div>
<div class="content-div">
{{ item.content }}
</div> </div>
</div> </div>
<el-divider></el-divider>
<div class="subtitle-div">
{{ item.subtitle }}
</div>
<div class="content-div">
{{ item.content }}
</div>
</div> </div>
</div> </div>
</template> </div>
</div> </template>
<div class="right-divs"> </div>
<div class="bg-divs"></div> <div class="right-divs">
</div> <div class="bg-divs"></div>
</div> </div>
<div class="div-xq" v-else="xqIsShow" key="2"> </div>
<div class="fh-div" title="返回" @click="eyes()"></div> <div class="div-xq" v-else="xqIsShow" key="2">
<div class="top-divs"> <div class="fh-div" title="返回" @click="eyes()"></div>
<span> <div class="top-divs">
{{ obj_xq.title.toUpperCase() }} <span v-text="obj_xq.title.toUpperCase()"></span>
</span> </div>
</div> <div class="subtitle-divs" v-html="obj_xq.subtitle"></div>
<div class="subtitle-divs"> <div class="content-divs" v-html="obj_xq.content"></div>
{{ obj_xq.subtitle }} <el-divider></el-divider>
</div> <div style="width: 100%; height: calc(100% - 140px)">
<el-divider></el-divider> <template v-if="obj_xq.type == 1">
<div style="width: 100%; height: calc(100% - 140px)"> <div class="titles-div">
<div class="bgs-div"></div>
<div class="bgs-span">
<span>视频</span>
</div>
</div>
<div class="content-divs" style="text-align: center;">
<video autoplay muted loop v-for="item in obj_xq.fileUrlList" :src="item"
style="width: 400px;height: 300px;"></video>
</div>
<div class="titles-div">
<div class="bgs-div"></div>
<div class="bgs-span">
<span>作用</span>
</div>
</div>
<div class="content-divs" v-html="obj_xq.role"></div>
<div class="titles-div">
<div class="bgs-div"></div>
<div class="bgs-span">
<span>过程组成</span>
</div>
</div>
<div class="content-divs" v-html="obj_xq.processComposition"></div>
<div class="titles-div">
<div class="bgs-div"></div>
<div class="bgs-span"><span>难点</span></div>
</div>
<div class="content-divs" v-html="obj_xq.difficulty"></div>
</template>
<template v-if="obj_xq.type == 2">
<div class="titles-div">
<div class="bgs-div"></div>
<div class="bgs-span">
<span>视频</span>
</div>
</div>
<div class="content-divs" style="text-align: center;">
<video autoplay muted loop v-for="item in obj_xq.fileUrlList" :src="item"
style="width: 400px;height: 300px;margin: 0px 10px;"></video>
</div>
<div class="titles-div">
<div class="bgs-div"></div>
<div class="bgs-span">
<span>发展历史</span>
</div>
</div>
<div class="content-divs" v-html="obj_xq.processComposition"></div>
<div class="titles-div">
<div class="bgs-div"></div>
<div class="bgs-span">
<span>基本特点</span>
</div>
</div>
<div class="content-divs" v-html="obj_xq.characteristic"></div>
</template>
<template v-if="obj_xq.type == 3">
<div class="titles-div">
<div class="bgs-div"></div>
<div class="bgs-span">
<span>素材</span>
</div>
</div>
<div class="content-divs" style="text-align: center;">
<el-image v-for="item in obj_xq.fileUrlList" style="width: 400px;height: 300px;margin: 0px 10px;"
:src="item" :preview-src-list="obj_xq.fileUrlList" :key="item">
</el-image>
</div>
<div class="titles-div">
<div class="bgs-div"></div>
<div class="bgs-span">
<span>简介</span>
</div>
</div>
<div class="content-divs" v-html="obj_xq.briefIntroduction"></div>
<div class="titles-div"> <div class="titles-div">
<div class="bgs-div"></div> <div class="bgs-div"></div>
<div class="bgs-span"> <div class="bgs-span">
<span>概念与定义</span> <span>特点介绍</span>
</div> </div>
</div> </div>
<div class="content-divs"> <div class="content-divs" v-html="obj_xq.features"></div>
{{ obj_xq.content }} </template>
<template v-if="obj_xq.type == 4">
<div class="titles-div">
<div class="bgs-div"></div>
<div class="bgs-span">
<span>素材</span>
</div>
</div>
<div class="content-divs" style="text-align: center;">
<el-image v-for="item in obj_xq.fileUrlList" style="width: 400px;height: 300px;margin: 0px 10px;"
:src="item" :preview-src-list="obj_xq.fileUrlList" :key="item"></el-image>
</div>
<div class="titles-div">
<div class="bgs-div"></div>
<div class="bgs-span">
<span>情感识别综述</span>
</div>
</div> </div>
</div> <div class="content-divs" v-html="obj_xq.summarize"></div>
<div style="width: 100%; text-align: center"> </template>
<el-button </div>
type="primary" <div style="position: absolute;right: 3%;bottom: 9%; text-align: right;">
style=" <el-button type="primary" style="
line-height: 4px; line-height: 4px;
border-radius: 2px; border-radius: 2px;
height: 30px; height: 30px;
background: linear-gradient( to bottom,rgb(92 204 211),rgb(102, 166, 255),rgb(92 204 211)); background: linear-gradient( to bottom,rgb(92 204 211),rgb(102, 166, 255),rgb(92 204 211));
font-weight: 900; font-weight: 900;
letter-spacing: 2; letter-spacing: 2;
" ">开始试用</el-button>
>开始试用</el-button
>
</div>
</div> </div>
</transition> </div>
</div> </transition>
</template> </div>
<script> </template>
import VanillaTilt from "vanilla-tilt"; <script>
import "animate.css"; import VanillaTilt from "vanilla-tilt";
export default { import "animate.css";
data() { export default {
return { data() {
xqIsShow: false, return {
tableData: [ xqIsShow: false,
{ tableData: [
title: "andg", {
subtitle: "测试测试测试测试测试测试测试测试测试测试测试测试", type: 1,
content: title: "命名实体识别 NER",
"文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用领域 文档翻译 0/1000 输入文字、文档、网址或拖拽图片 ", subtitle: "识别文本中具有特定意义的实体",
}, content: "命名实体识别（Named Entity Recognition，简称NER），又称作“专名识别”，是指识别文本中具有特定意义的实体，主要包括人名、地名、机构名、专有名词等。",
{ role: '命名实体识别是信息提取、问答系统、句法分析、机器翻译、面向Semantic Web的元数据标注等应用领域的重要基础工具，在自然语言处理技术走向实用化的过程中占有重要地位。一般来说，命名实体识别的任务就是识别出待处理文本中三大类（实体类、时间类和数字类）、七小类（人名、机构名、地名、时间、日期、货币和百分比）命名实体。',
title: "andg", processComposition: `通常包括两部分：<br/>（1）实体边界识别；<br/>（2） 确定实体类别（人名、地名、机构名或其他）。英语中的命名实体具有比较明显的形式标志（即实体中的每个词的第一个字母要大写），所以实体边界识别相对容易，任务的重点是确定实体的类别。和英语相比，汉语命名实体识别任务更加复杂，而且相对于实体类别标注子任务，实体边界的识别更加困难。`,
subtitle: "测试测试测试测试测试测试测试测试测试测试测试测试", difficulty: `
content: （1）汉语文本没有类似英文文本中空格之类的显式标示词的边界标示符，命名实体识别的第一步就是确定词的边界，即分词；<br/>
"文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用领域 文档翻译 0/1000 输入文字、文档、网址或拖拽图片 ", （2）汉语分词和命名实体识别互相影响；<br/>
}, （3）除了英语中定义的实体，外国人名译名和地名译名是存在于汉语中的两类特殊实体类型；<br/>
{ （4）现代汉语文本，尤其是网络汉语文本，常出现中英文交替使用，这时汉语命名实体识别的任务还包括识别其中的英文命名实体；<br/>
title: "andg", （5）不同的命名实体具有不同的内部特征，不可能用一个统一的模型来刻画所有的实体内部特征。`,
subtitle: "测试测试测试测试测试测试测试测试测试测试测试测试", fileUrlList: ['../../../static/file/ner/NER.mp4']
content: },
"文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用品 开通百度翻译会员 登录自动检测 中文(简体) 通用领域 文档翻译 0/1000 输入文字、文档、网址或拖拽图片 ", {
}, type: 2,
{ title: "热词",
title: "andg", subtitle: "热门词汇",
subtitle: "测试测试测试测试测试测试测试测试测试测试测试测试", content: "热词，即热门词汇。作为一种词汇现象，反映了一个国家、一个地区在一个时期人们普遍关注的问题和事物。具有时代特征，反映一个时期的热点话题及民生问题。其主要表达形式有语言、文字以及网络图片。",
content: characteristic: `
"文本翻译 全新升级 文档翻译 人工翻译AI同传 翻文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用文本翻译 全新升级 文档翻译 人工翻译AI同传 翻译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用译API课程优选 企业服务 所有产品 开通百度翻译会员 登录自动检测 中文(简体) 通用领域 文档翻译 0/1000 输入文字、文档、网址或拖拽图片 ", <h3>热词是最流行的时尚词语，新鲜、带劲、充满活力。</h3>
}, &emsp;&emsp;热词作为一种词汇现象，反映了一个国家、一个地区在一个时期人们普遍关注的问题和事物。它往往具有时代特征，反映了一个时期的热点话题及民生问题。不仅仅是网民，热词同样也引起了很多媒体的关注，成为了一种值得关注的网络文化现象。
], <h3>热词表达社会新的特点和趋势：</h3>
obj_xq: {}, &emsp;&emsp;在自媒体的繁荣兴盛，带来的不仅仅是传播渠道和方式的改变，在语言表达上也出现了新的特点和趋势，每时每刻在世界的各个角落都有自媒体网络热词诞生，一些经典的热词借助即时通讯工具得以迅速传播，并以常人无法想象的速度更迭改变着。在“人人即媒体”时代，热词是自媒体逐渐普及和其参与者自觉适应、融入网络的必然产物。 [1]
}; <h3>热词创作具有和新闻创作一样的精髓和理念：</h3>
}, &emsp;&emsp;紧扣社会热点，吸引受众眼球，博得舆论关注，常具有“语不惊人死不休”的特点，因此也创造出众多令人感到新奇的词语。每一个热词的产生和热传，往往跟随社会重大新闻事件，具有很强的时效性。
props: { <h3>热词不仅仅是一种语言文化现象：</h3>
clientDetails: { &emsp;&emsp;热词不仅仅是一种语言文化现象，而且已经成为都市人宣泄情绪、自我解压的一种方式方法。人们产生精神危机、对社会缺乏信心时，某种情感就会成为社会的共同心理，当带有这种情感色彩的新闻事件发生时，聪明的人们就会针对一些敏感事件发表异议，用“隐晦”的方式创造出“令人叫绝”的网络热词，借此来调侃稀释心中的无奈，从而迅速引发共鸣。
type: Object, <h3>热词折射社会热点的民意特征：</h3>
default: {}, &emsp;&emsp;语言符号的意义是人们赋予的，人们通过语言符号来表达自己的看法。在互联移动技术发明之前，面对重大新闻事件，民众只能通过人际传播来交流和表达自己的观点和看法 [1] 。在自媒体这个异常开放的空间和平台上，带有公民评判意识的各种网络热词此起彼伏，源源不断。例如在贵州瓮安事件中，有官员说出“做俯卧撑”之后，原本受网友们宠爱的“打酱油”一词立即被“俯卧撑”取代了，用来表示对事情漠不关心、不发表自己的意见，只干与自己有关的事情。2009年2月，云南24岁的李荞明在被看守所关押11天后死亡，警方对于这件事情的说法是他和狱友们玩“躲猫猫”撞墙所致，“躲猫猫”一词迅速蹿红网络 [1] 。
}, <h3>热词也有消极影响的一面：</h3>
}, &emsp;&emsp;是疏远了汉语的规范，网络语言往往是“数字+符号+字母+错别字”的高度杂合型语言，它给语言的规范发展带来严峻挑战。另外，由于有失偏颇热词一旦传播，舆论就会脱离正确的轨道，产生巨大的负面影响。
methods: { `,
eyes(e) { processComposition: '热词即热门词汇，它们有的是已被巧妙本土化的舶来品，有的是方言“南征北伐”后的遍地开花，有的恰是旧词焕发“第二春”有了新的意义。每个热词都紧贴躁动多变的时尚，反映了当下社会生活的特征和情趣，展现了即时的辉煌。时尚是短命的，却能通过词语留下痕迹 [2] 。',
if (e) { fileUrlList: ['../../../static/file/hotWords/hotWords1.mp4', '../../../static/file/hotWords/hotWords2.mp4']
this.obj_xq = e;
} else { },
this.obj_xq = {}; {
} type: 3,
this.xqIsShow = !this.xqIsShow; title: "消息摘要算法",
}, subtitle: "计算机科学术语",
content: "消息摘要算法的主要特征是加密过程不需要密钥，并且经过加密的数据无法被解密，可以被解密逆向的只有CRC32算法，只有输入相同的明文数据经过相同的消息摘要算法才能得到相同的密文。",
briefIntroduction: `消息摘要算法不存在密钥的管理与分发问题，适合于分布式网络上使用。由于其加密计算的工作量相当可观，所以以前的这种算法通常只用于数据量有限的情况下的加密，例如计算机的口令就是用不可逆加密算法加密的。近年来，随着计算机性能的飞速改善，加密速度不再成为限制这种加密技术发展的桎梏，因而消息摘要算法应用的领域不断增加。<br/>
消息摘要算法主要应用在“数字签名”领域，作为对明文的摘要算法。著名的摘要算法有RSA公司的MD5算法和SHA-1算法及其大量的变体。`,
features: `
<h3>消息摘要算法的特点：</h3>
消息摘要是把任意长度的输入揉和而产生长度固定的伪随机输出的算法。消息摘要的主要特点有：<br/>
&emsp;&emsp;①无论输入的消息有多长，计算出来的消息摘要的长度总是固定的。例如应用MD5算法摘要的消息有128个比特位，用SHA-1算法摘要的消息最终有160比特位的输出，SHA-1的变体可以产生192比特位和256比特位的消息摘要。一般认为，摘要的最终输出越长，该摘要算法就越安全。<br/>
&emsp;&emsp;②消息摘要看起来是“随机的”。这些比特看上去是胡乱的杂凑在一起的。可以用大量的输入来检验其输出是否相同，一般，不同的输入会有不同的输出，而且输出的摘要消息可以通过随机性检验。但是，一个摘要并不是真正随机的，因为用相同的算法对相同的消息求两次摘要，其结果必然相同；而若是真正随机的，则无论如何都是无法重现的。因此消息摘要是“伪随机的”。<br/>
&emsp;&emsp;③一般地，只要输入的消息不同，对其进行摘要以后产生的摘要消息也必不相同；但相同的输入必会产生相同的输出。这正是好的消息摘要算法所具有的性质：输入改变了，输出也就改变了；两条相似的消息的摘要确不相近，甚至会大相径庭。<br/>
&emsp;&emsp;④消息摘要函数是无陷门的单向函数，即只能进行正向的信息摘要，而无法从摘要中恢复出任何的消息，甚至根本就找不到任何与原信息相关的信息。当然，可以采用强力攻击的方法，即尝试每一个可能的信息，计算其摘要，看看是否与已有的摘要相同，如果这样做，最终肯定会恢复出摘要的消息。但实际上，要得到的信息可能是无穷个消息之一，所以这种强力攻击几乎是无效的。<br/>
&emsp;&emsp;⑤好的摘要算法，没有人能从中找到“碰撞”，虽然“碰撞”是肯定存在的。即对于给定的一个摘要，不可能找到一条信息使其摘要正好是给定的。或者说，无法找到两条消息，使它们的摘要相同。
`,
fileUrlList: ['../../../static/file/messageDigestAlgorithm/messageDigestAlgorithm.webp']
},
{
type: 4,
title: "情感识别",
subtitle: "计算机对人情感状态进行的识别",
content: "计算机对从传感器采集来的信号进行分析和处理，从而得出对方（人）正处在的情感状态，这种行为叫做情感识别。从生理心理学的观点来看，情绪是有机体的一种复合状态，既涉及体验又涉及生理反应，还包含行为，其组成分至少包括情绪体验、情绪表现和情绪生理三种因素。对于情感识别有两种方式，一种是检测生理信号如呼吸、心律和体温等，另一种是检测情感行为如面部特征表情识别、语音情感识别和姿态识别。",
summarize: `
<h3>定义</h3>
&emsp;&emsp;计算机对从传感器采集来的信号进行分析和处理，从而得出对方（人）正处在的情感状态，这种行为叫做情感识别。从生理心理学的观点来看，情绪是有机体的一种复合状态，既涉及体验又涉及生理反应，还包含行为，其组成分至少包括情绪体验、情绪表现和情绪生理三种因素。对于情感识别有两种方式，一种是检测生理信号如呼吸、心律和体温等，另一种是检测情感行为如面部特征表情识别、语音情感识别和姿态识别。
“情感识别”，并不是说计算机能直接识别或测量情感状态，应该解释为“通过观察表情、行为和情感产生的前提环境来推断情感状态”。因为情感状态是内在的并包含生理和心理的变化，这样只能获得情感状态的一些可观测的东西，如表情、行为等等。假设这些东西的观测可靠的话，那么潜在的情感状态就可以推断出来。只有将情感识别看作一种模式识别问题、情感表达看作模式合成问题，计算机进行情感交流才具有可行性。 [1]
<h3>目的</h3>
&emsp;&emsp;事实上，人与人之间进行情感识别与情感交流存在着一定的客观动机。分工与合作是人类提高社会生产力最有效的方式，人们为了更好地进行分工合作，一方面必须及时地、准确地通过一定的“情感表达”方式向他人展现自己的价值关系，另一方面必须及时地、准确地通过一定的“情感识别”方式了解和掌握对方的价值关系，才能够在此基础上，分析和判断彼此之间的价值关系，才能做出正确的行为决策。
总之，情感识别的客观本质或客观动机就是人为了了解和掌握对方的价值关系。
由于人与人之间存在不同类型的利益相关性，对方所展现的情感有时是完全准确的方式，有时是夸张掩饰的方式，有时却是完全相反的方式，这时，人就需要不断地调整和修正对方的情感表达的客观价值内容，使自己的情感识别具有更高的及时性、准确性和完整性。
<h3>内容</h3>
&emsp;&emsp;人类可以通过视觉、味觉、听觉、嗅觉和触觉五个器官来认识世界，而对于他人情感的识别主要是通过视觉和听觉来完成的，即主要是通过人脸的情感识别、语言声调的情感识别语言文字的情感识别来完成的。
`,
fileUrlList: ['../../../static/file/emotionRecognition/emotionRecognition.webp']
},
],
obj_xq: {},
};
},
props: {
clientDetails: {
type: Object,
default: {},
}, },
mounted() { },
let _this = this; methods: {
eyes(e) {
if (e) {
this.obj_xq = e;
} else {
this.obj_xq = {};
}
this.xqIsShow = !this.xqIsShow;
}, },
watch: {}, },
}; mounted() {
</script> let _this = this;
<style lang="scss"> },
#xjsyf { watch: {},
width: calc(100% - 0px); };
height: calc(100% - 0px); </script>
padding: 20px; <style lang="scss">
box-sizing: border-box; #xjsyf {
overflow: hidden; width: calc(100% - 0px);
background-size: 100% 100%; height: calc(100% - 0px);
position: relative; padding: 20px;
.tab-div { box-sizing: border-box;
width: 100%; overflow: hidden;
background-size: 100% 100%;
position: relative;
.tab-div {
width: 100%;
height: 100%;
.left-divs {
width: 20%;
height: 100%; height: 100%;
.left-divs { float: left;
width: 20%; display: flex;
height: 100%; justify-content: center;
float: left; align-items: center;
display: flex;
justify-content: center; .bg-divs {
align-items: center; width: 200px;
.bg-divs { height: 300px;
width: 200px; background-image: url("../../assets/img/xjs/3.png");
height: 300px; background-size: 100% 100%;
background-image: url("../../assets/img/xjs/3.png");
background-size: 100% 100%;
}
} }
.center-divs { }
width: 60%;
height: 80%; .center-divs {
margin-top: 5%; width: 60%;
float: left; height: 80%;
display: flex; margin-top: 5%;
flex-wrap: wrap; float: left;
.cards-div { display: flex;
width: 46%; flex-wrap: wrap;
margin: 2%;
height: 260px; .cards-div {
.tilts { width: 46%;
width: 100%; margin: 2%;
height: 100%; height: 260px;
background-image: url("../../assets/img/xjs/2.png");
background-size: 100% 100%; .tilts {
cursor: pointer; width: 100%;
.el-divider--horizontal { height: 100%;
margin: 6px; background-image: url("../../assets/img/xjs/2.png");
width: calc(100% - 12px); background-size: 100% 100%;
background: #727573; cursor: pointer;
}
.top-div { .el-divider--horizontal {
font-size: 18px; margin: 6px;
letter-spacing: 2px; width: calc(100% - 12px);
font-weight: 600; background: #727573;
height: 40px;
line-height: 40px;
width: 90%;
color: white;
margin-left: 5%;
}
.subtitle-div {
width: 94%;
height: 24px;
line-height: 30px;
font-size: 12px;
color: #8f8f8f;
margin-left: 3%;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
letter-spacing: 1;
}
.content-div {
font-size: 12px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
overflow: hidden;
color: lightgrey;
letter-spacing: 1px;
width: 94%;
margin-left: 3%;
margin-top: 10px;
}
} }
.tilts:hover {
transform-style: preserve-3d; .top-div {
background-image: url("../../assets/img/xjs/1.png"); font-size: 18px;
letter-spacing: 2px;
font-weight: 600;
height: 40px;
line-height: 40px;
width: 90%;
color: white;
margin-left: 5%;
}
.subtitle-div {
width: 94%;
height: 24px;
line-height: 30px;
font-size: 12px;
color: #8f8f8f;
margin-left: 3%;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
letter-spacing: 1;
}
.content-div {
font-size: 12px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
overflow: hidden;
color: lightgrey;
letter-spacing: 1px;
width: 94%;
margin-left: 3%;
margin-top: 10px;
} }
} }
}
.right-divs { .tilts:hover {
width: 20%; transform-style: preserve-3d;
height: 100%; background-image: url("../../assets/img/xjs/1.png");
float: left;
display: flex;
justify-content: center;
align-items: center;
.bg-divs {
width: 200px;
height: 300px;
background-image: url("../../assets/img/xjs/3.png");
background-size: 100% 100%;
transform: rotate(180deg);
} }
} }
} }
.div-xq {
width: 96%; .right-divs {
height: 96%; width: 20%;
padding: 2%; height: 100%;
border: 1px solid #3a5f94c9; float: left;
border-radius: 0px 50px; display: flex;
.el-divider--horizontal { justify-content: center;
margin: 20px 6px; align-items: center;
width: calc(100% - 12px);
background: #727573; .bg-divs {
} width: 200px;
.fh-div { height: 300px;
width: 40px; background-image: url("../../assets/img/xjs/3.png");
height: 40px;
background-image: url("../../assets/img/xjs/4.png");
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; transform: rotate(180deg);
right: 45px;
cursor: pointer;
}
.top-divs {
font-size: 22px;
letter-spacing: 5px;
font-weight: 600;
height: 40px;
line-height: 40px;
width: 90%;
color: white;
margin-left: 20px;
}
.titles-div {
margin-left: 9px;
height: 30px;
.bgs-div {
width: 10px;
height: 10px;
float: left;
transform: rotate(45deg);
background: #e7c46f;
margin-top: 5px;
}
.bgs-span {
color: #e7c46f;
margin-left: 12px;
float: left;
letter-spacing: 2px;
font-weight: 600;
font-size: 15px;
}
}
.subtitle-divs {
width: 90%;
height: 24px;
line-height: 30px;
font-size: 12px;
color: #8f8f8f;
margin-left: 20px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
letter-spacing: 1;
} }
.content-divs { }
font-size: 12px; }
word-break: break-all;
text-overflow: ellipsis; .div-xq {
display: -webkit-box; width: 96%;
-webkit-box-orient: vertical; height: 85%;
-webkit-line-clamp: 6; padding: 2%;
overflow: hidden; border: 1px solid #3a5f94c9;
color: lightgrey; border-radius: 0px 50px;
letter-spacing: 1px; overflow-y: auto;
width: 94%;
margin-left: 3%; .el-divider--horizontal {
margin-top: 10px; margin: 20px 6px;
width: calc(100% - 12px);
background: #727573;
}
.fh-div {
width: 40px;
height: 40px;
background-image: url("../../assets/img/xjs/4.png");
background-size: 100% 100%;
position: absolute;
right: 45px;
cursor: pointer;
}
.top-divs {
font-size: 22px;
letter-spacing: 5px;
font-weight: 600;
height: 40px;
line-height: 40px;
width: 90%;
color: white;
margin-left: 20px;
}
.titles-div {
margin-left: 9px;
height: 30px;
.bgs-div {
width: 10px;
height: 10px;
float: left;
transform: rotate(45deg);
background: #e7c46f;
margin-top: 5px;
} }
.center-button {
width: 100%; .bgs-span {
color: #e7c46f;
margin-left: 12px;
float: left;
letter-spacing: 2px;
font-weight: 600;
font-size: 15px;
} }
} }
.subtitle-divs {
width: 90%;
height: 24px;
line-height: 30px;
font-size: 12px;
color: #8f8f8f;
margin-left: 20px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
letter-spacing: 1;
}
.content-divs {
font-size: 12px;
// word-break: break-all;
// text-overflow: ellipsis;
// display: -webkit-box;
// -webkit-box-orient: vertical;
// -webkit-line-clamp: 6;
// overflow: hidden;
color: lightgrey;
letter-spacing: 1px;
width: 94%;
margin-left: 3%;
margin-top: 10px;
margin-bottom: 20px;
}
.center-button {
width: 100%;
}
} }
</style> }
</style>
\ No newline at end of file
webpack.config.js
View file @ 257ec75e
...@@ -86,7 +86,7 @@ module.exports = { ...@@ -86,7 +86,7 @@ module.exports = {
//后台代理 //后台代理
proxy: { proxy: {
'/api/': { '/api/': {
target: 'http://192.168.168.107:9001', target: 'http://192.168.168.106:9001',
ws: true, ws: true,
secure: false, secure: false,
changeOrigin: true, changeOrigin: true,
......
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