|
|
@@ -1,261 +1,259 @@
|
|
|
-<template>
|
|
|
- <ui-editor-toolbox>
|
|
|
- <ul class="edit-list">
|
|
|
- <li>
|
|
|
- <div class="title">
|
|
|
- <span>{{ $t('info.toolbox.music') }}</span>
|
|
|
- <label @click="onUpload">
|
|
|
- <ui-icon :tip="$t('info.toolbox.uploadMusic')" tipH="right" type="uploading" />
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <ui-input type="select" :options="musics" width="100%" :placeholder="$t('common.none')" v-model="music" stop-el="i">
|
|
|
- <template v-slot:option="{ raw }">
|
|
|
- <div :class="{ 'music-user': raw.user }">
|
|
|
- <div>{{ raw.label }}</div>
|
|
|
- <!-- <div>{{ raw.user ? raw.value : $t(`info.musics.${raw.value}`) }}</div> -->
|
|
|
- <span v-show="raw.user" @click.stop="onDeleteUpload(raw)"><i class="iconfont icon-del"></i></span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </ui-input>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="title">
|
|
|
- <span>{{ $t('info.toolbox.share') }}</span>
|
|
|
- </div>
|
|
|
- <div class="between">
|
|
|
- <ui-button width="47.5%" ref="copy" :data-clipboard-text="copyLink">{{ $t('info.toolbox.copyLink') }}</ui-button>
|
|
|
- <ui-button width="47.5%" @click="onDownloadQrCode">{{ $t('info.toolbox.downLoadCode') }}</ui-button>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="between">
|
|
|
- <span>{{ $t('info.toolbox.uploadTime') }}</span>
|
|
|
- <label>{{ metadata.createTime }}</label>
|
|
|
- </div>
|
|
|
- <div class="between">
|
|
|
- <span>{{ $t('info.toolbox.shootPoint') }}</span>
|
|
|
- <label>{{ metadata.panoCount || 0 }}</label>
|
|
|
- </div>
|
|
|
- <div class="between">
|
|
|
- <span>{{ $t('info.toolbox.boxVideo') }}</span>
|
|
|
- <label>{{ metadata.videoCount || 0 }}</label>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <ui-window v-if="showUpload" :title="$t('info.toolbox.addBackgroundMusic')" :canSubmit="file" @no="onCancel" @ok="onConfirm" :noText="$t('common.cancel')" :okText="$t('common.confirm')">
|
|
|
- <template v-slot:content>
|
|
|
- <div class="upload-music-box">
|
|
|
- <label for="file" :class="{ active: file }">
|
|
|
- <span v-if="!file">+ {{ $t('info.toolbox.uploadMusic') }}</span>
|
|
|
- <span v-else>{{ file.name }}</span>
|
|
|
- </label>
|
|
|
- <input type="file" accept=".mp3,.wav" id="file" @change="changeFile" />
|
|
|
- <!-- <p class="tips">{{ $t('info.toolbox.uploadTips') }}</p> -->
|
|
|
- <p class="tips">{{ $t('limit.formSize', { size: '5MB', form: 'MP3 / WAV' }) }}</p>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </ui-window>
|
|
|
- </ui-editor-toolbox>
|
|
|
-</template>
|
|
|
-<script setup>
|
|
|
-import ClipboardJS from 'clipboard'
|
|
|
-import { ref, computed, onMounted, nextTick } from 'vue'
|
|
|
-import { useStore } from 'vuex'
|
|
|
-import { Dialog } from '@kankan/components'
|
|
|
-import { downloadFile } from '@/utils/download'
|
|
|
-import { getApp, getNum } from '@/app'
|
|
|
-import { useMusicPlayer } from '@/utils/sound'
|
|
|
-import { useI18n } from '@/i18n'
|
|
|
-import * as apis from '@/apis/scene-edit.js'
|
|
|
-import browser from '@/utils/browser'
|
|
|
-
|
|
|
-const musicPlayer = useMusicPlayer()
|
|
|
-const { t } = useI18n({ useScope: 'global' })
|
|
|
-const store = useStore()
|
|
|
-const metadata = computed(() => store.getters['info/metadata'])
|
|
|
-const music = computed({
|
|
|
- get() {
|
|
|
- if (metadata.value.music) {
|
|
|
- // let item = /^0\d$/.test(metadata.value.music) ? metadata.value.music : metadata.value.music == 'none' || metadata.value.music == '' ? 'none' : metadata.value.musicFile
|
|
|
- let item = /^0\d$/.test(metadata.value.music) ? metadata.value.music : metadata.value.music == 'none' ? 'none' : metadata.value.musicFile
|
|
|
- // let item = /^0\d$/.test(metadata.value.music) ? metadata.value.music : metadata.value.musicFile
|
|
|
- return item
|
|
|
- } else {
|
|
|
- return 'none'
|
|
|
- }
|
|
|
- },
|
|
|
- set(music) {
|
|
|
- store.commit('info/update', { music })
|
|
|
- musicPlayer.play()
|
|
|
- }
|
|
|
-})
|
|
|
-const musics = computed(() => {
|
|
|
- let list = store.getters['info/music']
|
|
|
- list.map(i => {
|
|
|
- if (i.value == '') {
|
|
|
- i.value = 'none'
|
|
|
- }
|
|
|
- let item = /^0\d$/.test(i.value) ? t(`info.musics.${i.value}`) : i.value == 'none' ? t(`info.musics.${i.value}`) : i.value
|
|
|
- i.label = item
|
|
|
- })
|
|
|
- return list
|
|
|
-})
|
|
|
-const copy = ref(null)
|
|
|
-const file = ref(null)
|
|
|
-const showUpload = ref(false)
|
|
|
-const copyLink = computed(() => {
|
|
|
- let domain = store.getters['scene/whichDept'] == 'HK' ? process.env.VUE_APP_SHOW_HK_URL : process.env.VUE_APP_SHOW_URL
|
|
|
- return domain + `index.html?m=${browser.getURLParam('m')}`
|
|
|
-})
|
|
|
-
|
|
|
-const onUpload = () => {
|
|
|
- if (metadata.value.musicFile) {
|
|
|
- Dialog.confirm({
|
|
|
- content: `${t('info.toolbox.addTips')}`,
|
|
|
- title: t('common.tips'),
|
|
|
- okText: t('common.confirm'),
|
|
|
- noText: t('common.cancel'),
|
|
|
- func: state => {
|
|
|
- if (state == 'ok') {
|
|
|
- showUpload.value = true
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- showUpload.value = true
|
|
|
- }
|
|
|
-}
|
|
|
-const onDeleteUpload = item => {
|
|
|
- // store.commit('info/update', { music: '', musicFile: '', files: { music: null } })
|
|
|
- console.log(item)
|
|
|
- let params = {
|
|
|
- musicFile: '',
|
|
|
- files: { music: null }
|
|
|
- }
|
|
|
- if (metadata.value.music == item.value) {
|
|
|
- params.music = ''
|
|
|
- }
|
|
|
- store.commit('info/update', params)
|
|
|
-}
|
|
|
-const changeFile = e => {
|
|
|
- console.log(e.target.files[0])
|
|
|
- let fileType = e.target.files[0].name
|
|
|
- .split('.')
|
|
|
- .pop()
|
|
|
- .toLowerCase()
|
|
|
- console.log(fileType)
|
|
|
- if (['mp3', 'wav'].indexOf(fileType) == -1) {
|
|
|
- Dialog.toast({
|
|
|
- content: `${t('limit.formFile', { form: 'MP3 / WAV' })}`, //'仅支持 MP3/WAV 格式的音频',
|
|
|
- type: 'error'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- if (e.target.files[0].size / 1024 / 1024 > 5) {
|
|
|
- Dialog.toast({
|
|
|
- // content: e.target.files[0].name + '的大小超过了5MB',
|
|
|
- content: `${t('limit.formSize', { form: 'MP3 / WAV', size: '5MB' })}`, //'请上传5MB以内的MP3/WAV文件',
|
|
|
- type: 'error'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- if (e.target && e.target.files[0]) {
|
|
|
- file.value = e.target.files[0]
|
|
|
- }
|
|
|
-}
|
|
|
-const onCancel = e => {
|
|
|
- showUpload.value = false
|
|
|
- file.value = null
|
|
|
-}
|
|
|
-const onConfirm = () => {
|
|
|
- store.commit('info/update', { music: file.value.name, musicFile: file.value.name, files: { music: file.value } })
|
|
|
- nextTick(() => {
|
|
|
- musicPlayer.play()
|
|
|
- })
|
|
|
- onCancel()
|
|
|
-}
|
|
|
-const onDownloadQrCode = () => {
|
|
|
- let a = document.createElement('a')
|
|
|
- let link = `/service/scene/edit/down/qrCode?num=${browser.getURLParam('m')}`
|
|
|
- a.href = link
|
|
|
- a.download = `4DKanKan_share.png`
|
|
|
- a.target = '_blank'
|
|
|
- a.click()
|
|
|
- a.remove()
|
|
|
- // downloadFile(getApp().resource.getResourceURL(`downloads/scene/{num}/QRcode/{num}.png`), `4DKanKan_share.png`)
|
|
|
-}
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- var clipboard = new ClipboardJS(copy.value.$el)
|
|
|
- clipboard.on('success', function(e) {
|
|
|
- e.clearSelection()
|
|
|
- Dialog.toast({ content: `${t('info.toolbox.copySuccess')}`, type: 'success' })
|
|
|
- })
|
|
|
-})
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-.upload-music-box {
|
|
|
- width: 400px;
|
|
|
-
|
|
|
- input {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- label {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 100%;
|
|
|
- height: 34px;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
- color: rgba(255, 255, 255, 0.6);
|
|
|
- cursor: pointer;
|
|
|
- margin-bottom: 10px;
|
|
|
- &.active {
|
|
|
- background: rgba(255, 255, 255, 0.1);
|
|
|
- color: var(--editor-main-color);
|
|
|
- }
|
|
|
- &:hover {
|
|
|
- border: 1px solid var(--editor-main-color);
|
|
|
- color: var(--editor-main-color);
|
|
|
- }
|
|
|
- span {
|
|
|
- width: 80%;
|
|
|
- text-align: center;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- }
|
|
|
- p {
|
|
|
- font-size: 12px;
|
|
|
- font-family: MicrosoftYaHei;
|
|
|
- color: rgba(255, 255, 255, 0.3);
|
|
|
- line-height: 22px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-}
|
|
|
-.music-user {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- > div {
|
|
|
- width: 100%;
|
|
|
- padding-right: 35px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- span {
|
|
|
- position: absolute;
|
|
|
- display: block;
|
|
|
- top: 50%;
|
|
|
- right: 0px;
|
|
|
- transform: translateY(-50%);
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <ui-editor-toolbox>
|
|
|
+ <ul class="edit-list">
|
|
|
+ <li>
|
|
|
+ <div class="title">
|
|
|
+ <span>{{ $t('info.toolbox.music') }}</span>
|
|
|
+ <label @click="onUpload">
|
|
|
+ <ui-icon :tip="$t('info.toolbox.uploadMusic')" tipH="right" type="uploading" />
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <ui-input type="select" :options="musics" width="100%" :placeholder="$t('common.none')" v-model="music" stop-el="i">
|
|
|
+ <template v-slot:option="{ raw }">
|
|
|
+ <div :class="{ 'music-user': raw.user }">
|
|
|
+ <div>{{ raw.label }}</div>
|
|
|
+ <!-- <div>{{ raw.user ? raw.value : $t(`info.musics.${raw.value}`) }}</div> -->
|
|
|
+ <span v-show="raw.user" @click.stop="onDeleteUpload(raw)"><i class="iconfont icon-del"></i></span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ui-input>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="title">
|
|
|
+ <span>{{ $t('info.toolbox.share') }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="between">
|
|
|
+ <ui-button width="47.5%" ref="copy" :data-clipboard-text="copyLink">{{ $t('info.toolbox.copyLink') }}</ui-button>
|
|
|
+ <ui-button width="47.5%" @click="onDownloadQrCode">{{ $t('info.toolbox.downLoadCode') }}</ui-button>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="between">
|
|
|
+ <span>{{ $t('info.toolbox.uploadTime') }}</span>
|
|
|
+ <label>{{ metadata.createTime }}</label>
|
|
|
+ </div>
|
|
|
+ <div class="between">
|
|
|
+ <span>{{ $t('info.toolbox.shootPoint') }}</span>
|
|
|
+ <label>{{ metadata.panoCount || 0 }}</label>
|
|
|
+ </div>
|
|
|
+ <div class="between">
|
|
|
+ <span>{{ $t('info.toolbox.boxVideo') }}</span>
|
|
|
+ <label>{{ metadata.videoCount || 0 }}</label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <ui-window v-if="showUpload" :title="$t('info.toolbox.addBackgroundMusic')" :canSubmit="file" @no="onCancel" @ok="onConfirm" :noText="$t('common.cancel')" :okText="$t('common.confirm')">
|
|
|
+ <template v-slot:content>
|
|
|
+ <div class="upload-music-box">
|
|
|
+ <label for="file" :class="{ active: file }">
|
|
|
+ <span v-if="!file">+ {{ $t('info.toolbox.uploadMusic') }}</span>
|
|
|
+ <span v-else>{{ file.name }}</span>
|
|
|
+ </label>
|
|
|
+ <input type="file" accept=".mp3,.wav" id="file" @change="changeFile" />
|
|
|
+ <!-- <p class="tips">{{ $t('info.toolbox.uploadTips') }}</p> -->
|
|
|
+ <p class="tips">{{ $t('limit.formSize', { size: '5MB', form: 'MP3 / WAV' }) }}</p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ui-window>
|
|
|
+ </ui-editor-toolbox>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import ClipboardJS from 'clipboard'
|
|
|
+import { ref, computed, onMounted, nextTick } from 'vue'
|
|
|
+import { useStore } from 'vuex'
|
|
|
+import { Dialog } from '@kankan/components'
|
|
|
+import { downloadFile } from '@/utils/download'
|
|
|
+import { getApp, getNum } from '@/app'
|
|
|
+import { useMusicPlayer } from '@/utils/sound'
|
|
|
+import { useI18n } from '@/i18n'
|
|
|
+import * as apis from '@/apis/scene-edit.js'
|
|
|
+import browser from '@/utils/browser'
|
|
|
+
|
|
|
+const musicPlayer = useMusicPlayer()
|
|
|
+const { t } = useI18n({ useScope: 'global' })
|
|
|
+const store = useStore()
|
|
|
+const metadata = computed(() => store.getters['info/metadata'])
|
|
|
+const music = computed({
|
|
|
+ get() {
|
|
|
+ if (metadata.value.music) {
|
|
|
+ // let item = /^0\d$/.test(metadata.value.music) ? metadata.value.music : metadata.value.music == 'none' || metadata.value.music == '' ? 'none' : metadata.value.musicFile
|
|
|
+ let item = /^0\d$/.test(metadata.value.music) ? metadata.value.music : metadata.value.music == 'none' ? 'none' : metadata.value.musicFile
|
|
|
+ // let item = /^0\d$/.test(metadata.value.music) ? metadata.value.music : metadata.value.musicFile
|
|
|
+ return item
|
|
|
+ } else {
|
|
|
+ return 'none'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ set(music) {
|
|
|
+ store.commit('info/update', { music })
|
|
|
+ musicPlayer.play()
|
|
|
+ },
|
|
|
+})
|
|
|
+const musics = computed(() => {
|
|
|
+ let list = store.getters['info/music']
|
|
|
+ list.map(i => {
|
|
|
+ if (i.value == '') {
|
|
|
+ i.value = 'none'
|
|
|
+ }
|
|
|
+ let item = /^0\d$/.test(i.value) ? t(`info.musics.${i.value}`) : i.value == 'none' ? t(`info.musics.${i.value}`) : i.value
|
|
|
+ i.label = item
|
|
|
+ })
|
|
|
+ return list
|
|
|
+})
|
|
|
+const copy = ref(null)
|
|
|
+const file = ref(null)
|
|
|
+const showUpload = ref(false)
|
|
|
+const copyLink = computed(() => {
|
|
|
+ let domain = store.getters['scene/whichDept'] == 'HK' ? process.env.VUE_APP_SHOW_HK_URL : process.env.VUE_APP_SHOW_URL
|
|
|
+ return domain + `index.html?m=${browser.getURLParam('m')}`
|
|
|
+})
|
|
|
+
|
|
|
+const onUpload = () => {
|
|
|
+ if (metadata.value.musicFile) {
|
|
|
+ Dialog.confirm({
|
|
|
+ content: `${t('info.toolbox.addTips')}`,
|
|
|
+ title: t('common.tips'),
|
|
|
+ okText: t('common.confirm'),
|
|
|
+ noText: t('common.cancel'),
|
|
|
+ func: state => {
|
|
|
+ if (state == 'ok') {
|
|
|
+ showUpload.value = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ showUpload.value = true
|
|
|
+ }
|
|
|
+}
|
|
|
+const onDeleteUpload = item => {
|
|
|
+ // store.commit('info/update', { music: '', musicFile: '', files: { music: null } })
|
|
|
+ console.log(item)
|
|
|
+ let params = {
|
|
|
+ musicFile: '',
|
|
|
+ files: { music: null },
|
|
|
+ }
|
|
|
+ if (metadata.value.music == item.value) {
|
|
|
+ params.music = ''
|
|
|
+ }
|
|
|
+ store.commit('info/update', params)
|
|
|
+}
|
|
|
+const changeFile = e => {
|
|
|
+ console.log(e.target.files[0])
|
|
|
+ let fileType = e.target.files[0].name.split('.').pop().toLowerCase()
|
|
|
+ console.log(fileType)
|
|
|
+ if (['mp3', 'wav'].indexOf(fileType) == -1) {
|
|
|
+ Dialog.toast({
|
|
|
+ content: `${t('limit.formFile', { form: 'MP3 / WAV' })}`, //'仅支持 MP3/WAV 格式的音频',
|
|
|
+ type: 'error',
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (e.target.files[0].size / 1024 / 1024 > 5) {
|
|
|
+ Dialog.toast({
|
|
|
+ // content: e.target.files[0].name + '的大小超过了5MB',
|
|
|
+ content: `${t('limit.formSize', { form: 'MP3 / WAV', size: '5MB' })}`, //'请上传5MB以内的MP3/WAV文件',
|
|
|
+ type: 'error',
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (e.target && e.target.files[0]) {
|
|
|
+ file.value = e.target.files[0]
|
|
|
+ }
|
|
|
+}
|
|
|
+const onCancel = e => {
|
|
|
+ showUpload.value = false
|
|
|
+ file.value = null
|
|
|
+}
|
|
|
+const onConfirm = () => {
|
|
|
+ store.commit('info/update', { music: file.value.name, musicFile: file.value.name, files: { music: file.value } })
|
|
|
+ nextTick(() => {
|
|
|
+ musicPlayer.play()
|
|
|
+ })
|
|
|
+ onCancel()
|
|
|
+}
|
|
|
+const onDownloadQrCode = () => {
|
|
|
+ let a = document.createElement('a')
|
|
|
+ let link = `/service/scene/edit/down/qrCode?num=${browser.getURLParam('m')}`
|
|
|
+ a.href = link
|
|
|
+ a.download = `4DKanKan_share.png`
|
|
|
+ a.target = '_blank'
|
|
|
+ a.click()
|
|
|
+ a.remove()
|
|
|
+ // downloadFile(getApp().resource.getResourceURL(`downloads/scene/{num}/QRcode/{num}.png`), `4DKanKan_share.png`)
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ alert(1)
|
|
|
+ var clipboard = new ClipboardJS(copy.value.$el)
|
|
|
+ clipboard.on('success', function (e) {
|
|
|
+ e.clearSelection()
|
|
|
+ Dialog.toast({ content: `${t('info.toolbox.copySuccess')}`, type: 'success' })
|
|
|
+ })
|
|
|
+})
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.upload-music-box {
|
|
|
+ width: 400px;
|
|
|
+
|
|
|
+ input {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ label {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 34px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
+ cursor: pointer;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ &.active {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ color: var(--editor-main-color);
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ border: 1px solid var(--editor-main-color);
|
|
|
+ color: var(--editor-main-color);
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ width: 80%;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ color: rgba(255, 255, 255, 0.3);
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+.music-user {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ > div {
|
|
|
+ width: 100%;
|
|
|
+ padding-right: 35px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ top: 50%;
|
|
|
+ right: 0px;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
