148 lines
3.5 KiB
Vue
148 lines
3.5 KiB
Vue
<template>
|
|
<div class="popular-feelings-warp">
|
|
<div
|
|
class="popular-feelings-content"
|
|
:style="{
|
|
'--before-bg': `url(${beforeBg})`,
|
|
}"
|
|
>
|
|
<template v-for="(n, index) in datalist" :key="index">
|
|
<div
|
|
class="popular-feelings-item"
|
|
:style="{
|
|
'background-image': 'url(' + getAssetsFile('images/early/back1.png') + ')',
|
|
}"
|
|
:class="n.name"
|
|
>
|
|
<div class="content-bg">
|
|
<div class="val">{{ n.val || 0 }}</div>
|
|
<div class="label">{{ n.title || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, onMounted, computed } from 'vue';
|
|
import { isEmpty, getAssetsFile } from '@/utils';
|
|
let datalist = reactive([
|
|
{ name: 'popular', title: '今天舆情量', val: 1872 },
|
|
{ title: '今日文章量', name: 'article', val: 1856 },
|
|
{ title: '今日浏览量', name: 'view', val: 54681 },
|
|
{ title: '文章总数', name: 'total', val: 75671 },
|
|
]);
|
|
|
|
const beforeBg = getAssetsFile('images/early/bg5.png');
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
div {
|
|
box-sizing: border-box;
|
|
}
|
|
.popular-feelings-warp {
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 10px;
|
|
.popular-feelings-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
.popular-feelings-item {
|
|
position: absolute;
|
|
background-size: 100% 100%;
|
|
background-position: left bottom;
|
|
background-repeat: no-repeat;
|
|
text-align: center;
|
|
&.popular {
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 35%;
|
|
height: 45%;
|
|
.val {
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
.label {
|
|
color: #50e3c2;
|
|
margin-top: 8%;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
&.article {
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
width: 35%;
|
|
height: 45%;
|
|
.val {
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
.label {
|
|
color: #50e3c2;
|
|
margin-top: 8%;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
&.view {
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 35%;
|
|
height: 45%;
|
|
.val {
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
.label {
|
|
color: #50e3c2;
|
|
margin-top: 8%;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
&.total {
|
|
left: 50%;
|
|
bottom: -10%;
|
|
transform: translateX(-50%);
|
|
width: 50%;
|
|
height: 66%;
|
|
.val {
|
|
color: #50e3c2;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
margin-top: 2%;
|
|
}
|
|
.label {
|
|
color: #fff;
|
|
margin-top: 10%;
|
|
}
|
|
}
|
|
|
|
.content-bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
// .content-bg ::before {
|
|
// content: '';
|
|
// position: absolute;
|
|
// top: 0;
|
|
// left: 0;
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// background-image: var(--before-bg); /* 替换为你的背景图片路径 */
|
|
// background-size: 100% 100%;
|
|
// background-position: left bottom;
|
|
// background-repeat: no-repeat;
|
|
// z-index: -1; /* 确保伪元素在内容后面 */
|
|
// transform: rotate(90deg); /* 旋转角度 */
|
|
// transform-origin: center; /* 设置旋转中心点 */
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
</style>
|