<template>
  <div class="DefinedPage" >
    <div class="LeftPart" style="overflow: auto">
      <div class="JustBack" style="width:670px;display:flex; flex-direction: row; flex-wrap: nowrap;height:430px !important;">
        <div id="ShowPic" style="display: flex;flex-direction: column;flex-wrap: wrap">
          <div class="card" style=" width: 180px;height:180px;margin-top:50px">
            戳戳跳转
          </div>
          <div id="IconGroup" style="margin-top:60px;display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-20px">
            <div class="little-Triangle" style=" margin-left:15px;">
              <el-tooltip  placement="bottom" width="150"
                           trigger="hover"
                           effect="dark" close-delay="2000">
                <div class="MyPopover" slot="content">
                  <span style="font-size:12px !important;">【91视频网站】完整URL</span><br/><br/>
                  <div style="width:100% ;text-align: center">http://91vedio/1145141919</div>
                </div>
                <i class="el-icon-link" id="little-Circle-content" style="font-weight:550;padding:5px;font-size:15px!important;margin-top:5px">完整URL</i>
              </el-tooltip>
            </div>
            <div class="little-Triangle" style=" margin-left:15px;">
              <el-tooltip  placement="bottom" width="150"
                           trigger="hover"
                           effect="dark" close-delay="2000">
                <div class="MyPopover" slot="content">
                  <span style="font-size:12px !important;">【91视频网站】手机二维码</span><br/><br/>
                  <div style="width:100% ;text-align: center"><img style="width:150px" src="../../assets/img/beauty.jpg" /></div>
                </div>
                <i class="el-icon-picture" id="little-Circle-content" style="font-weight:550; padding:5px;font-size:15px!important;margin-top:5px">手机查看</i>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="NavInfo" style="margin-top:45px;margin-left:50px;width:220px;">
          <span style="font-size:30px;font-family: STHupo">91视频网站</span><br/>
          <div class="NavInfo" >
            <span style="width:200px">创建时间：2023年12月20日</span><br/>
            <span style="width:200px">创建用户：答辩超人</span><br/>
            <span style="width:200px">所属标签：｛小视频｝</span><br/>
            <div style="display: flex;flex-direction: row">
              <div class="little-Circle" id="readNum" style=" margin-left:15px;">
                <el-tooltip  placement="top" width="150"
                             trigger="hover"
                             effect="dark" close-delay="2000">
                  <div class="MyPopover" slot="content">
                    <span style="font-size:12px !important;">【91视频网站】总浏览量</span><br/><br/>
                    <div style="width:100% ;text-align: center">114514  次</div>
                  </div>
                  <i class="el-icon-s-custom" id="little-Circle-content" style=" padding:5px;"></i>
                </el-tooltip>
              </div>
              <div class="little-Circle" id="Rank" style="margin-left:15px;">
                <el-tooltip  placement="top" width="150"
                             trigger="hover"
                             effect="dark" close-delay="2000">
                  <div class="MyPopover" slot="content">
                    <span style="font-size:12px !important;">【91视频网站】总星级</span><br/><br/>
                    <div style="width:100% ;text-align: center;">
                      <span style="font-size:20px">★★★☆☆</span>
                      <br/>
                      <span>评分： 3.8分</span>
                    </div>
                  </div>
                  <i class="el-icon-star-on" id="little-Circle-content" style=" padding:5.5px; "></i>
                </el-tooltip>
              </div>
              <div class="little-Circle" id="Rank" style="margin-left:15px;">
                <el-tooltip  placement="top" width="150"
                             trigger="hover"
                             effect="dark" close-delay="2000">
                  <div class="MyPopover" slot="content">
                    <span style="font-size:12px !important;">向管理员反馈问题</span><br/><br/>
                  </div>
                  <i class="el-icon-warning" id="little-Circle-content" style=" padding:5px; "></i>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--  标签详情-->
      <div class="JustBack" style="width:670px;display:flex; flex-direction: column; flex-wrap: nowrap;">
        <!--文章详情-->
        <div style="width:670px;color: var(--theme-color)">
          <div class="HeadLine">
            <div class="HeadSquare"></div>
            <div class="TitleFont"><i class="el-icon-s-promotion"></i>网站介绍</div>
          </div>
          <div class="ArticleContent">
                  <span>91视频一款免费、高清视频在线观看软件。内容丰富多元,节目持续更新,内容播放清晰流畅,操作界面简单友好,真正为用户带来“悦享品质”的观映体验。
                  全网视频大收罗；收费电影免费看；美剧、动漫、电影、电视剧迷们的福利社<br/>
                  畅享移动高清
                  为移动用户量身打造，操作界面清新友好内容丰富多元。
                  快速发现内容
                  分频道视频浏览，分类更合理，高效
                  更小、更快、更流畅
                  安装包小、CPU占用少、播放更加流畅清晰。<br/>
                  使用91视频观看视频需要具备怎样的网络条件
                  支持无线网络WIFI（WLAN）及3G网络在线观看视频，播放清晰、流畅。其他2G等更低速度的移动网络播放视频时会出现速度慢、无法加载等异常情况，因此不建议使用。
                  91视频是免费软件，无需支付任何费用即可随时随地观看精彩视频。由于在使用过程中需要连接网络，因此根据不同网络的费用标准会产生相应的服务费用。推荐您使用无线网络WIFI连接方式以节约3G流量费。</span>
          </div>
        </div>
        <!--导航评论-->
      </div>
      <!--热度趋势-->
      <div class="JustBack" style="width:670px;display:flex; flex-direction: column; flex-wrap: nowrap;">
        <div style="width:670px;color: var(--theme-color)">
          <div class="HeadLine" style="margin-top:50px">
            <div class="HeadSquare"></div>
            <div class="TitleFont"><i class="el-icon-s-marketing"></i>热度趋势</div>
          </div>
          <div class="ArticleContent">
            <div ref="ManuEchart" style="width:550px;height:300px;"></div>
          </div>
        </div>
      </div>
      <!--用户评论-->
      <div class="JustBack" style="width:670px;height:auto;display:flex; flex-direction: column; flex-wrap: nowrap;">
        <div style="width:670px;color: var(--theme-color)">
          <div class="HeadLine" style="margin-top:30px">
            <div class="HeadSquare"></div>
            <div class="TitleFont"><i class="el-icon-s-comment"></i>用户评论</div>
          </div>
          <div class="ArticleContent" style="margin-left:6px !important;width:580px !important;">
            <el-card style="background-color: var(--theme-comment-color)">

              <UserComment></UserComment>

            </el-card>

          </div>
        </div>
      </div>
    </div>
    <div class="RightPart" style="overflow: auto;display: flex;flex-direction: column">
      <hot-recomment></hot-recomment>
      <NewRecomment></NewRecomment>
      <RandomRecomment></RandomRecomment>
    </div>
  </div>


