shenchunlv 2 лет назад
Родитель
Сommit
35db1514d9
3 измененных файлов с 17 добавлено и 11 удалено
  1. 2 2
      pages/index.vue
  2. 15 9
      pages/m_user.vue
  3. BIN
      public/image/title-left-x.png

+ 2 - 2
pages/index.vue

@@ -268,12 +268,12 @@
         </n-form-item>
         <n-form-item path="verifyCode" label="验证码" class="">
           <n-input v-model:value="customer.verifyCode" class="h-[55px] leading-[55px]" placeholder="请输入验证码" />
-          <n-button type="info" class="w-[150px] h-[55px] text-[#fff] bg-[#1f4df5] ml-[20px] rounded-[4px]" :disabled="countdown != 0"
+          <n-button type="info" class="w-[150px] h-[55px] text-[#fff] bg-[#1f4df5] ml-[20px] rounded-[4px] text-[20px]" :disabled="countdown != 0"
             @click="verifyCodeFn">
             {{ countdown == 0 ? '获取验证码' : countdown }}
           </n-button>
         </n-form-item>
-        <div class="flex justify-center">
+        <div class="flex justify-center mt-[20px]">
           <n-button type="info" class="w-[400px] h-[55px] text-[20px] text-[#fff] bg-[#1f4df5] rounded-[4px]" @click="handleValidateButtonClick">
             立即提交
           </n-button>

+ 15 - 9
pages/m_user.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="flex mx-[20px] h-[44px] items-center">
-    <div class="w-[24px]">
+    <div class="w-[24px]" v-if="!active" @click="active =true">
       <img src="~/public/image/title-left.png" style="width: 24px;" alt="">
     </div>
+    <div class="w-[24px]" v-else @click="active =false">
+      <img src="~/public/image/title-left-x.png" style="width: 24px;" alt="">
+    </div>
     <div class="flex-1 flex items-center justify-center">
       <img src="~/public/favicon.ico" style="width: 24px;" alt="">
     </div>
@@ -201,6 +204,11 @@
       </div>
     </div>
   </div>
+  <n-drawer v-model:show="active" :width="200" placement="left">
+    <n-drawer-content title="斯通纳">
+      《斯通纳》是美国作家约翰·威廉姆斯在 1965 年出版的小说。
+    </n-drawer-content>
+  </n-drawer>
   <n-modal v-model:show="showModal">
     <n-card style="width: 800px" title="申请试用" :bordered="false" size="huge" role="dialog" aria-modal="true">
       <div class="text-[#999999] text-[12px] pt-[15px] pb-[30px]">
@@ -272,14 +280,8 @@ const headerTitle = reactive([
 ]
 )
 const activeNames = ref(['1']);
-const titleRight = (i: string) => {
-  if (i == 'probation') {
-    btn()
-    return
-  }
-  document.querySelector('#' + i)?.scrollIntoView()
-
-}
+// 抽屉展示
+const active = ref(false)
 const freeList = reactive(['3', '0', '7', '0', '1', '3', '7', '4'])
 const message = useMessage()
 const num = reactive([{
@@ -529,6 +531,10 @@ p {
 }
 
 // 框
+// .n-drawer.n-drawer--left-placement
+::v-deep(.n-drawer){
+  top: 44px !important;
+}
 ::v-deep(.n-card-header__main) {
   flex: inherit !important;
   margin: 0 auto !important;

BIN
public/image/title-left-x.png