Selaa lähdekoodia

报告主页样式修改

qinzhipeng_v 5 vuotta sitten
vanhempi
sitoutus
197fac2f08

+ 66 - 51
src/views/Platform/presentation/Assumptions.vue

@@ -1,51 +1,54 @@
 <template>
-  <div style="margin:2% 7%;">
-    <!--提测报告-->
-    <div style="float:right; margin: 30px 0;">
-      <el-input v-model="state" filterable placeholder="搜索" style="width:50%;margin-right:30px;" @change="clickQuery(state)" />
-      <el-button type="primary" @click="getQueryData(), centerDialogVisible = true">新建提测报告</el-button>
+  <div class="eleStyle">
+    <div style="height:100%;width:94%; background:#ffffff; margin: 4%; border-radius: 8px; overflow: hidden;">
+      <!--提测报告-->
+      <div style="margin: 2%; min-height: 73vh; font-size: 14px;">
+        <div style="margin: 30px 0;">搜索
+          <el-input v-model="state" filterable placeholder="搜索" style="width:20%; margin: 0 10px;" @change="clickQuery(state)" />
+          <el-button type="primary" @click="getQueryData(), centerDialogVisible = true">新建提测报告</el-button>
+        </div>
+        <template>
+          <el-table :data="tableData" :header-cell-style="{ background: '#F2F3F6' }" fit border style="width: 100%">
+            <el-table-column label="报告名称" min-width="230" align="center">
+              <template slot-scope="scope">
+                <a href="javascript:void(0)" style="color:#20a0ff" @click="toReportView(tableData, scope.row.id)">{{ scope.row.name }}</a>
+              </template>
+            </el-table-column>
+            <el-table-column label="报告人" min-width="150" align="center">
+              <template slot-scope="scope">{{ scope.row.submitter }}</template>
+            </el-table-column>
+            <el-table-column label="日期" min-width="280" align="center">
+              <template slot-scope="scope">{{ scope.row.gmtCreate }}</template>
+            </el-table-column>
+            <el-table-column label="状态" min-width="150" align="center">
+              <template slot-scope="scope">{{ scope.row.statusString }}</template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" fixed="right" min-width="230">
+              <template slot-scope="scope">
+                <el-button size="mini" @click="queryPresentation(scope.row)">更新</el-button>
+                <el-tooltip content="功能正在实现中···" placement="top"><el-button type="primary" size="mini">权限</el-button></el-tooltip>
+                <el-button size="mini" type="danger" @click="delePresentation(scope.row.id)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+        <el-pagination style="margin-top:30px;" align="center" :current-page="curIndex" :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
+          选择任务 :
+          <el-select v-model="queryData.state" filterable placeholder="搜索" style="width:80%;" @change="handleSelect($event)">
+            <el-option v-for="item in restaurants" :key="item.id" :label="item.value" :value="item.id" />
+          </el-select>
+          <span slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="selectionReport(queryData.state)">创建</el-button>
+          </span>
+        </el-dialog>
+      </div>
     </div>
-    <template>
-      <el-table :data="tableData" fit border style="width: 100%">
-        <el-table-column label="报告名称" min-width="230" align="center">
-          <template slot-scope="scope">
-            <a href="javascript:void(0)" style="color:#20a0ff" @click="toReportView(tableData, scope.row.id)">{{ scope.row.name }}</a>
-          </template>
-        </el-table-column>
-        <el-table-column label="报告人" min-width="150" align="center">
-          <template slot-scope="scope">{{ scope.row.submitter }}</template>
-        </el-table-column>
-        <el-table-column label="日期" min-width="280" align="center">
-          <template slot-scope="scope">{{ scope.row.gmtCreate }}</template>
-        </el-table-column>
-        <el-table-column label="状态" min-width="150" align="center">
-          <template slot-scope="scope">{{ scope.row.statusString }}</template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" fixed="right" min-width="230">
-          <template slot-scope="scope">
-            <el-button size="mini" @click="queryPresentation(scope.row)">更新</el-button>
-            <el-tooltip content="功能正在实现中···" placement="top"><el-button size="mini">权限</el-button></el-tooltip>
-            <el-button size="mini" @click="delePresentation(scope.row.id)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </template>
-    <el-pagination style="margin-top:30px;" align="center" :current-page="curIndex" :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
-    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
-      选择任务 :
-      <el-select v-model="queryData.state" filterable placeholder="搜索" style="width:80%;" @change="handleSelect($event)">
-        <el-option v-for="item in restaurants" :key="item.id" :label="item.value" :value="item.id" />
-      </el-select>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="selectionReport(queryData.state)">创建</el-button>
-      </span>
-    </el-dialog>
   </div>
 </template>
 
 <script>
 import { launchTestList, launchTestDelete, taskListCreate } from '@/api/InterfaceReport'
