|
|
@@ -1,22 +1,17 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <h3 style="height: 800px;">我是首页</h3>
|
|
|
- <div>
|
|
|
- <div>
|
|
|
- <button type="button" @click.stop="$router.push('helloWorld')">添加规则</button>
|
|
|
- </div>
|
|
|
- <div v-for="(item, index) in ruleList" :key="index">
|
|
|
- <div>
|
|
|
- <span>规则名：</span>
|
|
|
- <span>{{ item.rule }}</span>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <input v-model="item.rule" type="" name="" id="" value="" />
|
|
|
- <button type="button" @click.stop="deleteItem(index)">删除</button>
|
|
|
- <button type="button" @click.stop="saveRule(item.rule, index)">保存</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="mainContent">
|
|
|
+ <el-row class="order_tab">
|
|
|
+ <el-col :span="15">
|
|
|
+ <div class="tab_list">
|
|
|
+ <div class="tab_item">
|
|
|
+ <div class="point">6</div>
|
|
|
+ <span>新订单</span>
|
|
|
+ <div class="tab_line"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9"></el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -24,26 +19,59 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- ruleList: [
|
|
|
- { id:1, rule: '', content: '' }
|
|
|
- ]
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- deleteItem(index) {
|
|
|
- this.ruleList.splice(1, index)
|
|
|
- },
|
|
|
- saveRule(t, i) {
|
|
|
- let obj = {
|
|
|
- id: i + 2,
|
|
|
- rule: t,
|
|
|
- content: ''
|
|
|
- }
|
|
|
- this.ruleList.push( obj )
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss" scoped="scoped">
|
|
|
+ .mainContent{
|
|
|
+ width: 100%;
|
|
|
+ .order_tab{
|
|
|
+ width: 100%;
|
|
|
+ height: 74px;
|
|
|
+ background: #FFF;
|
|
|
+ .tab_list{
|
|
|
+ width: 100%;
|
|
|
+ height: 74px;
|
|
|
+ padding-top: 20px;
|
|
|
+ padding-left: 36px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .tab_item{
|
|
|
+ width: 58px;
|
|
|
+ margin-right: 56px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FC7200;
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ .tab_line{
|
|
|
+ width: 58px;
|
|
|
+ height: 6px;
|
|
|
+ background: #FC7200;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+ .point{
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #F74141;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ position: absolute;
|
|
|
+ top: -5px;
|
|
|
+ right: -10px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
ZhouFeng