<script setup lang="ts">
import { message } from '@/utils/message'
import {
	boardMsgList,
	getPageWork,
	homePageMarket,
	getPageInv,
	getPageVisit,
	externalList,
	homePageRate,
	report,
	trendsPage,
	demandPage,
	faqPage,
	faqAdd,
	demandAdd,
	trendsAdd,
	faqPageDelete,
	demandDel,
	faqWithdraw,
	demandWithdraw,
	faqDetail,
	demandDetail
} from '@/api/daikin/base'
import { getImg } from '@/assets/images'
import { useUserStore } from '@/stores/modules/user'
import { noticeld } from '@/stores/modules/noticeId'
import { pageType } from '@/stores/modules/pages'
import { NModal } from 'naive-ui'
import { Delete } from '@element-plus/icons-vue'
const { push } = useRouter()
const route = useRoute()
// useFavicon(getImg('favicon.svg'))
// useTitle('大金空调调达本部HOMEPAGE')
const store = useUserStore()
const not = noticeld()
const pages = pageType()
const isUpPwds = ref(false)
const userCode = ref(false)
const shormA = ref(false)
const shormB = ref(false)
watchEffect(() => {
	userCode.value = ['admin', 'waibuyemianguanliyuan', 'tech_service'].includes(
		store.user.roleCode
	)
	console.log(isUpPwds.value, userCode.value)
	isUpPwds.value = store.user.isUpPwd === 2 ? true : false
	console.log(isUpPwds.value, 'xiaolu0000222')
})
const ailists = ref()
const culists = ref()
const itemLists = ref()
const timeA = ref()
const timeB = ref()

const value2 = ref('')
const value3 = ref('')
const fromtA = ref({
	number: '',
	id: '',
	question1: '',
	question2: '',
	question3: '',
	question4: '',
	type: ''
})
const fromtB = ref({
	id: '',
	userId: '',
	usdObj: '',
	demand: '',
	location: '',
	procureTime: '',
	remark: '',
	type: ''
})

const addClickA = async () => {
	const { question1, question2, question3, question4, type, id, number } =
		fromtA.value
	if (type === 'edit') {
		const { code, msg } = await faqWithdraw({
			addList: [
				{ indexId: 1, replyTxt: question1 },
				{ indexId: 2, replyTxt: question2 },
				{ indexId: 3, replyTxt: question3 },
				{ indexId: 4, replyTxt: question4 }
			],
			id,
			number
		})
		if (code === 200) {
			message.info('操作成功！')
			shormA.value = false
			boardMsg(1)
		} else {
			message.error(msg)
		}
	} else {
		const { code, msg } = await faqAdd({
			faqList: [
				{ indexId: 1, replyTxt: question1 },
				{ indexId: 2, replyTxt: question2 },
				{ indexId: 3, replyTxt: question3 },
				{ indexId: 4, replyTxt: question4 }
			],
			id,
			number
		})
		if (code === 200) {
			message.info('操作成功！')
			shormA.value = false
			boardMsg(1)
		} else {
			message.error(msg)
		}
	}
}
/**
 * "usdObj": "公司", //适用对象，个人/公司
"demand": "空调", //需求依赖， 家用机/商用机
"location": "大厅", //安装位置
"procureTime": "2023-07-04", //采购时间
"remark": "备注"
 */
const addClickB = async () => {
	const { usdObj, demand, location, procureTime, remark, type } = fromtB.value
	if (type === 'edit') {
		// 留言板-需求依赖-撤回
		const { code, msg } = await demandWithdraw(fromtB.value)
		if (code === 200) {
			message.info('操作成功！')
			shormB.value = false
			boardMsg(1)
		} else {
			message.error(msg)
		}
	} else {
		const { code, msg } = await demandAdd({
			usdObj,
			demand,
			location,
			procureTime,
			remark
		})
		if (code === 200) {
			message.info('操作成功！')
			shormB.value = false
			boardMsg(1)
		} else {
			message.error(msg)
		}
	}
}

const deleteMSG = async (obj) => {
	const { id } = obj
	if (!id) return
	console.log(id)
	const { code, msg } = await faqPageDelete({ id })
	if (code === 200) {
		message.info('操作成功！')
		shormB.value = false
		boardMsg(1)
	} else {
		message.error(msg)
	}
}
const deleteMSB = async (obj) => {
	const { id } = obj
	if (!id) return
	console.log(id)
	const { code, msg } = await demandDel({ id })
	if (code === 200) {
		message.info('操作成功！')
		shormB.value = false
		boardMsg(1)
	} else {
		message.error(msg)
	}
}

onMounted(async () => {
	const {
		data: { ailist, culist, lastUTime }
	} = await homePageMarket() //市况
	const {
		data: { itemList, lastUTime: _lastUTime }
	} = await homePageRate() //汇率
	ailists.value = ailist
	culists.value = culist
	itemLists.value = itemList
	timeA.value = lastUTime
	timeB.value = _lastUTime
	if (isUpPwds.value) {
		ElMessageBox.alert(
			'为了您的帐号安全,首次登录必须更改初始密码',
			'重要提醒',
			{
				confirmButtonText: 'OK',
				showClose: false,
				showCancelButton: false
			}
		).then(() => {
			push({ name: 'modify' })
		})
	}
})
const handleChange = (e: Event) => {
	// checkedValue.value = (e.target as HTMLInputElement).value
}
const toAdd = () => {
	if (flgs.value == 1) {
		// setModule('App_E_Supplier_Demand');
		shormA.value = true
	} else if (flgs.value == 2) {
		// setModule('App_E_Supplier_Demand');
		shormB.value = true
	} else {
		// setModule('App_E_Supplier_Trends');
		not.article.cate = '9'
		console.log(not.article.cate)
		// push(`${route.path.replace('/external','')}/info/${n.id}`)
		push('/external/Board')
	}
	console.log(flgs.value, shormA.value, shormB.value)
}
const close1 = () => {
	if (flgs.value == 1) {
		shormA.value = false
	} else {
		shormB.value = false
	}
}
//获取邀请函列表
const invList = ref<any[]>([])
let invLength: number
let invPum = 1
const invsScoll = ref<HTMLElement | null>(null)
async function getPageInvs(page) {
	const pasr = {
		pageNum: page,
		status: 1,
		source: 1
	}
	const { rows, total } = await getPageInv(pasr)
	invList.value.push(...rows)
	invLength = total / 10
}
//获取拜访列表
const visitList = ref<any[]>([])
let visitLength: number
let visitPum = 1

const visitsScoll = ref<HTMLElement | null>(null)
async function getPageVisits(page) {
	const pasr = {
		pageNum: page,
		status: 1,
		source: 1
	}
	const { rows, total } = await getPageVisit(pasr)
	visitList.value.push(...rows)
	visitLength = total / 10
}
getPageVisits(1)
getPageInvs(1)

