622 lines
24 KiB
Vue
Executable File
622 lines
24 KiB
Vue
Executable File
<!-- 市况 -->
|
||
<script setup lang="ts">
|
||
import { Chart1, Chart3, Chart4, Chart5, Chart6 } from './MarketData'
|
||
import HomeHead from '@/views/home/components/HomeHead.vue'
|
||
import AppBlock from '@/components/AppBlock.vue'
|
||
import AppNewsBox from '@/components/AppNewsBox.vue'
|
||
// import HomeHeadSearch from '@/views/home/components/HomeHeadSearch.vue'
|
||
import { useDate } from '@/views/home/hooks/useDate'
|
||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||
import { getList, marketPreADD, getMarketUser, saveMarketUser, MarketDownload, MarketPreview, getCurrencyList, getMetalList } from '@/api/daikin/base'
|
||
import { NModal, NCard } from 'naive-ui'
|
||
import { formatDate } from '@/utils/format'
|
||
import { message } from '@/utils/message'
|
||
import { useUserStore } from '@/stores/modules/user'
|
||
import UserList from '@/views/home/intelligence/process/UserPages.vue'
|
||
import Amtion from '@/components/amtion.vue'
|
||
import { noticeld } from '@/stores/modules/noticeId'
|
||
const store = useUserStore()
|
||
const stores = noticeld()
|
||
const userCode = ['admin', 'shikuang_dandang', 'tech_service'].some((item) =>
|
||
store.user.roleCode?.includes(item)
|
||
)
|
||
const userCodes = ['admin', 'huilv_dandang', 'tech_service'].some((item) =>
|
||
store.user.roleCode?.includes(item)
|
||
)
|
||
const { day, week } = useDate()
|
||
const { push } = useRouter()
|
||
const currentDate = new Date();
|
||
const currentDates = new Date();
|
||
const value1 = ref<[Date, Date]>([
|
||
currentDate.setMonth(currentDate.getMonth() - 11),
|
||
new Date()
|
||
])
|
||
const value2 = ref<[Date, Date]>([
|
||
currentDates.setMonth(currentDates.getMonth() - 11),
|
||
new Date()
|
||
])
|
||
const { chartRef: chartRef1, option: chartOption1, state } = Chart1()
|
||
const { option: chartOption11 } = Chart1()
|
||
const { chartRef: chartRef3, option: chartOption3, state2 } = Chart3()
|
||
const { chartRef: chartRef4, option: chartOption4, state3 } = Chart4()
|
||
const { chartRef: chartRef5, option: chartOption5, state4 } = Chart5()
|
||
const { chartRef: chartRef6, option: chartOption6, state5 } = Chart6()
|
||
|
||
const listData = ref()
|
||
const listDatas = ref()
|
||
async function getData() {
|
||
const { data } = await getList({ type: 2 })
|
||
const { data: ds } = await getList({ type: 1 })
|
||
listData.value = data
|
||
listDatas.value = ds
|
||
}
|
||
const metal = ref()
|
||
const currency = ref()
|
||
onMounted(async () => {
|
||
getData()
|
||
const { data } = await getCurrencyList()
|
||
const { data: dat } = await getMetalList()
|
||
if (dat && dat != 'null' && dat.length > 0) {
|
||
metal.value = dat
|
||
// .filter((item:any) => {
|
||
// if(["Fe","lengmei"].includes(item.value)){
|
||
// return false
|
||
// }else return item
|
||
// })
|
||
from.value.label.radio = dat[0].value
|
||
state4.number = dat[0].value
|
||
console.log("🚀 ~ file: Market.vue:56 ~ metal:", metal)
|
||
}
|
||
if (data && data != 'null' && data.length > 0) {
|
||
currency.value = data
|
||
from.value.labe2.radio = data[0].value
|
||
const dat = data[0].value.split(',')
|
||
state5.currencyCodeFrom = dat[0]
|
||
state5.currencyCodeTo = dat[1]
|
||
state2.currencyCodeFrom = dat[0]
|
||
state2.currencyCodeTo = dat[1]
|
||
state3.currencyCodeFrom = dat[0]
|
||
state3.currencyCodeTo = dat[1]
|
||
}
|
||
})
|
||
|
||
const src = ref('');
|
||
const srcType = ref()
|
||
const showModalRef2 = ref(false)
|
||
const lokeFuck = async (n) => {
|
||
const { id } = n
|
||
if (!id) return
|
||
let { data: { url } } = await MarketPreview({ id })
|
||
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 downloadFile(data: { id: any; title: string }) {
|
||
console.log(data)
|
||
if (!data.id) return
|
||
try {
|
||
const response = await MarketDownload({ id: data.id })
|
||
console.log(response)
|
||
var blob = new Blob([response.data]);
|
||
|
||
const downloadUrl = URL.createObjectURL(blob);
|
||
const link = document.createElement('a');
|
||
link.href = downloadUrl;
|
||
link.download = response.fileName; // 替换为你要保存的文件名
|
||
link.click();
|
||
URL.revokeObjectURL(downloadUrl);
|
||
} catch (error) {
|
||
message.error(error);
|
||
}
|
||
}
|
||
const tab = ref(false)
|
||
const tab1 = ref(false)
|
||
const tab2 = ref(false)
|
||
const names = ref('Cu')
|
||
const names1 = ref('100USD-CNY')
|
||
const names2 = ref('100USD-CNY')
|
||
const tabClick1 = (e) => {
|
||
|
||
console.log(e.target.getAttribute('data-id'))
|
||
tab1.value = false
|
||
const dat = e.target.getAttribute('data-id').split(',')
|
||
names1.value = e.target.innerText
|
||
state2.currencyCodeFrom = dat[0]
|
||
state2.currencyCodeTo = dat[1]
|
||
}
|
||
const tabClick2 = (e) => {
|
||
|
||
console.log(e.target.getAttribute('data-id'))
|
||
tab2.value = false
|
||
const dat = e.target.getAttribute('data-id').split(',')
|
||
names2.value = e.target.innerText
|
||
state3.currencyCodeFrom = dat[0]
|
||
state3.currencyCodeTo = dat[1]
|
||
}
|
||
const tabClick = (e) => {
|
||
|
||
console.log(e.target)
|
||
tab.value = false
|
||
state.type = e.target.getAttribute('data-id')
|
||
// names.value =e.target.innerText
|
||
}
|
||
const tabShow = (num) => {
|
||
|
||
// console.log(num)
|
||
switch (num) {
|
||
case 0:
|
||
tab.value = tab.value === false ? true : false
|
||
break;
|
||
case 1:
|
||
tab1.value = tab1.value === false ? true : false
|
||
break;
|
||
case 2:
|
||
tab2.value = tab2.value === false ? true : false
|
||
break;
|
||
}
|
||
}
|
||
|
||
|
||
const from = ref({
|
||
label: {
|
||
radio: ''
|
||
},
|
||
labe2: {
|
||
radio: ''
|
||
}
|
||
})
|
||
const shomk = ref(false)
|
||
const sdubList = ref({
|
||
title: '',
|
||
fileList: [],
|
||
})
|
||
const shomks = (it) => {
|
||
sdubList.value.type = it
|
||
// console.log(sdubList.value)
|
||
shomk.value = true
|
||
}
|
||
async function onSubmit() {
|
||
const { type, title, fileList } = sdubList.value
|
||
|
||
let filePath
|
||
if (fileList.length > 0) {
|
||
// console.log(fileList)
|
||
filePath = fileList[0].response.url
|
||
}
|
||
|
||
const { msg, code } = await marketPreADD({ type, title, filePath })
|
||
if (code === 200) { message.success("修改成功") }
|
||
else message.warning(msg)
|
||
window.location.reload();
|
||
// console.log(sdubList.value)
|
||
}
|
||
const handleExceed: UploadProps['onExceed'] = (uploadFile: any, uploadFiles: any) => {
|
||
message.warning("当前只支持上传一个文件")
|
||
}
|
||
const thisCka = (e) => {
|
||
if (value1.value) {
|
||
state4.startTime = formatDate(value1.value[0]).substring(0, 10)
|
||
state4.endTime = formatDate(value1.value[1]).substring(0, 10)
|
||
}
|
||
state4.number = e
|
||
console.log(e)
|
||
}
|
||
const thisCka2 = (e) => {
|
||
const dat = e.split(',')
|
||
if (value2.value) {
|
||
state5.startTime = formatDate(value2.value[0]).substring(0, 10)
|
||
state5.endTime = formatDate(value2.value[1]).substring(0, 10)
|
||
}
|
||
state5.currencyCodeFrom = dat[0]
|
||
state5.currencyCodeTo = dat[1]
|
||
}
|
||
const timenFirst = (e) => {
|
||
// console.log(e)
|
||
state4.startTime = formatDate(value1.value[0]).substring(0, 10)
|
||
state4.endTime = formatDate(value1.value[1]).substring(0, 10)
|
||
}
|
||
const timenFirsts = (e) => {
|
||
// console.log(e)
|
||
state5.startTime = formatDate(value2.value[0]).substring(0, 10)
|
||
state5.endTime = formatDate(value2.value[1]).substring(0, 10)
|
||
}
|
||
const header = { 'token': store.user.token }
|
||
|
||
const showModal = ref(false)
|
||
const flg = ref()
|
||
const setUserList = ref()
|
||
async function getUser(moduleId: any) {
|
||
showModal.value = !showModal.value
|
||
flg.value = moduleId
|
||
const { data: userArr } = await getMarketUser({ moduleId })
|
||
stores.article.reviewSource = '2'
|
||
setUserList.value = userArr
|
||
|
||
}
|
||
// 获取子组件传过来的值
|
||
const handleChild = (data: any) => {
|
||
console.log(data, 444);
|
||
const { showModal: show, multipleSelection } = data
|
||
showModal.value = unref(show)
|
||
// userList.value = multipleSelection
|
||
let userIdList: any[] = []
|
||
multipleSelection.value.forEach((i: { userId: any }) => {
|
||
// console.log(dataList.value)
|
||
userIdList.push(i.userId)
|
||
})
|
||
|
||
saveMarketUser({
|
||
moduleId: flg.value,
|
||
userIdList: userIdList
|
||
})
|
||
}
|
||
const CloseThiss = (data: boolean) => {
|
||
showModal.value = data
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<HomeHead class="top">
|
||
<template #content>
|
||
<!-- <HomeHeadSearch /> -->
|
||
</template>
|
||
</HomeHead>
|
||
<div class="h-full relative flex flex-col overflow-y-auto scrollbar-width-1px">
|
||
<div class="pl12px mt30px flex w-full h-full gap-30px">
|
||
<!-- <img src="./images/shukuang.png" alt="" class="w-full h-full"> -->
|
||
|
||
<AppBlock class="flex-1 box">
|
||
<div class="box-title">市况</div>
|
||
<el-button type="primary" v-if="userCode" class="button !mr-30px !mt-[-30px] z-100"
|
||
@click="push({ name: 'MarketDataModify' })">数据管理</el-button>
|
||
<div class="bgStyle !h250px mt20px">
|
||
<div class=" relative w100%">
|
||
|
||
<span @click="tabShow(0)" class="title bg-#70BFCD pl18px pr24px">{{ names }}
|
||
<!-- <el-icon><CaretBottom /></el-icon> -->
|
||
</span>
|
||
<span class="absolute right-160px top-14px z-30 text-#000">最近7天数据</span>
|
||
|
||
<div v-if="false && tab"
|
||
class="tab absolute bg-#fff w100px top-50px z-50 text-#112144 text-center leading-28px text-18px ">
|
||
<div v-if="metal"
|
||
v-for="im in metal.filter((item: any) => !['Fe', 'lengmei'].includes(item.value))"
|
||
class="py5px !rounded-none" :data-id="im.value" @click="tabClick">{{ im.title }}</div>
|
||
<!-- <div class="py5px !rounded-none" data-id="Fe" @click="tabClick">Fe</div>
|
||
|
||
<div class="py5px !rounded-none" data-id="Cu" @click="tabClick">Cu</div>
|
||
<div class="py5px !rounded-none" data-id="Re" @click="tabClick">稀土</div> -->
|
||
</div>
|
||
<VChart class="absolute z-22 left-0 right-0 !w-full" ref="chartRef1" :option="chartOption1"
|
||
autoresize />
|
||
</div>
|
||
<!-- <div>
|
||
<span class="title bg-#70BFCD p5px pl10px !pr25px">AI</span>
|
||
<VChart class="absolute z-22" ref="chartRef2" :option="chartOption2" autoresize />
|
||
</div> -->
|
||
</div>
|
||
<div class="bgStyle !h250px mt10px">
|
||
<div class=" relative w100%">
|
||
|
||
<span class="title bg-#FF960F pl18px pr28px">{{ 'AI' }}
|
||
<!-- <el-icon><CaretBottom /></el-icon> -->
|
||
</span>
|
||
<span class="absolute right-160px top-14px z-30 text-#000">最近7天数据</span>
|
||
<VChart class="absolute z-22 left-0 right-0 !w-full" ref="chartRef1" :option="chartOption11"
|
||
autoresize />
|
||
</div>
|
||
<!-- <div>
|
||
<span class="title bg-#70BFCD p5px pl10px !pr25px">AI</span>
|
||
<VChart class="absolute z-22" ref="chartRef2" :option="chartOption2" autoresize />
|
||
</div> -->
|
||
</div>
|
||
<div class="bgStyle !h240px mt10px">
|
||
<div>
|
||
<span class="title bg-#003BB7 !text-16px pl13px pr20px ">历年数据</span>
|
||
<VChart class=" absolute z-22" ref="chartRef5" :option="chartOption5" autoresize />
|
||
</div>
|
||
</div>
|
||
<div class="mt8px ml10px">
|
||
<div class="flex items-center w-45%">
|
||
|
||
<span class="text-#000 whitespace-nowrap">日期:</span>
|
||
<el-config-provider :locale="zhCn">
|
||
<el-date-picker v-model="value1" type="daterange" range-separator="到"
|
||
start-placeholder="开始时间" end-placeholder="结束时间" size="small"
|
||
@change="timenFirst" /></el-config-provider>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<el-radio-group v-model="from.label.radio" class="ml-4" @change="thisCka">
|
||
<el-radio v-if="metal" v-for="im in metal" :label="im.value"
|
||
size="large">{{ im.title }}</el-radio>
|
||
<!-- <el-radio label="Al" size="large" >Al</el-radio>
|
||
<el-radio label="Fe" size="large" >Fe</el-radio>
|
||
<el-radio label="Re" size="large" >稀土</el-radio> -->
|
||
</el-radio-group>
|
||
<el-popover placement="top-end" trigger="click" :popper-style="{ width: '590px',borderRadius:'10px' }"
|
||
:teleported="true">
|
||
<template #reference>
|
||
<div
|
||
class="bg-gr h-42px w115px flex justify-center items-center text-#fff rounded-10px text-18px cursor-pointer font-bold">
|
||
市况预测 <el-icon class="rotate-270deg">
|
||
<CaretBottom />
|
||
</el-icon></div>
|
||
</template>
|
||
<!-- <Teleport to="v-screen-box"> -->
|
||
<!-- <VScaleScreen
|
||
ref="fitscreenRef"
|
||
:width="1920"
|
||
:height="1080"
|
||
mode="fit"
|
||
> -->
|
||
<div class="bgStyle h-250px w-690px mt15px mb10px">
|
||
<div class="w-full">
|
||
<span class="title bg-#003BB7 !text-16px pl13px pr20px b">市况预测</span>
|
||
<!-- <el-button type="primary" v-if="userCode" class="button" @click="getUser(1)">查看范围</el-button> -->
|
||
<el-button type="primary" size="small" v-if="userCode" class="button !mr-2%"
|
||
@click="push({ name: 'MarketModifys' })">管理</el-button>
|
||
<p class="mt40px p15px !border-none max-h250px overflow-auto">
|
||
<p class="!border-none w-98% !flex items-center pb10px news-item !pr30rpx"
|
||
v-for="n in listDatas" :key="n">
|
||
<AppNewsBox class="flex-1 !border-none" :text="n.title" :date="n.createTime" />
|
||
<p class="flex-shrink flex !border-none w35px ml20px">
|
||
<el-button size="small" type="primary" @click="lokeFuck(n)">预览</el-button>
|
||
<!-- <el-button type="primary" @click="downloadFile(n)">下载</el-button> -->
|
||
</p>
|
||
</p>
|
||
</p>
|
||
|
||
</div>
|
||
</div>
|
||
<!-- </VScaleScreen> -->
|
||
<!-- </Teleport> -->
|
||
</el-popover>
|
||
</div>
|
||
|
||
</div>
|
||
</AppBlock>
|
||
<AppBlock class="flex-1 box">
|
||
<div class="box-title ">汇率</div>
|
||
<div class="bgStyle !h250px mt20px">
|
||
<div class="mr25px">
|
||
<span @click="tabShow(1)"
|
||
class="title bg-#FF603A !text-16px pl13px pr20px ">{{ names1 }}<el-icon>
|
||
<CaretBottom />
|
||
</el-icon></span>
|
||
<div v-if="tab1"
|
||
class="tab absolute bg-#fff w100px top-40px z-50 text-#112144 text-center leading-28px text-16px ">
|
||
<div v-if="currency" v-for="it in currency" class="py5px !rounded-none" :data-id="it.value"
|
||
@click="tabClick1">{{ it.title }}</div>
|
||
<!-- <div class="py5px !rounded-none" data-id="CNA,USD" @click="tabClick1">人民币-美元</div>
|
||
<div class="py5px !rounded-none" data-id="JPY,USD" @click="tabClick1">日元-美元</div> -->
|
||
</div>
|
||
|
||
|
||
<VChart class=" absolute z-22" ref="chartRef3" :option="chartOption3" autoresize />
|
||
</div>
|
||
<div>
|
||
<span @click="tabShow(2)"
|
||
class="title bg-#70BFCD !text-16px pl13px pr20px ">{{ names2 }}<el-icon>
|
||
<CaretBottom />
|
||
</el-icon></span>
|
||
|
||
<div v-if="tab2"
|
||
class="tab absolute bg-#fff w100px top-40px z-50 text-#112144 text-center leading-28px text-16px ">
|
||
<div v-if="currency" v-for="it in currency" class="py5px !rounded-none" :data-id="it.value"
|
||
@click="tabClick2">{{ it.title }}</div>
|
||
<!-- <div class="py5px !rounded-none" data-id="CNA,USD" @click="tabClick2">人民币-美元</div>
|
||
<div class="py5px !rounded-none" data-id="JPY,USD" @click="tabClick2">日元-美元</div> -->
|
||
</div>
|
||
|
||
<VChart class="absolute z-22" ref="chartRef4" :option="chartOption4" autoresize />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bgStyle !h250px mt10px">
|
||
<div>
|
||
<span class="title bg-#003BB7 !text-16px pl13px pr20px ">历年数据</span>
|
||
<VChart class=" absolute z-22" ref="chartRef6" :option="chartOption6" autoresize />
|
||
</div>
|
||
</div>
|
||
<div class="mt10px ml10px">
|
||
<div class="flex items-center w-45%">
|
||
|
||
<span class="text-#000 whitespace-nowrap">日期:</span>
|
||
<el-config-provider :locale="zhCn">
|
||
<el-date-picker v-model="value2" type="daterange" range-separator="到"
|
||
start-placeholder="开始时间" end-placeholder="结束时间" size="small"
|
||
@change="timenFirsts" /></el-config-provider>
|
||
</div>
|
||
<div class="h-30px">
|
||
<el-radio-group v-model="from.labe2.radio" class="ml-4" @change="thisCka2">
|
||
<el-radio v-if="currency" v-for="it in currency" :label="it.value"
|
||
size="large">{{ it.title }}</el-radio>
|
||
<!-- <el-radio label="JPY,USD" size="large" >日元-美元</el-radio>
|
||
<el-radio label="CNA,USD" size="large" >人民币-美元</el-radio> -->
|
||
</el-radio-group>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="bgStyle !h230px mt15px mb10px">
|
||
<div>
|
||
<span class="title bg-#003BB7 !text-16px pl13px pr20px ">汇率预测</span>
|
||
<!-- <el-button type="primary" v-if="userCode" class="button" @click="getUser(2)">查看范围</el-button> -->
|
||
<el-button type="primary" v-if="userCodes" class="button"
|
||
@click="push({ name: 'MarketModify' })">管理</el-button>
|
||
<p class="mt40px p15px !border-none max-h-full overflow-auto">
|
||
<p class="!border-none w615px !flex items-center pb10px news-item " v-for="n in listData"
|
||
:key="n">
|
||
<AppNewsBox class="flex-1 !border-none" :text="n.title" :date="n.createTime" />
|
||
<p class="flex-shrink flex !border-none w35px ml20px">
|
||
<el-button type="primary" @click="lokeFuck(n)">预览</el-button>
|
||
<!-- <el-button type="primary" @click="downloadFile(n)">下载</el-button> -->
|
||
</p>
|
||
</p>
|
||
</p>
|
||
|
||
</div>
|
||
</div>
|
||
</AppBlock>
|
||
</div>
|
||
</div>
|
||
<!-- <div style="width: 1200px; height:800px ; position: fixed; z-index: 100; top:50px;;">
|
||
|
||
</div> -->
|
||
<n-modal :mask-closable="true" v-model:show="showModalRef2">
|
||
<div class="w90% h90% ">
|
||
<Amtion :data="src" :datas="srcType" />
|
||
</div>
|
||
|
||
</n-modal>
|
||
|
||
|
||
<n-modal v-model:show="shomk">
|
||
<div class="py40px px30px bg-#fff">
|
||
|
||
<el-form :model="sdubList" label-width="120px" :inline="true">
|
||
|
||
<el-form-item label="标题">
|
||
<el-input v-model="sdubList.title" />
|
||
</el-form-item>
|
||
<br>
|
||
<el-form-item label="文件">
|
||
<el-upload v-model:file-list="sdubList.fileList" class="upload-demo" :headers="header"
|
||
action="/test-api/common/upload" :on-change="handleChange">
|
||
<el-button type="primary">选择文件</el-button>
|
||
|
||
</el-upload>
|
||
</el-form-item>
|
||
<br>
|
||
<br>
|
||
|
||
<el-form-item class="ml80px">
|
||
<el-button type="primary" @click="onSubmit">提交</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
</div>
|
||
</n-modal>
|
||
<n-modal v-model:show="showModal">
|
||
<UserList :userDataList="setUserList" @clickChild="handleChild" @CloseThis="CloseThiss" />
|
||
</n-modal>
|
||
</template>
|
||
|
||
<style scoped lang="less">
|
||
.bg-gr {
|
||
background: linear-gradient(to left, #34A6D9 0%, #23D1C6 100%);
|
||
}
|
||
|
||
.button {
|
||
display: block;
|
||
float: right;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
|
||
|
||
|
||
::-webkit-scrollbar {
|
||
width: 1px;
|
||
}
|
||
|
||
.top {
|
||
position: absolute;
|
||
right: 30px;
|
||
top: -92px;
|
||
}
|
||
|
||
.date-wrapper[data-v-c5c4f420] {
|
||
line-height: 1.5;
|
||
position: relative;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
vertical-align: middle;
|
||
color: #142142;
|
||
border: none;
|
||
}
|
||
|
||
.tab {
|
||
div:hover {
|
||
color: #0036BC;
|
||
}
|
||
}
|
||
|
||
.box {
|
||
padding: 23px 20px 0 20px;
|
||
|
||
.box-title {
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
position: relative;
|
||
padding-left: 24px;
|
||
color: black;
|
||
|
||
&::before {
|
||
content: " ";
|
||
display: block;
|
||
width: 8px;
|
||
height: 30px;
|
||
background-color: #003ab5;
|
||
|
||
position: absolute;
|
||
left: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bgStyle {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 270px;
|
||
position: relative;
|
||
padding: 0 5px;
|
||
|
||
div {
|
||
flex: 1;
|
||
border: 1px solid rgb(236, 236, 236);
|
||
border-radius: 18px;
|
||
|
||
.title {
|
||
// width: 60px;
|
||
// height: 60px;
|
||
border-radius: 18px 0 50px 0;
|
||
color: aliceblue;
|
||
line-height: 40px;
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
z-index: 50;
|
||
position: absolute;
|
||
}
|
||
}
|
||
}
|
||
</style>
|