VAVABUY/pages/user/beginner_guide.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar title="新手教程" fixed border>
        <template #right>
          <navMenu :options="{ icon: 'icon-home', text: '主页' }" />
        </template>
      </Navbar>
      <view class="content">
        <view class="step">
          <view
            class="step_content"
            v-for="(item, index) in detail"
            :key="index"
          >
            <view class="step_content_title">{{ item.name }}</view>
            <view
              class="step_wrapper"
              v-for="(val, num) in item.lists"
              :key="num"
            >
              <view class="wrapper_title">
                <text class="uppercase">{{ t("步骤") }}{{ num + 1 }}</text>
                {{ val.title }}
              </view>
              <view class="wrapper_content">
                <rich-text :nodes="val.content"></rich-text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </Theme>
</template>
<script setup>
import Navbar from "@/components/navbar";
import navMenu from "@/components/nav_menu";
import { ref } from "vue";
import { CONTENT_TUTORIAL } from "@/api";
import { t } from "@/locale";

const detail = ref([]);
const getDetail = async () => {
  try {
    const res = await CONTENT_TUTORIAL();
    detail.value = res.data;
  } catch (error) {}
};
getDetail();
</script>
<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  min-height: 100vh;
  background-color: var(--light);

  .content {
    padding: 24rpx;

    .step {
      &_content {
        &_title {
          border-left: 4px solid var(--black);
          color: var(--text);
          font-weight: 700;
          .size(48rpx);
          padding-left: 24rpx;
          height: 80rpx;
          margin-bottom: 24rpx;
          margin-top: 24rpx;
        }

        .step_wrapper {
          .wrapper_title {
            .ver();
            .size();
            font-weight: 700;
            color: var(--text-02);

            .uppercase {
              height: 76rpx;
              border-radius: 50px;
              padding: 0 40rpx;
              background-color: var(--text);
              color: var(--light);
              .ver();
              margin-right: 24rpx;
            }
          }

          .wrapper_content {
            margin-top: 40rpx;
            padding-left: 16rpx;

            /deep/ .method-wrapper {
              .flex();
              flex-direction: column;
              gap: 24rpx;
              .method-card {
                .flex();
                flex-direction: column;
                gap: 24rpx;
                color: #000;
                .size(28rpx);
                line-height: 60rpx;

                .method-tag {
                  background: #fff3ea;
                  color: #000;
                  .size(28rpx);
                  font-weight: 700;
                  height: 76rpx;
                  width: fit-content;
                  min-width: 88rpx;
                  padding: 0 16px;
                  .flex_center();
                }
                .method-img-wrapper {
                  padding-bottom: 0 !important;
                }
              }
            }
            /deep/ img {
              width: 100%;
              display: block;
            }
          }
        }
      }
    }
  }
}
</style>