OnePsycho 5 lat temu
rodzic
commit
f8f9fb172e

+ 712 - 0
TEAMModelOS/ClientApp/src/view/knowledge-point/index/Index.vue

@@ -0,0 +1,712 @@
+<style lang="less" scoped>
+    @import './Index.less';
+</style>
+
+<template>
+    <div class="new-syllabus-container">
+        <!-- 课纲头部 切换来源以及选择学段 -->
+        <div class="new-syllabus-header">
+            <div>
+                <span :class="tabIndex == 0 ? 'tab-active' : ''" @click="handleTabClick(0)">校本知识点</span>
+                <span :class="tabIndex == 1 ? 'tab-active' : ''" @click="handleTabClick(1)">私有知识点</span>
+            </div>
+            <div class="new-syllabus-select">
+                <span>当前学段:</span>
+                <Select ref="periodSelect" v-model="currentPeriodIndex" style="width:200px" @on-change="onPeriodChange">
+                    <Option v-for="(item,index) in periodList" :value="index" :key="index">{{ item.periodName }}</Option>
+                </Select>
+            </div>
+        </div>
+        <!-- 主体内容 -->
+        <div class="new-syllabus-content">
+            <!-- 选择学科 -->
+            <div class="ns-col ns-col">
+                <Loading :top="200" bgColor="rgba(103, 103, 103, 0.27)" type="1" v-show="isLoadSubject"></Loading>
+                <div class="ns-header">
+                    <!-- 切换头部以及搜索框 -->
+                    <div class="ns-header-content" v-if="!isSearchSubject">
+                        <span>
+                            <Icon type="md-bookmark" color="#fff" size="20" />
+                            <span style="margin-left:5px">学科</span>
+                        </span>
+                        <Icon type="ios-search" color="#fff" size="18" style="cursor:pointer" @click="isSearchSubject = true" />
+                    </div>
+                    <div class="ns-header-search" v-else>
+                        <Input icon="ios-close"
+                               v-model="searchSubject"
+                               placeholder="搜索学科..."
+                               autofocus
+                               style="width: 100%"
+                               @on-click="onSearchSubjectClose"
+                               @on-change="onSearchSubjectChange"
+                               @on-enter="onSearchSubjectChange" />
+                    </div>
+                </div>
+                <vuescroll>
+                    <div class="gl">
+                        <div :class='["gl-item",index == activeSubjectIndex ? "item-active":""]'
+                             v-for="(item,index) in subjectList"
+                             :key="index"
+                             @click="hasModify ? handleConfirmSave({index},'2') : handleSubjectTap(index)">
+                            <p class="gl-item-name">{{item.subjectName}}</p>
+                            <p class="gl-item-info"><span></span>知识块数:{{index}}</p>
+                        </div>
+                    </div>
+                </vuescroll>
+            </div>
+            <!-- 选择知识块 -->
+            <div class="ns-col ns-col2" ref="colRef2">
+                <Loading :top="200" bgColor="rgba(103, 103, 103, 0.27)" type="1" v-show="isLoadBlocks"></Loading>
+                <div class="ns-header">
+                    <!-- 切换头部以及搜索框 -->
+                    <div class="ns-header-content" v-if="!isSearchBlock">
+                        <span>
+                            <Icon type="ios-photos" color="#fff" size="20" />
+                            <span style="margin-left:5px">知识块</span>
+                        </span>
+                        <div>
+                            <Icon type="md-add" color="#fff" size="18" style="cursor:pointer;margin-right:10px" @click="onAddBlock" />
+                            <Icon type="ios-search" color="#fff" size="18" style="cursor:pointer" @click="isSearchBlock = true" />
+                        </div>
+                    </div>
+                    <div class="ns-header-search" v-else>
+                        <!-- 搜索知识块部分 -->
+                        <Input icon="ios-close"
+                               v-model="searchBlock"
+                               placeholder="搜索知识块..."
+                               autofocus
+                               style="width: 100%"
+                               @on-click="onSearchBlockClose"
+                               @on-change="onSearchBlockChange"
+                               @on-enter="onSearchBlockChange" />
+                    </div>
+                </div>
+                <vuescroll>
+                    <!-- 知识块列表 -->
+                    <div class="vl gl">
+                        <div v-if="blockList.length === 0">
+                            <EmptyBox :top="50"></EmptyBox>
+                        </div>
+                        <div v-else>
+                            <div :class='["gl-item",index == activeBlockIndex ? "item-active":""]'
+                                 v-for="(item,index) in blockList"
+                                 :key="index"
+                                 @click="handleBlockTap(index,item)">
+                                <p class="gl-item-name" :title="item.name">{{item.name}}</p>
+                                <p class="gl-item-info"><span></span>知识点数:{{item.points ? item.points.length : 0}}</p>
+                                <span class="btn-edit" title="编辑" @click.stop="onEditBlock(item)"><Icon type="md-create" size="20" color="#d2d2d2" /></span>
+                                <span class="btn-delete" title="删除" @click.stop="onDeleteBlock(item)"><Icon type="md-trash" size="22" color="#d2d2d2" /></span>
+                            </div>
+                        </div>
+                    </div>
+                </vuescroll>
+            </div>
+            <!-- 展示课纲树形结构部分 -->
+            <div class="ns-col ns-col3" ref="colRef3">
+                <Loading :top="200" bgColor="rgba(103, 103, 103, 0.27)" type="1" v-show="isLoadPoints"></Loading>
+                <div class="ns-header">
+                    <!-- 切换头部以及搜索框 -->
+                    <div class="ns-header-content" v-if="!isSearchPoint">
+                        <span>
+                            <Icon type="md-cube" color="#fff" size="20" />
+                            <span style="margin-left:5px">知识点 ( {{ originPointList.length }} )</span>
+                        </span>
+                        <div>
+                            <Icon type="md-apps" title="切换到知识点视图" v-if="blockList.length !== 0 && !isShowPoints" color="#fff" size="20" style="cursor:pointer;margin-right:10px" @click="onChangeShowType" />
+                            <Icon type="ios-photos" title="切换到知识块视图" v-if="blockList.length !== 0 && isShowPoints" color="#fff" size="18" style="cursor:pointer;margin-right:10px" @click="onChangeShowType" />
+                            <Icon type="md-add" v-if="blockList.length !== 0" color="#fff" size="18" style="cursor:pointer;margin-right:10px" @click="onAddPoint" />
+                            <Icon type="ios-search" v-if="blockList.length !== 0" color="#fff" size="18" style="cursor:pointer" @click="isSearchPoint = true" />
+                            <Button class="btn-compose-block" v-if="checkedPointList.length" @click="onComposeBlock">组成知识块</Button>
+                        </div>
+                    </div>
+                    <div class="ns-header-search" v-else>
+                        <!-- 搜索知识点部分 -->
+                        <Input icon="ios-close"
+                               v-model="searchPoint"
+                               placeholder="搜索知识点..."
+                               autofocus
+                               style="width: 100%"
+                               @on-click="isSearchPoint = false"
+                               @on-blur="isSearchPoint = false"
+                               @on-change="onSearchPointChange"
+                               @on-enter="onSearchPointChange" />
+                    </div>
+                    <div>
+                        <div v-if="pointList.length === 0">
+                            <EmptyBox :top="100"></EmptyBox>
+                        </div>
+                        <div class="points-wrap" v-else>
+                            <div v-for="(item,index) in pointList" :key="index" :class="['point-item',checkedPointList.indexOf(item) > -1 ? 'point-item-active' : '']" @click="onPointCheck(item)">
+                                <span>{{item.name}}</span>
+                                <span class="point-item-tools">
+                                    <span class="btn-edit" title="编辑" @click.stop="onEditPoint(index,item)"><Icon type="md-create" size="18" color="#d2d2d2" /></span>
+                                    <span class="btn-delete" title="删除" @click.stop="onDeletePoint(item)"><Icon type="md-trash" size="20" color="#d2d2d2" /></span>
+                                </span>
+                            </div>
+                            <Page :total="originPointList.length || 0"
+                                  show-elevator
+                                  show-sizer
+                                  show-total
+                                  :page-size-opts="pageSizeOpt"
+                                  :current="currentPage"
+                                  :page-size="pageSize"
+                                  @on-page-size-change="pageSizeChange"
+                                  @on-change="pageChange" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 新增知识块弹窗 -->
+        <Modal v-model="isAddBlock" width="560" footer-hide class="add-volume-modal">
+            <div class="modal-header" slot="header">{{ isEditBlock ? '编辑知识块' : '新增知识块'}}</div>
+            <div class="modal-content">
+                <AddBlock :originData="originSchoolData"
+                          :periodIndex="currentPeriodIndex"
+                          :subjectIndex="currentSubjectIndex"
+                          :editBlock="editBlock"
+                          :addType="pointOwn"
+                          @addFinish="onFinishAddBlock">
+                </AddBlock>
+            </div>
+        </Modal>
+
+        <!-- 新增知识点弹窗 -->
+        <Modal v-model="isAddPoint" width="560" footer-hide class="add-volume-modal">
+            <div class="modal-header" slot="header">{{ isEditPoint ? '编辑知识点' : '新增知识点'}}</div>
+            <div class="modal-content">
+                <AddPoint :hideBlock="isShowPoints"
+                          :schoolParams="schoolParams"
+                          :blockData="parentBlock"
+                          :pointData="currentPoint"
+                          :addType="pointOwn"
+                          @addFinish="onFinishAddPoint">
+                </AddPoint>
+            </div>
+        </Modal>
+
+        <!-- 关联内容弹窗 -->
+        <Modal v-model="isComposeBlock" width="680" footer-hide class="add-volume-modal compose-modal">
+            <div class="modal-header" slot="header">组成知识块</div>
+            <ComposeBlock></ComposeBlock>
+        </Modal>
+    </div>
+</template>
+
+<script>
+    import Tree from '@/components/syllabus/DragTree'
+    import EmptyBox from '@/common/EmptyData'
+    import Loading from '@/common/Loading'
+    import AddBlock from './operation/AddBlock'
+    import AddPoint from './operation/AddPoint'
+    import ComposeBlock from './operation/ComposeBlock'
+
+    export default {
+        data() {
+            return {
+                schoolInfo: {
+                    schoolCode: 'HBCN',
+                    areaCode: '86'
+                },
+                currentParams: {
+                    partitionKey: '',
+                    subjectCode: '',
+                    period: '',
+                    type:1
+                },
+                isLoadSubject: false,
+                isLoadBlocks: false,
+                isLoadPoints: false,
+                schoolParams: null,
+                currentPeriodIndex: null,
+                currentSubjectIndex: null,
+                currentBlock: null,
+                currentPoint: null,
+                tabIndex: 0,
+                originData: {},
+                originSchoolData: {},
+                periodList: [],
+                subjectList: [],
+                originSubjectList: [],
+                blockList: [],
+                originBlockList: [],
+                pointList: [],
+                originPointList: [],
+                activePeriodIndex: 0,
+                activeSubjectIndex: 0,
+                activeBlockIndex: 0,
+                isSearchSubject: false,
+                isSearchBlock: false,
+                isSearchPoint: false,
+                isAddBlock: false,
+                isEditBlock: false,
+                isAddPoint: false,
+                isEditPoint: false,
+                isComposeBlock:false,
+                searchBlock: '',
+                searchPoint: '',
+                searchSubject: '',
+                editBlock: null,
+                editPointIndex: null,
+                hasModify: false,
+                preSelectVal: null,
+                pageSize: 20,
+                currentPage: 1,
+                pageSizeOpt: [5, 10, 15, 20],
+                pointOwn: 'school',
+                isShowPoints: false,
+                parentBlock: null,
+                checkedPointList:[]
+            }
+        },
+        components: {
+            Tree, AddBlock, EmptyBox, Loading, AddPoint,ComposeBlock
+        },
+        created() {
+            this.initSchoolData()
+        },
+        methods: {
+            // 获取当前学校学段学科等基本信息
+            initSchoolData() {
+                this.$api.syllabus.GetSchoolInfo(this.schoolInfo).then(res => {
+                    if (!res.error && res.result.data.length) {
+                        this.originSchoolData = res.result.data[0] // 默认选择第一个
+                        this.originData = res.result.data[0] // 默认选择第一个
+                        this.periodList = this.originData.period
+                        this.currentParams.partitionKey = this.originData.schoolCode
+                        this.currentParams.period = this.originData.period[0].periodCode
+                        this.currentPeriodIndex = 0 // 默认选择第一个学段
+                        this.onPeriodChange(0)
+                    } else {
+                        this.$Message.warning('暂无学段数据')
+                    }
+                })
+            },
+
+            // 根据学科获取所有知识块信息
+            getBlocksData() {
+                let that = this
+                this.currentParams.type = 0
+                this.$api.knowledge.GetSchoolBlocks(this.currentParams).then(res => {
+                    if (!res.error && res.result.data) {
+                        let list = res.result.data
+                        this.blockList = list
+                        this.originBlockList = list
+                        this.handleBlockTap(0, list.length ? list[0] : null)
+                        setTimeout(function() {
+                            that.isLoadBlocks = false
+                        }, 400)
+                    } else {
+                        this.$Message.warning('获取数据失败')
+                    }
+                })
+            },
+
+            // 根据学科获取学科下所有知识点数据
+            getPointsData() {
+                let that = this
+                this.currentParams.type = 1
+                this.$api.knowledge.GetSchoolPoints(this.currentParams).then(res => {
+                    if (!res.error && res.result.data) {
+                        this.pointList = res.result.data
+                        this.originPointList = res.result.data
+                        setTimeout(function() {
+                            that.isLoadPoints = false
+                        }, 800)
+                    } else {
+                        this.$Message.warning('获取数据失败')
+                    }
+                })
+            },
+
+            // 校本知识块与知识点仓库切换
+            handleTabClick(index) {
+                this.tabIndex = index
+                switch (index) {
+                    case 0:
+                        this.currentParams.partitionKey = this.originData.schoolCode
+                        this.isShowPoints ? this.getPointsData() : this.getBlocksData()
+                        this.pointOwn = 'school'
+                        break
+                    case 1:
+                        this.currentParams.partitionKey = 'personal'
+                        this.isShowPoints ? this.getPointsData() : this.getBlocksData()
+                        this.pointOwn = 'personal'
+                        break
+                    default:
+                        break
+                }
+
+                this.handleSubjectTap(0)
+            },
+
+            // 切换知识块视图与知识点清单视图
+            onChangeShowType() {
+                this.isShowPoints ? this.getBlocksData() : this.getPointsData()
+                this.isShowPoints = !this.isShowPoints
+                this.$refs.colRef2.style.display = this.isShowPoints ? 'none' : 'unset'
+                this.$refs.colRef3.style.width = this.isShowPoints ? '85%' : '66%'
+            },
+
+            // 学段切换处理
+            onPeriodChange(index) {
+                this.preSelectVal = this.$refs.periodSelect.value
+                if (this.hasModify) {
+                    this.handleConfirmSave({}, '3')
+                } else {
+                    let that = this
+                    this.isLoadSubject = true
+                    this.activePeriodIndex = index
+                    this.currentParams.period = this.originData.period[index].periodCode
+                    this.subjectList = this.periodList[index].subjects // 切换学段后更新 学科 列表
+                    this.originSubjectList = this.periodList[index].subjects // 筛选学科源数据
+                    this.handleSubjectTap(0)
+                    setTimeout(function() {
+                        that.isLoadSubject = false
+                    }, 400)
+                }
+            },
+
+            // 学科点击事件
+            handleSubjectTap(index) {
+                this.schoolParams = {
+                    schoolCode: this.originData.schoolCode,
+                    subjectCode: this.subjectList[index].subjectCode,
+                    period: this.currentParams.period
+                }
+                this.currentSubjectIndex = index
+                this.currentParams.subjectCode = this.subjectList[index].subjectCode
+                this.currentParams.type = this.isShowPoints ? 1 : 0
+                this.activeSubjectIndex = index
+                if (!this.isShowPoints) {
+                    this.isLoadBlocks = true
+                    this.getBlocksData()
+                } else {
+                    this.isLoadPoints = true
+                    this.getPointsData()
+                }
+            },
+
+            // 知识块点击事件
+            handleBlockTap(index, item) {
+                let that = this
+                this.activeBlockIndex = index
+                this.currentBlock = item
+                this.isLoadPoints = true
+                if (item && item.points.length) {
+                    this.getPointObject(item.points) // 如果知识块下有知识点 则根据ID集合去换取知识点数据
+                    this.pageSizeChange(20)
+                } else { // 没有则置空
+                    this.originPointList = []
+                    this.pointList = []
+                }
+                setTimeout(function() {
+                    that.isLoadPoints = false
+                }, 400)
+            },
+
+            // 添加知识块完成
+            onFinishAddBlock(val) {
+                this.$Message.success('操作成功!')
+                this.handleSubjectTap(this.currentSubjectIndex) // 获取最新知识块数据
+                this.isAddBlock = false // 关闭窗口
+            },
+
+            // 添加知识点完成
+            onFinishAddPoint(val) {
+                let that = this
+                this.isLoadPoints = true
+                if (this.isEditPoint) {
+                    this.pointList[this.editPointIndex] = val
+                } else {
+                    if (!this.isShowPoints) this.currentBlock.points.push(val.id)
+                    this.originPointList.push(val)
+                    this.pageChange(this.currentPage)
+                }
+                this.$Message.success('操作成功!')
+                this.isAddPoint = false // 关闭窗口
+                this.isEditPoint = false
+                setTimeout(function() {
+                    that.isLoadPoints = false
+                }, 400)
+            },
+
+            // 删除知识块事件
+            onDeleteBlock(data) {
+                this.$Modal.confirm({
+                    title: '提示',
+                    content: '<p>确认删除该知识块?</p>',
+                    okText: '确认',
+                    cancelText: '取消',
+                    onOk: () => {
+                        this.$api.knowledge.DeleteSchoolBlock({ id: data.id }).then(res => {
+                            if (res.result.data) {
+                                this.blockList.splice(this.blockList.indexOf(data), 1)
+                                this.$Message.success('删除成功')
+                                this.handleBlockTap(0, this.blockList.length ? this.blockList[0] : null)
+                            } else {
+                                this.$Message.success('删除失败')
+                            }
+                        })
+                    }
+                })
+            },
+
+            // 删除知识点事件
+            onDeletePoint(data) {
+                this.$Modal.confirm({
+                    title: '提示',
+                    content: '<p>确认删除该知识点?</p>',
+                    okText: '确认',
+                    cancelText: '取消',
+                    onOk: () => {
+                        this.isLoadPoints = true
+                        this.$api.knowledge.DeleteSchoolPoint({ id:data.id }).then(res => {
+                            if (!res.error && res.result.data) {
+                                this.$Message.success('删除成功')
+                                this.originPointList.splice(this.originPointList.indexOf(data), 1)
+                                this.currentBlock.points.splice(this.currentBlock.points.indexOf(data.id), 1)
+                                this.pageChange(this.currentPage)
+                                this.isLoadPoints = false
+                            } else {
+                                this.$Message.warning('删除失败,错误代码:' + res.error.code + ',错误信息:' + res.error.message)
+                            }
+                        }).catch(err => {
+                            console.log(err)
+                            this.$Message.warning('删除失败')
+                        })
+                    }
+                })
+            },
+
+            // 编辑知识块事件
+            onEditBlock(data) {
+                this.isAddBlock = true // 打开新增窗口
+                this.isEditBlock = true // 设置成编辑状态
+                this.editBlock = data
+            },
+
+            // 新增知识块事件
+            onAddBlock() {
+                this.isAddBlock = true
+                this.isEditBlock = false
+                this.editBlock = null
+            },
+
+            // 新增知识点事件
+            onAddPoint() {
+                this.isAddPoint = true
+                this.isEditPoint = false
+                this.currentPoint = null
+                this.parentBlock = this.isShowPoints ? null : this.currentBlock
+            },
+
+            // 编辑知识点事件
+            onEditPoint(index, data) {
+                this.isAddPoint = true // 打开新增窗口
+                this.isEditPoint = true // 设置成编辑状态
+                this.currentPoint = data
+                this.editPointIndex = index
+                this.parentBlock = this.isShowPoints ? null : this.currentBlock
+            },
+
+
+            // 知识点点击事件
+            onPointCheck(item) {
+                console.log(item)
+                let list = this.checkedPointList
+                let isExistIndex = list.indexOf(item)
+                if (isExistIndex > -1) {
+                    this.checkedPointList.splice(isExistIndex, 1)
+                } else {
+                    this.checkedPointList.push(item)
+                }
+            },
+
+            // 点击组成知识块
+            onComposeBlock() {
+                this.isComposeBlock = true
+            },
+
+            // 搜索知识块输入框onchange事件
+            onSearchBlockChange() {
+                this.blockList = this.originBlockList.filter(item => item.name.indexOf(this.searchBlock) > -1)
+                if (this.blockList.length) this.handleBlockTap(0, this.blockList[0])
+            },
+
+            // 搜索知识点输入框onchange事件
+            onSearchPointChange() {
+                this.pointList = this.originPointList.filter(item => item.name.indexOf(this.searchPoint) > -1)
+            },
+
+            // 清空科目搜索框
+            onSearchSubjectClose() {
+                this.searchSubject = ''
+                this.isSearchSubject = false
+                this.subjectList = this.originSubjectList
+                this.handleSubjectTap(0)
+            },
+
+            // 清空科目搜索框
+            onSearchBlockClose() {
+                this.searchBlock = ''
+                this.isSearchBlock = false
+                this.blockList = this.originBlockList
+                if (this.blockList.length) this.handleBlockTap(0, this.blockList[0])
+            },
+
+            // 搜索学科输入框onchange事件
+            onSearchSubjectChange() {
+                this.subjectList = this.originSubjectList.filter(item => item.subjectName.indexOf(this.searchSubject) > -1)
+                this.handleSubjectTap(0)
+            },
+
+            // 切换页码返回截取数据
+            pageChange(page) {
+                this.currentPage = page
+                let start = this.pageSize * (page - 1)
+                let end = this.pageSize * page
+                this.pointList = this.originPointList ? this.originPointList.slice(start, end) : []
+                // 如果删除的是仅剩的一个元素 则往前翻页
+                if (this.pointList.length === 0 && page > 1) {
+                    this.pageChange(page - 1)
+                }
+            },
+
+            // 切换每页显示页数
+            pageSizeChange(val) {
+                this.pageSize = val
+                this.currentPage = 1
+                this.pageChange(1)
+            },
+
+
+            // 获取知识点完整对象数据 ID换对象
+            getPointObject(arr) {
+                let params = {
+                    collectionName: 'Knowledge',
+                    queryDict: {
+                        id: arr
+                    }
+                }
+                this.$api.FindCollection(params).then(res => {
+                    if (!res.error && res.result.data) {
+                        this.originPointList = res.result.data
+                        this.pointList = res.result.data
+                    } else {
+                        this.$Message.warning('获取数据失败')
+                    }
+                })
+            }
+        }
+    }
+</script>
+
+<style>
+    .new-syllabus-header .ivu-select-single .ivu-select-selection,
+    .funnel-box .ivu-select-single .ivu-select-selection {
+        background: #605f5f;
+        color: #fbfbfb;
+        border: none;
+    }
+
+    .new-syllabus-header .ivu-select-single .ivu-select-arrow,
+    .funnel-box .ivu-select-single .ivu-select-arrow {
+        color: #fbfbfb;
+    }
+
+    .ns-header .ivu-input {
+        background: #3c3c3c;
+        color: #fff;
+        border: none;
+        height: 36px;
+        margin-top: 7px;
+    }
+
+    .ns-header .ivu-input-icon {
+        font-size: 24px;
+        color: #cfc7c7;
+        line-height: 50px;
+        cursor: pointer;
+    }
+
+    /* 修改iview Modal样式 */
+
+    .add-volume-modal .ivu-modal-content {
+        background: #3c3c3c;
+        color: #fff;
+        font-family: '微軟正黑體', 'Heiti TC';
+    }
+
+    .add-volume-modal .ivu-modal-header {
+        border-bottom: none;
+        font-size: 18px;
+        font-weight: bold;
+        padding: 25px;
+    }
+
+    .add-volume-modal .modal-content {
+        padding: 10px 35px 30px 35px;
+    }
+
+    /* 修改iview popper样式 */
+
+    .ns-col .ivu-poptip-inner {
+        background: #3c3c3c;
+    }
+
+    .ns-col .ivu-poptip-title:after {
+        background: #656565;
+        left: 16px;
+        right: 20px;
+    }
+
+    .ns-col .ivu-poptip-title-inner {
+        color: #fff;
+    }
+
+    .ns-col .ivu-poptip-popper[x-placement^=bottom] .ivu-poptip-arrow:after {
+        border-bottom-color: #494949;
+    }
+
+    .ns-col .points-wrap .ivu-page {
+        position: absolute;
+        bottom: 40px;
+        left: 0;
+        width: 100%;
+        text-align: center;
+    }
+
+        .ns-col .points-wrap .ivu-page .ivu-page-item,
+        .ns-col .points-wrap .ivu-page .ivu-page-next,
+        .ns-col .points-wrap .ivu-page .ivu-page-prev {
+            background: none;
+            border: none;
+            line-height: 32px;
+        }
+
+            .ns-col .points-wrap .ivu-page .ivu-page-item a,
+            .ns-col .points-wrap .ivu-page .ivu-page-next a,
+            .ns-col .points-wrap .ivu-page .ivu-page-prev a {
+                color: #fff;
+            }
+
+    .ns-col .points-wrap .ivu-page-item-active {
+        border: none;
+        background: rgb(11, 151, 117) !important;
+    }
+
+    .ns-col .points-wrap .ivu-select-selection,
+    .ns-col .points-wrap .ivu-page-options-elevator input {
+        border: none;
+        background: #605f5f;
+    }
+
+    .ns-col .points-wrap .ivu-select,
+    .ns-col .points-wrap .ivu-page-options-elevator input {
+        color: #fff;
+    }
+
+
+</style>