<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta charset="UTF-8" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<title>月度排行榜</title>
|
<script src="/customer_list/ch/ai_html/views/demo/js/tailwind.js"></script>
|
<script src="/customer_list/ch/ai_html/views/demo/js/vue.global.js"></script>
|
<script src="/customer_list/ch/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
|
<link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css">
|
</link>
|
<script src="/customer_list/ch/static/js/echarts.min.js"></script>
|
<style type="text/css">
|
.item_title {
|
height: 38px;
|
line-height: 38px;
|
width: 100%;
|
color: #31abe3;
|
text-align: center;
|
position: relative;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.leader_left {
|
width: 58px;
|
height: 14px;
|
background-image: url('/customer_list//ch/static/images/demo/leader_left.png');
|
}
|
|
.leader_right {
|
width: 58px;
|
height: 14px;
|
background-image: url('/customer_list//ch/static/images/demo/leader_right.png');
|
transform: rotate(180deg);
|
}
|
.title-inner{
|
font-weight: 900;
|
letter-spacing: 2px;
|
background-color :#31abe3;
|
/* background: linear-gradient(92deg, #fff9 0%, #fff9 48.8525390625%, #fff9 100%); */
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="w-full h-full bg-[#fff] px-10 py-0" id="leaderBoard">
|
<div class="w-full h-full">
|
<div class="item_title">
|
<div class="leader_left"></div>
|
<span>月度缴费金额排行</span>
|
<div class="leader_right"></div>
|
</div>
|
<div class="w-full h-full justify-center" v-for="(item, index) in state.leaderBoardList" :key="index">
|
<div class="w-[300px] h-10 flex justify-between items-center mx-[auto] my-0">
|
<span class="title-inner">{{item.Name}}</span>
|
<span>{{item.Amount}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
<script>
|
const { createApp, onMounted, ref, reactive } = Vue;
|
createApp({
|
setup() {
|
let state = reactive({
|
leaderBoardList: [
|
{
|
Name: '厦门营业所',
|
Amount: '10000'
|
},
|
{
|
Name: '二供营业所',
|
Amount: '4354363'
|
},
|
{
|
Name: '同安营业所',
|
Amount: '435233'
|
},
|
{
|
Name: '集美营业所',
|
Amount: '54545'
|
},
|
{
|
Name: '翔美营业所',
|
Amount: '577887'
|
},
|
{
|
Name: '海沧营业所',
|
Amount: '5478786'
|
},
|
|
]
|
});
|
const initLeaderBoard = () => {
|
console.log("🚀 ~ leaderBoardList:", state.leaderBoardList)
|
}
|
onMounted(() => {
|
initLeaderBoard();
|
});
|
|
return { state };
|
},
|
}).mount('#leaderBoard');
|
</script>
|
|
</html>
|
