<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>