-
 export default {
   name: 'Assumptions',
   data() {
@@ -53,7 +56,7 @@ export default {
       userInformation: localStorage.getItem('username'),
       userNames: localStorage.getItem('realname'),
       bizJson: localStorage.getItem('key'),
-      pageSize: 20,
+      pageSize: 5,
       curIndex: 1,
       total: 0,
       state: '',
@@ -65,7 +68,7 @@ export default {
       centerDialogVisible: false,
       queryData: {},
       indexPage: {
-        pageSize: 20,
+        pageSize: 5,
         curIndex: 1
       },
       tableData: [],
@@ -74,21 +77,27 @@ export default {
     }
   },
   created() {
-    this.getList()
+    this.getList(localStorage.getItem('key'))
   },
   mounted() {
     this.getQueryData()
   },
   methods: {
-    getList() {
+    getList(e) {
       this.indexPage = {
-        bizId: this.bizJson,
+        bizId: e,
         pageSize: this.pageSize,
         curIndex: this.curIndex
       }
       launchTestList(this.indexPage).then(res => {
-        this.tableData = res.data
-        this.total = res.total
+        if (res.code === 200) {
+          this.tableData = res.data
+          this.total = res.total
+        } else {
+          this.$message({ message: res.msg, type: 'error', duration: 1000, offset: 150 })
+        }
+        // this.tableData = res.data
+        // this.total = res.total
       })
     },
     // 删除报告
@@ -101,7 +110,7 @@ export default {
         .then(() => {
           this.userData = { id: '', ename: this.userInformation, name: this.userNames }
           launchTestDelete(this.userData, e).then(res => {
-            this.getList()
+            this.getList(localStorage.getItem('key'))
           })
           this.$message({ type: 'success', message: '已删除' })
         })
@@ -163,11 +172,11 @@ export default {
     },
     handleSizeChange(size) {
       this.pageSize = size
-      this.getList()
+      this.getList(localStorage.getItem('key'))
     },
     handleCurrentChange(curIndex) {
       this.curIndex = curIndex
-      this.getList()
+      this.getList(localStorage.getItem('key'))
     },
     toReportView(ele, e) {
       for (var vel of ele) {
@@ -185,4 +194,10 @@ export default {
 </script>
 
 <style scoped>
+.eleStyle {
+    width: 100%;
+    height:100%;
+    background:#F2F3F6;
+    display: inline-block;
+  }
 </style>

+ 71 - 57
src/views/Platform/presentation/ResultPage.vue

@@ -1,52 +1,56 @@
 <template>
-  <div style="margin:2% 7%;">
-    <!--准出报告-->
-    <div style="float:right; margin: 30px 0;">
-      <el-input v-model="state" filterable placeholder="搜索" style="width:50%;margin-right:30px;" @change="clickQuery(state)" />
-      <el-button type="primary" @click="getQueryData(), centerDialogVisible = true">新建准出报告</el-button>
-    </div>
-    <template>
-      <el-table :data="tableData" fit border style="width: 100%">
-        <el-table-column label="报告名称" min-width="150" align="center">
-          <template slot-scope="scope">
-            <a href="javascript:void(0)" style="color:#20a0ff" @click="toReportView(tableData, scope.row.id)">{{ scope.row.reportName }}</a>
-          </template>
-        </el-table-column>
-        <el-table-column label="报告人" min-width="150" align="center">
-          <template slot-scope="scope">{{ scope.row.ownner }}</template>
-        </el-table-column>
-        <el-table-column label="日期" min-width="150" align="center">
-          <template slot-scope="scope">{{ scope.row.gmtCreate }}</template>
-        </el-table-column>
-        <el-table-column label="状态" min-width="150" align="center">
-          <template slot-scope="scope">{{ scope.row.statusString }}</template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" fixed="right" min-width="230">
-          <template slot-scope="scope">
-            <el-button size="mini" @click="queryPresentation(scope.row)">更新</el-button>
-            <el-tooltip content="功能正在实现中···" placement="top">
-              <el-button size="mini">权限</el-button>
-            </el-tooltip>
-            <el-button size="mini" @click="delePresentation(scope.row.id)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </template>
-    <el-pagination style="margin-top:30px;" align="center" :current-page="curIndex" :page-sizes="[20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
-    <el-dialog title="选择任务" :visible.sync="centerDialogVisible" width="30%" center @close="closeChange">
-      <div style="text-align:text;margin:10px 0;">
-        <el-button ref="btn1" size="mini" @click="getQueryData(1)">项目</el-button>
-        <el-button ref="btn2" size="mini" @click="getQueryData(2)">任务</el-button>
-      </div>
-      <div>
-        <el-select v-model="states" filterable placeholder="请选择项目还是任务" style="width:100%;">
-          <el-option v-for="item in restaurants" :key="item.id" :label="item.value" :value="item.id" />
-        </el-select>
+  <div class="eleStyle">
+    <div style="height:100%;width:94%; background:#ffffff; margin: 4%; border-radius: 8px; overflow: hidden;">
+      <!--准出报告-->
+      <div style="margin: 2%; min-height: 73vh; font-size: 14px;">
+        <div style="margin: 30px 0;">搜索
+          <el-input v-model="state" filterable placeholder="搜索" style="width:20%; margin: 0 10px;" @change="clickQuery(state)" />
+          <el-button type="primary" @click="getQueryData(), centerDialogVisible = true">新建准出报告</el-button>
+        </div>
+        <template>
+          <el-table :data="tableData" :header-cell-style="{ background: '#F2F3F6' }" fit border style="width: 100%">
+            <el-table-column label="报告名称" min-width="150" align="center">
+              <template slot-scope="scope">
+                <a href="javascript:void(0)" style="color:#20a0ff" @click="toReportView(tableData, scope.row.id)">{{ scope.row.reportName }}</a>
+              </template>
+            </el-table-column>
+            <el-table-column label="报告人" min-width="150" align="center">
+              <template slot-scope="scope">{{ scope.row.ownner }}</template>
+            </el-table-column>
+            <el-table-column label="日期" min-width="150" align="center">
+              <template slot-scope="scope">{{ scope.row.gmtCreate }}</template>
+            </el-table-column>
+            <el-table-column label="状态" min-width="150" align="center">
+              <template slot-scope="scope">{{ scope.row.statusString }}</template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" fixed="right" min-width="230">
+              <template slot-scope="scope">
+                <el-button size="mini" @click="queryPresentation(scope.row)">更新</el-button>
+                <el-tooltip content="功能正在实现中···" placement="top">
+                  <el-button size="mini" type="primary">权限</el-button>
+                </el-tooltip>
+                <el-button size="mini" type="danger" @click="delePresentation(scope.row.id)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+        <el-pagination style="margin-top:30px;" align="center" :current-page="curIndex" :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        <el-dialog title="选择任务" :visible.sync="centerDialogVisible" width="30%" center @close="closeChange">
+          <div style="text-align:text;margin:10px 0;">
+            <el-button ref="btn1" size="mini" @click="getQueryData(1)">项目</el-button>
+            <el-button ref="btn2" size="mini" @click="getQueryData(2)">任务</el-button>
+          </div>
+          <div>
+            <el-select v-model="states" filterable placeholder="请选择项目还是任务" style="width:100%;">
+              <el-option v-for="item in restaurants" :key="item.id" :label="item.value" :value="item.id" />
+            </el-select>
+          </div>
+          <span slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="selectionReport(states)">创建</el-button>
+          </span>
+        </el-dialog>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="selectionReport(states)">创建</el-button>
-      </span>
-    </el-dialog>
+    </div>
   </div>
 </template>
 
@@ -61,7 +65,7 @@ export default {
       userInformation: localStorage.getItem('username'),
       userNames: localStorage.getItem('realname'),
       bizJson: localStorage.getItem('key'),
-      pageSize: 20,
+      pageSize: 5,
       curIndex: 1,
       total: 0,
       state: '',
@@ -69,28 +73,32 @@ export default {
       centerDialogVisible: false,
       states: '',
       indexPage: {
-        pageSize: 20,
+        pageSize: 5,
         curIndex: 1
       },
       tableData: [{}]
     }
   },
   created() {
-    this.getList()
+    this.getList(localStorage.getItem('key'))
   },
   mounted() {
     this.getQueryData()
   },
   methods: {
-    getList() {
+    getList(e) {
       this.indexPage = {
-        bizId: this.bizJson,
+        bizId: e,
         pageSize: this.pageSize,
         curIndex: this.curIndex
       }
       projectTestReportList(this.indexPage).then(res => {
-        this.tableData = res.data
-        this.total = res.total
+        if (res.code === 200) {
+          this.tableData = res.data
+          this.total = res.total
+        } else {
+          this.$message({ message: res.msg, type: 'error', duration: 1000, offset: 150 })
+        }
       })
     },
     toReportView(ele, e) {
@@ -112,7 +120,7 @@ export default {
         .then(() => {
           this.userData = { id: '', ename: this.userInformation, name: this.userNames }
           projectTestReportDelete(this.userData, e).then(res => {
-            this.getList()
+            this.getList(localStorage.getItem('key'))
           })
           this.$message({ type: 'success', message: '已删除' })
         })
@@ -203,11 +211,11 @@ export default {
     },
     handleSizeChange(size) {
       this.pageSize = size
-      this.getList()
+      this.getList(localStorage.getItem('key'))
     },
     handleCurrentChange(curIndex) {
       this.curIndex = curIndex
-      this.getList()
+      this.getList(localStorage.getItem('key'))
     },
     errorFun() {
       this.$notify({ title: 'Failed', message: 'Created Failed', type: 'error', duration: 2000 })
@@ -217,4 +225,10 @@ export default {
 </script>
 
 <style scoped>
+.eleStyle {
+    width: 100%;
+    height:100%;
+    background:#F2F3F6;
+    display: inline-block;
+  }
 </style>

+ 74 - 56
src/views/Platform/presentation/testPresentation.vue

@@ -1,49 +1,53 @@
 <template>
-  <div style="margin:2% 7%;">
-    <!--日报报告-->
-    <div style="float:right; margin: 30px 0;">
-      <el-input v-model="state" filterable placeholder="搜索" style="width:50%;margin-right:30px;" @change="clickQuery(state)" />
-      <el-button type="primary" @click="centerDialogVisible = true">新建日报报告</el-button>
-    </div>
-    <template>
-      <el-table :data="tableData" fit border style="width: 100%">
-        <el-table-column label="报告名称" min-width="280" align="center">
-          <template slot-scope="scope">
-            <a href="javascript:void(0)" style="color:#20a0ff" @click="toReportView(scope.row.id)">{{ scope.row.reportName }}</a>
-          </template>
-        </el-table-column>
-        <el-table-column label="报告人" min-width="180" align="center">
-          <template slot-scope="scope">{{ scope.row.ownner }}</template>
-        </el-table-column>
-        <el-table-column label="日期" min-width="280" align="center">
-          <template slot-scope="scope">{{ scope.row.gmtCreate }}</template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" fixed="right" min-width="230">
-          <template slot-scope="scope">
-            <el-button size="mini" @click="queryPresentation(scope.row)">更新</el-button>
-            <el-tooltip content="功能正在实现中···" placement="top">
-              <el-button size="mini">权限</el-button>
-            </el-tooltip>
-            <el-button size="mini" @click="delePresentation(scope.row.id)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </template>
-    <el-pagination style="margin-top:30px;" align="center" :current-page="curIndex" :page-sizes="[20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
-    <el-dialog title="选择任务" :visible.sync="centerDialogVisible" width="30%" center @close="closeChange">
-      <div style="text-align:text;margin:10px 0;">
-        <el-button ref="btn1" size="mini" @click="getQueryData(1)">项目</el-button>
-        <el-button ref="btn2" size="mini" @click="getQueryData(2)">任务</el-button>
-      </div>
-      <div>
-        <el-select v-model="queryDataState.code" filterable placeholder="请选择项目还是任务" style="width:100%;">
-          <el-option v-for="item in restaurants" :key="item.id" :label="item.name" :value="item.id" />
-        </el-select>
+  <div class="eleStyle">
+    <div style="height:100%;width:94%; background:#ffffff; margin: 4%; border-radius: 8px; overflow: hidden;">
+      <!--日报报告-->
+      <div style="margin: 2%; min-height: 73vh; font-size: 14px;">
+        <div style="margin: 30px 0;">搜索
+          <el-input v-model="state" size="medium" filterable placeholder="请搜索" style="width:20%;margin: 0 10px;" @change="clickQuery(state)" />
+          <el-button type="primary" size="medium" @click="centerDialogVisible = true">新建日报报告</el-button>
+        </div>
+        <template>
+          <el-table :data="tableData" :header-cell-style="{ background: '#F2F3F6' }" fit border style="width: 100%">
+            <el-table-column label="报告名称" min-width="280" align="center">
+              <template slot-scope="scope">
+                <a href="javascript:void(0)" style="color:#20a0ff" @click="toReportView(scope.row.id)">{{ scope.row.reportName }}</a>
+              </template>
+            </el-table-column>
+            <el-table-column label="报告人" min-width="180" align="center">
+              <template slot-scope="scope">{{ scope.row.ownner }}</template>
+            </el-table-column>
+            <el-table-column label="创建时间" min-width="280" align="center">
+              <template slot-scope="scope">{{ scope.row.gmtCreate }}</template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" fixed="right" min-width="230">
+              <template slot-scope="scope">
+                <el-button size="mini" @click="queryPresentation(scope.row)">更新</el-button>
+                <el-tooltip content="功能正在实现中···" placement="top">
+                  <el-button size="mini" type="primary">权限</el-button>
+                </el-tooltip>
+                <el-button size="mini" type="danger" @click="delePresentation(scope.row.id)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+        <el-pagination style="margin-top:30px;" align="center" :current-page="curIndex" :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        <el-dialog title="选择任务" :visible.sync="centerDialogVisible" width="30%" center @close="closeChange">
+          <div style="text-align:text;margin:10px 0;">
+            <el-button ref="btn1" size="mini" @click="getQueryData(1)">项目</el-button>
+            <el-button ref="btn2" size="mini" @click="getQueryData(2)">任务</el-button>
+          </div>
+          <div>
+            <el-select v-model="queryDataState.code" filterable placeholder="请选择项目还是任务" style="width:100%;">
+              <el-option v-for="item in restaurants" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
+          </div>
+          <span slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="createPresentation(queryDataState.code)">创建</el-button>
+          </span>
+        </el-dialog>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="createPresentation(queryDataState.code)">创建</el-button>
-      </span>
-    </el-dialog>
+    </div>
   </div>
 </template>
 
@@ -62,7 +66,7 @@ export default {
       centerDialogVisible1: false,
       getListAllData: [],
       queryDataState: {},
-      pageSize: 20,
+      pageSize: 5,
       curIndex: 1,
       total: 0,
       state: '',
@@ -71,28 +75,32 @@ export default {
         state: ''
       },
       indexPage: {
-        pageSize: 20,
+        pageSize: 5,
         curIndex: 1
       },
       tableData: []
     }
   },
   created() {
-    this.getList()
+    this.getList(localStorage.getItem('key'))
   },
   mounted() {
     this.getQueryData()
   },
   methods: {
-    getList() {
+    getList(e) {
       this.indexPage = {
-        bizId: this.bizJson,
+        bizId: e,
         pageSize: this.pageSize,
         curIndex: this.curIndex
       }
       dailyReportList(this.indexPage).then(res => {
-        this.tableData = res.data
-        this.total = res.total
+        if (res.code === 200) {
+          this.tableData = res.data
+          this.total = res.total
+        } else {
+          this.$message({ message: res.msg, type: 'error', duration: 1000, offset: 150 })
+        }
       })
     },
     // 查看跳转
@@ -109,7 +117,7 @@ export default {
         .then(() => {
           this.userData = { id: '', ename: this.userInformation, name: this.userNames }
           dailyReportDelete(this.userData, e).then(res => {
-            this.getList()
+            this.getList(localStorage.getItem('key'))
           })
           this.$message({ type: 'success', message: '已删除' })
         })
@@ -124,7 +132,9 @@ export default {
             var type = ele
           }
         }
+        console.log(type)
         this.queryData.state = ''
+        this.centerDialogVisible = false
         this.$router.push({ path: '/Platform/presentation/DailyNewsAdded', query: { state1: type }})
       } else {
         this.$message({ type: 'error', message: '请选择任务' })
@@ -153,7 +163,7 @@ export default {
         switch (e) {
           case 1:
             for (var ele of res.data.projectInfoList) {
-              arr.push({ name: ele.name, id: ele.id, type: ele.platForm, bizId: ele.bizId })
+              arr.push({ name: ele.name, id: ele.id, type: ele.platForm, bizId: ele.bizId, projectId: ele.id })
             }
             this.restaurants = arr
             this.$refs['btn1'].$el.style.background = '#409EFF'
@@ -163,7 +173,7 @@ export default {
             break
           case 2:
             for (var vel of res.data.taskInfoList) {
-              arr.push({ name: vel.name, id: vel.id, type: vel.type, bizId: vel.bizId })
+              arr.push({ name: vel.name, id: vel.id, type: vel.type, bizId: vel.bizId, taskId: vel.id })
             }
             this.restaurants = arr
             this.$refs['btn1'].$el.style.background = '#FFFFFF'
@@ -181,12 +191,20 @@ export default {
     },
     handleSizeChange(size) {
       this.pageSize = size
-      this.getList()
+      this.getList(localStorage.getItem('key'))
     },
     handleCurrentChange(curIndex) {
       this.curIndex = curIndex
-      this.getList()
+      this.getList(localStorage.getItem('key'))
     }
   }
 }
 </script>
+<style scoped>
+.eleStyle {
+    width: 100%;
+    height:100%;
+    background:#F2F3F6;
+    display: inline-block;
+  }
+</style>