<template>
  <HeaderNav headerText="交易指南"></HeaderNav>
  <div class="transaction-guide">
    <div class="guide-title pf500 fs18 fc333333">交易指南</div>
    <div class="guide-desc">
      <div class="desc-item" v-for="(item, index) in 4" :key="index">
        <img src="@/assets/icon/asset/right-arrow-black.svg" alt="" />
        <div class="item-text pf500 fs14 fc666666">
          交易指南文本内容标题交易指南文本内容标题交易指南文本内容标题交易指南文本内容标题
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import HeaderNav from "../../../index/components/HeaderNav.vue";
</script>
<style lang="less" scoped>
  .transaction-guide {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 48px;
    width: 100%;

    .guide-title {
      width: 345px;
    }

    .guide-desc {
      width: 327px;

      .desc-item {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 16px 0;
        width: 100%;
        border-bottom: 1px solid #f5f5f5;

        .item-text {
          margin-left: 14px;
        }
      }
    }
  }
</style>
