1082 lines
27 KiB
Vue
1082 lines
27 KiB
Vue
<!-- BCP系统 -->
|
||
<script setup lang="ts">
|
||
import HomeHead from '@/views/home/components/HomeHead.vue'
|
||
// import HomeHeadSearch from '@/views/home/components/HomeHeadSearch.vue'
|
||
import Action from './ation.vue'
|
||
import sTree from './sTree.vue'
|
||
import { useDate } from '@/views/home/hooks/useDate'
|
||
import { useMessage, NModal, NPopover } from 'naive-ui'
|
||
import { getBPCActList, BPCDownload, getCateTreeList } from '@/api/daikin/base'
|
||
import { useUserStore } from '@/stores/modules/user'
|
||
import Amtion from '@/components/amtion.vue'
|
||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||
import { Autoplay, Navigation, Pagination, A11y } from 'swiper'
|
||
const modules = [Autoplay, Pagination, Navigation, A11y]
|
||
const store = useUserStore()
|
||
const userCode = ['admin', 'bcp_dandnag', 'tech_service'].includes(
|
||
store.user.roleCode
|
||
)
|
||
|
||
// import { da } from 'element-plus/es/locale/index.js'
|
||
const { day, week } = useDate()
|
||
const { push } = useRouter()
|
||
const message = useMessage()
|
||
|
||
// let index = -1
|
||
const dataA = ref([])
|
||
const dataB = ref([])
|
||
const dataD = ref([])
|
||
const dataC = ref([])
|
||
const dataE = ref([])
|
||
onMounted(async () => {
|
||
getData()
|
||
})
|
||
|
||
const scrollNewHandler = function (ev) {
|
||
let target = ev.target
|
||
document.getElementById('summaryContent').scrollTop = target.scrollTop
|
||
console.log(ev)
|
||
}
|
||
const scrollSummaryHandler = function (ev) {
|
||
let target = ev.target
|
||
document.getElementById('newContent').scrollTop = target.scrollTop
|
||
console.log(ev)
|
||
}
|
||
|
||
function getFileName(url) {
|
||
let lastSplashIndex = url.lastIndexOf('/')
|
||
let lastDotIndex = url.lastIndexOf('.')
|
||
return url.slice(lastSplashIndex + 1, lastDotIndex)
|
||
}
|
||
|
||
function computedTreeNode(item: any) {
|
||
console.log(item, '一级数据1111111')
|
||
let oldFileList = JSON.parse(JSON.stringify(item.fileList))
|
||
item.childList = item.childList || []
|
||
item.childList = item.childList.map(computedTreeNode)
|
||
item.fileList = []
|
||
oldFileList.map((item2: any) => {
|
||
if (item2.isSelect == item.id) {
|
||
item.fileList.push({
|
||
...item2,
|
||
isShow: false,
|
||
fileName: getFileName(item2.filePath)
|
||
})
|
||
}
|
||
})
|
||
return item
|
||
}
|
||
|
||
async function getData() {
|
||
const {rows:datacArr} = await getBPCActList({moduleId: 2})
|
||
const { rows: dataArr } = await getBPCActList({ moduleId: 1 })
|
||
const { rows: dataBrr } = await getBPCActList({ moduleId: 4 })
|
||
// const { rows: dataCrr } = await getBPCActList({ moduleId: 3 });
|
||
const { data: dataDrr } = await getCateTreeList({ moduleId: 4 })
|
||
const { rows: dataErr } = await getBPCActList({ moduleId: 5 })
|
||
|
||
dataC.value = datacArr
|
||
|
||
dataA.value = dataArr.map((item) => {
|
||
return {
|
||
...item,
|
||
fileName: getFileName(item.filePath),
|
||
breifName: getFileName(item.briefingPath)
|
||
}
|
||
})
|
||
dataB.value = dataBrr
|
||
// dataC.value = dataCrr;
|
||
|
||
dataDrr.forEach((item) => {
|
||
return addIsShow(item)
|
||
})
|
||
|
||
dataD.value = dataDrr
|
||
console.log(dataDrr)
|
||
// dataD.value = dataDrr.map(item => {
|
||
// return {
|
||
// ...item,
|
||
// childList: item.childList || []
|
||
// }
|
||
// });
|
||
dataE.value = dataErr
|
||
dataE.value = [
|
||
{ title: '社区在库', content: '高风险地区社数疫情的确' },
|
||
{ title: '在送数量', content: '高风险地区社数疫情的确' },
|
||
{ title: '风险指数', content: '高风险地区社数疫情的确' },
|
||
{ title: '风险指数', content: '高风险地区社数疫情的确' },
|
||
{ title: '风险指数', content: '高风险地区社数疫情的确' },
|
||
{ title: '风险指数', content: '高风险地区社数疫情的确' },
|
||
{ title: '社区在库', content: '高风险地区社数疫情的确' },
|
||
{ title: '社区在库', content: '高风险地区社数疫情的确' }
|
||
]
|
||
}
|
||
|
||
function getFile(arr:any[]):any[] {
|
||
let file:any = []
|
||
arr.forEach((item) => {
|
||
item.fileList && file.push(...item.fileList)
|
||
if (item.childList?.length) {
|
||
file.push(...getFile(item.childList))
|
||
}
|
||
})
|
||
return file
|
||
}
|
||
|
||
function addIsShow(obj) {
|
||
if (obj) {
|
||
obj.isShow = true // 在当前对象上添加 isShow 属性
|
||
obj.fileList ? obj.fileLists = [...obj.fileList ] : obj.fileLists = []
|
||
if (obj.childList && obj.childList.length > 0) {
|
||
obj.fileLists.push(...getFile(obj.childList))
|
||
// 如果有子对象，则递归调用 addIsShow 函数
|
||
// obj.childList.forEach((child) => {
|
||
// addIsShow(child)
|
||
// })
|
||
}
|
||
}
|
||
}
|
||
|
||
const src = ref('')
|
||
const srcType = ref()
|
||
const showModalRef2 = ref(false)
|
||
const clickFileHandler = async (row) => {
|
||
console.log(row, 'xiaolu9999')
|
||
download(row)
|
||
}
|
||
const clickMoreHandler = async (row) => {
|
||
push({ name: 'bpcTreeDetail', query: { id: row.id } })
|
||
console.log(row, '111111')
|
||
}
|
||
const changeIsShowFn = async (index: number) => {
|
||
dataD.value[index].isShow = !dataD.value[index].isShow
|
||
console.log(dataD.value, 'xiaolu11')
|
||
}
|
||
const jumpListHandler = (title, type) => {
|
||
push({ name: 'bpclist', query: { title, type } })
|
||
}
|
||
const jumpContentHandler = (title, type) => {
|
||
push({ name: 'contentList', query: { title, type } })
|
||
}
|
||
const download = async (row) => {
|
||
if (!row) return
|
||
if (row.isSelect === 2) {
|
||
message.error('没有访问权限')
|
||
return
|
||
}
|
||
let { briefingPath ,filePath } = row
|
||
console.log("🚀 ~ file: BCP.vue:169 ~ briefingPath ,filePath:", briefingPath ,filePath)
|
||
|
||
if (!briefingPath && !filePath) {
|
||
message.info('没有可预览文件！')
|
||
return
|
||
}
|
||
srcType.value = getLastSubstring(briefingPath || filePath)
|
||
if (
|
||
['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'pdf'].includes(srcType.value)
|
||
) {
|
||
// src.value = filePath
|
||
// pdfShow.value = true
|
||
briefingPath = briefingPath || filePath
|
||
const screenWidth = window.screen.width
|
||
const screenHeight = window.screen.height
|
||
window.open(
|
||
briefingPath,
|
||
'',
|
||
'width=' +
|
||
screenWidth +
|
||
',height=' +
|
||
screenHeight +
|
||
',top=' +
|
||
0 +
|
||
',left=' +
|
||
0
|
||
)
|
||
} else {
|
||
message.error(
|
||
"文件格式不是 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx','pdf'！"
|
||
)
|
||
}
|
||
}
|
||
|
||
const toggleHandler = function (ev) {
|
||
ev.target.parentNode.parentNode.classList.toggle('expand')
|
||
}
|
||
|
||
function unescapeHTML(html: string) {
|
||
if (!html) return ''
|
||
const doc = new DOMParser().parseFromString(html, 'text/html')
|
||
return doc.documentElement.textContent
|
||
}
|
||
|
||
const showDetail = function (row, id) {
|
||
// console.log(row, id);
|
||
sessionStorage.setItem('title', row.title)
|
||
console.log(row.content)
|
||
sessionStorage.setItem('content', row.content)
|
||
push({ name: 'bcpDetail' })
|
||
}
|
||
|
||
function getLastSubstring(str: string): string {
|
||
const lastIndex = str.lastIndexOf('.')
|
||
if (lastIndex !== -1) {
|
||
return str.substring(lastIndex + 1)
|
||
} else {
|
||
return ''
|
||
}
|
||
}
|
||
|
||
// async function download(row, moduleId) {
|
||
// const { code, data } = await BPCDownload({ id: row.id })
|
||
// if (code != 200) return;
|
||
|
||
// try {
|
||
// const response = await BPCDownload({ id: row.id })
|
||
// var blob = new Blob([response.data]);
|
||
|
||
// const downloadUrl = URL.createObjectURL(blob);
|
||
|
||
// const link = document.createElement('a');
|
||
// link.href = downloadUrl;
|
||
// link.download = row.fileName; // 替换为你要保存的文件名
|
||
// link.click();
|
||
// URL.revokeObjectURL(downloadUrl);
|
||
// } catch (error) {
|
||
// message.error(error)
|
||
// // message.error('下载文件出错：', error);
|
||
// }
|
||
// }
|
||
|
||
const isChart = (content) => {
|
||
return unescapeHTML(content).replace(/[^\u0000-\u00ff]/g, 'aa').length >= 27
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<HomeHead class="top">
|
||
<template #content>
|
||
<!-- <HomeHeadSearch /> -->
|
||
</template>
|
||
</HomeHead>
|
||
<div class="h-full relative flex flex-col">
|
||
<el-button
|
||
type="primary"
|
||
v-if="userCode"
|
||
class="button !top-40px"
|
||
@click="push({ name: 'modifyBPC' })"
|
||
>内容管理</el-button
|
||
>
|
||
<div class="font-600 flex text-36px mt39px bcp-title">
|
||
BCP：SCM系统(智能供应链)数据联动+BI化呈现
|
||
</div>
|
||
<div class="b-wrapper flex-1 flex flex-col items-center">
|
||
<!-- <div class="scroll w1372px h66px">
|
||
滚动条:BCP实时情报.:BCP实时情报.:BCP实时情报.:BCP实时情报.:BCP实时情报.
|
||
</div> -->
|
||
<!-- <el-button type="primary" class="button" @click="push({ name: 'modifyBPC' })">情报管理</el-button> -->
|
||
<div class="b-content w-full flex-1 relative">
|
||
<div class="new absolute">
|
||
<div
|
||
class="text-22px font-500 font-bold new-title text-center"
|
||
@click="jumpContentHandler('BCP News', 1)"
|
||
>
|
||
BCP News
|
||
</div>
|
||
<div
|
||
class="absolute right-40px top-35px justify-center flex"
|
||
@click="jumpContentHandler('BCP News', 1)"
|
||
>
|
||
更多<el-icon>
|
||
<DArrowRight class="" />
|
||
</el-icon>
|
||
</div>
|
||
|
||
<div
|
||
class="new-content overflow-hidden"
|
||
id="newContent"
|
||
v-if="dataA.length > 0"
|
||
>
|
||
<!-- <div v-for="it in dataA" class="new-item h20px mb-10px overflow-hidden" :key="it">
|
||
<div class="news1 w340px h38px text-16px lh-22px" @click="showDetail(it, 1)">
|
||
<span v-if="it.status === 'New'" class="tit bg-#2CBA06" style="color: white">{{ it.status }}:</span>
|
||
<span class="cur_p" style="color: white">{{ it.title }}: </span>
|
||
<span class="cur_file" @click.stop="download(it, 1)">{{
|
||
it.fileName
|
||
}}</span>
|
||
</div>
|
||
</div> -->
|
||
<el-table
|
||
v-if="false"
|
||
:data="[]"
|
||
style="width: 100%"
|
||
row-key="markId"
|
||
:header-cell-style="{
|
||
color: '#fff',
|
||
height: '40px',
|
||
'font-size': '18px',
|
||
background: 'linear-gradient(to top, #006BE5, #002C99)'
|
||
}"
|
||
:cell-style="{}"
|
||
>
|
||
<el-table-column prop="" label="时间" width="70px">
|
||
</el-table-column>
|
||
<el-table-column prop="" label="情报内容"> </el-table-column>
|
||
<el-table-column prop="" label="风险评估"> </el-table-column>
|
||
</el-table>
|
||
<div
|
||
class="flex font-bold items-center h-40px w-full text-white text-18px border-b-black border-2px mt-4px"
|
||
style="background: linear-gradient(to top, #006be5, #002c99)"
|
||
>
|
||
<div class="w-[20%] pl-6px">时间</div>
|
||
<div class="w-[50%]">情报内容</div>
|
||
<div class="w-[30%]">风险评估</div>
|
||
</div>
|
||
<div class="overflow-hidden pt-4px">
|
||
<swiper
|
||
:autoplay="{ delay: 1000, disableOnInteraction: false }"
|
||
id="swiperList2"
|
||
:slides-per-view="3"
|
||
:speed="500"
|
||
:space-between="0"
|
||
:direction="'vertical'"
|
||
:scrollbar="{ draggable: false }"
|
||
:loop="true"
|
||
:modules="modules"
|
||
style="padding-top: 12px; height: 150px"
|
||
>
|
||
<swiper-slide v-for="i in dataA" :key="i.id">
|
||
<div
|
||
class="!h-40px mb-10px text-16px leading-5 flex items-center w-full text-white"
|
||
>
|
||
<div class="w-[20%] pl-6px">
|
||
{{ i.createTime.substring(5, 10) }}
|
||
</div>
|
||
<div class="truncate w-[50%] pr-6px">
|
||
{{ unescapeHTML(i.content) }}
|
||
</div>
|
||
<div class="truncate w-[30%]">
|
||
{{ unescapeHTML(i.riskEstimation) }}
|
||
</div>
|
||
</div>
|
||
</swiper-slide>
|
||
</swiper>
|
||
</div>
|
||
<el-table
|
||
v-if="false"
|
||
:data="dataA"
|
||
style="width: 100%; margin-bottom: 20px"
|
||
row-key="markId"
|
||
:header-cell-style="{
|
||
color: '#fff',
|
||
height: '40px',
|
||
'font-size': '18px',
|
||
background: 'linear-gradient(to top, #006BE5, #002C99)'
|
||
}"
|
||
:cell-style="{
|
||
'overflow-y': 'auto',
|
||
height: '40px',
|
||
border: '1px solid rgba(0,0,0,0.2)',
|
||
color: '#fff'
|
||
}"
|
||
height="850"
|
||
>
|
||
<el-table-column prop="createTime" label="时间" width="70px">
|
||
<template #default="scope">
|
||
{{ scope.row.createTime.substring(5, 10) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="content" label="情报内容">
|
||
<template #default="scope">
|
||
<div
|
||
class="h-45px p0 m0 text-ellipsis whitespace-nowrap overflow-hidden"
|
||
:class="isChart(scope.row.content) ? 'text-ellipsis' : ''"
|
||
:title="unescapeHTML(scope.row.content)"
|
||
>
|
||
{{ unescapeHTML(scope.row.content) }}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="riskEstimation" label="风险评估">
|
||
<template #default="scope">
|
||
<div
|
||
class="h-45px p0 m0"
|
||
:class="
|
||
isChart(scope.row.riskEstimation)
|
||
? 'two-line-header '
|
||
: ''
|
||
"
|
||
:title="scope.row.riskEstimation"
|
||
>
|
||
{{ scope.row.riskEstimation }}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div v-if="dataA.length == 0" class="empty-content"></div>
|
||
</div>
|
||
<img
|
||
src="./images/yojjt@2x.png"
|
||
class="w-18px h18px absolute left-49.5% top-20% ml--8px"
|
||
/>
|
||
<div class="summary absolute">
|
||
<!-- <div class="arrow"></div> -->
|
||
<div
|
||
class="text-22px font-500 font-bold summary-title text-center"
|
||
@click="jumpContentHandler('BCP简报', 2)"
|
||
>
|
||
BCP简报
|
||
</div>
|
||
<div
|
||
class="absolute right-40px top-35px flex items-center"
|
||
@click="jumpContentHandler('BCP简报', 2)"
|
||
>
|
||
更多<el-icon>
|
||
<DArrowRight class="" />
|
||
</el-icon>
|
||
</div>
|
||
<div
|
||
class="rounded-2xl summary-content overflow-hidden"
|
||
id="summaryContent"
|
||
v-if="dataC.length > 0"
|
||
>
|
||
<swiper
|
||
:autoplay="{ delay: 1000, disableOnInteraction: false }"
|
||
id="swiperList2"
|
||
:slides-per-view="4"
|
||
:speed="500"
|
||
:space-between="0"
|
||
:direction="'vertical'"
|
||
:scrollbar="{ draggable: false }"
|
||
:loop="true"
|
||
:modules="modules"
|
||
style="padding-top: 10px; height: 190px"
|
||
>
|
||
<!-- <div
|
||
v-for="(it, index) in dataA"
|
||
class="py22px h20px overflow-hidden item-row"
|
||
:key="it"
|
||
:style="
|
||
index == 0
|
||
? ' border-radius:25px 25px 0px 0px ;'
|
||
: index == 3
|
||
? ' border-radius: 0 0 25px 25px;'
|
||
: ''
|
||
"
|
||
>
|
||
<div
|
||
v-if="index < 4"
|
||
class="inline-flex cur_p file-icon text-16px"
|
||
@click="download(it, 1)"
|
||
style="line-height: 13px"
|
||
>
|
||
{{ it.breifName }}
|
||
</div>
|
||
</div> -->
|
||
<swiper-slide v-for="i in dataC" :key="i.id">
|
||
<div class="py22px item-row items-center flex">
|
||
<div
|
||
class="inline-flex cur_p file-icon text-16px"
|
||
@click="download(i)"
|
||
>
|
||
{{ i.title }}
|
||
</div>
|
||
</div>
|
||
</swiper-slide>
|
||
</swiper>
|
||
</div>
|
||
<div v-else class="empty-content"></div>
|
||
</div>
|
||
|
||
<div class="operate w344px h180px absolute">
|
||
<div class="ring-operate"></div>
|
||
<div
|
||
class="text-23px operate-title text-#00E4FF font-500"
|
||
@click="jumpListHandler('运营守则', 4)"
|
||
>
|
||
运营守则
|
||
</div>
|
||
<div class="operate-content overflow-y-auto" v-if="dataB.length > 0">
|
||
<div
|
||
v-if="dataB"
|
||
v-for="it in dataB"
|
||
class="py12px h34px overflow-hidden"
|
||
:key="it"
|
||
>
|
||
<n-popover trigger="hover" placement="top-start">
|
||
<template #trigger>
|
||
<div
|
||
class="inline-flex cur_p file-icon text-16px"
|
||
@click="download(it, 4)"
|
||
style="line-height: 25px"
|
||
>
|
||
{{ it.title }}
|
||
</div>
|
||
</template>
|
||
<div class="text-20px truncate leading-40px">
|
||
{{ it.title }}
|
||
</div>
|
||
</n-popover>
|
||
</div>
|
||
</div>
|
||
<div v-else class="empty-content"></div>
|
||
</div>
|
||
|
||
<div class="gen w293px h92px absolute">
|
||
<div class="ring-gen"></div>
|
||
<div class="text-23px text-#00E4FF font-500 gen-title">供方SCM</div>
|
||
<div class="gen-content overflow-y-auto" v-if="true">
|
||
<!-- <div v-if="dataC" v-for="it in dataC" class="py8px h28px overflow-hidden" :key="it">
|
||
<n-popover trigger="hover" placement="top-start">
|
||
<template #trigger>
|
||
<div class="inline-flex cur_p file-icon" @click="download(it, 4)">
|
||
{{ it.title }}
|
||
</div>
|
||
</template>
|
||
<div class="text-20px truncate leading-40px">
|
||
{{ it.title }}
|
||
</div>
|
||
</n-popover>
|
||
</div> -->
|
||
<img src="./images/ss.png" class="w-388px" />
|
||
</div>
|
||
<div v-else class="empty-content">
|
||
<div class="content"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="supplier absolute">
|
||
<div class="ring-supplier"></div>
|
||
<div
|
||
class="text-23px text-#00E4FF font-500 supplier-title"
|
||
@click="push({ name: 'bpcTreeDetail' })"
|
||
style="cursor: pointer"
|
||
>
|
||
BCP情报
|
||
</div>
|
||
<div
|
||
class="supplier-content overflow-y-auto text-16px"
|
||
v-if="dataD.length > 0"
|
||
>
|
||
<s-tree
|
||
:data="dataD"
|
||
@changeIsShow="changeIsShowFn"
|
||
@clickFile="clickFileHandler"
|
||
@clickMore="clickMoreHandler"
|
||
></s-tree>
|
||
<!-- <div v-if="dataD" v-for="it in dataD" class="supplier-item expand">
|
||
<div class="suppier-sub-title">
|
||
{{it.name}}
|
||
<span class="icon-arrow" @click="toggleHandler($event)"></span>
|
||
</div>
|
||
<div v-for="(item, index) in it.childList" :key="index" class="supplier-item-container">
|
||
<div class="sub-title">
|
||
<span>{{index + 1}})</span>
|
||
{{item.name}}
|
||
</div>
|
||
<div class="file-icon">{{item.name}}</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
<div v-else class="empty-content"></div>
|
||
</div>
|
||
|
||
<div class="dunpai w113px h69px absolute"></div>
|
||
<div class="cxpai absolute"></div>
|
||
|
||
<div class="earth w400px h400px absolute">
|
||
<Action :dataE="dataE" @downloadHandle="download"></Action>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<n-modal :mask-closable="true" v-model:show="showModalRef2">
|
||
<div class="w90% h90%">
|
||
<Amtion :data="src" :datas="srcType" />
|
||
</div>
|
||
</n-modal>
|
||
</template>
|
||
|
||
<style scoped lang="less">
|
||
.item-row {
|
||
background: linear-gradient(to right, #006be5, #002c99);
|
||
border-bottom: 2px solid rgba(0, 0, 0, 0.5);
|
||
height: 38px;
|
||
padding-left: 10px;
|
||
}
|
||
.two-line-header {
|
||
position: relative;
|
||
}
|
||
.two-line-header::before {
|
||
float: right;
|
||
margin-top: 23px;
|
||
width: 10px;
|
||
height: 5px;
|
||
content: '...';
|
||
color: rgb(255, 255, 255);
|
||
}
|
||
.new-content /deep/ .el-table,
|
||
.new-content /deep/ .el-table__expanded-cell {
|
||
background-color: transparent;
|
||
color: #606266;
|
||
}
|
||
/* 表格内背景颜色 */
|
||
.new-content /deep/ .el-table th,
|
||
.new-content /deep/ .el-table tr,
|
||
.new-content /deep/ .el-table td {
|
||
background-color: transparent !important;
|
||
//表格字体颜色
|
||
color: #606266;
|
||
}
|
||
.new-content /deep/ .el-table .el-table__cell {
|
||
padding: 5px 0 !important;
|
||
}
|
||
.new-content /deep/ .el-table .cell {
|
||
padding: 0 5px !important;
|
||
}
|
||
.new-item {
|
||
display: flex;
|
||
|
||
.news1 {
|
||
flex: 0 0 100%;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
color: #00e4ff;
|
||
}
|
||
|
||
.cur_file {
|
||
flex: 0 0 50%;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
line-height: 20px;
|
||
color: #00e4ff;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.ring-operate {
|
||
position: absolute;
|
||
right: -120px;
|
||
top: -10px;
|
||
width: 117px;
|
||
height: 109px;
|
||
background: url('./images/tbjj.png'), url('./images/bcppp.png');
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
}
|
||
|
||
.ring-gen {
|
||
position: absolute;
|
||
right: -140px;
|
||
top: -50px;
|
||
width: 117px;
|
||
height: 109px;
|
||
background: url('./images/tbjj.png'), url('./images/gfs.png');
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
}
|
||
|
||
.ring-supplier {
|
||
position: absolute;
|
||
left: -120px;
|
||
top: -50px;
|
||
width: 117px;
|
||
height: 109px;
|
||
background: url('./images/tbjj.png'), url('./images/bcppT.png');
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
}
|
||
|
||
.max-w120px {
|
||
max-width: 148px;
|
||
display: block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.empty-content {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 40px;
|
||
bottom: 0;
|
||
right: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-image: url('./images/tishi2.png');
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
}
|
||
|
||
.operate,
|
||
.gen,
|
||
.supplier {
|
||
.empty-content {
|
||
top: 40px;
|
||
}
|
||
}
|
||
|
||
.cxpai {
|
||
width: 231px;
|
||
height: 37px;
|
||
right: 0;
|
||
left: 0;
|
||
margin: auto;
|
||
top: 520px;
|
||
z-index: 99;
|
||
background: url('./images/tishi3.png');
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.gen .empty-content {
|
||
top: 25px;
|
||
left: -10px;
|
||
|
||
.content {
|
||
position: absolute;
|
||
top: 140px;
|
||
}
|
||
}
|
||
|
||
.cur_p {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.tit {
|
||
padding: 3px;
|
||
font-size: 12px;
|
||
border-radius: 3px;
|
||
line-height: 1;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.button {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 20px;
|
||
z-index: 500;
|
||
}
|
||
|
||
.bcp-title {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 1px;
|
||
}
|
||
|
||
.top {
|
||
position: absolute;
|
||
right: 30px;
|
||
top: -92px;
|
||
}
|
||
|
||
.b-wrapper {
|
||
border-radius: 18px;
|
||
border: 1px solid #e7ebf5;
|
||
box-shadow: inset 1px 2px 12px rgba(14, 86, 221, 0.32);
|
||
background-image: url('./images/bcpbj.png');
|
||
background-size: 100% 100%;
|
||
overflow: hidden;
|
||
|
||
.scroll {
|
||
font-size: 26px;
|
||
text-align: center;
|
||
line-height: 66px;
|
||
background-image: url('./images/tout.png');
|
||
background-size: cover;
|
||
}
|
||
|
||
.specific {
|
||
top: 35px;
|
||
left: 965px;
|
||
background-image: url('./images/kneur.png');
|
||
background-size: cover;
|
||
}
|
||
|
||
.file-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 21px;
|
||
background-image: url('./images/biq2.png');
|
||
background-size: 24px 20px;
|
||
background-repeat: no-repeat;
|
||
background-size: left center;
|
||
padding-left: 28px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: block;
|
||
line-height: 20px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.file-icon:hover {
|
||
color: #00e4ff;
|
||
}
|
||
|
||
.font-bold {
|
||
font-weight: bold;
|
||
height: 41px;
|
||
background-image: url('./images/bitbj@2x.png');
|
||
background-size: 230px 35px;
|
||
background-position: center top;
|
||
background-repeat: no-repeat;
|
||
}
|
||
// bcp简报
|
||
.summary {
|
||
top: 15px;
|
||
left: 50%;
|
||
// width: 427px;
|
||
// height: 265px;
|
||
width: 543px;
|
||
height: 327px;
|
||
padding-left: 48px;
|
||
padding-top: 64px;
|
||
padding-right: 48px;
|
||
background-image: url('./images/jianbk2.png');
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
|
||
.arrow {
|
||
width: 20px;
|
||
height: 28px;
|
||
background: url('./images/lans.png');
|
||
position: absolute;
|
||
left: -2px;
|
||
top: 64px;
|
||
}
|
||
|
||
.summary-title {
|
||
left: 0;
|
||
position: absolute;
|
||
top: 20px;
|
||
line-height: 38px;
|
||
right: 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.summary-content {
|
||
box-sizing: border-box;
|
||
height: 190px;
|
||
|
||
// height: 150px;
|
||
}
|
||
}
|
||
|
||
// bcp-news
|
||
.new {
|
||
top: 15px;
|
||
right: 51%;
|
||
width: 543px;
|
||
height: 327px;
|
||
padding-left: 48px;
|
||
padding-top: 64px;
|
||
padding-right: 48px;
|
||
background-image: url('./images/jianbk.png');
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
|
||
.new-title {
|
||
left: 0;
|
||
position: absolute;
|
||
top: 20px;
|
||
line-height: 40px;
|
||
right: 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.new-content {
|
||
// box-sizing: border-box;
|
||
height: 180px;
|
||
}
|
||
}
|
||
|
||
// .operate {
|
||
// top: 290px;
|
||
// left: 180px;
|
||
// width: 353px;
|
||
// height: 136px;
|
||
// padding-left: 16px;
|
||
// padding-top: 40px;
|
||
// padding-right: 30px;
|
||
// background-image: url("./images/k2.png"), url("./images/k1.png");
|
||
// background-size: 353px 92.5px, 353px 45.5px;
|
||
// background-position: left top, left bottom;
|
||
// background-repeat: no-repeat;
|
||
|
||
// .operate-title {
|
||
// left: 45px;
|
||
// position: absolute;
|
||
// top: 2px;
|
||
// }
|
||
|
||
// .operate-content {
|
||
// box-sizing: border-box;
|
||
// height: 90px;
|
||
// }
|
||
// }
|
||
// 运营守则
|
||
.operate {
|
||
top: 330px;
|
||
// left: 90px;
|
||
// width: 298px;
|
||
left: 60px;
|
||
width: 340px;
|
||
height: 166px;
|
||
padding-left: 16px;
|
||
padding-top: 40px;
|
||
padding-right: 30px;
|
||
background-image: url('./images/k2.png'), url('./images/k1.png');
|
||
// background-size: 298px 92.5px, 298px 75.5px;
|
||
background-size: 340px 92.5px, 340px 75.5px;
|
||
background-position: left top, left bottom;
|
||
background-repeat: no-repeat;
|
||
|
||
.operate-title {
|
||
left: 45px;
|
||
position: absolute;
|
||
top: 2px;
|
||
}
|
||
|
||
.operate-content {
|
||
box-sizing: border-box;
|
||
height: 100px;
|
||
width: 280px;
|
||
text-align: right;
|
||
}
|
||
}
|
||
// bcp
|
||
.supplier {
|
||
top: 390px;
|
||
// left: 1100px;
|
||
left: 1050px;
|
||
width: 350px;
|
||
height: 405px;
|
||
padding-left: 40px;
|
||
padding-top: 50px;
|
||
padding-right: 16px;
|
||
background-image: url('./images/k3.png'), url('./images/k4.png');
|
||
background-size: 350px 92px, 350px 315px;
|
||
background-position: left top, left bottom;
|
||
background-repeat: no-repeat;
|
||
|
||
.supplier-title {
|
||
right: 45px;
|
||
position: absolute;
|
||
top: 2px;
|
||
}
|
||
|
||
.supplier-content {
|
||
box-sizing: border-box;
|
||
height: 363px;
|
||
}
|
||
|
||
.supplier-item {
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.suppier-sub-title {
|
||
display: flex;
|
||
line-height: 42px;
|
||
font-size: 1.1em;
|
||
align-items: center;
|
||
|
||
&::before {
|
||
content: '';
|
||
display: block;
|
||
width: 6px;
|
||
height: 6px;
|
||
background: white;
|
||
border-radius: 50%;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.icon-arrow {
|
||
display: block;
|
||
background-image: url('./images/san22.png');
|
||
width: 12px;
|
||
height: 9px;
|
||
padding: 4px;
|
||
margin-left: auto;
|
||
box-sizing: content-box;
|
||
background-origin: content-box;
|
||
background-repeat: no-repeat;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.supplier-item.expand {
|
||
.icon-arrow {
|
||
background-image: url('./images/san11.png');
|
||
}
|
||
|
||
.supplier-item-container {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.supplier-item-container {
|
||
padding-left: 24px;
|
||
line-height: 24px;
|
||
display: none;
|
||
|
||
.sub-title {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
span {
|
||
display: block;
|
||
width: 24px;
|
||
margin-right: 4px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
> div:not(:last-child) {
|
||
margin-bottom: 2px;
|
||
}
|
||
}
|
||
}
|
||
// 供方scm
|
||
.gen {
|
||
top: 510px;
|
||
left: 60px;
|
||
background-image: url('./images/k2.png'), url('./images/k1.png');
|
||
background-size: 400px 92px, 370px 0px;
|
||
|
||
background-position: left top, left bottom;
|
||
background-repeat: no-repeat;
|
||
width: 400px;
|
||
// height: 300px;
|
||
padding-top: 40px;
|
||
|
||
.gen-title {
|
||
left: 75px;
|
||
position: absolute;
|
||
top: 7px;
|
||
}
|
||
|
||
.gen-content {
|
||
box-sizing: border-box;
|
||
// height: 150px;
|
||
}
|
||
}
|
||
|
||
.dunpai {
|
||
top: 310px;
|
||
left: 689px;
|
||
background-image: url('./images/dunpai.png');
|
||
background-size: cover;
|
||
}
|
||
|
||
.earth {
|
||
top: 360px;
|
||
left: 551px;
|
||
}
|
||
}
|
||
</style>
|