// 获取News数据 getArticlePage
const newsList = ref<any[]>([])
const newsSoll = ref<HTMLElement | null>(null)
let newLength: number
let newPum = 1
async function getArticle(page: any) {
	const pasr = {
		pageNum: page,
		pageSize: '10',
		type: '1',
		cate: '7'
	}
	const { rows, total } = await externalList(pasr)
	newsList.value.push(...rows)
	newLength = total / 10
}
// 获取重要通知数据 getArticlePage
const portantList = ref<any[]>([])
const portant = ref<HTMLElement | null>(null)
let pLenght: number
let prpum = 1
async function getArticleP(page: any) {
	const pasr = {
		pageNum: page,
		pageSize: '10',
		type: '1',
		cate: '8'
	}
	const { rows, total } = await externalList(pasr)
	portantList.value.push(...rows)
	pLenght = total / 10
}

getArticleP(1)
getArticle(1)
// 调查表数据
const rowsList = ref<any[]>([])
const tabScll = ref<HTMLElement | null>(null)
let tabLength: number
let tabPume = 1
async function pageWork(page: number) {
	const pageNum = page
	const { rows, total } = await getPageWork({ pageNum })
	rowsList.value.push(...rows)
	tabLength = total / 10
}

const dataInfo = reactive({
	treeSource: 1,
	type: 0,
	pageSize: 10
})
// 留言板数据
const msgList = ref<any[]>([])
let maxMsgLingth = 1
let psgPum = 1

// 留言板滚动
const msgScoll = ref<HTMLElement | null>(null)
async function boardMsg(page: number) {
	const pageNum = page
	const { treeSource, type, pageSize } = dataInfo
	console.log(dataInfo, 'dataInfo')

	if (treeSource === 3) {
		const { rows, total } = await trendsPage({ pageNum, pageSize })
		if (type === 0) {
			msgList.value = rows
		} else {
			msgList.value.push(...rows)
		}
		maxMsgLingth = total / 10
		console.log(total, type, 'xiaolu11')
	} else if (treeSource == 1) {
		const { rows, total } = await faqPage({ pageNum, pageSize })
		if (type === 0) {
			// lujinli
			msgList.value = rows
			//
		} else {
			msgList.value.push(...rows)
		}

		maxMsgLingth = total / 10
		console.log(msgList.value, type, 'msgList4234')
	} else {
		const { rows, total } = await demandPage({ pageNum, pageSize })
		if (type === 0) {
			msgList.value = rows
		} else {
			msgList.value.push(...rows)
		}
		maxMsgLingth = total / 10
		console.log(msgList.value.length, type, 'msgList22')
	}
	// msgList.value = null lujinli;
}
const lazyState = computed(() => [dataInfo.treeSource])
watch(
	() => unref(lazyState),
	async (v) => {
		boardMsg(1)
	},
	{ immediate: true, deep: true }
)

pageWork(1)

onMounted(() => {
	msgScoll.value?.addEventListener('scroll', handleMsgScoll)
	newsSoll.value?.addEventListener('scroll', handleNewScoll)
	portant.value?.addEventListener('scroll', handlePrScoll)
	tabScll.value?.addEventListener('scroll', handleTabScoll)
	visitsScoll.value?.addEventListener('scroll', handleVisitsScoll)
	invsScoll.value?.addEventListener('scroll', handleInvScoll)
})
async function setModule(codes: any) {
	const moduleCode = codes
	// console.log(codes)
	const { code } = await report({ moduleCode })
}

//
const handleVisitsScoll = () => {
	const container = visitsScoll.value
	if (container) {
		const isAtBottom =
			container.scrollHeight - container.scrollTop === container.clientHeight
		if (isAtBottom) {
			if (visitPum < visitLength) {
				++visitPum
				getPageVisits(visitPum)
			}
		}
	}
}
// 拜访
const handleInvScoll = () => {
	const container = invsScoll.value
	if (container) {
		const isAtBottom =
			container.scrollHeight - container.scrollTop === container.clientHeight
		if (isAtBottom) {
			if (invPum < invLength) {
				++invPum
				getPageInvs(invPum)
			}
		}
	}
}
// 线上调查表滚动
const handleTabScoll = () => {
	const container = tabScll.value
	if (container) {
		const isAtBottom =
			container.scrollHeight - container.scrollTop === container.clientHeight
		if (isAtBottom) {
			if (tabPume < tabLength) {
				++tabPume
				pageWork(tabPume)
			} else console.log(tabPume, tabLength)
		}
	}
}

// 重要通知滚动
const handlePrScoll = () => {
	const container = portant.value
	if (container) {
		const isAtBottom =
			container.scrollHeight - container.scrollTop === container.clientHeight
		if (isAtBottom) {
			if (prpum < pLenght) {
				++prpum
				getArticleP(prpum)
			} else console.log(prpum, pLenght)
		}
	}
}

// News滚动
const handleNewScoll = () => {
	const container = newsSoll.value
	if (container) {
		const isAtBottom =
			container.scrollHeight - container.scrollTop === container.clientHeight
		if (isAtBottom) {
			if (newPum < newLength) {
				++newPum
				getArticle(newPum)
			} else console.log(newPum, newLength)
		}
	}
}

// 留言滚动
const handleMsgScoll = () => {
	const container = msgScoll.value
	if (container) {
		const isAtBottom =
			container.scrollHeight - container.scrollTop === container.clientHeight
		if (isAtBottom) {
			if (psgPum < maxMsgLingth) {
				++psgPum
				dataInfo.type = 1
				boardMsg(psgPum)
			} else console.log(psgPum, maxMsgLingth)
		}
	}
}

const toDetail = (n, item) => {
	console.log('flgs.value', 'xiaolu')

	// push(`${route.path}/${item.id}`)
	// if(n.isSelect===1){
	if (item === 'App_E_Message') {
		let code
		if (flgs.value == 1) {
			code = 'App_E_Supplier_Demand'
		} else if (flgs.value == 3) {
			code = 'App_E_Supplier_Trends'
		} else {
			code = 'App_E_Supplier_Demand'
		}
		setModule(code)
		push(`/external/infoa/${n.id}/${flgs.value}`)
	} else {
		setModule(item)
		push(`/external/info/${n.id}`)
	}

	// }
	// else{
	//   message.info("您没有权限查看！")
	// }
}

