✨ feat: 新增自定义主题颜色背景配置

@@ -13,6 +13,16 @@
     </van-col>
   </van-row>
   <router-view v-else></router-view>
+  <div
+    style="
+      text-align: center;
+      color: #545454;
+      font-size: 0.85rem;
+      transition: opacity 0.4s linear;
+    "
+  >
+    提交即授权该表单收集你的填写信息
+  </div>
 </template>
 
 <script setup>
@@ -69,6 +79,8 @@ onMounted(async () => {
   // wx.error((err) => {
   //   console.warn(err);
   // });
+  // TAG: 全局背景色
+  document.querySelector("body").setAttribute("style", "background-color:#fff9ef");
 });
 </script>
 
@@ -80,7 +92,8 @@ body {
   width: 100%;
   height: 100%;
   color: @base-font-color;
-  background-color: #f7f8fa;
+  // background-color: #f7f8fa;
+  // background-color: #fff9ef;
   padding: 0;
   margin: 0;
 }

@@ -6,37 +6,39 @@
  * @Description: 首页
 -->
 <template>
-  <van-image
-    v-if="PHeader.type === '单张图'"
-    width="100%"
-    height="200"
-    :src="PHeader.cover"
-  />
-  <template v-if="PHeader.type === '轮播图'">
-    <van-swipe class="my-swipe" lazy-render indicator-color="white">
-      <van-swipe-item v-for="image in PHeader.cover" :key="index"
-        ><img :src="image" style="height: 12rem; width: 100%; object-fit: cover"
-      /></van-swipe-item>
-    </van-swipe>
-  </template>
-  <div v-if="PHeader.label" class="table-title">{{ PHeader.label }}</div>
-  <div v-if="PHeader.description" class="table-desc">{{ PHeader.description }}</div>
   <div class="table-box">
-    <van-form @submit="onSubmit">
-      <van-cell-group>
-        <component
-          :ref="item.component_props.name"
-          v-for="(item, index) in formData"
-          :key="index"
-          :is="item.component"
-          :item="item"
-          @active="onActive"
-        />
-      </van-cell-group>
-      <div style="margin: 16px">
-        <van-button round block type="primary" native-type="submit"> 提交 </van-button>
-      </div>
-    </van-form>
+    <van-image
+      v-if="PHeader.type === '单张图'"
+      width="100%"
+      height="200"
+      :src="PHeader.cover"
+    />
+    <template v-if="PHeader.type === '轮播图'">
+      <van-swipe class="my-swipe" lazy-render indicator-color="white">
+        <van-swipe-item v-for="image in PHeader.cover" :key="index"
+          ><img :src="image" style="height: 12rem; width: 100%; object-fit: cover"
+        /></van-swipe-item>
+      </van-swipe>
+    </template>
+    <div v-if="PHeader.label" class="table-title">{{ PHeader.label }}</div>
+    <div v-if="PHeader.description" class="table-desc" v-html="PHeader.description" />
+    <van-config-provider :theme-vars="themeVars">
+      <van-form @submit="onSubmit">
+        <van-cell-group :border="false">
+          <component
+            :ref="item.component_props.name"
+            v-for="(item, index) in formData"
+            :key="index"
+            :is="item.component"
+            :item="item"
+            @active="onActive"
+          />
+        </van-cell-group>
+        <div style="margin: 16px">
+          <van-button round block type="primary" native-type="submit"> 提交 </van-button>
+        </div>
+      </van-form>
+    </van-config-provider>
   </div>
 </template>
 
@@ -49,6 +51,12 @@ import { queryFormAPI } from "@/api/form.js";
 import { addFormDataAPI } from "@/api/data.js";
 import { showSuccessToast, showFailToast } from "vant";
 
+// TAG: 自定义主题颜色
+const themeVars = {
+  buttonPrimaryBackground: "#c2915f",
+  buttonPrimaryBorderColor: "#c2915f",
+};
+
 const $route = useRoute();
 const PHeader = ref({});
 const PHeader_cover = ref("");
@@ -221,10 +229,12 @@ const validOther = () => {
 }
 .table-desc {
   padding: 0rem 1rem;
-  color: #bababa;
+  color: #666;
   font-size: 0.9rem;
 }
 .table-box {
-  padding: 1rem;
+  margin: 1rem;
+  background-color: #ffffff;
+  padding-bottom: 1rem;
 }
 </style>