✨ feat(按钮组件): 细节调整

@@ -53,7 +53,7 @@ export default {
     background: @base;
     background: @base;
     border-radius: 24px;
     border-radius: 24px;
     border: 1px solid @base;
     border: 1px solid @base;
-    color: #0B3A72;
+    color: #713610;
     font-weight: bold;
     font-weight: bold;
   }
   }
   .button-plain {
   .button-plain {
@@ -65,8 +65,8 @@ export default {
     font-size: 1rem;
     font-size: 1rem;
     background: #FFFFFF;
     background: #FFFFFF;
     border-radius: 24px;
     border-radius: 24px;
-    border: 1px solid #0B3A72;
-    color: #0B3A72;
+    border: 1px solid #713610;
+    color: #713610;
     font-weight: bold;
     font-weight: bold;
   }
   }
   .button-custom {
   .button-custom {

@@ -83,10 +83,10 @@
         <span style="font-size: 0.85rem;">订阅</span>
         <span style="font-size: 0.85rem;">订阅</span>
       </div>
       </div>
       <div class="button">
       <div class="button">
-        <my-button @on-click="payFor" type="custom" :custom-style="styleObject1">爱心捐书</my-button>
+        <my-button @on-click="payFor" type="plain">爱心捐书</my-button>
       </div>
       </div>
       <div class="button">
       <div class="button">
-        <my-button @on-click="uploadVideo" type="custom" :custom-style="styleObject2">上传作品</my-button>
+        <my-button @on-click="uploadVideo" type="primary">上传作品</my-button>
       </div>
       </div>
     </div>
     </div>
     <to-me @on-click="gotoMe()"></to-me>
     <to-me @on-click="gotoMe()"></to-me>
@@ -116,18 +116,6 @@ import { Toast } from 'vant';
 const $route = useRoute();
 const $route = useRoute();
 const $router = useRouter();
 const $router = useRouter();
 
 
-// 自定义按钮颜色样式
-const styleObject1 = reactive({
-  backgroundColor: '#FFFFFF',
-  color: '#713610',
-  borderColor: '#713610'
-})
-const styleObject2 = reactive({
-  backgroundColor: '#F9D95C',
-  color: '#713610',
-  borderColor: '#F9D95C'
-})
-
 const items = reactive([])
 const items = reactive([])
 
 
 const gotoMe = () => {
 const gotoMe = () => {

@@ -7,10 +7,12 @@
     <p style="color: #B8B8B8; margin: 1rem; margin-bottom: 0;">请选择您的身份</p>
     <p style="color: #B8B8B8; margin: 1rem; margin-bottom: 0;">请选择您的身份</p>
     <div class="control">
     <div class="control">
       <div class="plain">
       <div class="plain">
-        <my-button type="plain" @on-click="goVisit">访客</my-button>
+        <!-- <my-button type="plain" @on-click="goVisit">访客</my-button> -->
+        <my-button type="custom" :custom-style="styleObject1" @on-click="goVisit">访客</my-button>
       </div>
       </div>
       <div class="primary">
       <div class="primary">
-        <my-button type="primary" @on-click="goSchool">我有所属幼儿园</my-button>
+        <!-- <my-button type="primary" @on-click="goSchool">我有所属幼儿园</my-button> -->
+        <my-button type="custom" :custom-style="styleObject2" @on-click="goSchool">我有所属幼儿园</my-button>
       </div>
       </div>
     </div>
     </div>
   </div>
   </div>
@@ -22,10 +24,22 @@ import MyButton from '@/components/MyButton/index.vue'
 import $ from 'jquery';
 import $ from 'jquery';
 import { useRoute, useRouter } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
 import { Toast } from 'vant';
 import { Toast } from 'vant';
-import { nextTick, onMounted } from 'vue'
+import { nextTick, onMounted, reactive } from 'vue'
 const $route = useRoute();
 const $route = useRoute();
 const $router = useRouter();
 const $router = useRouter();
 
 
+// 自定义按钮颜色样式
+const styleObject1 = reactive({
+  backgroundColor: '#FFFFFF',
+  color: '#0B3A72',
+  borderColor: '#0B3A72'
+})
+const styleObject2 = reactive({
+  backgroundColor: '#F9D95C',
+  color: '#0B3A72',
+  borderColor: '#F9D95C'
+})
+
 const goVisit = () => { // 跳转爱心书籍页面
 const goVisit = () => { // 跳转爱心书籍页面
   $router.push({
   $router.push({
     path: '/client/chooseBook'
     path: '/client/chooseBook'
@@ -83,7 +97,8 @@ export default {
       margin-top: 0.5rem;
       margin-top: 0.5rem;
       overflow: auto;
       overflow: auto;
       .plain {
       .plain {
-        width: 30%; float: left;
+        width: 29%; float: left;
+        margin-right: 1%;
       }
       }
       .primary {
       .primary {
         width: 70%; float: left;
         width: 70%; float: left;