74 lines
1.5 KiB
Vue
74 lines
1.5 KiB
Vue
<template>
|
|
<div class="regular-box">
|
|
<div class="btn-s first-bg" @click="">
|
|
<img src="../../assets/homeImage/indexRegularFirst.png" class="first" alt="">
|
|
</div>
|
|
<div class="btn-s other-bg mg-t-15">
|
|
<img src="../../assets/homeImage/indexRegularSecond.svg" class="other-img" alt="">
|
|
</div>
|
|
<div class="btn-s other-bg mg-t-15">
|
|
<img src="../../assets/homeImage/indexRegularThird.svg" class="other-img" alt="">
|
|
</div>
|
|
<el-badge :value="12" class="mg-t-15">
|
|
<div class="btn-s other-bg">
|
|
<img src="../../assets/homeImage/indexRegularFourth.svg" class="other-img" alt="">
|
|
</div>
|
|
</el-badge>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
</script>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
List: {
|
|
type: Array,
|
|
default: function () {
|
|
return []
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.regular-box {
|
|
position: fixed;
|
|
right: 30px;
|
|
bottom: 60px;
|
|
z-index: 555;
|
|
|
|
.first-bg {
|
|
background: #fdda55;
|
|
}
|
|
|
|
.other-bg {
|
|
background: #62b1ff;
|
|
}
|
|
|
|
.btn-s {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.first {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.other-img {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
}
|
|
|
|
.mg-t-15 {
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
</style>
|
|
|