日常小练习1-淘宝商品展示

1.淘宝商品展示

涉及内容：el-dropdown，父相子绝定位，旋转rotate

<template>
  <div class="container">
    <img src="@/assets/image/login/side-logo.png" alt="">
    <div class="tag">标签</div>
    <div>
      <span>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜。
      </span>
    </div>
    <div style="display: flex;justify-content:space-between;align-items: center;">
      <div style="font-size: 10px;color:bisque">从前从前从前从前从前从前</div>
  <el-dropdown>
    <span class="el-dropdown-link" style="cursor: pointer;">
      ...
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>Action 1</el-dropdown-item>
        <el-dropdown-item disabled>Action 4</el-dropdown-item>
        <el-dropdown-item divided>Action 5</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
    </div>
  </div>
  
</template>
<script lang="ts" setup>
import {ref} from "vue"
</script>
<style scoped>
.container{
  width: 200px;
  height: 100%;
  border: 1px solid rgb(255, 255, 255);
  padding: 5px;
  position: relative;
  overflow: hidden;
}
img{
  width: 200px;
}
.tag{
  position: absolute;
  top: 8px;
  right: -30px;
  background-color: black;
  width: 100px;
  text-align: center;
  transform: rotate(45deg);
}

</style>