TextBigData/ruoyi-ui/src/views/review/index.vue

<template>
  <div style="background: linear-gradient(90deg, #001a2b, #025692);height:900px;overflow: hidden">
    <el-row>
      <el-col :span="24">
        <div style="width: 100%;height: 80px;margin: 0 auto;background: linear-gradient(125deg, #001a2b, #024b7e);">
          <div style="float:right">
            <span style="line-height: 80px;color: #fff;cursor: pointer;height: 80px;display: block;padding: 0 15px;margin-right: 150px">登录</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row >
      <el-col :span="12">
        <div style="width: 600px; margin: 0 auto; height: 420px;padding-top: 80px;position: relative;">
          <span style="text-align:center;color: #fff;font-size: 33px;line-height: 50px;position:relative;display:block">虚拟仿真实验课程项目</span>
          <span style="color: #fff;width: 600px;line-height: 32px;font-size: 16px;position:relative;display:block">2021年，商务经济学专业成功立项重庆市一流本科专业建设点。商业文本大数据挖掘虚拟仿真实验课程是本专业《商业数据挖掘与应用》课程教学改革的最新探索。本实验分析对象为政府政策文本、突发事件新闻、重要媒体评论、微博微信公众号文章、电商网站评论等有商业价值的文本数据。通过对文本数据进行清洗处理、分词、词性标注、特征表示、情感分析、文本摘要、关联分析、相似度计算等操作，形成实验结论，可视化展现关键实验成果，学生可以初步掌握商业文本大数据挖掘分析能力，并充分实践各个经典商业文本大数据应用场景。
          </span>
        </div>
      </el-col>
      <div style="position:absolute;right:30px;top:-200px;width:1600px;height:900px;opacity: 20%;background:100% 100%;background: url(data:image/png;base64,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
      </div>
      <el-col :span="12">
        <div class="video-wrapper">
          <div>
            <button class="btn1 current">项目简介视频</button>
            <button class="btn2">项目引导视频</button>
          </div>
          <!-- <img src="static/images/tg1.mp4"> -->
          <div class="video-content">
            <video id="video"  class="video-style" controls="">
              <source src="../../../public/tmp/content/tg1.mp4" type="video/mp4;">
              您的浏览器不支持观看该视屏。
            </video>
<!--            <video id="video2"  class="video-style" controls="">-->
<!--              <source src="../../../public/tmp/content/tg2.mp4" type="video/mp4;">-->
<!--              您的浏览器不支持观看该视屏。-->
<!--            </video>-->
            <div id="video-control">
              <div id="play" @click="play()"></div>
              <div id="pause" @click="pause()"></div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <span id="shiyan" @click="startShiyan()" >开始实验</span>
        <span id="pinshen" @click="pinshenRukou()" >评审入口</span>
      </el-col>
    </el-row>
    <div class="footer">
      Copyright 苏州大学 2020, All Rights Reserved 苏ICP备10229414号-1 苏公网安备 32050802010530号 |  推荐使用Chrome、EDGE浏览器，1920*1080及以上分辨率访问本网站
    </div>
  </div>

</template>
<script>

import {addReport, delReport, getReport, listReport, updateReport} from "@/api/biemo/report";
import {getQueryObject} from "@/utils";
import {ticket2token} from "@/api/login";
import {setToken} from "@/utils/auth";
import store from "@/store";
export default {
  name: "review",
  data() {
    return {
      ticket: ''
    };
  },
  created() {
    this.init();
  },
  methods: {
    init(){
      this.ticket = getQueryObject().ticket;
    },
    startShiyan(){
      if(!this.ticket){
        alert("票据不能为空");
        return;
      }
      ticket2token({ticket:this.ticket}).then(res =>{
        let sysToken = res.data;
        setToken(sysToken);
        store.commit('SET_TOKEN',sysToken);
        this.$router.push("/views/index/");
      })
    },
    pinshenRukou(){
      this.loading = true;
      this.$store.dispatch("Login",{"username":"admin","password":"admin123"}).then(() =>{
        this.$router.push({path: "/"}).catch(()=>{});
        this.loading = false;

      }).catch(()=>{
        this.loading=false;
      });
    },
    play() {
      document.getElementById("video").play();
      document.getElementById("play").style.display="none";
      document.getElementById("pause").style.display="block";
    },
    pause(){
      document.getElementById("video").pause();
      document.getElementById("play").style.display("none");
      document.getElementById("pause").style.display("block");

    }
  }
};

</script>
<style scoped>

#shiyan{
  margin-left: 100px;
  height: 40px;
  width: 140px;
  line-height: 40px;
  border-radius: 4px;
  background: #fff;
  display: inline-block;
  text-align: center;
  color: #ff9f01;
  font-weight: bold;
  cursor:pointer;
}
#pinshen{
  margin-left: 100px;
  height: 40px;
  width: 140px;
  line-height: 40px;
  border-radius: 4px;
  background: #fff;
  display: inline-block;
  text-align: center;
  color: #2c75df;
  font-weight: bold;
  cursor:pointer;
}
.video-wrapper{
  width:400px;
  position: absolute;
  right: 200px;
  top: 150px;
  z-index: 999;
}
.video-wrapper button.current {
  color: #ff9f01;
}
.video-wrapper button {
  height: 30px;
  width: 100px;
  line-height: 30px;
  border-radius: 2px;
  background: #fff;
  display: inline-block;
  text-align: center;
  font-size: 13px;
  color: #3e548a;
  border: 0;
}
.video-wrapper .video-content {
  background: #000;
  margin-top: 10px;
  position: relative;
}
.video-wrapper .video-style {
  width: 400px;
  height: 225px;
}
.video-wrapper .video-content #video-control {
  position: absolute;
  top: 0;
  left: 0;
}
.video-wrapper .video-content #video-control #play {
  width: 60px;
  height: 60px;
  display: block;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowRkVDNTJGOUQzREUxMUU1Qjk2Q0I1MTZCMzdCNjNFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowRkVDNTJGQUQzREUxMUU1Qjk2Q0I1MTZCMzdCNjNFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjBGRUM1MkY3RDNERTExRTVCOTZDQjUxNkIzN0I2M0U5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBGRUM1MkY4RDNERTExRTVCOTZDQjUxNkIzN0I2M0U5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ddGHqQAAB95JREFUeNrsXWls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) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  top: 80px;
  left: 170px;
}
.footer{
  width: 100%;
  margin: 0  auto;
  height: 80px;
  padding: 30px 0;
  color: #fff;
  font-weight: lighter;
  text-align: center;
  margin-top:200px;
}
</style>