const displayDiffValue = (diffValue: number) => {
	if (diffValue > 0) {
		return `+${diffValue} %`
	} else if (diffValue < 0) {
		return `-${Math.abs(diffValue)} %`
	} else {
		return `${diffValue} %`
	}
}
const toDetail2 = (id: string) => {
	console.log(route, route.path)
	not.article.cate = id
	console.log(not.article.cate)
	// push(`${route.path.replace('/external','')}/info/${n.id}`)
	push('/external/Board')
}
const flgs = ref(1)
const cardsClick = (it) => {
	flgs.value = it
	dataInfo.treeSource = it
}
const toList = (nb) => {
	console.log(nb)
	if (nb === 7) {
		pages.page.cate = '7'
		pages.page.title = 'News'
	} else {
		pages.page.cate = '8'
		pages.page.title = '重要通知'
	}
	push({ name: 'DetailInfoList' })
}
const shorm = ref(false)

const openNewWindow = (type, url) => {
	setModule(type)
	if (url === 'shorm') {
		shorm.value = true
	} else {
		window.open(url)
	}
}
/**留言板-供应商留言-撤回*/
const faqWithdraws = async (obj) => {
	console.log('2333333')

	const { id } = obj
	const { data } = await faqDetail({ id })
	let result = {}
	if (data && data.faqList && data.faqList.length > 0) {
		result = data.faqList.reduce((acc, item) => {
			const key = `question${item.indexId}`
			acc[key] = item.replyTxt
			return acc
		}, {})
	}

	result.id = data.id
	result.number = data.number
	fromtA.value = result
	fromtA.value.type = 'edit'
	console.log(result)
	shormA.value = true
}
// 留言板-需求依赖-撤回
const demandWithdraws = async (obj) => {
	const { id } = obj
	const { data } = await demandDetail({ id })
	console.log(data)
	fromtB.value = data
	fromtB.value.type = 'edit'
	shormB.value = true
}
</script>

