108 lines
6.1 KiB
Vue
108 lines
6.1 KiB
Vue
<template>
|
|
<div style="width:340px;height:auto;display: flex;">
|
|
<div class="NavInfo" id="Rec" style="display:flex;flex-direction: column;">
|
|
<div style="background-color: rgba(255,147,207,0.2);
|
|
width:100%;border-radius:10px;
|
|
font-size:25px;border-color:var(--border-color) ;border-width: 5px">
|
|
<span style="padding-left:20px;color:var(--theme-color);font-family:STHupo"><i class="el-icon-s-opportunity"></i> 热门推荐</span>
|
|
</div>
|
|
<div class="RecAll">
|
|
<div class="SingleLabel">
|
|
<div class="app-card" id="ALabel">
|
|
<!-- <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
|
|
<!-- </div>-->
|
|
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
|
|
<img class="little-Circle" style="width:35px !important;height: 35px !important;" src="../../assets/img/beauty.jpg"/>
|
|
<span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
|
|
</div>
|
|
</div>
|
|
<div class="app-card" id="ALabel">
|
|
<!-- <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
|
|
<!-- </div>-->
|
|
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
|
|
<img class="little-Circle" style="width:35px !important;height: 35px !important;" src="../../assets/img/beauty.jpg"/>
|
|
<span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
|
|
</div>
|
|
</div>
|
|
<div class="app-card" id="ALabel">
|
|
<!-- <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
|
|
<!-- </div>-->
|
|
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
|
|
<img class="little-Circle" style="width:35px !important;height: 35px !important;" src="../../assets/img/beauty.jpg"/>
|
|
<span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
|
|
</div>
|
|
</div>
|
|
<div class="app-card" id="ALabel">
|
|
<!-- <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
|
|
<!-- </div>-->
|
|
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
|
|
<img class="little-Circle" style="width:35px !important;height: 35px !important;" src="../../assets/img/beauty.jpg"/>
|
|
<span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="SingleLabel" style=" margin-left:3px;">
|
|
<div class="app-card" id="ALabel">
|
|
<!-- <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
|
|
<!-- </div>-->
|
|
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
|
|
<img class="little-Circle" style="width:35px !important;height: 35px !important;" src="../../assets/img/beauty.jpg"/>
|
|
<span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
|
|
</div>
|
|
</div>
|
|
<div class="app-card" id="ALabel">
|
|
<!-- <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
|
|
<!-- </div>-->
|
|
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
|
|
<img class="little-Circle" style="width:35px !important;height: 35px !important;" src="../../assets/img/beauty.jpg"/>
|
|
<span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
|
|
</div>
|
|
</div>
|
|
<div class="app-card" id="ALabel">
|
|
<!-- <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
|
|
<!-- </div>-->
|
|
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
|
|
<img class="little-Circle" style="width:35px !important;height: 35px !important;" src="../../assets/img/beauty.jpg"/>
|
|
<span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
|
|
</div>
|
|
</div>
|
|
<div class="app-card" id="ALabel">
|
|
<!-- <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
|
|
<!-- </div>-->
|
|
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-10px;margin-top:-18px">
|
|
<img class="little-Circle" style="width:35px !important;height: 35px !important;" src="../../assets/img/beauty.jpg"/>
|
|
<span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name:"HotRecomment",
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
}},
|
|
mounted() {
|
|
|
|
},
|
|
created() {
|
|
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
|
</style> |