添加月报

src/router/newRouter.js

@@ -339,6 +339,21 @@ const layout = [
         meta: { title: '配置中心' }
       }
     ]
+  },
+  {
+    path: '/monthlyReport',
+    name: '质量月报',
+    component: Layout,
+    icon: 'person-workbench',
+    redirect: '/monthlyReport',
+    children: [
+      {
+        path: 'monthlyReport',
+        name: '质量月报',
+        component: () => import('@/views/monthlyReport/index.vue'),
+        meta: { title: '质量月报' }
+      }
+    ]
   }
 ]
 

src/views/monthlyReport/components/cardList.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="monthlyReport-card">
+    <div class="layout-justify-content monthlyReport-card-header">
+      <div class="monthlyReport-Label">两轮车</div>
+      <div class="monthlyReport-Label">查看更多</div>
+    </div>
+    <div>
+      <span>重点问题</span>
+      <span>{{ '待反馈: 秦志鹏。改进项5项，已完成3项' }}</span>
+      <div>本月新增线上问题5个，归属于XXX团队，责任人XXX。</div>
+      <div>本月提测打回5个：XXX，XXX，XXX</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/monthlyReport/components/header.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="layout-justify-content monthlyReport-header">
+    <div class="layout-justify-content">
+      <div class="monthlyReport-Label">请选择</div>
+      <el-select v-model="value" placeholder="请选择">
+        <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">
+          <span style="float: left">{{ item.label }}</span>
+          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
+        </el-option>
+      </el-select>
+    </div>
+    <div>
+      <el-button type="primary">新建月报</el-button>
+      <el-button>月报设置</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import '../styles/index.scss'
+export default {
+  data() {
+    return {
+      cities: [{
+        value: 'Beijing',
+        label: '北京'
+      }, {
+        value: 'Shanghai',
+        label: '上海'
+      }, {
+        value: 'Nanjing',
+        label: '南京'
+      }, {
+        value: 'Chengdu',
+        label: '成都'
+      }, {
+        value: 'Shenzhen',
+        label: '深圳'
+      }, {
+        value: 'Guangzhou',
+        label: '广州'
+      }],
+      value: ''
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/monthlyReport/components/main.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <div style="padding: 20px 0;">
+      <span class="monthlyReport-Label monthlyReport-title ">{{ '2021.02质量月报' }}</span>
+      <span>查看完整报告</span>
+    </div>
+    <div><i class="el-icon-warning" />本周质量月报 两轮车 有您负责的重点问题需要填写分析反馈，请点击 两轮车 的“查看更多”按钮进入天蝎！</div>
+  </div>
+</template>
+
+<script>
+import '../styles/index.scss'
+export default {
+  data() {
+    return {
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/monthlyReport/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <monthly-header />
+    <div class="monthlyReport-header">
+      <monthlyMain />
+      <el-row :gutter="12">
+        <el-col :span="8">
+          <monthlyCard />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import monthlyHeader from './components/header'
+import monthlyMain from './components/main'
+import monthlyCard from './components/cardList'
+import './styles/index.scss'
+export default {
+  components: {
+    monthlyHeader,
+    monthlyMain,
+    monthlyCard
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/monthlyReport/styles/index.scss

@@ -0,0 +1,33 @@
+.monthlyReport-header {
+  min-height: 60px;
+  background: #FFF;
+  margin: 0 10px 10px;
+  border-radius: 4px;
+  padding: 0 30px;
+}
+.monthlyReport-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.monthlyReport-Label {
+ margin-right: 20px;
+}
+
+// card
+.monthlyReport-card {
+  border: 1px solid #EEE;
+  .monthlyReport-card-header {
+    border-bottom: 1px solid #EEE;
+    border-left: 5px solid red;
+  }
+}
+
+
+// 通用
+.layout-justify-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}