dev/dcp-web-gate/src_old/views/realTimeInfo/RealTimeInfo.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.GlobalData") }}</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>
        <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>
      </div>
    </div>
    <!-- <RealTimeInfoMoreInfo v-if="screenIndex==0"></RealTimeInfoMoreInfo> -->
    <RealTimeInfoDataInfo v-if="screenIndex == 0"></RealTimeInfoDataInfo
    ><!-- 数据 -->
    <!-- <RealTimeInfoPeriodical  v-if="screenIndex==2"></RealTimeInfoPeriodical>期刊 -->
  </div>
</template>
  
  <script>
import HeaderItem from "@/components/headerItem";
import tabers from "@/components/taber";
import footers from "@/components/footers";
import Screen from "@/components/screen";
import RealTimeInfoMoreInfo from "@/views/realTimeInfo/RealTimeInfoMoreInfo";
import RealTimeInfoDataInfo from "@/views/realTimeInfo/RealTimeInfoDataInfo";
import RealTimeInfoPeriodical from "@/views/realTimeInfo/RealTimeInfoPeriodical";
export default {
  name: "RealTimeInfo",
  components: {
    tabers,
    HeaderItem,
    footers,
    Screen,
    RealTimeInfoMoreInfo,
    RealTimeInfoDataInfo,
    RealTimeInfoPeriodical,
  },
  data() {
    return {
      screenIndex: this.$route.query.key ? this.$route.query.key : 0,
      Screens: "common.isData",
      realTimeInfoScreens: [
        // {
        //   lable: "common.Information",
        //   value: "0",
        // },
        {
          lable: "common.DataInformation",
          value: "0",
        },
        // {
        //   lable: "common.JournalInformation",
        //   value: "2",
        // },
      ],
      realTimeInfoScreens2: [
        {
          lable: "common.Information",
          value: "0",
        },
        {
          lable: "common.DataInformation",
          value: "1",
        },
        {
          lable: "common.JournalInformation",
          value: "2",
        },
      ],
      realTimeInfoScreens3: [
        {
          lable: "common.Information",
          value: "0",
        },
        {
          lable: "common.DataInformation",
          value: "1",
        },
        {
          lable: "common.JournalInformation",
          value: "2",
        },
      ],
      realTimeInfoScreenItem: "0",
    };
  },
  mounted() {
    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.DataInformation");
      } else if (this.screenIndex == "2") {
        return (this.Screens = "common.JournalInformation");
      }
    }
  },
  methods: {
    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) {
      this.screenIndex = index;
      this.Screens = i.lable;
    },
    screen(i) {
      this.index = i;
    },
    realTimeInfoScreensChange(i, index) {
      this.realTimeInfoScreenItem = index;
    },
  },
};
</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>