Skip to content

H
hu-shoujijingfen-h5
Commit 7c8ec8c8 by chenweisong
Options

营销模块改bug

parent 05be57df
Showing with 172 additions and 126 deletions
src/views/app/gridMarketing.vue
...@@ -68,21 +68,18 @@ ...@@ -68,21 +68,18 @@
v-if="popObjMouth.visable" v-if="popObjMouth.visable"
:obj="popObjMouth"></Popup> :obj="popObjMouth"></Popup>
</div> </div>
<div class="select-bar"> <!-- <div class="select-bar">-->
<select @change="handleSelect"> <!-- <select @change="handleSelect">-->
<option :key="i" v-for="(item,i) in categories" :value="item.id">{{item.name}}</option> <!-- <option :key="i" v-for="(item,i) in categories" :value="item.id">{{item.name}}</option>-->
</select> <!-- </select>-->
</div> <!-- </div>-->
<div class=" select-bar">
<div class="divInput">
<div class="input" @click="openValue"> <div class="input" @click="openValue">
<input v-model="value" type="text" placeholder="筛选实验类型"> <div v-html="value"></div>
</div> </div>
<div class="list" v-show="show"> <div class="list" v-show="show">
<ul> <ul>
<li @click="getvalue(index,item)" v-for="(item,index) in tableData" :key="item.index">{{ <li @click="handleSelect( item)" v-for="(item,index) in categories" :key="item.index">{{
item.name }} item.name }}
</li> </li>
</ul> </ul>
...@@ -106,7 +103,7 @@ ...@@ -106,7 +103,7 @@
id="table" id="table"
class="rolling-table tableDetails" class="rolling-table tableDetails"
ref="tableBoxDetails" ref="tableBoxDetails"
:style="{height: maxHeight + 'px',overflow: overflowStyle}" :style="{height: maxHeight + 'px',overflow: overflowStyle, zIndex: -1}"
> >
<table v-if="isShowTable" class="table" cellpadding="0" cellspacing="0" ref="table"> <table v-if="isShowTable" class="table" cellpadding="0" cellspacing="0" ref="table">
<thead ref="theadDetails"> <thead ref="theadDetails">
...@@ -202,19 +199,6 @@ ...@@ -202,19 +199,6 @@
}, },
data() { data() {
return { return {
tableData: [
{
'name': 111
},
{
'name': 222
},
{
'name': 333
}, {
'name': 444
}
],
show: false, show: false,
value: '', value: '',
categories: [], categories: [],
...@@ -336,12 +320,10 @@ ...@@ -336,12 +320,10 @@
openValue() { openValue() {
this.show = !this.show; this.show = !this.show;
}, },
getvalue(index, item) { handleSelect(item) {
this.value = item.name; this.value = item.name + " v";
this.show = false; this.show = false;
}, let id = parseInt(item.id);
handleSelect(e) {
let id = parseInt(e.target.value);
this.kpiList = []; this.kpiList = [];
this.bodyList = []; this.bodyList = [];
this.activeKpiItem = {}; this.activeKpiItem = {};
...@@ -988,7 +970,13 @@ ...@@ -988,7 +970,13 @@
} }
, ,
watch: { watch: {
showUpperLevel(val) { categories: {
immediate: true,
handler(val) {
if (val && val.length) {
this.value = val[0].name + " v"
}
}
} }
, ,
cacheList: { cacheList: {
...@@ -1121,27 +1109,64 @@ ...@@ -1121,27 +1109,64 @@
height: 0.5rem; height: 0.5rem;
color: #999; color: #999;
select { .input {
border: none; width: 1.6rem;
/* //清除select聚焦时候的边框颜色 */ height: 0.5rem;
outline: none; line-height: 0.5rem;
line-height: 0.3rem; position: relative;
/* //隐藏select的下拉图标 */
appearance: none; div {
-moz-appearance: none; border: none;
-webkit-appearance: none; outline: none;
-webkit-appearance: none; width: 90%;
-moz-appearance: none; font-size: 0.05rem;
/* //通过padding-left的值让文字居中 */ color: #2b90fa;
text-align: center; }
background: transparent;
color: #2b90fa; img {
font-size: .05rem; position: absolute;
width: 1.58rem; right: 34px;
height: 100%; top: 48%;
}
option { }
font-size: .05rem;
ul {
padding: 0;
margin: 0;
li {
padding: 0;
margin: 0;
list-style: none;
}
}
.list {
background-color: #fff;
z-index: 1;
width: 1.8rem;
border: 1px solid #cccccc;
overflow: hidden;
ul {
li {
width: 100%;
height: 0.45rem;
cursor: pointer;
line-height: 0.45rem;
border-bottom: solid 1px #cccccc;
color: #999999;
font-size: .05rem;
&:hover {
background-color: #cccccc;
}
&:last-child {
border-bottom: none;
}
}
} }
} }
} }
...@@ -1364,50 +1389,5 @@ ...@@ -1364,50 +1389,5 @@
} }
.divInput {
position: absolute;
}
ul li {
list-style: none;
}
.input {
width: 140px;
height: 40px;
line-height: 40px;
padding-left: 10px;
border: 1px solid #cccccc;
position: relative;
}
.input input {
border: none;
outline: none;
width: 90%;
}
.input img {
position: absolute;
right: 34px;
top: 48%;
}
.list {
width: 150px;
border: 1px solid #cccccc;
overflow: hidden;
}
.list ul li {
width: 100%;
height: 30px;
cursor: pointer;
line-height: 30px;
padding-left: 10px;
}
.list ul li:hover {
background-color: #cccccc;
}
</style> </style>
src/views/app/gridMarketing2.vue
...@@ -68,11 +68,24 @@ ...@@ -68,11 +68,24 @@
v-if="popObjMouth.visable" v-if="popObjMouth.visable"
:obj="popObjMouth"></Popup> :obj="popObjMouth"></Popup>
</div> </div>
<div class="select-bar"> <!-- <div class="select-bar">-->
<select @change="handleSelect"> <!-- <select @change="handleSelect">-->
<option :key="i" v-for="(item,i) in categories" :value="item.id">{{item.name}}</option> <!-- <option :key="i" v-for="(item,i) in categories" :value="item.id">{{item.name}}</option>-->
</select> <!-- </select>-->
<!-- </div>-->
<div class=" select-bar">
<div class="input" @click="openValue">
<div v-html="value"></div>
</div>
<div class="list" v-show="show">
<ul>
<li @click="handleSelect( item)" v-for="(item,index) in categories" :key="item.index">{{
item.name }}
</li>
</ul>
</div>
</div> </div>
</div> </div>
<div ref="kpiRef" class="kpis"> <div ref="kpiRef" class="kpis">
<div class="kpi" :style="{width: kpiWidth}"> <div class="kpi" :style="{width: kpiWidth}">
...@@ -90,7 +103,7 @@ ...@@ -90,7 +103,7 @@
id="table" id="table"
class="rolling-table tableDetails" class="rolling-table tableDetails"
ref="tableBoxDetails" ref="tableBoxDetails"
:style="{height: maxHeight + 'px',overflow: overflowStyle}" :style="{height: maxHeight + 'px',overflow: overflowStyle, zIndex: -1}"
> >
<table v-if="isShowTable" class="table" cellpadding="0" cellspacing="0" ref="table"> <table v-if="isShowTable" class="table" cellpadding="0" cellspacing="0" ref="table">
<thead ref="theadDetails"> <thead ref="theadDetails">
...@@ -186,6 +199,8 @@ ...@@ -186,6 +199,8 @@
}, },
data() { data() {
return { return {
show: false,
value: '',
categories: [], categories: [],
categoriesOrigin: [], categoriesOrigin: [],
public: true, public: true,
...@@ -302,8 +317,13 @@ ...@@ -302,8 +317,13 @@
} }
}, },
methods: { methods: {
handleSelect(e) { openValue() {
let id = parseInt(e.target.value); this.show = !this.show;
},
handleSelect(item) {
this.value = item.name + " v";
this.show = false;
let id = parseInt(item.id);
this.kpiList = []; this.kpiList = [];
this.bodyList = []; this.bodyList = [];
this.activeKpiItem = {}; this.activeKpiItem = {};
...@@ -950,7 +970,13 @@ ...@@ -950,7 +970,13 @@
} }
, ,
watch: { watch: {
showUpperLevel(val) { categories: {
immediate: true,
handler(val) {
if (val && val.length) {
this.value = val[0].name + " v"
}
}
} }
, ,
cacheList: { cacheList: {
...@@ -1083,27 +1109,64 @@ ...@@ -1083,27 +1109,64 @@
height: 0.5rem; height: 0.5rem;
color: #999; color: #999;
select { .input {
border: none; width: 1.6rem;
/* //清除select聚焦时候的边框颜色 */ height: 0.5rem;
outline: none; line-height: 0.5rem;
line-height: 0.3rem; position: relative;
/* //隐藏select的下拉图标 */
appearance: none; div {
-moz-appearance: none; border: none;
-webkit-appearance: none; outline: none;
-webkit-appearance: none; width: 90%;
-moz-appearance: none; font-size: 0.05rem;
/* //通过padding-left的值让文字居中 */ color: #2b90fa;
text-align: center; }
background: transparent;
color: #2b90fa; img {
font-size: .05rem; position: absolute;
width: 1.58rem; right: 34px;
height: 100%; top: 48%;
}
option { }
font-size: .05rem;
ul {
padding: 0;
margin: 0;
li {
padding: 0;
margin: 0;
list-style: none;
}
}
.list {
background-color: #fff;
z-index: 1;
width: 1.8rem;
border: 1px solid #cccccc;
overflow: hidden;
ul {
li {
width: 100%;
height: 0.45rem;
cursor: pointer;
line-height: 0.45rem;
border-bottom: solid 1px #cccccc;
color: #999999;
font-size: .05rem;
&:hover {
background-color: #cccccc;
}
&:last-child {
border-bottom: none;
}
}
} }
} }
} }
...@@ -1323,5 +1386,8 @@ ...@@ -1323,5 +1386,8 @@
width: 0.4rem; width: 0.4rem;
} }
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment