165 lines
4.0 KiB
Vue
165 lines
4.0 KiB
Vue
<template>
|
||
<div class="all">
|
||
<el-image :src="topBg" mode="widthFix" class="topbg" />
|
||
|
||
<div class="content">
|
||
<div class="top">
|
||
<div class="top_left">
|
||
<el-image :src="logo" mode="widthFix" class="logo" />
|
||
<div class="sub_info">
|
||
<text class="company_name">{{ info.company_name }}</text>
|
||
<div class="sub_name">
|
||
<text>证券代码：{{ info.code }}</text> |
|
||
<text>行业分类：{{ info.code }}</text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="top_right">
|
||
<div class="st_item">
|
||
<text class="st_num">{{ stData.st1 }}</text>
|
||
<text class="st_title">财讯篇数</text>
|
||
</div>
|
||
|
||
<div class="st_item">
|
||
<text class="st_num">{{ stData.st2 }}</text>
|
||
<text class="st_title">H5总数</text>
|
||
</div>
|
||
|
||
<div class="st_item">
|
||
<text class="st_num">{{ stData.st3 }}</text>
|
||
<text class="st_title">视频总数</text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts" name="dashboard">
|
||
import { ref, onMounted, defineAsyncComponent, computed, onUnmounted, reactive } from 'vue';
|
||
import { Session } from '/@/utils/storage';
|
||
import { NextLoading } from '/@/utils/loading';
|
||
import topBg from '../../../assets/caixun/home_bg_qiye.png'
|
||
import logo from '../../../assets/images/logo.png'
|
||
|
||
const info = ref({
|
||
company_name: '中国软件国际有限公司',
|
||
code: '0000001',
|
||
cate: "股份制银行"
|
||
})
|
||
|
||
const stData = reactive({
|
||
st1: 561,
|
||
st2: 9,
|
||
st3: 12,
|
||
})
|
||
|
||
onMounted(() => {
|
||
NextLoading.done();
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.all {}
|
||
|
||
.topbg {
|
||
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.top {
|
||
position: fixed;
|
||
top: 15vw;
|
||
left: 50%;
|
||
transform: translate(-50%, 0);
|
||
|
||
width: 80vw;
|
||
height: calc(80vw * 0.0975);
|
||
background: linear-gradient(180deg, #E7EFFA 0%, #FAFBFB 100%);
|
||
box-shadow: 0px 2px 12px 0px rgba(186, 193, 205, 0.5), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.top_left {
|
||
display: flex;
|
||
height: 100%;
|
||
}
|
||
|
||
.logo {
|
||
width: 8vw;
|
||
height: 8vw;
|
||
background: #E46713;
|
||
margin-left: 30px;
|
||
margin-top: -1.5vw;
|
||
}
|
||
|
||
.sub_info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 1.5vw;
|
||
height: 100%;
|
||
justify-content: center;
|
||
margin-top: -0.5vw;
|
||
}
|
||
|
||
.company_name {
|
||
font-family: PingFang-SC, PingFang-SC;
|
||
font-weight: bold;
|
||
font-size: 1.2vw;
|
||
color: #1A1A1A;
|
||
line-height: 30px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.sub_name {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 0.8vw;
|
||
color: #919191;
|
||
line-height: 18px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-top: 0.7vw;
|
||
}
|
||
|
||
}
|
||
|
||
.top_right {
|
||
display: flex;
|
||
width: 22vw;
|
||
}
|
||
|
||
.st_item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 30%;
|
||
text-align: center;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.st_num {
|
||
font-family: PingFang-SC, PingFang-SC;
|
||
font-weight: bold;
|
||
font-size: 1.5vw;
|
||
color: #1A1A1A;
|
||
line-height: 33px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.st_title {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 0.8vw;
|
||
color: #5F6063;
|
||
line-height: 20px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
</style>
|