kkc-shop/src/components/AdvertisingLeftButton.vue

<template>
  <div class="adver">
    <div class="adver-name">
      <span>{{ adver.name }}</span>
    </div>
    <div class="adver-icon">
      <img src="../assets/svg/right.svg" width="24" height="24">
    </div>
  </div>
</template>
<script setup lang="ts">
import {AdverLeft} from "../entity/AdverLeft.ts";

const props = defineProps({
  adver: {
    type: AdverLeft,
    required: true
  }
})


</script>

<style scoped lang="scss">
.adver {
  margin: 0;
  padding: 0;
  width: 268px;
  display: flex;
  justify-content: space-between;

  height: 40px;
  cursor: pointer;

  &:hover .adver-name span {
    text-decoration: underline;
  }

  .adver-name {
    margin-left: 19px;
    display: inline-block;
    width: 228px;
    height: 40px;
    align-items: start;
    justify-content: space-between;
    vertical-align: top;
    text-align: left;

    span {
      line-height: 40px;
      text-decoration: none;
      color: #333333;
    }
  }

  .adver-icon {
    display: inline-block;
    align-items: end;
    justify-content: space-between;
    width: 40px;
    height: 40px;

    img {
      height: 12px;
      margin-top: 14px;
      align-items: center;
      vertical-align: middle;
      line-height: 40px;
    }
  }
}
</style>