Review changes batch 6 of 6

components/AppButton.vue

@@ -0,0 +1,82 @@
+<template>
+  <view
+    class="app-button"
+    :class="[
+      `app-button--${type}`,
+      { 'app-button--block': block, 'app-button--disabled': disabled },
+    ]"
+    :hover-class="disabled ? 'none' : 'app-button--pressed'"
+    @click="handleClick"
+  >
+    <image class="app-button__skin" :src="skin" mode="aspectFit" />
+    <text class="app-button__label"
+      ><slot>{{ label }}</slot></text
+    >
+  </view>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  label: { type: String, default: "" },
+  type: { type: String, default: "primary" },
+  block: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+});
+const emit = defineEmits(["click"]);
+
+const skin = computed(() =>
+  props.type === "secondary"
+    ? "/static/assets/foundation/transparent/a01-scroll-secondary-v3.png"
+    : "/static/assets/foundation/transparent/a01-scroll-primary-v3.png",
+);
+
+const handleClick = (event) => {
+  if (!props.disabled) emit("click", event);
+};
+</script>
+
+<style scoped lang="scss">
+.app-button {
+  position: relative;
+  display: inline-flex;
+  width: 420rpx;
+  max-width: 100%;
+  min-height: 88rpx;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+.app-button--block {
+  display: flex;
+  width: 100%;
+}
+.app-button__skin {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.app-button__label {
+  position: relative;
+  z-index: 1;
+  padding: 0 38rpx;
+  color: #fffaf0;
+  font-size: 29rpx;
+  font-weight: 700;
+  letter-spacing: 3rpx;
+  text-align: center;
+}
+.app-button--secondary .app-button__label {
+  color: #5c4330;
+}
+.app-button--disabled {
+  opacity: 0.48;
+}
+.app-button--pressed {
+  opacity: 0.78;
+  transform: translateY(1rpx);
+}
+</style>