</template>
<script>
import HotRecomment from "@/components/detail/HotRecomment.vue";
import NewRecomment from "@/components/detail/NewRecomment.vue";
import RandomRecomment from "@/components/detail/RandomRecomment.vue";
import UserComment from "@/components/detail/UserComment.vue";
import Vue from "vue";
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts;
export default {
  name:"NavDetail",
  // eslint-disable-next-line vue/no-unused-components
  components: {HotRecomment,NewRecomment,RandomRecomment,UserComment},
  data() {
    return {
      visible: false,
    //返回数据：时间列表
      TimeList:[],
    //返回数据：浏览量
      PageView:[],
    //Echart图
      ManuChart:null,
    // Echart图设置项：
      MyOption:{},
    }},
  mounted() {
      this.initPage();
  },
  created() {

  },
  computed: {

  },
  methods: {
      // 初始化页面
      initPage(){
        var that = this;
        // Echart图元素绑定Dom
        this.ManuChart = this.$echarts.init(this.$refs.ManuEchart);
        that.MyOption={
          tooltip: {
            trigger: 'item',
            axisPointer: {
              type: 'shadow'
            },
            backgroundColor: '#fff', // 悬浮框背景色
            borderColor: '#000', // 悬浮框边框颜色
            borderWidth: 1, // 悬浮框边框宽度
            textStyle: { // 悬浮框文字样式
              color: '#000',
              fontSize: 12
            }
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLine:{
              show: true,
              lineStyle: {
                color: '#76aaff',
                width: 2,
                type: "solid"
              }
            }
          },
          yAxis: {
            type: 'value',
            splitLine:{
              lineStyle:{
                color:'#76aaff',
              }
            },
            axisLine:{
              show: true,
              lineStyle: {
                color: '#76aaff',
                width: 2,
                type: "solid"
              }
            },
            axisLabel: {//y轴文字的配置
              textStyle: {
                color: '#76aaff',
                margin: 15
              },
              // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
            }
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line',
              label: {//文字的显示
                show: true, //默认  显示文字
              }
            },
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'bar'
            },
          ],
          dataZoom: {
            yAxisIndex: [0],
            type:'inside',
            start: 0,
            end: 100,
            zoomLock:true,
          }
        }
        that.ManuChart.setOption(that.MyOption,true);
      }
  }

}
</script>
<style lang="css">
.DefinedPage{
  display:flex;
  flex-direction: row;
  width:100%;
  overflow: auto;
}
</style>


<style scoped>
/**标签详情**/
.ArticleContent{
  width:80%;
  margin-left:50px;
  margin-top:15px;
  font-weight:550;
  font-size:18px;
  color: var(--theme-color);
}
/**趋势图**/
.LookNumEchart{
  width:80%;
  margin-left:60px;
  margin-top:15px;
  font-weight:550;
  font-size:18px;
  color: var(--theme-color);
}







@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

:root {
  --card-height: 65vh;
  --card-width: calc(var(--card-height) / 1.5);
}


body {
  min-height: 100vh;
  background: #212534;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 2rem;
  padding-bottom: 2rem;
  box-sizing: border-box;
}


.card {
  background: #191c29;
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  font-weight: 700;
  cursor: pointer;
  font-family: fantasy;
}

.card:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
.card:hover:before, .card:hover:after {
  animation: none;
  opacity: 0;
}


.card::before {
  content: "";
  width: 108%;
  height: 108%;
  border-radius: 8px;
  background-image: linear-gradient(
      var(--rotate)
      , #5ddcff, #3c67e3 43%, #4e00c2);
  position: absolute;
  z-index: -1;
  //top: -1%;
  //left: -2%;
  animation: spin 2.5s linear infinite;
}

.card::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
  background-image: linear-gradient(
      var(--rotate)
      , #5ddcff, #3c67e3 43%, #4e00c2);
  opacity: 1;
  transition: opacity .5s;
  animation: spin 2.5s linear infinite;
}

@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}

a {
  color: #212534;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: bold;
  margin-top: 2rem;
}
</style>