123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910 |
- <template>
- <div>
- <!-- 侧边栏 -->
- <b-list-group id="list" v-show="isShow">
- <!-- header -->
- <b-list-group-item id="header">
- <i class="fa fa-list" aria-hidden="true"></i> 列表
- <button type="button" class="close" aria-label="Close" @click="changeShow">
- <i class="fa fa-times" aria-hidden="true"></i>
- </button>
- </b-list-group-item>
- <!-- body -->
- <b-list-group-item id="body" style="overflow:auto">
- <b-tabs content-class="mt-3" v-model="tabIndex">
- <!-- 通知 -->
- <b-tab>
- <template v-slot:title>
- <i class="fa fa-mobile" aria-hidden="true"></i>
- 通知
- </template>
- <div>
- <b-list-group class="listGroup" v-for="(item,index) in data.notice" :key=index>
- <b-list-group-item href="#" @click.self="selectItem($event,index)">
- ● {{item.title|ellipsis}}
- <span class="float-right font-italic font-weight-light" style="font-size:12px">{{item.time}}</span>
- </b-list-group-item>
- </b-list-group>
- </div>
- </b-tab>
- <!-- 报道 -->
- <b-tab>
- <template v-slot:title>
- <i class="fa fa-commenting-o" aria-hidden="true"></i>
- 报道
- </template>
- <div>
- <b-list-group class="listGroup" v-for="(item,index) in data.report" :key=index>
- <b-list-group-item href="#"
- @click.self="selectItem($event,index)">
- ● {{item.title|ellipsis}}
- <span class="float-right font-italic font-weight-light" style="font-size:12px">{{item.time}}</span>
- </b-list-group-item>
- </b-list-group>
- </div>
- </b-tab>
- <!-- 文化 -->
- <b-tab>
- <template v-slot:title>
- <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
- 文化
- </template>
- <div>
- <b-list-group class="listGroup" v-for="(item,index) in data.culture" :key=index>
- <b-list-group-item href="#" @click.self="selectItem($event,index)">
- ● {{item.title|ellipsis}}
- </b-list-group-item>
- </b-list-group>
- </div>
- </b-tab>
- </b-tabs>
- </b-list-group-item>
- <!-- footer -->
- <b-list-group-item id="footer" align='center'>
- <b-button-group style="background:rgb(255,255,255)" v-show="tabIndex !== 2 && $store.state.isLogin === true" >
- <b-button variant="outline-dark" title="添加记录" @click="$bvModal.show('addModal')"><i class="fa fa-plus" aria-hidden="true" ></i></b-button>
- <b-button variant="outline-dark" title="删除记录" v-show="toolShow.delete" @click="deleteItem()"><i class="fa fa-minus" aria-hidden="true"></i></b-button>
- <b-button disabled title="删除记录" v-show="!toolShow.delete" ><i class="fa fa-minus" aria-hidden="true"></i></b-button>
- <b-button variant="outline-dark" title="刷新记录" @click="refresh"><i class="fa fa-refresh" aria-hidden="true" title='刷新'></i></b-button>
- <b-button variant="outline-success" v-show="toolShow.submit" title="应用更改" @click="submitChange"><i class="fa fa-check" aria-hidden="true"></i> </b-button>
- <b-button disabled title="应用更改" v-show="!toolShow.submit"><i class="fa fa-check" aria-hidden="true"></i> </b-button>
- <b-button variant="outline-warning" title="放弃更改" @click="giveupChange"><i class="fa fa-times" aria-hidden="true"></i></b-button>
- </b-button-group>
- <div class="font-italic pt-1" style="font-size:12px">@Powered by CDUT</div>
- </b-list-group-item>
- </b-list-group>
- <!-- 外部控制按钮 -->
- <div id="btn">
- <!-- 列表 按钮 -->
- <b-button @click="changeShow" class="mr-2" title="列表">
- <i class="fa fa-list" aria-hidden="true"></i>
- </b-button>
- <!-- 登陆 按钮 -->
- <b-button variant="primary" v-if="!$store.state.isLogin" @click="$bvModal.show('loginModal')">
- <i class="fa fa-id-card" aria-hidden="true"></i> 登陆
- </b-button>
- <!-- 登陆状态 按钮 -->
- <span v-else>
- <!-- 按钮 -->
- <b-button id="logout" variant="primary" class="m-2" >
- <i class="fa fa-user-circle-o fa-lg" varient='info' aria-hidden="true"></i>
- </b-button>
- <!-- popover -->
- <b-popover target="logout" triggers="hover" placement="bottomleft">
- <template v-slot:title>
- <em>Hello,</em><code> {{$store.state.user.name}} </code>!
- </template>
- <b-list-group flush>
- <b-list-group-item href="#" disabled>修改密码</b-list-group-item>
- <b-list-group-item href="#" @click="logout">退出登陆</b-list-group-item>
- </b-list-group>
- </b-popover>
- </span>
- </div>
- <!-- addModal -->
- <b-modal id="addModal" title="添加工具" scrollable>
- <template v-slot:modal-title>
- <i class="fa fa-plus" aria-hidden="true" ></i> Add Tool
- </template>
- <b-form @submit.prevent="submit_addModal">
- <label for="input-slogan">寄语:</label>
- <b-input-group class="mb-3" id="input-slogan">
- <b-form-input v-model="form.slogan"></b-form-input>
- <b-input-group-append>
- <b-button variant="info" @click="setSlogan">应用</b-button>
- </b-input-group-append>
- </b-input-group>
- <b-form-group
- id="input-group-1"
- label="* 标题:"
- label-for="input-1"
- description="注:输入的标题应小于六十字长度"
- >
- <b-form-input
- id="input-1"
- v-model="form.title"
- required
- ></b-form-input>
- </b-form-group>
- <b-form-group id="input-group-3" label="* 地点:" label-for="input-3">
- <b-form-select
- id="input-3"
- v-model="form.place"
- :options="places"
- >
- <template v-slot:first>
- <option :value="null">自定义</option>
- </template>
- </b-form-select>
- <b-link @click="drawGeometry">添加自定义地点</b-link>
- </b-form-group>
- <b-form-group id="input-group-5" label="* 类型:" label-for="input-5">
- <b-form-select
- id="input-5"
- v-model="form.type"
- :options="types"
- required
- ></b-form-select>
- </b-form-group>
- <b-form-group id="input-group-4" label="* 概要:" label-for="input-4">
- <b-form-textarea
- id="input-4"
- v-model="form.content"
- required
- ></b-form-textarea>
- </b-form-group>
- <b-form-group id="input-group-6" label="* 时间:" label-for="input-6">
- <b-form-input
- id="input-6"
- v-model="form.time"
- type = 'date'
- required
- ></b-form-input>
- </b-form-group>
- <b-form-group id="input-group-2" label="详情网址:" label-for="input-2">
- <b-form-input
- id="input-2"
- v-model="form.url"
- type="url"
- ></b-form-input>
- </b-form-group>
- <b-form-group id="input-group-7" label="图片链接:" label-for="input-7">
- <b-form-input
- id="input-7"
- v-model="form.img"
- type="url"
- ></b-form-input>
- </b-form-group>
- <b-form-group id="input-group-8" label="消息附属线:" label-for="input-8">
- <!-- <b-form-select
- id="input-8"
- v-model="form.related"
- :options="['111', '222']"
- >
- <template v-slot:first>
- <option :value="null">自定义</option>
- </template>
- </b-form-select> -->
- <b-link @click="drawRelate">添加消息附属线</b-link>
- </b-form-group>
- <!-- <b-form-group id="input-group-7" label="图片:" label-for="input-7">
- <b-form-file v-model="form.img" class="mt-3" plain multiple accept=".jpg, .png, .gif, .jpeg, .svg"></b-form-file>
- </b-form-group> -->
- <b-button type="reset" variant="danger">重置</b-button>
- <b-button type="submit" variant="primary">提交</b-button>
- </b-form>
- <template v-slot:modal-footer>
- <b-button type="reset" variant="secondary" @click="$bvModal.hide('addModal')">关闭</b-button>
- </template>
- </b-modal>
- <!-- loginModal -->
- <login-card />
- <!-- Alert -->
- <div id="alert"
- v-show="alert.dismissCountDown > 0"
- >
- <b-alert show variant="success" fade v-show="alert.type === 'success'" size='sm'>{{alert.message}}</b-alert>
- <b-alert show variant="danger" fade v-show="alert.type === 'danger'" size='sm'>{{alert.message}}</b-alert>
- </div>
- </div>
- </template>
- <script>
- // eventBus公共实例
- import bus from '../../static/js/eventBus'
- import cookie from '../../static/js/cookieJS'
- import LoginCard from '../layouts/widgets/LoginCard'
- export default {
- components: { LoginCard },
- name: 'PC',
- data () {
- return {
- file: null,
- // 侧边栏显示控制
- isShow: true,
- // tabs控制
- tabIndex: 0,
- // 登陆表单
- login: {
- account: '',
- password: '',
- isRight: true,
- errorMessage: '账号或密码输入错误'
- },
- // 列表数据
- data: {
- notice: [],
- report: [],
- culture: []
- },
- // 列表备份数据
- colonData: {
- notice: [],
- report: [],
- culture: []
- },
- // 工具栏可视控制
- toolShow: {
- delete: false,
- submit: false
- },
- // 已选择的DOM
- selected: null,
- // 操作目标的数据下标
- selectedIndex: null,
- // 地点选择输入
- places: [],
- // 类型选择输入
- types: ['报道', '通知'],
- // 预删除的消息id号
- deleteArr: [],
- // 消息发布的表单绑定数据
- form: {
- place: null
- },
- // 确定修改时消息删除的消息id汇总
- submitDeleteID: [],
- // Alert content
- alert: {
- message: '',
- type: 'success',
- // 显示的总计秒数
- dismissSecs: 3,
- // 读秒
- dismissCountDown: 0
- }
- }
- },
- methods: {
- /**
- * @description:计时显示alert窗口
- * @returns {void}
- */
- showAlert: function () {
- var that = this
- this.alert.dismissCountDown = this.alert.dismissSecs
- for (let i = 0; i < that.alert.dismissSecs; i++) {
- (function () {
- setTimeout(() => that.alert.dismissCountDown--, 1000 * i)
- })()
- }
- },
- /**
- * @description:改变当前显示状态
- * @returns {void}
- */
- changeShow: function () {
- this.isShow = !this.isShow
- },
- /**
- * @description:获取通知列表数据
- * @returns {void}
- */
- getNoticeList: function () {
- var that = this
- this.$axios
- .get('/notice/list')
- .then(function (response) {
- that.data.notice = response.data
- // items备份
- that.colonData.notice = JSON.parse(JSON.stringify(that.data.notice))
- // 重置控制目标
- // that.selectedID = null
- // that.selected = null
- })
- },
- /**
- * @description:获取报道列表数据
- * @return
- */
- getReportList: function () {
- var that = this
- this.$axios
- .get('/report/list')
- .then(function (response) {
- that.data.report = response.data
- // items备份
- that.colonData.report = JSON.parse(JSON.stringify(that.data.report))
- // 重置控制目标
- // that.selectedID = null
- // that.selected = null
- })
- },
- /**
- * @description:获取文化列表数据
- */
- getCultureList: function () {
- var that = this
- this.$axios
- .get('/culture/list')
- .then(function (response) {
- that.data.culture = response.data
- // items备份
- that.colonData.culture = JSON.parse(JSON.stringify(that.data.culture))
- // 重置控制目标
- // that.selectedID = null
- // that.selected = null
- })
- },
- /**
- * @description:获取关键地点
- * @returns {void}
- */
- getKeyPoint: function () {
- var that = this
- this.$axios
- .get('/admin/keypoint')
- .then(res => {
- res.data.forEach(item => {
- that.places.push(item.name)
- })
- })
- },
- /**
- * @description:获取寄语
- */
- getSlogan: function () {
- var that = this
- this.$axios
- .get('/admin/getSlogan')
- .then(res => {
- that.form.slogan = res.data
- })
- },
- /**
- * @description:设置寄语
- */
- setSlogan: function () {
- var that = this
- this.$axios
- .post('/admin/setSlogan', {
- slogan: that.form.slogan
- })
- .then(res => {
- if (res) {
- // alert 内容
- that.alert.message = '应用更改成功'
- that.alert.type = 'success'
- } else {
- // alert 内容
- that.alert.message = '应用更改失败'
- that.alert.type = 'danger'
- }
- window.setTimeout(function () {
- that.showAlert()
- }, 300)
- })
- },
- /**
- * @description:设置当前选择节点的状态,并地图响应
- * @param {event} e:事件
- * @param {number} index:所操作节点数据的下标
- */
- selectItem: function (e, index) {
- this.toolShow.delete = true
- let el = e.srcElement
- this.selected = el
- this.selectedIndex = index
- // 地图响应,绘制标识
- window.setTimeout(() => {
- this.printMapMarkByID()
- }, 500)
- },
- /**
- * @description:绘制起始位置
- */
- drawGeometry: function () {
- this.$bvModal.hide('addModal')
- bus.$emit('drawBegin', '点')
- var that = this
- bus.$on('drawGeometryEnd', data => {
- that.form.geometry = data
- that.form.place = null
- that.$bvModal.show('addModal')
- })
- },
- /**
- * @description:绘制消息附属线
- */
- drawRelate: function () {
- this.$bvModal.hide('addModal')
- bus.$emit('drawBegin', '线')
- var that = this
- bus.$on('drawRelateEnd', data => {
- that.form.relate = data
- // that.form.place = null
- that.$bvModal.show('addModal')
- })
- },
- /**
- * @description:应用更改 响应事件
- */
- submitChange: function () {
- var that = this
- // 向后端提交删除信息,并根据成功与否作出回应
- this.postDelete()
- .then(res => {
- if (res) {
- // 重新获取table数据
- that.getNoticeList()
- // 初始化预删除数据
- that.deleteArr = []
- // alert 内容
- that.alert.message = '应用更改成功'
- that.alert.type = 'success'
- that.refresh()
- } else {
- // alert 内容
- that.alert.message = '应用更改失败'
- that.alert.type = 'danger'
- }
- window.setTimeout(function () {
- that.showAlert()
- }, 300)
- })
- },
- /**
- * @description:将预删除数据提交给后端进行数据库操作
- * @returns {void}
- */
- postDelete: async function () {
- var that = this
- var isSuccess = false
- await this.$axios
- .post('/admin/delete', {
- array: that.deleteArr
- })
- .then(res => {
- isSuccess = res.data
- })
- return isSuccess
- },
- /**
- * @description:在table中删除消息,并提交到预删除数据中等待提交更改
- * @returns {void}
- */
- deleteItem: function () {
- var items = this.tabIndex === 0 ? this.data.notice : this.data.report
- var itemsType = this.getSelectedType()
- // var itemsType = this.tabIndex === 0 ? 'notice' : 'report'
- // 将元素信息提交到预删除数组中,等待提交更改
- this.deleteArr.push({type: itemsType, id: items[this.selectedIndex].id})
- // 按序号在table显示数据中删除该消息
- items.splice(this.selectedIndex, 1)
- // 更新下标
- // 1.删除末尾元素时,更新下标重新指向末尾
- // 2.删除非末尾元素时,下标不变
- this.selectedIndex = this.selectedIndex === items.length ? this.selectedIndex - 1 : this.selectedIndex
- },
- /**
- * @description:放弃更改响应事件:初始化预删除数据,恢复table显示数据
- * @returns {void}
- */
- giveupChange: function () {
- this.data = JSON.parse(JSON.stringify(this.colonData))
- this.deleteArr = []
- },
- /**
- * @description:将目前所选取事件的id值与type值传给map.vue进行标识绘制
- * @returns {void}
- */
- printMapMarkByID: function () {
- bus.$emit('printMapMark', {
- type: this.getSelectedType(),
- id: this.getSelectedItems()[this.selectedIndex].id
- })
- },
- /**
- * @description:根据tabIndex 获取当前操作的Data数据属性
- * @returns {object}
- */
- getSelectedItems: function () {
- var item
- var data = this.data
- switch (this.tabIndex) {
- case 0:
- item = data.notice
- break
- case 1:
- item = data.report
- break
- case 2:
- item = data.culture
- }
- return item
- },
- /**
- * @description:根据tabIndex值 获取目前操作的数据类型
- */
- getSelectedType: function () {
- var res
- switch (this.tabIndex) {
- case 0:
- res = 'notice'
- break
- case 1:
- res = 'report'
- break
- case 2:
- res = 'culture'
- break
- default:
- res = null
- }
- return res
- },
- /**
- * @description: addModel提交(submit)事件
- * @returns {void}
- */
- submit_addModal: async function () {
- var that = this
- // 向后端提交表单
- this.postAddForm()
- .then(res => {
- if (res) {
- // 提交成果
- that.alert.message = '消息发布成功'
- that.alert.type = 'success'
- that.$bvModal.hide('addModal')
- } else {
- that.alert.message = '消息发布失败'
- that.alert.type = 'danger'
- }
- window.setTimeout(function () {
- that.showAlert()
- }, 300)
- // 刷新
- that.refresh()
- })
- },
- /**
- * @description:向后端提交消息发布的表单
- * @returns {void}
- */
- postAddForm: async function () {
- var that = this
- var isSuccess = false
- await this.$axios
- .post('/admin/add', {
- form: that.form
- })
- .then(res => {
- isSuccess = res.data
- })
- return isSuccess
- },
- // /**
- // * @description: loginModel提交(submit)事件
- // * @returns {void}
- // */
- // submit_loginModal: function (e) {
- // var that = this
- // this.postLoginForm()
- // .then(res => {
- // if (res) {
- // // 登陆成功,设置登陆状态
- // that.$store.commit('userLogin', {
- // name: res.name,
- // uid: res.uid
- // })
- // // 设置token到cookie
- // cookie.setCookie(res.token, 0.5, 'token')
- // // 隐藏modal
- // that.$bvModal.hide('loginModal')
- // } else {
- // that.login.isRight = false
- // }
- // })
- // },
- // /**
- // * @description:向后端提交登陆表单
- // * @returns {void}
- // */
- // postLoginForm: async function () {
- // var response
- // await this.$axios
- // .post('admin/login', {
- // form: {
- // account: this.login.account,
- // password: this.login.password
- // }
- // })
- // .then(res => {
- // response = res.data
- // })
- // return response
- // },
- /**
- * @description:刷新列表,地图
- * @returns {void}
- */
- refresh: function () {
- this.getNoticeList()
- this.getReportList()
- bus.$emit('refreshMap')
- },
- /**
- * @description:自动登录:提取、验证token
- */
- autoLogin: function () {
- var that = this
- // 提取cookie
- var token = cookie.getCookie('token')
- if (token === null) {
- return false
- }
- // 验证token
- this.postToken(token)
- .then(res => {
- if (res) {
- // 登陆成功,设置登陆状态
- that.$store.commit('userLogin', {
- name: res.name,
- uid: res.uid
- })
- // 设置token到cookie
- cookie.setCookie(res.token, 0.5, 'token')
- }
- })
- },
- /**
- * @description:向后端提交token进行验证
- * @returns {boolean}
- */
- postToken: async function (token) {
- console.log(token)
- var response
- await this.$axios
- .post('/admin/autoLogin', {
- token: token
- })
- .then(res => {
- response = res.data
- })
- return response
- },
- /**
- * @description:登出操作
- */
- logout: function () {
- // 设置store登出状态
- this.$store.commit('userLogout')
- // 删除token在cookie的记录
- cookie.setCookie('', 0, 'token')
- }
- },
- mounted () {
- this.autoLogin()
- this.getNoticeList()
- this.getReportList()
- this.getCultureList()
- this.getKeyPoint()
- this.getSlogan()
- },
- watch: {
- /**
- * @description:每变换一次状态,更新一次地图尺寸
- * @param {DOM} newOne:新值
- * @param {DOM} oldOne:旧值
- */
- isShow (newVa, oldVa) {
- bus.$emit('updateMapSize')
- },
- /**
- * @description:每切换一次tab,重置选择状态
- * @param {DOM} newOne:新值
- * @param {DOM} oldOne:旧值
- */
- tabIndex (newVa, oldVa) {
- this.selectedIndex = -1
- this.selected = null
- },
- /**
- * @description:选择的节点发生改变时,颜色变化
- * @param {DOM} newOne:新值
- * @param {DOM} oldOne:旧值
- */
- selected (newOne, oldOne) {
- // 如果选择的<td>节点不变,不作更改
- // 否则 消除旧节点的颜色,修改新节点的颜色
- if (newOne === oldOne) {
- return 0
- } else {
- if (oldOne === null) {
- // 旧值为空
- newOne.style.background = '#b8daff'
- } else if (newOne === null) {
- // 新值为空
- oldOne.style.background = ''
- } else {
- // 都不为空
- oldOne.style.background = ''
- newOne.style.background = '#b8daff'
- }
- }
- },
- /**
- * @description:下标小于0时(空元素状态),禁止删除操作
- * @param {DOM} newOne:新值
- * @param {DOM} oldOne:旧值
- */
- selectedIndex (newOne, oldOne) {
- if (newOne < 0) {
- this.toolShow.delete = false
- } else {
- this.toolShow.delete = true
- switch (this.tabIndex) {
- case 0:
- bus.$emit('markerShow', {
- type: this.tabIndex,
- id: this.data[this.tabIndex]
- })
- }
- }
- },
- /**
- * @description:监听预删除数据,当其不为空时使得‘应用更改’按钮可用
- * @param {DOM} newOne:新值
- * @param {DOM} oldOne:旧值
- */
- deleteArr (newOne, oleOne) {
- if (newOne.length > 0) {
- this.toolShow.submit = true
- } else {
- this.toolShow.submit = false
- }
- },
- /**
- * @description:监听备份数据,发生改动意味着发生数据库操作,刷新地图数据
- * @param {DOM} newOne:新值
- * @param {DOM} oldOne:旧值
- */
- colonItems (newOne, oldOne) {
- bus.$emit('refreshMap')
- }
- },
- filters: {
- // 超过16位显示省略号
- ellipsis: function (value) {
- if (!value) return ''
- if (value.length > 10) {
- return value.slice(0, 9) + '...'
- }
- return value
- }
- }
- }
- </script>
- <style scoped>
- .close{
- float: right;
- }
- #list {
- width: 310px;
- height: 100%;
- display: flex;
- }
- .listGroup {
- font-size:14px
- }
- #header {
- background: rgba(222,226,230,0.5)
- }
- #body {
- flex:1
- }
- #footer{
- background: rgba(222,226,230,0.5);
- }
- .logo {
- width: 32px;
- height:32px
- }
- #btn{
- position:absolute;
- right:5px;
- bottom: 10px;
- z-index: 10;
- float:right;
- }
- #alert {
- position: absolute;
- top:0px;
- width:100%;
- z-index:10000
- }
- </style>
|