dev/dcp-web-gate/src_old/views/realTimeInfo/RealTimeInfo1.vue

<template>
  <div>
    <div class="autoBox boxs">
      <div>
        <el-breadcrumb separator="/" style="float: left; margin: 15px">
          <el-breadcrumb-item :to="{ path: 'home' }">{{
            $t("common.Home")
          }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $t("common.NewsData") }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $t(Screens) }}</el-breadcrumb-item>
        </el-breadcrumb>
        <!--                 资讯-->
        <el-breadcrumb
          separator="/"
          style="float: right; margin: 14px 15px 0 0"
          v-if="screenIndex == '0'"
        >
          <span
            class="cursor"
            :class="screenIndex == index ? 'screen1' : 'screen2'"
            @click="realTimeInfoScreen(item, index)"
            v-for="(item, index) in realTimeInfoScreens"
          >
            &nbsp;&nbsp;{{ $t(item.lable) }} &nbsp;&nbsp;</span
          >
        </el-breadcrumb>
        <!--                 GEI周报-->
        <el-breadcrumb
          separator="/"
          style="float: right; margin: 14px 15px 0 0"
          v-if="screenIndex == '1'"
        >
          <span
            class="cursor"
            :class="screenIndex == index ? 'screen1' : 'screen2'"
            @click="realTimeInfoScreen(item, item.value)"
            v-for="(item, index) in realTimeInfoScreens2"
          >
            &nbsp;&nbsp;{{ $t(item.lable) }} &nbsp;&nbsp;
          </span>
        </el-breadcrumb>
        <!-- 成果 -->
        <el-breadcrumb
          separator="/"
          style="float: right; margin: 14px 15px 0 0"
          v-if="screenIndex == '2'"
        >
          <span
 class="cursor"
            :class="screenIndex == index ? 'screen1' : 'screen2'"
            @click="realTimeInfoScreen(item, item.value)"
            v-for="(item, index) in realTimeInfoScreens3"
          >
            &nbsp;&nbsp;{{ $t(item.lable) }} &nbsp;&nbsp;
          </span>
        </el-breadcrumb>
        <!--                 期刊-->
        <el-breadcrumb
          separator="/"
          style="float: right; margin: 14px 15px 0 0"
          v-if="screenIndex == '3'"
        >
          <span
            class="cursor"
            :class="screenIndex == index ? 'screen1' : 'screen2'"
            @click="realTimeInfoScreen(item, item.value)"
            v-for="(item, index) in realTimeInfoScreens3"
          >
            &nbsp;&nbsp;{{ $t(item.lable) }} &nbsp;&nbsp;
          </span>
        </el-breadcrumb>
      </div>
    </div>
    <RealTimeInfoMoreInfo1 v-if="screenIndex == 0"></RealTimeInfoMoreInfo1>
    <RealTimeInfoGEIWeekly v-if="screenIndex == 1"></RealTimeInfoGEIWeekly>
    <RealTimeInfoResault v-if="screenIndex == 2"></RealTimeInfoResault>
    <RealTimeInfoPeriodical v-if="screenIndex == 3"></RealTimeInfoPeriodical
    ><!-- 期刊 -->
  </div>
</template>

