824 lines
24 KiB
Plaintext
824 lines
24 KiB
Plaintext
<!-- 差别化云空间 -->
|
||
<script setup lang="ts">
|
||
import { NIcon, NModal, useMessage, NPopover, NCarousel, NCarouselItem } from 'naive-ui'
|
||
import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
|
||
import AppBlock from '@/components/AppBlock.vue'
|
||
import AppAlert from '@/components/AppAlert.vue'
|
||
import HomeHead from '@/views/home/components/HomeHead.vue'
|
||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||
import { Autoplay, Navigation, Pagination, A11y } from 'swiper'
|
||
import 'swiper/css'
|
||
import { getImg } from './images'
|
||
import 'swiper/css/navigation'
|
||
import 'swiper/css/pagination'
|
||
import { useUserStore } from '@/stores/modules/user'
|
||
import { getLabActList, getLabCsrActList, getCateList } from '@/api/daikin/base'
|
||
import { useMyStore } from '@/stores/modules/mystor'
|
||
import Amtion from '@/components/amtion.vue'
|
||
|
||
|
||
const store = useUserStore()
|
||
const myStore = useMyStore();
|
||
const userCode = ['admin', 'theme_dandang', 'tech_service'].includes(store.user.roleCode)
|
||
|
||
|
||
|
||
const message = useMessage()
|
||
const showDropdown1 = ref(false)
|
||
const showDropdown2 = ref(false)
|
||
const { push } = useRouter()
|
||
|
||
// const Navs = [{ name: '集团*部门方针' }, { name: '年度活动日程表' }, { name: '其他链接' }, { name: '紧急联络' }, { name: 'CN/JP' }]
|
||
// const Steps = ['成果展示', '课题报告', '调研报告', 'IDEABOX', '更多内容']
|
||
const fackColor = ['#4376FA', '#4CE2CC', '#00C5FF', '#FF6F5A']
|
||
const fackImg = [getImg('dpp@2x.png'), getImg('iaq@2x.png'), getImg('design@2x.png'), getImg('zhin@2x.png')]
|
||
const modules = [Autoplay, Pagination, Navigation, A11y]
|
||
const bottomData = ref()
|
||
const bottomDatas = ref()
|
||
|
||
const swipeRef = ref<any>(null)
|
||
const swipeActiveIndex = ref(0)
|
||
function handleIndex(x: any) {
|
||
swipeActiveIndex.value = x.realIndex
|
||
}
|
||
|
||
const setSwiperRef = (swiper: any) => {
|
||
swipeRef.value = swiper
|
||
}
|
||
|
||
const swiperList = ref()
|
||
const dataA = ref()
|
||
const dataBlist = ref()
|
||
const letet = ref()
|
||
const form = ref({
|
||
lable1: {
|
||
title: '',
|
||
titles: '',
|
||
year: '',
|
||
date: '',
|
||
files: [],
|
||
fileList: []
|
||
},
|
||
lable2: {
|
||
title: '',
|
||
titles: '',
|
||
year: '',
|
||
date: '',
|
||
files: [],
|
||
fileList: []
|
||
}
|
||
|
||
})
|
||
/**
|
||
* "id": 1, //唯一标识，第一次可不传
|
||
"indexId": 1, 位置id 1-未来品牌提升 2-解决方案创造 3-x领域研究
|
||
"title": "部品碳足迹管理1", //标题
|
||
"filePath": "http://127.0.0.1:8011/aa.jpg,http://127.0.0.1:8011/bb.jpg"
|
||
*/
|
||
const dogList = ref()
|
||
const dataLeft = ref()
|
||
const dataRight = ref()
|
||
const shutList1 = ref<any[]>([])
|
||
const shutList2 = ref<any[]>([])
|
||
const shutList3 = ref<any[]>([])
|
||
const memberContentIsSelects = ref()
|
||
const bannerContentIsSelects = ref()
|
||
const leftContentIsSelects = ref()
|
||
const rightContentIsSelects = ref()
|
||
const actTopIsSelects = ref()
|
||
const actMidIsSelects = ref()
|
||
const actDownIsSelects = ref()
|
||
|
||
onMounted(async () => {
|
||
const { data } = await getLabActList()
|
||
const { id, memberContent, memberContentIsSelect, bannerContentIsSelect, bannerContent, leftContentIsSelect, leftContent, rightContentIsSelect, rightContent, actTopIsSelect, actMidIsSelect, actDownIsSelect } = data
|
||
memberContentIsSelects.value = memberContentIsSelect
|
||
bannerContentIsSelects.value = bannerContentIsSelect
|
||
leftContentIsSelects.value = leftContentIsSelect
|
||
rightContentIsSelects.value = rightContentIsSelect
|
||
actTopIsSelects.value = actTopIsSelect
|
||
actMidIsSelects.value = actMidIsSelect
|
||
actDownIsSelects.value = actDownIsSelect
|
||
|
||
const { rows: datas1 } = await getLabCsrActList({ indexId: 1 })
|
||
const { rows: datas2 } = await getLabCsrActList({ indexId: 2 })
|
||
const { rows: datas3 } = await getLabCsrActList({ indexId: 3 })
|
||
// const {data:dataBots} = await getCateList({indexId:2})
|
||
// let index = 1
|
||
// if(dataBots&&dataBots!=='null'&&dataBots.length>0){
|
||
// bottomDatas.value = dataBots.map((item: { color: string; imgUrl: any })=>{
|
||
// item.color = fackColor[index],
|
||
// item.imgUrl = fackImg[index]
|
||
// ++index
|
||
// if(index>3){
|
||
// index = 0
|
||
// }
|
||
// return item
|
||
// })
|
||
// }
|
||
|
||
if (datas1 && datas1.length > 0) {
|
||
|
||
shutList1.value = datas1
|
||
|
||
|
||
}
|
||
if (datas2 && datas2.length > 0) {
|
||
|
||
shutList2.value = datas2
|
||
|
||
|
||
}
|
||
if (datas3 && datas3.length > 0) {
|
||
|
||
shutList3.value = datas3
|
||
|
||
}
|
||
console.log(shutList1.value.length)
|
||
console.log(shutList2.value.length)
|
||
console.log(shutList3.value.length)
|
||
|
||
if (leftContent && leftContent != 'null' && leftContent.length > 0) {
|
||
form.value.lable1 = leftContent[0]
|
||
dataLeft.value = leftContent
|
||
}
|
||
if (rightContent && rightContent != 'null' && rightContent.length > 0) {
|
||
|
||
form.value.lable2 = rightContent[0]
|
||
|
||
dataRight.value = rightContent
|
||
|
||
}
|
||
|
||
if (bannerContent && bannerContent != 'null' && bannerContent.length > 0) {
|
||
|
||
swiperList.value = bannerContent
|
||
|
||
}
|
||
if (memberContent && memberContent != 'null' && memberContent.porList && memberContent.porList.length > 0) {
|
||
|
||
dogList.value = memberContent.porList
|
||
console.log(memberContent.porList)
|
||
|
||
}
|
||
if (memberContent && memberContent != 'null' && memberContent.file) {
|
||
if (memberContent.file.fileList) {
|
||
dataBlist.value = memberContent.file.fileList
|
||
}
|
||
else {
|
||
dataBlist.value = memberContent.file
|
||
}
|
||
|
||
}
|
||
})
|
||
|
||
const srcType = ref()
|
||
const showModalRef2 =ref(false)
|
||
const openUrl = async (url)=>{
|
||
console.log(url,2222)
|
||
if(!url) {
|
||
message.info("没有可预览文件！")
|
||
return
|
||
}
|
||
srcType.value = getLastSubstring(url)
|
||
if(['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx','pdf'].includes(srcType.value)){
|
||
// src.value = filePath
|
||
// pdfShow.value = true
|
||
url='https://view.xdocin.com/view?src='+url
|
||
const screenWidth = window.screen.width;
|
||
const screenHeight = window.screen.height;
|
||
window.open(url, '', 'width=' + screenWidth + ',height=' + screenHeight + ',top=' + 0 + ',left=' + 0)
|
||
}
|
||
else{
|
||
message.error("文件格式不是 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx','pdf'！")
|
||
}
|
||
|
||
}
|
||
function getLastSubstring(str: string): string {
|
||
const lastIndex = str.lastIndexOf('.');
|
||
if (lastIndex !== -1) {
|
||
return str.substring(lastIndex + 1);
|
||
} else {
|
||
return '';
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
async function downloadFiles(url: RequestInfo | URL, name: string) {
|
||
try {
|
||
const response = await fetch(url);
|
||
const blob = await response.blob();
|
||
|
||
const downloadUrl = URL.createObjectURL(blob);
|
||
const link = document.createElement('a');
|
||
link.href = downloadUrl;
|
||
link.download = name // 替换为你要保存的文件名
|
||
link.click();
|
||
URL.revokeObjectURL(downloadUrl);
|
||
} catch (error) {
|
||
message.error('下载文件出错：', error);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
const showDro = ref(false)
|
||
const src = ref()
|
||
const pdfShow = ref(false)
|
||
const handleSelectPor = () => {
|
||
|
||
|
||
let url
|
||
if (dataBlist.value && dataBlist.value.length < 1) {
|
||
message.info("没有可预览的文件！")
|
||
return
|
||
}
|
||
if (dataBlist.value) {
|
||
if (dataBlist.value.originalFilename) {
|
||
url = dataBlist.value.url
|
||
}
|
||
else {
|
||
url = dataBlist.value.map(ite => ite.response.url)
|
||
}
|
||
// console.log(url)
|
||
if (!url || url === 'null') {
|
||
message.info("没有可预览的文件！")
|
||
return
|
||
}
|
||
openUrl(url)
|
||
}
|
||
}
|
||
const handleSelect = (data: { id: any }) => {
|
||
if (leftContentIsSelects.value === 2) {
|
||
message.info("没有访问权限")
|
||
return
|
||
}
|
||
form.value.lable1 = dataLeft.value.find((it: { id: any }) => it.id === data.id)
|
||
}
|
||
const handleClick = () => {
|
||
if (leftContentIsSelects.value === 2) {
|
||
message.info("没有访问权限")
|
||
return
|
||
}
|
||
showDropdown1.value = !showDropdown1.value
|
||
}
|
||
const handleSelect2 = (data: { id: any }) => {
|
||
if (rightContentIsSelects.value === 2) {
|
||
message.info("没有访问权限")
|
||
return
|
||
}
|
||
console.log(dataRight.value)
|
||
form.value.lable2 = dataRight.value.find((it: { id: any }) => it.id === data.id)
|
||
}
|
||
const handleClick2 = () => {
|
||
// console.log(dataBlist.value)
|
||
if (rightContentIsSelects.value === 2) {
|
||
message.info("没有访问权限")
|
||
return
|
||
}
|
||
showDropdown2.value = !showDropdown2.value
|
||
}
|
||
|
||
const bottomClick = (flg) => {
|
||
|
||
// if(!data.id) return
|
||
myStore.setData(flg)
|
||
// myStore.setType(data.id)
|
||
push(`/Home/diffspace/diffspaceList/${flg}`)
|
||
}
|
||
|
||
function getStringLength(str: string) {
|
||
const chineseReg = /[\u4e00-\u9fa5]/; // 正则表达式匹配中文字符
|
||
return chineseReg.test(str) ? str.substring(0, 4) : str.substring(0, 6)
|
||
}
|
||
// banner图片
|
||
function downClicks(data: string | any[]) {
|
||
if (bannerContentIsSelects.value === 2) {
|
||
message.info("没有访问权限")
|
||
return
|
||
}
|
||
let url, name
|
||
if (data[0] === undefined) {
|
||
message.info("没有可预览文件！")
|
||
return
|
||
}
|
||
if (data[0].response) {
|
||
url = data[0].response.url
|
||
name = data[0].response.originalFilename
|
||
}
|
||
else {
|
||
url = data[0].url
|
||
name = data[0].originalFileName
|
||
}
|
||
if (!url) return
|
||
// downloadFiles(url, name)
|
||
openUrl(url)
|
||
}
|
||
// 分类1
|
||
function downClicks1(data) {
|
||
if (actTopIsSelects.value === 2) {
|
||
message.info("没有访问权限")
|
||
return
|
||
}
|
||
let url, name
|
||
if (data.filePath === undefined || data.filePath === '') {
|
||
message.info("没有可预览文件！")
|
||
return
|
||
}
|
||
else {
|
||
url = data.filePath
|
||
name = data.title
|
||
}
|
||
|
||
if (!url) return
|
||
// downloadFiles(url, name)
|
||
openUrl(url)
|
||
}
|
||
|
||
|
||
async function down(data: { it: { response: { url: any; originalFilename: any }; url: any; newFileName: any } }) {
|
||
console.log(data)
|
||
let url, name
|
||
if (data.it && data.it.response) {
|
||
url = data.it.response.url
|
||
name = data.it.response.originalFilename
|
||
}
|
||
else {
|
||
url = data.it.url
|
||
name = data.it.newFileName
|
||
}
|
||
if (!url) {
|
||
message.error("没有可预览文件！")
|
||
return
|
||
}
|
||
// downloadFiles(url, name)
|
||
openUrl(url)
|
||
}
|
||
async function downs() {
|
||
|
||
if (memberContentIsSelects.value === 2) {
|
||
message.info("没有访问权限")
|
||
return
|
||
}
|
||
let url, originalFilename
|
||
if (dataBlist.value) {
|
||
if (dataBlist.value.originalFilename) {
|
||
url = dataBlist.value.url
|
||
originalFilename = dataBlist.value.originalFilename
|
||
}
|
||
else {
|
||
url = dataBlist.value.map(ite => ite.response.url)
|
||
originalFilename = dataBlist.value.map(ite => ite.response.originalFilename)
|
||
}
|
||
|
||
}
|
||
|
||
|
||
if (!url) {
|
||
message.error("没有可预览文件！")
|
||
return
|
||
}
|
||
// downloadFiles(url, originalFilename)
|
||
// console.log(url)
|
||
openUrl(url)
|
||
}
|
||
|
||
|
||
const title=(tit) => {
|
||
if(tit.createTime){
|
||
const d = tit.createTime.replace(/-/g,"").substring(0,8)
|
||
if(d.length>7){
|
||
|
||
return `【${ d}】`
|
||
|
||
}
|
||
}
|
||
else{
|
||
return ''
|
||
}
|
||
|
||
}
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<HomeHead class="top">
|
||
</HomeHead>
|
||
<div class="h-full relative flex flex-col">
|
||
<el-button v-if="userCode" type="primary" class="button" @click="push({ name: 'DiffspaceModify' })">管理</el-button>
|
||
<div class="font-600 flex items-center mt30px">
|
||
<img src="./images/logo.svg" class="h56px mr21px" />
|
||
<div class="text-36px">差别化研究</div>
|
||
</div>
|
||
<div class="w-full flex-1 flex flex-col mt17px text-#142142 gap-30px h-896px">
|
||
<AppBlock class="w-full h241px box !b-0">
|
||
<div class="w1500px px68px relative">
|
||
<div class="swipe-nav nav-prev" @click="swipeRef && swipeRef.slideNext()">
|
||
<NIcon size="40" color="#537deb">
|
||
<ChevronBack />
|
||
</NIcon>
|
||
</div>
|
||
<div class="swipe-nav nav-next" @click="swipeRef && swipeRef.slidePrev()">
|
||
<NIcon size="40" color="#537deb">
|
||
<ChevronForward />
|
||
</NIcon>
|
||
</div>
|
||
<Swiper ref="swipeRef" @slideChangeTransitionEnd="handleIndex" @swiper="setSwiperRef" class="h241px"
|
||
:slides-per-view="5" :autoplay="{ delay: 1000, disableOnInteraction: false }" :speed="500" :space-between="0"
|
||
:scrollbar="{ draggable: false }" :loop="true">
|
||
<SwiperSlide v-for="i in swiperList" :key="i">
|
||
<div class="w261px h200px overflow-hidden rd-10px relative" @click="downClicks(i.fileList)">
|
||
<img :src="i.url" />
|
||
<div class="absolute left-0 right-0 bottom-0 h-56px text-#fff bg-#000/60 text-left px16px py6px">
|
||
|
||
<!-- <div class="text-16px mt6px">{{ i.time }}</div> -->
|
||
<n-popover trigger="hover" placement="top-start">
|
||
<template #trigger>
|
||
<div class="text-20px truncate leading-40px">{{title(i) + " " + i.title }}</div>
|
||
</template>
|
||
<div class="max-w500px text-12px">{{ i.title }}</div>
|
||
</n-popover>
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
</Swiper>
|
||
</div>
|
||
</AppBlock>
|
||
<div class="flex-1 flex gap-26px">
|
||
<AppBlock class="box w-379px h-full relative !overflow-initial " v-if="form">
|
||
<img :src="form.lable1.url" class="w-full h-full absolute left-0 top-0 rounded-18px" />
|
||
<div class="mt20px mx10px h60px flex items-center justify-center rd-30px text-24px text-#fff bg-#000/45">
|
||
|
||
<p :alt="form.lable1.title"
|
||
style="width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
|
||
<n-popover trigger="hover" placement="top-start">
|
||
<template #trigger>
|
||
{{ form.lable1.title }}
|
||
</template>
|
||
<div class="max-w500px text-12px">{{ form.lable1.title }}</div>
|
||
</n-popover>
|
||
</p>
|
||
|
||
|
||
</div>
|
||
<div class="absolute bottom-0 left-0 w-full h48px px28px flex items-center bg-#fff/67 cursor-pointer">
|
||
<span class=" text-#000 text-18px flex-1 font-600">{{ form.lable1.titles }}</span>
|
||
|
||
<el-icon v-if="showDropdown1 === true" size="25" color="#537deb" class="rihtt-0px" @click="handleClick">
|
||
<ArrowUpBold />
|
||
</el-icon>
|
||
<el-icon v-if="showDropdown1 === false" size="25" color="#537deb" class="rihtt-0px" @click="handleClick">
|
||
<ArrowDownBold />
|
||
</el-icon>
|
||
</div>
|
||
<div class="bottomclom" v-if="showDropdown1">
|
||
<div v-if="dataLeft" v-for="item in dataLeft">
|
||
<span class="container" @click="handleSelect(item)">{{ item.title }}</span>
|
||
<el-dropdown max-height="100px" @command="down">
|
||
<el-icon size="25">
|
||
<CaretBottom />
|
||
</el-icon>
|
||
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item v-if="item.fileList" v-for="it in item.fileList" :command="{ it }">{{ it.name
|
||
}}</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
|
||
</div>
|
||
</div>
|
||
</AppBlock>
|
||
<AppBlock class="box w-379px h-full !overflow-initial" v-if="form">
|
||
<img :src="form.lable2.url" class="w-full h-full absolute left-0 top-0 object-cover rounded-18px" />
|
||
<div class="mt20px mx10px h60px flex items-center justify-center rd-30px text-24px text-#fff bg-#000/45">
|
||
|
||
<p :alt="form.lable1.title"
|
||
style="width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
|
||
<n-popover trigger="hover" placement="top-start">
|
||
<template #trigger>
|
||
{{ form.lable2.title }}
|
||
</template>
|
||
<div class="max-w500px text-12px">{{ form.lable2.title }}</div>
|
||
</n-popover>
|
||
</p>
|
||
|
||
|
||
</div>
|
||
<div class="absolute bottom-0 left-0 w-full h48px px28px flex items-center bg-#fff/67 cursor-pointer">
|
||
<span class=" text-#000 text-18px flex-1 font-600">{{ form.lable2.titles }}</span>
|
||
<el-icon v-if="showDropdown2 === true" size="25" color="#537deb" class="rihtt-0px" @click="handleClick2">
|
||
<ArrowUpBold />
|
||
</el-icon>
|
||
<el-icon v-if="showDropdown2 === false" size="25" color="#537deb" class="rihtt-0px" @click="handleClick2">
|
||
<ArrowDownBold />
|
||
</el-icon>
|
||
</div>
|
||
<div class="bottomclom" v-if="showDropdown2">
|
||
<div v-if="dataRight" v-for="item in dataRight">
|
||
<span class="container" @click="handleSelect2(item)">{{ item.title }}</span>
|
||
<el-dropdown max-height="100px" @command="down">
|
||
<el-icon size="25">
|
||
<CaretBottom />
|
||
</el-icon>
|
||
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item v-if="item.fileList" v-for="it in item.fileList" :command="{ it }">{{ it.name
|
||
}}</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</AppBlock>
|
||
<div class="h-full flex-1 box flex flex-col w470px">
|
||
<div class="box-title">基础研究方向</div>
|
||
<!-- <el-button type="primary" v-if="userCode" class="button !top-0"
|
||
@click="push({ name: 'ModifyDiffspace' })">管理</el-button> -->
|
||
<AppBlock class="box flex-1 mt14px">
|
||
<AppAlert class="!rd-bl-0 !rd-br-0">
|
||
<span class="flex-1 text-ellipsis">核心部品强化</span>
|
||
<span class="flex-shrink" @click="bottomClick(1)">❯</span>
|
||
<!-- <span class="flex-shrink" >❯</span> -->
|
||
</AppAlert>
|
||
<div class="h95px w100% min-h125px max-h125px overflow-y-auto" v-if="shutList1">
|
||
|
||
<swiper id="swiperList2" v-if="shutList1" :slides-per-view="3"
|
||
:autoplay="{ delay: 1000, disableOnInteraction: false }" :speed="500" :space-between="0"
|
||
:direction="'vertical'" :scrollbar="{ draggable: false }" :loop="true" :modules="modules"
|
||
style="height: 120px;width: 100%;">
|
||
<swiper-slide v-for="(i, index) in shutList1" :key="index">
|
||
<div class="w-full px12px line flex h40px">
|
||
<div class="min-w70% max-w70% truncate text-left leading-40px h40px " @click="downClicks1(i)">
|
||
{{ i.title }}</div>
|
||
<div class="min-w30% max-w30% text-right leading-40px h40px">{{ i.createTime }}</div>
|
||
</div>
|
||
|
||
</swiper-slide>
|
||
</swiper>
|
||
|
||
</div>
|
||
|
||
|
||
<AppAlert class="!rd-bl-0 !rd-br-0">
|
||
<span class="flex-1 text-ellipsis">新领域部材探索</span>
|
||
<span class="flex-shrink" @click="bottomClick(2)">❯</span>
|
||
<!-- <span class="flex-shrink" >❯</span> -->
|
||
</AppAlert>
|
||
<!-- <div class="img_box h110px px20px overflow-x-auto w468px" >
|
||
|
||
|
||
</div> -->
|
||
<div class="h95px w100% min-h125px max-h125px overflow-y-auto" v-if="shutList2">
|
||
<swiper id="swiperList2" v-if="shutList2" :slides-per-view="3"
|
||
:autoplay="{ delay: 1000, disableOnInteraction: false }" :speed="500" :space-between="0"
|
||
:direction="'vertical'" :scrollbar="{ draggable: false }" :loop="true" :modules="modules"
|
||
style="height: 120px;width: 100%;">
|
||
<swiper-slide v-for="(i, index) in shutList2" :key="index">
|
||
<div class="w-full px12px line flex h40px">
|
||
<div class="min-w70% max-w70% truncate text-left leading-40px h40px " @click="downClicks1(i)">
|
||
{{ i.title }}</div>
|
||
<div class="min-w30% max-w30% text-right leading-40px h40px">{{ i.createTime }}</div>
|
||
</div>
|
||
|
||
</swiper-slide>
|
||
</swiper>
|
||
</div>
|
||
<AppAlert class="!rd-bl-0 !rd-br-0">
|
||
<span class="flex-1 text-ellipsis">外部调研报告</span>
|
||
<span class="flex-shrink" @click="bottomClick(3)">❯</span>
|
||
<!-- <span class="flex-shrink" >❯</span> -->
|
||
</AppAlert>
|
||
<div class="h145px w100% min-h135px max-h145px overflow-y-auto" v-if="shutList3">
|
||
|
||
<swiper id="swiperList2" v-if="shutList3" :slides-per-view="3"
|
||
:autoplay="{ delay: 1000, disableOnInteraction: false }" :speed="500" :space-between="0"
|
||
:direction="'vertical'" :scrollbar="{ draggable: false }" :loop="true" :modules="modules"
|
||
style="height: 120px;width: 100%;">
|
||
<swiper-slide v-for="(i, index) in shutList3" :key="index">
|
||
|
||
<div class="w-full px12px line flex h40px">
|
||
<div class="min-w70% max-w70% truncate text-left leading-40px h40px" @click="downClicks1(i)">
|
||
{{ i.title }}</div>
|
||
<div class="min-w30% max-w30% text-right leading-40px h40px">{{ i.createTime }}</div>
|
||
</div>
|
||
|
||
|
||
</swiper-slide>
|
||
</swiper>
|
||
|
||
</div>
|
||
</AppBlock>
|
||
</div>
|
||
<div class="h-full w-193px box flex flex-col">
|
||
<div class="box-title" @click="downs">PRO成员</div>
|
||
<AppBlock class="box flex-1 mt14px">
|
||
<div class="overflow-y-auto h-full max-h-520px px36px">
|
||
<div v-if="dogList" class="my30px text-center text-12px text-#2c3e50" v-for="item in dogList">
|
||
<img :src="item.url" class="w100px !border-0 dog_log" @click="handleSelectPor" />
|
||
<div class="mt12px">姓名：{{ item.title }}</div>
|
||
|
||
<div class="my8px">职位：{{ item.time }}</div>
|
||
|
||
<div>研究方向：{{ item.dowhat }}</div>
|
||
</div>
|
||
</div>
|
||
</AppBlock>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<n-modal v-model:show="pdfShow">
|
||
<div class="w90% h90% ">
|
||
<Amtion :data="src" :datas="srcType" />
|
||
</div>
|
||
</n-modal>
|
||
</template>
|
||
|
||
<style scoped lang="less">
|
||
// .Pdf{
|
||
// background: url('./images/220.gif') no-repeat;
|
||
// background-size: 15% 15%;
|
||
// background-position: center center;
|
||
|
||
// }
|
||
.bottomclom {
|
||
position: absolute;
|
||
bottom: 48px;
|
||
left: 0;
|
||
background-color: #ffffff;
|
||
z-index: 2000;
|
||
width: 100%; //w330px max-h100px
|
||
max-height: 100px;
|
||
height: auto;
|
||
min-height: 50px;
|
||
display: flex;
|
||
overflow-y: auto;
|
||
flex-direction: column-reverse;
|
||
|
||
div:hover {
|
||
background: #d6d5d5;
|
||
}
|
||
|
||
div {
|
||
height: 50px;
|
||
line-height: 50px;
|
||
padding-left: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.container {
|
||
max-width: 280px;
|
||
/* 设置容器宽度，适应自己的情况 */
|
||
overflow: hidden;
|
||
/* 隐藏超出部分 */
|
||
white-space: nowrap;
|
||
/* 防止换行 */
|
||
text-overflow: ellipsis;
|
||
/* 使用省略号表示超出部分 */
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.truncate {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.fontStyle {
|
||
display: flex;
|
||
color: #fff;
|
||
// background-color: red;
|
||
width: 100px;
|
||
height: 80px;
|
||
margin-top: 15px;
|
||
line-height: 10px;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
border-radius: 18px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.img_box {
|
||
img {
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
|
||
.carousel-img {
|
||
width: 100%;
|
||
height: 240px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
|
||
|
||
|
||
::-webkit-scrollbar {
|
||
width: 1px;
|
||
}
|
||
|
||
.button {
|
||
position: absolute;
|
||
top: 30px;
|
||
right: 20px;
|
||
z-index: 500;
|
||
}
|
||
|
||
.top {
|
||
position: absolute;
|
||
right: 30px;
|
||
top: -92px;
|
||
}
|
||
|
||
@border-line: 1px solid #e7ebf5;
|
||
|
||
.line {
|
||
font-size: 16px;
|
||
border-bottom: @border-line;
|
||
}
|
||
|
||
.swipe-nav {
|
||
// absolute left-10px w36px h46px flex items-center justify-center
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 36px;
|
||
height: 46px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid #537deb;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
|
||
&.nav-prev {
|
||
left: 16px;
|
||
}
|
||
|
||
&.nav-next {
|
||
right: 16px;
|
||
}
|
||
}
|
||
|
||
.swiper {
|
||
|
||
// padding: 0 68px;
|
||
.swiper-slide {
|
||
text-align: center;
|
||
font-size: 18px;
|
||
|
||
/* Center slide text vertically */
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
img {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
|
||
.box {
|
||
&::after {
|
||
display: none;
|
||
}
|
||
|
||
.box-title {
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
position: relative;
|
||
padding-left: 24px;
|
||
|
||
&::before {
|
||
content: ' ';
|
||
display: block;
|
||
width: 8px;
|
||
height: 30px;
|
||
background-color: #003ab5;
|
||
|
||
position: absolute;
|
||
left: 0;
|
||
}
|
||
}
|
||
}</style>
|