4

我使用它提供的布局元素的 CSS 粗略地设计了我的 webapp 布局 Figma。我正在运行 Vue.js 2 SPA，现在想亲身体验将 html/css 转换为 Vue.js 组件的设计。我做到了尽可能简单地了解 CSS 和所有这些。

使用 BEM CSS 约定（这对我保持概述有很大帮助）我将 Figma 的所有元素 CSS 放入我的 Vue 组件的 CSS 类中。div然后我为每个（BEM）块创建了几个。

一些视觉效果和内容要跟随

例子.vue

<template>
  <v-container fluid>
    <div class="storage__header"></div>
    <div class="storage__header-text">Storage</div>
    <div class="storage__table-body"></div>
    <div class="storage__table-header"></div>
    <div class="storage__table-header-type">Type</div>
    <div class="storage__table-header-amount">Amount</div>
  </v-container>
</template>

<script>

export default {
  name: 'SettlementStorage',
}
</script>
<style>
.storage__header-text {
  position: absolute;
  width: 166px;
  height: 35.04px;
  left: 3px;
  top: 258px;

  font-family: Aref Ruqaa,monospace;
  font-style: normal;
  font-weight: normal;
  font-size: 35px;
  line-height: 55px;
  display: flex;
  align-items: center;
  text-align: center;

  color: #000000;
}
.storage__header {: width:;
  position: absolute;
  width: 359px;
  height: 42px;
  left: -7px;
  top: 258px;
  background: #8F7F59;
  border-radius: 0px 200px 15px 0px;
}
.storage__table-header-amount {
  position: absolute;
  width: 100.42px;
  height: 27.33px;
  left: 235.65px;
  top: 309.91px;

  font-family: Aref Ruqaa,monospace;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 23px;
  text-align: center;

  color: #000000;
}
.storage__table-header-type {
  position: absolute;
  width: 78.55px;
  height: 24.53px;
  left: 10.94px;
  top: 309.91px;

  font-family: Aref Ruqaa,monospace;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 23px;
  text-align: center;

  color: #000000;
}
.storage__table-header {
  position: absolute;
  width: 350px;
  height: 42.74px;
  left: -2px;
  top: 305px;
  background: linear-gradient(180deg, rgba(48, 41, 25, 0.25) 60.66%, rgba(55, 66, 63, 0) 100%);
}
.storage__table-body {
  position: absolute;
  width: 360px;
  height: 341.96px;
  left: -7px;
  top: 300.04px;

  background: #C2B391;
  border: 5px solid #37423F;
  box-sizing: border-box;
  border-radius: 0px 0px 20px 0px;
}
</style>

结果如下：

在此处输入图像描述

所以不要在这里误会我的意思。我非常高兴一切看起来仍然像在 Figma 中设计的一样。但是作为后端工程师，我觉得有点奇怪。我很确定我在这里做了一个非常天真的方法——只使用div元素来应用 CSS 样式。

这是这样做的方法吗？ 或者我现在应该开始将所有这些重构为对这些元素进行样式设置的正确方式。我非常迷茫，真的不知道我应该要求什么或我应该在谷歌上搜索最佳实践。

4

0 回答 0