<script>
// import { addIntegral } from "@/utils/toCompleteTask";
import HeaderItem from "@/components/headerItem";
import tabers from "@/components/taber";
import footers from "@/components/footers";
import Screen from "@/components/screen";
import RealTimeInfoMoreInfo1 from "@/views/realTimeInfo/RealTimeInfoMoreInfo1";
// import RealTimeInfoMoreInfo from '@/views/realTimeInfo/RealTimeInfoMoreInfo'
import RealTimeInfoResault from "@/views/realTimeInfo/RealTimeInfoResault";
import RealTimeInfoDataInfo from "@/views/realTimeInfo/RealTimeInfoDataInfo";
import RealTimeInfoPeriodical from "@/views/realTimeInfo/RealTimeInfoPeriodical";
import RealTimeInfoGEIWeekly from "@/views/realTimeInfo/RealTimeInfoGEIWeekly";
export default {
  name: "RealTimeInfo1",
  components: {
    tabers,
    HeaderItem,
    footers,
    Screen,
    RealTimeInfoMoreInfo1,
    RealTimeInfoDataInfo,
    RealTimeInfoPeriodical,
    RealTimeInfoResault,
    RealTimeInfoGEIWeekly,
  },
  data() {
    return {
      screenIndex: this.$route.query.key ? this.$route.query.key : 0,
      Screens: "common.Information",
      realTimeInfoScreens: [
        {
          lable: "common.Information",
          value: "0",
        },
        {
          lable: "common.GEIWeekly",
          value: "1",
        },
        {
          lable: "common.InfomationResults",
          value: "2",
        },
        {
          lable: "common.JournalInformation",
          value: "3",
        },
      ],

      realTimeInfoScreens2: [
        {
          lable: "common.Information",
          value: "0",
        },
        {
          lable: "common.GEIWeekly",
          value: "1",
        },
        {
          lable: "common.InfomationResults",
          value: "2",
        },
        {
          lable: "common.JournalInformation",
          value: "3",
        },
      ],
      realTimeInfoScreens3: [
        {
          lable: "common.Information",
          value: "0",
        },
        {
          lable: "common.GEIWeekly",
          value: "1",
        },
        {
          lable: "common.InfomationResults",
          value: "2",
        },
        {
          lable: "common.JournalInformation",
          value: "3",
        },
      ],
      realTimeInfoScreenItem: "0",
      time: null,
    };
  },
  mounted() {
    // this.initData();
    if (this.$route.query.key) {
      this.Screens = this.$route.query.key;
      if (this.screenIndex == "0") {
        return (this.Screens = "common.Information");
      } else if (this.screenIndex == "1") {
        return (this.Screens = "common.GEIWeekly");
      } else if (this.screenIndex == "2") {
        return (this.Screens = "common.InfomationResults");
      } else if (this.screenIndex == "3") {
        return (this.Screens = "common.JournalInformation");
      }
    }
  },
  methods: {
    // initData() {
    //   let integral = function () {
    //     addIntegral("point_read_information", "2");
    //   };
    //   this.time = window.setTimeout(integral, 3000);
    // },
    getIconUrl(url) {
      return require("@/assets/img/realTimeInfo/" + url);
    },
    toView(router, json) {
      this.$router.push({ name: router, params: json });
    },
    screenBack(data) {
      console.log(data, "screenBackscreenBackscreenBackscreenBack");
    },
    realTimeInfoScreen(i, index) {
      console.log(i, index);
      this.screenIndex = index;
      this.Screens = i.lable;
    },
    screen(i) {
      this.index = i;
    },
    realTimeInfoScreensChange(i, index) {
      this.realTimeInfoScreenItem = index;
    },
  },
  // updated() {
  //   clearTimeout(this.time);
  // },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul {
  margin: 0;
  padding: 0;
}
.box,
.boxs {
  margin-top: 10px;
  background: #fff;
  /* height: 500px; */
  padding-bottom: 10px;
}
.boxs {
  padding-bottom: 40px;
}
body {
  margin: 0;
}
.screen1 {
  background: linear-gradient(180deg, #3280e2 0%, #144e97 100%);
  border-radius: 20px 20px 20px 20px;
  padding: 8px 12px;
  color: #f0f3f8;
  margin-left: 10px;
}
.screen2 {
  font-size: 14px;
  background: linear-gradient(180deg, #b4d5ff 0%, #4f81bf 100%);
  border-radius: 20px;
  padding: 8px 12px;
  color: #165099;
  margin-left: 10px;
}
li {
  display: inline-block;
  margin-left: 6px;
  padding: 0 2px;
  color: #1251a7;
}
.realTimeInfo_scree .span1,
.realTimeInfo_scree .span2 {
  color: #fff;
  padding: 0 10px;
  font-size: 13px;
  display: inline-block;
  height: 100%;
  background: #2c5589;
  /* margin-right: 30px; */
  width: 70px;
  text-align: center;
}
.realTimeInfo_scree .span2 {
  background: #fff;
  color: #1251a7;
}
.RealTimeInfo >>> .el-input__inner {
  height: 50px !important;
}
.RealTimeInfo >>> .el-input-group__prepend {
  background-color: #fff;
  color: #000;
}
.Information {
  border-bottom: 1px solid #bebebe;
}
.Information span {
  font-size: 14px;
  display: inline-block;
  padding: 6px 0;
}
.Information .dcp_infor {
  margin-right: 500px;
  color: #2c5589;
  font-weight: 700;
  font-size: 15px;
}
.Information .dcp_infor2 {
  margin-right: 30px;
}
.lableStyle li {
  display: block;
}
.lableStyle1,
.lableStyle2 {
  color: #666;
  font-size: 14px;
  line-height: 29px;
  padding-left: 10px;
}
.lableStyle1 {
  font-size: 16px;
  font-weight: 600;
}
.spot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #999;
  margin-right: 5px;
  margin-bottom: 2px;
}
</style>