<template>
|
<div class="scoreContainer">
|
<div class="under">
|
<div class="imgBox pan">
|
<img src="./score.png" alt="" />
|
</div>
|
<i class="imgBox arrow"><img src="./arrow.png" alt="" /></i>
|
</div>
|
<div class="score tc"><span>98</span><em>分</em></div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "score",
|
components: {},
|
data() {
|
return {};
|
},
|
mounted() {},
|
methods: {},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.scoreContainer {
|
height: 100%;
|
position: relative;
|
|
.score {
|
position: absolute;
|
width: 100%;
|
top: 40px;
|
height: 60px;
|
line-height: 60px;
|
|
span {
|
background-image: -webkit-linear-gradient(100deg, #00c6ff, #ffffff);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
font-size: 60px;
|
font-family: DIN;
|
vertical-align: baseline;
|
}
|
|
em {
|
color: #00c6ff;
|
margin-left: 10px;
|
vertical-align: baseline;
|
}
|
}
|
|
.under {
|
position: absolute;
|
width: 90%;
|
transform: translateX(-50%);
|
left: 50%;
|
top: 90px;
|
|
.pan {
|
position: absolute;
|
width: 110%;
|
transform: translateX(-50%);
|
left: 50%;
|
}
|
|
.arrow {
|
position: absolute;
|
width: 9px;
|
height: 8px;
|
transform: translateX(-50%);
|
left: 98%;
|
top: 42px;
|
}
|
}
|
}
|
</style>
|