<template>
	<div class="page w-1920px h-1080px p30px flex flex-col">
		<div class="w300px -mr-1px flex flex-col shrink-0">
			<div class="text-20px text-#fff font-600 mt6px">
				大金中国调达本部 HOMEPAGE
			</div>
			<!-- @dblclick="toggle" -->
			<img src="@/assets/images/logo.png" class="w197px h44px mt14px" />
		</div>
		<div
			v-if="false"
			class="beijing absolute flex left-[45%] translate-x-[-50%] top-11 text-[22px] items-center justify-center font-bold"
		>
			<img src="./images/laba@2x.png" class="w-[48px] h-[45px] mr-4" alt="" />
			<div class="pr-[20px]">
				11月-12月为测试阶段，网站在此期间会不定期进行更新，给您带来不便，敬请谅解!
			</div>
		</div>
		<div class="main flex-1 rd-32px p30px pt0">
			<!-- <Home /> -->
			<!-- <RouterView /> -->
			<div class="top flex items-center text-20px">
				<div class="flex-1 font-800 text-30px"></div>
				<AppHeadUserInfo />
			</div>
			<!-- <img src="@/assets/images/wbshouy.png" alt="" class="w-full h940px"> -->
			<div class="w100% h50px pl10px pt40px text-36px font-extrabold">
				FY23年度调达本部方针：创新实干，勇毅前行，以综合实力挑战变革，提升存在感
			</div>
			<div class="mt55px flex-1 flex flex-wrap justify-between">
				<div class="cards w34% h800px page-wrapper">
					<div class="cards_title">News</div>
					<el-button
						v-if="userCode"
						type="primary"
						class="absolute right-164px top-15px"
						@click="push('/external/Process')"
						>流程列表</el-button
					>
					<el-button
						v-if="userCode"
						type="primary"
						class="absolute right-80px top-15px"
						@click="toDetail2(7)"
						>+ 新增</el-button
					>
					<span
						style="
							border: #417bef 1px solid;
							color: #417bef;
							border-radius: 5px;
							height: 30px;
						"
						class="mr15px mt17px flex px5px pt6px"
						@click="toList(7)"
						>更多<el-icon> <DArrowRight class="" /> </el-icon
					></span>

					<div class="absolute right-25px top-20px">
						<!-- <img src="./images/younniu@2x.png"> -->
						<!-- <el-icon>
              <ArrowRightBold />
            </el-icon> -->
					</div>
					<div
						ref="newsSoll"
						class="p20px w100% h355px cent_box overflow-y-auto"
					>
						<div
							v-if="newsList"
							class="text-#152242 truncate-box text-18px"
							v-for="i in newsList"
						>
							<div class="truncate" @click="toDetail(i, 'App_E_News')">
								<img
									v-if="i.tag === 'New'"
									src="./images/NEW@2x.png"
									class="h35px mr5px badge-new"
								/>
								<span
									v-if="i.isTop === 'Y'"
									class="text-#fff bg-red p5px text-18px rounded-5px mr-5px badge-24"
									>置顶</span
								>
								<span
									:style="i.isRead === 2 ? 'color:#0058E5;font-weight' : ''"
									:title="i.title"
									>{{ i.title }}</span
								>
							</div>

							<div
								class="icons min-w-110px w110px h20px mt15px absolute right-0px top-0"
							>
								{{ i.createTime.substring(0, 10) }}
							</div>
						</div>

						<!-- <div v-if="portantList" class="text-#808696 truncate-box " v-for="i in 15">
              <div class="truncate">
                <span class="text-#fff bg-red p5px text-14px rounded-5px mr-5px">置顶</span>
                <span>FY23第二回合作伙伴会议通知 (7月14日)FY2议通知</span>
                <img src="./images/NEW@2x.png" class="w55px ml5px">
              </div>
              <div class="icons w20px h20px mt15px absolute right-20px top-0"></div>
            </div> -->
					</div>
					<div class="text-26px text-#142142 font-extrabold mb-10px pl20px">
						重要通知
					</div>
					<div class="flex">
						<el-button
							v-if="userCode"
							type="primary"
							class="mt0px mr0px"
							@click="push({ path: '/external/Process', query: { cate: '8' } })"
							>流程列表</el-button
						>
						<el-button
							v-if="userCode"
							type="primary"
							class="mt0px mr10px"
							@click="toDetail2(8)"
							>+ 新增</el-button
						>
						<span
							style="
								border: #417bef 1px solid;
								color: #417bef;
								border-radius: 5px;
								height: 30px;
							"
							class="mr15px mt2px flex px5px pt6px"
							@click="toList(8)"
							>更多<el-icon> <DArrowRight class="" /> </el-icon
						></span>
					</div>

					<div
						ref="portant"
						class="p20px pt0px w100% h355px cent_box overflow-y-auto"
					>
						<div
							v-if="portantList"
							class="text-#152242 truncate-box text-18px"
							v-for="i in portantList"
							:key="i"
						>
							<div class="truncate" @click="toDetail(i, 'App_E_Notice')">
								<img
									v-if="i.tag === 'New'"
									src="./images/NEW@2x.png"
									class="h35px mr5px badge-new"
								/>
								<span
									v-if="i.isTop === 'Y'"
									class="text-#fff bg-red p5px text-14px rounded-5px mr-5px badge-24"
									>置顶</span
								>
								<span
									:style="i.isRead === 2 ? 'color:#0058E5;font-weight' : ''"
									:title="i.title"
									>{{ i.title }}</span
								>
							</div>

							<div
								class="icons min-w-110px w110px h20px mt15px absolute right-0px top-0"
							>
								{{ i.createTime.substring(0, 10) }}
							</div>
						</div>
						<!-- <div v-if="portantList" class="text-#808696 truncate-box " v-for="i in 15">
              <div class="truncate">
                <span class="text-#fff bg-red p5px text-14px rounded-5px mr-5px">置顶</span>
                <span>FY23第二回合作伙伴会议通知 (7月14日)FY23第二回合作伙伴会议通知 (7月14日)</span>
              </div>
              <div class="icons w20px h20px mt15px absolute right-20px top-0"></div>
            </div> -->
					</div>
				</div>
				<div
					class="cards w64% h800px !shadow-none !bg-transparent page-wrapper"
				>
					<div class="cards w760px h385px cursor-pointer">
						<div class="cards_title">市况汇率每日更新</div>
						<div class="cards_nav cards_nav2 !top--3px !right--1px">
							<div class="!text-14px w260px top--4px text-right leading-18px">
								出处：市况-SMM/LME<br />
								汇率-外汇管理局
							</div>
						</div>
						<div class="cards_content">
							<!-- <VChart :option="chartOption1" autoresize /> -->
							<div class="flex pl15px pr10px pt13px text-#152242">
								<div class="">
									<span class="icoT">市况</span>
									<span class="ml35px text-18px">更新时间：{{ timeA }}</span>

									<table
										class="history w-full text-center mt23px text-18px border-spacing-0 overflow-auto w358px"
									>
										<thead
											style="
												background-color: #417bef;
												color: #fff;
												height: 42px;
												width: 220px;
												border: 1px solid #417bef;
											"
										>
											<tr class="h51px">
												<th>铜</th>
												<th>最新</th>
												<th>前日差</th>
											</tr>
										</thead>
										<tbody v-if="culists" class="text-18px">
											<tr
												class="h38px"
												v-for="(it, index) in culists"
												:key="index"
												:class="index % 2 !== 0 ? 'bg-#f9f9f9' : ''"
											>
												<td>{{ it.channel }}</td>
												<td>{{ it.negAmount }}</td>
												<td
													:class="
														it.diffValue < 0 ? 'text-#63BF8D' : 'text-red'
													"
												>
													{{ displayDiffValue(it.diffValue) }}
												</td>
											</tr>
										</tbody>
									</table>
									<table
										class="history w-full text-center mt15px text-18px border-spacing-0 overflow-auto w358px"
									>
										<thead
											style="
												background-color: #417bef;
												color: #fff;
												height: 42px;
												width: 220px;
												border: 1px solid #417bef;
											"
										>
											<tr class="h51px">
												<th>铝</th>
												<th>最新</th>
												<th>前日差</th>
											</tr>
										</thead>
										<tbody v-if="ailists" class="text-18px">
											<tr
												class="h45px"
												v-for="(it, index) in ailists"
												:key="index"
												:class="index % 2 !== 0 ? 'bg-#f9f9f9' : ''"
											>
												<td>{{ it.channel }}</td>
												<td>{{ it.negAmount }}</td>
												<td
													:class="
														it.diffValue < 0 ? 'text-#63BF8D' : 'text-red'
													"
												>
													{{ displayDiffValue(it.diffValue) }}
												</td>
											</tr>
										</tbody>
									</table>
								</div>
								<div class="ml10px">
									<span class="icoT">汇率</span>
									<span class="ml35px text-18px">更新时间：{{ timeB }}</span>
									<!-- 修复table数据过多，超出容器，后续用el-table来代替 -->
									<div style="overflow: auto; height: 300px">
										<table
											class="history w-full text-center mt23px text-18px border-spacing-0 w358px"
										>
											<thead
												style="
													background-color: #417bef;
													color: #fff;
													height: 42px;
													width: 220px;
													border: 1px solid #417bef;
												"
											>
												<tr class="h51px">
													<th class="w120px">币种</th>
													<th>最新</th>
													<th class="w85px">前日差</th>
												</tr>
											</thead>
											<tbody v-if="itemLists" class="text-18px">
												<tr
													class="h55px"
													v-for="(it, index) in itemLists"
													:key="index"
													:class="index % 2 !== 0 ? 'bg-#f9f9f9' : ''"
												>
													<td>
														{{ it.currencyCodeFrom }}-{{ it.currencyNameTo }}
													</td>
													<td>{{ it.negAmount }}</td>
													<td
														:class="
															it.diffValue < 0 ? 'text-#63BF8D' : 'text-red'
														"
													>
														{{ displayDiffValue(it.diffValue) }}
													</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="cards w360px h385px">
						<div class="w100% contents">
							<div class="cards_title">其他链接</div>
							<!-- <div class="cards_title" @click="">新增</div> -->
							<div
								ref="invsScoll"
								class="p20px w100% h340px cent_box overflow-y-auto bk-tuann text-18px"
							>
								<!-- <div class="text-#808696" v-for="(i,ie) in invList " :key="ie">
                  <div class="truncate2"  @click=" push(`/external/infos/${i.id}`)">
                    <span class="text-#fff bg-#407DF1 px5px  text-18px rounded-20px mr-5px">{{ ++ie}}</span>
                    <span>{{i.title}}</span>
                  </div>
                  <span class="absolute right-0px top-12px">{{i.createTime}}</span>
                </div> -->
								<div class="text-#152242">
									<div class="truncate2">
										<span
											class="text-#fff bg-#407DF1 px5px text-18px rounded-20px mr-5px inlineFlex"
											>1</span
										>
										<span
											@click="
												openNewWindow(
													'App_E_Link_GPROC',
													'https://edi.daikin.net.cn:8443/gproc/'
												)
											"
											class="text-#142142"
										>
											G-PROC
										</span>
									</div>
									<span class="absolute right-0px top-12px"></span>
									<div class="truncate2">
										<span
											class="text-#fff bg-#407DF1 px5px text-18px rounded-20px mr-5px inlineFlex"
											>2</span
										>
										<span
											@click="
												openNewWindow(
													'App_E_Link_DELTA',
													'https://edi.daikin.net.cn'
												)
											"
											class="text-#142142"
										>
											DELTA</span
										>
									</div>
									<span class="absolute right-0px top-12px"></span>
									<div class="truncate2">
										<span
											class="text-#fff bg-#407DF1 px5px text-18px rounded-20px mr-5px inlineFlex"
											>3</span
										>
										<span
											@click="
												openNewWindow(
													'App_E_Link_IDEABOX',
													'https://procurement.daikin.net.cn/ideabox/#/index'
												)
											"
											class="text-#142142"
										>
											IDEABOX</span
										>
									</div>
									<span class="absolute right-0px top-12px"></span>
									<div class="truncate2">
										<span
											class="text-#fff bg-#407DF1 px5px text-18px rounded-20px mr-5px inlineFlex"
											>4</span
										>
										<span
											@click="
												openNewWindow(
													'App_E_Link_DaiKin_Site',
													'https://www.daikin-china.com.cn/'
												)
											"
											class="text-#142142"
										>
											大金空调官方网站</span
										>
									</div>
									<span class="absolute right-0px top-12px"></span>
									<div class="truncate2">
										<span
											class="text-#fff bg-#407DF1 px5px text-18px rounded-20px mr-5px inlineFlex"
											>5</span
										>
										<span
											@click="openNewWindow('App_E_Link_DaiKin_CAN', 'shorm')"
											class="text-#142142"
										>
											<a target="_blank" style="color: inherit"
												>大金空调中国相关</a
											></span
										>
									</div>
								</div>
							</div>
						</div>

						<!-- <div>
              <div ref="visitsScoll" class="cards_title w100% !mt--10px">拜访</div>
              <div class="p20px h130px w100% cent_box overflow-y-auto">
                <div class="text-#808696  w515px" v-for="(i,ie) in visitList"  :key="ie">
                  <div class="truncate2"  @click=" push(`/external/infoa/${i.id}`)">
                    <span class="text-#fff bg-#407DF1 px5px  text-18px rounded-20px mr-5px">{{ ++ie }}</span>
                    <span>{{i.title}}</span>
                  </div>
                  <span class="absolute right-0px top-12px">{{i.createTime}}</span>
                </div>
              </div>
            </div> -->
					</div>
					<div class="cards w560px h385px">
						<div class="cards_title">线上调查表</div>
						<div class="!text-18px right20 pt30px text-#4E7EE8">
							<a
								@click="
									openNewWindow(
										'App_E_mdy',
										'https://procurement.daikin.net.cn/mingdao/portal/app/7abea528-f7b4-4437-84bb-6b6b169bad3d'
									)
								"
								class="no-underline text-#4E7EE8"
							>
								<img src="./images/yuny@2x.png" class="w25px mr5px mt--4px" />
								<span>明道云</span>
							</a>
						</div>
						<div class="px20px w100% h345px">
							<!-- <table
                class=" text-center  mt23px text-18px  w515px h300px  text-#152242">
                <thead
                  style="background-color: #417BEF;color: #fff; ">
                  <tr class="h51px">
                    <th class="w155px ">调查表名称</th>
                    <th>填表日期</th>
                    <th>填报状态</th>
                  </tr>
                </thead>
                <tbody ref="tabScll" class="text-18px overflow-y-auto h250px">
                  <tr class="h50px leading-25px " v-for="i in 20"
                    :style="{ backgroundColor: i % 2 === 0 ? '#f9f9f9' : '' }">
                    <td>供应商调查表</td>
                    <td>4月-5月</td>
                    <td>已提交</td>
                  </tr>
              <tr v-if="rowsList" class="h50px leading-25px " v-for="i in rowsList"
                    :style="{ backgroundColor: i % 2 === 0 ? '#f9f9f9' : '' }">
                    <td>{{i.title}}</td>
                    <td>{{i.sheetCTime}}</td>
                    <td>{{i.status}}</td>
                  </tr>
              </tbody>
              </table>  -->

							<el-table
								:data="rowsList"
								stripe
								class="mt20px"
								:header-cell-style="{
									'text-align': 'center',
									'background-color': '#417BEF',
									color: '#fff',
									height: '51px',
									'font-weight': '900',
									'font-size': '18px'
								}"
								height="305"
								:cell-style="{
									height: '55px',
									color: '#152242',
									'font-size': '18px'
								}"
							>
								<el-table-column
									property="title"
									label="调查表名称"
									align="left"
								/>
								<el-table-column
									property="fillCTime"
									label="填表日期"
									align="center"
								/>
								<el-table-column
									property="fillRangeDate"
									label="填表期间"
									align="center"
								/>
								<el-table-column
									property="status"
									label="填报状态"
									align="center"
								/>
							</el-table>
						</div>
					</div>
					<div class="cards w560px h385px" style="height: ">
						<div class="cards_title">留言板</div>
						<!-- toDetail2(9) -->
						<div
							@click="toAdd"
							class="cards_title0 rounded-[6px] cursor-pointer flex justify-center items-center mt-[20px] mr-[18px]"
							style="
								color: #417bef;
								font-weight: normal;
								font-size: 16px;
								border: #417bef 2px solid;
								height: 30px;
								width: 70px;
							"
						>
							+ 新增
						</div>
						<!-- <el-button type="primary" class="mt15px mr20px" @click="toAdd">+ 新增</el-button> -->
						<div
							class="flex text-#1270EE h50px w-full px30px leading-25px items-center text-center cards_liuyan font-800 text-18px"
						>
							<!-- <div class="flex-1" style="border-radius: 15px 0 0 15px;" :class="flgs === 3 ? 'onStyle' : ''"
                @click="cardsClick(3)">供方动态</div> -->
							<div
								class="flex-1"
								:class="flgs === 1 ? 'onStyle' : ''"
								@click="cardsClick(1)"
								style="border-radius: 15px 0 0 15px"
							>
								供应商留言
							</div>
							<div
								class="flex-1"
								:class="flgs === 2 ? 'onStyle' : ''"
								@click="cardsClick(2)"
								style="border-radius: 0 15px 15px 0"
							>
								空调需求依赖
							</div>
						</div>
						<div class="text-#2c7af7 px-30px text-18px leading-25px">
							{{
								flgs === 1
									? '如您有任何想要向上海大金调达本部留言的内容，请点击右上角“新增”进行留言'
									: '如您有大金空调相关购买需求，欢迎您点击右上角“新增”按钮向我们提出'
							}}
						</div>
						<div ref="msgScoll" class="px20px h220px cent_box overflow-y-auto">
							<div
								v-if="msgList?.length"
								class="text-#808696 w515px"
								v-for="(i, key) in msgList"
								:key="i"
							>
								<div class="truncate2" @click="toDetail(i, 'App_E_Message')">
									<span
										class="text-#fff bg-#407DF1 px5px text-18px rounded-20px mr-5px inlineFlex"
										>{{ ++key }}</span
									>
									<!-- lujinli -->
									<span v-if="flgs == 1" class="text-18px">{{ i.number }}</span>
									<span v-if="flgs == 2" class="text-18px">{{
										i.demand +
										' ' +
										i.location +
										' ' +
										i.remark +
										': ' +
										i.usdObj
									}}</span>
									<span v-if="flgs == 3" class="text-18px">{{ i.title }}</span>
								</div>
								<div class="flex">
									<span
										class="text-18px ml-25px !p-0 truncate2 min-w-490px !max-w-490px block !overflow-unset"
										v-if="i.chatVOList && i.chatVOList.length > 0"
										:title="i.chatVOList[0].content"
									>
										<span
											class="bg-#9DBDFF text-#fff block w-100px float-left py5px pl-5px leftStyle"
											style="border-radius: 10px 0 0 10px"
											>大金回复：</span
										>
										<span
											class="bg-#EFF4FF !text-#247bd7 truncate2 min-w-390px !max-w-390px block float-left !pl-5px"
											style="border-radius: 0 10px 10px 0"
											>{{ i.chatVOList[0].content }}
										</span>
									</span>
									<!-- <span  class="pt13px" v-if="i.chatVOList && i.chatVOList.length > 0">{{i.chatVOList[0].createTime}}</span> -->
								</div>

								<span v-if="flgs == 1" class="absolute right-40px top-10px">
									{{ i.createTime }}
								</span>
								<div
									class="absolute right-0px top-5px bg-#9A9A9A rd-10px px-5px flex"
									v-if="flgs == 1 && msgList !== null"
								>
									<!-- <img  src="./images/chex@2x.png" alt="" class="w-28px py-5px px-5px"  @click="faqWithdraws(i)">
                  <span class="block w-1px bg-#fff"></span> -->
									<img
										src="./images/sahcc@2x.png"
										alt=""
										class="w-26px py-5px px-5px"
										@click="deleteMSG(i)"
									/>
								</div>
								<span v-if="flgs == 3" class="absolute right-0px top-18px">{{
									i.createTime
								}}</span>
								<span v-if="flgs == 2" class="absolute right-80px top-10px">{{
									i.procureTime
								}}</span>
								<div
									class="absolute right-0px top-5px bg-#9A9A9A rd-10px px-5px flex"
									v-if="flgs == 2"
								>
									<!-- <img  src="./images/chex@2x.png" alt="" class="w-28px py-5px px-5px"  @click="demandWithdraws(i)">
                  <span class="block w-1px bg-#fff"></span> -->
									<img
										src="./images/sahcc@2x.png"
										alt=""
										class="w-26px py-5px px-5px"
										@click="deleteMSB(i)"
									/>
								</div>
							</div>
							<div v-if="!msgList?.length" class="text-#808696 w515px">
								<div>
									<!-- lujinli -->
									<span
										v-if="flgs == 1"
										class="text-18px"
										style="margin-left: 40%; display: flex"
									>
										<div
											v-if="userCode"
											class="flex items-center justify-center flex-col"
										>
											<img
												src="./images/zanwly.png"
												alt=""
												style="margin-right: 50px"
											/>
											<p style="text-align: center; color: #dde5fd">
												暂无供方留言
											</p>
										</div>
										<div
											v-else
											class="flex items-center justify-center flex-col"
										>
											<img src="./images/zanwly2.png" alt="" />
											<span
												style="display: flex; margin: 5px auto; color: #dde5fd"
												>您暂未留言</span
											>
										</div>
									</span>
									<span
										v-if="flgs == 2"
										class="text-18px"
										style="margin-left: 40%; display: flex"
									>
										<div
											v-if="userCode"
											class="flex items-center justify-center flex-col"
										>
											<img
												src="./images/zanwly.png"
												alt=""
												style="margin-right: 50px"
											/>
											<span
												style="display: flex; margin: 5px auto; color: #dde5fd"
												>暂无提供方留言</span
											>
										</div>
										<div
											v-else
											class="flex items-center justify-center flex-col"
										>
											<img src="./images/zanwly2.png" alt="" />
											<span
												style="display: flex; margin: 5px auto; color: #dde5fd"
												>您暂未留言</span
											>
										</div>
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<n-modal
		v-model:show="shormA"
		class="w-940px h740px rd-20px relative bg-#fff"
	>
		<div>
			<div
				style="
					margin-top: 18px;
					margin-left: 20px;
					font-weight: 600;
					width: 144px;
					height: 58px;
					font-size: 24px;
					text-align: left;
					color: #142142 100%;
				"
			>
				供应商留言版
			</div>
			<div class="absolute right-30px top-20px">
				<div
					size="40"
					color="#ccc"
					style="
						font-size: 20px;
						margin: 10px;
						width: 18.09px;
						height: 18.21px;
						color: #b2b2b2;
					"
					@click="close1"
				>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						xmlns:xlink="http://www.w3.org/1999/xlink"
						viewBox="0 0 32 32"
					>
						<path
							d="M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4l6.6 6.6L8 22.6L9.4 24l6.6-6.6l6.6 6.6l1.4-1.4l-6.6-6.6L24 9.4z"
							fill="currentColor"
						></path>
					</svg>
				</div>
			</div>
			<!-- 内容区 -->
			<div
				style="
					border-top: 1px solid #e1e1e1;
					width: 100%;
					padding-top: 38px;
					padding-left: 38px;
				"
			>
				<span
					style="
						font-weight: 600;
						width: 853px;
						height: 19px;
						font-size: 18px;
						text-align: left;
						color: #142142 100%;
					"
					>为更好地构筑与各供应商的合作伙伴关系，各司可随时通过本平台进行留言，我们将及时跟进并反馈给贵司。</span
				>
				<div
					style="
						font-weight: 400;
						height: 18px;
						font-size: 18px;
						text-align: left;
						color: #142142 100%;
						margin-top: 30px;
						margin-bottom: 20px;
					"
				>
					1.贵司短期或中长期是否有国内外建厂（事务所）计划？
				</div>
				<div
					style="
						margin-top: 20px;
						width: 838px;
						height: 36px;
						border-radius: 5px 5px 5px 5px;
						background: #ffffff;
					"
				>
					<el-input v-model="fromtA.question1" style="height: 36px" />
				</div>
				<div
					style="
						font-weight: 400;
						height: 18px;
						font-size: 18px;
						text-align: left;
						color: #142142 100%;
						margin-top: 30px;
						margin-bottom: 20px;
					"
				>
					2.贵司近期是否有开发新产品/新领域的项目？（若有，请进行简单的介绍。）
				</div>
				<div
					style="
						margin-top: 20px;
						width: 838px;
						height: 36px;
						border-radius: 5px 5px 5px 5px;
						background: #ffffff;
					"
				>
					<el-form-item>
						<el-input v-model="fromtA.question2" style="height: 36px" />
					</el-form-item>
				</div>
				<div
					style="
						font-weight: 400;
						height: 18px;
						font-size: 18px;
						text-align: left;
						color: #142142 100%;
						margin-top: 30px;
						margin-bottom: 20px;
					"
				>
					3.目前在使用大金的线上化系统中，是否有不便、希望改善之处？（含HOMEPAGE、明道云线上调查表等）
				</div>
				<div
					style="
						margin-top: 20px;
						width: 838px;
						height: 36px;
						border-radius: 5px 5px 5px 5px;
						background: #ffffff;
					"
				>
					<el-form-item>
						<el-input v-model="fromtA.question3" style="height: 36px" />
					</el-form-item>
				</div>
				<div
					style="
						font-weight: 400;
						height: 18px;
						font-size: 18px;
						text-align: left;
						color: #142142 100%;
						margin-top: 30px;
						margin-bottom: 20px;
					"
				>
					4.在与我们的合作中，是否有其他愿景或建议？
				</div>
				<div
					style="
						margin-top: 20px;
						width: 838px;
						height: 36px;
						border-radius: 5px 5px 5px 5px;
						background: #ffffff;
					"
				>
					<el-form-item>
						<el-input v-model="fromtA.question4" style="height: 36px" />
					</el-form-item>
				</div>
			</div>
			<div
				style="
					margin-top: 82px;
					border-top: 1px solid #e1e1e1;
					width: 100%;
					height: 74px;
					position: relative;
				"
			>
				<div style="position: absolute; bottom: 0; right: 12px">
					<span
						class="inline-block w80px h25px text-#bfbfbf border border-solid text-center rounded-5px cursor-pointer"
						@click="shormA = false"
						style="
							width: 100px;
							height: 38px;
							border-radius: 5px 5px 5px 5px;
							background: #ffffff;
						"
					>
						<div
							style="
								font-weight: 400;
								height: 16px;
								font-size: 16px;
								text-align: left;
								color: #999999 100%;
								line-height: 34px;
								padding-left: 34px;
								margin-right: 8px;
							"
						>
							取消
						</div>
					</span>
					<span
						class="inline-block w80px h25px text-#fff bg-#236EED ml5px text-center rounded-5px cursor-pointer"
						style="
							width: 100px;
							height: 38px;
							border-radius: 5px 5px 5px 5px;
							background: #3870e5;
						"
						@click="addClickA"
					>
						<div
							style="
								font-weight: 400;
								height: 16px;
								font-size: 16px;
								text-align: left;
								color: #ffffff 100%;
								line-height: 34px;
								padding-left: 34px;
							"
						>
							提交
						</div>
					</span>
				</div>
			</div>
		</div>
	</n-modal>

	<n-modal
		v-model:show="shormB"
		:mask-closable="false"
		style="
			width: 939.99px;
			height: 740px;
			border-radius: 20px 20px 20px 20px;
			background: #ffffff;
			position: relative;
		"
	>
		<div>
			<div
				style="
					margin-top: 18px;
					margin-left: 20px;
					font-weight: 600;
					width: 144px;
					height: 58px;
					font-size: 24px;
					text-align: left;
					color: #142142 100%;
				"
			>
				空调需求依赖
			</div>
			<div class="absolute right-30px top-20px">
				<div
					size="40"
					color="#ccc"
					style="
						font-size: 20px;
						margin: 10px;
						width: 18.09px;
						height: 18.21px;
						color: #b2b2b2;
					"
					@click="close1"
				>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						xmlns:xlink="http://www.w3.org/1999/xlink"
						viewBox="0 0 32 32"
					>
						<path
							d="M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4l6.6 6.6L8 22.6L9.4 24l6.6-6.6l6.6 6.6l1.4-1.4l-6.6-6.6L24 9.4z"
							fill="currentColor"
						></path>
					</svg>
				</div>
			</div>
			<div
				style="border-top: 1px solid #e1e1e1; width: 100%; padding-left: 38px"
			>
				<div
					style="
						font-weight: 700;
						height: 18px;
						font-size: 18px;
						text-align: left;
						color: #142142 100%;
						margin-top: 30px;
						margin-bottom: 20px;
					"
				>
					<span style="color: red">*</span>需求依赖：
				</div>
				<div
					style="
						margin-top: 20px;
						width: 838px;
						height: 36px;
						border-radius: 5px 5px 5px 5px;
						background: #ffffff;
					"
				>
					<el-radio-group v-model="fromtB.usdObj" class="ml-4">
						<el-radio label="公司" size="large">公司</el-radio>
						<el-radio label="个人" size="large">个人</el-radio>
					</el-radio-group>
				</div>
				<div
					style="
						font-weight: 700;
						height: 18px;
						font-size: 18px;
						text-align: left;
						color: #142142 100%;
						margin-top: 30px;
						margin-bottom: 20px;
					"
				>
					<span style="color: red">*</span>使用对象：
				</div>
				<div
					style="
						margin-top: 20px;
						width: 838px;
						height: 36px;
						border-radius: 5px 5px 5px 5px;
						background: #ffffff;
					"
				>
					<el-radio-group v-model="fromtB.demand" class="ml-4">
						<el-radio label="家用机" size="large">家用机</el-radio>
						<el-radio label="商用机" size="large">商用机</el-radio>
					</el-radio-group>
				</div>
				<div
					style="
						font-weight: 700;
						height: 18px;
						font-size: 18px;
						text-align: left;
						color: #142142 100%;
						margin-top: 30px;
						margin-bottom: 20px;
					"
				>
					<span style="color: red">*</span>安装位置：
				</div>
				<div
					style="
						margin-top: 20px;
						width: 838px;
						height: 36px;
						border-radius: 5px 5px 5px 5px;
						background: #ffffff;
					"
				>
					<el-form-item>
						<el-input v-model="fromtB.location" style="height: 36px" />
					</el-form-item>
				</div>
				<div
					style="
						font-weight: 700;
						height: 18px;
						font-size: 18px;
						text-align: left;
						color: #142142 100%;
						margin-top: 30px;
						margin-bottom: 20px;
					"
				>
					<span style="color: red">*</span>采用期限：
				</div>
				<div
					style="
						margin-top: 20px;
						width: 838px;
						height: 36px;
						border-radius: 5px 5px 5px 5px;
						background: #ffffff;
					"
				>
					<el-form-item>
						<el-input v-model="fromtB.procureTime" style="height: 36px" />
					</el-form-item>
				</div>
				<div
					style="
						font-weight: 700;
						height: 18px;
						font-size: 18px;
						text-align: left;
						color: #142142 100%;
						margin-top: 30px;
						margin-bottom: 20px;
					"
				>
					<span style="color: red">*</span>备注：
				</div>
				<div
					style="
						margin-top: 20px;
						width: 838px;
						height: 36px;
						border-radius: 5px 5px 5px 5px;
						background: #ffffff;
					"
				>
					<el-form-item>
						<el-input v-model="fromtB.remark" style="height: 36px" />
					</el-form-item>
				</div>
			</div>
			<div
				style="
					margin-top: 62px;
					border-top: 1px solid #e1e1e1;
					width: 100%;
					height: 74px;
					position: relative;
				"
			>
				<div style="position: absolute; bottom: 0; right: 12px">
					<span
						class="inline-block w80px h25px text-#bfbfbf border border-solid text-center rounded-5px cursor-pointer"
						@click="shormB = false"
						style="
							width: 100px;
							height: 38px;
							border-radius: 5px 5px 5px 5px;
							background: #ffffff;
						"
					>
						<div
							style="
								font-weight: 400;
								height: 16px;
								font-size: 16px;
								text-align: left;
								color: #999999 100%;
								line-height: 34px;
								padding-left: 34px;
								margin-right: 8px;
							"
						>
							取消
						</div>
					</span>
					<span
						class="inline-block w80px h25px text-#fff bg-#236EED ml5px text-center rounded-5px cursor-pointer"
						style="
							width: 100px;
							height: 38px;
							border-radius: 5px 5px 5px 5px;
							background: #3870e5;
						"
						@click="addClickB"
					>
						<div
							style="
								font-weight: 400;
								height: 16px;
								font-size: 16px;
								text-align: left;
								color: #ffffff 100%;
								line-height: 34px;
								padding-left: 34px;
							"
						>
							提交
						</div>
					</span>
				</div>
			</div>
		</div>
	</n-modal>

	<n-modal v-model:show="shorm" :mask-closable="false">
		<div class="w700px h430px bg-#fff rd-15px">
			<div
				class="py5px px15px"
				style="
					border-bottom: 1px solid #dadada;
					font-weight: bold;
					color: #494a63;
				"
			>
				大金空调中国相关
				<img
					@click="shorm = false"
					src="@/assets/images/chac@2x.png"
					class="w15px float-right mt5px mr5px"
				/>
			</div>
			<div class="flex mt70px text-center">
				<div class="w-full text-center">
					<img src="@/assets/images/ewm1@2x.png" class="w200px" />
					<div
						class="py10px bg-#377CFF text-#fff w200px rd-20px mt35px mx-auto"
					>
						大金空调中国视频号
					</div>
				</div>
				<div class="w-full">
					<img src="@/assets/images/ewm2@2x.png" class="w200px" />
					<div
						class="py10px bg-#377CFF text-#fff w200px rd-20px mt35px mx-auto"
					>
						大金空调抖音号
					</div>
				</div>
			</div>
		</div>
	</n-modal>
