提交

src/App.vue

@@ -30,6 +30,27 @@ export default {
   font-weight: 400;
   box-sizing: border-box;
 }
+
+*::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 5px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+
+*::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #babcc0;
+}
+
+*::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  background: #ededed;
+}
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

src/router/index.js

@@ -1,51 +1,61 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from "vue-router";
 
 const routes = [
   {
-    path: '/',
-    name: 'Program',
-    component: () => import('../views/Program.vue')
+    path: "/",
+    name: "Program",
+    component: () => import("../views/Program.vue"),
   },
   {
-    path: '/Channel',
-    name: 'Channel',
-    component: () => import('../views/Channel.vue')
+    path: "/Channel",
+    name: "Channel",
+    component: () => import("../views/Channel.vue"),
   },
   {
-    path: '/heightlight',
-    name: 'Heightlight',
-    component: () => import('../views/Heightlight.vue')
+    path: "/heightlight",
+    name: "Heightlight",
+    component: () => import("../views/Heightlight.vue"),
   },
   {
-    path: '/realData',
-    name: 'RealData',
-    component: () => import('../views/RealData.vue')
+    path: "/realData",
+    name: "RealData",
+    component: () => import("../views/RealData.vue"),
   },
   {
     path: "/liveChannel",
-    name: 'LiveChannel',
-    component: () => import('../views/LiveChannel.vue')
+    name: "LiveChannel",
+    component: () => import("../views/LiveChannel.vue"),
   },
   {
     path: "/boutiqueColumn",
-    name: 'boutiqueColumn',
-    component: () => import('../views/BoutiqueColumn/BoutiqueColumn.vue')
+    name: "boutiqueColumn",
+    component: () => import("../views/BoutiqueColumn/BoutiqueColumn.vue"),
   },
   {
     path: "/activity",
-    name: 'Activity',
-    component: () => import('../views/Activity/Activity.vue')
+    name: "Activity",
+    component: () => import("../views/Activity/Activity.vue"),
   },
   {
     path: "/radio",
-    name: 'Radio',
-    component: () => import('../views/Radio/Radio.vue')
-  }
-]
+    name: "Radio",
+    component: () => import("../views/Radio/Radio.vue"),
+  },
+  {
+    path: "/country",
+    component: () => import("../views/Country/Index.vue"),
+    children: [
+        {
+            path: "",
+            component: ()=> import("../views/ChannelEPG/Channel.vue")
+        }
+    ],
+  },
+];
 
 const router = createRouter({
   history: createWebHashHistory(process.env.BASE_URL),
-  routes
-})
+  routes,
+});
 
-export default router
+export default router;

src/views/ChannelEPG/Channel.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="channel">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>传统媒体</el-breadcrumb-item>
+      <el-breadcrumb-item>智能电视</el-breadcrumb-item>
+      <el-breadcrumb-item>收视分析</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-card class="box-card">
+      <el-form
+        ref="form"
+        :model="form"
+        size="small"
+        :inline="true"
+        label-width="120px"
+        class="demo-form-inline"
+      >
+        <el-form-item label="日期">
+          <el-date-picker
+            v-model="form.date"
+            type="daterange"
+            :disabled-date="time => disabledDate(time)"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="频道">
+          <el-select
+            v-model="form.channel"
+            placeholder="Activity zone"
+            collapse-tags
+            multiple
+            reserve-keyword
+          >
+            <el-option label="Zone one" value="shanghai"></el-option>
+            <el-option label="Zone one1" value="shanghai1"></el-option>
+            <el-option label="Zone one2" value="shanghai2"></el-option>
+            <el-option label="Zone two" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="固定时刻">
+          <el-select
+            v-model="form.timerange"
+            placeholder="Activity zone"
+            collapse-tags
+            multiple
+            reserve-keyword
+          >
+            <el-option label="Zone one" value="shanghai"></el-option>
+            <el-option label="Zone one1" value="shanghai1"></el-option>
+            <el-option label="Zone one2" value="shanghai2"></el-option>
+            <el-option label="Zone two" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时段">
+          <el-time-picker
+            v-model="form.value1"
+            is-range
+            range-separator="-"
+            start-placeholder="开始时刻"
+            end-placeholder="结束时刻"
+          >
+          </el-time-picker>
+        </el-form-item>
+        <el-form-item label="行业分城">
+          <el-select
+            v-model="form.city"
+            placeholder="Activity zone"
+            collapse-tags
+            multiple
+            reserve-keyword
+          >
+            <el-option label="Zone one" value="shanghai"></el-option>
+            <el-option label="Zone one1" value="shanghai1"></el-option>
+            <el-option label="Zone one2" value="shanghai2"></el-option>
+            <el-option label="Zone two" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="全国大区">
+          <el-select
+            v-model="form.region"
+            placeholder="Activity zone"
+            collapse-tags
+            multiple
+            reserve-keyword
+          >
+            <el-option label="Zone one" value="shanghai"></el-option>
+            <el-option label="Zone one1" value="shanghai1"></el-option>
+            <el-option label="Zone one2" value="shanghai2"></el-option>
+            <el-option label="Zone two" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item style="float: right">
+          <el-button type="primary">查询</el-button>
+          <el-button type="primary">导出</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <br />
+    <el-card class="box-card">
+      <canvas id="linechart"></canvas>
+      <br />
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column prop="date" label="Date" />
+        <el-table-column prop="name" label="Name"  />
+        <el-table-column prop="address" label="Address" />
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import config from "@/config/index";
+export default {
+  name: "Channel",
+  data() {
+    return {
+      form: {
+        date: [],
+      },
+      tableData: [
+        {
+          date: "2016-05-03",
+          name: "Tom",
+          address: "No. 189, Grove St, Los Angeles",
+        },
+        {
+          date: "2016-05-02",
+          name: "Tom",
+          address: "No. 189, Grove St, Los Angeles",
+        },
+        {
+          date: "2016-05-04",
+          name: "Tom",
+          address: "No. 189, Grove St, Los Angeles",
+        },
+        {
+          date: "2016-05-01",
+          name: "Tom",
+          address: "No. 189, Grove St, Los Angeles",
+        },
+      ],
+    };
+  },
+  mounted() {
+    console.log(config);
+  },
+  computed: {},
+  methods: {
+    disabledDate() {},
+  },
+  components: {},
+};
+</script>
+
+<style>
+.channel {
+  padding: 10px 15px;
+  height: 100vh;
+}
+</style>

src/views/Country/Index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="country">
+      <router-view />
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+export default {
+  name: "main",
+  data() {
+    return {};
+  },
+  mounted() {
+  },
+  computed: {
+  },
+  methods: {
+  },
+  components: {  },
+};
+</script>
+
+<style>
+.country {
+  padding: 10px 15px;
+  height: 100vh;
+}
+</style>