|
|
@@ -0,0 +1,311 @@
|
|
|
+<template>
|
|
|
+ <div class="home">
|
|
|
+ <!-- 下拉选择主题颜色 -->
|
|
|
+ <div class="theme" @click="theme">
|
|
|
+ 红军红
|
|
|
+ <div class="arrows2" v-if="arrows"></div>
|
|
|
+ <div class="arrows1" v-else></div>
|
|
|
+ </div>
|
|
|
+ <ul class="theme theme2" v-show="arrows">
|
|
|
+ <li @click="$router.push('/')">科技蓝</li>
|
|
|
+ <li @click="$router.push('/home_tow')">党建金</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <!-- 背景盒子 -->
|
|
|
+ <div class="SDbj"></div>
|
|
|
+ <!-- -->
|
|
|
+ <div class="title">校史变迁可视化大屏系统</div>
|
|
|
+ <div class="letf">
|
|
|
+ <div
|
|
|
+ class="box"
|
|
|
+ :class="{ active: isSta }"
|
|
|
+ v-for="item in leftData"
|
|
|
+ :key="item.title"
|
|
|
+ >
|
|
|
+ <div class="biaoti">
|
|
|
+ <img :src="require('@/assets/imgRed/' + item.img)" alt="" />
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="kongbai" v-if="item.conten.length === 0">
|
|
|
+ <div class="zhongjian">
|
|
|
+ <img src="../assets/imgRed/kongbai.png" alt="" />
|
|
|
+ <span>暂无内容</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="cut" @click="mypaly=!mypaly">
|
|
|
+ <img src="../assets/imgRed/end.png" alt="" v-if="mypaly"/>
|
|
|
+ <img src="../assets/imgRed/start.png" alt="" v-else/>
|
|
|
+ </div>
|
|
|
+ <div class="myqizi">
|
|
|
+ <div
|
|
|
+ class="qizi"
|
|
|
+ :class="{ active: seInd === index }"
|
|
|
+ v-for="(item, index) in 10"
|
|
|
+ :key="index"
|
|
|
+ @click="select(index)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="../assets/imgRed/piece2.png"
|
|
|
+ alt=""
|
|
|
+ v-if="seInd === index"
|
|
|
+ />
|
|
|
+ <img src="../assets/imgRed/piece1.png" alt="" v-else />
|
|
|
+ 2021-09-29
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="quanping" @click="quanping">
|
|
|
+ <img src="../assets/imgRed/quanping2.png" alt="" v-if="isSta" />
|
|
|
+ <img src="../assets/imgRed/quanping.png" alt="" v-else />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'Home',
|
|
|
+ components: {},
|
|
|
+ data () {
|
|
|
+ // 这里存放数据
|
|
|
+ return {
|
|
|
+ // 控制播放和暂停
|
|
|
+ mypaly: false,
|
|
|
+ // 选择主题
|
|
|
+ arrows: false,
|
|
|
+ // 控制全屏
|
|
|
+ isSta: false,
|
|
|
+ // 控制棋子
|
|
|
+ seInd: 0,
|
|
|
+ leftData: [
|
|
|
+ { title: '重要文物', img: 'box1ti.png', conten: [] },
|
|
|
+ { title: '重要历史事件', img: 'box2ti.png', conten: [] },
|
|
|
+ { title: '重要人物', img: 'box3ti.png', conten: [] }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 方法集合
|
|
|
+ methods: {
|
|
|
+ // 选择主题
|
|
|
+ theme () {
|
|
|
+ this.arrows = !this.arrows
|
|
|
+ },
|
|
|
+ select (index) {
|
|
|
+ this.seInd = index
|
|
|
+ },
|
|
|
+ // 全屏
|
|
|
+ quanping () {
|
|
|
+ // let element = document.documentElement;//设置后就是我们平时的整个页面全屏效果
|
|
|
+ const element = document.querySelector('.home') // 设置后就是 id==con_lf_top_div 的容器全屏
|
|
|
+ if (this.fullscreen) {
|
|
|
+ // 退出全屏
|
|
|
+ if (document.exitFullscreen) {
|
|
|
+ document.exitFullscreen()
|
|
|
+ } else if (document.webkitCancelFullScreen) {
|
|
|
+ document.webkitCancelFullScreen()
|
|
|
+ } else if (document.mozCancelFullScreen) {
|
|
|
+ document.mozCancelFullScreen()
|
|
|
+ } else if (document.msExitFullscreen) {
|
|
|
+ document.msExitFullscreen()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 点击进入全屏
|
|
|
+ if (element.requestFullscreen) {
|
|
|
+ element.requestFullscreen()
|
|
|
+ } else if (element.webkitRequestFullScreen) {
|
|
|
+ element.webkitRequestFullScreen()
|
|
|
+ } else if (element.mozRequestFullScreen) {
|
|
|
+ element.mozRequestFullScreen()
|
|
|
+ } else if (element.msRequestFullscreen) {
|
|
|
+ // IE11
|
|
|
+ element.msRequestFullscreen()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.fullscreen = !this.fullscreen
|
|
|
+
|
|
|
+ this.isSta = !this.isSta
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.home {
|
|
|
+ .theme {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ right: 55px;
|
|
|
+ top: 30px;
|
|
|
+ border: 1px solid #FF5152 ;
|
|
|
+ width: 70px;
|
|
|
+ height: 28px;
|
|
|
+ border-radius: 8px;
|
|
|
+ .arrows1 {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-left: 5px solid transparent;
|
|
|
+ border-right: 5px solid transparent;
|
|
|
+ border-top: 8px solid #FF5152 ;
|
|
|
+ }
|
|
|
+ .arrows2 {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-left: 5px solid transparent;
|
|
|
+ border-right: 5px solid transparent;
|
|
|
+ border-bottom: 8px solid #FF5152 ;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .theme2 {
|
|
|
+ display: block;
|
|
|
+ top: 59px;
|
|
|
+ border: none;
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 28px;
|
|
|
+ border: 1px solid #FF5152 ;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding-left:3px ;
|
|
|
+ }
|
|
|
+ li:hover{
|
|
|
+ color: #FF5152 ;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ height: 100%;
|
|
|
+ background: url("../assets/imgRed/bg.png") no-repeat #322007 !important;
|
|
|
+ background-size: calc(100% - 30px) calc(100% - 30px) !important;
|
|
|
+ background-position: 50% 50% !important;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ .SDbj {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ // background-color: #082f5a;
|
|
|
+ position: absolute;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 32px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bolder;
|
|
|
+ margin-top: 18px;
|
|
|
+ cursor: text;
|
|
|
+ }
|
|
|
+ .letf {
|
|
|
+ width: 464px;
|
|
|
+ height: 780px;
|
|
|
+ margin: -10px 0 0 40px;
|
|
|
+ .box {
|
|
|
+ margin-top: 20px;
|
|
|
+ color: #fff ;
|
|
|
+ width: 464px;
|
|
|
+ height: 280px;
|
|
|
+ background: url("../assets/imgRed/boxBg.png") no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ .biaoti {
|
|
|
+ height: 27px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ & > img {
|
|
|
+ margin: 0 15px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .kongbai {
|
|
|
+ width: 100%;
|
|
|
+ height: 90%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .zhongjian {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ text-align: center;
|
|
|
+ &img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ & > span {
|
|
|
+ color: #ccc;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box:nth-of-type(2){
|
|
|
+ background: url("../assets/imgRed/boxBg2.png") no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box:nth-of-type(2) {
|
|
|
+ height: 200px;
|
|
|
+
|
|
|
+ .kongbai {
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active:nth-of-type(1),
|
|
|
+ .active:nth-of-type(3) {
|
|
|
+ height: 340px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ position: absolute;
|
|
|
+ top: 125px;
|
|
|
+ right: 50px;
|
|
|
+ height: 688px;
|
|
|
+ width: 70px;
|
|
|
+ // background-color: rosybrown;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ & > div {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 60px;
|
|
|
+ }
|
|
|
+ .cut {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ }
|
|
|
+ .myqizi {
|
|
|
+ height: 625px;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ .qizi {
|
|
|
+ margin-top: 40px;
|
|
|
+ width: 100%;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .qizi:nth-of-type(1) {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ color: #FF5152;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .quanping {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 42px;
|
|
|
+ right: 50px;
|
|
|
+ & > img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