</template>

<style scoped lang="less">
.beijing {
	background-image: url('./images/beij.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	// width: 100%;
	height: 50px;
	padding-left: 10px;
	padding-right: 10px;
	position: absolute;
	z-index: -1;
}
.onStyle {
	background: #2c7af7;
	color: #fff;
}
.leftStyle {
	position: relative;
}
.leftStyle::after {
	content: '';
	position: absolute;
	top: -9px;
	left: 50%; /* 居中 */
	transform: translateX(-50%);
	border-left: 9px solid transparent; /* 左侧边的宽度，可以调整大小 */
	border-right: 9px solid transparent; /* 右侧边的宽度，保持与左侧一致 */
	border-bottom: 10px solid #9dbdff;
}
.cards_liuyan {
	div {
		border: 1px solid #2c7af7;
		padding: 5px 0;
	}
}

.inlineFlex {
	display: inline-flex;
	width: 25px;
	height: 25px;
	line-height: 25px;
	align-items: center;
	justify-content: center;
}

// .icons {
//   background: url('./images/wjt1@2x.png');
//   background-repeat: round;
// }

.bk-tuann {
	background: url('./images/tuann.png');
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 207px 180px;
}

::-webkit-scrollbar {
	width: 1px;
}

.truncate2 {
	max-width: 370px;
	overflow: hidden;
	padding: 5px 0;
	line-height: 30px;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #142142;
	cursor: pointer;

	a {
		text-decoration: none;
	}
}

.truncate {
	max-width: 395px;
	min-width: 100px;
	overflow: hidden;
	padding: 10px 0 10px 10px;
	line-height: 30px;

	text-overflow: ellipsis;
	white-space: nowrap;
}

.badge-new {
	// width: 40px;
	height: 20px;
}

.truncate-box {
	width: 575px;
	overflow: hidden;
	height: 50px;
	margin: 10px 0;
	background: #f9f9f9;
	cursor: pointer;
}

.badge-24 {
	box-sizing: border-box;
	height: 24px;
	display: inline-block;
	line-height: 24px;
	padding: 0 5px;
}

.truncate-box:hover {
	background-color: #2c7af7;
	color: #fff;
	border-radius: 5px;

	// .icons {
	//   background: url('./images/wjt2@2x.png');
	//   background-repeat: round;
	// }
}

.cards_nav {
	position: absolute;
	top: 0;
	right: 0;
	width: 276px;
	height: 66px;

	background-position: top right;
	background-repeat: no-repeat;
	background-size: contain;

	font-size: 20px;
	color: #fff;

	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding-left: 38px;
	padding-right: 22px;
	padding-bottom: 20px;
}

.cards_nav2 {
	background-image: url('@/assets/images/youj@2x.png');
}

.cards_title {
	flex-shrink: 0;
	font-size: 28px;
	color: #142142;
	padding: 20px;
	font-weight: bold;
	padding-bottom: 0;
}

.icoT {
	padding: 5px;
	color: #fff;
	background-color: #002aae;
	border-radius: 5px;
	font-size: 16px;
}

.cards {
	border-radius: 18px;
	// overflow: hidden;
	background-color: #fff;
	box-shadow: 1px 2px 12px rgba(14, 86, 221, 0.32);
	display: flex;
	// flex-direction: column;
	flex-wrap: wrap;
	align-content: space-between;
	justify-content: space-between;

	&::after {
		content: ' ';
		background-image: url('@/assets/images/bg-card.svg');
		pointer-events: none;
		display: block;
		width: 100%;
		height: 127px;
		background-size: cover;
		position: absolute;
		left: 0;
		top: -1px;
	}
}

.top {
	position: absolute;
	right: 30px;
	top: -72px;
}

.page {
	font-family: 'PingFang SC';
	user-select: none;

	// background-image: url("@/assets/images/bg.jpg");
	// background-color: #000;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;

	line-height: 1;
}

.main {
	background-image: url('@/assets/images/bg-rs-main.svg');
	background-position: 0 0;
	background-repeat: repeat-x;
	background-size: auto;
}

.right20 {
	margin-right: 20px;
}

.page-wrapper {
	.cards {
		&::after {
			content: ' ';
			// background-image: url('@/assets/images/bg-cards.svg');
			pointer-events: none;
			display: block;
			width: 100%;
			height: 127px;
			background-size: cover;
			position: absolute;
			left: 0;
			top: -1px;
		}

		.cards_title {
			flex-shrink: 0;
			font-size: 28px;
			color: #142142;
			padding: 20px;
			padding-bottom: 0;
		}
	}
}
</style>
