|
@@ -1,26 +1,25 @@
|
|
<template>
|
|
<template>
|
|
<div class="customColumnKS">
|
|
<div class="customColumnKS">
|
|
- <a-modal v-model="visibleOk" title="自定义列" on-ok="handleOk" @cancel="handleCancel" width="65%">
|
|
|
|
- <template slot="footer">
|
|
|
|
- <a-button key="back" @click="handleCancel">取消</a-button>
|
|
|
|
- <a-button key="submit" type="primary" :loading="loading" @click="handleOk">应用</a-button>
|
|
|
|
- </template>
|
|
|
|
- <!-- <a-input-search placeholder="输入要添加的列的名称" style="width: 40%" enter-button @search="onSearch" /> -->
|
|
|
|
- <div class="zhuti">
|
|
|
|
- <div class="addlist">
|
|
|
|
- <p>可添加的列</p>
|
|
|
|
- <div class="selectionList">
|
|
|
|
- <!-- v-for="(item,index) in addColumns" :key="index" -->
|
|
|
|
- <!-- <div v-if="mediaType==1"> -->
|
|
|
|
- <selectComponent
|
|
|
|
- :showCol="mylistNum"
|
|
|
|
- @getshowlist="getshowlist"
|
|
|
|
- :fixedCol="fiexColumn"
|
|
|
|
- :mediaType='mediaType'
|
|
|
|
-
|
|
|
|
- />
|
|
|
|
- <!-- </div> -->
|
|
|
|
- <!-- <div v-if="mediaType==2">
|
|
|
|
|
|
+ <a-modal v-model="visibleOk" title="自定义列" on-ok="handleOk" @cancel="handleCancel" width="65%">
|
|
|
|
+ <template slot="footer">
|
|
|
|
+ <a-button key="back" @click="handleCancel">取消</a-button>
|
|
|
|
+ <a-button key="submit" type="primary" :loading="loading" @click="handleOk">应用</a-button>
|
|
|
|
+ </template>
|
|
|
|
+ <!-- <a-input-search placeholder="输入要添加的列的名称" style="width: 40%" enter-button @search="onSearch" /> -->
|
|
|
|
+ <div class="zhuti">
|
|
|
|
+ <div class="addlist">
|
|
|
|
+ <p>可添加的列</p>
|
|
|
|
+ <div class="selectionList">
|
|
|
|
+ <!-- v-for="(item,index) in addColumns" :key="index" -->
|
|
|
|
+ <!-- <div v-if="mediaType==1"> -->
|
|
|
|
+ <selectComponent
|
|
|
|
+ :showCol="mylistNum"
|
|
|
|
+ @getshowlist="getshowlist"
|
|
|
|
+ :fixedCol="fiexColumn"
|
|
|
|
+ :mediaType="mediaType"
|
|
|
|
+ />
|
|
|
|
+ <!-- </div> -->
|
|
|
|
+ <!-- <div v-if="mediaType==2">
|
|
<selectComponentKS
|
|
<selectComponentKS
|
|
:showCol="mylistNum"
|
|
:showCol="mylistNum"
|
|
@getshowlist="getshowlist"
|
|
@getshowlist="getshowlist"
|
|
@@ -29,269 +28,265 @@
|
|
|
|
|
|
/>
|
|
/>
|
|
</div> -->
|
|
</div> -->
|
|
-
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="listNum">
|
|
|
|
- <p>已选{{mylistNum.length}}列</p>
|
|
|
|
- <a-button id="btn" type="link" @click="clearAllList">清空全部</a-button>
|
|
|
|
- <ul class="selectlist">
|
|
|
|
- <!-- draggable="true"
|
|
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="listNum">
|
|
|
|
+ <p>已选{{ mylistNum.length }}列</p>
|
|
|
|
+ <a-button id="btn" type="link" @click="clearAllList">清空全部</a-button>
|
|
|
|
+ <ul class="selectlist">
|
|
|
|
+ <!-- draggable="true"
|
|
@dragstart="handleDragStart($event, item.dataIndex)"
|
|
@dragstart="handleDragStart($event, item.dataIndex)"
|
|
@dragover.prevent="handleDragOver($event, item.dataIndex)"
|
|
@dragover.prevent="handleDragOver($event, item.dataIndex)"
|
|
@dragenter="handleDragEnter($event, item.dataIndex)"
|
|
@dragenter="handleDragEnter($event, item.dataIndex)"
|
|
@dragend="handleDragEnd($event, item.dataIndex)" -->
|
|
@dragend="handleDragEnd($event, item.dataIndex)" -->
|
|
- <li v-for="(item,index) in mylistNum" :key="index">
|
|
|
|
- <span v-if=" index < fiexColumn.length">
|
|
|
|
- <a-icon type="lock" />
|
|
|
|
- <span class="listText">{{item.title}}</span>
|
|
|
|
- </span>
|
|
|
|
- <span v-else-if=" index >=fiexColumn.length" >
|
|
|
|
- <a-icon type="menu" style="color:#ccc" />
|
|
|
|
- <span class="listText">{{item.title}}</span>
|
|
|
|
- <a-icon
|
|
|
|
- type="close"
|
|
|
|
- @click="deleteCol(item,index)"
|
|
|
|
- id="closeStyle"
|
|
|
|
- style="fontSize:12px;"
|
|
|
|
- />
|
|
|
|
- </span>
|
|
|
|
- </li>
|
|
|
|
- </ul>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </a-modal>
|
|
|
|
|
|
+ <li v-for="(item, index) in mylistNum" :key="index">
|
|
|
|
+ <span v-if="index < fiexColumn.length">
|
|
|
|
+ <a-icon type="lock" />
|
|
|
|
+ <span class="listText">{{ item.title }}</span>
|
|
|
|
+ </span>
|
|
|
|
+ <span v-else-if="index >= fiexColumn.length">
|
|
|
|
+ <a-icon type="menu" style="color: #ccc" />
|
|
|
|
+ <span class="listText">{{ item.title }}</span>
|
|
|
|
+ <a-icon
|
|
|
|
+ type="close"
|
|
|
|
+ @click="deleteCol(item, index)"
|
|
|
|
+ id="closeStyle"
|
|
|
|
+ style="fontsize: 12px"
|
|
|
|
+ />
|
|
|
|
+ </span>
|
|
|
|
+ </li>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a-modal>
|
|
</div>
|
|
</div>
|
|
- </template>
|
|
|
|
-
|
|
|
|
- <script>
|
|
|
|
- import selectComponent from './selectComponentPrject.vue'
|
|
|
|
- export default {
|
|
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import selectComponent from './selectComponentPrject.vue'
|
|
|
|
+export default {
|
|
components: {
|
|
components: {
|
|
- selectComponent,
|
|
|
|
|
|
+ selectComponent,
|
|
},
|
|
},
|
|
- props: ['visible', 'listNum', 'fiexColumn','mediaType'],
|
|
|
|
-
|
|
|
|
|
|
+ props: ['visible', 'listNum', 'fiexColumn', 'mediaType'],
|
|
|
|
+
|
|
data() {
|
|
data() {
|
|
- return {
|
|
|
|
- dragging: null,
|
|
|
|
- dataKey: 0,
|
|
|
|
- visibleOk: false,
|
|
|
|
- mylistNum: [],
|
|
|
|
- loading: false
|
|
|
|
- }
|
|
|
|
|
|
+ return {
|
|
|
|
+ dragging: null,
|
|
|
|
+ dataKey: 0,
|
|
|
|
+ visibleOk: false,
|
|
|
|
+ mylistNum: [],
|
|
|
|
+ loading: false,
|
|
|
|
+ }
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
- visible(n, o) {
|
|
|
|
- // console.log(n,o)
|
|
|
|
- this.visibleOk = this.visible
|
|
|
|
- },
|
|
|
|
- listNum: {
|
|
|
|
- handler(newValue, oldValue) {
|
|
|
|
- this.mylistNum = newValue
|
|
|
|
|
|
+ visible(n, o) {
|
|
|
|
+ console.log(n,o)
|
|
|
|
+ this.visibleOk = this.visible
|
|
|
|
+ },
|
|
|
|
+ listNum: {
|
|
|
|
+ handler(newValue, oldValue) {
|
|
|
|
+ console.log(newValue)
|
|
|
|
+ this.mylistNum = newValue
|
|
|
|
+ },
|
|
|
|
+ immediate: true,
|
|
|
|
+ // deep: true
|
|
},
|
|
},
|
|
- immediate: true
|
|
|
|
- // deep: true
|
|
|
|
- }
|
|
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- //li展示里的关闭按钮 删除当前被选中的这一个列
|
|
|
|
- deleteCol(item, index) {
|
|
|
|
- this.mylistNum = this.mylistNum.filter((item1, num) => {
|
|
|
|
- return num != index
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- handleDragStart(e, item) {
|
|
|
|
- this.dragging = item
|
|
|
|
- },
|
|
|
|
- handleDragEnd(e, item) {
|
|
|
|
- this.dragging = null
|
|
|
|
- },
|
|
|
|
- //首先把div变成可以放置的元素,即重写dragenter/dragover
|
|
|
|
- handleDragOver(e) {
|
|
|
|
- e.dataTransfer.dropEffect = 'move' // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
|
|
|
|
- },
|
|
|
|
- handleDragEnter(e, item) {
|
|
|
|
- e.dataTransfer.effectAllowed = 'move' //为需要移动的元素设置dragstart事件
|
|
|
|
- if (item === this.dragging) {
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- const newItems = [...this.mylistNum]
|
|
|
|
- const src = newItems.findIndex(v => v.dataIndex === this.dragging)
|
|
|
|
- const dst = newItems.findIndex(v => v.dataIndex === item)
|
|
|
|
-
|
|
|
|
- newItems.splice(dst, 0, ...newItems.splice(src, 1))
|
|
|
|
-
|
|
|
|
- this.mylistNum = newItems
|
|
|
|
- },
|
|
|
|
- //弹出框确定
|
|
|
|
- handleOk(e) {
|
|
|
|
- this.loading = false
|
|
|
|
- this.visibleOk = false
|
|
|
|
- this.$emit('closeCustomColumn', false)
|
|
|
|
- this.$emit('changeColumn', this.mylistNum)
|
|
|
|
- this.$emit('changeColumnIndex',this.mylistNum)
|
|
|
|
- },
|
|
|
|
- //取消按钮
|
|
|
|
- handleCancel() {
|
|
|
|
- this.visibleOk = false
|
|
|
|
- this.$emit('closeCustomColumn', false)
|
|
|
|
- },
|
|
|
|
- //清空全部
|
|
|
|
- clearAllList() {
|
|
|
|
- this.mylistNum = [...this.fiexColumn]
|
|
|
|
- },
|
|
|
|
- //从自定义列拿选择的项
|
|
|
|
- getshowlist(val) {
|
|
|
|
- var arr = []
|
|
|
|
-
|
|
|
|
- // console.log(val)
|
|
|
|
- if (val.length) {
|
|
|
|
- if (val.flag) {
|
|
|
|
- let newArr = val.arr
|
|
|
|
- newVal.map((item, index) => {
|
|
|
|
- // if(JSON.stringify(this.listNum).indexOf(JSON.stringify(item))==-1){
|
|
|
|
- // this.listNum.push(item); // 进行动态的操作
|
|
|
|
- // }
|
|
|
|
- var result = this.listNum.some(items => {
|
|
|
|
- if (items.dataIndex == item.dataIndex) {
|
|
|
|
- return true
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
-
|
|
|
|
- // console.log(result)
|
|
|
|
- if (result) {
|
|
|
|
- newArr.splice(index, 1)
|
|
|
|
- }
|
|
|
|
|
|
+ //li展示里的关闭按钮 删除当前被选中的这一个列
|
|
|
|
+ deleteCol(item, index) {
|
|
|
|
+ this.mylistNum = this.mylistNum.filter((item1, num) => {
|
|
|
|
+ return num != index
|
|
})
|
|
})
|
|
-
|
|
|
|
- this.mylistNum = [...this.mylistNum, ...newArr]
|
|
|
|
- } else {
|
|
|
|
- //取消全选 清楚listNum中的val里的值
|
|
|
|
- val.arr.map((item, index) => {
|
|
|
|
- var result = this.mylistNum.some(items => {
|
|
|
|
- if (items.dataIndex == item.dataIndex) {
|
|
|
|
- return true
|
|
|
|
|
|
+ },
|
|
|
|
+ handleDragStart(e, item) {
|
|
|
|
+ this.dragging = item
|
|
|
|
+ },
|
|
|
|
+ handleDragEnd(e, item) {
|
|
|
|
+ this.dragging = null
|
|
|
|
+ },
|
|
|
|
+ //首先把div变成可以放置的元素,即重写dragenter/dragover
|
|
|
|
+ handleDragOver(e) {
|
|
|
|
+ e.dataTransfer.dropEffect = 'move' // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
|
|
|
|
+ },
|
|
|
|
+ handleDragEnter(e, item) {
|
|
|
|
+ e.dataTransfer.effectAllowed = 'move' //为需要移动的元素设置dragstart事件
|
|
|
|
+ if (item === this.dragging) {
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ const newItems = [...this.mylistNum]
|
|
|
|
+ const src = newItems.findIndex((v) => v.dataIndex === this.dragging)
|
|
|
|
+ const dst = newItems.findIndex((v) => v.dataIndex === item)
|
|
|
|
+
|
|
|
|
+ newItems.splice(dst, 0, ...newItems.splice(src, 1))
|
|
|
|
+
|
|
|
|
+ this.mylistNum = newItems
|
|
|
|
+ },
|
|
|
|
+ //弹出框确定
|
|
|
|
+ handleOk(e) {
|
|
|
|
+ this.loading = false
|
|
|
|
+ this.visibleOk = false
|
|
|
|
+ this.$emit('closeCustomColumn', false)
|
|
|
|
+ this.$emit('changeColumn', this.mylistNum)
|
|
|
|
+ this.$emit('changeColumnIndex', this.mylistNum)
|
|
|
|
+ },
|
|
|
|
+ //取消按钮
|
|
|
|
+ handleCancel() {
|
|
|
|
+ this.visibleOk = false
|
|
|
|
+ this.$emit('closeCustomColumn', false)
|
|
|
|
+ },
|
|
|
|
+ //清空全部
|
|
|
|
+ clearAllList() {
|
|
|
|
+ this.mylistNum = [...this.fiexColumn]
|
|
|
|
+ },
|
|
|
|
+ //从自定义列拿选择的项
|
|
|
|
+ getshowlist(val) {
|
|
|
|
+ var arr = []
|
|
|
|
+
|
|
|
|
+ // console.log(val)
|
|
|
|
+ if (val.length) {
|
|
|
|
+ if (val.flag) {
|
|
|
|
+ let newArr = val.arr
|
|
|
|
+ newVal.map((item, index) => {
|
|
|
|
+ // if(JSON.stringify(this.listNum).indexOf(JSON.stringify(item))==-1){
|
|
|
|
+ // this.listNum.push(item); // 进行动态的操作
|
|
|
|
+ // }
|
|
|
|
+ var result = this.listNum.some((items) => {
|
|
|
|
+ if (items.dataIndex == item.dataIndex) {
|
|
|
|
+ return true
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ // console.log(result)
|
|
|
|
+ if (result) {
|
|
|
|
+ newArr.splice(index, 1)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ this.mylistNum = [...this.mylistNum, ...newArr]
|
|
|
|
+ } else {
|
|
|
|
+ //取消全选 清楚listNum中的val里的值
|
|
|
|
+ val.arr.map((item, index) => {
|
|
|
|
+ var result = this.mylistNum.some((items) => {
|
|
|
|
+ if (items.dataIndex == item.dataIndex) {
|
|
|
|
+ return true
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ // console.log(result)
|
|
|
|
+ if (result) {
|
|
|
|
+ this.mylistNum.splice(index, 1)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
}
|
|
}
|
|
- })
|
|
|
|
- // console.log(result)
|
|
|
|
- if (result) {
|
|
|
|
|
|
+ } else {
|
|
|
|
+ arr = this.mylistNum.filter((item, index) => {
|
|
|
|
+ return item.dataIndex == val.dataIndex
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ if (arr.length) {
|
|
|
|
+ var index
|
|
|
|
+ this.mylistNum.map((item, ind) => {
|
|
|
|
+ if (item.dataIndex == val.dataIndex) {
|
|
|
|
+ index = ind
|
|
|
|
+ }
|
|
|
|
+ })
|
|
this.mylistNum.splice(index, 1)
|
|
this.mylistNum.splice(index, 1)
|
|
- }
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- } else {
|
|
|
|
- arr = this.mylistNum.filter((item, index) => {
|
|
|
|
- return item.dataIndex == val.dataIndex
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- if (arr.length) {
|
|
|
|
- var index
|
|
|
|
- this.mylistNum.map((item, ind) => {
|
|
|
|
- if (item.dataIndex == val.dataIndex) {
|
|
|
|
- index = ind
|
|
|
|
|
|
+ } else {
|
|
|
|
+ this.mylistNum.push(val)
|
|
}
|
|
}
|
|
- })
|
|
|
|
- this.mylistNum.splice(index, 1)
|
|
|
|
- } else {
|
|
|
|
- this.mylistNum.push(val)
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ },
|
|
},
|
|
},
|
|
- mounted() {
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- </script>
|
|
|
|
-
|
|
|
|
- <style lang="scss" scoped>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- .addlist {
|
|
|
|
|
|
+ mounted() {},
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.addlist {
|
|
float: left;
|
|
float: left;
|
|
width: 70%;
|
|
width: 70%;
|
|
border: 1px solid #eee;
|
|
border: 1px solid #eee;
|
|
.selectionList {
|
|
.selectionList {
|
|
- padding: 10px 15px;
|
|
|
|
- height: 450px;
|
|
|
|
- overflow: auto;
|
|
|
|
- .leibie {
|
|
|
|
- .leiName {
|
|
|
|
- font-size: 26px;
|
|
|
|
- text-align: left;
|
|
|
|
|
|
+ padding: 10px 15px;
|
|
|
|
+ height: 450px;
|
|
|
|
+ overflow: auto;
|
|
|
|
+ .leibie {
|
|
|
|
+ .leiName {
|
|
|
|
+ font-size: 26px;
|
|
|
|
+ text-align: left;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .jutixiang {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 32%;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 10px 3px;
|
|
}
|
|
}
|
|
- }
|
|
|
|
- .jutixiang {
|
|
|
|
- display: inline-block;
|
|
|
|
- width: 32%;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- padding: 10px 3px;
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
- }
|
|
|
|
- .listNum {
|
|
|
|
|
|
+}
|
|
|
|
+.listNum {
|
|
float: right;
|
|
float: right;
|
|
width: 28%;
|
|
width: 28%;
|
|
border: 1px solid #eee;
|
|
border: 1px solid #eee;
|
|
position: relative;
|
|
position: relative;
|
|
- }
|
|
|
|
- .zhuti {
|
|
|
|
|
|
+}
|
|
|
|
+.zhuti {
|
|
margin-top: 15px;
|
|
margin-top: 15px;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
-
|
|
|
|
|
|
+
|
|
p {
|
|
p {
|
|
- height: 40px;
|
|
|
|
- line-height: 20px;
|
|
|
|
- padding: 10px 15px;
|
|
|
|
-
|
|
|
|
- background: rgb(249, 250, 253);
|
|
|
|
- border-bottom: 1px solid #eee;
|
|
|
|
|
|
+ height: 40px;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ padding: 10px 15px;
|
|
|
|
+
|
|
|
|
+ background: rgb(249, 250, 253);
|
|
|
|
+ border-bottom: 1px solid #eee;
|
|
}
|
|
}
|
|
#btn {
|
|
#btn {
|
|
- position: absolute;
|
|
|
|
- right: 0;
|
|
|
|
- top: 5px;
|
|
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 0;
|
|
|
|
+ top: 5px;
|
|
}
|
|
}
|
|
.selectlist {
|
|
.selectlist {
|
|
- width: 100%;
|
|
|
|
- list-style: none;
|
|
|
|
- margin: 0;
|
|
|
|
- height: 450px;
|
|
|
|
- padding: 0 15px 10px;
|
|
|
|
- overflow: auto;
|
|
|
|
-
|
|
|
|
- li {
|
|
|
|
width: 100%;
|
|
width: 100%;
|
|
- padding: 5px 8px;
|
|
|
|
- margin: 6px 0;
|
|
|
|
- border-radius: 10px;
|
|
|
|
- background: rgb(248, 248, 248);
|
|
|
|
- height: 32px;
|
|
|
|
- position: relative;
|
|
|
|
- span {
|
|
|
|
- width: 80%;
|
|
|
|
- height: 100%;
|
|
|
|
- display: inline-block;
|
|
|
|
- margin: 0 10px;
|
|
|
|
- // overflow:hidden;
|
|
|
|
- // text-overflow:ellipsis;
|
|
|
|
- // white-space: nowrap;
|
|
|
|
- }
|
|
|
|
- .listText {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 2;
|
|
|
|
- left: 10;
|
|
|
|
- width: 60%;
|
|
|
|
- overflow: hidden;
|
|
|
|
- white-space: nowrap;
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
- }
|
|
|
|
- #closeStyle {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 9px;
|
|
|
|
- right: 7px;
|
|
|
|
|
|
+ list-style: none;
|
|
|
|
+ margin: 0;
|
|
|
|
+ height: 450px;
|
|
|
|
+ padding: 0 15px 10px;
|
|
|
|
+ overflow: auto;
|
|
|
|
+
|
|
|
|
+ li {
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding: 5px 8px;
|
|
|
|
+ margin: 6px 0;
|
|
|
|
+ border-radius: 10px;
|
|
|
|
+ background: rgb(248, 248, 248);
|
|
|
|
+ height: 32px;
|
|
|
|
+ position: relative;
|
|
|
|
+ span {
|
|
|
|
+ width: 80%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ margin: 0 10px;
|
|
|
|
+ // overflow:hidden;
|
|
|
|
+ // text-overflow:ellipsis;
|
|
|
|
+ // white-space: nowrap;
|
|
|
|
+ }
|
|
|
|
+ .listText {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 2;
|
|
|
|
+ left: 10;
|
|
|
|
+ width: 60%;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ }
|
|
|
|
+ #closeStyle {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 9px;
|
|
|
|
+ right: 7px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- }
|
|
|
|
}
|
|
}
|
|
- }
|
|
|
|
-
|
|
|
|
- </style>
|
|
|
|
|
|
+}
|
|
|
|
+</style>
|