Skip to content

N
national_museum_vod-H5
Commit 1f09c673 authored by 乐宝呗666's avatar 乐宝呗666
Browse files
Options

init

parents
Pipeline #260 canceled with stages
      Expand all Hide whitespace changes
      Inline Side-by-side
      Showing with 3573 additions and 0 deletions
      .DS_Store 0 → 100644
      View file @ 1f09c673
      File added
      README.md 0 → 100644
      View file @ 1f09c673
      # party
      ## Project setup
      ```
      npm install
      ```
      ### Compiles and hot-reloads for development
      ```
      npm run serve
      ```
      ### Compiles and minifies for production
      ```
      npm run build
      ```
      ### Run your tests
      ```
      npm run test
      ```
      ### Lints and fixes files
      ```
      npm run lint
      ```
      ### Customize configuration
      See [Configuration Reference](https://cli.vuejs.org/config/).
      babel.config.js 0 → 100644
      View file @ 1f09c673
      module.exports = {
      presets: [
      '@vue/cli-plugin-babel/preset'
      ]
      }
      package-lock.json 0 → 100644
      View file @ 1f09c673
      This diff is collapsed.
      package.json 0 → 100644
      View file @ 1f09c673
      {
      "name": "party",
      "version": "0.1.0",
      "private": true,
      "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint"
      },
      "dependencies": {
      "core-js": "^3.6.5",
      "echarts": "^4.8.0",
      "vant": "^2.12.6",
      "vue": "^2.6.11",
      "vue-router": "^3.5.1"
      },
      "devDependencies": {
      "@vue/cli-plugin-babel": "^4.5.0",
      "@vue/cli-plugin-eslint": "^4.5.0",
      "@vue/cli-service": "^4.5.0",
      "babel-eslint": "^10.1.0",
      "eslint": "^6.7.2",
      "eslint-plugin-vue": "^6.2.2",
      "node-sass": "^5.0.0",
      "sass-loader": "^10.1.1",
      "vue-template-compiler": "^2.6.11"
      },
      "eslintConfig": {
      "root": true,
      "env": {
      "node": true
      },
      "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
      ],
      "parserOptions": {
      "parser": "babel-eslint"
      },
      "rules": {}
      },
      "browserslist": [
      "> 1%",
      "last 2 versions",
      "not dead"
      ]
      }
      public/images/applets/bg_top.png 0 → 100644
      View file @ 1f09c673
      This diff is collapsed.
      public/images/topBox/bg-top.png 0 → 100644
      View file @ 1f09c673
      This diff is collapsed.
      public/index.html 0 → 100644
      View file @ 1f09c673
      <!DOCTYPE html>
      <html lang="">
      <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      <title>国博建党百年展点播院线统计平台</title>
      </head>
      <body>
      <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
      </noscript>
      <div id="app"></div>
      <!-- built files will be auto injected -->
      </body>
      </html>
      public/test.html 0 → 100644
      View file @ 1f09c673
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style type="text/css">
      * {
      margin:0;
      padding:0;
      }
      .wrap {
      overflow:hidden;
      width:500px;
      height:100px;
      border:1px solid #000;
      margin:50px auto;
      }
      .list {
      position:relative;
      top:0px;
      left:0px;
      width:200%;
      height:100%;
      border:1px solid #f00;
      list-style:none;
      animation:mymove 5s infinite linear;
      }
      .list li {
      width:98px;
      height:98px;
      border:1px solid white;
      background:blue;
      float:left;
      vertical-align:middle;
      text-align:center;
      line-height:98px;
      color:white;
      font-weight:600;
      }
      @-webkit-keyframes mymove {
      from {
      left:0px;
      }
      to {
      left:-500px;
      }
      }
      </style>
      </head>
      <body>
      <div class="wrap">
      <ul class="list">
      <li> 1 </li>
      <li> 2 </li>
      <li> 3 </li>
      <li> 4 </li>
      <li> 5 </li>
      <li> 1 </li>
      <li> 2 </li>
      <li> 3 </li>
      <li> 4 </li>
      <li> 5 </li>
      </ul>
      </div>
      </div>
      </body>
      </html>
      src/.DS_Store 0 → 100644
      View file @ 1f09c673
      File added
      src/App.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div id="app">
      <router-view/>
      </div>
      </template>
      <script>
      export default {
      name: 'App'
      }
      </script>
      <style>
      </style>
      src/assets/style/public.scss 0 → 100644
      View file @ 1f09c673
      html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      }
      #app {
      width: 100%;
      height: 100%;
      }
      src/components/Header/index.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="floor-header">
      <span class="back" @click="handleClose">
      <img src= "images/applets/back.png" >
      </span>
      <span>{{ title }}</span>
      </div>
      </template>
      <script>
      export default {
      props: {
      title: {
      type: String,
      default: ''
      }
      },
      data() {
      return {
      }
      },
      methods: {
      handleClose() {
      this.$router.back(-1)
      }
      }
      }
      </script>
      <style lang="scss" scoped>
      .floor-header {
      height: 44px;
      line-height: 44px;
      width: 100%;
      background: #A4151D;
      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.06);
      font-size: 18px;
      font-weight: 700;
      color: #fff;
      text-align: center;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      .back {
      position: absolute;
      left: 12px;
      width: 20px;
      height: 20px;
      top: 5px;
      img {
      width: 100%;
      height: 100%;
      }
      }
      }
      </style>
      src/components/MDialog.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="mask" v-if="isShow">
      <div class="dialog-wrapper">
      <div class="dialog-body table-list">
      <triangle>
      <slot>
      <div class="common-title">
      <img class="icon-title" src="/images/screen/boardsDemand.png" alt="">
      <span class="title">{{dialogData.title}}</span>
      <img class="bg" src="/images/screen/title02_bg.png" alt="">
      <img src="/images/screen/icon-close.png" alt="" class="close" @click="closeDialog">
      </div>
      <dialog-bar-demand class="dialog-echarts-box" v-if="dialogData.type===1"/>
      <dialog-line-interaction class="dialog-echarts-box" v-if="dialogData.type===2"/>
      <div class="list-of-body">
      <ul class="body-title" v-if="dialogData.type===1">
      <li class="f2">序号</li>
      <li class="f5">机构名称</li>
      <li class="f3">互动频次</li>
      </ul>
      <ul class="body-title" v-if="dialogData.type===2">
      <li class="f2">序号</li>
      <li class="f5">统计时间</li>
      <li class="f3">点播总量</li>
      </ul>
      <div class="body-content">
      <div v-if="dialogData.type===1">
      <ul class="body-item" v-for="(item,index) in demandList" :key="index">
      <li class="f2">{{index+1}}</li>
      <li class="f5">{{item.name}}</li>
      <li class="f3">{{item.num}}</li>
      </ul>
      </div>
      <div v-if="dialogData.type===2">
      <ul class="body-item" v-for="(item,index) in actionList" :key="index">
      <li class="f2">{{index+1}}</li>
      <li class="f5">{{item.dateTime}}</li>
      <li class="f3">{{item.num}}</li>
      </ul>
      </div>
      </div>
      </div>
      </slot>
      </triangle>
      </div>
      </div>
      </div>
      </template>
      <script>
      import triangle from './slot/triangle'
      import dialogBarDemand from './echarts/bar'
      import dialogLineInteraction from './echarts/line'
      export default {
      components:{
      triangle,
      dialogBarDemand,
      dialogLineInteraction
      },
      props: {
      isShow: {
      type: Boolean
      },
      dialogData: {
      type: Object,
      }
      },
      data() {
      return {
      demandList:[
      { name:'北京市政府',num:'90'},
      { name:'天津市政府',num:'85'},
      { name:'呼和浩特市政府',num:'83'},
      { name:'石家庄市政府',num:'75'},
      { name:'合肥市政府',num:'73'},
      { name:'哈尔滨市政府',num:'63'},
      { name:'廊坊市政府',num:'56'},
      { name:'临沂市政府',num:'52'},
      { name:'忻州市政府',num:'40'},
      { name:'黑龙江市政府',num:'30'},
      ],
      actionList:[
      { dateTime:'2021/01/01',num:'18'},
      { dateTime:'2021/01/02',num:'19'},
      { dateTime:'2021/01/03',num:'22'},
      { dateTime:'2021/01/04',num:'23'},
      { dateTime:'2021/01/05',num:'25'},
      { dateTime:'2021/01/06',num:'26'},
      { dateTime:'2021/01/07',num:'28'},
      { dateTime:'2021/01/08',num:'30'},
      { dateTime:'2021/01/09',num:'36'},
      { dateTime:'2021/01/10',num:'38'},
      { dateTime:'2021/01/11',num:'40'},
      { dateTime:'2021/01/12',num:'42'},
      { dateTime:'2021/01/13',num:'44'},
      { dateTime:'2021/01/14',num:'45'},
      { dateTime:'2021/01/15',num:'46'},
      { dateTime:'2021/01/16',num:'47'},
      { dateTime:'2021/01/17',num:'49'},
      { dateTime:'2021/01/18',num:'52'},
      { dateTime:'2021/01/19',num:'56'},
      { dateTime:'2021/01/20',num:'59'},
      { dateTime:'2021/01/21',num:'63'},
      { dateTime:'2021/01/22',num:'66'},
      { dateTime:'2021/01/23',num:'68'},
      { dateTime:'2021/01/24',num:'69'},
      { dateTime:'2021/01/25',num:'73'},
      { dateTime:'2021/01/26',num:'75'},
      { dateTime:'2021/01/27',num:'78'},
      { dateTime:'2021/01/28',num:'80'},
      { dateTime:'2021/01/29',num:'83'},
      { dateTime:'2021/01/30',num:'85'},
      { dateTime:'2021/01/31',num:'90'},
      ]
      }
      },
      mounted() {
      },
      methods: {
      closeDialog() {
      this.$emit('update:isShow', false)
      }
      }
      }
      </script>
      <style lang="scss">
      .mask {
      position: fixed;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      overflow: auto;
      z-index: 100;
      .dialog-wrapper {
      position: absolute;
      left: 50%;
      top: 20%;
      transform: translate(-50%, 0.1rem);
      font-size: 0.32rem;
      color: #62BAFF;
      width: 50vw;
      height: 50vh;
      padding: .24rem;
      margin: 0;
      background: rgba(0,19,45,0.9);
      box-shadow: -0.01rem 0 .1rem #62baff33, .01rem 0 .1rem #62baff33, 0 -.01rem .1rem #62baff33, 0 .01rem .1rem #62baff33;
      .close {
      position: absolute;
      right: 0.12rem;
      top: 0.12rem;
      width: 0.28rem;
      height: 0.28rem;
      z-index: 101;
      }
      .dialog-body {
      width: 100%;
      .triangle {
      padding-bottom: .32rem;
      }
      .list-of-body {
      height: calc(34vh - 1rem);
      padding-top: 0;
      overflow:hidden;
      .body-content {
      height: 100%;
      }
      }
      }
      .dialog-echarts-box{
      height: 16vh;
      width: 100%;
      display: inline-block;
      box-sizing: border-box;
      }
      }
      }
      </style>
      \ No newline at end of file
      src/components/areas.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="list-of-area">
      <triangle>
      <slot>
      <div class="list-of-area-title common-title">
      <img class="icon-title" src="/images/screen/boardsDemand.png" alt="">
      <span class="title">{{title}}</span>
      <img class="bg" src="/images/screen/title00_bg.png" alt="">
      </div>
      <div class="list-of-body">
      <ul class="body-title">
      <li class="f5">地区名称</li>
      <li class="f3">播放量(次)</li>
      <li class="f2">展板数量</li>
      </ul>
      <div class="body-content" id="areaContent">
      <div id="area1">
      <ul class="body-item" v-for="(item,index) in list" :key="index">
      <li class="f5">{{item.city}}</li>
      <li class="f3">{{item.play}}</li>
      <li class="f2">{{item.num}}</li>
      </ul>
      </div>
      <div id="area2"></div>
      <div id="area3">></div>
      </div>
      </div>
      </slot>
      </triangle>
      </div>
      </template>
      <script>
      import triangle from '../components/slot/triangle'
      export default {
      name: 'areas',
      data() {
      return {
      title:'地区展板播放统计',
      timer:null,
      speed:50,
      box:null,
      area1:null,
      list:[
      { city:'山西省',play:'10000', num:'24'},
      { city:'湖南省',play:'8878', num:'22'},
      { city:'海南省',play:'5934', num:'21'},
      { city:'贵州省',play:'5899', num:'18'},
      { city:'云南省',play:'5523', num:'16'},
      { city:'甘肃省',play:'4678', num:'12'},
      { city:'四川省',play:'4224', num:'6'},
      { city:'湖南省',play:'3023', num:'4'},
      { city:'江西省',play:'2412', num:'2'},
      { city:'黑龙江省',play:'2258', num:'2'},
      { city:'湖北省',play:'2198', num:'2'},
      { city:'安徽省',play:'2158', num:'2'},
      { city:'新疆维吾尔自治区',play:'2258', num:'2'},
      { city:'广西壮族自治区',play:'1588', num:'2'},
      { city:'西藏自治区',play:'1258', num:'2'},
      ]
      }
      },
      components:{triangle},
      mounted() {
      setTimeout(()=>{
      this.initScroll()
      },1000)
      },
      methods: {
      initScroll() {
      let _this = this
      this.box = document.getElementById("areaContent");
      this.con1 = document.getElementById("area1");
      let con2 = document.getElementById("area2");
      let con3 = document.getElementById("area3");
      con2.innerHTML = this.con1.innerHTML;
      con3.innerHTML = this.con1.innerHTML;
      this.timer = setInterval(_this.scrollUp, _this.speed);
      },
      scrollUp() {
      if (this.box.scrollTop >= this.con1.scrollHeight) {
      this.box.scrollTop = 0;
      } else{
      this.box.scrollTop++;
      }
      },
      }
      }
      </script>
      <style lang=scss>
      </style>
      src/components/borderNums.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="dashbord-list">
      <ul>
      <li v-for="(item, index) in list">
      <img :src="'/images/screen/'+ item.urlName+ '.png'" alt="">
      <div class="title">
      <div class="title-name">{{item.label}}</div>
      <span>
      <a class="num">{{item.num}}</a>
      <a class="unit">{{item.unit}}</a>
      </span>
      </div>
      </li>
      </ul>
      </div>
      </template>
      <script>
      export default {
      name: 'nums',
      data() {
      return {
      list:[
      {label:'总播放量',num: 1000, unit: '次',urlName:'play'},
      {label:'单位组织',num: 688, unit: '家',urlName:'org'},
      {label:'展板总量',num: 20, unit: '个',urlName:'boardsTotal'},
      {label:'互动总量',num: 899, unit: '次',urlName:'interaction'},
      ]
      }
      },
      mounted() {
      this.initData()
      },
      methods: {
      initData(){
      const _this = this
      setInterval(()=>{
      let num = Math.floor(Math.random()*4)
      num = num > 2 ? 3:0
      _this.$set(_this.list[num],'num', ++_this.list[num]['num'] )
      },3000)
      }
      }
      }
      </script>
      <style lang=scss>
      .dashbord-list{
      width: 100%;
      position: absolute;
      top: -0.3rem;
      ul{
      display: flex;
      font-size: 0;
      justify-content: space-around;
      li{
      position: relative;
      }
      img{
      width: 1.76rem;
      }
      .title{
      position: absolute;
      right: 0.2rem;
      bottom: 0;
      color: rgba(78,255,253,1);
      p{
      margin: 0;
      padding: 0;
      }
      .title-name{
      font-size: 0.18rem;
      margin-bottom: 0.13rem;
      }
      .num{
      font-size: 0.28rem;
      }
      .unit{
      font-size: 0.16rem;
      margin-left: 0.05rem;
      }
      }
      }
      }
      </style>
      src/components/demand.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="demand ">
      <triangle>
      <slot>
      <div class="common-title">
      <img class="icon-title" src="/images/screen/boardsDemand.png" alt="">
      <span class="title">{{title}}</span>
      <img class="bg" src="/images/screen/title02_bg.png" alt="">
      </div>
      <div id="barDemand" @click="echartsClick"></div>
      </slot>
      </triangle>
      </div>
      </template>
      <script>
      import triangle from '../components/slot/triangle'
      export default {
      name: 'demand',
      data() {
      return {
      title:'互动频次'
      }
      },
      components:{triangle},
      mounted() {
      setTimeout(()=>{
      this.init()
      },100)
      },
      methods: {
      init(){
      let option = {
      tooltip: {
      trigger: 'axis'
      },
      grid: {
      top:20,
      left: '0%',
      right: '2%',
      bottom: '15%',
      containLabel: true
      },
      // dataZoom: [{
      // type: "slider",
      // show: true,
      // bottom: '20',
      // start: 0,
      // end: 100,
      // height: 18,
      // handleStyle: {
      // color: "#d3dee5",
      // },
      // textStyle: {
      // color: "#fff",
      // fontSize: "10px"
      // },
      // }
      // ],
      xAxis: {
      type: 'category',
      boundaryGap: true,//坐标轴两边留白
      data: [
      '北京市政府', '天津市政府', '呼和浩特市政府', '石家庄市政府', '合肥市政府', '哈尔滨市政府', '廊坊市政府', '临沂市政府','忻州市政府', '黑龙江市政府',
      ],
      axisLabel: { //坐标轴刻度标签的相关设置。
      interval:0,
      textStyle: {
      color: '#FFFFFF',
      fontStyle: 'normal',
      fontFamily: '微软雅黑',
      fontSize: 14,
      },
      formatter: function (value, index) {
      if(value.length > 4){
      return value.slice(0,4)+ '...'
      }else {
      return value
      }
      }
      },
      axisTick:{//坐标轴刻度相关设置。
      show: false,
      },
      axisLine:{//坐标轴轴线相关设置
      lineStyle:{
      color:'rgba(98,186,255,0.6)',
      type:'solid'
      }
      },
      splitLine: { //坐标轴在 grid 区域中的分隔线。
      show: false,
      }
      },
      yAxis: [
      {
      type: 'value',
      name:'单位/次',
      splitNumber: 5,
      max:100,
      axisLabel: {
      textStyle: {
      color: '#FFFFFFFF',
      fontStyle: 'normal',
      fontFamily: '微软雅黑',
      fontSize: 12,
      },
      interval:'auto'
      },
      axisLine:{
      show: false
      },
      axisTick:{
      show: false
      },
      splitLine: {
      show: true,
      lineStyle: {
      color: 'rgba(98,186,255,0.6)',
      type:'dashed'
      }
      }
      }
      ],
      series: [
      {
      type: 'bar',
      barWidth: 16, // 柱子宽度
      itemStyle:{
      barBorderRadius: 120, // 圆角（左上、右上、右下、左下）
      },
      color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
      'rgba(78,255,253,1)', 'rgba(255,74,83,1)'
      ].map((color, offset) => ({
      color,
      offset
      }))), // 渐变
      data: [ 25, 30,40, 52, 56,63, 73, 75, 83, 85,90].reverse()
      }
      ]
      };
      let echartsDiv = this.$echarts.init(document.getElementById('barDemand'))
      echartsDiv.setOption(option)
      },
      // 点击事件
      echartsClick(){
      this.$emit('itemClick',{type:1,title:this.title})
      }
      }
      }
      </script>
      <style lang=scss>
      #barDemand{
      width: 100%;
      height: calc(100% - 0.6rem);
      margin-top: 0.6rem;
      }
      </style>
      src/components/echarts/bar.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div id="dialogBarDemand"></div>
      </template>
      <script>
      export default {
      name: 'demand',
      data() {
      return {
      title:'互动频次'
      }
      },
      mounted() {
      setTimeout(()=>{
      this.init()
      },100)
      },
      methods: {
      init(){
      let option = {
      tooltip: {
      trigger: 'axis'
      },
      grid: {
      top:20,
      left: '0%',
      right: '2%',
      bottom: '5%',
      containLabel: true
      },
      xAxis: {
      type: 'category',
      boundaryGap: true,//坐标轴两边留白
      data: [
      '北京市政府', '天津市政府', '呼和浩特市政府', '石家庄市政府', '合肥市政府', '哈尔滨市政府', '廊坊市政府', '临沂市政府','忻州市政府', '黑龙江市政府',
      ],
      axisLabel: { //坐标轴刻度标签的相关设置。
      interval:0,
      textStyle: {
      color: '#FFFFFF',
      fontStyle: 'normal',
      fontFamily: '微软雅黑',
      fontSize: 14,
      },
      formatter: function (value, index) {
      if(value.length > 4){
      return value.slice(0,4)+ '...'
      }else {
      return value
      }
      }
      },
      axisTick:{//坐标轴刻度相关设置。
      show: false,
      },
      axisLine:{//坐标轴轴线相关设置
      lineStyle:{
      color:'rgba(98,186,255,0.6)',
      type:'solid'
      }
      },
      splitLine: { //坐标轴在 grid 区域中的分隔线。
      show: false,
      }
      },
      yAxis: [
      {
      type: 'value',
      name:'单位/次',
      splitNumber: 5,
      max:100,
      axisLabel: {
      textStyle: {
      color: '#FFFFFFFF',
      fontStyle: 'normal',
      fontFamily: '微软雅黑',
      fontSize: 12,
      },
      interval:'auto'
      },
      axisLine:{
      show: false
      },
      axisTick:{
      show: false
      },
      splitLine: {
      show: true,
      lineStyle: {
      color: 'rgba(98,186,255,0.6)',
      type:'dashed'
      }
      }
      }
      ],
      series: [
      {
      type: 'bar',
      barWidth: 16, // 柱子宽度
      itemStyle:{
      barBorderRadius: 120, // 圆角（左上、右上、右下、左下）
      },
      color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
      'rgba(78,255,253,1)', 'rgba(255,74,83,1)'
      ].map((color, offset) => ({
      color,
      offset
      }))), // 渐变
      data: [ 25, 30,40, 52, 56,63, 73, 75, 83, 85,90].reverse()
      }
      ]
      };
      let echartsDiv = this.$echarts.init(document.querySelector('#dialogBarDemand'))
      echartsDiv.setOption(option,true)
      },
      }
      }
      </script>
      <style lang=scss>
      #dialogBarDemand{
      width: 100%;
      height: 16vh;
      margin-top: 0.6rem;
      }
      </style>
      src/components/echarts/line.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div id="dialogTends"></div>
      </template>
      <script>
      export default {
      name: 'interaction',
      data() {
      return {
      title:'展板点播趋势图'
      }
      },
      mounted() {
      setTimeout(()=>{
      this.init()
      },100)
      },
      methods: {
      init(){
      let option = {
      tooltip: {
      trigger: 'axis'
      },
      grid: {
      top:20,
      left: '2%',
      right: 20,
      bottom: '15%',
      containLabel: true
      },
      dataZoom: [{
      type: "slider",
      show: true,
      bottom: '0',
      start: 0,
      end: 100,
      height: 18,
      handleStyle: {
      color: "#d3dee5",
      },
      textStyle: {
      color: "#fff",
      fontSize: "10px"
      },
      }],
      xAxis: {
      type: 'category',
      boundaryGap: false,//坐标轴两边留白
      data: [
      '2021/01/01', '2021/01/02', '2021/01/03', '2021/01/04', '2021/01/05', '2021/01/06', '2021/01/07', '2021/01/08','2021/01/09', '2021/01/10',
      '2021/01/11', '2021/01/12', '2021/01/13', '2021/01/14', '2021/01/15', '2021/01/16', '2021/01/17', '2021/01/18','2021/01/19', '2021/01/20',
      '2021/01/21', '2021/01/22', '2021/01/23', '2021/01/24', '2021/01/25', '2021/01/26', '2021/01/27', '2021/01/28','2021/01/29', '2021/01/30','2021/01/31'],
      axisLabel: { //坐标轴刻度标签的相关设置。
      textStyle: {
      color: '#FFFFFF',
      fontStyle: 'normal',
      fontFamily: '微软雅黑',
      fontSize: 14,
      },
      },
      axisTick:{//坐标轴刻度相关设置。
      show: false,
      },
      axisLine:{//坐标轴轴线相关设置
      lineStyle:{
      color:'rgba(98,186,255,0.6)',
      type:'solid'
      }
      },
      splitLine: { //坐标轴在 grid 区域中的分隔线。
      show: false,
      }
      },
      yAxis: [
      {
      type: 'value',
      splitNumber: 5,
      max:100,
      axisLabel: {
      textStyle: {
      color: '#FFFFFFFF',
      fontStyle: 'normal',
      fontFamily: '微软雅黑',
      fontSize: 12,
      },
      interval:'auto'
      },
      axisLine:{
      show: false
      },
      axisTick:{
      show: false
      },
      splitLine: {
      show: true,
      lineStyle: {
      color: 'rgba(98,186,255,0.6)',
      type:'dashed'
      }
      }
      }
      ],
      series: [
      {
      type: 'line',
      smooth:true,
      itemStyle: {
      normal: {
      color:'rgba(255,74,83,1)',
      lineStyle: {
      color: "rgba(78,255,253,1)",
      width:1
      },
      areaStyle: {
      color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: 'rgba(255,74,83,0.4)'
      }, {
      offset: 1,
      color: 'rgba(78,255,253,0.4)'
      }]),
      }
      }
      },
      data: [ 18, 19, 22, 23, 25, 26, 28, 30, 36, 38,
      40, 42, 45, 44, 46, 47, 49, 52, 56, 59,
      63, 66, 68, 69, 73, 75, 78, 80, 83, 85,90
      ]
      }
      ]
      };
      let echartsDiv = this.$echarts.init(document.getElementById('dialogTends'))
      echartsDiv.setOption(option)
      },
      }
      }
      </script>
      <style lang="scss">
      #dialogTends{
      width: 100%;
      height: 16vh;
      margin-top: 0.6rem;
      }
      </style>
      src/components/index.js 0 → 100644
      View file @ 1f09c673
      import demand from './demand'
      import interaction from './interaction'
      import areas from './areas'
      import top10 from './top10'
      import mapDiv from './maps'
      import borderNums from './borderNums'
      import MDialog from './MDialog'
      export {
      demand,
      interaction,
      areas,
      top10,
      mapDiv,
      borderNums,
      MDialog
      }
      src/components/interaction.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="interaction">
      <triangle>
      <slot>
      <div class="common-title">
      <img class="icon-title" src="/images/screen/boardsDemand.png" alt="">
      <span class="title">{{title}}</span>
      <img class="bg" src="/images/screen/title02_bg.png" alt="">
      </div>
      <div id="tends" @click="echartsClick"></div>
      </slot>
      </triangle>
      </div>
      </template>
      <script>
      import triangle from '../components/slot/triangle'
      export default {
      name: 'interaction',
      data() {
      return {
      title:'展板点播趋势图'
      }
      },
      components:{triangle},
      mounted() {
      setTimeout(()=>{
      this.init()
      },100)
      },
      methods: {
      init(){
      let option = {
      tooltip: {
      trigger: 'axis'
      },
      grid: {
      top:20,
      left: '2%',
      right: 20,
      bottom: '15%',
      containLabel: true
      },
      // dataZoom: [{
      // type: "slider",
      // show: true,
      // bottom: '20',
      // start: 0,
      // end: 100,
      // height: 18,
      // handleStyle: {
      // color: "#d3dee5",
      // },
      // textStyle: {
      // color: "#fff",
      // fontSize: "10px"
      // },
      // }
      // ],
      xAxis: {
      type: 'category',
      boundaryGap: false,//坐标轴两边留白
      data: [
      '2021/01/01', '2021/01/02', '2021/01/03', '2021/01/04', '2021/01/05', '2021/01/06', '2021/01/07', '2021/01/08','2021/01/09', '2021/01/10',
      '2021/01/11', '2021/01/12', '2021/01/13', '2021/01/14', '2021/01/15', '2021/01/16', '2021/01/17', '2021/01/18','2021/01/19', '2021/01/20',
      '2021/01/21', '2021/01/22', '2021/01/23', '2021/01/24', '2021/01/25', '2021/01/26', '2021/01/27', '2021/01/28','2021/01/29', '2021/01/30','2021/01/31'],
      axisLabel: { //坐标轴刻度标签的相关设置。
      textStyle: {
      color: '#FFFFFF',
      fontStyle: 'normal',
      fontFamily: '微软雅黑',
      fontSize: 14,
      },
      },
      axisTick:{//坐标轴刻度相关设置。
      show: false,
      },
      axisLine:{//坐标轴轴线相关设置
      lineStyle:{
      color:'rgba(98,186,255,0.6)',
      type:'solid'
      }
      },
      splitLine: { //坐标轴在 grid 区域中的分隔线。
      show: false,
      }
      },
      yAxis: [
      {
      type: 'value',
      splitNumber: 5,
      max:100,
      axisLabel: {
      textStyle: {
      color: '#FFFFFFFF',
      fontStyle: 'normal',
      fontFamily: '微软雅黑',
      fontSize: 12,
      },
      interval:'auto'
      },
      axisLine:{
      show: false
      },
      axisTick:{
      show: false
      },
      splitLine: {
      show: true,
      lineStyle: {
      color: 'rgba(98,186,255,0.6)',
      type:'dashed'
      }
      }
      }
      ],
      series: [
      {
      type: 'line',
      smooth:true,
      itemStyle: {
      normal: {
      color:'rgba(255,74,83,1)',
      lineStyle: {
      color: "rgba(78,255,253,1)",
      width:1
      },
      areaStyle: {
      color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: 'rgba(255,74,83,0.4)'
      }, {
      offset: 1,
      color: 'rgba(78,255,253,0.4)'
      }]),
      }
      }
      },
      data: [ 18, 19, 22, 23, 25, 26, 28, 30, 36, 38,
      40, 42, 45, 44, 46, 47, 49, 52, 56, 59,
      63, 66, 68, 69, 73, 75, 78, 80, 83, 85,90
      ]
      }
      ]
      };
      let echartsDiv = this.$echarts.init(document.getElementById('tends'))
      echartsDiv.setOption(option)
      },
      // 点击事件
      echartsClick(){
      this.$emit('itemClick',{type:2,title:this.title})
      }
      }
      }
      </script>
      <style lang="scss">
      #tends{
      width: 100%;
      height: calc(100% - 0.6rem);
      margin-top: 0.6rem;
      }
      </style>
      src/components/maps.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div id="mapDiv">
      </div>
      </template>
      <script>
      import 'echarts/map/js/china'
      var dataList = [{
      name: '安徽',value: 5498
      }, {
      name: '澳门',value: 0
      }, {
      name: '北京',value: 0
      }, {
      name: '福建',value: 4111
      }, {
      name: '甘肃',value: 59
      }, {
      name: '广东',value: 1928
      }, {
      name: '广西',value: 4
      }, {
      name: '贵州',value: 52
      }, {
      name: '海南',value: 1284
      }, {
      name: '河北',value: 3151
      }, {
      name: '河南',value: 3814
      }, {
      name: '黑龙江',value: 316
      }, {
      name: '湖北',value: 1724
      }, {
      name: '湖南',value: 33378
      }, {
      name: '吉林',value: 520
      }, {
      name: '江苏',value: 113
      }, {
      name: '江西',value: 961
      }, {
      name: '辽宁',value: 139
      }, {
      name: '内蒙古',value: 0
      }, {
      name: '宁夏',value: 60
      }, {
      name: '青海',value: 0
      }, {
      name: '山东',value: 106
      }, {
      name: '山西',value: 0
      }, {
      name: '陕西',value: 114
      }, {
      name: '上海',value: 1321
      }, {
      name: '四川',value: 7867
      }, {
      name: '台湾',value: 0
      }, {
      name: '天津',value: 1157
      }, {
      name: '西藏',value: 14
      }, {
      name: '香港',value: 0
      }, {
      name: '新疆',value: 115
      }, {
      name: '云南',value: 3811
      }, {
      name: '浙江',value: 0
      }, {
      name: '重庆',value: 886
      }
      ];
      export default {
      name: 'maps',
      data() {
      return {
      }
      },
      mounted() {
      setTimeout(()=>{
      this.init()
      },100)
      },
      methods: {
      init(){
      let option = {
      tooltip: {
      triggerOn: "click",
      formatter: function(e, t, n) {
      return .5 == e.value ? e.name + "：播放量" : e.seriesName + "<br />" + e.name + "：" + e.value
      }
      },
      visualMap: [{
      dimension: 0,
      left: '8%',
      bottom:20,
      itemWidth: 16,
      orient:'horizontal',
      text: ['播放量', '由低到高'],
      backgroundColor:'rgba(0,19,45,0.4)',
      padding:16,
      textStyle: {
      color: 'gba(255,255,255,1)'
      },
      inRange: {
      color: ['rgba(161,255,255,1)', 'rgba(91,214,255,1)', 'rgba(38,157,255,1)', 'rgba(0,72,149,1)']
      }
      }],
      geo: {
      map: "china",
      roam: !1,
      scaleLimit: {
      min: 1,
      max: 2
      },
      roam: true, //是否开启平游或缩放
      scaleLimit: { //滚轮缩放的极限控制
      min: 1,
      max: 2
      },
      zoom: 1.2,
      top: 51,
      label: {
      normal: {
      show: !0,
      fontSize: "12",
      color: "#fff"
      }
      },
      itemStyle: {
      normal: {
      borderColor: "rgba(0, 0, 0, 0.2)"
      },
      emphasis: {
      areaColor: "#f2d5ad",
      shadowOffsetX: 0,
      shadowOffsetY: 0,
      borderWidth: 0
      }
      },
      regions: [
      {
      name: "南海诸岛",
      itemStyle: {
      // 隐藏地图
      normal: {
      opacity: 0, // 为 0 时不绘制该图形
      }
      },
      label: {
      show: false // 隐藏文字
      }
      }
      ]
      },
      series: [{
      name: "播放量",
      type: "map",
      geoIndex: 0,
      data: dataList
      }]
      };
      let echartsDiv = this.$echarts.init(document.getElementById('mapDiv'))
      echartsDiv.setOption(option)
      }
      }
      }
      </script>
      <style lang=scss>
      #mapDiv{
      width: 100%;
      height: 100%;
      }
      </style>
      src/components/slot/triangle.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="triangle">
      <i class="left-top"></i>
      <i class="right-top"></i>
      <i class="left-bottom"></i>
      <i class="right-bottom"></i>
      <slot></slot>
      </div>
      </template>
      <script>
      export default {
      name: 'triangle',
      data() {
      return {}
      },
      mounted() {
      },
      methods: {}
      }
      </script>
      <style lang=scss>
      @mixin triangle-icon() {
      width:0;
      height: 0;
      border: 0.08rem solid transparent;
      border-left-color: #4EFFFD;
      position: absolute;
      }
      .triangle{
      border: 1px solid #62BAFF;
      height: 100%;
      position: relative;
      padding: 0 0.32rem;
      .left-top{
      @include triangle-icon;
      transform: rotate( -135deg);
      left: -0.08rem;
      top: -0.09rem;
      }
      .right-top{
      @include triangle-icon;
      top: -0.08rem;
      right: -0.08rem;
      transform: rotate(-45deg);
      }
      .left-bottom{
      @include triangle-icon;
      left: -0.09rem;
      bottom: -0.08rem;
      transform: rotate(135deg);
      }
      .right-bottom{
      @include triangle-icon;
      transform: rotate(45deg);
      right: -0.08rem;
      bottom: -0.08rem;
      }
      }
      </style>
      src/components/tabbar/index.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="my-tabbar">
      <van-tabbar v-model="activeIndex" active-color="#EE0A24" route>
      <van-tabbar-item icon="home-o" to="/commit">观影互动</van-tabbar-item>
      <van-tabbar-item icon="search" to="/learn">学习项目</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/admin"
      >管理员信息</van-tabbar-item
      >
      <van-tabbar-item icon="setting-o" to="/editPsd"
      >修改密码</van-tabbar-item
      >
      </van-tabbar>
      </div>
      </template>
      <script>
      export default {
      props: {
      active: {
      type: String,
      default: "0",
      },
      },
      data() {
      return {
      activeIndex: this.active,
      };
      },
      };
      </script>
      <style lang="scss" scoped>
      </style>
      \ No newline at end of file
      src/components/top10.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="list-of-top10">
      <triangle>
      <slot>
      <div class="list-of-top10-title common-title">
      <img class="icon-title" src="/images/screen/boardsDemand.png" alt="">
      <span class="title">{{title}}</span>
      <img class="bg" src="/images/screen/title01_bg.png" alt="">
      </div>
      <div class="list-of-body">
      <ul class="body-title">
      <li class="f1">排名</li>
      <li class="f7">展板名称</li>
      <li class="f2">播放量</li>
      </ul>
      <div class="body-content" id="bodyContent">
      <div id="con1">
      <ul class="body-item" v-for="(item,index) in list">
      <li class="f1">{{index%10 + 1}}</li>
      <li class="f7">
      <div class="title" :title="item.name">{{item.name}}</div>
      </li>
      <li class="f2">{{item.num}}</li>
      </ul>
      </div>
      <div id="con2"></div>
      </div>
      </div>
      </slot>
      </triangle>
      </div>
      </template>
      <script>
      import triangle from '../components/slot/triangle'
      export default {
      name: 'top10',
      data() {
      return {
      title:'全国2021年3月展板点播TOP10',
      timer:null,
      speed:50,
      box:null,
      con1:null,
      list:[
      { name:'中国沦为半殖民地半封建社会', num:'11902' },
      { name:'抗日战争取得伟大胜利', num:'59876' },
      { name:'筹建新中国', num:'68902' },
      { name:'中华人民共和国成立', num:'368902' },
      { name:'伟大成就', num:'78902' },
      { name:'完善和落实中国特色社会主义事业总体布局', num:'58902' },
      { name:'中国特色社会主义进入新时代', num:'88902'},
      { name:'开创中国特色社会主义新局面', num:'78902'},
      { name:'社会主义文化强国建设迈出坚实步伐', num:'108902'},
      { name:'坚决打赢脱贫攻坚战', num:'188902'},
      // { name:'蒋介石背叛革命 建立独裁统治', num:'20300' },
      // { name:'开辟农村包围城市武装夺取政权道路', num:'50780' },
      // { name:'坚持党的基本路线不动摇', num:'68902' },
      // { name:'港澳回归', num:'68902' },
      // { name:'让人民群众共享改革发展成果', num:'48902'},
      // { name:'“一带一路”倡议推进对外开放向纵深拓展', num:'8902'},
      // { name:'生态保护与修复力度持续加大', num:'7902'},
      // { name:'大力践行外交为民', num:'9902'},
      ]
      }
      },
      components:{triangle},
      mounted() {
      this.list.sort((a,b)=>{
      return b.num - a.num
      })
      this.list = [...this.list,...this.list]
      setTimeout(()=>{
      this.initScroll()
      },1000)
      },
      methods: {
      initScroll() {
      let _this = this
      this.box = document.getElementById("bodyContent");
      this.con1 = document.getElementById("con1");
      let con2 = document.getElementById("con2");
      con2.innerHTML = this.con1.innerHTML;
      this.timer = setInterval(_this.scrollUp, _this.speed);
      },
      scrollUp() {
      if (this.box.scrollTop >= this.con1.scrollHeight) {
      this.box.scrollTop = 0;
      } else{
      this.box.scrollTop++;
      }
      },
      Ups() {
      let _this = this
      this.timer = setInterval(_this.scrollUp, _this.speed);
      },
      Stops() {
      clearInterval(this.timer);
      }
      }
      }
      </script>
      <style lang=scss>
      </style>
      src/main.js 0 → 100644
      View file @ 1f09c673
      import Vue from 'vue'
      import App from './App.vue'
      import router from './router'
      import './assets/style/public.scss'
      import echarts from "echarts"
      import Vant from 'vant';
      import 'vant/lib/index.css';
      // 自定义tabbar
      import Mytabbar from '@/components/tabbar/index.vue'
      Vue.component('my-tabbar',Mytabbar)
      Vue.use(Vant);
      Vue.prototype.$echarts = echarts
      Vue.config.productionTip = false
      new Vue({
      router,
      render: h => h(App),
      }).$mount('#app')
      src/router/index.js 0 → 100644
      View file @ 1f09c673
      import Vue from 'vue'
      import VueRouter from 'vue-router'
      Vue.use(VueRouter)
      const routes= [
      {
      path: '/',
      redirect: '/commit',
      },
      {
      path: '/screen',
      name: 'screen',
      meta: {
      title: '大屏'
      },
      component: () => import('@/views/screen')
      },
      {
      path: '/login',
      name: 'login',
      meta: {
      title: '登录'
      },
      component: () => import('@/views/setTopBoxManage/login')
      },
      {
      path: '/opt',
      name: 'opt',
      meta: {
      title: '运维'
      },
      component: () => import('@/views/setTopBoxManage/opt')
      },
      {
      path: '/commit',
      name: 'commit',
      component:() => import('@/views/user/commit.vue')
      },
      {
      path: '/learn',
      name: 'learn',
      component: () => import('@/views/user/learn.vue')
      },
      {
      path: '/admin',
      name: 'admin',
      component: () => import('@/views/user/admin.vue')
      },
      {
      path: '/editPsd',
      name: 'editPsd',
      component: () => import('@/views/user/editPsd.vue')
      },
      {
      path: '/learnContent',
      name: 'learnContent',
      component: () => import('@/views/user/components/learnContent.vue')
      },
      {
      path: '/learnDetail',
      name: 'learnDetail',
      component: () => import('@/views/user/components/learnDetail.vue')
      },
      {
      path: '/adminInfo',
      name: 'adminInfo',
      component: () => import('@/views/user/components/adminInfo.vue')
      },
      ]
      const router = new VueRouter({
      routes: routes,
      mode: "history"
      })
      export default router
      src/views/commit.vue 0 → 100644
      View file @ 1f09c673
      This diff is collapsed.
      src/views/screen.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="screen-container">
      <div class="page-title">
      <p> - 播放数据统计 - </p>
      </div>
      <div class="user-info">
      <img src="/images/screen/user.png" alt="" class="icon-user">
      <span class="user-name">中国国家博物馆</span>
      <img src="/images/screen/close.png" alt="" class="signup">
      <img src="/images/screen/manager.png" @click="goManager" alt="" class="manager">
      </div>
      <div class="middel-part">
      <!--地区展板播放统计-->
      <areas class="table-list"></areas>
      <!--中间地图-->
      <div class="map-container">
      <borderNums></borderNums>
      <mapDiv></mapDiv>
      </div>
      <!--全国点播板块-->
      <top10 class="table-list"></top10>
      </div>
      <div class="echartspanel">
      <demand class="echarts-box left" @itemClick="itemClick"></demand>
      <interaction class="echarts-box right" @itemClick="itemClick"></interaction>
      </div>
      <!-- 弹框 -->
      <m-dialog :is-show.sync="showDialog" :dialog-data="dialogData"/>
      </div>
      </template>
      <script>
      import {
      demand,
      interaction,
      areas,
      top10,
      mapDiv,
      borderNums,
      MDialog
      } from '../components'
      export default {
      data(){
      return{
      showDialog:false,
      dialogData:{} // 1 是互动频次弹框 2 是趋势图弹框
      }
      },
      components:{demand, interaction , areas, top10, mapDiv, borderNums,MDialog},
      mounted(){
      let clientWidth = document.body.clientWidth;
      clientWidth = clientWidth>1920? 1920: clientWidth
      let fontSize = clientWidth/1920 * 100
      document.getElementsByTagName("html")[0].style.fontSize = fontSize + 'px'
      },
      methods:{
      // 接收柱状图传来的数据
      itemClick(params){
      this.showDialog = true
      this.dialogData = params
      },
      goManager(){
      location.href="http://121.4.56.121:84"
      }
      }
      }
      </script>
      <style lang="scss">
      .screen-container{
      ::-webkit-scrollbar {
      width: 8px;
      height: 10px;
      //background-color: rgba(255, 255, 255, 0.2) !important;
      }
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #08214c;
      /*background: url("/images/screen/bg.png") no-repeat;*/
      background: url("/images/screen/bg@1x.png") no-repeat;
      background-size: 100% 100%;
      padding: 0 0.32rem;
      box-sizing: border-box;
      .page-title{
      width: 100%;
      height: 0.67rem;
      background: url("/images/screen/top_bg.png") no-repeat;
      background-size: 100% 100%;
      p{
      font-size: 0.32rem;
      color: #62BAFF;
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0.1rem);
      margin: 0;
      }
      }
      .user-info{
      position: absolute;
      right: 0.56rem;
      top: 0.31rem;
      display: flex;
      align-items: center;
      .icon-user,.signup{
      width: 0.28rem;
      height: 0.28rem;
      }
      .user-name{
      font-size: 0.18rem;
      color: #4FFFFD;
      margin-left: 0.12rem;
      }
      .signup{
      margin-left: 0.4rem;
      }
      .manager {
      cursor: pointer;
      width: .32rem;
      height: .32rem;
      margin-left: .2rem;
      }
      }
      .echartspanel{
      height: 34vh;
      width: 100%;
      bottom: 0rem;
      padding: 0.24rem 0;
      box-sizing: border-box;
      .echarts-box{
      height: 100%;
      width: 50%;
      display: inline-block;
      box-sizing: border-box;
      &.left{
      padding-right: 0.12rem;
      float: left;
      }
      &.right{
      padding-left: 0.12rem;
      float: right;
      }
      }
      }
      .middel-part{
      display: flex;
      margin-top: 4.16vh;
      height: 56.48vh;
      justify-content: space-between;
      .table-list{
      width: 25vw;
      height: 100%;
      }
      }
      .table-list{
      .list-of-body{
      padding-top: 0.7rem;
      height: 100%;
      box-sizing: border-box;
      ul{
      display: flex;
      align-items: flex-start;
      font-size: 0.16rem;
      padding-left: 0.24rem;
      box-sizing: border-box;
      li{
      line-height: 0.4rem;
      &.f1{
      width: 10%;
      }
      &.f2{
      width: 20%;
      }
      &.f3{
      width: 30%;
      }
      &.f5{
      width: 50%;
      }
      &.f6{
      width: 60%;
      }
      &.f7{
      width: 70%;
      }
      div.title{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      }
      }
      }
      .body-title{
      color: #62BAFF;
      margin-bottom: 0.07rem;
      }
      .body-content{
      height: calc(100% - 0.8rem);
      overflow-y: auto;
      .body-item{
      height: 0.4rem;
      background-color: #62baff33;
      margin-bottom: 0.04rem;
      color: #4EFFFD ;
      }
      }
      }
      }
      .common-title{
      .icon-title{
      position: absolute;
      top: 0.10rem;
      left: 0.1rem;
      width: 0.4rem;
      }
      .title{
      position: absolute;
      top: 0.20rem;
      left: 0.52rem;
      font-size: 0.2rem;
      line-height: 0.2rem;
      color:#4EFFFD ;
      }
      .bg{
      position: absolute;
      width: calc(100% - 0.48rem);
      left: 0.24rem;
      top: 0.24rem;
      }
      }
      .map-container{
      flex: 1;
      height: 100%;
      position: relative;
      padding-top: 0.7rem;
      box-sizing: border-box;
      }
      }
      </style>
      src/views/setTopBoxManage/components/form.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="form-container">
      <van-form @submit="onSubmit">
      <van-field
      class="field-form-item"
      readonly
      clickable
      name="orgName"
      :value="boxInfo.orgName"
      label="机顶盒所属单位"
      placeholder="请选择组织单位"
      :right-icon="showOrg? 'arrow-up':'arrow-down'"
      @click="showOrg = true"
      :rules="[{ required: true}]"/>
      <van-popup v-model="showOrg" position="bottom">
      <van-picker
      show-toolbar
      :columns="orgList"
      @confirm="onConfirmOrg"
      @cancel="showOrg = false"
      />
      </van-popup>
      <van-field
      class="field-form-item"
      v-model="boxInfo.macURL"
      name="macURL"
      label="机顶盒Mac地址"
      placeholder="请填写机顶盒Mac地址"
      :rules="[{ required: true }]"
      />
      <div class="form-page-button">
      <van-button type="default" native-type="submit" v-if="actived==='1'">激活</van-button>
      <van-button type="default" native-type="submit" v-if="actived==='2'">上报</van-button>
      </div>
      </van-form>
      </div>
      </template>
      <script>
      export default {
      props:['actived'],
      data(){
      return {
      boxInfo:{},
      orgList: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      showOrg: false,
      showUser: false,
      }
      },
      methods:{
      onConfirmOrg(value) {
      this.boxInfo.orgName = value;
      this.showOrg = false;
      },
      onSubmit(values) {
      console.log('submit', values,this.boxInfo);
      if(this.actived==='1'){
      // 调用激活接口
      this.$toast.success('提交成功');
      }else{
      // 调用上报接口
      this.$toast.success('提交成功');
      }
      },
      }
      }
      </script>
      <style lang="scss">
      .form-container{
      .van-form {
      padding: 24px;
      background: #FFFFFF;
      border-radius: 0 0 4px 4px;
      .van-field {
      background: #F5F5F5;
      border-radius: 4px;
      .van-field__left-icon {
      margin-right: 12px;
      }
      }
      }
      .form-page-button{
      text-align: center;
      background: #A4151D;
      border-radius: 4px;
      position: absolute;
      bottom: 40px;
      left: 24px;
      right: 24px;
      box-sizing: border-box;
      .van-button {
      font-size: 16px;
      color: #fff;
      background-color: transparent;
      border: none;
      }
      }
      .field-form-item.van-cell{
      display: block;
      padding: 8px 0 16px 0;
      background-color: transparent;
      border-bottom: none;
      .van-field__label{
      width: 100%;
      color: #333;
      font-size: 14px;
      font-weight: normal;
      margin-bottom: 16px;
      }
      .van-field__value{
      background: #F5F5F5;
      border-radius: 4px;
      padding: 8px 20px;
      }
      &::after {
      border: none;
      }
      .van-field__control{
      color: #333;
      font-size: 14px;
      font-weight: normal;
      }
      }
      .van-tabs__nav--card {
      margin: 0;
      }
      }
      </style>
      src/views/setTopBoxManage/login.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="login-container">
      <div class="login-bg"></div>
      <div class="login-page">
      <div class="login-page-body">
      <div class="login-page-title">机顶盒运维客户端</div>
      <div class="login-page-form">
      <van-form @submit="onSubmit">
      <van-field
      v-model="userInfo.username"
      name="用户名"
      left-icon="manager"
      placeholder="请输入用户名"
      :rules="[{ required: true, message: '用户名不能为空' }]"
      />
      <van-field
      v-model="userInfo.password"
      type="password"
      name="密码"
      left-icon="lock"
      placeholder="请输入密码"
      :rules="[{ required: true, message: '密码不能为空' }]"
      />
      <div class="login-page-button">
      <van-button type="default" native-type="submit">登录</van-button>
      </div>
      </van-form>
      </div>
      </div>
      </div>
      </div>
      </template>
      <script>
      export default {
      data(){
      return {
      userInfo:{}
      }
      },
      methods:{
      onSubmit(values) {
      console.log('submit', values);
      const isOpt = 2
      if(isOpt==2){
      this.$router.push('/opt')
      }else{
      this.$router.push('/commit')
      }
      },
      }
      }
      </script>
      <style lang="scss">
      .login-container{
      width: 100%;
      height: 100%;
      max-width: 1024px;
      .login-bg{
      width: 100%;
      height: 100%;
      margin: 0 auto;
      background: #a4171d;
      &:before{
      display: inline-block;
      content: "";
      width: 100%;
      height: 106px;
      background: url('/images/topBox/bg-bottom.png') no-repeat;
      background-size: 100% 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      }
      &:after{
      display: inline-block;
      content: "";
      width: 100%;
      height: 421px;
      background: url('/images/topBox/bg-top.png') no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      left: 0;
      }
      }
      .login-page{
      height: 350px;
      position: absolute;
      bottom: 58px;
      left: 24px;
      right: 24px;
      padding: 24px;
      background: #FFFFFF;
      box-shadow: 0 8px 20px 0 rgba(0,0,0,0.20);
      border-radius: 8px;
      .login-page-form {
      padding-top: 24px;
      .van-field {
      background: #F5F5F5;
      border-radius: 4px;
      margin-bottom: 32px;
      .van-field__left-icon {
      margin-right: 12px;
      }
      }
      }
      .login-page-title{
      font-size: 18px;
      color: #333;
      text-align: center;
      margin: 24px 0;
      }
      .login-page-button{
      text-align: center;
      background: #A4151D;
      border-radius: 4px;
      position: absolute;
      bottom: 40px;
      left: 24px;
      right: 24px;
      box-sizing: border-box;
      .van-button {
      font-size: 16px;
      color: #fff;
      background-color: transparent;
      border: none;
      }
      }
      }
      }
      </style>
      src/views/setTopBoxManage/opt.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="opt-container">
      <div class="opt-page">
      <van-tabs type="card" v-model="activeName">
      <van-tab title="机顶盒激活" name="1">
      <custom-form actived="1"></custom-form>
      </van-tab>
      <van-tab title="故障上报" name="2">
      <custom-form actived="2"></custom-form>
      </van-tab>
      </van-tabs>
      </div>
      </div>
      </template>
      <script>
      import CustomForm from './components/form'
      export default {
      components:{
      CustomForm
      },
      data(){
      return {
      activeName:'1',
      }
      }
      }
      </script>
      <style lang="scss">
      .opt-container{
      position: absolute;
      top: 16px;
      bottom: 16px;
      left: 16px;
      right: 16px;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
      .opt-page{
      width: 100%;
      height: 100%;
      }
      .van-tabs__nav--card {
      margin: 0;
      }
      .van-tabs {
      width: 100%;
      height: 100%;
      }
      .van-tabs--card>.van-tabs__wrap {
      height: 40px;
      }
      .van-tabs__nav--card .van-tab {
      color: #333;
      font-size: 16px;
      border-right: none;
      }
      .van-tabs__nav--card {
      height: 40px;
      background: #EEEEEE;
      border-radius: 8px 8px 0 0;
      border: none;
      }
      .van-tabs__nav--card .van-tab.van-tab--active {
      color:#fff;
      background-color: #A4151D;
      }
      .van-tabs__nav--card .van-tab.van-tab--active:last-child {
      border-top-right-radius: 8px;
      }
      .van-tabs__nav--card .van-tab.van-tab--active:first-child {
      border-top-left-radius: 8px;
      }
      }
      </style>
      src/views/tosay.vue 0 → 100644
      View file @ 1f09c673
      This diff is collapsed.
      src/views/user/admin.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="admin-conatiner">
      <Header title="管理员信息"/>
      <ul>
      <li v-for="(item,index) in list" :key="index" @click="goDetail(item)">
      <span>{{item.name}}</span>
      <img v-if="item.name==='丁大大'" src="/images/applets/edit.png" alt />
      <img v-if="item.name!=='丁大大'" src="/images/applets/detail.png" alt />
      </li>
      </ul>
      <my-tabbar active="2"></my-tabbar>
      </div>
      </template>
      <script>
      import Header from '@/components/Header/index.vue'
      export default {
      components:{Header},
      data() {
      return {
      list:[
      {name:"丁大大"},
      {name:"丁尔尔1"},
      {name:"丁二二2"},
      {name:"丁三三3"},
      ]
      };
      },
      mounted(){
      },
      methods:{
      goDetail(item){
      if(item.name==='丁大大'){
      // 修改页面
      this.$router.push({path:'/adminInfo',query:{id:item.name,disabled:false}})
      }else{
      // 详情页面
      this.$router.push({path:'/adminInfo',query:{id:item.name,disabled:true}})
      }
      }
      }
      };
      </script>
      <style lang="scss" scoped>
      .admin-conatiner {
      width: 100%;
      height: 100vh;
      padding: 16px;
      box-sizing: border-box;
      ul {
      list-style: none;
      margin-top: 44px;
      }
      li {
      display: flex;
      justify-content: space-between;
      background: #f8f8f8;
      border-radius: 33px;
      font-size: 16px;
      padding: 12px;
      color: #333333;
      margin-top: 20px;
      img {
      width: 24px;
      height: 24px;
      }
      }
      }
      </style>
      \ No newline at end of file
      src/views/user/commit.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="home">
      <Header title="观影互动"/>
      <div class="commit-container">
      <van-tabs type="card" v-model="activeTab">
      <van-tab title="观影互动">
      <div class="commit-page">
      <commit-tab @updateActive="updateActive"/>
      </div>
      </van-tab>
      <van-tab title="互动历史">
      <div class="commit-page">
      <history-tab />
      </div>
      </van-tab>
      </van-tabs>
      </div>
      <my-tabbar active="0"></my-tabbar>
      </div>
      </template>
      <script>
      import Header from '@/components/Header/index.vue'
      import commitTab from './components/commitTab.vue'
      import historyTab from './components/historyTab.vue'
      export default {
      components:{
      Header,
      commitTab,
      historyTab
      },
      data() {
      return {
      activeTab: 1,
      form: {},
      cellIcon:'/images/applets/date.png',
      show: false,
      fileList: [],
      imgFileList: []
      };
      },
      mounted() {},
      methods: {
      updateActive(active){
      this.activeTab = active
      },
      onOversize(file) {
      console.log(file);
      this.$toast("文件大小不能超过 500kb");
      },
      // 打开日历
      onDisplay() {
      this.show = true;
      },
      // 关闭日历
      onClose() {
      this.show = false;
      },
      // 确认日历
      onConfirm(event) {
      this.show = false;
      this.form.studyTime = this.formatDate(event);
      },
      // 格式化日历
      formatDate(date) {
      date = new Date(date);
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
      },
      // 提交数据
      onSubmit() {
      console.log(this.form);
      this.$toast.success("提交成功");
      }
      }
      };
      </script>
      <style lang="scss" scoped>
      .home {
      width: 100%;
      height: 100vh;
      padding: 16px;
      box-sizing: border-box;
      .commit-container {
      margin-top: 44px;
      /deep/.van-tabs--card>.van-tabs__wrap {
      height: 40px;
      .van-tabs__nav--card {
      margin: 0;
      height: 40px;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      border: 1px solid #A4151D;
      .van-tab {
      color: #A4151D;
      border-right: 1px solid #A4151D;
      &.van-tab--active {
      color: #fff;
      background-color: #A4151D;
      }
      &:last-child {
      border-top-right-radius:8px;
      }
      &:first-child {
      border-top-left-radius:8px;
      }
      }
      }
      }
      .commit-page {
      width: 100%;
      height: 100vh;
      }
      }
      }
      </style>
      \ No newline at end of file
      src/views/user/components/adminInfo.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="admin-detail-content">
      <Header title="管理员详情"/>
      <div class="input-box">
      <van-field
      label="管理员姓名"
      :disabled="disabled"
      v-model="form.adminName"
      placeholder="请输入管理员姓名"
      input-align="right"
      />
      <van-field
      label="手机号码"
      :disabled="disabled"
      v-model="form.phone"
      placeholder="请输入手机号码"
      input-align="right"
      />
      <van-field
      label="固定电话"
      :disabled="disabled"
      v-model="form.tel"
      placeholder="请输入固定电话"
      input-align="right"
      />
      <van-field
      label="微信"
      :disabled="disabled"
      v-model="form.wechat"
      placeholder="请输入微信"
      input-align="right"
      />
      <van-field
      label="邮箱"
      :disabled="disabled"
      v-model="form.mail"
      placeholder="请输入邮箱"
      input-align="right"
      />
      </div>
      <div class="admin-detail-button" v-if="!disabled">
      <van-button type="default" plain @click="onCancel">取消</van-button>
      <van-button type="default" @click="onSubmit">提交</van-button>
      </div>
      <div class="admin-detail-button cancel" v-if="disabled">
      <van-button type="default" @click="onCancel">返回</van-button>
      </div>
      </div>
      </template>
      <script>
      import Header from '@/components/Header/index.vue'
      export default {
      components:{Header},
      data() {
      return {
      disabled: false,
      form: {}
      };
      },
      mounted() {
      this.adminId = this.$route.query.id;
      // 查询管理员信息
      if (this.$route.query.disabled === "true") {
      console.log("查看");
      this.disabled = true;
      // 新增
      } else {
      // 修改
      console.log("修改");
      this.disabled = false;
      }
      },
      methods: {
      onCancel() {
      this.$router.go(-1);
      },
      // 提交数据
      onSubmit() {
      console.log(this.form);
      this.$toast.success("信息修改成功");
      this.$router.replace('/admin')
      }
      }
      };
      </script>
      <style lang="scss" scoped>
      .admin-detail-content {
      padding: 24px 12px;
      height: calc(100% - 150px);
      overflow-y: auto;
      .input-box {
      margin-top: 44px;
      padding-bottom: 32px;
      .van-cell {
      line-height: 40px;
      padding-left: 0;
      padding-right: 0;
      border-bottom: 1px solid #eee;
      }
      .van-cell:after {
      display: none;
      }
      }
      .admin-detail-button {
      padding: 0 40px;
      box-sizing: border-box;
      width: 100%;
      margin: 0 auto;
      .van-button--normal {
      background: #a4151d;
      border-radius: 4px;
      height: 40px;
      width: 45%;
      color: #fff;
      border: none;
      font-size: 16px;
      &:first-child {
      margin-right: 5%;
      }
      }
      .van-button--plain {
      background: rgba(164, 21, 29, 0.1);
      border: 1px solid #b40011;
      border-radius: 4px;
      color: #b40011;
      }
      }
      .cancel {
      .van-button--normal{
      width: 100%;
      }
      }
      .van-field__control,
      .van-cell__value {
      color: #333;
      }
      }
      </style>
      \ No newline at end of file
      src/views/user/components/commitTab.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="commit-page-content">
      <div class="field-title">
      <span>基本信息</span>
      </div>
      <div class="input-box">
      <van-field label="展板名称" v-model="form.banName" placeholder="请输入展板名称" input-align="right" />
      <van-field
      label="账户名"
      v-model="form.username"
      placeholder="请输入账户名称"
      readonly
      input-align="right"
      />
      <van-cell
      class="calendar-icon"
      title="学习时间"
      :value="form.studyTime|| ''"
      @click="onDisplay"
      :icon="form.studyTime || cellIcon"
      />
      <van-calendar v-model="show" @close="onClose" @confirm="onConfirm" />
      <van-field label="观影人数" v-model="form.num" placeholder="请输入观影人数" input-align="right" />
      <van-field label="管理员账号" v-model="form.name" placeholder="请输入管理员账号" input-align="right" />
      <van-field
      type="password"
      label="管理员密码"
      v-model="form.password"
      placeholder="请输入管理员密码"
      input-align="right"
      />
      </div>
      <div class="field-title">
      <span>上传视频</span>
      </div>
      <div class="field-content">
      <div class="upload-content">
      <div class="uplaod-video" style="min-height: 60px">
      <van-uploader
      :max-count="3"
      :max-size="500 * 1024"
      @oversize="onOversize"
      v-model="fileList"
      accept="video/*"
      multiple
      >
      <div class="avatar-plus">
      <span>+</span>
      </div>
      </van-uploader>
      </div>
      <div class="tips">
      <img src="/images/applets/tip.png" alt />
      <span>
      最多支持上传
      <b>3</b> 段视频,每段时长
      <b>20s</b>。
      </span>
      </div>
      </div>
      </div>
      <div class="field-title">
      <span>上传照片</span>
      </div>
      <div class="field-content">
      <div class="upload-content">
      <div class="uplaod-video" style="min-height: 60px">
      <van-uploader
      :max-count="6"
      accept="image/png, image/jpeg"
      v-model="imgFileList"
      multiple
      >
      <div class="avatar-plus">
      <span>+</span>
      </div>
      </van-uploader>
      </div>
      <div class="tips">
      <img src="/images/applets/tip.png" alt />
      <span>
      最多支持上传
      <b>6</b> 张照片
      </span>
      </div>
      </div>
      </div>
      <div class="field-title">
      <span>上传资料简介</span>
      </div>
      <div class="field-content">
      <van-field
      class="field-textarea"
      type="textarea"
      v-model="form.content"
      maxlength="500"
      show-word-limit
      />
      </div>
      <div class="commit-page-button">
      <van-button type="default" @click="onSubmit">提交</van-button>
      </div>
      </div>
      </template>
      <script>
      export default {
      data() {
      return {
      form: {},
      cellIcon: "/images/applets/date.png",
      show: false,
      fileList: [],
      imgFileList: []
      };
      },
      mounted() {},
      methods: {
      onOversize(file) {
      console.log(file);
      this.$toast("文件大小不能超过 500kb");
      },
      // 打开日历
      onDisplay() {
      this.show = true;
      },
      // 关闭日历
      onClose() {
      this.show = false;
      },
      // 确认日历
      onConfirm(event) {
      this.show = false;
      this.form.studyTime = this.formatDate(event);
      },
      // 格式化日历
      formatDate(date) {
      date = new Date(date);
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
      },
      // 提交数据
      onSubmit() {
      console.log(this.form);
      this.$toast.success("提交成功");
      this.$emit('updateActive',1)
      }
      }
      };
      </script>
      <style lang="scss" scoped>
      .commit-page-content {
      padding: 24px 12px;
      height: calc(100% - 200px);
      overflow-y: auto;
      .field-title {
      position: relative;
      padding-bottom: 20px;
      span {
      color: #333;
      font-size: 16px;
      line-height: 20px;
      padding-left: 16px;
      &:before {
      content: "";
      height: 16px;
      width: 4px;
      border-radius: 1px;
      display: inline-block;
      background: #a4151d;
      position: absolute;
      left: 0;
      top: 2px;
      }
      }
      }
      .field-content {
      padding-bottom: 32px;
      }
      .input-box {
      padding-bottom: 32px;
      .van-cell {
      line-height: 40px;
      padding-left: 0;
      padding-right: 0;
      border-bottom: 1px solid #eee;
      }
      .van-cell:after {
      display: none;
      }
      }
      .calendar-icon {
      .van-icon {
      position: absolute;
      width: 20px;
      height: 20px;
      right: 0;
      bottom: 22px;
      z-index: 2;
      }
      }
      .commit-page-button {
      padding: 0 40px;
      box-sizing: border-box;
      width: 100%;
      .van-button--normal {
      background: #a4151d;
      border-radius: 4px;
      height: 40px;
      width: 100%;
      color: #fff;
      border: none;
      font-size: 16px;
      }
      }
      .van-field__control,
      .van-cell__value {
      color: #333;
      }
      /deep/.field-textarea {
      min-height: 80px;
      .van-field__value {
      background-color: #f5f5f5;
      }
      .van-cell {
      padding: 0;
      }
      }
      .upload-content {
      .avatar-plus {
      width: 48px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background-color: #f5f5f5;
      border-radius: 1px;
      font-size: 25px;
      color: #999;
      margin-bottom: 12px;
      }
      .tips {
      img {
      width: 12px;
      height: 12px;
      vertical-align: middle;
      }
      span {
      margin-left: 4px;
      color: #666;
      font-size: 12px;
      vertical-align: middle;
      }
      }
      }
      }
      </style>
      \ No newline at end of file
      src/views/user/components/detailTab.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="learn-detail-content">
      <div class="page-wrapper">
      <van-search
      v-model="searchVal"
      shape="round"
      right-icon="search"
      left-icon
      placeholder="请输入搜索关键词"
      />
      <div class="detail-body">
      <van-swipe-cell v-for="(item,index) in list" :key="index" :stop-propagation="true">
      <van-card :title="item.title" :thumb="item.image" @click="goDetail(item)"/>
      <template #right>
      <van-button
      @click="optFn(item)"
      square
      :text="active?'启用':'删除'"
      type="danger"
      :class="{'delete-button':active===0,'enable-button':active===1}"
      />
      </template>
      </van-swipe-cell>
      </div>
      </div>
      </div>
      </template>
      <script>
      export default {
      props: ["active"],
      data() {
      return {
      searchVal:"",
      list: [
      { image: "https://img01.yzcdn.cn/vant/cat.jpeg", title: "学习内容1" },
      { image: "https://img01.yzcdn.cn/vant/cat.jpeg", title: "学习内容2" },
      { image: "https://img01.yzcdn.cn/vant/cat.jpeg", title: "学习内容3" },
      { image: "https://img01.yzcdn.cn/vant/cat.jpeg", title: "学习内容4" }
      ]
      };
      },
      mounted() {},
      methods: {
      optFn(item) {
      if (this.active === 1) {
      console.log("启用", item);
      } else {
      console.log("删除", item);
      }
      },
      goDetail(item) {
      console.log('12121',item);
      this.$router.push({path:'/learnDetail',query:{id:item.title}})
      }
      }
      };
      </script>
      <style lang="scss" scoped>
      .learn-detail-content {
      height: calc(100% - 150px);
      overflow-y: auto;
      .van-search {
      padding: 20px 0;
      .van-cell {
      line-height: 30px;
      }
      }
      /deep/.van-field__right-icon {
      color: #ac9374;
      .van-icon {
      font-size: 20px;
      }
      }
      .delete-button {
      height: 100%;
      background: #a4151d;
      font-size: 16px;
      }
      .enable-button {
      height: 100%;
      background: #6bc20b;
      font-size: 16px;
      }
      .van-button--danger {
      border: none;
      }
      .van-card {
      padding: 16px;
      background-color: transparent;
      border-bottom: 1px solid #eee;
      .van-card__thumb {
      width: 64px;
      height: 40px;
      }
      .van-card__content {
      min-height: 40px;
      .van-card__title {
      line-height: 40px;
      font-size: 16px;
      color: #333;
      }
      }
      }
      }
      </style>
      \ No newline at end of file
      src/views/user/components/historyTab.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="history-page-content">
      <div class="page-wrapper">
      <div class="field-title">
      <span>2021/03/05</span>
      </div>
      <van-collapse v-model="activeNames">
      <van-collapse-item name="1">
      <template #title>
      <div>建档伟业<span class="author">丁一一</span>
      </div>
      </template>
      <div class="content">
      <!-- <div class="learnvideo">
      <div class="learn-title">学习视频</div>
      <div class="learn-body">
      <video src=""></video>
      <video src=""></video>
      <video src=""></video>
      </div>
      </div> -->
      <div class="learnphoto">
      <div class="learn-title">学习照片</div>
      <div class="learn-body">
      <img src="https://img01.yzcdn.cn/vant/apple-1.jpg" alt="">
      <img src="https://img01.yzcdn.cn/vant/apple-1.jpg" alt="">
      <img src="https://img01.yzcdn.cn/vant/apple-1.jpg" alt="">
      </div>
      </div>
      <div class="learntextarea">
      <div class="learn-title">有话对党说</div>
      <div class="learn-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.
      </div>
      </div>
      <!-- <van-image-preview :images="images"/> -->
      </div>
      </van-collapse-item>
      <van-collapse-item title="伟大成就" name="2">内容</van-collapse-item>
      </van-collapse>
      </div>
      </div>
      </template>
      <script>
      export default {
      data() {
      return {
      activeNames: ['1'],
      images: [
      'https://img01.yzcdn.cn/vant/apple-1.jpg',
      'https://img01.yzcdn.cn/vant/apple-2.jpg',
      ],
      };
      },
      mounted() {},
      methods: {}
      };
      </script>
      <style lang="scss" scoped>
      .history-page-content {
      padding: 24px 12px;
      height: calc(100% - 150px);
      overflow-y: auto;
      .field-title {
      position: relative;
      padding-bottom: 20px;
      span {
      color: #333;
      font-size: 16px;
      line-height: 20px;
      padding-left: 24px;
      &:before {
      content: "";
      height: 16px;
      width: 16px;
      background-image: url('/images/applets/timer.png');
      background-size: cover;
      position: absolute;
      left: 0;
      top: 2px;
      }
      }
      }
      .author {
      float: right;
      }
      .content {
      .learn-title {
      font-size: 14px;
      color: #333333;
      padding: 16px 0;
      }
      .learn-body{
      padding-bottom: 12px;
      img,video {
      width: 30%;
      height: auto;
      padding: 0 5px;
      box-sizing: border-box;
      }
      }
      .learntextarea {
      .learn-body {
      line-height: 1.5
      }
      }
      }
      }
      </style>
      \ No newline at end of file
      src/views/user/components/learnContent.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="learn-content-container">
      <Header title="学习内容"/>
      <div class="content">
      <van-tabs type="card" v-model="activeTab">
      <van-tab title="启用列表">
      <detail-tab :active="activeTab"/>
      </van-tab>
      <van-tab title="禁用列表">
      <detail-tab :active="activeTab"/>
      </van-tab>
      </van-tabs>
      </div>
      </div>
      </template>
      <script>
      import detailTab from './detailTab.vue'
      import Header from '@/components/Header/index.vue'
      export default {
      components:{Header,detailTab},
      data() {
      return {
      activeTab: 0,
      };
      },
      mounted() {},
      methods: {}
      };
      </script>
      <style lang="scss" scoped>
      .learn-content-container {
      width: 100%;
      height: 100vh;
      padding: 16px;
      box-sizing: border-box;
      .content {
      margin-top: 44px;
      }
      /deep/.van-tabs--card > .van-tabs__wrap {
      height: 40px;
      .van-tabs__nav--card {
      margin: 0;
      height: 40px;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      border: 1px solid #a4151d;
      .van-tab {
      color: #a4151d;
      border-right: 1px solid #a4151d;
      &.van-tab--active {
      color: #fff;
      background-color: #a4151d;
      }
      &:last-child {
      border-top-right-radius: 8px;
      }
      &:first-child {
      border-top-left-radius: 8px;
      }
      }
      }
      }
      }
      </style>
      \ No newline at end of file
      src/views/user/components/learnDetail.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="learn-detail-page-content">
      <Header title="管理员详情"/>
      <div class="page-wrapper">
      <div class="title-content">
      <div class="row-body">
      <div class="title-label">学习内容名称</div>
      <div class="title-body">建党伟业</div>
      </div>
      <div class="row-body">
      <div class="title-label">学习内容宣传图</div>
      <div class="title-body">
      <img src="images/applets/bg_top.png" alt="">
      </div>
      </div>
      </div>
      <van-collapse v-model="activeNames" accordion>
      <van-collapse-item name="1" title="建党伟业">
      <div class="content">
      <div class="row-body">
      <div class="title-label">展板版权方</div>
      <div class="title-body">中国国家博物馆</div>
      </div>
      <div class="row-body">
      <div class="title-label">展板宣传图</div>
      <div class="title-body">
      <img src="images/applets/bg_top.png" alt="">
      </div>
      </div>
      <div class="detail-body">
      <div class="learn-title">展板简介</div>
      <div class="learn-body textarea">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.
      </div>
      </div>
      <div class="detail-body">
      <div class="learn-title">展板视频</div>
      <div class="learn-body">
      <img src="images/applets/video.png" alt="">
      <span>建党伟业-中文.mp4</span>
      </div>
      </div>
      <div class="detail-body">
      <div class="learn-title">展板音频</div>
      <div class="learn-body">
      <img src="images/applets/audio.png" alt="">
      中文.mp3
      <img src="images/applets/audio.png" alt="">
      英文.mp3
      </div>
      </div>
      </div>
      </van-collapse-item>
      <van-collapse-item title="伟大成就" name="2">内容</van-collapse-item>
      </van-collapse>
      </div>
      </div>
      </template>
      <script>
      import Header from '@/components/Header/index.vue'
      export default {
      components:{Header},
      data() {
      return {
      activeNames: ['1'],
      images: [
      'https://img01.yzcdn.cn/vant/apple-1.jpg',
      'https://img01.yzcdn.cn/vant/apple-2.jpg',
      ],
      };
      },
      mounted() {},
      methods: {}
      };
      </script>
      <style lang="scss" scoped>
      .learn-detail-page-content {
      padding: 24px;
      overflow-y: auto;
      .page-wrapper {
      margin-top: 44px;
      width: 100%;
      height: calc(100vh - 100px);
      overflow-y: auto;
      }
      .row-body {
      margin-bottom: 30px;
      display: flex;
      color: #333;
      .title-label {
      font-size: 14px;
      width: 140px;
      }
      .title-body {
      font-size: 16px;
      font-weight: 700;
      flex: 1;
      img {
      width: 160px;
      height: 100px;
      }
      }
      }
      /deep/.van-collapse-item__title {
      font-size: 16px;
      font-weight: 700;
      &:active {
      background-color: transparent;
      }
      }
      .van-hairline--top-bottom::after {
      border-width: 0;
      }
      .content {
      .learn-title {
      font-size: 14px;
      color: #333333;
      padding-bottom: 12px;
      }
      .detail-body {
      margin-bottom: 20px;
      .learn-body{
      padding-bottom: 12px;
      img {
      width: 32px;
      height: auto;
      padding: 0 5px;
      box-sizing: border-box;
      vertical-align: middle;
      }
      }
      .textarea {
      line-height: 1.5;
      color: #333;
      }
      }
      }
      }
      </style>
      \ No newline at end of file
      src/views/user/editPsd.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="edit-psd-conatiner">
      <Header title="修改密码"/>
      <div class="edit-container">
      <div class="input-box">
      <van-field
      label="当前账号"
      v-model="form.username"
      placeholder="请输入当前账号"
      input-align="right"
      />
      <van-field
      label="当前密码"
      type="password"
      v-model="form.password"
      placeholder="请输入当前密码"
      input-align="right"
      />
      <van-field
      label="新密码"
      type="password"
      v-model="form.newPsd"
      placeholder="请输入新密码"
      input-align="right"
      />
      <van-field
      label="再次输入新密码"
      v-model="form.againPsd"
      placeholder="请再次输入新密码"
      input-align="right"
      />
      </div>
      <div class="admin-detail-button">
      <van-button type="default" plain @click="onCancle">取消</van-button>
      <van-button type="default" @click="onSubmit">提交</van-button>
      </div>
      </div>
      <my-tabbar active="3"></my-tabbar>
      </div>
      </template>
      <script>
      import Header from '@/components/Header/index.vue'
      export default {
      components:{Header},
      data() {
      return {
      form: {}
      };
      },
      mounted() {
      // 查询管理员信息
      },
      methods: {
      onCancle() {
      this.form ={}
      },
      // 提交数据
      onSubmit() {
      console.log(this.form);
      this.$toast.success("密码已修改,请用新密码重新登录系统");
      this.$router.replace('/login')
      }
      }
      };
      </script>
      <style lang="scss" scoped>
      .edit-psd-conatiner {
      width: 100%;
      height: 100vh;
      padding: 16px;
      box-sizing: border-box;
      .edit-container {
      margin-top: 44px;
      }
      .input-box {
      padding-bottom: 32px;
      .van-cell {
      line-height: 40px;
      padding-left: 0;
      padding-right: 0;
      border-bottom: 1px solid #eee;
      }
      .van-cell:after {
      display: none;
      }
      }
      .admin-detail-button {
      padding: 0 40px;
      box-sizing: border-box;
      width: 100%;
      margin: 0 auto;
      .van-button--normal {
      background: #a4151d;
      border-radius: 4px;
      height: 40px;
      width: 45%;
      color: #fff;
      border: none;
      font-size: 16px;
      &:first-child {
      margin-right: 5%;
      }
      }
      .van-button--plain {
      background: rgba(164, 21, 29, 0.1);
      border: 1px solid #b40011;
      border-radius: 4px;
      color: #b40011;
      }
      }
      /deep/.van-field__label {
      width: 7.2em;
      }
      .van-field__control,
      .van-cell__value {
      color: #333;
      }
      }
      </style>
      \ No newline at end of file
      src/views/user/learn.vue 0 → 100644
      View file @ 1f09c673
      <template>
      <div class="learn-conatiner">
      <Header title="学习项目"/>
      <ul>
      <li v-for="(item,index) in list" :key="index" @click="goDetail(item)">
      <span>{{item.name}}</span>
      <img src="/images/applets/coming.png" alt />
      </li>
      </ul>
      <my-tabbar active="1"></my-tabbar>
      </div>
      </template>
      <script>
      import Header from '@/components/Header/index.vue'
      export default {
      components:{Header},
      data() {
      return {
      list:[
      {name:"十四大学习"},
      {name:"十四大学习1"},
      {name:"十四大学习2"},
      {name:"十四大学习3"},
      ]
      };
      },
      mounted(){
      },
      methods:{
      goDetail(item){
      this.$router.push({path:'/learnContent',query:{id:item.name}})
      }
      }
      };
      </script>
      <style lang="scss" scoped>
      .learn-conatiner {
      width: 100%;
      height: 100vh;
      padding: 16px;
      box-sizing: border-box;
      ul {
      margin-top: 44px;
      list-style: none;
      }
      li {
      display: flex;
      justify-content: space-between;
      background: #f8f8f8;
      border-radius: 33px;
      font-size: 16px;
      padding: 12px;
      color: #333333;
      margin-top: 20px;
      img {
      width: 24px;
      height: 24px;
      }
      }
      }
      </style>
      \ No newline at end of file
      vue.config.js 0 → 100755
      View file @ 1f09c673
      // const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
      // 拼接路径
      const resolve = dir => require('path').join(__dirname, dir)
      const fs = require('fs')
      // 增加环境变量
      process.env.VUE_APP_VERSION = require('./package.json').version
      // 基础路径 注意发布之前要先修改这里
      const publicPath = '/'
      module.exports = {
      publicPath, // 根据你的实际情况更改这里
      lintOnSave: true,
      devServer: {
      publicPath, // 和 publicPath 保持一致
      disableHostCheck: false,
      https: false,
      hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
      // proxy: {}
      },
      css: {
      },
      // 默认设置: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-service/lib/config/base.js
      chainWebpack: config => {
      /**
      * 删除懒加载模块的 prefetch preload，降低带宽压力
      * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
      * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
      * 而且预渲染时生成的 prefetch 标签是 modern 版本的，低版本浏览器是不需要的
      */
      config.plugins.delete('prefetch').delete('preload')
      // 解决 cli3 热更新失效 https://github.com/vuejs/vue-cli/issues/1559
      config.resolve.symlinks(true)
      config
      // 开发环境
      .when(
      process.env.NODE_ENV === 'development',
      // sourcemap不包含列信息
      config => config.devtool('cheap-source-map')
      )
      config
      // 开发环境
      .when(
      process.env.NODE_ENV === 'development',
      config => {
      }
      )
      config
      // 生产环境
      .when(
      process.env.NODE_ENV === 'production',
      config => {
      })
      // 重新设置 alias
      config.resolve.alias.set('@api', resolve('src/api'))
      // node
      config.node.set('__dirname', true).set('__filename', 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